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

feat(web): Store Product UI created and hooked up for viewing, editing, and saving.

Browse Source
This commit is contained in:
teddy
2024-10-05 21:16:42 +01:00
parent f2d20bca58
commit 4000de0fc1
76 changed files with 1154 additions and 1239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
static/js/api.js
View File

@@ -95,6 +95,21 @@ export default class API {
return await API.request(hashSaveStoreProductCategory, 'POST', dataRequest);
}
// products
static async getProducts() {
return await API.request(hashGetStoreProduct);
}
static async getProductsByFilters(filtersJson) {
API.goToHash(hashPageStoreProducts, filtersJson);
}
static async saveProducts(products, formFilters, comment) {
let dataRequest = {};
dataRequest[flagFormFilters] = DOM.convertForm2JSON(formFilters);
dataRequest[flagProduct] = products;
dataRequest[flagComment] = comment;
return await API.request(hashSaveStoreProduct, 'POST', dataRequest);
}
// product permutations
static async getProductPermutations() {
return await API.request(hashGetStoreProductPermutation);

26
static/js/dom.js
View File

@@ -118,20 +118,36 @@ export default class DOM {
}
static getElementAttributeValueCurrent(element) {
return element.getAttribute(attrValueCurrent);
if (!Validation.isEmpty(value) && element.type === "checkbox") {
value = (value === 'true');
}
return value;
}
static getElementAttributeValuePrevious(element) {
return element.getAttribute(attrValuePrevious);
if (!Validation.isEmpty(value) && element.type === "checkbox") {
value = (value === 'true');
}
return value;
}
/* base_table.handleChangeElementCellTable
static updateAndCheckIsTableElementDirty(element) {
let wasDirty = DOM.isElementDirty(element);
let row = DOM.getRowFromElement(element);
let wasDirtyRow = DOM.hasDirtyChildrenContainer(row);
let isDirty = DOM.updateAndCheckIsElementDirty(element);
let cell = DOM.getCellFromElement(element);
if (isDirty) {
cell.classList.add(flagDirty);
} else {
cell.classList.remove(flagDirty);
console.log({element, row, cell, isDirty, wasDirty});
if (isDirty != wasDirty) {
DOM.handleDirtyElement(cell, isDirty);
let isDirtyRow = DOM.hasDirtyChildrenContainer(row);
console.log({isDirtyRow, wasDirtyRow});
if (isDirtyRow != wasDirtyRow) {
DOM.handleDirtyElement(row, isDirtyRow);
}
}
}
*/
/*
static updateElement(id, data) {
const element = document.getElementById(id);

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

@@ -93,6 +93,9 @@ export default class TableBasePage extends BasePage {
}
return isDirty;
}
hookupFilterIsNotEmpty() {
this.hookupFilter(flagIsNotEmpty);
}
hookupButtonApplyFilters() {
this.hookupEventHandler("click", idButtonApplyFilters, (event, button) => {
event.stopPropagation();
@@ -275,35 +278,27 @@ export default class TableBasePage extends BasePage {
this.hookupChangeHandlerTableCells(selectorDisplayOrder);
}
hookupChangeHandlerTableCells(inputSelector, handler = (event, element) => { this.handleChangeElementCellTable(event, element); }) {
/*
Events.initialiseEventHandler(inputSelector, flagInitialised, (input) => {
input.addEventListener("change", (event) => {
handler(event, input);
});
this.handleChangeElementCellTable(null, input);
});
*/
this.hookupEventHandler("change", inputSelector, handler);
// this.hookupEventHandler("change", inputSelector, handler);
}
handleChangeElementCellTable(event, element) {
let row = DOM.getRowFromElement(element);
let td = DOM.getCellFromElement(element);
console.log("td: ", td);
let wasDirtyRow = DOM.hasDirtyChildrenContainer(row);
let wasDirtyElement = element.classList.contains(flagDirty);
let isDirtyElement = DOM.updateAndCheckIsElementDirty(element);
console.log("isDirtyElement: ", isDirtyElement);
console.log("wasDirtyElement: ", wasDirtyElement);
if (isDirtyElement != wasDirtyElement) {
DOM.handleDirtyElement(td, isDirtyElement);
let isNowDirtyRow = DOM.hasDirtyChildrenContainer(row);
console.log("isNowDirtyRow: ", isNowDirtyRow);
console.log("wasDirtyRow: ", wasDirtyRow);
if (isNowDirtyRow != wasDirtyRow) {
DOM.handleDirtyElement(row, isNowDirtyRow);
let rows = this.getTableRecords(true);
let existsDirtyRecord = rows.length > 0;
console.log("dirty records:", rows);
console.log("existsDirtyRecord:", existsDirtyRecord);
this.toggleShowButtonsSaveCancel(existsDirtyRecord);
}
}

150
static/js/pages/store/products.js Normal file
View File

@@ -0,0 +1,150 @@
import Events from "../../lib/events.js";
import TableBasePage from "../base_table.js";
import API from "../../api.js";
import DOM from "../../dom.js";
import StoreTableMixinPage from "./mixin_table.js";
import Utils from "../../lib/utils.js";
export default class PageStoreProducts extends TableBasePage {
static hash = hashPageStoreProducts;
callFilterTableContent = API.getProductsByFilters;
callSaveTableContent = API.saveProducts;
constructor(router) {
super(router);
this.storeMixin = new StoreTableMixinPage(this);
}
initialize() {
this.sharedInitialize();
}
hookupFilters() {
this.sharedHookupFilters();
this.hookupFilterProductCategory();
this.hookupFilterIsNotEmpty();
this.hookupFilterActive();
}
hookupFilterProductCategory() {
this.hookupFilter(flagProductCategory);
}
loadRowTable(rowJson) {
return;
if (rowJson == null) return;
let row = _rowBlank.cloneNode(true);
row.classList.remove(flagRowNew);
row.classList.remove(flagInitialised);
row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
element.classList.remove(flagInitialised);
});
console.log("applying data row: ", rowJson);
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
let tdProductCategory = row.querySelector('td.' + flagProductCategory);
let divProductCategory = tdProductCategory.querySelector('div.' + flagProductCategory);
let textareaName = row.querySelector('td.' + flagName + ' textarea');
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
let divAccessLevel = tdAccessLevel.querySelector('div.' + flagAccessLevel);
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
DOM.setElementValuesCurrentAndPrevious(sliderDisplayOrder, rowJson[flagDisplayOrder]);
DOM.setElementValuesCurrentAndPrevious(textareaCode, rowJson[flagCode]);
DOM.setElementValuesCurrentAndPrevious(textareaName, rowJson[flagName]);
DOM.setElementValuesCurrentAndPrevious(textareaDescription, rowJson[flagDescription]);
tdAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
tdAccessLevel.setAttribute(flagAccessLevelRequired, rowJson[flagAccessLevelRequired]);
divAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
DOM.setElementValuesCurrentAndPrevious(divAccessLevel, rowJson[attrIdAccessLevel]);
divAccessLevel.textContent = rowJson[flagAccessLevelRequired];
DOM.setElementValuesCurrentAndPrevious(inputActive, rowJson[flagActive]);
row.setAttribute(rowJson[flagKeyPrimary], rowJson[rowJson[flagKeyPrimary]]);
let table = this.getTableMain();
let bodyTable = table.querySelector('tbody');
bodyTable.appendChild(row);
}
getJsonRow(row) {
if (row == null) return;
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
let tdProductCategory = row.querySelector('td.' + flagProductCategory);
let textareaName = row.querySelector('td.' + flagName + ' textarea');
// let tdProductVariations = row.querySelector('td.' + flagProductVariations);
let inputHasVariations = row.querySelector('td.' + flagHasVariations + ' input[type="checkbox"]');
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
let jsonProduct = {};
jsonProduct[attrIdProduct] = row.getAttribute(attrIdProduct);
jsonProduct[attrIdProductCategory] = DOM.getElementAttributeValueCurrent(tdProductCategory);
jsonProduct[flagName] = DOM.getElementAttributeValueCurrent(textareaName);
// jsonRow[flagProductVariations] = DOM.getElementAttributeValueCurrent(tdProductVariations);
// jsonRow[flagHasVariations] = jsonRow[flagProductVariations] != '';
jsonProduct[flagHasVariations] = DOM.getElementAttributeValueCurrent(inputHasVariations);
// jsonProduct[flagAccessLevelRequired] = tdAccessLevel.getAttribute(flagAccessLevelRequired);
jsonProduct[attrIdAccessLevel] = DOM.getElementAttributeValueCurrent(tdAccessLevel);
jsonProduct[flagActive] = DOM.getElementAttributeValueCurrent(inputActive);
jsonProduct[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(sliderDisplayOrder);
return jsonProduct;
}
initialiseRowNew(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);
}
hookupTableMain() {
super.hookupTableMain();
this.hookupSlidersDisplayOrderTable();
this.hookupTdsProductCategory();
this.hookupTextareasNameTable();
this.hookupInputsHasVariationsTable();
this.hookupTdsAccessLevel();
this.hookupInputsActiveTable();
}
hookupTdsProductCategory() {
let cellSelector = idTableMain + ' tbody td.' + flagProductCategory;
this.hookupTableCellDdlPreviews(cellSelector, Utils.getListFromDict(productCategories));
}
hookupInputsHasVariationsTable() {
let cellSelector = idTableMain + ' tbody td.' + flagHasVariations + ' input[type="checkbox"]';
this.hookupChangeHandlerTableCells(cellSelector);
}
/*
isDirtyRow(row) {
if (row == null) return false;
console.log("Product Product isDirtyRow");
console.log("row: ", row);
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder);
let inputCode = row.querySelector('td.' + flagCode + ' textarea');
let inputName = row.querySelector('td.' + flagName + ' textarea');
let inputDescription = row.querySelector('td.' + flagDescription + ' textarea');
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
let isDirty = sliderDisplayOrder.classList.contains(flagDirty) || inputCode.classList.contains(flagDirty) || inputName.classList.contains(flagDirty) ||
inputDescription.classList.contains(flagDirty) || tdAccessLevel.classList.contains(flagDirty) || inputActive.classList.contains(flagDirty);
DOM.handleDirtyElement(row, isDirty);
return isDirty;
}
*/
leave() {
super.leave();
}
/*
getFiltersDefaults() {
filters = {};
filters.flagIsNotEmpty = true;
filters.flagActive = true;
return filters;
}
*/
}

