admin/dog_training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(SQL, UI): 1. Updated User Calc Stored Procedure with Search functionality from previous commit on Command and Dog tables. \n 2. Corrected functionality of active field trash and add icons instead of button with replaceable text. \n 3. Improved styling on Dog Command Link page.

Browse Source
This commit is contained in:
Teddy Middleton-Smith
2025-07-06 20:50:35 +01:00
parent 8cb8508dcd
commit 660b15cb8f
28 changed files with 1279 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
static/js/dom.js
View File

@@ -122,7 +122,7 @@ export default class DOM {
else if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {
returnVal = element.value;
}
else if (tagName === 'BUTTON' && element.classList.contains(flagActive)) {
else if (element.classList.contains(flagButton) && element.classList.contains(flagActive)) { // tagName === 'BUTTON'
returnVal = element.classList.contains(flagDelete);
}
else if (tagName === 'TD') {
@@ -218,4 +218,15 @@ export default class DOM {
option.selected = optionJson.selected;
return option;
}
static escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
static unescapeHtml(html) {
const div = document.createElement('div');
div.innerHTML = html;
return div.textContent || div.innerText || '';
}
}

2
static/js/lib/utils.js
View File

@@ -17,7 +17,7 @@ export default class Utils {
return list;
}
static consoleLogIfNotProductionEnvironment(message) {
if (!environment.is_production) {
if (environment.is_production != "true") {
console.log(message);
}
}

53
static/js/pages/base_table.js
View File

@@ -389,10 +389,10 @@ export default class TableBasePage extends BasePage {
let wasDirtyElement = element.classList.contains(flagDirty);
let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
Utils.consoleLogIfNotProductionEnvironment({isDirtyElement, wasDirtyElement, wasDirtyParentRows});
let td = DOM.getCellFromElement(element);
DOM.setElementAttributeValueCurrent(td, DOM.getElementAttributeValueCurrent(element));
// let td = DOM.getCellFromElement(element);
// DOM.setElementAttributeValueCurrent(td, DOM.getElementAttributeValueCurrent(element));
if (isDirtyElement != wasDirtyElement) {
DOM.handleDirtyElement(td, isDirtyElement);
// DOM.handleDirtyElement(td, isDirtyElement);
this.updateAndToggleShowButtonsSaveCancel();
this.cascadeChangedIsDirtyNestedElementCellTable(element, isDirtyElement, wasDirtyParentRows);
}
@@ -402,7 +402,7 @@ export default class TableBasePage extends BasePage {
let parent = element;
let isDirty;
while (parent) {
if (parent.matches('tr')) {
if (parent.tagName.toUpperCase() == 'TR') {
isDirty = parent.classList.contains(flagDirty)
rows.push(isDirty);
}
@@ -412,11 +412,8 @@ export default class TableBasePage extends BasePage {
}
cascadeChangedIsDirtyNestedElementCellTable(element, isDirtyElement, wasDirtyParentRows) {
if (Validation.isEmpty(wasDirtyParentRows)) return;
let td = DOM.getCellFromElement(element);
let isDirtyTd = isDirtyElement || DOM.hasDirtyChildrenContainer(tr);
DOM.handleDirtyElement(td, isDirtyTd);
let tr = DOM.getRowFromElement(td);
let isDirtyRow = isDirtyTd || DOM.hasDirtyChildrenContainer(tr);
let tr = DOM.getRowFromElement(element);
let isDirtyRow = isDirtyElement || DOM.hasDirtyChildrenContainer(tr);
let wasDirtyRow = wasDirtyParentRows.shift();
Utils.consoleLogIfNotProductionEnvironment({isDirtyRow, wasDirtyRow});
if (isDirtyRow != wasDirtyRow) {
@@ -440,7 +437,7 @@ export default class TableBasePage extends BasePage {
this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagDescription + ' textarea');
}
hookupFieldsActive(flagTable = '', handleClickRowNew = (event, element) => { this.handleClickAddRowTable(event, element); }) {
let selectorButton = 'table' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > tbody > tr > td.' + flagActive + ' button';
let selectorButton = 'table' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > tbody > tr > td.' + flagActive + ' .' + flagButton + '.' + flagActive;
let selectorButtonDelete = selectorButton + '.' + flagDelete;
let selectorButtonUndelete = selectorButton + ':not(.' + flagDelete + ')';
Utils.consoleLogIfNotProductionEnvironment("hookupFieldsActive: ", selectorButtonDelete, selectorButtonUndelete);
@@ -448,7 +445,7 @@ export default class TableBasePage extends BasePage {
this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
this.hookupEventHandler(
"click"
, 'table' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > thead > tr > th.' + flagActive + ' button'
, 'table' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > thead > tr > th.' + flagActive + ' .' + flagButton + '.' + flagActive
, (event, button) => { handleClickRowNew(event, button); }
);
}
@@ -458,18 +455,23 @@ export default class TableBasePage extends BasePage {
});
}
handleClickButtonRowDelete(event, element, selectorButtonDelete, selectorButtonUndelete, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
if (element.tagName.toUpperCase() != 'SVG') element = element.parentElement;
let valuePrevious = DOM.getElementAttributeValuePrevious(element);
let wasDirty = element.classList.contains(flagDirty);
let row = DOM.getRowFromElement(element);
if (row.classList.contains(flagRowNew) && !DOM.hasDirtyChildrenContainer(row)) {
row.parentNode.removeChild(row);
}
let buttonAdd = element.cloneNode(false);
buttonAdd.classList.remove(flagInitialised);
buttonAdd.classList.remove(flagDelete);
buttonAdd.classList.add(flagAdd);
buttonAdd.textContent = '+';
element.replaceWith(buttonAdd);
changeHandler(null, buttonAdd);
this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete, (changeEvent, changeElement) => { changeHandler(changeEvent, changeElement); });
else {
let buttonAddTemplate = document.querySelector(idContainerTemplateElements + ' .' + flagButton + '.' + flagActive + '.' + flagAdd);
let buttonAdd = buttonAddTemplate.cloneNode(true);
DOM.setElementAttributeValuePrevious(buttonAdd, valuePrevious);
DOM.setElementAttributeValueCurrent(buttonAdd, false);
if (wasDirty) buttonAdd.classList.add(flagDirty);
element.replaceWith(buttonAdd);
changeHandler(null, buttonAdd);
this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete, (changeEvent, changeElement) => { changeHandler(changeEvent, changeElement); });
}
this.updateAndToggleShowButtonsSaveCancel();
}
hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
@@ -478,11 +480,14 @@ export default class TableBasePage extends BasePage {
});
}
handleClickButtonRowUndelete(event, element, selectorButtonDelete, selectorButtonUndelete, changeHandler = (event, element) => { this.handleChangeNestedElementCellTable(event, element); }) {
let buttonDelete = element.cloneNode(false);
buttonDelete.classList.remove(flagInitialised);
buttonDelete.classList.remove(flagAdd);
buttonDelete.classList.add(flagDelete);
buttonDelete.textContent = 'x';
if (element.tagName.toUpperCase() != 'SVG') element = element.parentElement;
let valuePrevious = DOM.getElementAttributeValuePrevious(element);
let wasDirty = DOM.isElementDirty(element);
let buttonDeleteTemplate = document.querySelector(idContainerTemplateElements + ' .' + flagButton + '.' + flagActive + '.' + flagDelete);
let buttonDelete = buttonDeleteTemplate.cloneNode(true);
DOM.setElementAttributeValuePrevious(buttonDelete, valuePrevious);
DOM.setElementAttributeValueCurrent(buttonDelete, true);
if (wasDirty) buttonDelete.classList.add(flagDirty);
element.replaceWith(buttonDelete);
changeHandler(null, buttonDelete);
this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete, (changeEvent, changeElement) => { changeHandler(changeEvent, changeElement); });