Develop Reference

disable current selection until some value is inputed in the previous selection

I'm working with BootstrapVue.
I have following problem. I have a b-form-input where I'm searching for my number over my b-form-select. So I'm selecting 3 values and get a number in my input field and other way around - so it's an Autofill.
This works fine - and because of that I think I don't need to show you the code.
The problem is that I want to disable all selects (instead of the first) till the field before was selected.
I have problem that if I have multiple elements all will be updated. So if I input something in Input1 in the first element the second Input of all other elements will be !disabled
Additional Info: IDParent is a prop!
If you need any additional code, I can update my question!
<template>
<div>
<div class="mt-2" v-for="(IDChild, indexChild) in inputs" :key="indexChild">
<div>
<div class="mt-2">Number</div>
<b-form-input type="number" v-model="IDChild.Number" :value="IDChild.Number"></b-form-input>
</div>
<div>
<div class="mt-2">Input 1</div>
<b-form-select v-model="IDChild.Input1" :value="IDChild.Input1" :options="optionsInput1" #input="searchNumber(IDChild, IDParent, indexChild)"></b-form-select>
</div>
<div>
<div class="mt-2">Input 2</div>
<b-form-select :disabled="disabledInput2" v-model="IDChild.Input2" :value="IDChild.Input2" :options="optionsInput2" #input="searchNumber(IDChild, IDParent, indexChild)"></b-form-select>
</div>
<div>
<div class="mt-2">Input 3</div>
<b-form-select :disabled="disabledInput3" v-model="IDChild.Input3" :value="IDChild.Input3" :options="optionsInput3" #input="searchNumber(IDChild, IDParent, indexChild)"></b-form-select>
</div>
</div>
<!-- add new element when button was clicked -->
<div class="mt-4 mb-5 ml-3 mr-3">
<b-button #click="addElement"> Add Element </b-button>
</div>
</div>
</template>
my script:
<script>
import json from "./json/json.json";
export default {
name: "Test",
methods: {
addElement() {
this.inputs.push({});
},
searchNumber(input, IDParent, indexChild) {
input.Number = "";
this.json.forEach((element) => {
if (
element.Input1 == input.Input1 &&
element.Input2 == input.Input2 &&
element.Input3 == input.Input3
) {
for (const key of Object.keys(element)) {
input[key] = element[key];
}
}
});
if(input.Input1) {
this.disabledInput2 = false;
}
if(input.Input2) {
this.disabledInput3 = false;
}
},
},
props: [
"IDParent",
],
data() {
return {
inputs: [{}],
json: json,
disabledInput2: true,
disabledInput3: true,
};
},
};
</script>

