mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-02 04:39:25 -04:00
bb50326811
only remove the add template button if they have the folder service permission (thus can see the add button at the bottom). Also make some unnecessary functions into strings in the js, and remove some commented out code
108 lines
3.7 KiB
JavaScript
108 lines
3.7 KiB
JavaScript
(function(Modules) {
|
|
"use strict";
|
|
|
|
Modules.TemplateFolderForm = function() {
|
|
|
|
this.start = function(templateFolderForm) {
|
|
this.$form = $(templateFolderForm);
|
|
|
|
this.$stickyBottom = this.$form.find('#sticky_template_forms');
|
|
|
|
this.$stickyBottom.append(this.nothingSelectedButtons);
|
|
this.$stickyBottom.append(this.itemsSelectedButtons);
|
|
|
|
// all the diff states that we want to show or hide
|
|
this.states = {
|
|
nothingSelectedButtons: this.$form.find('#nothing_selected'),
|
|
itemsSelectedButtons: this.$form.find('#items_selected'),
|
|
|
|
moveToFolderRadios: this.$form.find('#move_to_folder_radios'),
|
|
moveToNewFolderForm: this.$form.find('#move_to_new_folder_form'),
|
|
|
|
addNewFolderForm: this.$form.find('#add_new_folder_form'),
|
|
addNewTemplateForm: this.$form.find('#add_new_template_form'),
|
|
|
|
};
|
|
|
|
// cancel buttons only relevant if JS enabled, so
|
|
this.addCancelButton(this.states.moveToFolderRadios);
|
|
this.addCancelButton(this.states.moveToNewFolderForm);
|
|
this.addCancelButton(this.states.addNewFolderForm);
|
|
this.addCancelButton(this.states.addNewTemplateForm);
|
|
|
|
// first off show the new template / new folder buttons
|
|
this.currentState = 'nothingSelectedButtons';
|
|
|
|
this.$form.on('click', 'button.button-secondary', (event) => this.actionButtonClicked(event));
|
|
this.$form.on('change', 'input[type=checkbox]', () => this.templateFolderCheckboxChanged());
|
|
|
|
this.render();
|
|
};
|
|
|
|
this.addCancelButton = function($el) {
|
|
let $cancel = $('<a></a>')
|
|
.html('Cancel')
|
|
.click((event) => {
|
|
event.preventDefault();
|
|
// clear existing data
|
|
$el.find('input:radio').prop('checked', false);
|
|
$el.find('input:text').val('');
|
|
|
|
// gross hack - pretend we're in the choose actions state, then pretend a checkbox was clicked to work out
|
|
// whether to show zero or non-zero options. This calls a render at the end
|
|
this.currentState = 'nothingSelectedButtons';
|
|
this.templateFolderCheckboxChanged();
|
|
});
|
|
|
|
$el.append($cancel);
|
|
};
|
|
|
|
this.actionButtonClicked = function(event) {
|
|
event.preventDefault();
|
|
this.currentState = $(event.currentTarget).val();
|
|
|
|
this.render();
|
|
};
|
|
|
|
this.templateFolderCheckboxChanged = function() {
|
|
let numSelected = this.countSelectedCheckboxes();
|
|
|
|
if (this.currentState === 'nothingSelectedButtons' && numSelected !== 0) {
|
|
// user has just selected first item
|
|
this.currentState = 'itemsSelectedButtons';
|
|
} else if (this.currentState === 'itemsSelectedButtons' && numSelected === 0) {
|
|
// user has just deselected last item
|
|
this.currentState = 'nothingSelectedButtons';
|
|
}
|
|
|
|
this.render();
|
|
};
|
|
|
|
this.countSelectedCheckboxes = function() {
|
|
return this.$form.find('input:checkbox:checked').length;
|
|
};
|
|
|
|
this.render = function() {
|
|
// detach everything, unless they are the currentState
|
|
Object.entries(this.states).forEach(
|
|
([state, $el]) => (state === this.currentState ? this.$stickyBottom.append($el) : $el.detach())
|
|
);
|
|
};
|
|
|
|
this.nothingSelectedButtons = `
|
|
<div id="nothing_selected">
|
|
<button class="button-secondary" value="addNewTemplateForm">New template</button>
|
|
<button class="button-secondary" value="addNewFolderForm">New folder</button>
|
|
</div>
|
|
`;
|
|
|
|
this.itemsSelectedButtons = `
|
|
<div id="items_selected">
|
|
<button class="button-secondary" value="moveToFolderRadios">Move</button>
|
|
<button class="button-secondary" value="moveToNewFolderForm">Add to a new folder</button>
|
|
</div>
|
|
`;
|
|
};
|
|
|
|
})(window.GOVUK.Modules);
|