102 lines
2.8 KiB
TypeScript
102 lines
2.8 KiB
TypeScript
|
import { ApplicationController } from './application_controller';
|
||
|
|
|
||
|
|
export class ApiTokenAutorisationController extends ApplicationController {
|
||
|
|
static targets = [
|
||
|
|
'procedures',
|
||
|
|
'procedureSelect',
|
||
|
|
'procedureSelectGroup',
|
||
|
|
'continueButton'
|
||
|
|
];
|
||
|
|
|
||
|
|
declare readonly continueButtonTarget: HTMLButtonElement;
|
||
|
|
declare readonly procedureSelectTarget: HTMLSelectElement;
|
||
|
|
declare readonly procedureSelectGroupTarget: HTMLElement;
|
||
|
|
declare readonly proceduresTarget: HTMLElement;
|
||
|
|
|
||
|
|
connect() {
|
||
|
|
const urlSearchParams = new URLSearchParams(window.location.search);
|
||
|
|
const targetIds = urlSearchParams.getAll('targets[]');
|
||
|
|
const customTargets = urlSearchParams.get('target') == 'custom';
|
||
|
|
|
||
|
|
this.setupProceduresTarget(targetIds);
|
||
|
|
|
||
|
|
if (customTargets && targetIds.length > 0) {
|
||
|
|
this.showProcedureSelectGroup();
|
||
|
|
}
|
||
|
|
|
||
|
|
this.setContinueButtonState();
|
||
|
|
}
|
||
|
|
|
||
|
|
setupProceduresTarget(targetIds: string[]) {
|
||
|
|
const options = Array.from(this.procedureSelectTarget.options);
|
||
|
|
|
||
|
|
targetIds
|
||
|
|
.map((id) => options.find((x) => x.value == id))
|
||
|
|
.forEach((option) => option && this.addProcedureToSelect(option));
|
||
|
|
}
|
||
|
|
|
||
|
|
addProcedure(e: Event) {
|
||
|
|
e.preventDefault();
|
||
|
|
const selectedOption = this.procedureSelectTarget.selectedOptions[0];
|
||
|
|
this.addProcedureToSelect(selectedOption);
|
||
|
|
|
||
|
|
this.setContinueButtonState();
|
||
|
|
}
|
||
|
|
|
||
|
|
addProcedureToSelect(option: HTMLOptionElement) {
|
||
|
|
const template = [
|
||
|
|
`<li class='flex align-center'>`,
|
||
|
|
option.text,
|
||
|
|
"<button class='fr-btn fr-icon-delete-line fr-btn--tertiary-no-outline fr-ml-1w' data-action='click->api-token-autorisation#deleteProcedure'></button>",
|
||
|
|
`<input type='hidden' name='[targets][]' value='${option.value}' />`,
|
||
|
|
`</li>`
|
||
|
|
].join('');
|
||
|
|
|
||
|
|
this.proceduresTarget.insertAdjacentHTML('beforeend', template);
|
||
|
|
}
|
||
|
|
|
||
|
|
deleteProcedure(e: Event) {
|
||
|
|
e.preventDefault();
|
||
|
|
const target = e.target as HTMLElement;
|
||
|
|
target.closest('li')?.remove();
|
||
|
|
this.setContinueButtonState();
|
||
|
|
}
|
||
|
|
|
||
|
|
showProcedureSelectGroup() {
|
||
|
|
this.procedureSelectGroupTarget.classList.remove('hidden');
|
||
|
|
this.setContinueButtonState();
|
||
|
|
}
|
||
|
|
|
||
|
|
hideProcedureSelectGroup() {
|
||
|
|
this.procedureSelectGroupTarget.classList.add('hidden');
|
||
|
|
this.setContinueButtonState();
|
||
|
|
}
|
||
|
|
|
||
|
|
setContinueButtonState() {
|
||
|
|
if (this.targetDefined() && this.accessDefined()) {
|
||
|
|
this.continueButtonTarget.disabled = false;
|
||
|
|
} else {
|
||
|
|
this.continueButtonTarget.disabled = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
targetDefined() {
|
||
|
|
if (this.element.querySelectorAll("[value='all']:checked").length > 0) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (
|
||
|
|
this.element.querySelectorAll("[value='custom']:checked").length > 0 &&
|
||
|
|
this.proceduresTarget.children.length > 0
|
||
|
|
) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
accessDefined() {
|
||
|
|
return this.element.querySelectorAll("[name='access']:checked").length == 1;
|
||
|
|
}
|
||
|
|
}
|