What you are missing is a multi-layer model for your data which you can call in your searchNumber function and call for your :disabled attribute.
In your v-for="(IDChild, indexChild) in inputs" you could use IDChild or indexChild for that. For example you would call :disabled="disabledInput2[indexChild]". That way you would refer to disabledInput2 with the specific indexChild.
You also need to handle this in your function, for example this.disabledInput2[indexChild] = false;.
Basically it´s the same as storing multi-layer data in the same object with v-model.
EDIT: Generally Example
I´ve created the following properties for this example. We have myNumberInput as an object to handle multiple input fields for numbers. mySelectionData provides a simple collection of two objects with 3 selection arrays each. myDisableData is the object that will handle multiple disabled attributes for this selections:
myNumberInput: {},
mySelectionData: {
1: {
1: [
{ name: "1A", value: 1 }, { name: "2A", value: 2 }, { name: "3A", value: 3 }
],
2: [
{ name: "4A", value: 4 }, { name: "5A", value: 5 }, { name: "6A", value: 6 }
],
3: [
{ name: "7A", value: 7 }, { name: "8A", value: 8 }, { name: "9A", value: 9 }
]
},
2: {
1: [
{ name: "1B", value: 11 }, { name: "2B", value: 21 }, { name: "3B", value: 31 }
],
2: [
{ name: "4B", value: 41 }, { name: "5B", value: 51 }, { name: "6B", value: 61 }
],
3: [
{ name: "7B", value: 71 }, { name: "8B", value: 81 }, { name: "9B", value: 91 }
]
}
},
myDisableData: {}
From the mySelectionData object, we will build our myDisableData with this function:
setupMyDisableData() {
Object.keys(this.mySelectionData).forEach(parent_key => {
Object.assign(this.myDisableData, {[parent_key]: {}})
Object.keys(this.mySelectionData[parent_key]).forEach(child_key => {
Object.assign(this.myDisableData[parent_key], {[child_key]: true})
});
});
}
This will loop trough our "parents", assign their index to myDisableData and also loop trough the "childs" and assign their index to myDisableData with the "parent"-index as a pointer. After that we have a multi-layer object which is able to provide diabled= true or false for each selection.
The html for this example looks like this:
<div v-for="(item,index) in mySelectionData" :key="index">
<input type="number" v-model="myNumberInput[index]" #input="enableMySelection(index, myNumberInput[index])">
<div v-for="(child_item, child_index) in item" :key="child_index">
<select :disabled="myDisableData[index][child_index]">
<option v-for="(child_option, child_option_index) in child_item" :key="child_option_index" :value="child_option.value">{{child_option.name}}</option>
</select>
</div>
</div>
As I don´t use BootstrapVue, my html looks different, but I guess you will get the trick. You simply now refer to the three object by the index of "parent" and "child". In this example the function enableMySelection will enable a selection depending on the number entered in the input. The function looks like this:
enableMySelection(parent_index, input_number) {
Object.keys(this.myDisableData[parent_index]).forEach(child_key => {
this.myDisableData[parent_index][child_key] = true;
});
this.myDisableData[parent_index][input_number] = false;
}
So if you enter "2" in your first input, it will enable the second selection of the first block. If you enter 1 in the second input, it will enable the first selection in the second block.
As I said, this is just a generally example but this should be enough to help you define the structure to handle your multiple inputs and selections.

How to get value of their object in react hooks array?

Good afternoon, I rarely write here. But now I really can't understand.
I am using React Select to display select. In the onChange attribute, I pass a function that forms the object and writes it to UseStat. But then I try to find an object using the find and
take an array of values from it.
const [selectedSpecificationValues, setSelectedSpecificationValues] = useState([])
const setSelectedSpecificationValuesHandler = (e, s) => {
const maybeSelectedSpecification = selectedSpecificationValues.find(
ss => ss._id === s._id
)
const objForWrite = {
_id: s._id,
name: s.name,
values: e,
}
if (maybeSelectedSpecification) {
const index = selectedSpecificationValues.indexOf(
maybeSelectedSpecification
)
let newArr = [...selectedSpecificationValues]
newArr[index] = objForWrite
setSelectedSpecificationValues(newArr)
} else {
setSelectedSpecificationValues([
...selectedSpecificationValues,
objForWrite,
])
}
}
const ssTestVal = Id => {
let result = []
if (selectedSpecificationValues.length > 0) {
const foundItem = selectedSpecificationValues.find(i => i._id === Id)
console.log(Id, foundItem)
if (foundItem) {
result = foundItem.values
}
}
return result
}
/* specifications = [
{
values: [
{
value: 0,
label: '480 min',
},
{
value: 1,
label: '120 min',
},
],
_id: '5fe74eae07905e53ebf263ec',
name: 'Duration',
slug: 'duration',
createdAt: '2020-12-26T14:54:38.362Z',
updatedAt: '2020-12-29T08:37:18.962Z',
__v: 1,
},
{
values: [
{
value: 0,
label: 'Photobook',
},
{
value: 1,
label: 'Photocard',
},
{
value: 2,
label: 'Album',
},
{
value: 3,
label: 'DVD',
},
{
value: 4,
label: 'Stickers',
},
{
value: 5,
label: 'CD',
},
],
_id: '5fe74e9107905e53ebf263eb',
name: 'Includes',
slug: 'includes',
createdAt: '2020-12-26T14:54:09.267Z',
updatedAt: '2020-12-26T16:10:16.283Z',
__v: 9,
},
] */
{
specifications &&
specifications.map((s, idx) => (
<Select
classNamePrefix='select2-selection'
options={s.values}
value={() => ssTestVal(s._id)}
onChange={e => setSelectedSpecificationValuesHandler(e, s)}
isMulti
/>
))
}
It is also important to understand that I loop a lot of selections in order to select different characteristics and their values.
I will be glad to help!
https://codesandbox.io/s/serverless-night-kez18?file=/src/App.js

