Vue - How modify this code so not new selects shows up? - vue.js

This fiddle has almost all I want:
http://jsfiddle.net/jjpfvx5q/1/
However I want just the first sub select to appear.
As for now, if you first select first item in main select and something from the sub select that appaears, and go back to main and select second option, then a new third selectbox is appearing.
I don't want that to happen. I just want to have one main select and a second that populates depending on choice in the first one. So just these two, no matter of how many times I reselect from the main one.
I am new to Vue and find it hard to see where to make that change.

The problem is, when you select a city, you are pushing same cities into cityPacks array. No matter what, exists or not, performing this action. That populates new selectbox according to new data.
Simply, you can empty your cityPacks array before switch statement.
this.cityPacks = [];

#TugayÄ°lik's answer is correct, but in case you want to retain a 'history' of use selections in cityPacks, you can add a v-if to the second select
v-if="index === coInit.map(co => co.id).indexOf(country)"
There's probably some other optimizations you could make to the data structures, depending on the intention of the app. For instance, it's not clear why you use getCities method and not just nest the cities inside the coInit array (and why you need to use setTimeout).
You could also use a coumputed to get the cities for the second select
computed: {
cities() {
return this.country ?
? this.country === 2 ? this.cFrance
? this.country === 3 ? this.cUSA
: []
}
},

Related

How to implement Linked List Recursion in KOtlin

I am learning linked list and came across a problem where you are required to reverse a linked list using recursion. Here is the code I wrote:
fun reverseRecurseTraverse1(firstNode: Node<Int>?): Node<Int>? {
if (firstNode?.next == null) {
return firstNode
} else {
val finalNode = reverseRecurseTraverse1(firstNode.next)
finalNode?.next = firstNode
firstNode.next = null
return finalNode
}
}
Input:
01234
Output:
40
I get the desired output If I change the line from
finalNode?.next = firstNode
to
firstNode.next!!.next = firstNode
What am I doing wrong here?
When I try to whiteboard finalNode?.next = firstNode makes perfect sense to me and based on my understanding those two lines are essentially doing the same thing.
Kindly help me understand this.
It would be useful if you share your "whiteboard logic" and why do you assume finalNode?.next = firstNode is correct and functionally the same as firstNode.next!!.next = firstNode.
Let's get your example: 01234. In the first step firstNode is 0 and after reversing of the remaining sublist, we get 4321. finalNode points at the first element of this reversed sublist, so at 4. Then you add 0 after 4 which is wrong. You should add 0 after 1.
On the other hand, firstNode.next is still pointing at the item that was next to 0 in the original list. It points at 1. By assigning to its next we add 0 where it should be - after 1.
You are almost there, but one line is wrong.
What you are doing is:
If your item is null, return it. That seems okay.
If your item is already the last item, return it as first item. Also looks okay.
If your item is not the last item, reverse the rest of the list. Okay.
Take the old last and now first item, and append your old first now last item to it? That doesn't seem right. Don't you want to append your old first and now last item to the last item of the reversed rest?
It would probably help to write a function
fun Node.last(): Node? = if(next == null) this else next!!.last()
that provides the last item of a linked list.
You could use that to append your previously first item to the last item of the reversed rest.
Considering a call reverseRecurseTraverse1(x), can we maybe always tell what reverseRecurseTraverse1(x).last() is without calculating it?

Quasar's QTable selected rows are not updated after modification on callback of #selection event

There are two events we can use when using QTable's Selection feature. One is #update:selected -> function(newSelected) which fires after a selection (or deselect) is done and reflected. The second is #selection -> function(details) which is triggered before the #update:selected which happens "on" selecting (or deselect) and before the selected row/s is/are reflected.
Currently I achieved my goal using the #update:selected event but I believe it makes more sense if it is done on #selection
The idea is when I select rows using the "select all" checkbox (found on the table's header), I need to deselect the rows that aren't supposed to be selectable because of given rules. Individually, I simply disabled each row's checkbox using the prop disable with my conditions.
Say for example, each row has a property status and I don't want to allow to select rows with satus "offline". To disable each rows conditionally, we'll have something like this:
<template v-slot:body="props">
<q-tr class="cursor-pointer" :props="props">
<q-td>
<q-checkbox v-model="props.selected" :disable="props.row.status === 'offline'"/>
</q-td>
...
Basically, :disable="props.row.status === 'offline'" does the job. But using the "select all" checkbox will still select everything. So I tried handling it like this:
template:
<q-table
...
#selection="beforeSelection"
...
method:
beforeSelection(selection) {
selection.rows = selection.rows.filter(r => r.status != 'offline')
selection.keys = selection.rows.map(r => r.id) // `id` is the `row-key` I had set.
console.log(selection) // a simple log confirms we modified the seleted rows correctly
}
After the modification, I'm expecting that the filtered rows will only be the ones selected. But it seems to not work and the original details object given by #selection persisted. A simple #update:selected ="details => console.log(details)" confirms that the original object persisted. I believe the intention of using the beforeSelection on #selection was more ideal for a "validation" stage on selecting rows, but this event seems to be useless currently if I am unable to prevent/revert selecting a row conditionally on this event.
Did I miss anything on how to use a #selection event?
You are probably using :selected.sync inside q-table to bind the data. Replace it by :selected should solve your problem.

Infinite list using websql proxy store

Is there support for an infinite list backed by the websql proxy? It doesn't seem so, as whether infinite is true or false, there are only 25 items in the list.
You should use ListPaging plugin in the list.
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
loadMoreText : 'Loading more',
noMoreRecordsText : 'loaded'
}
Please check sencha touch documentation for further info.
I was able to get this to work by modifying the Sql proxy to include total record count. More specifically, in the selectRecords method I had to change the code:
result.setTotal(count);
to a second executeSql call that queries all records. The sql statement is similar to the original one, except that (1) it does not include the LIMIT expression; and (2) the SELECT * should be SELECT COUNT(*) AS TotalCount. Then read TotalCount value from the first row of the result set, call result.setTotal(totalCount), and finally fire the callback.