5
static/js/router.js
View File

@@ -15,7 +15,7 @@ import PageStoreHome from './pages/store/home.js';
import PageStoreProductCategories from './pages/store/product_categories.js';
import PageStoreProductPermutations from './pages/store/product_permutations.js';
// import PageStoreProductPrices from './pages/store/product_prices.js';
// import PageStoreProducts from './pages/store/products.js';
import PageStoreProducts from './pages/store/products.js';
// import PageStoreProductVariations from './pages/store/product_variations.js';
import PageStoreStockItems from './pages/store/stock_items.js';
// User
@@ -80,7 +80,7 @@ export default class Router {
this.pages[hashPageStoreProductCategories] = { name: 'PageStoreProductCategories', module: PageStoreProductCategories }; // pathModule: './pages/store/product_categories.js' };
this.pages[hashPageStoreProductPermutations] = { name: 'PageStoreProductPermutations', module: PageStoreProductPermutations }; // pathModule: './pages/store/product_permutations.js' };
// this.pages[hashPageStoreProductPrices] = { name: 'PageStoreProductPrices', module: PageStoreProductPrices }; // pathModule: './pages/store/product_prices.js' };
// this.pages[hashPageStoreProducts] = { name: 'PageStoreProducts', module: PageStoreProducts }; // pathModule: './pages/store/products.js' };
this.pages[hashPageStoreProducts] = { name: 'PageStoreProducts', module: PageStoreProducts }; // pathModule: './pages/store/products.js' };
// this.pages[hashPageStoreProductVariations] = { name: 'PageStoreProductVariations', module: PageStoreProductVariations }; // pathModule: './pages/store/product_variations.js' };
this.pages[hashPageStoreStockItems] = { name: 'PageStoreStockItems', module: PageStoreStockItems };
// User
@@ -106,6 +106,7 @@ export default class Router {
// this.routes[hashPageStoreProductPrices] = (isPopState = false) => this.navigateToHash(hashPageStoreProductPrices, isPopState);
this.routes[hashPageStoreProducts] = (isPopState = false) => this.navigateToHash(hashPageStoreProducts, isPopState);
// this.routes[hashPageStoreProductVariations] = (isPopState = false) => this.navigateToHash(hashPageStoreProductVariations, isPopState);
this.routes[hashPageStoreStockItems] = (isPopState = false) => this.navigateToHash(hashPageStoreStockItems, isPopState);
// User
// this.routes[hashPageUserLogin] = (isPopState = false) => this.navigateToHash(hashPageUserLogin, isPopState);
// this.routes[hashPageUserLogout] = (isPopState = false) => this.navigateToHash(hashPageUserLogout, isPopState);