Develop Reference

chaining multiple filters in vuex getters

I have a building list. I am able to fetch the building data into component by storing it into building list state.
There are multiple dropdownlist as a different filters(e.g: status, state, country etc). I want to chain up all the filters and getting filtered data.
Here is the faker data regarding filter structure
const buildingFilters = {
fields: [
{
field: 'id',
title: 'Id',
},
{
field: 'name',
title: 'Name',
},
{
field: 'type',
title: 'Type'
},
{
field: 'status',
title: 'Status'
},
{
field: 'city',
title: 'City'
},
{
field: 'state',
title: 'State'
},
{
field: 'country',
title: 'Country'
},
{
field: 'reporting Zone',
type: 'Reporting Zone'
}
],
filtersType: {
country: {
field: 'country',
listofValues: ['USA', 'CANADA']
},
state: {
field: 'state',
listofValues: ['Maryland', 'New Jersey']
},
city: {
field: 'city',
listofValues: ['Bethesda', 'Monmoth Junction']
},
reporting_zone: {
field: 'reporting_zone',
listofValues: ['RZ1', 'RZ2']
},
status: {
field: 'status',
listofValues: ['Draft', 'Inprogress']
},
type: {
field: 'type',
listofValues: ['Type 1', 'Type 2']
}
}
Now, i am calling this by service to load the initial filters into component. Now,i have to configure it into store.
const defaultState = {
bldgList: emptyArray,
bldgFilter: emptyArray,
filteredData: [],
filterTypes: {
filterByStatus: '',
filterByCountry: '',
filterByState: ''
}
};
const getters = {
filteredData: state => {
return state.filteredData = state.bldgList.slice()
if(state.filterTypes.filterByStatus !== '') {
// not understand how will i do that
}
}
};
const mutations = {
FILTER_FIELD_CHANGE(state,payload) {
// here we need to update Filters change
}
},
const actions = {
async filteredData({commit}, filterTypes) {
commit('FILTER_FIELD_CHANGE', filterTypes)
}
}
This store is not correct i know but how to filter building list based on multiple different filters and chaining filters based on condition.

The getter could call Array.prototype.filter() on the input based on the given filters, one by one. The following example assumes filterByStatus, filterByCountry and filterByState each contain the search term.
const getters = {
filteredData: state => {
let bldgs = state.bldgList
if (state.filterTypes.filterByStatus) {
bldgs = bldgs.filter(b => b.status.includes(state.filterTypes.filterByStatus))
}
if (state.filterTypes.filterByCountry) {
bldgs = bldgs.filter(b => b.country === state.filterTypes.filterByCountry)
}
if (state.filterTypes.filterByState) {
bldgs = bldgs.filter(b => b.state === state.filterTypes.filterByState)
}
return bldgs
}
};

Nested component error: {#each} only iterates over array-like on drop

I'm trying to create a component that uses nested drag and drop from sevelte-dnd-action, using this object:
$forms = [
{
id: hexID(),
title: 'Data - test',
defined: true,
components: [
{
id: hexID(),
type: 'text',
size: 'long',
placeholder: 'None'
},
{
id: hexID(),
type: 'text',
size: 'normal',
placeholder: 'Test'
},
{
id: hexID(),
type: 'text',
size: 'normal',
placeholder: 'CCC'
},
{
id: hexID(),
type: 'text',
size: 'normal',
placeholder: 'CDS'
}
]
},
{
id: hexID(),
title: 'Emails',
defined: true,
components: [
{
id: hexID(),
type: 'text',
size: 'normal',
placeholder: 'RGzzzz'
},
{
id: hexID(),
type: 'select',
size: 'normal',
placeholder: 'RGrrr'
}
]
},
{
id: hexID(),
title: 'Tel',
defined: true,
components: [
{
id: hexID(),
type: 'text',
size: 'normal',
placeholder: 'RaaaG'
},
{
id: hexID(),
type: 'select',
size: 'normal',
placeholder: 'Rtrea'
}
]
}
]
I call it first at the app.svelte and pass the array inside the object to the Horizontal.svelte component:
<section class='create_form_body'
use:dndzone={{items:$forms}}
on:consider={handleDndConsider}
on:finalize={handleDndFinalize}>
{#each $forms as form (form.id)}
<HorizontalList {form}/>
{/each}
this is the Horizontal component:
<script>
export let form
function handleDndConsider(cid, e) {
let chosenOne = $forms.findIndex(x => x.id === cid)
$forms[chosenOne].components = e.detail.items;
$forms = [...$forms]
}
function handleDndFinalize(cid, e) {
let idx = $forms.findIndex(x => x.id === cid)
$forms[idx].components = e.detail.items;
$forms = [...$forms]
}
</script>
<div class='form_box'>
<div class='form_header'>
{form.title}
<div class='form_header_combo'>
<span>title</span>
</div>
</div>
<section class='input_list'
use:dndzone={{items: form.components}}
on:consider={(e) => handleDndConsider(form.id, e)}
on:finalize={(e) => handleDndFinalize(form.id, e)}
>
{#each form.components as component (component.id)}
<ComponentGetter type={component}/>
{/each}
</section>
</div>
if i delete all thee DIVs and leave the section it works perfectly, but with the divs it gives error: {#each} only iterates over array-like objects.Could someone give me a choice other than deleting the divs?
this is the REPL

the cause of the problem was the absence of the key 'type' in the use:dndzone={{items: objectArray, type: 'define name'}}. here is the link to the corrected code REPL

How to set validate rules in vuelidate to have value same as a field of an object?

Let say I have a vue component with data like this:
data: () => ({
form: {
old_password: {
data: '',
type: 'password',
label: 'Old Password',
},
new_password: {
data: '',
type: 'password',
label: 'New Password',
},
repeat_password: {
data: '',
type: 'password',
label: 'New Password Confirmation',
},
},
}),
The data is formatted in this way as I am using another plug-in, ant-design, to build the form, and therefore formatting the data in another way is not an option. The data field will be storing the actual data.
Then, I have the following validation rules set for vuelidate.
validations: {
form: {
old_password: {
data: { required },
},
new_password: {
data: { required },
},
repeat_password: {
data: { sameAsPassword: sameAs('new_password') },
},
},
},
The required rules works, but the sameAsPassword rule is not working. It always return error, even I am sure I am inputting the same password. I guess it is not comparing to a correct field. How can I set the rule so that it is comparing to the correct field?

new_password is not a sibling of repeat_password.data. From the built in validator docs
Locator can be either a sibling property name or a function. When provided as a function, it receives the model under validation as
argument and this is bound to the component instance so you can access
all its properties and methods, even in the scope of a nested
validation.
So a function needs to be passed to sameAs:
validations: {
form: {
old_password: {
data: { required },
},
new_password: {
data: { required },
},
repeat_password: {
data: {
sameAsPassword: sameAs(function() {
return this.form.new_password.data;
})
},
},
},
},
At the same time, for the this to be working inside the function, the data needed to be changed from arrow function to return data. i.e.
data() {
return {
form: {
old_password: {
data: '',
type: 'password',
label: 'Old Password',
},
new_password: {
data: '',
type: 'password',
label: 'New Password',
},
repeat_password: {
data: '',
type: 'password',
label: 'New Password Confirmation',
},
},
}
},

First of all: it's not a good idea to use arrow function for data. You should use:
data() {
return {
form: {}
}
}
You could get a context issues..
And I don't know if you need that data inside validations...you could try this:
export default {
data() {
return {
form: {
nestedA: '',
nestedB: ''
}
}
},
validations: {
form: {
nestedA: {
required
},
nestedB: {
required
}
}
}
}

Sencha 6.5 (modern) how to dynamically change the items in a menu in a title bar?

Well considering a grid I create in my application:
{
xtype: 'ordergrid',
itemId: 'ordergrid',
titleBar: {
shadow: false,
items: [{
align: 'right',
xtype: 'button',
text: 'Update status',
stretchMenu: true,
menu: {
itemId: 'status_menu',
defaults: {
handler: 'updateStatus'
},
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
}
}]
},
With ordergrid being defined with:
extend: 'Ext.grid.Grid',
xtype: 'ordergrid',
I wish to modify the items of the menu dynamically. I've first tried doing this through a store:
menu: {
itemId: 'status_menu',
defaults: {
handler: 'updateStatus'
},
indented: false,
store: { type: 'status' }
Though this doesn't seem to work. Then I tried accessing this menu through a component query, during the init function of some controller:
Ext.define('BinkPortalFrontend.view.main.OrderController', {
extend: 'Ext.app.ViewController',
alias: 'controller.order',
init: function () {
console.log('..... initializing ......');
const menus = Ext.ComponentQuery.query('ordergrid #status_menu');
const menu = menus[0];
menu.setItems([{
text: 'some',
value: 'some'
}, {
text: 'new',
value: 'mew'
}]);
},
};
However this returns an error: "Cannot read property 'setItems' of undefined"
Debugging shows the obvious problem: it doesn't find any menu.
What's more, even a "catch all" query like
Ext.ComponentQuery.query('menu');
or
Ext.ComponentQuery.query('#status_menu');
Shows an empty array: so what's going on? (I most definitely see the menu from its initial load).

There is one reason your menu is not created. Menu will created whenever button will tap or whenever getMenu() method get called.
If you want to get your menu using Ext.ComponentQuery.query(), so for this you need to do use initialize event of button and forcefully create menu using getMenu() method like below :-
{
xtype: 'button',
text: 'Update status',
stretchMenu: true,
menu: {
itemId: 'status_menu',
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
},
listeners: {
initialize: function(btn) {
Ext.defer(function() {
// This will print undefined because menu have not created
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
//When we use getMenu method it will create menu item
btn.getMenu().hide();
// This will print menu component
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
}, 10)
}
}
}
Another way you can use getMenu() method of button. It will return the menu component.
In this FIDDLE, I have created a demo using grid, button and menu. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
});
Ext.create('Ext.grid.Grid', {
title: 'Change menu items dynamically',
titleBar: {
shadow: false,
items: [{
align: 'right',
xtype: 'button',
text: 'Update status',
stretchMenu: true,
itemId: 'statusbtn',
menu: {
itemId: 'status_menu',
defaults: {
// handler: 'updateStatus'
},
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
},
listeners: {
initialize: function (btn) {
Ext.defer(function () {
// This will undefined because menu has not been created
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
//When we use getMenu method it will create menu item
btn.getMenu().hide();
// This will menu component
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
}, 10)
}
}
}, {
xtype: 'button',
align: 'right',
text: 'Change Items',
handler: function (btn) {
var newItems = [];
store.each(rec => {
newItems.push({
text: rec.get('name'),
value: rec.get('name')
})
});
/*
* You can also get menu using button
* btn.up('titlebar').down('#statusbtn').getMenu().setItems(newItems);
*/
Ext.ComponentQuery.query('#status_menu')[0].setItems(newItems);
Ext.toast('Menu items has been change. Please check', 2000);
}
}]
},
store: store,
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Email',
dataIndex: 'email',
width: 250
}, {
text: 'Phone',
dataIndex: 'phone',
width: 120
}],
height: 200,
layout: 'fit',
fullscreen: true
});
}
});
For more details about component you can also see this ComponentManager

javascript - How to just add text to a form input

I already have a full-fledged form in javascript. All I need is a simple label Lol.
It is using prior code, but hopefully this snipet will help to see what's happening:
export default class NewEvent extends FormStep {
get inputs() {
return [{
name: 'department',
label: 'Department / Specific Ministry'
}, {
name: 'title'
}, {
name: 'description',
type: 'textarea'
}, {
name: 'checkboxApproved',
type: 'checkbox',
label: 'This copy is approved and is to be used as written.'
}, {
name: 'checkboxDetails',
type: 'checkbox',
label: 'These are the details! Please help me write a catchy description.'
}, {
name: 'location'
}, {
name: 'contactName',
label: 'Event Contact Name'
}, {
name: 'contactEmail',
label: 'Event Contact Email (required)'
}, {
name: 'contactPhone',
label: 'Event Contact Phone (optional)'
}, {
name: 'eventURL'
}, {
name: 'isNewHRock',
type: 'checkbox',
label: 'This event is a new event we\'ve never done at HRock.'
}, {
name: 'hasOccurred',
type: 'checkbox',
label: 'We\'ve had this event before, but it is not on a recurring schedule.'
}, {
name: 'needsRegistration',
type: 'checkbox',
label: 'We need to set up registration for this event.'
}, <EventPrice key = 'eventPrice' /> , <EventClassInfo key = 'eventClassInfo' /> , <EventDateTimeInfo key = 'eventDateTimeInfo' /> ]
}
}
Anyways, all these items show up as a form. AS they should. But I'd like to simply add a label in between the check boxes. I've created the following screenshot of what I'd like to add.
However, whenever I add text in there so far, it breaks the code, or it shows up in a textfield...
Help?

This is an object of "inputs". What ever function is parsing this object is creating all inputs with it, which is why you get a textbox. I don't think this is the correct place in the code to do this.