grid filter in dojo

can any one help with filtering multiple condition in dojo grid.
im using grid.DataGrid and json data.
data1 = {items: [ {"id":1,"media":"PRINT",pt:"Yellow Directory"},
{"id":2,"media":"DIGITAL",pt:"Social Media"},{id":3,"media":"DIGITAL",pt:"Yellow Online"}
],identifier: "id"};
a=1,b=2;
grid.filter({id:a,id:b})
the above line is just displaying the record with b value.
i need the record with both the values.
can any one help me with this.???
So you want the records that have any of the specified ids?
It comes down to the capabilities of the store you're using. If you're using a Memory store with SimpleQueryEngine, then you can specify a regex or an object with a test function instead:
grid.filter({id: {
test: function(x) {
return x === 'a' || x === 'b';
}
}});
If you're using JsonRest store, then you get to choose how your queries are processed server-side so you could potentially pass in an array of interesting values and handle that in your own way on the server. (i.e. filter({id:[a,b]}))

jqGrid/NHibernate/SQL: navigate to selected record

I use jqGrid to display data which is retrieved using NHibernate. jqGrid does paging for me, I just tell NHibernate to get "count" rows starting from "n".
Also, I would like to highlight specific record. For example, in list of employees I'd like a specific employee (id) to be shown and pre-selected in table.
The problem is that this employee may be on non-current page. E.g. I display 20 rows from 0, but "highlighted" employee is #25 and is on second page.
It is possible to pass initial page to jqGrid, so, if I somehow use NHibernate to find what page the "highlighted" employee is on, it will just navigate to that page and then I'll use .setSelection(id) method of jqGrid.
So, the problem is narrowed down to this one: given specific search query like the one below, how do I tell NHibernate to calculate the page where the "highlighted" employee is?
A sample query (simplified):
var query = Session.CreateCriteria<T>();
foreach (var sr in request.SearchFields)
query = query.Add(Expression.Like(sr.Key, "%" + sr.Value + "%"));
query.SetFirstResult((request.Page - 1) * request.Rows)
query.SetMaxResults(request.Rows)
Here, I need to alter (calculate) request.Page so that it points to the page where request.SelectedId is.
Also, one interesting thing is, if sort order is not defined, will I get the same results when I run the search query twice? I'd say that SQL Server may optimize query because order is not defined... in which case I'll only get predictable result if I pull ALL query data once, and then will programmatically in C# slice the specified portion of query results - so that no second query occur. But it will be much slower, of course.
Or, is there another way?
Pretty sure you'd have to figure out the page with another query. This would surely require you to define the column to order by. You'll need to get the order by and restriction working together to count the rows before that particular id. Once you have the number of rows before your id, you can figure what page you need to select and perform the usual paging query.
OK, so currently I do this:
var iquery = GetPagedCriteria<T>(request, true)
.SetProjection(Projections.Property("Id"));
var ids = iquery.List<Guid>();
var index = ids.IndexOf(new Guid(request.SelectedId));
if (index >= 0)
request.Page = index / request.Rows + 1;
and in jqGrid setup options
url: "${Url.Href<MyController>(c => c.JsonIndex(null))}?_SelectedId=${Id}",
// remove _SelectedId from url once loaded because we only need to find its page once
gridComplete: function() {
$("#grid").setGridParam({url: "${Url.Href<MyController>(c => c.JsonIndex(null))}"});
},
loadComplete: function() {
$("#grid").setSelection("${Id}");
}
That is, in request I lookup for index of id and set page if found (jqGrid even understands to display the appropriate page number in the pager because I return the page number to in in json data). In grid setup, I setup url to include the lookup id first, but after grid is loaded I remove it from url so that prev/next buttons work. However I always try to highlight the selected id in the grid.
And of course I always use sorting or the method won't work.
One problem still exists is that I pull all ids from db which is a bit of performance hit. If someone can tell how to find index of the id in the filtered/sorted query I'd accept the answer (since that's the real problem); if no then I'll accept my own answer ;-)
UPDATE: hm, if I sort by id initially I'll be able to use the technique like "SELECT COUNT(*) ... WHERE id < selectedid". This will eliminate the "pull ids" problem... but I'd like to sort by name initially, anyway.
UPDATE: after implemented, I've found a neat side-effect of this technique... when sorting, the active/selected item is preserved ;-) This works if _SelectedId is reset only when page is changed, not when grid is loaded.
UPDATE: here's sources that include the above technique: http://sprokhorenko.blogspot.com/2010/01/jqgrid-mvc-new-version-sources.html