Table cell validation in vuejs and laravel 5.4 - dynamic

I’m very new to VUE and trying loop through dynamically created tables from unique arrays. I have the table creation complete and dynamic table id’s based off a value from the array. I’m trying to validate that either cell[0] in each row contains a specific string or if the last cell[?] which has a select dropdown has been selected and is said string.
I’ve done something similar before in JS like this.
$("#" + t_node + " :selected").each(function (i,sel) { .....///code }
and like this
$("table#"+t_node+" > tbody > tr").each(function(row, tr) { .....///code }
I don’t know how to replicate with VUE.
I have a onclick event that I want to loop through the table and for any row that has p2vg01 already created sum its size along with any select option of p2vg01. In the below table I’d want to find that SDB was selected at 107GB. Not shown but it could be that SDB was already p2vg01 but if I selected SDC as well as p2vg01 I’d sum 32GB + 107GB.
<div v-for="storageResult in storageValidationResults" >
<h3 class="panel-title">{{ storageResult.node_name }}</h3>
<table :ref="storageResult.node_name" v-bind:id="storageResult.node_name" class="table table-bordered table-striped table-hover" >
<thead>
<th v-for="(value, key, index) in storageResult.table_head">
{{ value }}
</th>
<th>Select</th>
</thead>
<tbody>
<tr v-for="(value, key, index) in storageResult.disk_data">
<td v-for="v in value">
{{ v }}
</td>
<td v-if="checkAvailable(value)">
<select>
<option value="">--Select VG--</option>
<option value="p2vg00">p2vg00</option>
</select>
</td>
<td v-else=""></td>
</tr>
</tbody>
</table>
</div>

Related

listen for server sent event (SSE) with HTMX and append to a table

I made a simple Go backend that renders an html table (from a SQLite database).
In the same backend i have an /updates endpoint with SSE events when a new row is added to the database.
I want to use htmx to listen for events and then add a row to the table.
What is the right pattern to do this?
I've read https://htmx.org/extensions/server-sent-events/
the example here is to trigger a GET when an event arrives:
<div hx-ext="sse" sse-connect="/updates">
<div hx-get="/table" hx-trigger="sse:rowadded">
...
</div>
</div>
In this way i request the entire table at every update.
How could i add only a single row to the existent rendered table?
You can do this with client side templates.
See https://htmx.org/extensions/client-side-templates/
Example:
<table>
<thead>
<tr>
<th>
Manufacturer
</th>
<th>
Model
</th>
<th>
Power (KW)
</th>
</tr>
</thead>
<tbody id="idTableBody">
<tr id="ModelId_250">
<td>Husqvarna</td>
<td>701 Supermoto</td>
<td>55</td>
</tr>
</tbody>
</table>
In this example mustache is used as templating engine.
<div hx-ext="client-side-templates">
<div hx-ext="sse" sse-connect="/sse-motorbikes">
<div sse-swap="new_bike"
hx-swap="afterbegin"
hx-target="#idTableBody"
mustache-template="idTemplateInsertModel">
</div>
</div>
</div>
Note: EventName is new_bike
Here is the template:
<template id="idTemplateInsertModel">
<tr id="modelId_{{modelId}}">
<td>
{{manufacturer}}
</td>
<td>
{{model}}
</td>
<td>
{{power}}
</td>
</tr>
</template>
With this sse event
type: "new_bike"
data:'{"modelId":208,"manufacturer":"Honda","model":"CRF 1100 L Africa Twin","power":75}'
this row will be inserted into the table body
<tr id="modelId_208">
<td>Honda</td>
<td>CRF 1100 L Africa Twin</td>
<td>75</td>
</tr>
Update
If you want to use a GET request to fetch the new row from the server, you can pass the data sent with the sse event (e.g. an id) to the request.
Check out the answer to this question.
https://stacko...how-to-get-url-for-htmx-get-from-an-sse-event-which-itself-triggers-the-hx-get-c

Fixed Column on HTML Table with Vue JS

I'm having a problem with my table when I scroll to the right
this is my code
TableComponent.vue
<div id="main-container">
<table class="maint-table">
<thead id="table-header">
<tr>
<th class="dates"> </th>
<th v-for="data in dateHeader">{{data}}</th>
</tr>
<tr>
<th class="title"> </th>
<th v-for="data in dayOfWeek">{{data}}</th>
</tr>
</thead>
<tbody id="table-body" #scroll="fixedScroll">
<table_block :table_data="dataHeader"></table_block>
<table_block :table_data="allData"></table_block>
</tbody>
</table>
</div>
...
...
...
<script>
components: {
table_block
},
methods: {
fixedScroll() {
fixedScroll(event) {
var thead = document.getElementById("table-header");
var tbodyScroll = document.getElementById("table-body").scrollLeft;
thead.scrollLeft = tbodyScroll;
}
</script>
I made a props to pass the data to my TableBlock to loop through the data and display it on the table. This is my TableBlock Code.
TableBlock.vue
<template>
<div>
<tr v-for="row in table_data">
<td>
<div class="drop-down-container"><span class="drop-down-controller"">{{ row.title }}</span></div>
</td>
<td v-for="cel in row.data" class="group-header">{{ cel }}</td>
</tr>
</div>
</template>
When I scroll it to the right, the first column must freeze but it's not.
I tried to create a dummy data inside TableComponent.vue with a normal HTML Table without passing the data to another component using props, it works perfectly. But when I use these codes, it doesn't work correctly.
Scenario
Let say I have 10 columns in the table, when I scroll it to the right, the 1st column will stick which is normal but when the 10th column reach to 1st column, the 1st column will scroll away together with the 10th column.
I'm trying my best to illustrate the scenario but this is the best that I can do. If someone can help, please help me.

vue.js when sorting grid only values is updated, not HTML

I am new to Vue.js, and could really use som help on this one.
I am trying to put a class (success) on my table rows to give them background color depending on the value of a property (status) in each of the objects in Array (data), wich is working as intended using the v-bind:class.
The problem arises when i sort the table rows by clicking on the table headers. When this is done there is a mismatch between the colored rows and their content, as if only values of rows is updated and not the rows themselves.
Try it here : https://jsfiddle.net/Bayzter/cyv1o78s/
Does anyone know how to solve this, so colored rows again match up with the correct objects?
<script type="text/x-template" id="grid-template">
<table>
<thead>
<tr>
<th v-for="key in columns"
#click="sortBy(key)"
:class="{active: sortKey == key}">
{{key | capitalize}}
<span class="arrow"
:class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="
entry in data
| filterBy filterKey
| orderBy sortKey sortOrders[sortKey]" v-bind:class="{ 'success' : data[$index].status == 0}">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
</tbody>
</table>
</script>
<!-- demo root element -->
<div id="demo">
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
<demo-grid
:data="gridData"
:columns="gridColumns"
:filter-key="searchQuery">
</demo-grid>
</div>
Where you have
v-bind:class="{ 'success' : data[$index].status == 0}"
You want
v-bind:class="{ 'success' : entry.status == 0}"
$data[$index] is not going to refer to the current-order item, it's going to refer to the original-order item. entry is the current item.

Dynamic Interpolation in Angular2

I am learning Angular-2 and try to build data-grid component and run into a problem with dynamic interpolation.
Assume, the other component will consume the data-grid like the following:
<data-grid [model] = 'users'>
<column header='Last Name' value="lastName" ></column>
<column header='First Name' value='firstName' ></column>
<column header='Address' value='address' ></column>
</data-grid>
The data-grid component holds a collection of columns. From the data-gird, I try to loop through the columns collection to build the column header then show all data. The headers for the table is easy but I don't know how to do the nested interpolation for row and columns.
<div class="container" >
<table class="table table-hover">
<thead class="thead-default">
<tr>
<th template="ngFor let col of columns">
{{ col.header}}
<th>
</tr>
</thead>
<tbody>
<tr template="ngFor let row of model">
<td template="ngFor let col of columns">
<!-- want to loop though the columns
{{row.{{col.value}}}} //How to make this statement works? -->
</td>
</tr>
</tbody>
</table>
</div>
Any idea how to solve this problem?
thanks,
Austin
You do not need the additional evaluation brackets. Use square brackets for array indexing.
<tr *ngFor="let row of model">
<td *ngFor="let col of columns">
{{row[col.value]}}
</td>
</tr>
http://plnkr.co/edit/DVwolRDu0JNcsXTaTrir

Disabling many drop down list all at once using javascript

<table align="center" border="0" id="typeTable" >
<%for(int i=1;i<=count;i++){%>
<tr id="a">
<td align="left" valign="top">
<p>Problem Type <%=i+1 %></p>
</td >
<td align="left" valign="middle">
<p>Number of question to generate: </p>
</td>
<td align="left" valign="middle" >
<select name="type<%=i %>" id="mySelect" >
<option>0</option>
<option>5</option>
<option>10</option>
<option>20</option>
</select>
</td>
</tr>
<%}%>
<input type="hidden" name="totalNumOfType" value="<%=count%>"/>
</table>
Hi, I have the code above to do a for loop for the table row when I get a count from the database to show how many types of problems in math topic.
The drop down menu list name I have put the int I for the name to have each row an individual name so that I can pass the value of each drop down list selected to the next page which I can do successfully.
The issue now is I have problem disabling all the drop down menu list at onece using the javascript as it will not know how many count there will be.
I have used the following code to disable the drop down menu for example.
<script type="text/javascript">
function disable()
{
document.getElementById("mySelect").disabled=true;
}
function enable()
{
document.getElementById("mySelect").disabled=false;
}
</script>
I have been thinking but no avail. any help would be much appreciated. Thank you!
did you tryed jquery prop function : $("#mySelect").prop("disabled",true) ?