1 import {htmlToDom} from "../services/dom";
2 import {Component} from "./component";
4 export class EntityPermissions extends Component {
7 this.container = this.$el;
8 this.entityType = this.$opts.entityType;
10 this.everyoneInheritToggle = this.$refs.everyoneInherit;
11 this.roleSelect = this.$refs.roleSelect;
12 this.roleContainer = this.$refs.roleContainer;
14 this.setupListeners();
18 // "Everyone Else" inherit toggle
19 this.everyoneInheritToggle.addEventListener('change', event => {
20 const inherit = event.target.checked;
21 const permissions = document.querySelectorAll('input[name^="permissions[0]["]');
22 for (const permission of permissions) {
23 permission.disabled = inherit;
24 permission.checked = false;
28 // Remove role row button click
29 this.container.addEventListener('click', event => {
30 const button = event.target.closest('button');
31 if (button && button.dataset.modelType) {
32 this.removeRowOnButtonClick(button)
37 this.roleSelect.addEventListener('change', event => {
38 const roleId = this.roleSelect.value;
40 this.addRoleRow(roleId);
45 async addRoleRow(roleId) {
46 this.roleSelect.disabled = true;
48 // Remove option from select
49 const option = this.roleSelect.querySelector(`option[value="${roleId}"]`);
54 // Get and insert new row
55 const resp = await window.$http.get(`/permissions/form-row/${this.entityType}/${roleId}`);
56 const row = htmlToDom(resp.data);
57 this.roleContainer.append(row);
59 this.roleSelect.disabled = false;
62 removeRowOnButtonClick(button) {
63 const row = button.closest('.item-list-row');
64 const modelId = button.dataset.modelId;
65 const modelName = button.dataset.modelName;
66 const modelType = button.dataset.modelType;
68 const option = document.createElement('option');
69 option.value = modelId;
70 option.textContent = modelName;
72 if (modelType === 'role') {
73 this.roleSelect.append(option);