Fix: \n 1. General styles cleanup. \n 2. Contact page - styling of input fields on mobile improved. \n 3. Services page - alignment error in technologies table on most devices, corrected. \n 4. Supplier Purchase Order page - items preview click event was not triggering, fixed end-to-end saving of new SPO, most changes copied to Manufacturing Purchase Orders, but not tested.

This commit is contained in:
2024-11-13 16:54:32 +00:00
parent 88ccfe592a
commit a21b663c2d
57 changed files with 1347 additions and 990 deletions

View File

@@ -22,7 +22,7 @@ export default class BusinessObjects {
}
*/
static getObjectText(objectJson) {
return objectJson[objectJson[flagNameAttrOptionText]];
return objectJson == null ? '' : objectJson[objectJson[flagNameAttrOptionText]];
}
static getListObjectsFromIdDictAndCsv(idDict, idCsv) {
let listObjects = [];

View File

@@ -31,4 +31,16 @@ export default class ProductPermutation {
});
return preview;
}
static getProductVariationsIdCsvFromVariationTypeList(variationTypeList) {
let csvVariations = '';
if (Validation.isEmpty(variationTypeList)) return csvVariations;
variationTypeList.forEach((variationType) => {
if (csvVariations.length > 0) {
csvVariations += ',';
}
csvVariations += variationType[attrIdProductVariationType] + ':' + variationType[flagProductVariations][0][attrIdProductVariation];
});
return csvVariations;
}
}

View File

@@ -151,4 +151,8 @@ export default class Validation {
img.onerror = function() { callback(false); };
img.src = url;
}
static toFixedOrDefault(value, decimalPlaces, defaultValue = null) {
return Validation.isValidNumber(value) ? parseFloat(value).toFixed(decimalPlaces) : defaultValue;
}
}

View File

