I am looking for a way to show dependent dropdowns using reactive form with the help of dynamic Json.
Below is my main input json:
JsonObj = {
'Desktop': {
'pwdevices': {
'pwsize': 777,
'pwtype': 'mobile'
},
'pwid': 456,
'pwrules': 'generate'
},
'Laptop': {
'release': 'april',
'service': 'provisioning',
'sheerid': 123,
'sprint': {
'id': 990,
'support': 'desktop'
}
}
};
Dropdown should show the json keys like below:
Val 1: Desktop(selected)/laptop > pwdevices(selected)/pwid/pwrules > pwsize(selected)/pwtype > number
Val 2: Desktop/laptop(selected)> release/service/sheerid/sprint(selected)> id/support(selected) > string
And so on...
Each val/constructed dropdown row above will have a delete button. Clicking on it will delete corresponding val.
Related
I have two arrays, one with 7 boolean values representing the weekdays, and the other with the weekdays names and the value of which day of the week it represents, kind of index of weekdays (0 beeing sunday, and 6 beeing saturday)
This sample is from the ts file belonging to the vue file where the autocomplete is.
export const scheduleDays: TextValueViewModel[] = [
{ Text: "Mon", Value: 1},
{ Text: "Tue", Value: 2 },
{ Text: "Wed", Value: 3 },
{ Text: "Thu", Value: 4 },
{ Text: "Fri", Value: 5 },
{ Text: "Sat", Value: 6 },
{ Text: "Sun", Value: 0 }
];
This is from a view model I have containing this array with booleans representing the weekdays.
public readonly SelectedDays: boolean[] = [false,false,false,false,false,false,false];
I then have a autocomplete where I want to save the clicked checkboxes and that would be saved into the boolean array
<v-autocomplete
v-model="editedReleaseSchedule.ScheduleInterval.SelectedDays"
:items="scheduleDays"
:item-text="item => `${item.Text}`"
:item-value="item => `${item.Value}`"
:label="'ADMINISTRATION_RELEASE_SCHEDULE_DETAILS_SCHEDULED_DAYS' | translate('Selected days')"
:disabled="formDisabled"
:rules="[rules.required]"
outlined
hide-details
multiple
dense
/>
How can I make the clicked value of the weekday array beeing saved into the boolean array in the right index spot? And at the same time I want the correct checkboxes be checked in the autocomplete field.
The implemented auto complete in the interface
Using Vue 2 at my workplace, so no solution for vue 3 would work out for me.
I've tried to google if I can get the index of the v-autocomplete row and use that in item-value like:
editedReleaseSchedule.ScheduleInterval.SelectedDays[index]
but that does not seem possible. I've also tried different ways of filtering before using v-autocomplete, but I still want the whole list, not only the clicked (marked) once.
Use an intermediate model for the selectedValues, watch it, and map the selected values ([1,2,3...,0]) into the real model.
data: () => ({
selectedValues: [],
// ...
<v-autocomplete
v-model="selectedValues"
<!-- etc -->
watch: {
selectedValues(newValues) {
const allFalse = [false,false,false,false,false,false,false];
this.editedReleaseSchedule.ScheduleInterval.SelectedDays = allFalse;
newValues.forEach(value => {
// presumes sunday is the last index, the others are offset by +1
let j = value === 0 ? 6 : value-1;
this.editedReleaseSchedule.ScheduleInterval.SelectedDays[j] = true;
})
},
In Vue2 I got Two el-select.
One is for selecting count,the other one is for name,
when you select the name it will save both name and price to data
<el-select
v-model="item"
value-key="name"
>
<el-option
v-for="(option,index) in OptionsArr"
:key="index"
:label="option.name"
:value="option"
>
{{option.name}}
</el-option>
OptionsArr
[
{
name: "apple" ,
price: 200
},
{
name: "orange" ,
price: 150
}
]
initial data
[
{
name:"",
price:0,
count:0
}
]
data when select apple
[
{
name:"apple",
price:200,
count:0
}
]
And now I want to let user create their own option so I add filterable, allow-create and default-first-option to this el-select
<el-select
v-model="item"
value-key="name"
filterable
allow-create
default-first-option
Now when I input "NewOption" to create an option, it just add a string to the data array, the data becomes:
[
"NewOption"
]
and I want to add a object to the array like this:
[
{
name:"NewOption",
price:0,
count:0
}
]
I tried #change to put an object to the array, but in that way the other el-select which bind the count of the data item cannot work.
<el-select
v-model="item.count"
I want to show en edit icon next to value in Amount column. This is because the Amount column is actually editable.But to give that as a hint to user, i want to show some edit icon next to it. How to do that in aurelia slickgrid?
Or maybe there is a way to highlight a field on hover ?
I am using aurelia slickgrid and looking if there is some option in aurelia slickgrid itself.
Go to the aurelia slickgrid example link and click on the link of example's source code
When you open it, there is a method called defineGrids
/* Define grid Options and Columns */
defineGrids() {
this.columnDefinitions1 = [
...,
...,
...,
...,
...,
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }
];
... rest of the code
}
The row with id effort-driven is where the icons are placed. On the other words, when you push a data collection(usually array of json object) to the table, values of the data objects with key name effort-driven are given to column with id effort-driven. Furthermore, for each passed value to the column, the method myCustomCheckmarkFormatter reformat it(for example 0 -> false or null -> not filled) and place it to the corresponding table's cell. look at the below method:
// create my custom Formatter with the Formatter type
const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
// you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
};
As you can see, when the method is called, it returns an icon such as <i class="fa fa-fire red" aria-hidden="true"></i> which is placed in the table's cell.
I added an edit icon next to Amount,
{
id: "Edit",
field: "edit",
excludeFromColumnPicker: true,
excludeFromExport: true,
excludeFromQuery: true,
excludeFromGridMenu: true,
excludeFromHeaderMenu: true,
minWidth: 30,
maxWidth: 30,
formatter: Formatters.editIcon,
},
and used this custom format from ghiscoding comment:
const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext, grid) => {
const isEditable = !!columnDef.editor;
value = (value === null || value === undefined) ? '' : value;
return isEditable ? `<div style="background-color: aliceblue">${value}</div>` : value;
};
The result is as shown in the picture.
I have implemented PivotTable.JS in Filemaker and it works great. I've added the callback code and that function seems to be working when I click on a cell. When click on the cell I get the dialog "Message from webpage", I assume I still need to add some code to show the records that makes up the content of the click cell. What would be the approach to show the records, unfortunately I am not java script savvy.
$("#output").pivotUI(
$.pivotUtilities.tipsData, {
cols: ["Quarter Latest"],
rows: ["Customer"],
vals: ["Wt Forecast"],
aggregatorName: "Sum",
rendererName: "Table",
renderers: $.extend(
$.pivotUtilities.renderers,
$.pivotUtilities.c3_renderers,
$.pivotUtilities.export_renderers
),
rendererOptions: {
table: {
clickCallback: function(e, value, filters, pivotData){
var names = [];
pivotData.forEachMatchingRecord(filters,
function(record){ names.push(record.Name); });
alert(names.join("\n"));
}
}
}
});
I guess the problem is that you are pushing into the array 'names' a field 'Name' that is not available in your recordset.
You can access de complete json returned on the clickCallBack by making a small change to your code.
$("#output").pivotUI(
$.pivotUtilities.tipsData, {
cols: ["Quarter Latest"],
rows: ["Customer"],
vals: ["Wt Forecast"],
aggregatorName: "Sum",
rendererName: "Table",
renderers: $.extend(
$.pivotUtilities.renderers,
$.pivotUtilities.c3_renderers,
$.pivotUtilities.export_renderers
),
rendererOptions: {
table: {
clickCallback: function(e, value, filters, pivotData){
var fullData = [];
pivotData.forEachMatchingRecord(filters,
function(record){ fullData.push(record); });
console.log(fullData);
}
}
}
});
Perhaps you can later pass that JSON to another function and build a table.
Let's say I have an array of users:
usersData = [
{ id: 21, name: 'John Dean' },
{ id: 3, name: 'Mike Brine' },
{ id: 6, name: 'Tom Kalvi' }
]
names in userData are generated from another array with full user information: user.first_name + user.last_name
When I build Vue-Chart Bar, labels array store this data with indexes:
labels = { 0: "John Dean", 1: "Mike Brine", 2: "Tom Kalvi" }
And when I want to get original ID from Bar event onClick, I receive only index.
I need to load additional information for each user based on Bar click, but I need to have original ID.
What is the easiest way to get it?
Thank you in advance
Well if you have an index clicked just do like this:
usersData[clickedIndex].id