100 lines
4.0 KiB
JavaScript
100 lines
4.0 KiB
JavaScript
import {Controller} from '@hotwired/stimulus';
|
|
import Choices from 'choices.js';
|
|
/*
|
|
* The following line makes this controller "lazy": it won't be downloaded until needed
|
|
* See https://symfony.com/bundles/StimulusBundle/current/index.html#lazy-stimulus-controllers
|
|
*/
|
|
|
|
/* stimulusFetch: 'lazy' */
|
|
export default class extends Controller {
|
|
static values = {
|
|
rolesArray: Array,
|
|
selectedRoleIds: Array,
|
|
applicationsArray: Array,
|
|
selectedApplicationIds: Array
|
|
}
|
|
// {value: 'choice1', label: 'Choice 1'},
|
|
// {value: 'choice2', label: 'Choice 2'},
|
|
// {value: 'choice3', label: 'Choice 3'},
|
|
|
|
roleSelect() {
|
|
const element = document.getElementById('roles');
|
|
if (element) {
|
|
const choicesData = this.rolesArrayValue.map(role => ({
|
|
value: role.id,
|
|
label: role.name,
|
|
selected: this.selectedRoleIdsValue.includes(role.id)
|
|
}));
|
|
|
|
const choices = new Choices(element, {
|
|
choices: choicesData,
|
|
removeItemButton: true,
|
|
placeholder: true,
|
|
placeholderValue: 'Ajouter un ou plusieurs rôles'
|
|
});
|
|
}
|
|
}
|
|
|
|
appSelect() {
|
|
const element = document.getElementById('applications');
|
|
if (element) {
|
|
|
|
const choicesData = this.applicationsArrayValue.map(app => ({
|
|
value: app.id,
|
|
label: app.name,
|
|
customProperties: { icon: app.icon },
|
|
selected: this.selectedApplicationIdsValue.includes(app.id)
|
|
}));
|
|
|
|
const choices = new Choices(element, {
|
|
choices: choicesData,
|
|
removeItemButton: true,
|
|
placeholder: true,
|
|
placeholderValue: 'Ajouter une ou plusieurs applications',
|
|
// callbackOnCreateTemplates: function(template) {
|
|
// return {
|
|
// // Custom rendering for dropdown choices
|
|
// choice: (classNames, data) => {
|
|
// return template(`
|
|
// <div class="${classNames.item} ${classNames.itemChoice}" data-select-text="${this.config.itemSelectText}" data-choice data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'} >
|
|
// ${data.customProperties && data.customProperties.icon ? `<img src="${data.customProperties.icon}" alt="" style="width:20px;height:20px;vertical-align:middle;margin-right:8px;">` : ''}
|
|
// ${data.label}
|
|
// </div>
|
|
// `);
|
|
// },
|
|
// // Custom rendering for selected items
|
|
// item: (classNames, data) => {
|
|
// return template(`
|
|
// <div class="${classNames.item} ${classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
|
|
// ${data.customProperties && data.customProperties.icon ? `<img src="${data.customProperties.icon}" alt="" style="width:20px;height:20px;vertical-align:middle;margin-right:8px;">` : ''}
|
|
// ${data.label}
|
|
// </div>
|
|
// `);
|
|
// }
|
|
})
|
|
}
|
|
};
|
|
// }
|
|
// }
|
|
|
|
connect() {
|
|
this.roleSelect();
|
|
this.appSelect();
|
|
|
|
// Set choices after initialization
|
|
// choices.setValue(choicesData);
|
|
}
|
|
|
|
|
|
// Add custom controller actions here
|
|
// fooBar() { this.fooTarget.classList.toggle(this.bazClass) }
|
|
|
|
disconnect() {
|
|
// Called anytime its element is disconnected from the DOM
|
|
// (on page change, when it's removed from or moved in the DOM, etc.)
|
|
|
|
// Here you should remove all event listeners added in "connect()"
|
|
// this.fooTarget.removeEventListener('click', this._fooBar)
|
|
}
|
|
}
|