Looks like minor issue with how you were computing the value for the sub-select inputs. You were defining it as though it were a callback.
<Select
classNamePrefix="select2-selection"
options={s.values}
value={() => ssTestVal(s._id)} // <-- not correct, not a callabck
onChange={(e) => setSelectedSpecificationValuesHandler(e, s)}
isMulti
/>
It should just be immediately invoked to compute and return an input's value.
<Select
classNamePrefix="select2-selection"
options={s.values}
value={ssTestVal(s._id)} // <-- invoke immediately for return value
onChange={(e) => setSelectedSpecificationValuesHandler(e, s)}
isMulti
/>

Omitting one or multiple values in javascript using lodash

I have a complex structure and I want to omit some properties from this structure for final value
let ListofWorlds = {
listOfCountries: [{
add: [{
id: 1,
updated: {
areacode: 123,
city: {
city: {'Austrailia'},
houses: {1000}
}
}
}], remove: []
}]
}
I want to omit city property from this structure and need this
let ListofWorlds = {
listOfCountries: [{
add: [{
id: 1,
updated: {
areacode: 123
}
}], remove: []
}]
}
This is what I have tried
let newListOfWorls = _.map(ListofWorlds, function (worlds) {
return _.omit(worlds, ['city']); })
Appreciate the help and knowledge

This is what i have tried.
let ListofWorlds = {
listOfCountries: [{
add: [{
id: 1,
updated: {
areacode: 123,
city: {
city: 'Austrailia',
houses: 1000
}
}
}], remove: []
}]}
const newList = ListofWorlds.listOfCountries.map(arr=>{
arr.add.forEach((item,index)=>{
arr.add[index] = _.omit(item,'updated.city')
})
return arr
})
Probably not the best way to do it, but hey it works, and why your code doesn't work probably you mapped an Object ListofWorlds and you need to be specific which field you want to be omitted

Display User info from Meteor.users, and display with Highcharts

