I have an array of menu items that I am trying to display based on user permissions. Each menu item has a property group which is a group number the menu item belongs to. Items should be shown in ascending group number and after each group there should be a divider indicating a separation between the groups.
<li ng-repeat="item in (sortedItems = (navSidebar.menu.items | orderBy:['group','position','title']))" data-ng-if="item.show()">
<span>{{item.title}}</span>
<hr ng-show="item.group !== sortedItems[$index+1].group && !!sortedItems[$index+1].group && item.group !== 0">
</li>
So first I am sorting the items by group and then within each group, by their position. Then I have sortedItems as a new array. Then I basically show the divider if an items group number is different than the next item.
item.show() method on each item returns a boolean which shows/hides the item based on a users permissions. The problem I am facing is that the divider logic is always checking the next item's group number but the next item is not visible to some user's. So, it throws off the logic and the divider's are not consistent.
Yes, I know the array can be injected into the view with all the logic done in the controller already. I am strictly told to do this in the view however.
Any advice on how to accomplish this? First time posting here.
Related
I'm struggling and googling on how to control the v-autocomplete for a while, but still didn't find a good answer. I'm trying to use v-autocomplete for multiple city selection and attempting to limit a user to select at maximum of 5. I would expect that it would stop the user from adding more selection. Currently, the counter only turns red, but still lets the user add more when it passes 5. Is there any Props or functions to let me do this? I ran into description somewhere and it said I had to use other validation API, but I didn't find any example anywhere.
Also, one of the options is Top 5 Cities. I'd like to consider it as 5 cities being selected. Is there a way to advance the count of this option to 5? And, disable the Top 5 option when remaining counter is less than 5? Thank you,
<v-autocomplete
label="Cities"
v-model="selectedValue"
:items="itemList"
item-text="name"
item-value="id"
hide-no-data
hide-selected
counter="5"
multiple
chips
deletable-chips
></v-autocomplete>
My sample code is here. https://codepen.io/OpPen/pen/LYpJppa
Thank you very much.
I managed to get it mostly working.
Menu will be disabled when the computedCouterValue reaches 5 or more.
computedCouterValue counts each selected as 1 unit, but Top 5 is counted as 5.
If user select Top 5, other cities cannot be further selected. Menu is disabled
If a city is selected, Top 5 is disabled as it would exceed max total count.
If there are better ways to do this or Vuetify has something out of the box I can use, please let me know.
One thing that I cannot find get resolved is that I cannot set the counter value to reflect my custom count from computedCounterValue. I want the counter to show 5/5 when Top 5 is selected. I tried to use prop "counter-value", but it doesn't take effect.
<v-autocomplete
label="Cities"
v-model="selectedValues"
:items="itemList"
item-text="name"
item-value="id"
hide-no-data
hide-selected
:counter="maxSelected"
:counter-value="computedCounterValue"
:menu-props="menuProps"
multiple
chips
deletable-chips
#input="adjustOptions"
></v-autocomplete>
</v-container>
https://codepen.io/OpPen/pen/LYpJppa
You can add computed property for autocomplete items and if selected length would be more than 4 (5), you just return selected items to autocomplete items, so user just couldn't pick something else. Availablitity to pick will return only if he remove at least 1 city.
I only add a function when #change is active and inside the function I check the model size. I remove the last value of the model, for example. So the user cannot select other option.
<v-select
v-model="currentCategories"
:items="categories"
item-text="name"
item-value="id"
chips
placeholder="Select category"
multiple
outlined
dense
#blur="updateGifts"
#change="limiteCategory"
></v-select>
limiteCategory() {
if (this.currentCategory.length > 5) this.currentCategory.pop();
},
I had a similar problem that I solved with a workaround. I ended up rendering the form invalid and showing a message instead of preventing user input after the threshold.
<v-autocomplete
...
:counter="maxNumberOfChoices"
:rules="validationRules"
>
computed: {
validationRules () {
return this.maxNumberOfChoices ? [this.validateMaxNumberOfChoices] : []
}
},
methods: {
validateMaxNumberOfChoices (selectedChoices) {
return selectedChoices.length <= this.maxNumberOfChoices || `Choose ${this.maxNumberOfChoices} at most.`
},
}
I have two data items :
1)
sum(If ([DEV].[STATUS] IN ('Success','Failure'))
THEN ([DEV.[AMT])
ELSE (0))
2)
sum(If ([DEV].[STATUS] IN ('Success','Failure'))
THEN (1)
ELSE (0))
When I try to use the first item in a list cell I get an error 'sqlPrepareWithOptions' status='-9' / group function is not allowed here
The second is working fine in the same scenario.
Thanks!
I set the aggregate function to none. The problem was in my structure. I was adding the data item to list cell under list footer. When I added the item to list cell under list page footer, I was able to run the report successfully.
#Html.DropDownListFor(m => m.field, Model.fieldList, "Select")
I have the code above to get the values of a drop down list from a database. Because the database does not have the select value, I am add it to the list. However, I want to set the selected value to a certain value(variable). How can I do this?
Say I want the selected value to be "WI" and "WI" is in the list. How do i do this? Or how do I specify the #value property?
The DropDownListFor function will first look if there is a selected value in the provided select list. If there are no selected values in the selected list items, it will look at the value of the field that the drop down list is for and attempt to match that to the value of each select list item until it finds the correct one. If any select list item does not have value, it will compare it to the text instead.
Once you have the full list generated, loop through it and find the value you want selected, then set the selected property to true and it should choose that one.
My VirtueMart shop.browse page has the typical columns of SKU, Name, Price, and "Update" (which contains the Add to Cart button). I would like to add a Quantity column between Price and Update so that a buyer can choose a quantity prior to pressing the "Add to Cart" button.
Though I don't know HOW to do this, I think I know WHERE to do it:
/public_html/components/com_virtuemart/themes/default/templates/browse/includes/browse_listtable.tpl.php
Lines 67-72 of that file tell the program how to build the table, but what I DON'T know how to do is modify the code source to tell it to include quantity as an element for the table. Here's the code:
// Loop through each row and build the table
foreach($data as $key => $value) {
$table->addRow( $data[$key], 'class="sectiontableentry'.$i.'"', 'td', true );
$i = $i == 1 ? 2 : 1;
}
Which include file is actually being called in this foreach loop, and what code would I add to reference quantity data?
You should not modify your core code. If you just need to put quantity box inside your browse template use variable $form_addtocart
It will give you quantity box and add to cart button.
All variables for browse page and for flypage template you can find here:
http://virtuemart.net/documentation/Developer_Manual/Modifying_the_Layout.html
If this is not what you are trying to get, please be more specific, or show your web page.
Greetings,
The context is myFaces 2.0.2, possibly also adding Tomahawk 20-1.1.10
I have created a dataTable (currently an h:dataTable, but could also be a t:dataTable using Tomahawk) displaying certain attibutes of a List<MyObject> in a backing bean. I have paging by returning only a subList of the List, and also sorting by click of column headers.
The next thing I need to do is ensure the table always shows a fixed number of rows. For example, if my page size is 5 and I have 12 items in the List, I need page three to show the last two items, plus 3 blank rows.
I have tried to "pad" the subList with both nulls and instances of myObject with null values, but this led to ConcurrentModificationException when hitting the last page of the table (the view was trying to getDisplayList even as the paging method was still adding the extra values.). I then tried padding the main list in the same manner, but then got NullPointers on my sort functions (a no-brainer in hind sight). Plus, these things are all addng overhead in the backer, when I would rather do this in the xhtml view.
(h:/t:)dataTable does have a rows attribute, but this specifies the maximum number of rows to display, not the minimum, as I need.
Ideas, please?
Don't pad the sublist. Pad the list. Preferably immediately after retrieving it in the bean.
The solution here was to pad the MAIN List, rather than the subList, using objects which are not null but whose attributes are null, and to add a null check into the Comparator:
if (obj1.getSomeValue() == null) {
return +1;
}
else if (obj2.getSomeValue() == null) {
return -1;
}
else {
// primary sorting code
}
Which ensures null items always come last. Works perfect.
BalusC did give me the push in the right direction, so I am accepting his answer.