Feat(SQL, UI): 1. Dog Command Links page completed with get + set functionality. \n 2. Commands page and Command Categories page completed with get + set functionality.
This commit is contained in:
@@ -74,8 +74,8 @@ export default class TableBasePage extends BasePage {
|
||||
if (isChecked) filterActiveNew.classList.add(flagIsChecked);
|
||||
|
||||
this.hookupEventHandler("click", filterSelector, (event, filterActive) => {
|
||||
console.log({ filterActive });
|
||||
console.log({ [filterActive.tagName]: filterActive.tagName });
|
||||
Utils.consoleLogIfNotProductionEnvironment({ filterActive });
|
||||
Utils.consoleLogIfNotProductionEnvironment({ [filterActive.tagName]: filterActive.tagName });
|
||||
let svgElement = (filterActive.tagName.toUpperCase() == 'SVG') ? filterActive : filterActive.parentElement;
|
||||
let wasChecked = svgElement.classList.contains(flagIsChecked);
|
||||
if (wasChecked) {
|
||||
@@ -120,6 +120,36 @@ export default class TableBasePage extends BasePage {
|
||||
hookupSearchTextFilter() {
|
||||
this.hookupFilter(flagSearch);
|
||||
}
|
||||
hookupFilterDog() {
|
||||
this.hookupFilter(attrIdDog);
|
||||
}
|
||||
hookupFilterCommandCategory() {
|
||||
this.hookupFilter(attrIdCommandCategory, (event, filterCommandCategory) => {
|
||||
TableBasePage.isDirtyFilter(filterCommandCategory);
|
||||
let isDirtyFilter = filterCommandCategory.classList.contains(flagDirty);
|
||||
let idCommandCategory = DOM.getElementValueCurrent(filterCommandCategory);
|
||||
console.log("filter commands unsorted");
|
||||
console.log(Utils.getListFromDict(filterCommands));
|
||||
let commandsInCategory = Utils.getListFromDict(filterCommands).filter(command => command[attrIdCommandCategory] == idCommandCategory);
|
||||
let sortedCommands = commandsInCategory.sort((a, b) => a[flagName].localeCompare(b[flagName]));
|
||||
let filterCommand = document.querySelector(idFormFilters + ' .' + flagCommand);
|
||||
let idCommandPrevious = DOM.getElementAttributeValuePrevious(filterCommand);
|
||||
filterCommand.innerHTML = '';
|
||||
let optionJson, option;
|
||||
option = DOM.createOption(null);
|
||||
filterCommand.appendChild(option);
|
||||
sortedCommands.forEach((command) => {
|
||||
optionJson = BusinessObjects.getOptionJsonFromObjectJson(command, idCommandPrevious);
|
||||
option = DOM.createOption(optionJson);
|
||||
filterCommand.appendChild(option);
|
||||
});
|
||||
filterCommand.dispatchEvent(new Event('change'));
|
||||
return isDirtyFilter;
|
||||
});
|
||||
}
|
||||
hookupFilterCommand() {
|
||||
this.hookupFilter(attrIdCommand);
|
||||
}
|
||||
/*
|
||||
getAndLoadFilteredTableContent = () => {
|
||||
this.callFilterTableContent()
|
||||
@@ -132,11 +162,11 @@ export default class TableBasePage extends BasePage {
|
||||
callFilterTableContent() {
|
||||
let formFilters = this.getFormFilters();
|
||||
let filtersJson = DOM.convertForm2JSON(formFilters);
|
||||
console.log("callFilterTableContent");
|
||||
console.log("formFilters");
|
||||
console.log(formFilters);
|
||||
console.log("filtersJson");
|
||||
console.log(filtersJson);
|
||||
Utils.consoleLogIfNotProductionEnvironment("callFilterTableContent");
|
||||
Utils.consoleLogIfNotProductionEnvironment("formFilters");
|
||||
Utils.consoleLogIfNotProductionEnvironment(formFilters);
|
||||
Utils.consoleLogIfNotProductionEnvironment("filtersJson");
|
||||
Utils.consoleLogIfNotProductionEnvironment(filtersJson);
|
||||
this.leave();
|
||||
API.goToHash(this.constructor.hash, filtersJson);
|
||||
}
|
||||
@@ -178,6 +208,7 @@ export default class TableBasePage extends BasePage {
|
||||
}
|
||||
let formElement = this.getFormFilters();
|
||||
let comment = DOM.getElementValueCurrent(document.querySelector(idTextareaConfirm));
|
||||
Utils.consoleLogIfNotProductionEnvironment({ formElement, comment, records });
|
||||
this.callSaveTableContent(records, formElement, comment)
|
||||
.then(data => {
|
||||
if (data[flagStatus] == flagSuccess) {
|
||||
@@ -388,7 +419,7 @@ export default class TableBasePage extends BasePage {
|
||||
let wasDirtyParentRows = this.getAllIsDirtyRowsInParentTree(element);
|
||||
let wasDirtyElement = element.classList.contains(flagDirty);
|
||||
let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
|
||||
Utils.consoleLogIfNotProductionEnvironment({isDirtyElement, wasDirtyElement, wasDirtyParentRows});
|
||||
// Utils.consoleLogIfNotProductionEnvironment({isDirtyElement, wasDirtyElement, wasDirtyParentRows});
|
||||
// let td = DOM.getCellFromElement(element);
|
||||
// DOM.setElementAttributeValueCurrent(td, DOM.getElementAttributeValueCurrent(element));
|
||||
if (isDirtyElement != wasDirtyElement) {
|
||||
@@ -427,14 +458,17 @@ export default class TableBasePage extends BasePage {
|
||||
}) {
|
||||
this.hookupEventHandler("change", inputSelector, handler);
|
||||
}
|
||||
hookupTextareasCodeTable() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagCode + ' textarea');
|
||||
hookupFieldsCodeTable() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' > tbody > tr > td.' + flagCode + ' > .' + flagCode);
|
||||
}
|
||||
hookupTextareasNameTable() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagName + ' textarea');
|
||||
hookupFieldsNameTable() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' > tbody > tr > td.' + flagName + ' > .' + flagName);
|
||||
}
|
||||
hookupTextareasDescriptionTable() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagDescription + ' textarea');
|
||||
hookupFieldsDescriptionTable() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' > tbody > tr > td.' + flagDescription + ' > .' + flagDescription);
|
||||
}
|
||||
hookupFieldsNotesTable() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' > tbody > tr > td.' + flagNotes + ' > .' + flagNotes);
|
||||
}
|
||||
hookupFieldsActive(flagTable = '', handleClickRowNew = (event, element) => { this.handleClickAddRowTable(event, element); }) {
|
||||
let selectorButton = 'table' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > tbody > tr > td.' + flagActive + ' .' + flagButton + '.' + flagActive;
|
||||
@@ -494,39 +528,41 @@ export default class TableBasePage extends BasePage {
|
||||
this.updateAndToggleShowButtonsSaveCancel();
|
||||
}
|
||||
hookupTdsAccessLevel() {
|
||||
let cellSelector = idTableMain + ' tbody td.' + flagAccessLevel;
|
||||
this.hookupTableCellDdlPreviews(cellSelector, Utils.getListFromDict(accessLevels));
|
||||
this.hookupTableCellDdlPreviews(flagAccessLevel, Utils.getListFromDict(accessLevels));
|
||||
}
|
||||
hookupTableCellDdlPreviews(
|
||||
cellSelector
|
||||
fieldFlag
|
||||
, optionList
|
||||
, ddlHookup = (cellSelector) => { this.hookupTableCellDdls(cellSelector); }
|
||||
, cellSelector = null
|
||||
, ddlHookup = (ddlSelector) => { this.hookupTableCellDdls(ddlSelector); }
|
||||
, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }
|
||||
) {
|
||||
this.hookupEventHandler("click", cellSelector, (event, td) => {
|
||||
if (cellSelector == null) cellSelector = idTableMain + ' > tbody > tr > td.' + fieldFlag;
|
||||
this.hookupEventHandler("click", cellSelector + ' div.' + fieldFlag, (event, div) => {
|
||||
this.handleClickTableCellDdlPreview(
|
||||
event
|
||||
, td
|
||||
, div
|
||||
, fieldFlag
|
||||
, optionList
|
||||
, cellSelector
|
||||
, (cellSelector) => { ddlHookup(
|
||||
cellSelector
|
||||
, (ddlSelector) => { ddlHookup(
|
||||
ddlSelector
|
||||
, (event, element) => { changeHandler(event, element); }
|
||||
); }
|
||||
);
|
||||
});
|
||||
ddlHookup(cellSelector + ' select');
|
||||
ddlHookup(cellSelector + ' select.' + fieldFlag);
|
||||
}
|
||||
hookupTableCellDdls(ddlSelector, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
|
||||
this.hookupEventHandler("change", ddlSelector, (event, element) => { changeHandler(event, element); });
|
||||
}
|
||||
handleClickTableCellDdlPreview(event, td, optionObjectList, cellSelector, ddlHookup = (cellSelector) => { this.hookupTableCellDdls(cellSelector); }) {
|
||||
if (td.querySelector('select')) return;
|
||||
let tdNew = td.cloneNode(true);
|
||||
td.parentNode.replaceChild(tdNew, td);
|
||||
let idSelected = DOM.getElementAttributeValueCurrent(tdNew);
|
||||
tdNew.innerHTML = '';
|
||||
handleClickTableCellDdlPreview(event, div, fieldFlag, optionObjectList, cellSelector = null, ddlHookup = (cellSelector) => { this.hookupTableCellDdls(cellSelector); }) {
|
||||
if (Validation.isEmpty(cellSelector)) cellSelector = idTableMain + ' > tbody > tr > td.' + fieldFlag;
|
||||
let idSelected = DOM.getElementAttributeValueCurrent(div);
|
||||
let td = DOM.getCellFromElement(div);
|
||||
td.innerHTML = '';
|
||||
let ddl = document.createElement('select');
|
||||
ddl.classList.add(fieldFlag);
|
||||
DOM.setElementValuesCurrentAndPrevious(ddl, idSelected);
|
||||
let optionJson, option;
|
||||
if (_verbose) {
|
||||
@@ -540,17 +576,17 @@ export default class TableBasePage extends BasePage {
|
||||
option = DOM.createOption(optionJson);
|
||||
ddl.appendChild(option);
|
||||
});
|
||||
tdNew.appendChild(ddl);
|
||||
let ddlSelector = cellSelector + ' select';
|
||||
td.appendChild(ddl);
|
||||
let ddlSelector = cellSelector + ' select.' + fieldFlag;
|
||||
ddlHookup(ddlSelector);
|
||||
}
|
||||
/*
|
||||
hookupTableCellDDlPreviewsWhenNotCollapsed(cellSelector, optionList, ddlHookup = (event, element) => { this.hookupTableCellDdls(event, element); }) {
|
||||
this.hookupEventHandler("click", cellSelector, (event, td) => {
|
||||
let div = td.querySelector('div');
|
||||
if (!div || div.classList.contains(flagCollapsed)) return;
|
||||
this.handleClickTableCellDdlPreview(event, td, optionList, cellSelector, (event, element) => { ddlHookup(event, element); });
|
||||
this.hookupEventHandler("click", cellSelector + ' div', (event, div) => {
|
||||
this.handleClickTableCellDdlPreview(event, div, optionList, cellSelector, (event, element) => { ddlHookup(event, element); });
|
||||
});
|
||||
}
|
||||
*/
|
||||
toggleColumnCollapsed(flagColumn, isCollapsed) {
|
||||
this.toggleColumnHasClassnameFlag(flagColumn, isCollapsed, flagCollapsed);
|
||||
}
|
||||
@@ -560,8 +596,9 @@ export default class TableBasePage extends BasePage {
|
||||
|
||||
hookupFieldsCommandCategory() {
|
||||
this.hookupTableCellDdlPreviews(
|
||||
idTableMain + ' td.' + flagCommandCategory
|
||||
, Utils.getListFromDict(filterCommandCategories)
|
||||
flagCommandCategory
|
||||
, Utils.getListFromDict(filterCommandCategories).sort((a, b) => a[flagName].localeCompare(b[flagName]))
|
||||
, null
|
||||
, (cellSelector) => { this.hookupCommandCategoryDdls(cellSelector); }
|
||||
);
|
||||
}
|
||||
@@ -569,19 +606,30 @@ export default class TableBasePage extends BasePage {
|
||||
this.hookupChangeHandlerTableCells(ddlSelector, (event, element) => { this.handleChangeCommandCategoryDdl(event, element); });
|
||||
}
|
||||
handleChangeCommandCategoryDdl(event, ddlCategory) {
|
||||
let idCommandCategoryOld = DOM.getElementAttributeValueCurrent(ddlCategory);
|
||||
this.handleChangeNestedElementCellTable(event, ddlCategory);
|
||||
let idCommandCategoryNew = DOM.getElementAttributeValueCurrent(ddlCategory);
|
||||
if (idCommandCategoryOld == idCommandCategoryNew) return;
|
||||
let row = DOM.getRowFromElement(ddlCategory);
|
||||
let idCommandCategoryRowOld = this.getIdCommandCategoryRow(row); // DOM.getElementAttributeValueCurrent(ddlCategory);
|
||||
this.handleChangeNestedElementCellTable(event, ddlCategory);
|
||||
let idCommandCategoryRowNew = this.getIdCommandCategoryRow(row); // DOM.getElementAttributeValueCurrent(ddlCategory);
|
||||
if (idCommandCategoryRowOld == idCommandCategoryRowNew) return;
|
||||
let idCommandCategoryFilter = this.getIdCommandCategoryFilter();
|
||||
let tdCommand = row.querySelector('td.' + flagCommand);
|
||||
tdCommand.dispatchEvent(new Event('click'));
|
||||
let ddlCommand = row.querySelector('td.' + flagCommand + ' select');
|
||||
let ddlCommand = row.querySelector('td.' + flagCommand + ' select.' + flagCommand);
|
||||
ddlCommand.innerHTML = '';
|
||||
ddlCommand.appendChild(DOM.createOption(null));
|
||||
let optionJson, option;
|
||||
Utils.getListFromDict(filterCommands).forEach((command) => {
|
||||
if (idCommandCategoryNew != '0' && command[attrIdCommandCategory] != idCommandCategoryNew) return;
|
||||
let commandsInCategory = Utils.getListFromDict(filterCommands).filter(command =>
|
||||
(
|
||||
command[attrIdCommandCategory] == idCommandCategoryRowNew
|
||||
|| idCommandCategoryRowNew == 0
|
||||
)
|
||||
&& (
|
||||
command[attrIdCommandCategory] == idCommandCategoryFilter
|
||||
|| idCommandCategoryFilter == 0
|
||||
)
|
||||
);
|
||||
let sortedCommands = commandsInCategory.sort((a, b) => a[flagName].localeCompare(b[flagName]));
|
||||
sortedCommands.forEach((command) => {
|
||||
optionJson = BusinessObjects.getOptionJsonFromObjectJson(command);
|
||||
option = DOM.createOption(optionJson);
|
||||
ddlCommand.appendChild(option);
|
||||
@@ -589,36 +637,44 @@ export default class TableBasePage extends BasePage {
|
||||
this.handleChangeNestedElementCellTable(event, ddlCommand);
|
||||
}
|
||||
hookupFieldsCommand() {
|
||||
let cellSelector = idTableMain + ' td.' + flagCommand;
|
||||
this.hookupEventHandler("click", cellSelector, (event, td) => {
|
||||
let parentTr = td.parentElement;
|
||||
this.hookupEventHandler("click", idTableMain + ' td.' + flagCommand + ' .' + flagCommand, (event, div) => {
|
||||
Utils.consoleLogIfNotProductionEnvironment(div);
|
||||
let parentTr = DOM.getRowFromElement(div);
|
||||
Utils.consoleLogIfNotProductionEnvironment({ div, parentTr });
|
||||
let tdCommandCategory = parentTr.querySelector('td.' + flagCommandCategory);
|
||||
let idCommandCategoryRow = DOM.getElementAttributeValueCurrent(tdCommandCategory);
|
||||
let idCommandCategoryRow = this.getIdCommandCategoryRow(parentTr); // DOM.getElementAttributeValueCurrent(tdCommandCategory);
|
||||
let idCommandCategoryFilter = this.getIdCommandCategoryFilter();
|
||||
let filterCommandList = Utils.getListFromDict(filterCommands);
|
||||
let commandsInCategory = filterCommandList.filter(command =>
|
||||
(
|
||||
command[attrIdCommandCategory] == idCommandCategoryRow
|
||||
|| idCommandCategoryRow == 0
|
||||
)
|
||||
&& (
|
||||
command[attrIdCommandCategory] == idCommandCategoryFilter
|
||||
|| idCommandCategoryFilter == 0
|
||||
)
|
||||
);
|
||||
console.log({ tdCommandCategory, idCommandCategoryRow, filterCommandList, commandsInCategory });
|
||||
console.log(filterCommandList);
|
||||
let sortedCommands = commandsInCategory.sort((a, b) => a[flagName].localeCompare(b[flagName]));
|
||||
Utils.consoleLogIfNotProductionEnvironment({ tdCommandCategory, idCommandCategoryRow, idCommandCategoryFilter, filterCommandList, commandsInCategory });
|
||||
Utils.consoleLogIfNotProductionEnvironment(filterCommandList);
|
||||
this.handleClickTableCellDdlPreview(
|
||||
event
|
||||
, td
|
||||
, commandsInCategory
|
||||
, cellSelector
|
||||
, div
|
||||
, flagCommand
|
||||
, sortedCommands
|
||||
, null
|
||||
, (cellSelector) => { this.hookupTableCellDdls(
|
||||
cellSelector
|
||||
, (event, element) => { this.handleChangeNestedElementCellTable(event, element); }
|
||||
); }
|
||||
);
|
||||
});
|
||||
this.hookupTableCellDdls(cellSelector + ' select');
|
||||
this.hookupTableCellDdls(idTableMain + ' td.' + flagCommand + ' select.' + flagCommand);
|
||||
}
|
||||
getIdCommandCategoryRow(tr) {
|
||||
let elementCommandCategory = tr.querySelector('td.' + flagCommandCategory + ' .' + flagCommandCategory);
|
||||
return DOM.getElementAttributeValueCurrent(elementCommandCategory);
|
||||
}
|
||||
getIdCommandCategoryFilter() {
|
||||
let formFilters = this.getFormFilters();
|
||||
@@ -626,9 +682,10 @@ export default class TableBasePage extends BasePage {
|
||||
let commandFilter = formFilters.querySelector('#' + attrIdCommand);
|
||||
let idCommandCategory = 0;
|
||||
let valueCurrentCommandCategoryFilter = DOM.getElementAttributeValueCurrent(commandCategoryFilter);
|
||||
console.log({ valueCurrentCommandCategoryFilter });
|
||||
Utils.consoleLogIfNotProductionEnvironment({ valueCurrentCommandCategoryFilter });
|
||||
if (valueCurrentCommandCategoryFilter == "") {
|
||||
let valueCurrentCommandFilter = DOM.getElementAttributeValueCurrent(commandFilter);
|
||||
Utils.consoleLogIfNotProductionEnvironment({ valueCurrentCommandFilter });
|
||||
if (valueCurrentCommandFilter != "") {
|
||||
let command = filterCommands[valueCurrentCommandFilter];
|
||||
idCommandCategory = command[attrIdCommandCategory];
|
||||
@@ -642,6 +699,10 @@ export default class TableBasePage extends BasePage {
|
||||
let idCommandCategoryFilter = this.getIdCommandCategoryFilter();
|
||||
return !(Validation.isEmpty(idCommandCategoryFilter) || idCommandCategoryFilter == 0);
|
||||
}
|
||||
getIdCommandRow(tr) {
|
||||
let elementCommand = tr.querySelector('td.' + flagCommand + ' .' + flagCommand);
|
||||
return DOM.getElementAttributeValueCurrent(elementCommand);
|
||||
}
|
||||
getIdCommandFilter() {
|
||||
let formFilters = this.getFormFilters();
|
||||
let commandFilter = formFilters.querySelector('#' + attrIdCommand);
|
||||
@@ -654,7 +715,11 @@ export default class TableBasePage extends BasePage {
|
||||
return !(Validation.isEmpty(idCommandFilter) || idCommandFilter == 0);
|
||||
}
|
||||
hookupFieldsDog() {
|
||||
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagDog, Utils.getListFromDict(filterDogs));
|
||||
this.hookupTableCellDdlPreviews(flagDog, Utils.getListFromDict(filterDogs));
|
||||
}
|
||||
getIdDogRow(tr) {
|
||||
let elementDog = tr.querySelector('td.' + flagDog + ' .' + flagDog);
|
||||
return DOM.getElementAttributeValueCurrent(elementDog);
|
||||
}
|
||||
|
||||
createTdActive(isActive) {
|
||||
|
||||
Reference in New Issue
Block a user