I'm new in Meteor, that's what I'd like to do: I've some users that will answer to different kind of questions: feels and answers are the answers that I'll store in the mongoDB for each user.
Now this is my HTML:
<p>Select a user to see infos, see answers' progress</p>
{{#each allUsers}}
<div class="patinf">
<br>
<h5><i class="fa fa-user"></i> {{lastName}} {{firstName}}</h5>
<label>
<input type="radio" class="radio-inline" name="{{this.id}}" id="show" value="show" required>
<span><i class="fa fa-bar-chart" aria-hidden="true"></i> Show answers</span>
</label>
<label>
<input type="radio" class="radio-inline" name="{{this.id}}" id="hide" value="hide" checked>
<span><i class="fa fa-times" aria-hidden="true"></i> Hide</span
</label>
</div>
{{#if show}}
<div class="form-group">
<label for="something" class="control-label">Answers' Progress</label>
<div id="something">
<p>Feelings:</p>
<ul>
{{#each allFeelings}}
<li>{{feel}}</li>
{{/each}}
</ul>
<p>Answers:</p>
<ul>
{{#each allAnswers}}
<li>{{answer}}</li>
{{/each}}
</ul>
<br>
</div>
<div id="something" style=" min-width: 310px; height: 400px; margin: 0auto">
{{> highchartsHelper chartId="feels" chartWidth="100%" charHeight="100%" chartObject=topGenresChart}}
<br>
{{> highchartsHelper chartId="answers" chartWidth="100%" charHeight="100%" chartObject=topGenresChart}}
</div>
</div>
{{/if}}
{{/each}}
And this is my js file:
Meteor.subscribe('patientInfos');
Template.patients.helpers({
allAnswers:function(){
return Quests.find({"answer": {$ne:null}});
},
answer: function(){
return this.answer;
}
});
Template.patients.helpers({
allFeelings:function(){
return Quests.find({"feel": {$ne:null}});
},
feel: function(){
return this.feel;
}
});
Template.patients.helpers({
allUsers: function() {
return Meteor.users.find({});
},
id: function(){
ret
},
firstName: function() {
return this.profile.firstName;
},
lastName: function() {
return this.profile.lastName;
}
});
Template.patients.onRendered(function () {
Session.set('show', false);
});
Template.patients.events({
'change #hide': function (event) {
Session.set('show', false);
},
'change #show': function (event) {
Session.set('show', true);
}
});
Template.patients.helpers({
show: function() {
return Session.get('show');
},
});
Template.patients.topGenresChart = function() {
return {
chart: {
type: 'areaspline'
},
title: {
text: 'Answers Progress'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'W1',
'W2',
'W3',
'W4',
'W5',
'W6',
'W7'
],
plotBands: [{ // last week
from: 5.5,
to: 7,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Answers'
},
categories: [
'0',
'1',
'2',
'3',
'4',
'5',
'6'
],
},
tooltip: {
shared: true,
valueSuffix: ' points'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Question 1 Progress',
data: [3, 4, 3, 5, 1, 5, 6]
}, {
name: 'Question 2 Progress',
data: [1, 3, 2, 3, 2, 5, 4]
}]}
};
Now the problem is how to put in series.data the data taken from Quests.answer, considering that answer is an array of 10 number.
How to use the #each function to display the answer's data for one user at time: actually if I select show I'll see all the user's answers under every user.
Quests is like:
Schemas.Quests = new SimpleSchema
createdAt:
type: Date
autoValue: ->
if this.isInsert
new Date()
answer:
type: [Number]
optional:true
feel:
type: Number
optional:true
userId:
type: String
patient:
type: String
optional:true
feel could be a number: 0 1 2.
answer is an array of 10 item, numbers from 0 to 6.
EDITED:
Example of MongoDB elements:
- Meteor.users
createdAt: Tue Dec 05 2017 10:56:24 GMT+0100
__proto__: Object
emails : Array(1)
0 : {address: "denise#test.it", verified: false}
length : 1
__proto__ : Array(0)
profile :
firstName : "Denise"
lastName : "Blabla"
__proto__ : Object
services :
password: {bcrypt: "$2a$10$ddJ8F.k2uJ2lZaDfvMNEdObxdMXwAdxSSQRYtHRG6Juoh8HVtC8Ju"}
resume : {loginTokens: Array(0)}
__proto__ : Object
_id: "RTS2LR2jaBjidEiB7"
__proto__:Object
length : 4
__proto__: Array(0)
And this is an example of the Quests:
0 :
answer : (10) ["1", "5", "6", "5", "1", "5", "5", "6", "0", "2"]
patient : "Denise Blabla"
userId : "RTS2LR2jaBjidEiB7"
_id : "7NwjGmGyz7zjbzBqC"
__proto__ : Object
1 :
feel : "0"
patient : "Denise Blabla"
userId : "RTS2LR2jaBjidEiB7"
_id : "5KtDQof3o9gt8CYJg"
__proto__ : Object
2 :
answer : (10) ["0", "4", "4", "0", "4", "5", "0", "1", "3", "6"]
patient : "Denise Blabla"
userId : "RTS2LR2jaBjidEiB7"
_id : "7t46pAihMBNWwmYpN"
__proto__ : Object
What I want is to display something like this in a table:
Denise Blabla
Week || Q1 || Q2 || ... || Q10 || Feel
Week 1 || 6 || 4 || ... || 1 || 0
Week 2 || 3 || 1 || ... || 5 || 2
Anne Smith
Week || Q1 || Q2 || ... || Q10 || Feel
Week 1 || 5 || 5 || ... || 1 || 1
Week 2 || 3 || 2 || ... || 3 || 0

First part of the question, showing the data from the related collection Quests in your template:
Template.patients.helpers({
allAnswers() {
return Quests.find({ userId: this._id, answer: { $exists: true }}).map((el) => el.answer);
},
allFeelings() {
return Quests.find({ userId: this._id, feel: { $exists: true }}).map((el) => el.feel);
}
});
This is basically doing an inline join on the related collection using userId as the matching key.
Your highchart will be done in a similar fashion:
Template.patients.topGenresChart = function() {
return {
... chart parameters as you had them before
series: [{
name: 'Question 1 Progress',
data: () => { Quests.find({ userId: this._id, answer: { $exists: true }}).map((el) => el.answer)}
}, {
name: 'Question 2 Progress',
data: () => { Quests.find({ userId: this._id, feel: { $exists: true }}).map((el) => el.feel)}
}]}
};
However:
In your question you say that answer is an array of 10 numbers but your schema has defines it as a String. Did you mean [String]
You say that feel is a number 0 1 2 but your template is iterating over it with {{#each}}.
It's not at all clear what you're trying to chart in your two series. Your example data has arrays of 7 elements each but what data from Quests is supposed to go in there?
You're referring to the same chart data: chartObject=topGenresChart twice from {{> highchartsHelper ...}} - that means you're going to display the exact same chart twice even though you're giving each a different ID. What is your intent there?
In any case the answer should give you enough to get going.
Note also that your feel and answer helpers are redundant. You could use {{feel}} and {{answer}} directly in your template without going through a helper since those helpers just return this.feel and this.answer respectively.

Multiple select Vue.js and computed property

I'm using Vue.js 2.0 and the Element UI library.
I want to use a multiple select to attribute some roles to my users.
The list of all roles available is received and assigned to availableRoles. Since it is an array of object and the v-model accepts only an array with value, I need to extract the id of the roles trough the computed property computedRoles.
The current roles of my user are received and assigned to userRoles: [{'id':1, 'name':'Admin'}, {'id':3, 'name':'User'}].
computedRoles is then equals to [1,3]
The preselection of the select is fine but I can't change anything (add or remove option from the select)
What is wrong and how to fix it?
http://jsfiddle.net/3ra1jscx/3/
<div id="app">
<template>
<el-select v-model="computedRoles" multiple placeholder="Select">
<el-option v-for="item in availableRoles" :label="item.name" :value="item.id">
</el-option>
</el-select>
</template>
</div>
var Main = {
data() {
return {
availableRoles: [{
id: 1,
name: 'Admin'
}, {
id: 2,
name: 'Power User'
}, {
id: 3,
name: 'User'
}],
userRoles: [{'id':1, 'name':'Admin'}, {'id':3, 'name':'User'}]
}
},
computed : {
computedRoles () {
return this.userRoles.map(role => role.id)
}
}
}

I agree mostly with #wostex answer, but he doesn't give you the userRoles property back. Essentially you should swap computedRoles and userRoles. userRoles becomes a computed property and computedRoles is a data property. In my update, I changed the name of computedRoles to selectedRoles.
var Main = {
data() {
return {
availableRoles: [{
id: 1,
name: 'Admin'
}, {
id: 2,
name: 'Power User'
}, {
id: 3,
name: 'User'
}],
selectedRoles:[1,2]
}
},
computed : {
userRoles(){
return this.availableRoles.reduce((selected, role) => {
if (this.selectedRoles.includes(role.id))
selected.push(role);
return selected;
}, [])
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
And here is the fiddle.

Check the solution: jsfiddle
The caveat here is that computed properties are getters mainly. You can define setter for computed property, but my approach is more vue-like in my opinion.
In short, instead of v-model on computed set v-model for data property.
Full code:
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
<el-select v-model="ids" multiple placeholder="Select" #change="logit()">
<el-option v-for="item in availableRoles" :label="item.name" :value="item.id">
</el-option>
</el-select>
</template>
</div>
var Main = {
data() {
return {
availableRoles: [{
id: 1,
name: 'Admin'
}, {
id: 2,
name: 'Power User'
}, {
id: 3,
name: 'User'
}],
userRoles: [{'id':1, 'name':'Admin'}, {'id':3, 'name':'User'}],
ids: []
}
},
mounted() {
this.ids = this.userRoles.map(role => role.id);
},
methods: {
logit: function() {
console.log(this.ids);
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')