Feat(SQL, UI): Logic for Get-Many SQL Stored Procedures refactored to use Calc Stored Procedures and Dog Command Links page styling improved.
This commit is contained in:
240
static/js/pages/dog/product_variations.js
Normal file
240
static/js/pages/dog/product_variations.js
Normal file
@@ -0,0 +1,240 @@
|
||||
|
||||
import API from "../../api.js";
|
||||
import BusinessObjects from "../../lib/business_objects/business_objects.js";
|
||||
import DOM from "../../dom.js";
|
||||
import Events from "../../lib/events.js";
|
||||
import TableBasePage from "../base_table.js";
|
||||
import Utils from "../../lib/utils.js";
|
||||
import Validation from "../../lib/validation.js";
|
||||
import DogTableMixinPage from "./mixin_table.js";
|
||||
|
||||
export default class PageDogProductVariations extends TableBasePage {
|
||||
static hash = hashPageDogProductVariations;
|
||||
static attrIdRowObject = attrIdProductVariationType;
|
||||
callSaveTableContent = API.saveProductVariations;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
this.dogMixin = new DogTableMixinPage(this);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
|
||||
hookupFilters() {
|
||||
this.sharedHookupFilters();
|
||||
this.hookupFilterActive();
|
||||
this.hookupFilterIsNotEmpty();
|
||||
}
|
||||
|
||||
loadRowTable(rowJson) {
|
||||
}
|
||||
getJsonRow(row) {
|
||||
if (row == null) return;
|
||||
let inputDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' input');
|
||||
let textareaCode = row.querySelector('td.' + flagCode + ' textarea');
|
||||
let textareaName = row.querySelector('td.' + flagName + ' textarea');
|
||||
let textareaNamePlural = row.querySelector('td.' + flagNamePlural + ' textarea');
|
||||
let tdProductVariations = row.querySelector('td.' + flagProductVariations);
|
||||
let buttonActive = row.querySelector(':scope > td.' + flagActive + ' button');
|
||||
|
||||
let jsonRow = {};
|
||||
jsonRow[attrIdProductVariationType] = row.getAttribute(attrIdProductVariationType);
|
||||
if (Validation.isEmpty(jsonRow[attrIdProductVariationType])) jsonRow[attrIdProductVariationType] = -1;
|
||||
jsonRow[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(inputDisplayOrder);
|
||||
jsonRow[flagCode] = DOM.getElementAttributeValueCurrent(textareaCode);
|
||||
jsonRow[flagName] = DOM.getElementAttributeValueCurrent(textareaName);
|
||||
jsonRow[flagNamePlural] = DOM.getElementAttributeValueCurrent(textareaNamePlural);
|
||||
|
||||
let variations = [];
|
||||
if (tdProductVariations.classList.contains(flagDirty)) {
|
||||
let trsProductVariation = tdProductVariations.querySelectorAll('tr.' + flagProductVariation + '.' + flagDirty);
|
||||
if (trsProductVariation != null) {
|
||||
trsProductVariation.forEach((tr, indexRow) => {
|
||||
variations.push(this.getJsonRowProductVariation(tr, indexRow));
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
// variations = BusinessObjects.getListObjectsFromIdDictAndCsv(productVariationTypes, DOM.getElementAttributeValueCurrent(tdProductVariations));
|
||||
}
|
||||
jsonRow[flagProductVariations] = variations;
|
||||
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
|
||||
return jsonRow;
|
||||
}
|
||||
getJsonRowProductVariation(tr, indexRow) {
|
||||
let inputDisplayOrder = tr.querySelector('td.' + flagDisplayOrder + ' input');
|
||||
let textareaCode = tr.querySelector('td.' + flagCode + ' textarea');
|
||||
let textareaName = tr.querySelector('td.' + flagName + ' textarea');
|
||||
// let checkboxActive = tr.querySelector('td.' + flagActive + ' input');
|
||||
let buttonActive = tr.querySelector(':scope > td.' + flagActive + ' button');
|
||||
|
||||
let jsonRow = {};
|
||||
jsonRow[attrIdProductVariation] = tr.getAttribute(attrIdProductVariation);
|
||||
if (Validation.isEmpty(jsonRow[attrIdProductVariation])) jsonRow[attrIdProductVariation] = -1 - indexRow;
|
||||
jsonRow[attrIdProductVariationType] = tr.getAttribute(attrIdProductVariationType);
|
||||
jsonRow[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(inputDisplayOrder);
|
||||
jsonRow[flagCode] = DOM.getElementAttributeValueCurrent(textareaCode);
|
||||
jsonRow[flagName] = DOM.getElementAttributeValueCurrent(textareaName);
|
||||
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
|
||||
|
||||
return jsonRow;
|
||||
}
|
||||
initialiseRowNew(tbody, row) {
|
||||
super.initialiseRowNew(tbody, row);
|
||||
this.initialiseSliderDisplayOrderRowNew(tbody, row);
|
||||
}
|
||||
|
||||
hookupTableMain() {
|
||||
super.hookupTableMain();
|
||||
this.hookupSlidersDisplayOrderTable();
|
||||
this.hookupTextareasCodeTable();
|
||||
this.hookupTextareasNameTable();
|
||||
this.hookupTextareasNamePluralTable();
|
||||
this.hookupFieldsProductVariation();
|
||||
this.hookupFieldsActive();
|
||||
}
|
||||
hookupTextareasNamePluralTable() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagNamePlural + ' textarea');
|
||||
}
|
||||
hookupFieldsProductVariation() {
|
||||
this.hookupProductVariationsPreviews();
|
||||
this.hookupFieldsProductVariationDisplayOrder();
|
||||
this.hookupFieldsProductVariationCode();
|
||||
this.hookupFieldsProductVariationName();
|
||||
this.hookupFieldsProductVariationActive();
|
||||
}
|
||||
hookupProductVariationsPreviews() {
|
||||
this.hookupEventHandler("click", idTableMain + ' td.' + flagProductVariations + ' div', (event, element) => {
|
||||
let td = DOM.getCellFromElement(element);
|
||||
if (!td.classList.contains(flagCollapsed)) return;
|
||||
this.handleClickProductVariationsPreview(event, element);
|
||||
});
|
||||
}
|
||||
handleClickProductVariationsPreview(event, element) {
|
||||
if (_verbose) { console.log("click order items preview"); }
|
||||
let row = DOM.getRowFromElement(element);
|
||||
let idProductVariationType = row.getAttribute(attrIdProductVariationType);
|
||||
let productVariationType = productVariationTypes[idProductVariationType];
|
||||
if (productVariationType == null) productVariationType = {
|
||||
[flagProductVariations]: [],
|
||||
};
|
||||
let tblProductVariations = document.createElement("table");
|
||||
tblProductVariations.classList.add(flagProductVariations);
|
||||
let thead = document.createElement("thead");
|
||||
let tr = document.createElement("tr");
|
||||
|
||||
let thDisplayOrder = document.createElement("th");
|
||||
thDisplayOrder.classList.add(flagDisplayOrder);
|
||||
thDisplayOrder.textContent = 'Display Order';
|
||||
let thCode = document.createElement("th");
|
||||
thCode.classList.add(flagCode);
|
||||
thCode.textContent = 'Code';
|
||||
let thName = document.createElement("th");
|
||||
thName.classList.add(flagName);
|
||||
thName.textContent = 'Name';
|
||||
let thActive = document.createElement("th");
|
||||
thActive.classList.add(flagActive);
|
||||
// thActive.textContent = 'Active';
|
||||
let buttonAdd = document.createElement("button");
|
||||
buttonAdd.classList.add(flagActive);
|
||||
buttonAdd.classList.add(flagAdd);
|
||||
buttonAdd.textContent = '+';
|
||||
thActive.appendChild(buttonAdd);
|
||||
|
||||
tr.appendChild(thDisplayOrder);
|
||||
tr.appendChild(thCode);
|
||||
tr.appendChild(thName);
|
||||
tr.appendChild(thActive);
|
||||
thead.appendChild(tr);
|
||||
tblProductVariations.appendChild(thead);
|
||||
|
||||
let tbody = document.createElement("tbody");
|
||||
productVariationType[flagProductVariations].forEach((productVariation, index) => {
|
||||
this.addRowProductVariation(tbody, productVariation);
|
||||
});
|
||||
tblProductVariations.appendChild(tbody);
|
||||
|
||||
let cell = DOM.getCellFromElement(element);
|
||||
let cellNew = cell.cloneNode(false);
|
||||
cellNew.appendChild(tblProductVariations);
|
||||
cellNew.classList.remove(flagCollapsed);
|
||||
row.replaceChild(cellNew, cell);
|
||||
if (_verbose) { console.log("tblProductVariations: ", tblProductVariations); }
|
||||
this.toggleColumnHeaderCollapsed(flagProductVariations, false);
|
||||
this.hookupFieldsProductVariation();
|
||||
}
|
||||
addRowProductVariation(tbody, productVariation) {
|
||||
if (_verbose) { console.log("addRowProductVariation: ", productVariation); }
|
||||
|
||||
let tdDisplayOrder = document.createElement("td");
|
||||
tdDisplayOrder.classList.add(flagDisplayOrder);
|
||||
let inputDisplayOrder = document.createElement("input");
|
||||
inputDisplayOrder.classList.add(flagDisplayOrder);
|
||||
inputDisplayOrder.type = 'number';
|
||||
inputDisplayOrder.step = 1;
|
||||
DOM.setElementValuesCurrentAndPrevious(inputDisplayOrder, productVariation[flagDisplayOrder]);
|
||||
tdDisplayOrder.appendChild(inputDisplayOrder);
|
||||
|
||||
let tdCode = document.createElement("td");
|
||||
tdCode.classList.add(flagCode);
|
||||
let textareaCode = document.createElement("textarea");
|
||||
textareaCode.classList.add(flagCode);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaCode, productVariation[flagCode]);
|
||||
tdCode.appendChild(textareaCode);
|
||||
|
||||
let tdName = document.createElement("td");
|
||||
tdName.classList.add(flagName);
|
||||
let textareaName = document.createElement("textarea");
|
||||
textareaName.classList.add(flagName);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaName, productVariation[flagName]);
|
||||
tdName.appendChild(textareaName);
|
||||
|
||||
let tdActive = this.createTdActive(productVariation[flagActive]);
|
||||
|
||||
let tr = document.createElement("tr");
|
||||
tr.classList.add(flagProductVariation);
|
||||
tr.setAttribute(attrIdProductVariationType, productVariation[attrIdProductVariationType]);
|
||||
tr.setAttribute(attrIdProductVariation, productVariation[attrIdProductVariation]);
|
||||
tr.appendChild(tdDisplayOrder);
|
||||
tr.appendChild(tdCode);
|
||||
tr.appendChild(tdName);
|
||||
tr.appendChild(tdActive);
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
hookupFieldsProductVariationDisplayOrder() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagProductVariations + ' td.' + flagDisplayOrder + ' input');
|
||||
}
|
||||
hookupFieldsProductVariationCode() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagProductVariations + ' textarea.' + flagCode);
|
||||
}
|
||||
hookupFieldsProductVariationName() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagProductVariations + ' textarea.' + flagName);
|
||||
}
|
||||
hookupFieldsProductVariationActive() {
|
||||
this.hookupFieldsActive(flagProductVariations, (event, element) => { this.hookupButtonsProductVariationAdd(event, element); });
|
||||
}
|
||||
hookupButtonsProductVariationAdd(event, element) {
|
||||
let row = element.closest(idTableMain + ' > tbody > tr');
|
||||
let idProductVariationType = row.getAttribute(attrIdProductVariationType);
|
||||
let idProductVariation = row.getAttribute(attrIdProductVariation);
|
||||
let countProductVariations = row.querySelectorAll('td.' + flagProductVariations + ' tr').length;
|
||||
let productVariation = {
|
||||
[attrIdProductVariationType]: idProductVariationType,
|
||||
[attrIdProductVariation]: idProductVariation,
|
||||
[flagCode]: '',
|
||||
[flagName]: '',
|
||||
[flagDisplayOrder]: countProductVariations,
|
||||
[flagActive]: true,
|
||||
};
|
||||
let tbody = row.querySelector('td.' + flagProductVariations + ' table tbody');
|
||||
this.addRowProductVariation(tbody, productVariation);
|
||||
this.hookupFieldsProductVariation();
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user