@@ -12,6 +12,8 @@ import OverlayConfirm from "../components/common/temporary/overlay_confirm.js";
import OverlayError from "../components/common/temporary/overlay_error.js";
export default class TableBasePage extends BasePage {
// static hash
// static attrIdRowObject
// callFilterTableContent
// callSaveTableContent
@@ -169,7 +171,6 @@ export default class TableBasePage extends BasePage {
.catch(error => console.error('Error:', error));
}
getTableRecords(dirtyOnly = false) {
// let table = TableBasePage.getTableMain();
let records = [];
let record;
document.querySelectorAll(idTableMain + ' > tbody > tr').forEach((row) => {
@@ -226,11 +227,11 @@ export default class TableBasePage extends BasePage {
});
let countRows = document.querySelectorAll(idTableMain + ' > tbody > tr').length;
row.setAttribute(this.constructor.attrIdRowObject, -1 - countRows);
this.initialiseRowNew(row);
this.initialiseRowNew(tbody, row);
tbody.appendChild(row);
this.hookupTableMain();
}
initialiseRowNew(row) {
initialiseRowNew(tbody, row) {
if (this.constructor === TableBasePage) {
throw new Error("Subclass of TableBasePage must implement method initialiseRowNew().");
}
@@ -257,6 +258,17 @@ export default class TableBasePage extends BasePage {
});
_rowBlank.setAttribute(this.constructor.attrIdRowObject, -1 - countRows);
}
initialiseSliderDisplayOrderRowNew(tbody, row) {
// let tdSelector = ':scope > tr > td.' + flagDisplayOrder;
// let tbody = document.querySelector('table' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > tbody');
let slidersDisplayOrder = tbody.querySelectorAll(':scope > tr > td.' + flagDisplayOrder + ' input.' + flagSlider);
let maxDisplayOrder = 0;
slidersDisplayOrder.forEach((slider) => {
maxDisplayOrder = Math.max(maxDisplayOrder, parseFloat(DOM.getElementValueCurrent(slider)));
});
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
DOM.setElementValuesCurrentAndPrevious(sliderDisplayOrder, maxDisplayOrder + 1);
}
hookupSlidersDisplayOrderTable() {
let selectorDisplayOrder = idTableMain + ' tbody tr td.' + flagDisplayOrder + ' input.' + flagSlider + '.' + flagDisplayOrder;
/*
@@ -362,7 +374,7 @@ export default class TableBasePage extends BasePage {
*/
handleChangeNestedElementCellTable(event, element) {
let wasDirtyParentRows = this.getAllIsDirtyRowsInParentTree(element);
let wasDirtyElement = DOM.isElementDirty(element);
let wasDirtyElement = element.classList.contains(flagDirty);
let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
if (_verbose) { console.log({isDirtyElement, wasDirtyElement, wasDirtyParentRows}); }
if (isDirtyElement != wasDirtyElement) {
@@ -577,7 +589,6 @@ export default class TableBasePage extends BasePage {
});
tdNew.appendChild(ddl);
let ddlSelector = cellSelector + ' select';
debugger;
ddlHookup(ddlSelector);
}
/*
@@ -638,8 +649,8 @@ export default class TableBasePage extends BasePage {
}
hookupFieldsProductPermutationVariation() {
this.hookupPreviewsProductPermutationVariation();
this.hookupDdlsProductPermutationVariation();
this.hookupDdlsProductPermutationVariationType();
this.hookupDdlsProductPermutationVariation();
this.hookupButtonsProductPermutationVariationAddDelete();
}
hookupPreviewsProductPermutationVariation() {
@@ -826,11 +837,38 @@ export default class TableBasePage extends BasePage {
tr.appendChild(tdDelete);
tbody.appendChild(tr);
}
hookupDdlsProductPermutationVariation() {
this.hookupTableCellDdls(idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariation);
}
hookupDdlsProductPermutationVariationType() {
this.hookupTableCellDdls(idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariationType);
this.hookupTableCellDdls(
idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariationType + ' select'
, (event, ddlVariationType) => {
this.handleChangeDdlProductVariationOrVariationType(event, ddlVariationType);
let idVariationTypeSelected = DOM.getElementValueCurrent(ddlVariationType);
let row = DOM.getRowFromElement(ddlVariationType);
let tdVariation = row.querySelector('td.' + flagProductVariation);
tdVariation.dispatchEvent(new Event('click'));
let ddlVariation = row.querySelector('td.' + flagProductVariation + ' select');
ddlVariation.innerHTML = '';
ddlVariation.appendChild(DOM.createOption(null));
let optionJson, option;
let variationType = productVariationTypes[idVariationTypeSelected];
if (variationType == null) variationType = {
[flagProductVariations]: [],
};
variationType[flagProductVariations].forEach((variation) => {
optionJson = BusinessObjects.getOptionJsonFromObjectJson(variation);
option = DOM.createOption(optionJson);
ddlVariation.appendChild(option);
});
this.handleChangeDdlProductVariationOrVariationType(event, ddlVariation);
}
);
}
handleChangeDdlProductVariationOrVariationType(event, element) {
this.updateProductPermutationVariations(element);
this.handleChangeNestedElementCellTable(event, element);
}
hookupDdlsProductPermutationVariation() {
this.hookupTableCellDdls(idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariation, (event, ddlVariation) => { this.handleChangeDdlProductVariationOrVariationType(event, ddlVariation); });
}
hookupButtonsProductPermutationVariationAddDelete() {
let selectorButton = idTableMain + ' td.' + flagProductVariations + ' tr.' + flagProductVariation + ' button';
@@ -860,19 +898,20 @@ export default class TableBasePage extends BasePage {
updateProductPermutationVariations(element) {
let variationsCell = element.closest('td.' + flagProductVariations);
let variationPairsString = this.getProductPermutationVariationsText(variationsCell);
variationsCell.setAttribute(attrValueCurrent, variationPairsString);
DOM.setElementAttributeValueCurrent(variationsCell, variationPairsString);
DOM.isElementDirty(variationsCell);
}
getProductPermutationVariationsText(variationsTd) {
let rows = variationsTd.querySelectorAll('tr');
let rows = variationsTd.querySelectorAll(':scope tbody tr');
let variationPairsString = '';
let ddlVariationType, ddlVariation, idVariationType, idVariation;
rows.forEach((row, index) => {
ddlVariationType = row.querySelector('td select.' + flagProductVariationType);
ddlVariation = row.querySelector('td select.' + flagProductVariation);
idVariationType = ddlVariationType.getAttribute(attrValueCurrent);
idVariation = ddlVariation.getAttribute(attrValueCurrent);
variationPairsString += idVariationType + ':' + idVariation + ',';
ddlVariationType = row.querySelector(':scope td select.' + flagProductVariationType);
ddlVariation = row.querySelector(':scope td select.' + flagProductVariation);
idVariationType = DOM.getElementValueCurrent(ddlVariationType);
idVariation = DOM.getElementValueCurrent(ddlVariation);
if (variationPairsString != '') variationPairsString += ',';
variationPairsString += idVariationType + ':' + idVariation;
});
return variationPairsString;
}
@@ -936,7 +975,7 @@ export class PageStoreProductCategories extends TableBasePage {
hookupFilters() {}
loadRowTable(rowJson) {}
getJsonRow(row) {}
initialiseRowNew(row) {}
initialiseRowNew(tbody, row) {}
hookupTableMain() {}
isDirtyRow(row) {}
leave() {}

View File

@@ -83,8 +83,8 @@ export default class PageStoreManufacturingPurchaseOrders extends TableBasePage
return jsonRow;
}
initialiseRowNew(row) {
super.initialiseRowNew(row);
initialiseRowNew(tbody, row) {
super.initialiseRowNew(tbody, row);
}
hookupTableMain() {

View File

@@ -84,15 +84,9 @@ export default class PageStoreProductCategories extends TableBasePage {
jsonCategory[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(sliderDisplayOrder);
return jsonCategory;
}
initialiseRowNew(row) {
initialiseRowNew(tbody, row) {
if (row == null) return;
let slidersDisplayOrder = document.querySelectorAll('td.' + flagDisplayOrder + ' input.' + flagSlider);
let maxDisplayOrder = 0;
slidersDisplayOrder.forEach((slider) => {
maxDisplayOrder = Math.max(maxDisplayOrder, parseFloat(DOM.getElementValueCurrent(slider)));
});
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
DOM.setElementValuesCurrentAndPrevious(sliderDisplayOrder, maxDisplayOrder + 1);
this.initialiseSliderDisplayOrderRowNew(tbody, row);
}
hookupTableMain() {

View File

@@ -176,7 +176,7 @@ export default class PageStoreProductPermutations extends TableBasePage {
jsonRow[flagActive] = checkboxActive.getAttribute(attrValueCurrent);
return jsonRow;
}
initialiseRowNew(row) {
initialiseRowNew(tbody, row) {
let ddlCategoryFilter = document.querySelector(idFormFilters + ' #' + attrIdProductCategory);
let idProductCategoryFilter = DOM.getElementValueCurrent(ddlCategoryFilter);
let hasCategoryFilter = !(Validation.isEmpty(idProductCategoryFilter) || idProductCategoryFilter == '0');

View File

@@ -10,7 +10,7 @@ import StoreTableMixinPage from "./mixin_table.js";
export default class PageStoreProductVariations extends TableBasePage {
static hash = hashPageStoreProductVariations;
static attrIdRowObject = attrIdProductVariation;
static attrIdRowObject = attrIdProductVariationType;
callFilterTableContent = API.getProductVariationsByFilters;
callSaveTableContent = API.saveProductVariations;
@@ -82,8 +82,9 @@ export default class PageStoreProductVariations extends TableBasePage {
return jsonRow;
}
initialiseRowNew(row) {
super.initialiseRowNew(row);
initialiseRowNew(tbody, row) {
super.initialiseRowNew(tbody, row);
this.initialiseSliderDisplayOrderRowNew(tbody, row);
}
hookupTableMain() {
@@ -106,20 +107,20 @@ export default class PageStoreProductVariations extends TableBasePage {
this.hookupFieldsProductVariationActive();
}
hookupProductVariationsPreviews() {
this.hookupEventHandler("click", idTableMain + ' td.' + flagProductVariations, (event, td) => {
this.hookupEventHandler("click", idTableMain + ' td.' + flagProductVariations + ' div', (event, element) => {
let td = DOM.getCellFromElement(element);
if (!td.classList.contains(flagCollapsed)) return;
this.handleClickProductVariationsPreview(event, td);
this.handleClickProductVariationsPreview(event, element);
});
}
handleClickProductVariationsPreview(event, element) {
if (_verbose) { console.log("click order items preview"); }
this.toggleColumnHeaderCollapsed(flagProductVariations, false);
element.classList.remove(flagCollapsed);
let row = DOM.getRowFromElement(element);
let idProductVariationType = row.getAttribute(attrIdProductVariationType);
if (idProductVariationType == null || idProductVariationType < 1) return;
let productVariationType = productVariationTypes[idProductVariationType];
if (productVariationType == null) productVariationType = {
[flagProductVariations]: [],
};
let tblProductVariations = document.createElement("table");
tblProductVariations.classList.add(flagProductVariations);
let thead = document.createElement("thead");
@@ -159,8 +160,10 @@ export default class PageStoreProductVariations extends TableBasePage {
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) {

View File

@@ -87,15 +87,9 @@ export default class PageStoreProducts extends TableBasePage {
jsonProduct[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(sliderDisplayOrder);
return jsonProduct;
}
initialiseRowNew(row) {
initialiseRowNew(tbody, row) {
if (row == null) return;
let slidersDisplayOrder = document.querySelectorAll('td.' + flagDisplayOrder + ' input.' + flagSlider);
let maxDisplayOrder = 0;
slidersDisplayOrder.forEach((slider) => {
maxDisplayOrder = Math.max(maxDisplayOrder, parseFloat(DOM.getElementValueCurrent(slider)));
});
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
DOM.setElementValuesCurrentAndPrevious(sliderDisplayOrder, maxDisplayOrder + 1);
this.initialiseSliderDisplayOrderRowNew(tbody, row);
}
hookupTableMain() {

View File

@@ -107,8 +107,8 @@ export default class PageStoreStockItems extends TableBasePage {
jsonRow[flagActive] = checkboxActive.getAttribute(attrValueCurrent);
return jsonRow;
}
initialiseRowNew(row) {
super.initialiseRowNew(row);
initialiseRowNew(tbody, row) {
super.initialiseRowNew(tbody, row);
let ddlCategoryFilter = document.querySelector(idFormFilters + ' #' + attrIdProductCategory);
let idProductCategoryFilter = DOM.getElementValueCurrent(ddlCategoryFilter);
let hasCategoryFilter = !(Validation.isEmpty(idProductCategoryFilter) || idProductCategoryFilter == '0');

View File

@@ -87,8 +87,8 @@ export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
return jsonRow;
}
initialiseRowNew(row) {
super.initialiseRowNew(row);
initialiseRowNew(tbody, row) {
super.initialiseRowNew(tbody, row);
}
hookupTableMain() {
@@ -123,20 +123,27 @@ export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
this.hookupFieldsOrderItemAddDelete();
}
hookupOrderItemsPreviews() {
this.hookupEventHandler("click", idTableMain + ' td.' + flagOrderItems, (event, td) => {
this.hookupEventHandler("click", idTableMain + ' > tbody > tr > td.' + flagOrderItems + ' > div', (event, div) => {
let td = DOM.getCellFromElement(div);
if (!td.classList.contains(flagCollapsed)) return;
this.handleClickOrderItemsPreview(event, td);
this.handleClickOrderItemsPreview(event, div);
});
}
handleClickOrderItemsPreview(event, element) {
if (_verbose) { console.log("click order items preview"); }
this.toggleColumnHeaderCollapsed(flagOrderItems, false);
element.classList.remove(flagCollapsed);
/*
let td = DOM.getCellFromElement(element);
td.classList.remove(flagCollapsed);
*/
let row = DOM.getRowFromElement(element);
let idSupplierPurchaseOrder = row.getAttribute(attrIdSupplierPurchaseOrder);
if (idSupplierPurchaseOrder == null || idSupplierPurchaseOrder < 1) return;
// if (idSupplierPurchaseOrder == null || idSupplierPurchaseOrder < 1) return;
let supplierPurchaseOrder = supplierPurchaseOrders[idSupplierPurchaseOrder];
if (supplierPurchaseOrder == null) supplierPurchaseOrder = {
[flagOrderItems]: [],
};
let tblOrderItems = document.createElement("table");
tblOrderItems.classList.add(flagOrderItems);
let thead = document.createElement("thead");
@@ -215,6 +222,7 @@ export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
let cell = DOM.getCellFromElement(element);
let cellNew = cell.cloneNode(false);
cellNew.appendChild(tblOrderItems);
cellNew.classList.remove(flagCollapsed);
row.replaceChild(cellNew, cell);
if (_verbose) { console.log("tblOrderItems: ", tblOrderItems); }
this.hookupOrderItemsFields();
@@ -256,10 +264,10 @@ export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
let tdVariations = document.createElement("td");
tdVariations.classList.add(flagProductVariations);
tdVariations.classList.add(flagCollapsed);
DOM.setElementAttributesValuesCurrentAndPrevious(tdVariations, orderItem[attrIdProductVariation]);
DOM.setElementAttributesValuesCurrentAndPrevious(tdVariations, orderItem[flagProductVariations]);
let divVariations = document.createElement("div");
divVariations.classList.add(flagProductVariations);
DOM.setElementAttributesValuesCurrentAndPrevious(divVariations, orderItem[attrIdProductVariation]);
DOM.setElementAttributesValuesCurrentAndPrevious(divVariations, orderItem[flagProductVariations]);
// divVariations.textContent = orderItem[flagProductVariations];
let variationsText = ProductPermutation.getProductVariationsPreviewFromIdCsv(orderItem[flagProductVariations]);
divVariations.textContent = variationsText;
@@ -313,14 +321,14 @@ export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
tdCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
let divCostUnitLocalVatExcl = document.createElement("div");
divCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatExcl, orderItem[flagCostUnitLocalVatExcl].toFixed(3));
DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatExcl, Validation.toFixedOrDefault(orderItem[flagCostUnitLocalVatExcl], 3, null));
tdCostUnitLocalVatExcl.appendChild(divCostUnitLocalVatExcl);
let tdCostUnitLocalVatIncl = document.createElement("td");
tdCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
let divCostUnitLocalVatIncl = document.createElement("div");
divCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatIncl, orderItem[flagCostUnitLocalVatIncl].toFixed(3));
DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatIncl, Validation.toFixedOrDefault(orderItem[flagCostUnitLocalVatIncl], 3, null));
tdCostUnitLocalVatIncl.appendChild(divCostUnitLocalVatIncl);
let tdLatencyDeliveryDays = document.createElement("td");
@@ -384,13 +392,13 @@ export default class PageStoreSupplierPurchaseOrders extends TableBasePage {
hookupFieldsOrderItemProductVariations() {
this.hookupEventHandler("click", idTableMain + ' td.' + flagOrderItems + ' td.' + flagProductVariations, (event, element) => this.handleClickProductPermutationVariationsPreview(event, element));
}
*/
hookupDdlsProductPermutationVariation() {
this.hookupTableCellDdls(idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariation);
}
hookupDdlsProductPermutationVariationType() {
this.hookupTableCellDdls(idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariationType);
}
*/
hookupFieldsOrderItemUnitQuantity() {
this.hookupTableCellDdlPreviews(
idTableMain + ' td.' + flagOrderItems + ' td.' + flagUnitMeasurementQuantity

View File

@@ -85,8 +85,8 @@ export default class PageStoreSuppliers extends TableBasePage {
});
return supplierAddresses;
}
initialiseRowNew(row) {
super.initialiseRowNew(row);
initialiseRowNew(tbody, row) {
super.initialiseRowNew(tbody, row);
}
hookupTableMain() {