2023-04-18 23:20:02 +02:00
|
|
|
import {htmlToDom} from '../services/dom';
|
|
|
|
import {Component} from './component';
|
2022-10-21 11:13:11 +02:00
|
|
|
|
2022-11-15 13:44:57 +01:00
|
|
|
export class EntityPermissions extends Component {
|
2022-10-02 19:09:48 +02:00
|
|
|
|
|
|
|
setup() {
|
2022-10-10 13:24:23 +02:00
|
|
|
this.container = this.$el;
|
|
|
|
this.entityType = this.$opts.entityType;
|
|
|
|
|
2022-10-02 19:09:48 +02:00
|
|
|
this.everyoneInheritToggle = this.$refs.everyoneInherit;
|
2022-10-10 13:24:23 +02:00
|
|
|
this.roleSelect = this.$refs.roleSelect;
|
|
|
|
this.roleContainer = this.$refs.roleContainer;
|
2022-10-02 19:09:48 +02:00
|
|
|
|
|
|
|
this.setupListeners();
|
|
|
|
}
|
|
|
|
|
|
|
|
setupListeners() {
|
2022-10-10 13:24:23 +02:00
|
|
|
// "Everyone Else" inherit toggle
|
2022-10-02 19:09:48 +02:00
|
|
|
this.everyoneInheritToggle.addEventListener('change', event => {
|
|
|
|
const inherit = event.target.checked;
|
2022-10-10 18:22:38 +02:00
|
|
|
const permissions = document.querySelectorAll('input[name^="permissions[0]["]');
|
2022-10-02 19:09:48 +02:00
|
|
|
for (const permission of permissions) {
|
|
|
|
permission.disabled = inherit;
|
|
|
|
permission.checked = false;
|
|
|
|
}
|
2022-10-10 13:24:23 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
// Remove role row button click
|
|
|
|
this.container.addEventListener('click', event => {
|
|
|
|
const button = event.target.closest('button');
|
|
|
|
if (button && button.dataset.roleId) {
|
2023-04-18 23:20:02 +02:00
|
|
|
this.removeRowOnButtonClick(button);
|
2022-10-10 13:24:23 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Role select change
|
2023-04-19 16:20:04 +02:00
|
|
|
this.roleSelect.addEventListener('change', () => {
|
2022-10-10 13:24:23 +02:00
|
|
|
const roleId = this.roleSelect.value;
|
|
|
|
if (roleId) {
|
|
|
|
this.addRoleRow(roleId);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
async addRoleRow(roleId) {
|
|
|
|
this.roleSelect.disabled = true;
|
|
|
|
|
|
|
|
// Remove option from select
|
|
|
|
const option = this.roleSelect.querySelector(`option[value="${roleId}"]`);
|
|
|
|
if (option) {
|
|
|
|
option.remove();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Get and insert new row
|
|
|
|
const resp = await window.$http.get(`/permissions/form-row/${this.entityType}/${roleId}`);
|
2022-10-21 11:13:11 +02:00
|
|
|
const row = htmlToDom(resp.data);
|
2022-10-10 13:24:23 +02:00
|
|
|
this.roleContainer.append(row);
|
|
|
|
|
|
|
|
this.roleSelect.disabled = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
removeRowOnButtonClick(button) {
|
2022-10-29 16:23:21 +02:00
|
|
|
const row = button.closest('.item-list-row');
|
2023-04-18 23:20:02 +02:00
|
|
|
const {roleId} = button.dataset;
|
|
|
|
const {roleName} = button.dataset;
|
2022-10-10 13:24:23 +02:00
|
|
|
|
|
|
|
const option = document.createElement('option');
|
|
|
|
option.value = roleId;
|
|
|
|
option.textContent = roleName;
|
|
|
|
|
|
|
|
this.roleSelect.append(option);
|
|
|
|
row.remove();
|
2022-10-02 19:09:48 +02:00
|
|
|
}
|
|
|
|
|
2023-04-18 23:20:02 +02:00
|
|
|
}
|