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

1. View, filter, and save Product Permutation. \n 2. Synchronised with Product Category page and all common functionality moved into base and base table css, js, and python files.

Browse Source
This commit is contained in:
teddy
2024-09-24 23:25:52 +01:00
parent d37f632c92
commit cf78e4b3bc
239 changed files with 6371 additions and 4336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/DEPRECATED/routing.js
View File

@@ -91,7 +91,7 @@ function convertForm2JSON(elemForm) {
/*
console.log('field name: ' + field.name);
console.log('field value: ' + field.value);
console.log('field currentval: ' + getElementCurrentValue(field));
console.log('field currentval: ' + getElementValueCurrent(field));
*/
});

21
static/js/api.js
View File

@@ -4,7 +4,7 @@ import DOM from './dom.js';
export default class API {
static getCsrfToken() {
// return document.querySelectorAll('meta[name=' + nameCSRFToken + ']').attr('content');
// return document.querySelectorAll('meta[name=' + nameCSRFToken + ']').getAttribute('content');
return document.querySelector(idCSRFToken).getAttribute('content');
}
@@ -74,7 +74,7 @@ export default class API {
}
// store
// categories
// product categories
static async getCategories() {
return await API.request(hashGetStoreProductCategory);
}
@@ -90,10 +90,25 @@ export default class API {
static async saveCategories(categories, formFilters, comment) {
let dataRequest = {};
dataRequest[flagFormFilters] = DOM.convertForm2JSON(formFilters);
dataRequest[flagCategory] = categories;
dataRequest[flagProductCategory] = categories;
dataRequest[flagComment] = comment;
return await API.request(hashSaveStoreProductCategory, 'POST', dataRequest);
}
// product permutations
static async getProductPermutations() {
return await API.request(hashGetStoreProductPermutation);
}
static async getProductPermutationsByFilters(filtersJson) {
API.goToHash(hashPageStoreProductPermutations, filtersJson);
}
static async saveProductPermutations(permutations, formFilters, comment) {
let dataRequest = {};
dataRequest[flagFormFilters] = DOM.convertForm2JSON(formFilters);
dataRequest[flagProductPermutation] = permutations;
dataRequest[flagComment] = comment;
return await API.request(hashSaveStoreProductPermutation, 'POST', dataRequest);
}
}
/*

7
static/js/app.js
View File

@@ -1,3 +1,4 @@
/*
// Bundle css imports
import '../css/lib/reset.css';
import '../css/lib/typography.css';
@@ -6,6 +7,7 @@ import '../css/lib/utils.css';
import '../css/layouts/header.css';
import '../css/layouts/footer.css';
import '../css/layouts/table-main.css'
import '../css/components/button.css';
import '../css/components/card.css';
@@ -16,7 +18,7 @@ import '../css/components/navigation.css';
import '../css/components/overlay.css';
import '../css/sections/store.css';
*/
// Main entry point for the application
@@ -34,7 +36,6 @@ class App {
}
initialize() {
console.log('Initializing application...');
this.setupEventListeners();
this.start();
}
@@ -51,13 +52,11 @@ class App {
}
start() {
console.log('Starting application...');
// Additional startup logic
this.initPageCurrent();
}
initPageCurrent() {
console.log("initPageCurrent");
/*
_pageCurrent = Router.getPageCurrent();
_pageCurrent.initialize();

4
static/js/components/input_date.js → static/js/components/common/inputs/input_date.js
View File

@@ -1,5 +1,5 @@
import Validation from "./lib/validation.js";
import Validation from "../../../lib/validation.js";
// Date picker inputs
@@ -99,7 +99,7 @@ function turnInputIntoDatePicker(input, notFuture, notPast, exceptionValueArray)
input.addEventListener('contextmenu', function() { this.datepicker('hide'); });
// Disable autocomplete suggestions appearing when clicking on input
input.attr('autocomplete', 'off');
input.getAttribute('autocomplete', 'off');
}
function setDatePickerDate(input, objDate) {

4
static/js/components/select.js → static/js/components/common/inputs/select.js
View File

@@ -2,14 +2,14 @@
function handleSelectCollapse(elementSelect) {
let optionSelected = document.querySelectorAll(elementSelect).querySelector('option:selected');
optionSelected.text(optionSelected.attr(attrTextCollapsed));
optionSelected.text(optionSelected.getAttribute(attrTextCollapsed));
console.log('collapsed: ', optionSelected.text());
optionSelected.classList.remove(flagExpanded);
optionSelected.classList.add(flagCollapsed);
}
function handleSelectExpand(elementSelect) {
let optionSelected = document.querySelectorAll(elementSelect).querySelector('option:selected');
optionSelected.text(optionSelected.attr(attrTextExpanded));
optionSelected.text(optionSelected.getAttribute(attrTextExpanded));
console.log('expanded: ', optionSelected.text());
optionSelected.classList.remove(flagCollapsed);
optionSelected.classList.add(flagExpanded);

4
static/js/components/textarea.js → static/js/components/common/inputs/textarea.js
View File

@@ -1,5 +1,5 @@
import Validation from "./lib/validation.js";
import Validation from "../../../lib/validation.js";
export default class TextArea {
removeBlankTextAreaLines(textarea) {
@@ -25,7 +25,7 @@ export default class TextArea {
// Clear style height and set rows = 1
elTextarea.style.removeProperty('height');
textarea.attr('rows', 1);
textarea.getAttribute('rows', 1);
const paddingTop = parseCSSPropertyToFloat(textarea, 'padding-top');
const paddingBottom= parseCSSPropertyToFloat(textarea, 'padding-bottom');

2
static/js/components/table.js → static/js/components/common/table.js
View File

@@ -1,5 +1,5 @@
import Validation from "./lib/validation.js";
import Validation from "../../lib/validation.js";
export default class Table {

26
static/js/components/common/temporary/overlay_confirm.js Normal file
View File

@@ -0,0 +1,26 @@
import Events from "../../../lib/events.js";
export default class OverlayConfirm {
static hookup(callbackSuccess) {
Events.initialiseEventHandler(idOverlayConfirm + ' button.' + flagCancel, flagInitialised, (buttonCancel) => {
buttonCancel.addEventListener('click', () => {
let overlay = document.querySelector(idOverlayConfirm);
overlay.style.visibility = 'hidden';
});
});
Events.initialiseEventHandler(idOverlayConfirm + ' button.' + flagSubmit, flagInitialised, (buttonConfirm) => {
buttonConfirm.addEventListener('click', () => {
let overlay = document.querySelector(idOverlayConfirm);
let textarea = overlay.querySelector('textarea');
overlay.style.visibility = 'hidden';
callbackSuccess(textarea.value);
});
});
}
static show() {
let overlay = document.querySelector(idOverlayConfirm);
overlay.classList.remove(flagCollapsed);
overlay.style.visibility = 'visible';
}
}

19
static/js/components/common/temporary/overlay_error.js Normal file
View File

@@ -0,0 +1,19 @@
import Events from "../../../lib/events.js";
export default class OverlayError {
static hookup() {
Events.initialiseEventHandler(idOverlayError + ' button.' + flagCancel, flagInitialised, (buttonCancel) => {
buttonCancel.addEventListener('click', () => {
let overlay = document.querySelector(idOverlayError);
overlay.style.visibility = 'hidden';
});
});
}
static show(msgError) {
let overlay = document.querySelector(idOverlayError);
let labelError = overlay.querySelector(idLabelError);
labelError.innerText = msgError;
overlay.style.visibility = 'visible';
}
}

0
static/js/components/video.js → static/js/components/common/video.js
View File

86
static/js/dom.js
View File

@@ -3,8 +3,22 @@ import Validation from "./lib/validation.js";
// Module for DOM manipulation
export default class DOM {
static setElementValueCurrent(element, data) {
static setElementAttributesValuesCurrentAndPrevious(element, data) {
DOM.setElementAttributeValueCurrent(element, data);
DOM.setElementAttributeValuePrevious(element, data);
}
static setElementAttributeValueCurrent(element, data) {
element.setAttribute(attrValueCurrent, data);
}
static setElementAttributeValuePrevious(element, data) {
element.setAttribute(attrValuePrevious, data);
}
static setElementValuesCurrentAndPrevious(element, data) {
DOM.setElementValueCurrent(element, data);
DOM.setElementAttributeValuePrevious(element, data);
}
static setElementValueCurrent(element, data) {
DOM.setElementAttributeValueCurrent(element, data);
if (element.type === "checkbox") {
element.checked = data;
}
@@ -15,8 +29,10 @@ export default class DOM {
element.textContent = data;
}
}
static setElementValuePrevious(element, data) {
element.setAttribute(attrValuePrevious, data);
static setElementValueCurrentIfEmpty(element, data) {
if (Validation.isEmpty(DOM.getElementValueCurrent(element))) {
DOM.setElementValueCurrent(element, data);
}
}
static getCellFromElement(element) {
return element.closest('td');
@@ -48,22 +64,33 @@ export default class DOM {
}
static getHashPageCurrent() {
const hashPageCurrent = document.body.dataset.page;
console.log("hashPageCurrent: " + hashPageCurrent);
return hashPageCurrent;
}
static isElementDirty(element) {
static updateAndCheckIsElementDirty(element) {
element.setAttribute(attrValueCurrent, DOM.getElementValueCurrent(element));
return DOM.isElementDirty(element);
}
static isElementDirty(element) {
let isDirty = element.getAttribute(attrValuePrevious) != element.getAttribute(attrValueCurrent);
DOM.handleDirtyElement(element, isDirty);
return isDirty;
}
static handleDirtyElement(element, isDirty) {
if (isDirty) {
element.classList.add(flagDirty);
DOM.toggleElementHasClassnameFlag(element, isDirty, flagDirty);
}
static toggleElementHasClassnameFlag(element, elementHasFlag, flag) {
let elementAlreadyHasFlag = element.classList.contains(flag);
if (elementHasFlag == elementAlreadyHasFlag) return;
if (elementHasFlag) {
element.classList.add(flag);
} else {
element.classList.remove(flagDirty);
element.classList.remove(flag);
}
}
static hasDirtyChildrenContainer(container) {
if (container == null) return false;
return container.querySelector('.' + flagDirty) != null;
}
static getElementValueCurrent(element) {
let returnVal = '';
@@ -89,8 +116,14 @@ export default class DOM {
return returnVal;
}
static isTableElementDirty(element) {
let isDirty = DOM.isElementDirty(element);
static getElementAttributeValueCurrent(element) {
return element.getAttribute(attrValueCurrent);
}
static getElementAttributeValuePrevious(element) {
return element.getAttribute(attrValuePrevious);
}
static updateAndCheckIsTableElementDirty(element) {
let isDirty = DOM.updateAndCheckIsElementDirty(element);
let cell = DOM.getCellFromElement(element);
if (isDirty) {
cell.classList.add(flagDirty);
@@ -110,11 +143,11 @@ export default class DOM {
/* non-static method on page object to use
static handleChangeElement(element) {}
*/
scrollToElement(parent, element) {
static scrollToElement(parent, element) {
// REQUIRED: parent has scroll-bar
parent.scrollTop(parent.scrollTop() + (element.offset().top - parent.offset().top));
}
isElementInContainer(container, element) {
static isElementInContainer(container, element) {
if (typeof jQuery === 'function') {
if (container instanceof jQuery) container = container[0];
@@ -131,7 +164,34 @@ export default class DOM {
((elementBounds.left + elementBounds.width) <= (containerBounds.left + containerBounds.width))
);
}
alertError(errorType, errorText) {
static alertError(errorType, errorText) {
alert(errorType + '\n' + errorText);
}
static createOptionUnselectedProductVariation() {
return {
[flagProductVariationType]: {
[flagNameAttrOptionText]: [flagName],
[flagNameAttrOptionValue]: [attrIdProductVariationType],
[flagName]: 'Select Variation Type',
[attrIdProductVariationType]: 0,
},
[flagProductVariation]: {
[flagNameAttrOptionText]: [flagName],
[flagNameAttrOptionValue]: [attrIdProductVariation],
[flagName]: 'Select Variation',
[attrIdProductVariation]: 0,
},
};
}
static createOption(optionJson) {
if (Validation.isEmpty(optionJson)) optionJson = {
text: 'Select',
value: 0,
};
let option = document.createElement('option');
option.value = optionJson.value;
option.textContent = optionJson.text;
option.selected = optionJson.selected;
return option;
}
}

24
static/js/lib/business_objects.js Normal file
View File

@@ -0,0 +1,24 @@
export default class BusinessObjects {
static getOptionJsonFromObjectJsonAndKeys(objectJson, keyText, keyValue, valueSelected = null) {
return {
text: objectJson[keyText],
value: objectJson[keyValue],
selected: (objectJson[keyValue] == valueSelected),
};
}
static getOptionJsonFromObjectJson(objectJson, valueSelected = null) {
let keyText = objectJson[flagNameAttrOptionText];
let keyValue = objectJson[flagNameAttrOptionValue];
console.log({objectJson, keyText, keyValue});
return BusinessObjects.getOptionJsonFromObjectJsonAndKeys(objectJson, keyText, keyValue, valueSelected);
}
/*
static getOptionJsonFromProductPermutation(permutation) {
return {
text: permutation
};
}
*/
}

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

@@ -7,4 +7,13 @@ function $(selector) {
function $$(selector) {
return document.querySelectorAll(selector);
}
*/
*/
export default class Utils {
static getListFromDict(dict) {
let list = [];
for (let key in dict) {
list.push(dict[key]);
}
return list;
}
}

256
static/js/pages/base.js
View File

@@ -1,9 +1,13 @@
import BusinessObjects from "../lib/business_objects.js";
import Events from "../lib/events.js";
import LocalStorage from "../lib/local_storage.js";
import API from "../api.js";
import DOM from "../dom.js";
import OverlayConfirm from "../components/common/temporary/overlay_confirm.js";
import OverlayError from "../components/common/temporary/overlay_error.js";
export default class BasePage {
constructor(router) {
if (!router) {
@@ -45,182 +49,117 @@ export default class BasePage {
hookupNavigation() {
/* Can be removed: */
console.log("hooking up navigation");
let overlayHamburger = document.querySelector(idOverlayHamburger);
let hamburgerOptions = overlayHamburger.querySelectorAll('div.' + flagRow);
let countOptions = hamburgerOptions.length;
console.log('count nav options: ', countOptions);
// console.log('count nav options: ', countOptions);
// overlayHamburger.css('height', (countOptions * 27) + 'px');
/* end of can be removed */
Events.initialiseEventHandler(idButtonHamburger, flagInitialised, function(buttonToggleOverlayNavigation) {
buttonToggleOverlayNavigation.addEventListener("click", function(event) {
event.stopPropagation();
let overlayHamburger = document.querySelector(idOverlayHamburger);
if (overlayHamburger.classList.contains(flagCollapsed)) {
overlayHamburger.classList.remove(flagCollapsed);
overlayHamburger.classList.add(flagExpanded);
} else {
overlayHamburger.classList.remove(flagExpanded);
overlayHamburger.classList.add(flagCollapsed);
}
// overlayHamburger.classList.add(flagInitialised);
});
this.hookupEventHandler("click", idButtonHamburger, (event, element) => {
let overlayHamburger = document.querySelector(idOverlayHamburger);
if (overlayHamburger.classList.contains(flagCollapsed)) {
overlayHamburger.classList.remove(flagCollapsed);
overlayHamburger.classList.add(flagExpanded);
} else {
overlayHamburger.classList.remove(flagExpanded);
overlayHamburger.classList.add(flagCollapsed);
}
// overlayHamburger.classList.add(flagInitialised);
});
this.hookupButtonNavHome();
this.hookupButtonNavServices();
this.hookupButtonNavContact();
this.hookupButtonNavUserAccount();
this.hookupButtonNavUserLogout();
this.hookupButtonNavUserLogin();
this.hookupButtonNavStoreHome();
this.hookupButtonNavStoreProductPermutations();
this.hookupButtonNavStoreStockItems();
this.hookupButtonNavAdminHome();
this.hookupButtonsNavHome();
this.hookupButtonsNavServices();
this.hookupButtonsNavContact();
this.hookupButtonsNavUserAccount();
this.hookupButtonsNavUserLogout();
this.hookupButtonsNavUserLogin();
this.hookupButtonsNavStoreHome();
this.hookupButtonsNavStoreProductPermutations();
this.hookupButtonsNavStoreStockItems();
this.hookupButtonsNavAdminHome();
}
hookupButtonNavHome() {
Events.initialiseEventHandler('.' + flagNavHome, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
hookupEventHandler(eventType, selector, callback) {
Events.initialiseEventHandler(selector, flagInitialised, (element) => {
element.addEventListener(eventType, (event) => {
event.stopPropagation();
this.router.navigateToHash(hashPageHome);
callback(event, element);
});
});
}
hookupButtonNavServices() {
Events.initialiseEventHandler('.' + flagNavServices, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
event.stopPropagation();
console.log('going to services page');
this.router.navigateToHash(hashPageServices);
hookupButtonsNavHome() {
this.hookupButtonsNav('.' + flagNavHome, hashPageHome);
}
hookupButtonsNav(buttonSelector, hashPageNav) {
this.hookupEventHandler("click", buttonSelector, (event, button) => {
this.router.navigateToHash(hashPageNav);
});
}
hookupButtonsNavServices() {
this.hookupButtonsNav('.' + flagNavServices, hashPageServices);
}
hookupButtonsNavContact() {
this.hookupButtonsNav('.' + flagNavContact, hashPageContact);
}
hookupButtonsNavUserAccount() {
this.hookupButtonsNav('.' + flagNavUserAccount, hashPageUserAccount);
}
hookupButtonsNavUserLogout() {
this.hookupButtonsNav('.' + flagNavUserLogout, hashPageUserLogout);
}
hookupButtonsNavUserLogin() {
this.hookupEventHandler("click", '.' + flagNavUserLogin, (event, navigator) => {
event.stopPropagation();
// this.router.navigateToHash(hashPageUserLogin);
/*
let dataRequest = {};
dataRequest[keyCallback] = hashPageCurrent;
console.log('sending data to user login controller: ');
console.log(dataRequest);
*/
// let page = this;
API.loginUser()
.then((response) => {
if (response.Success) {
this.router.navigateToUrl(response[keyCallback], null, false); // window.app.
} else {
DOM.alertError("Error", response.Message);
}
});
});
}
hookupButtonNavContact() {
Events.initialiseEventHandler('.' + flagNavContact, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
event.stopPropagation();
this.router.navigateToHash(hashPageContact);
});
});
hookupButtonsNavStoreHome() {
this.hookupButtonsNav('.' + flagNavStoreHome, hashPageStoreHome);
}
hookupButtonNavUserAccount() {
Events.initialiseEventHandler('.' + flagNavUserAccount, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
event.stopPropagation();
this.router.navigateToHash(hashPageUserAccount);
});
});
hookupButtonsNavStoreProductCategories() {
this.hookupButtonsNav('.' + flagNavStoreProductCategories, hashPageStoreProductCategories);
}
hookupButtonNavUserLogout() {
Events.initialiseEventHandler('.' + flagNavUserLogout, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
event.stopPropagation();
this.router.navigateToHash(hashPageUserLogout);
});
});
hookupButtonsNavStoreProducts() {
this.hookupButtonsNav('.' + flagNavStoreProducts, hashPageStoreProducts);
}
hookupButtonNavUserLogin() {
Events.initialiseEventHandler('.' + flagNavUserLogin, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
event.stopPropagation();
// this.router.navigateToHash(hashPageUserLogin);
/*
let dataRequest = {};
dataRequest[keyCallback] = hashPageCurrent;
console.log('sending data to user login controller: ');
console.log(dataRequest);
*/
// let page = this;
API.loginUser()
.then((response) => {
if (response.Success) {
this.router.navigateToUrl(response[keyCallback], null, false); // window.app.
} else {
DOM.alertError("Error", response.Message);
}
});
});
});
hookupButtonsNavStoreProductPermutations() {
this.hookupButtonsNav('.' + flagNavStoreProductPermutations, hashPageStoreProductPermutations);
}
hookupButtonNavStoreHome() {
Events.initialiseEventHandler('.' + flagNavStoreHome, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
event.stopPropagation();
this.router.navigateToHash(hashPageStoreHome);
});
});
hookupButtonsNavStoreProductPrices() {
this.hookupButtonsNav('.' + flagNavStoreProductPrices, hashPageStoreProductPrices);
}
hookupButtonNavStoreProductCategories() {
Events.initialiseEventHandler('.' + flagNavStoreProductCategories, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
event.stopPropagation();
this.router.navigateToHash(hashPageStoreProductCategories);
});
});
hookupButtonsNavStoreProductVariations() {
this.hookupButtonsNav('.' + flagNavStoreProductVariations, hashPageStoreProductVariations);
}
hookupButtonNavStoreProducts() {
Events.initialiseEventHandler('.' + flagNavStoreProducts, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
event.stopPropagation();
this.router.navigateToHash(hashPageStoreProducts);
});
});
hookupButtonsNavStoreStockItems() {
this.hookupButtonsNav('.' + flagNavStoreStockItems, hashPageStoreStockItems);
}
hookupButtonNavStoreProductPermutations() {
Events.initialiseEventHandler('.' + flagNavStoreProductPermutations, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
event.stopPropagation();
this.router.navigateToHash(hashPageStoreProductPermutations);
});
});
}
hookupButtonNavStoreProductPrices() {
Events.initialiseEventHandler('.' + flagNavStoreProductPrices, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
event.stopPropagation();
this.router.navigateToHash(hashPageStoreProductPrices);
});
});
}
hookupButtonNavStoreProductVariations() {
Events.initialiseEventHandler('.' + flagNavStoreProductVariations, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
event.stopPropagation();
this.router.navigateToHash(hashPageStoreProductVariations);
});
});
}
hookupButtonNavStoreStockItems() {
Events.initialiseEventHandler('.' + flagNavStoreStockItems, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
event.stopPropagation();
this.router.navigateToHash(hashPageStoreStockItems);
});
});
}
hookupButtonNavAdminHome() {
Events.initialiseEventHandler('.' + flagNavAdminHome, flagInitialised, (navigator) => {
navigator.addEventListener("click", (event) => {
event.stopPropagation();
this.router.navigateToHash(hashPageAdminHome);
});
});
hookupButtonsNavAdminHome() {
this.hookupButtonsNav('.' + flagNavAdminHome, hashPageAdminHome);
}
hookupImagesLogo() {
let selectorImagesLogo = "img." + flagImageLogo;
Events.initialiseEventHandler(selectorImagesLogo, flagInitialised, (buttonImageLogo) => {
buttonImageLogo.addEventListener("click", (event) => {
event.stopPropagation();
this.router.navigateToHash(hashPageHome);
});
});
this.hookupButtonsNav("img." + flagImageLogo, hashPageHome);
}
hookupOverlayFromId(idOverlay) {
Events.initialiseEventHandler(idOverlay, flagInitialised, function(overlay) {
overlay.querySelector('button.' + flagClose).addEventListener("click", function(event) {
Events.initialiseEventHandler(idOverlay, flagInitialised, (overlay) => {
overlay.querySelector('button.' + flagClose).addEventListener("click", (event) => {
event.stopPropagation();
overlay.css('display', 'none');
});
@@ -229,17 +168,18 @@ export default class BasePage {
hookupButtonSave() {
Events.initialiseEventHandler('form.' + flagFilter + ' button.' + flagSave, flagInitialised, function(button) {
button.addEventListener("click", function(event) {
Events.initialiseEventHandler('form.' + flagFilter + ' button.' + flagSave, flagInitialised, (button) => {
button.addEventListener("click", (event) => {
event.stopPropagation();
showOverlayConfirm();
console.log('saving page: ', this.title);
OverlayConfirm.show();
});
button.classList.add(flagCollapsed);
// button.classList.add(flagCollapsed);
});
}
hookupVideos() {
Events.initialiseEventHandler('video', flagInitialised, function(video) {
Events.initialiseEventHandler('video', flagInitialised, (video) => {
video.addEventListener("mouseover", videoPlay(video));
video.addEventListener("mouseout", videoPause(video));
});
@@ -252,15 +192,15 @@ export default class BasePage {
}
}
setLocalStoragePage(dataPage) {
LocalStorage.setLocalStorage(this.constructor.hash, dataPage);
LocalStorage.setLocalStorage(this.hash, dataPage);
}
getLocalStoragePage() {
return LocalStorage.getLocalStorage(this.constructor.hash);
return LocalStorage.getLocalStorage(this.hash);
}
toggleShowButtonsSaveCancel(show, buttonSave = null, buttonCancel = null) {
if (buttonSave == null) buttonSave = document.querySelector('form.' + flagFilter + ' button.' + flagSave);
if (buttonCancel == null) buttonCancel = document.querySelector('form.' + flagFilter + ' button.' + flagCancel);
toggleShowButtonsSaveCancel(show) { // , buttonSave = null, buttonCancel = null
let buttonSave = document.querySelector('form.' + flagFilter + ' button.' + flagSave);
let buttonCancel = document.querySelector('form.' + flagFilter + ' button.' + flagCancel);
if (show) {
buttonCancel.classList.remove(flagCollapsed);
buttonSave.classList.remove(flagCollapsed);
@@ -271,7 +211,7 @@ export default class BasePage {
}
static isDirtyFilter(filter) {
let isDirty = DOM.isElementDirty(filter);
let isDirty = DOM.updateAndCheckIsElementDirty(filter);
if (isDirty) document.querySelectorAll(idTableMain + ' tbody tr').remove();
return isDirty;
}

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

@@ -1,10 +1,15 @@
import BusinessObjects from "../lib/business_objects.js";
import Events from "../lib/events.js";
import LocalStorage from "../lib/local_storage.js";
import Validation from "../lib/validation.js";
import BasePage from "./base.js";
import API from "../api.js";
import DOM from "../dom.js";
import Utils from "../lib/utils.js";
import OverlayConfirm from "../components/common/temporary/overlay_confirm.js";
import OverlayError from "../components/common/temporary/overlay_error.js";
export default class TableBasePage extends BasePage {
// callFilterTableContent
@@ -24,7 +29,6 @@ export default class TableBasePage extends BasePage {
this.loadRowTable(null);
this.getJsonRow(null);
// this.hookupTableMain();
this.isDirtyRow(null);
this.getTableRecords();
this.leave();
*/
@@ -35,20 +39,25 @@ export default class TableBasePage extends BasePage {
this.dragSrcEl = null;
this.dragSrcRow = null;
this.hookupTableCellDdls = this.hookupTableCellDdls.bind(this);
}
initialize(isPopState = false) {
if (this.constructor === TableBasePage) {
throw new Error("Must implement initialize() method.");
}
throw new Error("Must implement initialize() method.");
}
sharedInitialize(isPopState = false, isSinglePageApp = false) {
if (!isPopState) {
this.sharedInitialize();
super.sharedInitialize();
this.hookupFilters();
this.hookupButtonsAddSaveCancel();
this.hookupTableMain();
hookupOverlayConfirm(() => {
this.leave();
this.saveRecordsTableDirty();
OverlayConfirm.hookup(() => {
if (isSinglePageApp) {
this.saveRecordsTableDirtySinglePageApp();
}
else {
this.saveRecordsTableDirty();
}
});
} else {
let dataPage = this.getLocalStoragePage();
@@ -56,7 +65,7 @@ export default class TableBasePage extends BasePage {
let formFilters = this.getFormFilters();
let filtersDefault = DOM.convertForm2JSON(formFilters);
if (!Validation.areEqualDicts(filters, filtersDefault)) {
this.callFilterTableContent(filters);
}
}
}
@@ -64,17 +73,19 @@ export default class TableBasePage extends BasePage {
if (this.constructor === TableBasePage) {
throw new Error("Subclass of TableBasePage must implement method hookupFilters().");
}
}
sharedHookupFilters() {
this.hookupButtonApplyFilters();
}
hookupFilterActive() {
Events.initialiseEventHandler(idFormFilters + '.' + flagActive, flagInitialised, (filter) => {
filter.addEventListener("change", (event) => {
TableBasePage.isDirtyFilter(filter);
});
});
this.hookupFilter(flagActive);
}
hookupFilter(filterFlag, handler = (event, filter) => { return TableBasePage.isDirtyFilter(filter); }) {
let filterSelector = idFormFilters + ' .' + filterFlag;
this.hookupEventHandler("change", filterSelector, handler);
}
static isDirtyFilter(filter) {
let isDirty = DOM.isElementDirty(filter);
let isDirty = DOM.updateAndCheckIsElementDirty(filter);
if (isDirty) {
let tbody = document.querySelector(idTableMain + ' tbody');
tbody.querySelectorAll('tr').remove();
@@ -83,23 +94,16 @@ export default class TableBasePage extends BasePage {
return isDirty;
}
hookupButtonApplyFilters() {
Events.initialiseEventHandler(idButtonApplyFilters, flagInitialised, (button) => {
button.addEventListener("click", (event) => {
event.stopPropagation();
this.getAndLoadFilteredTableContent();
});
this.hookupEventHandler("click", idButtonApplyFilters, (event, button) => {
event.stopPropagation();
this.getAndLoadFilteredTableContent();
});
}
getAndLoadFilteredTableContent() {
let formFilters = this.getFormFilters();
let filtersJson = DOM.convertForm2JSON(formFilters);
this.leave();
this.callFilterTableContent(filtersJson)
/*
.then(data => {
console.log('Table data received:', data);
this.callbackLoadTableContent(data);
})
*/
.catch(error => console.error('Error:', error));
}
getFormFilters() {
@@ -122,15 +126,26 @@ export default class TableBasePage extends BasePage {
loadRowTable(rowJson) {
throw new Error("Subclass of TableBasePage must implement method loadRowTable().");
}
getAndLoadFilteredTableContentSinglePageApp() {
let formFilters = this.getFormFilters();
let filtersJson = DOM.convertForm2JSON(formFilters);
this.callFilterTableContent(filtersJson)
.then(data => {
console.log('Table data received:', data);
this.callbackLoadTableContent(data);
})
.catch(error => console.error('Error:', error));
}
hookupButtonsAddSaveCancel() {
this.hookupButtonAddRowTable();
this.hookupButtonSave();
this.hookupButtonCancel();
this.hookupButtonAddRowTable();
this.toggleShowButtonsSaveCancel(false);
}
saveRecordsTableDirty() {
let records = this.getTableRecords(true);
if (records.length == 0) {
showOverlayError('No records to save');
OverlayError.show('No records to save');
return;
}
let formElement = this.getFormFilters();
@@ -138,12 +153,13 @@ export default class TableBasePage extends BasePage {
this.callSaveTableContent(records, formElement, comment)
.then(data => {
if (data[flagStatus] == flagSuccess) {
console.log('Data received:', data);
this.callbackLoadTableContent(data);
console.log('Records saved!');
console.log('Data received:', data);
this.getAndLoadFilteredTableContent();
}
else {
showOverlayError(data[flagMessage]);
console.log("error: ", data[flagMessage]);
OverlayError.show(data[flagMessage]);
}
})
.catch(error => console.error('Error:', error));
@@ -162,6 +178,28 @@ export default class TableBasePage extends BasePage {
getJsonRow(row) {
throw new Error("Subclass of TableBasePage must implement method getJsonRow().");
}
saveRecordsTableDirtySinglePageApp() {
let records = this.getTableRecords(true);
if (records.length == 0) {
OverlayError.show('No records to save');
return;
}
let formElement = this.getFormFilters();
let comment = DOM.getElementValueCurrent(document.querySelector(idTextareaConfirm));
this.callSaveTableContent(records, formElement, comment)
.then(data => {
if (data[flagStatus] == flagSuccess) {
console.log('Records saved!');
console.log('Data received:', data);
this.callbackLoadTableContent(data);
}
else {
console.log("error: ", data[flagMessage]);
OverlayError.show(data[flagMessage]);
}
})
.catch(error => console.error('Error:', error));
}
hookupButtonCancel() {
Events.initialiseEventHandler(idFormFilters + ' button.' + flagCancel, flagInitialised, function(button) {
button.addEventListener("click", function(event) {
@@ -172,32 +210,38 @@ export default class TableBasePage extends BasePage {
});
}
hookupButtonAddRowTable() {
Events.initialiseEventHandler(idFormFilters + ' button.' + flagAdd, flagInitialised, (button) => {
button.addEventListener("click", (event) => {
event.stopPropagation();
let tbody = document.querySelector(idTableMain + ' tbody');
let row = _rowBlank.cloneNode(true);
row.classList.remove(flagInitialised);
row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
element.classList.remove(flagInitialised);
});
let newDisplayOrder = parseInt(tbody.querySelector('tr:last-child').querySelector('td.' + flagDisplayOrder + ' .' + flagSlider).getAttribute(attrValueCurrent)) + 1;
tbody.appendChild(row);
let slider = tbody.querySelector('tr:last-child').querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
if (slider) {
slider.setAttribute(attrValueCurrent, newDisplayOrder);
slider.setAttribute(attrValuePrevious, newDisplayOrder);
}
this.hookupTableMain();
this.hookupEventHandler("click", idFormFilters + ' button.' + flagAdd, (event, button) => {
event.stopPropagation();
let tbody = document.querySelector(idTableMain + ' tbody');
let row = _rowBlank.cloneNode(true);
row.classList.remove(flagInitialised);
row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
element.classList.remove(flagInitialised);
});
/* Shared nethods
let newDisplayOrder = parseInt(tbody.querySelector('tr:last-child').querySelector('td.' + flagDisplayOrder + ' .' + flagSlider).getAttribute(attrValueCurrent)) + 1;
let slider = tbody.querySelector('tr:last-child').querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
if (slider) {
slider.setAttribute(attrValueCurrent, newDisplayOrder);
slider.setAttribute(attrValuePrevious, newDisplayOrder);
}
*/
this.initialiseRowNew(row);
tbody.appendChild(row);
this.hookupTableMain();
});
}
initialiseRowNew(row) {
throw new Error("Subclass of TableBasePage must implement method initialiseRowNew().");
}
hookupTableMain() {
if (this.constructor === TableBasePage) {
throw new Error("Must implement hookupTableMain() method.");
}
if (_rowBlank == null) {
this.cacheRowBlank();
Events.initialiseEventHandler(idTableMain, flagInitialised, (table) => {
this.cacheRowBlank();
});
}
}
cacheRowBlank() {
@@ -211,6 +255,7 @@ export default class TableBasePage extends BasePage {
}
hookupSlidersDisplayOrderTable() {
let selectorDisplayOrder = idTableMain + ' tbody tr td.' + flagDisplayOrder + ' input.' + flagSlider + '.' + flagDisplayOrder;
/*
Events.initialiseEventHandler(selectorDisplayOrder, flagInitialised, (sliderDisplayOrder) => {
/*
sliderDisplayOrder.setAttribute('draggable', true);
@@ -220,12 +265,53 @@ export default class TableBasePage extends BasePage {
sliderDisplayOrder.addEventListener('dragleave', this.handleDragSliderLeave.bind(this), false);
sliderDisplayOrder.addEventListener('drop', this.handleDropSlider.bind(this), false);
sliderDisplayOrder.addEventListener('dragend', this.handleDragSliderEnd.bind(this), false);
*/
*
sliderDisplayOrder.addEventListener('change', (event) => {
console.log("slider change event");
this.handleChangeElementCellTable(sliderDisplayOrder);
});
});
*/
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.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);
}
}
}
hookupChangeHandlerTableCellsWhenNotCollapsed(inputSelector, handler = (event, element) => {
if (!element.classList.contains(flagCollapsed)) this.handleChangeElementCellTable(event, element);
}) {
this.hookupEventHandler("change", inputSelector, handler);
}
/* ToDo: Fix this slider drag and drop functionality
handleDragSliderStart(event) {
@@ -286,158 +372,65 @@ export default class TableBasePage extends BasePage {
}
*/
hookupTextareasCodeTable() {
let selectorCode = idTableMain + ' tbody tr td.' + flagCode + ' textarea';
Events.initialiseEventHandler(selectorCode, flagInitialised, (textareaCode) => {
textareaCode.addEventListener("change", (event) => {
console.log("textarea change event");
this.handleChangeElementCellTable(textareaCode);
});
});
}
handleChangeElementCellTable(element) {
let row = DOM.getRowFromElement(element);
let td = DOM.getCellFromElement(element);
console.log("td: ", td);
let wasDirtyRow = this.isDirtyRow(row);
let wasDirtyElement = element.classList.contains(flagDirty);
let isDirtyElement = DOM.isElementDirty(element);
console.log("isDirtyElement: ", isDirtyElement);
console.log("wasDirtyElement: ", wasDirtyElement);
if (isDirtyElement != wasDirtyElement) {
DOM.handleDirtyElement(td, isDirtyElement);
let isNowDirtyRow = this.isDirtyRow(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);
}
}
}
isDirtyRow(row) {
throw new Error("Subclass of TableBasePage must implement method isDirtyRow().");
}
toggleShowButtonsSaveCancel(show, buttonSave = null, buttonCancel = null) {
if (buttonSave == null) buttonSave = document.querySelector(idFormFilters + ' button.' + flagSave);
if (buttonCancel == null) buttonCancel = document.querySelector(idFormFilters + ' button.' + flagCancel);
if (show) {
buttonCancel.classList.remove(flagCollapsed);
buttonSave.classList.remove(flagCollapsed);
} else {
buttonCancel.classList.add(flagCollapsed);
buttonSave.classList.add(flagCollapsed);
}
}
handleChangeSelectCellTable(element) {
let row = DOM.getRowFromElement(element);
let td = DOM.getCellFromElement(element);
console.log("td: ", td);
let wasDirtyRow = this.isDirtyRow(row);
let wasDirtyElement = element.classList.contains(flagDirty);
let isDirtyElement = DOM.isElementDirty(element);
console.log("isDirtyElement: ", isDirtyElement);
console.log("wasDirtyElement: ", wasDirtyElement);
if (isDirtyElement != wasDirtyElement) {
DOM.handleDirtyElement(td, isDirtyElement);
let optionSelected = element.options[element.selectedIndex];
td.setAttribute(attrIdAccessLevel, optionSelected.value);
td.setAttribute(flagAccessLevelRequired, optionSelected.textcontent);
let isNowDirtyRow = this.isDirtyRow(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);
}
}
this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagCode + ' textarea');
}
hookupTextareasNameTable() {
let selectorName = idTableMain + ' tbody tr td.' + flagName + ' textarea';
Events.initialiseEventHandler(selectorName, flagInitialised, (textareaName) => {
textareaName.addEventListener("change", (event) => {
console.log("textarea change event");
this.handleChangeElementCellTable(textareaName);
});
});
this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagName + ' textarea');
}
hookupTextareasDescriptionTable() {
let selectorDescription = idTableMain + ' tbody tr td.' + flagDescription + ' textarea';
Events.initialiseEventHandler(selectorDescription, flagInitialised, (textareaDescription) => {
textareaDescription.addEventListener("change", (event) => {
console.log("textarea change event");
this.handleChangeElementCellTable(textareaDescription);
});
});
this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagDescription + ' textarea');
}
hookupInputsActiveTable() {
let selectorActive = idTableMain + ' tbody tr td.' + flagActive + ' input[type="checkbox"]';
Events.initialiseEventHandler(selectorActive, flagInitialised, (inputActive) => {
inputActive.addEventListener("change", (event) => {
console.log("input change event");
this.handleChangeElementCellTable(inputActive);
});
});
this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagActive + ' input[type="checkbox"]');
}
hookupTdsAccessLevel() {
Events.initialiseEventHandler(idTableMain + ' tbody td.' + flagAccessLevel, flagInitialised, (tdAccessLevel) => {
tdAccessLevel.addEventListener("click", (event) => { this.handleClickTdAccessLevel(event); } );
let cellSelector = idTableMain + ' tbody td.' + flagAccessLevel;
this.hookupTableCellDdlPreviews(cellSelector, Utils.getListFromDict(accessLevels));
}
hookupTableCellDdlPreviews(cellSelector, optionList, ddlHookup = (event, element) => { this.hookupTableCellDdls(event, element); }) {
this.hookupEventHandler("click", cellSelector, (event, td) => {
// if (td.querySelector('select')) return;
this.handleClickTableCellDdlPreview(event, td, optionList, cellSelector, (event, element) => { ddlHookup(event, element); });
});
}
handleClickTdAccessLevel(event) {
console.log("tdAccessLevel clicked");
event.stopPropagation();
let tdAccessLevel = DOM.getCellFromElement(event.target);
console.log("tdAccessLevel: ", tdAccessLevel);
let row = DOM.getRowFromElement(tdAccessLevel);
let idAccessLevelSelected = tdAccessLevel.querySelector('div.' + flagAccessLevel).getAttribute(attrIdAccessLevel);
let ddlAccessLevel = document.createElement('select');
ddlAccessLevel.classList.add(flagAccessLevel);
ddlAccessLevel.setAttribute(attrValueCurrent, idAccessLevelSelected);
ddlAccessLevel.setAttribute(attrValuePrevious, idAccessLevelSelected);
optionsAccessLevel.forEach((accessLevel) => {
let option = document.createElement('option');
option.value = accessLevel.value;
option.textContent = accessLevel.text;
if (accessLevel.value == idAccessLevelSelected) option.selected = true;
ddlAccessLevel.appendChild(option);
});
let tdAccessLevelNew = tdAccessLevel.cloneNode(true);
tdAccessLevelNew.innerHTML = '';
tdAccessLevelNew.appendChild(ddlAccessLevel);
row.replaceChild(tdAccessLevelNew, tdAccessLevel);
this.hookupDdlsAccessLevelTable();
hookupTableCellDdls(ddlSelector) {
this.hookupEventHandler("change", ddlSelector, (event, element) => { this.handleChangeTableCellDdl(event, element); });
}
hookupDdlsAccessLevelTable() {
Events.initialiseEventHandler(idTableMain + ' tbody select.' + flagAccessLevel, flagInitialised, (ddlAccessLevel) => {
ddlAccessLevel.addEventListener("change", (event) => {
event.stopPropagation();
this.handleChangeDdlAccessLevelTable(ddlAccessLevel);
});
handleClickTableCellDdlPreview(event, td, optionObjectList, cellSelector, ddlHookup = (event, element) => { this.hookupTableCellDdls(event, element); }) {
if (td.querySelector('select')) return;
// td.removeEventListener("click", ddlHookup);
console.log("click table cell ddl preview");
let tdNew = td.cloneNode(true);
td.parentNode.replaceChild(tdNew, td);
let idSelected = tdNew.getAttribute(attrValueCurrent);
tdNew.innerHTML = '';
let ddl = document.createElement('select');
DOM.setElementValuesCurrentAndPrevious(ddl, DOM.getElementAttributeValueCurrent(tdNew));
let optionJson, option;
console.log({optionObjectList, cellSelector});
optionObjectList.forEach((optionObjectJson) => {
optionJson = BusinessObjects.getOptionJsonFromObjectJson(optionObjectJson, idSelected);
option = DOM.createOption(optionJson);
ddl.appendChild(option);
});
tdNew.appendChild(ddl);
let ddlSelector = cellSelector + ' select';
ddlHookup(ddlSelector);
}
handleChangeDdlAccessLevelTable(ddlAccessLevel) {
let row = DOM.getRowFromElement(ddlAccessLevel);
let td = DOM.getCellFromElement(ddlAccessLevel);
handleChangeTableCellDdl(event, ddl) {
let row = DOM.getRowFromElement(ddl);
let td = DOM.getCellFromElement(ddl);
console.log("td: ", td);
let wasDirtyRow = this.isDirtyRow(row);
let wasDirtyElement = ddlAccessLevel.classList.contains(flagDirty);
let isDirtyElement = DOM.isElementDirty(ddlAccessLevel);
let wasDirtyRow = DOM.hasDirtyChildrenContainer(row);
let wasDirtyElement = ddl.classList.contains(flagDirty);
let isDirtyElement = DOM.updateAndCheckIsElementDirty(ddl);
console.log("isDirtyElement: ", isDirtyElement);
console.log("wasDirtyElement: ", wasDirtyElement);
if (isDirtyElement != wasDirtyElement) {
DOM.handleDirtyElement(td, isDirtyElement);
let optionSelected = ddlAccessLevel.options[ddlAccessLevel.selectedIndex];
td.setAttribute(attrIdAccessLevel, optionSelected.value);
td.setAttribute(flagAccessLevelRequired, optionSelected.textcontent);
let isNowDirtyRow = this.isDirtyRow(row);
let optionSelected = ddl.options[ddl.selectedIndex];
DOM.setElementAttributeValueCurrent(td, optionSelected.value);
let isNowDirtyRow = DOM.hasDirtyChildrenContainer(row);
console.log("isNowDirtyRow: ", isNowDirtyRow);
console.log("wasDirtyRow: ", wasDirtyRow);
if (isNowDirtyRow != wasDirtyRow) {
@@ -450,6 +443,13 @@ export default class TableBasePage extends BasePage {
}
}
}
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); });
});
}
leave() {
if (this.constructor === TableBasePage) {
throw new Error("Must implement leave() method.");
@@ -459,7 +459,19 @@ export default class TableBasePage extends BasePage {
let dataPage = {};
dataPage[flagFormFilters] = DOM.convertForm2JSON(formFilters);
this.setLocalStoragePage(dataPage);
_rowBlank = null;
// _rowBlank = null;
}
toggleColumnHasClassnameFlag(columnFlag, isRequiredFlag, classnameFlag) {
let table = this.getTableMain();
let columnTh = table.querySelector('th.' + columnFlag);
let columnThHasFlag = columnTh.classList.contains(classnameFlag);
if (isRequiredFlag == columnThHasFlag) return;
let columnTds = table.querySelectorAll('td.' + columnFlag);
DOM.toggleElementHasClassnameFlag(columnTh, isRequiredFlag, classnameFlag);
columnTds.forEach((columnTd) => {
DOM.toggleElementHasClassnameFlag(columnTd, isRequiredFlag, classnameFlag);
});
}
}
@@ -478,6 +490,7 @@ export class PageStoreProductCategories extends TableBasePage {
hookupFilters() {}
loadRowTable(rowJson) {}
getJsonRow(row) {}
initialiseRowNew(row) {}
hookupTableMain() {}
isDirtyRow(row) {}
leave() {}

20
static/js/pages/core/admin_home.js
View File

@@ -15,24 +15,24 @@ export default class PageAdminHome extends BasePage {
}
hookupAdminStore() {
this.hookupButtonNavStoreProductCategories();
this.hookupButtonNavStoreProducts();
this.hookupButtonNavStoreProductPermutations();
this.hookupButtonNavStoreProductPrices();
this.hookupButtonNavStoreStockItems();
this.hookupButtonNavStoreProductVariations();
this.hookupButtonsNavStoreProductCategories();
this.hookupButtonsNavStoreProducts();
this.hookupButtonsNavStoreProductPermutations();
this.hookupButtonsNavStoreProductPrices();
this.hookupButtonsNavStoreStockItems();
this.hookupButtonsNavStoreProductVariations();
this.hookupButtonNavAdminStoreStripeProducts();
this.hookupButtonNavAdminStoreStripePrices();
this.hookupButtonsNavAdminStoreStripeProducts();
this.hookupButtonsNavAdminStoreStripePrices();
}
hookupButtonNavAdminStoreStripeProducts() {
hookupButtonsNavAdminStoreStripeProducts() {
Events.initialiseEventHandler('.' + flagNavAdminStoreStripeProducts, flagInitialised, function(navigator) {
navigator.addEventListener("click", function(event) {
this.router.navigateToHash(hashPageAdminStoreStripeProducts);
});
});
}
hookupButtonNavAdminStoreStripePrices() {
hookupButtonsNavAdminStoreStripePrices() {
Events.initialiseEventHandler('.' + flagNavAdminStoreStripePrices, flagInitialised, function(navigator) {
navigator.addEventListener("click", function(event) {
this.router.navigateToHash(hashPageAdminStoreStripePrices);

2
static/js/pages/core/home.js
View File

@@ -10,7 +10,7 @@ export default class PageHome extends BasePage {
initialize() {
this.sharedInitialize();
this.hookupButtonNavContact();
this.hookupButtonsNavContact();
}
leave() {

8
static/js/pages/store/basket.js
View File

@@ -124,12 +124,12 @@ export default class PageStoreBasket extends BasePage {
let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
console.log('ajaxData:');
console.log(ajaxData);
ajaxData[keyForm][keyInfoIdentical] = getElementCurrentValue(elForm.querySelector('#' + keyInfoIdentical));
ajaxData[keyForm][keyInfoIdentical] = getElementValueCurrent(elForm.querySelector('#' + keyInfoIdentical));
for (var k in keys) {
if (idOverlayInfo == idOverlayInfoBilling && ajaxData[keyForm][keyInfoIdentical]) {
ajaxData[keyForm][keys[k]] = getElementCurrentValue(elFormDelivery.querySelector('#' + keys[k]));
ajaxData[keyForm][keys[k]] = getElementValueCurrent(elFormDelivery.querySelector('#' + keys[k]));
} else {
ajaxData[keyForm][keys[k]] = getElementCurrentValue(elForm.querySelector('#' + keys[k]));
ajaxData[keyForm][keys[k]] = getElementValueCurrent(elForm.querySelector('#' + keys[k]));
}
}
console.log('ajaxData:');
@@ -181,7 +181,7 @@ export default class PageStoreBasket extends BasePage {
let elFormDelivery = document.querySelectorAll(idOverlayInfoDelivery).querySelector('form');
for (var k in keys) {
elFormBilling.querySelector('#' + keys[k]).value = getElementCurrentValue(elFormDelivery.querySelector('#' + keys[k]));
elFormBilling.querySelector('#' + keys[k]).value = getElementValueCurrent(elFormDelivery.querySelector('#' + keys[k]));
}
});
});

403
static/js/pages/store/base.js → static/js/pages/store/mixin.js
View File

@@ -7,20 +7,21 @@ import DOM from "../../dom.js";
import { isEmpty } from "../../lib/utils.js";
export default class StoreMixinPage {
constructor() {
constructor(pageCurrent) {
this.page = pageCurrent;
}
initialize(thisPage) {
console.log('hookup store start for ', DOM.getHashPageCurrent());
this.hookupFiltersStore();
initialize() {
console.log('hookup store start for ', this.page.hash);
this.hookupFilters();
this.hookupLocalStorageStore();
this.hookupBasket();
this.hookupButtonsAdd2Basket();
this.hookupButtonsAddToBasket();
}
hookupFiltersStore() {
hookupFilterCurrency();
hookupFilterDeliveryRegion();
hookupFilterIsIncludedVAT();
hookupFilters() {
this.hookupFilterCurrency();
this.hookupFilterDeliveryRegion();
this.hookupFilterIsIncludedVAT();
}
hookupFilterCurrency() {
/*
@@ -35,7 +36,7 @@ export default class StoreMixinPage {
ajaxJSONData('select currency', mapHashToController(hashStoreSelectCurrency), ajaxData, function() { window.location.reload() }, false);
let optionSelected = elSelector.options[elSelector.selectedIndex]
let textSelected = optionSelected.attr(attrDataShort)
let textSelected = optionSelected.getAttribute(attrDataShort)
});
});
@@ -49,8 +50,8 @@ export default class StoreMixinPage {
option = document.querySelectorAll(dropdownCurrency.options[indexOption]);
textOption = option.text();
indexHyphen = textOption.indexOf('-');
option.attr(attrTextExpanded, textOption);
option.attr(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
option.setAttribute(attrTextExpanded, textOption);
option.setAttribute(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
option.classList.add(flagCollapsed);
}
handleSelectCollapse(dropdownCurrency);
@@ -98,8 +99,8 @@ export default class StoreMixinPage {
option = document.querySelectorAll(dropdownRegion.options[indexOption]);
textOption = option.text();
indexHyphen = textOption.indexOf('-');
option.attr(attrTextExpanded, textOption);
option.attr(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
option.setAttribute(attrTextExpanded, textOption);
option.setAttribute(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
option.classList.add(flagCollapsed);
}
@@ -143,48 +144,69 @@ export default class StoreMixinPage {
console.log("form is included VAT initialised")
});
}
hookupLocalStorageStore() {
hookupLocalStorage() {
// setupPageLocalStorage(hashPageCurrent);
// let lsPage = getPageLocalStorage(hashPageCurrent);
// let d = {}
// d[keyBasket] = LocalStorage.getLocalStorage(keyBasket); // (keyBasket in lsPage) ? lsPage[keyBasket] : {'items': []};
// console.log('d:'); console.log(d);
let basket;
let createNewBasket = true;
if (true) { // !isUserLoggedIn) {
try {
basket = LocalStorage.getLocalStorage(keyBasket);
console.log('basket found: '); console.log(basket);
createNewBasket = Validation.isEmpty(basket);
}
catch {
}
// lsPage[keyBasket] = ajaxJSONData(keyBasket, hashStoreBasketLoad, d, loadBasket, false);
let basketLocalStorage = LocalStorage.getLocalStorage(keyBasket);
if (!StoreMixinPage.validateBasket(basketLocalStorage)) {
console.log('locally-stored basket not valid');
basketLocalStorage = StoreMixinPage.makeNewBasket();
}
else {
// store basket from server in localStorage
}
if (createNewBasket) {
basket = {};
basket[keyItems] = [];
basket[keyIsIncludedVAT] = true;
basket[keyIdCurrency] = 1;
basket[keyIdRegionDelivery] = 1;
let basketServer = StoreMixinPage.validateBasket(userBasket) ? userBasket : basketLocalStorage;
let basket = StoreMixinPage.areEqualBaskets(basketLocalStorage, basketServer) ? basketServer : StoreMixinPage.mergeBaskets(basketLocalStorage, basketServer);
if (!StoreMixinPage.areEqualBaskets(basketLocalStorage, basket)) {
LocalStorage.setLocalStorage(keyBasket, basket);
console.log("new local basket created");
}
let ajaxData = {}
ajaxData[keyBasket] = basket;
// console.log("hookupLocalStorageStore\nhashStoreBasketLoad: " + hashStoreBasketLoad + "\n");
// ajaxData[keyIsIncludedVAT] = LocalStorage.getLocalStorage(keyIsIncludedVAT);
console.log('ajax:' + ajaxData);
ajaxJSONData(keyBasket, mapHashToController(hashStoreBasketLoad), ajaxData, loadBasket, false);
if (!StoreMixinPage.areEqualBaskets(basketServer, basket)) {
/*
let ajaxData = {}
ajaxData[keyBasket] = basket;
// console.log("hookupLocalStorageStore\nhashStoreBasketLoad: " + hashStoreBasketLoad + "\n");
// ajaxData[keyIsIncludedVAT] = LocalStorage.getLocalStorage(keyIsIncludedVAT);
console.log('ajax:' + ajaxData);
ajaxJSONData(keyBasket, mapHashToController(hashStoreBasketLoad), ajaxData, loadBasket, false);
*/
API.saveStoreBasket(basket);
}
userBasket = basket;
}
static validateBasket(basket) {
return (
Validation.isEmpty(basket) &&
Validation.dictHasKey(basket, keyItems) &&
Validation.dictHasKey(basket, keyIsIncludedVAT) &&
Validation.dictHasKey(basket, keyIdCurrency) &&
Validation.dictHasKey(basket, keyIdRegionDelivery)
);
}
static makeNewBasket() {
return {
[keyItems]: [],
[keyIsIncludedVAT]: true,
[keyIdCurrency]: 1,
[keyIdRegionDelivery]: 1
};
}
static areEqualBaskets(basket1, basket2) {
return JSON.stringify(basket1) === JSON.stringify(basket2);
}
static mergeBaskets(basketPrimary, basketSecondary) {
let basket = {...basketSecondary, ...basketPrimary};
let items = {};
for (let item of basketSecondary[keyItems]) {
items[item[keyIdPermutation]] = item.Quantity;
}
for (let item of basketPrimary[keyItems]) {
items[item[keyIdPermutation]] = items[item[keyIdPermutation]] ? items[item[keyIdPermutation]] + item.Quantity : item.Quantity;
}
basket[keyItems] = Object.values(items);
return basket;
}
hookupBasket() {
// const containerBasket = document.querySelectorAll(idContainerBasket);
this.toggleShowButtonCheckout(); // containerBasket
this.hookupButtonCheckout();
@@ -193,34 +215,24 @@ export default class StoreMixinPage {
this.hookupBasketEditInputs();
this.hookupDeleteBasketItemButtons();
}
toggleShowButtonCheckout() { // containerBasket
toggleShowButtonCheckout() {
console.log("toggling checkout button");
const btnCheckout = document.querySelectorAll(idButtonCheckout);
const buttonCheckout = document.querySelectorAll(idButtonCheckout);
const labelBasketEmpty = document.querySelectorAll(idLabelBasketEmpty);
// let lsPage = getPageLocalStorage(hashPageCurrent);
// let basket = lsPage[keyBasket]['items'];
// let products = containerBasket.filter('');
let basket = LocalStorage.getLocalStorage(keyBasket);
if (basket['items'].length == 0) {
btnCheckout.style.display = "none";
if (userBasket['items'].length == 0) {
buttonCheckout.style.display = "none";
labelBasketEmpty.style.display = "";
} else {
btnCheckout.style.display = "";
buttonCheckout.style.display = "";
labelBasketEmpty.style.display = "none";
}
}
hookupButtonCheckout() {
console.log("hooking up checkout button");
const btnCheckout = document.querySelectorAll(idButtonCheckout);
const buttonCheckout = document.querySelectorAll(idButtonCheckout);
// let lsPage = getPageLocalStorage(hashPageCurrent);
Events.initialiseEventHandler(btnCheckout, flagInitialised, function() {
btnCheckout.addEventListener("click", function() {
Events.initialiseEventHandler(buttonCheckout, flagInitialised, function() {
buttonCheckout.addEventListener("click", function() {
/*
//setupPageLocalStorageNext(hashPageStoreBasket);
let basket = LocalStorage.getLocalStorage(keyBasket);
@@ -230,23 +242,24 @@ export default class StoreMixinPage {
ajaxJSONData('checkout', mapHashToController(hashPageStoreBasket), ajaxData, null, false);
*/
goToPage(hashPageStoreBasket);
this.router.navigateToHash(hashPageStoreBasket);
});
});
}
hookupBasketItemPlusAndMinusButtons() {
const minVal = 1;
const basket = document.querySelector(idFormBasket);
// Basket Add
// Increment
document.querySelectorAll('div.btn-increment[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
basket.querySelectorAll('div.btn-increment[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
let elButton = this;
Events.initialiseEventHandler(elButton, flagInitialised, function(){
elButton.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
let elInput = document.querySelectorAll(getFormProductSelector(typeFormBasketAdd, elButton)).querySelector('input[type="number"]');
// console.log('input selector ='); console.log('form[' + attrFormType + '=' + elButton.attr(attrFormType) + '][' + attrIdProduct + '=' + elButton.attr(attrIdProduct) + ']');
let newVal = parseInt(getElementCurrentValue(elInput));
// console.log('input selector ='); console.log('form[' + attrFormType + '=' + elButton.getAttribute(attrFormType) + '][' + attrIdProduct + '=' + elButton.getAttribute(attrIdProduct) + ']');
let newVal = parseInt(DOM.getElementValueCurrent(elInput));
if (isNaN(newVal)) newVal = minVal;
newVal += 1;
elInput.val(newVal);
@@ -254,15 +267,15 @@ export default class StoreMixinPage {
});
});
// Decrement
document.querySelectorAll('div.btn-decrement[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
basket.querySelectorAll('div.btn-decrement[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
let elButton = this;
Events.initialiseEventHandler(elButton, flagInitialised, function(){
elButton.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
// let product = document.querySelectorAll('.card.subcard[' + attrIdProduct +'=' + elButton.attr(attrIdProduct) + ']');
// let product = document.querySelectorAll('.card.subcard[' + attrIdProduct +'=' + elButton.getAttribute(attrIdProduct) + ']');
let elInput= document.querySelectorAll(getFormProductSelector(typeFormBasketAdd, elButton)).querySelector('input[type="number"]');
let newVal = parseInt(getElementCurrentValue(elInput));
let newVal = parseInt(DOM.getElementValueCurrent(elInput));
if (isNaN(newVal)) newVal = minVal;
newVal = Math.max(minVal, newVal - 1);
elInput.val(newVal);
@@ -272,15 +285,15 @@ export default class StoreMixinPage {
// Basket Edit
// Increment
document.querySelectorAll('div.btn-increment[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
basket.querySelectorAll('div.btn-increment[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
let elButton = this;
Events.initialiseEventHandler(elButton, flagInitialised, function(){
elButton.addEventListener("click", function(event) {
event.stopPropagation();
// basketItem = document.querySelectorAll('.card.subcard[' + attrIdProduct +'=' + elButton.attr(attrIdProduct) + ']');
// basketItem = document.querySelectorAll('.card.subcard[' + attrIdProduct +'=' + elButton.getAttribute(attrIdProduct) + ']');
let elInput = document.querySelectorAll(getFormProductSelector(typeFormBasketEdit, elButton)).querySelector('input[type="number"]');
// console.log('input selector ='); console.log('form[' + attrFormType + '=' + elButton.attr(attrFormType) + '][' + attrIdProduct + '=' + elButton.attr(attrIdProduct) + ']');
let newVal = parseInt(getElementCurrentValue(elInput));
// console.log('input selector ='); console.log('form[' + attrFormType + '=' + elButton.getAttribute(attrFormType) + '][' + attrIdProduct + '=' + elButton.getAttribute(attrIdProduct) + ']');
let newVal = parseInt(DOM.getElementValueCurrent(elInput));
if (isNaN(newVal)) newVal = minVal;
newVal += 1;
elInput.val(newVal);
@@ -289,13 +302,13 @@ export default class StoreMixinPage {
});
});
// Decrement
document.querySelectorAll('div.btn-decrement[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
basket.querySelectorAll('div.btn-decrement[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
let elButton = this;
Events.initialiseEventHandler(elButton, flagInitialised, function(){
elButton.addEventListener("click", function(event) {
event.stopPropagation();
let elInput= document.querySelectorAll(getFormProductSelector(typeFormBasketEdit, elButton)).querySelector('input[type="number"]');
let newVal = parseInt(getElementCurrentValue(elInput));
let newVal = parseInt(DOM.getElementValueCurrent(elInput));
if (isNaN(newVal)) newVal = minVal;
newVal = Math.max(minVal, newVal - 1);
elInput.val(newVal);
@@ -304,158 +317,69 @@ export default class StoreMixinPage {
});
});
}
hookupBasketAddInputs() {
document.querySelectorAll('form[' + attrFormType + '=' + typeFormBasketAdd + ']').each(function() {
let elForm = this;
let elInput = elForm.querySelector('input[type="number"]');
Events.initialiseEventHandler(elInput, flagInitialised, function(){
elInput.addEventListener("change", function(event) {
event.preventDefault();
event.stopPropagation();
});
elInput.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
});
hookupBasketAddForms() {
let basketAddFormSelector = 'form[' + attrFormType + '=' + typeFormBasketAdd + ']';
Events.initialiseEventHandler(basketAddFormSelector, flagInitialised, (basketAddForm) => {
let quantityInput = basketAddForm.querySelector('input[type="number"]');
quantityInput.addEventListener("change", function(event) {
let newVal = parseInt(quantityInput.value);
if (isNaN(newVal) || newVal < 0) {
quantityInput.value = 0;
}
});
let buttonSubmit = basketAddForm.querySelector('button'); // [type="submit"]
buttonSubmit.addEventListener("click", (event) => {
event.preventDefault();
event.stopPropagation();
let newBasketItem = {};
newBasketItem[keyIdProductPermutation] = basketAddForm.getAttribute(attrIdPermutation);
newBasketItem[keyQuantity] = quantityInput.value;
API.storeAddToBasket(newBasketItem);
});
});
}
hookupBasketEditInputs() {
// let elButton, elInput, newVal, product;
const minVal = 1;
// Basket Edit
// Increment
document.querySelectorAll('form[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
let elForm = this;
let elInput = elForm.querySelector('input[type="number"]');
Events.initialiseEventHandler(elInput, flagInitialised, function(){
elInput.addEventListener("change", function(event) {
event.preventDefault();
event.stopPropagation();
// let lsPage = getPageLocalStorageCurrent();
d = {};
d[keyBasket]= LocalStorage.getLocalStorage(keyBasket); // lsPage[keyBasket]; // JSON.parse(lsPage[keyBasket]);
d[keyIdProduct] = elForm.attr(attrIdProduct); // lsPage[keyIdProduct];
d[keyIdPermutation] = elForm.attr(attrIdPermutation);
// d[keyQuantity] = lsPage[keyQuantity];
d[keyForm] = convertForm2JSON(elForm);
d[keyForm][keyQuantity] = elInput.val();
console.log('sending data to basket edit controller: '); console.log(d);
ajaxJSONData('basket update', mapHashToController(hashStoreBasketEdit), d, loadBasket, false);
});
hookupBasketEditForms() {
let basketEditFormSelector = 'form[' + attrFormType + '=' + typeFormBasketEdit + ']';
Events.initialiseEventHandler(basketEditFormSelector, flagInitialised, (basketEditForm) => {
let quantityInput = basketEditForm.querySelector('input[type="number"]');
quantityInput.addEventListener("change", function(event) {
let newVal = parseInt(quantityInput.value);
if (isNaN(newVal) || newVal < 0) {
quantityInput.value = 0;
}
if (quantityInput.value != basketEditForm.getAttribute(attrQuantity)) {
let newBasketItem = {};
newBasketItem[keyIdProductPermutation] = basketEditForm.getAttribute(attrIdPermutation);
newBasketItem[keyQuantity] = quantityInput.value;
API.storeSaveBasket(newBasketItem);
}
});
});
}
hookupDeleteBasketItemButtons() {
console.log('hooking up basket item delete buttons');
// let elForm, elDelete;
// const minVal = 1;
// Basket Add
// Increment
document.querySelectorAll('form[' + attrFormType + '=' + typeFormBasketEdit + ']').each(function() {
let elForm = this;
let elDelete = elForm.querySelector('a.' + flagBasketItemDelete);
Events.initialiseEventHandler(elDelete, flagInitialised, function(){
elDelete.addEventListener("click", function(event) {
event.stopPropagation();
ajaxData = {};
ajaxData[keyBasket]= LocalStorage.getLocalStorage(keyBasket);
ajaxData[keyIdProduct] = elForm.attr(attrIdProduct);
ajaxData[keyIdPermutation] = elForm.attr(attrIdPermutation);
console.log('sending data to basket delete controller: '); console.log(ajaxData);
ajaxJSONData('basket update', mapHashToController(hashStoreBasketDelete), ajaxData, loadBasket, false);
});
});
});
}
/*
getBasket() {
lsShared = getPageLocalStorage(keyShared);
return lsShared[keyBasket];
}
*/
hookupButtonsAdd2Basket() {
// let product, btn, lsPage;
// [' + attrIdProduct + '=' + elButton.attr(attrIdProduct) + ']
document.querySelectorAll('form[' + attrFormType + '="' + typeFormBasketAdd +'"]').each(function() {
var form = this;
Events.initialiseEventHandler(form, flagInitialised, function() {
// form = document.querySelectorAll(form);
form.submit(function(event) {
event.preventDefault();
// lsShared = getPageLocalStorage(keyShared);
console.log("adding to basket for product ID: ", form.attr(attrIdProduct));
ajaxData = {};
ajaxData[keyIdProduct] = form.attr(attrIdProduct);
ajaxData[keyIdPermutation] = form.attr(attrIdPermutation);
basket = LocalStorage.getLocalStorage(keyBasket);
ajaxData[keyBasket] = basket; // lsShared[keyBasket];
console.log("basket before add: ", basket);
ajaxData[keyForm] = convertForm2JSON(form); // formData; // form.serialize();
console.log("ajax data:"); console.log(ajaxData);
ajaxJSONData('add2Basket', mapHashToController(hashStoreBasketAdd), ajaxData, loadBasket, false); // { product_id: form.attr(attrIdProduct), basket_local: lsPage[keyBasket] , }
});
console.log("basket add method added for product ID: ", form.attr(attrIdProduct));
let deleteButton = basketEditForm.querySelector('button'); // [type="button"]
deleteButton.addEventListener("click", (event) => {
event.preventDefault();
event.stopPropagation();
API.storeDeleteBasketItem(basketEditForm.getAttribute(attrIdPermutation));
});
});
}
loadBasket(response) {
let basketContainer = document.querySelectorAll(idBasketContainer);
// let lsPage = getPageLocalStorage(hashPageCurrent);
// let lsShared = getPageLocalStorage(keyShared);
console.log('ajax:'); console.log(response.data);
let basket = response.data[keyBasket]; // JSON.parse(response.data[keyBasket]);
// setPageLocalStorage(keyShared, lsShared);
LocalStorage.setLocalStorage(keyBasket, basket);
items = basket['items'];
// console.log('old basket:'); console.log(basketContainer.innerHTML);
// console.log('setting basket:'); console.log(response.data['html_block']);
basketContainer.innerHTML = response.data['html_block'];
userBasket = response.data[keyBasket];
let basketForm = document.querySelectorAll(idFormBasket);
/*
if (items.length > 0) {
let basketItem;
for (let indexItemBasket = 0; indexItemBasket < items.length; indexItemBasket++) {
basketItem = items[indexItemBasket];
if (basketItem[keyQuantity] > 1) {
elInput = basketContainer.querySelector('form[' + attrFormType + '=' + typeFormBasketEdit + ']').querySelector('input[type="number"]');
// todo : what is missing?
elInput.val(basketItem[keyQuantity]);
}
}
}
basketForm.replaceChildren();
let items = userBasket[keyItems];
let basketItem;
items.forEach(item => {
basketItem = document.createElement('div');
basketForm.appendChild(basketItem);
});
*/
let htmlBlock = response.data[keyHtmlBlock];
basketForm.innerHTML = htmlBlock;
this.hookupBasket();
}
hookupBasket();
}
getFormProductSelector(typeForm, elementInForm) {
idPermutation = elementInForm.attr(attrIdPermutation);
console.log('idPermutation: ', idPermutation);
hasPermutation = !Validation.isEmpty(idPermutation);
console.log('has permutation: ', hasPermutation);
selectorIdPermutation = hasPermutation ? '[' + attrIdPermutation + '=' + idPermutation + ']' : '';
return 'form[' + attrFormType + '="' + typeForm + '"][' + attrIdProduct + '=' + elementInForm.attr(attrIdProduct) + ']' + selectorIdPermutation;
}
getCurrencySelected() {
let elementSelectorCurrency = document.querySelectorAll(idSelectorCurrency);
let selectedCurrency = elementSelectorCurrency.val();
@@ -463,13 +387,6 @@ export default class StoreMixinPage {
return selectedCurrency;
}
addMetadataBasketToJSON(jsonData) {
jsonData[keyIdCurrency] = LocalStorage.getLocalStorage(keyIdCurrency);
jsonData[keyIdRegionDelivery] = LocalStorage.getLocalStorage(keyIdRegionDelivery);
jsonData[keyIsIncludedVAT] = LocalStorage.getLocalStorage(keyIsIncludedVAT);
return jsonData;
}
hookupStoreCardsProduct() {
let d; // , lsShared;
@@ -477,31 +394,41 @@ export default class StoreMixinPage {
Events.initialiseEventHandler(selectorCardProduct, flagInitialised, function(cardProduct) {
console.log("initialising product card: ", cardProduct);
cardProduct.addEventListener("click", function(event) {
// d = { keyIdProduct: product.attr(attrIdProduct) }
// d = { keyIdProduct: product.getAttribute(attrIdProduct) }
var elemClicked = event.target;
if (elemClicked.id != 'submit') { // disable for submit buttons
console.log("product click: " + cardProduct.attr(attrIdProduct));
console.log("permutation click: " + cardProduct.attr(attrIdPermutation));
console.log("product click: " + cardProduct.getAttribute(attrIdProduct));
console.log("permutation click: " + cardProduct.getAttribute(attrIdPermutation));
var d = {}
d[keyIdProduct] = cardProduct.attr(attrIdProduct)
d[keyIdPermutation] = cardProduct.attr(attrIdPermutation)
d[keyIdProduct] = cardProduct.getAttribute(attrIdProduct)
d[keyIdPermutation] = cardProduct.getAttribute(attrIdPermutation)
// send quantity requested
goToPage(hashPageStoreProduct, d);
}
});
console.log("click method added for product ID: " + cardProduct.attr(attrIdProduct) + ', permutation ID: ', cardProduct.attr(attrIdPermutation));
console.log("click method added for product ID: " + cardProduct.getAttribute(attrIdProduct) + ', permutation ID: ', cardProduct.getAttribute(attrIdPermutation));
});
}
leave() {
let lsOld = getPageLocalStorage(hashPageCurrent);
hashPageCurrent = pageHashNext;
clearPageLocalStorage(hashPageCurrent);
setupPageLocalStorage(hashPageCurrent);
let lsNew = getPageLocalStorage(hashPageCurrent);
lsNew[keyBasket] = (keyBasket in lsOld) ? lsOld[keyBasket] : {'items': []};
setPageLocalStorage(hashPageCurrent, lsNew);
leave() {}
/*
getFormProductSelector(typeForm, elementInForm) {
idPermutation = elementInForm.getAttribute(attrIdPermutation);
console.log('idPermutation: ', idPermutation);
hasPermutation = !Validation.isEmpty(idPermutation);
console.log('has permutation: ', hasPermutation);
selectorIdPermutation = hasPermutation ? '[' + attrIdPermutation + '=' + idPermutation + ']' : '';
return 'form[' + attrFormType + '="' + typeForm + '"][' + attrIdProduct + '=' + elementInForm.getAttribute(attrIdProduct) + ']' + selectorIdPermutation;
}
addMetadataBasketToJSON(jsonData) {
jsonData[keyIdCurrency] = LocalStorage.getLocalStorage(keyIdCurrency);
jsonData[keyIdRegionDelivery] = LocalStorage.getLocalStorage(keyIdRegionDelivery);
jsonData[keyIsIncludedVAT] = LocalStorage.getLocalStorage(keyIsIncludedVAT);
return jsonData;
}
*/
/*
loadFiltersFromLocalStorage(pageHash, parameters_dict) {
@@ -517,4 +444,4 @@ export default class StoreMixinPage {
goToPage(pageHash, parameters_dict);
}
*/
}
}

25
static/js/pages/store/mixin_table.js Normal file
View File

@@ -0,0 +1,25 @@
import Events from "../../lib/events.js";
import LocalStorage from "../../lib/local_storage.js";
import Validation from "../../lib/validation.js";
// import BasePage from "../base.js";
import DOM from "../../dom.js";
import { isEmpty } from "../../lib/utils.js";
import StoreMixinPage from "./mixin.js";
export default class StoreTableMixinPage extends StoreMixinPage {
constructor(pageCurrent) {
super(pageCurrent);
}
initialize() {
super.initialize();
this.hookupFilters();
this.hookupTable();
}
hookupFilters() {
// Implement filter-specific functionality here
}
hookupTable() {
// Implement table-specific functionality here
}
}

54
static/js/pages/store/product_categories.js
View File

@@ -1,8 +1,9 @@
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";
export default class PageStoreProductCategories extends TableBasePage {
static hash = hashPageStoreProductCategories;
@@ -11,22 +12,21 @@ export default class PageStoreProductCategories extends TableBasePage {
constructor(router) {
super(router);
this.storeMixin = new StoreTableMixinPage(this);
}
initialize() {
super.initialize();
this.sharedInitialize();
}
hookupFilters() {
super.hookupFilters();
this.sharedHookupFilters();
this.hookupFilterIsNotEmpty();
this.hookupFilterActive();
}
hookupFilterIsNotEmpty() {
Events.initialiseEventHandler('.' + flagIsNotEmpty, flagInitialised, (filter) => {
filter.addEventListener("change", (event) => {
PageStoreProductCategories.isDirtyFilter(filter);
});
this.hookupEventHandler("change", idFormFilters + ' .' + flagIsNotEmpty, (event, filter) => {
PageStoreProductCategories.isDirtyFilter(filter);
});
}
@@ -47,22 +47,16 @@ export default class PageStoreProductCategories extends TableBasePage {
let divAccessLevel = tdAccessLevel.querySelector('div.' + flagAccessLevel);
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
sliderDisplayOrder.setAttribute(attrValueCurrent, rowJson[flagDisplayOrder]);
DOM.setElementValuePrevious(sliderDisplayOrder, rowJson[flagDisplayOrder]);
DOM.setElementValueCurrent(textareaCode, rowJson[flagCode]);
DOM.setElementValuePrevious(textareaCode, rowJson[flagCode]);
DOM.setElementValueCurrent(textareaName, rowJson[flagName]);
DOM.setElementValuePrevious(textareaName, rowJson[flagName]);
DOM.setElementValueCurrent(textareaDescription, rowJson[flagDescription]);
DOM.setElementValuePrevious(textareaDescription, rowJson[flagDescription]);
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.setElementValueCurrent(divAccessLevel, rowJson[attrIdAccessLevel]);
DOM.setElementValuePrevious(divAccessLevel, rowJson[attrIdAccessLevel]);
DOM.setElementValuesCurrentAndPrevious(divAccessLevel, rowJson[attrIdAccessLevel]);
divAccessLevel.textContent = rowJson[flagAccessLevelRequired];
DOM.setElementValueCurrent(inputActive, rowJson[flagActive]);
DOM.setElementValuePrevious(inputActive, rowJson[flagActive]);
DOM.setElementValuesCurrentAndPrevious(inputActive, rowJson[flagActive]);
row.setAttribute(rowJson[flagKeyPrimary], rowJson[rowJson[flagKeyPrimary]]);
let table = this.getTableMain();
@@ -79,16 +73,26 @@ export default class PageStoreProductCategories extends TableBasePage {
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
let jsonCategory = {};
jsonCategory[attrIdCategory] = row.getAttribute(attrIdCategory);
jsonCategory[attrIdProductCategory] = row.getAttribute(attrIdProductCategory);
jsonCategory[flagCode] = DOM.getElementValueCurrent(textareaCode);
jsonCategory[flagName] = DOM.getElementValueCurrent(textareaName);
jsonCategory[flagDescription] = DOM.getElementValueCurrent(textareaDescription);
jsonCategory[flagAccessLevelRequired] = tdAccessLevel.getAttribute(flagAccessLevelRequired);
jsonCategory[attrIdAccessLevel] = tdAccessLevel.getAttribute(attrIdAccessLevel);
// jsonCategory[flagAccessLevelRequired] = tdAccessLevel.getAttribute(flagAccessLevelRequired);
jsonCategory[attrIdAccessLevel] = DOM.getElementValueCurrent(tdAccessLevel);
jsonCategory[flagActive] = DOM.getElementValueCurrent(inputActive);
jsonCategory[flagDisplayOrder] = sliderDisplayOrder.getAttribute(attrValueCurrent);
return jsonCategory;
}
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();
@@ -100,6 +104,7 @@ export default class PageStoreProductCategories extends TableBasePage {
this.hookupInputsActiveTable();
}
/*
isDirtyRow(row) {
if (row == null) return false;
console.log("Product Category isDirtyRow");
@@ -115,16 +120,19 @@ export default class PageStoreProductCategories extends TableBasePage {
DOM.handleDirtyElement(row, isDirty);
return isDirty;
}
*/
leave() {
super.leave();
}
/*
getFiltersDefaults() {
filters = {};
filters.flagIsNotEmpty = true;
filters.flagActive = true;
return filters;
}
*/
}

917
static/js/pages/store/product_permutations.js
View File

@@ -1,472 +1,551 @@
import API from "../../api.js";
import BusinessObjects from "../../lib/business_objects.js";
import DOM from "../../dom.js";
import Events from "../../lib/events.js";
import BasePage from "../base.js";
import TableBasePage from "../base_table.js";
import Utils from "../../lib/utils.js";
import Validation from "../../lib/validation.js";
import StoreTableMixinPage from "./mixin_table.js";
export default class PageStoreProductPermutations extends BasePage {
export default class PageStoreProductPermutations extends TableBasePage {
static hash = hashPageStoreProductPermutations;
callFilterTableContent = API.getProductPermutationsByFilters;
callSaveTableContent = API.saveProductPermutations;
constructor(router) {
super(router);
this.storeMixin = new StoreTableMixinPage(this);
}
initialize() {
this.sharedInitialize();
hookupFilters();
hookupButtonsSaveCancel();
hookupTableMain();
hookupOverlayConfirm(savePermutations);
}
hookupFilters() {
Events.initialiseEventHandler(idFilterCategory, flagInitialised, function(filterCategory) {
console.log("hooking up filter category");
/*
listCategories.forEach(function(category) {
console.log('adding category: ', category.value, category.text);
/*
let option = document.createElement('option');
option.value = category.value;
option.text = category.text;
*
filterCategory.appendChild(document.createElement('<option>', category));
});
console.log(listCategories);
*/
filterCategory.addEventListener("change", function(event) {
loadPermutations();
});
console.log("hooked up filter category");
});
Events.initialiseEventHandler(idFilterProduct, flagInitialised, function(filterProduct) {
listProducts.forEach(function(product) {
if (product[attrIdCategory] != getElementCurrentValue(document.querySelectorAll(idFilterCategory))) return;
/*
let option = document.createElement('option');
option.value = product.value;
option.text = product.text;
*/
filterProduct.appendChild(document.createElement('<option>', product));
});
filterProduct.addEventListener("change", function(event) {
loadPermutations();
});
});
Events.initialiseEventHandler(idFilterIsOutOfStock, flagInitialised, function(filterIsOutOfStock) {
filterIsOutOfStock.addEventListener("change", function(event) {
loadPermutations();
});
});
Events.initialiseEventHandler(idFilterQuantityMin, flagInitialised, function(filterQuantityMin) {
filterQuantityMin.addEventListener("change", function(event) {
loadPermutations();
});
});
Events.initialiseEventHandler(idFilterQuantityMax, flagInitialised, function(filterQuantityMax) {
filterQuantityMax.addEventListener("change", function(event) {
loadPermutations();
this.sharedHookupFilters();
this.hookupFilterProductCategory();
this.hookupFilterProduct();
this.hookupFilterOutOfStock();
this.hookupFilterMinStock();
this.hookupFilterMaxStock();
}
hookupFilterProductCategory() {
this.hookupFilter(flagProductCategory, (event, filterCategory) => {
// loadPermutations();
// let wasDirtyFilter = filterCategory.classList.contains(flagDirty);
PageStoreProductPermutations.isDirtyFilter(filterCategory);
let isDirtyFilter = filterCategory.classList.contains(flagDirty);
let idProductCategory = DOM.getElementValueCurrent(filterCategory);
let products = productCategories[idProductCategory];
let filterProduct = document.querySelector(idFormFilters + ' .' + flagProduct);
let idProductPrevious = filterProduct.getAttribute(attrValuePrevious);
filterProduct.innerHTML = '';
let optionJson, option;
option = DOM.createOption(null);
filterProduct.appendChild(option);
products.forEach((product) => {
optionJson = BusinessObjects.getOptionJsonFromObjectJson(product, idProductPrevious);
option = DOM.createOption(optionJson);
filterProduct.appendChild(option);
});
filterProduct.dispatchEvent(new Event('change'));
});
}
hookupFilterProduct() {
this.hookupFilter(flagProduct);
}
hookupFilterOutOfStock() {
this.hookupFilter(flagIsOutOfStock);
}
hookupFilterMinStock() {
this.hookupFilter(flagQuantityMin);
}
hookupFilterMaxStock() {
this.hookupFilter(flagQuantityMax);
}
loadPermutations() {
let elForm = document.querySelectorAll(idFormFiltersPermutations);
let ajaxData = {};
ajaxData[keyForm] = convertForm2JSON(elForm);
ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
loadRowTable(rowJson) {
/*
ajaxData[attrIdCategory] = getElementCurrentValue(document.querySelectorAll(idFilterCategory));
ajaxData[attrIdProduct] = getElementCurrentValue(document.querySelectorAll(idFilterProduct));
ajaxData[flagIsOutOfStock] = getElementCurrentValue(document.querySelectorAll(idFilterIsOutOfStock));
ajaxData[flagQuantityMin] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMin));
ajaxData[flagQuantityMax] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMax));
if (rowJson == null) return;
let tableMain = this.getTableMain();
let row = _rowBlank.cloneNode(true);
row.classList.remove(flagRowNew);
console.log("applying data row: ", rowJson);
let dllCategory = row.querySelector('td.' + flagProductCategory + ' select');
dllCategory.value = rowJson[attrIdProductCategory];
let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
let optionJson, option;
listProducts.forEach(function(product) {
if (product[attrIdProductCategory] != rowJson[attrIdProductCategory]) return;
optionJson = BusinessObjects.getOptionJsonFromObjectJson(product);
option = DOM.createOption(optionJson, rowJson[attrIdProduct]);
ddlProduct.appendChild(option);
});
ddlProduct.value = rowJson[attrIdProduct];
row.querySelector('td.' + flagProductVariations + ' textarea').value = rowJson[flagProductVariations];
let tdProductVariations = row.querySelector('td.' + flagProductVariations);
let textareaProductVariations = tdProductVariations.querySelector('textarea');
DOM.setElementValuesCurrentAndPrevious(textareaProductVariations, rowJson[flagProductVariations]);
let thProductVariations = row.querySelector('td.' + flagProductVariations);
if (!thProductVariations.classList.contains(flagCollapsed)) tdProductVariations.classList.remove(flagCollapsed);
let inputDescription = row.querySelector('td.' + flagDescription + ' textarea');
DOM.setElementValuesCurrentAndPrevious(inputDescription, rowJson[flagDescription]);
let inputCostLocal = row.querySelector('td.' + flagCostLocal + ' input');
DOM.setElementValuesCurrentAndPrevious(inputCostLocal, rowJson[flagCostLocal]);
let tdCurrencyCost = row.querySelector('td.' + flagCurrencyCost);
DOM.setElementAttributesValuesCurrentAndPrevious(tdCurrencyCost, rowJson[flagCurrencyCost]);
let ddlCurrencyCost = tdCurrencyCost.querySelector('select');
DOM.setElementValuesCurrentAndPrevious(ddlCurrencyCost, rowJson[flagCurrencyCost]);
let inputProfitLocalMin = row.querySelector('td.' + flagProfitLocalMin + ' input');
DOM.setElementValuesCurrentAndPrevious(inputProfitLocalMin, rowJson[flagProfitLocalMin]);
let inputLatencyManufactureDays = row.querySelector('td.' + flagLatencyManufactureDays + ' input');
DOM.setElementValuesCurrentAndPrevious(inputLatencyManufactureDays, rowJson[flagLatencyManufactureDays]);
let inputQuantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
DOM.setElementValuesCurrentAndPrevious(inputQuantityStock, rowJson[flagQuantityStock]);
let inputQuantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
DOM.setElementValuesCurrentAndPrevious(inputQuantityMin, rowJson[flagQuantityMin]);
let inputQuantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
DOM.setElementValuesCurrentAndPrevious(inputQuantityMax, rowJson[flagQuantityMax]);
let inputQuantityStep = row.querySelector('td.' + flagCountUnitMeasurementPerQuantityStep + ' input');
DOM.setElementValuesCurrentAndPrevious(inputQuantityStep, rowJson[flagCountUnitMeasurementPerQuantityStep]);
row.querySelector('td.' + flagQuantityStock + ' input').value = rowJson[flagQuantityStock];
row.querySelector('td.' + flagQuantityMin + ' input').value = rowJson[flagQuantityMin];
row.querySelector('td.' + flagQuantityMax + ' input').value = rowJson[flagQuantityMax];
row.querySelector('td.' + flagCostLocal).innerHTML = rowJson[flagCostLocal];
row.setAttribute(attrIdProductCategory, rowJson[flagProductCategory]);
row.setAttribute(attrIdProduct, rowJson[flagProduct]);
row.setAttribute(attrIdProductPermutation, rowJson[attrIdProductPermutation]);
let tbody = tableMain.querySelector('tbody');
tbody.appendChild(row);
*/
console.log('ajaxData:'); console.log(ajaxData);
ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {"X-CSRFToken": ajaxData.csrf_token});
}
getJsonRow(row) {
if (row == null) return;
let tdProductCategory = row.querySelector('td.' + flagProductCategory);
let tdProduct = row.querySelector('td.' + flagProduct);
let tdProductVariations = row.querySelector('td.' + flagProductVariations);
let inputDescription = row.querySelector('td.' + flagDescription + ' textarea');
let inputCostLocal = row.querySelector('td.' + flagCostLocal + ' input');
let tdCurrencyCost = row.querySelector('td.' + flagCurrencyCost);
let inputProfitLocalMin = row.querySelector('td.' + flagProfitLocalMin + ' input');
let inputLatencyManufactureDays = row.querySelector('td.' + flagLatencyManufactureDays + ' input');
let inputQuantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
let inputQuantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
let inputQuantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
let inputQuantityStep = row.querySelector('td.' + flagCountUnitMeasurementPerQuantityStep + ' input');
let tdUnitMeasurementQuantity = row.querySelector('td.' + flagUnitMeasurementQuantity);
let checkboxIsSubscription = row.querySelector('td.' + flagIsSubscription + ' input');
let inputCountIntervalRecurrence = row.querySelector('td.' + flagCountUnitMeasurementIntervalRecurrence + ' input');
let tdUnitMeasurementIntervalRecurrence = row.querySelector('td.' + flagUnitMeasurementIntervalRecurrence);
let inputIdStripeProduct = row.querySelector('td.' + flagIdStripeProduct + ' input');
let checkboxDoesExpireFasterOnceUnsealed = row.querySelector('td.' + flagDoesExpireFasterOnceUnsealed + ' input');
let inputCountIntervalExpirationUnsealed = row.querySelector('td.' + flagCountUnitMeasurementIntervalExpirationUnsealed + ' input');
let tdUnitMeasurementIntervalExpirationUnsealed = row.querySelector('td.' + flagUnitMeasurementIntervalExpirationUnsealed);
let checkboxActive = row.querySelector('td.' + flagActive + ' input');
callbackLoadPermutations(response) {
console.log('ajax:'); console.log(response.data);
let table = document.querySelectorAll(idTableMain);
let bodyTable, row, dllCategory, ddlProduct;
// table.querySelector('tr').remove(); // :not(.' + flagRowNew + ')
bodyTable = table.querySelector('tbody');
bodyTable.querySelector('tr').remove();
response.data.forEach(function(dataRow) {
row = _rowBlank.cloneNode(true);
row = document.querySelectorAll(row);
row.classList.remove(flagRowNew);
console.log("applying data row: ", dataRow);
dllCategory = row.querySelector('td.' + flagCategory + ' select');
dllCategory.value = dataRow[attrIdCategory];
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
listProducts.forEach(function(product) {
if (product[attrIdCategory] != dataRow[attrIdCategory]) return;
ddlProduct.appendChild(document.createElement('<option>', product));
});
ddlProduct.value = dataRow[attrIdProduct];
row.querySelector('td.' + flagVariations + ' textarea').value = dataRow[flagVariations];
row.querySelector('td.' + flagQuantityStock + ' input').value = dataRow[flagQuantityStock];
row.querySelector('td.' + flagQuantityMin + ' input').value = dataRow[flagQuantityMin];
row.querySelector('td.' + flagQuantityMax + ' input').value = dataRow[flagQuantityMax];
row.querySelector('td.' + flagCostLocalVATIncl).innerHTML = dataRow[flagCostLocalVATIncl];
row.attr(attrIdCategory, dataRow[flagCategory]);
row.attr(attrIdProduct, dataRow[flagProduct]);
row.attr(attrIdPermutation, dataRow[attrIdPermutation]);
bodyTable.appendChild(row);
});
let jsonRow = {};
jsonRow[attrIdProductPermutation] = row.getAttribute(attrIdProductPermutation);
jsonRow[attrIdProductCategory] = tdProductCategory.getAttribute(attrValueCurrent);
jsonRow[attrIdProduct] = tdProduct.getAttribute(attrValueCurrent);
jsonRow[flagProductVariations] = tdProductVariations.getAttribute(attrValueCurrent);
jsonRow[flagHasVariations] = jsonRow[flagProductVariations] != '';
jsonRow[flagDescription] = inputDescription.getAttribute(attrValueCurrent);
jsonRow[flagCostLocal] = inputCostLocal.getAttribute(attrValueCurrent);
jsonRow[flagCurrencyCost] = tdCurrencyCost.getAttribute(attrValueCurrent);
jsonRow[flagProfitLocalMin] = inputProfitLocalMin.getAttribute(attrValueCurrent);
jsonRow[flagLatencyManufactureDays] = inputLatencyManufactureDays.getAttribute(attrValueCurrent);
jsonRow[flagQuantityStock] = inputQuantityStock.getAttribute(attrValueCurrent);
jsonRow[flagQuantityMin] = inputQuantityMin.getAttribute(attrValueCurrent);
jsonRow[flagQuantityMax] = inputQuantityMax.getAttribute(attrValueCurrent);
jsonRow[flagCountUnitMeasurementPerQuantityStep] = inputQuantityStep.getAttribute(attrValueCurrent);
jsonRow[flagUnitMeasurementQuantity] = tdUnitMeasurementQuantity.getAttribute(attrValueCurrent);
jsonRow[flagIsSubscription] = checkboxIsSubscription.getAttribute(attrValueCurrent);
jsonRow[flagCountUnitMeasurementIntervalRecurrence] = inputCountIntervalRecurrence.getAttribute(attrValueCurrent);
jsonRow[flagUnitMeasurementIntervalRecurrence] = tdUnitMeasurementIntervalRecurrence.getAttribute(attrValueCurrent);
jsonRow[flagIdStripeProduct] = inputIdStripeProduct.getAttribute(attrValueCurrent);
jsonRow[flagDoesExpireFasterOnceUnsealed] = checkboxDoesExpireFasterOnceUnsealed.getAttribute(attrValueCurrent);
jsonRow[flagCountUnitMeasurementIntervalExpirationUnsealed] = inputCountIntervalExpirationUnsealed.getAttribute(attrValueCurrent);
jsonRow[flagUnitMeasurementIntervalExpirationUnsealed] = tdUnitMeasurementIntervalExpirationUnsealed.getAttribute(attrValueCurrent);
jsonRow[flagActive] = checkboxActive.getAttribute(attrValueCurrent);
return jsonRow;
}
hookupButtonsSaveCancel() {
Events.initialiseEventHandler(idButtonSave, flagInitialised, function(button) {
button.addEventListener("click", function(event) {
event.stopPropagation();
showOverlayConfirm();
});
});
// let parentSave = btnSave.closest('div.' + flagColumn);
// parentSave.classList.add(flagCollapsed);
Events.initialiseEventHandler(idButtonCancel, flagInitialised, function(button) {
button.addEventListener("click", function(event) {
event.stopPropagation();
loadPermutations();
});
});
// let parentCancel = btnCancel.closest('div.' + flagColumn);
// parentCancel.classList.add(flagCollapsed);
Events.initialiseEventHandler(idButtonCancel, flagInitialised, function(button) {
button.addEventListener("click", function(event) {
event.stopPropagation();
let table = document.querySelectorAll(idTableMain);
let row = _rowBlank.cloneNode(true);
row = document.querySelectorAll(row);
row.classList.remove(flagRowNew);
let ddlCategory = row.querySelector('td.' + flagCategory + ' select');
let idCategory = getElementCurrentValue(document.querySelectorAll(idFilterCategory));
idCategory = (idCategory == 0) ? idCategoryDefault : idCategory;
let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
let products = productsByCategory[idCategory];
products.forEach(function(product) {
ddlProduct.appendChild(document.createElement('<option>', product));
});
table.querySelector('tbody').appendChild(row);
});
});
}
savePermutations() {
let permutations = getPermutations(true);
if (permutations.length == 0) {
showOverlayError('No permutations to save');
return;
initialiseRowNew(row) {
let ddlCategoryFilter = document.querySelector(idFormFilters + ' #' + attrIdProductCategory);
let idProductCategoryFilter = DOM.getElementValueCurrent(ddlCategoryFilter);
let hasCategoryFilter = !(Validation.isEmpty(idProductCategoryFilter) || idProductCategoryFilter == '0');
let ddlProductFilter = document.querySelector(idFormFilters + ' #' + attrIdProduct);
let idProductFilter = DOM.getElementValueCurrent(ddlProductFilter);
let hasProductFilter = !(Validation.isEmpty(idProductFilter) || idProductFilter == '0');
console.log("initialiseRowNew: ", row);
console.log({ddlCategoryFilter, idProductCategoryFilter, hasCategoryFilter, ddlProductFilter, idProductFilter, hasProductFilter});
if (!hasCategoryFilter && !hasProductFilter) return;
if (hasCategoryFilter) {
let ddlCategory = row.querySelector('td.' + flagProductCategory + ' select');
DOM.setElementValuesCurrentAndPrevious(ddlCategory, idProductCategoryFilter);
this.handleChangeProductCategoryDdl(null, ddlCategory);
}
if (hasProductFilter) {
let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
DOM.setElementValuesCurrentAndPrevious(ddlProduct, idProductFilter);
}
let ajaxData = {};
ajaxData[keyPermutations] = permutations;
ajaxData[keyForm] = convertForm2JSON(elForm);
ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
ajaxData.comment = document.querySelectorAll(idTextareaConfirm).value;
console.log('ajaxData:'); console.log(ajaxData);
ajaxJSONData('permutations', mapHashToController(hashPageStorePermutationsPost), ajaxData, callbackLoadPermutations, false, {});
}
getPermutations(dirtyOnly) {
let table = document.querySelectorAll(idTableMain);
let permutations = [];
let row, permutation, ddlCategory, ddlProduct, variations, quantityStock, quantityMin, quantityMax, costLocal;
table.querySelector('tbody tr').each(function(index, row) {
row = document.querySelectorAll(row);
if (dirtyOnly && !row.classList.contains(flagDirty)) return;
ddlCategory = row.querySelector('td.' + flagCategory + ' select');
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
variations = row.querySelector('td.' + flagVariations + ' textarea');
quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
permutation = {};
permutation[attrIdCategory] = ddlCategory.attr(attrValueCurrent);
permutation[attrIdProduct] = ddlProduct.attr(attrValueCurrent);
permutation[attrIdPermutation] = row.attr(attrIdPermutation)
permutation[flagVariations] = variations.attr(attrValueCurrent);
permutation[flagQuantityStock] = quantityStock.attr(attrValueCurrent);
permutation[flagQuantityMin] = quantityMin.attr(attrValueCurrent);
permutation[flagQuantityMax] = quantityMax.attr(attrValueCurrent);
permutations.push(permutation);
});
return permutations;
}
hookupTableMain() {
Events.initialiseEventHandler(idTableMain, flagInitialised, function(table) {
table.querySelectorAll('td.' + flagCategory + ' select').addEventListener("change", function(event) {
handleChangeInputPermutations(this);
ddlCategory = this;
row = getRowFromElement(ddlCategory);
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
ddlProduct.querySelector('option').remove();
ddlProduct.appendChild(document.createElement('<option>', {value: '', text: 'Select Product'}));
listProducts.forEach(function(product) {
if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
ddlProduct.appendChild(document.createElement('<option>', product));
});
handleChangeInputPermutations(ddlProduct);
});
table.querySelectorAll("change", 'td.' + flagProduct + ' select' + ',' + 'td.' + flagQuantityStock + ' input' + ',' + 'td.' + flagQuantityMin + ' input' + ',' + 'td.' + flagQuantityMax + ' input').addEventListener("change", function(event) {
handleChangeInputPermutations(this);
});
table.querySelectorAll("click", 'td.' + flagVariations + ' textarea').addEventListener("change", function(event) {
event.stopPropagation();
handleClickPermutationsInputVariations(this);
});
table.querySelectorAll("click", 'td.' + flagDetail + ' button').addEventListener("change", function(event) {
event.stopPropagation();
console.log("not implemented error: detail clicked");
});
table.querySelectorAll("click", 'td.' + flagVariations + ' button.' + flagAdd).addEventListener("change", function(event) {
event.stopPropagation();
handleClickPermutationsVariationsButtonAdd(this);
});
});
// cache new row for cloning
let rowBlankTemp = table.querySelector('tr.' + flagRowNew);
console.log("row blank temp: ", rowBlankTemp);
_rowBlank = rowBlankTemp.cloneNode(true);
table.querySelectorAll('tr.' + flagRowNew).forEach(function(row) {
row.remove();
});
super.hookupTableMain();
this.hookupProductCategoryFields();
this.hookupProductFields();
this.hookupProductVariationFields();
this.hookupDescriptionTextareas();
this.hookupCostFields();
this.hookupLatencyManufactureInputs();
this.hookupQuantityFields();
this.hookupSubscriptionFields();
this.hookupIdStripeProductInputs();
this.hookupExpirationFields();
this.hookupActiveCheckboxes();
}
handleChangeInputPermutations(element) {
console.log("handleChangeInputPermutations");
console.log("element value:", element.value);
let row = getRowFromElement(element);
let formFilters = document.querySelector(idFormFiltersPermutations);
let buttonCancel = formFilters.querySelector(idButtonCancel);
let buttonSave = formFilters.querySelector(idButtonSave);
let wasDirty = isElementDirty(element);
if (objJQuery.classList.contains(flagVariations)) {
element.setAttribute(attrValueCurrent, getProductVariationsText(element));
} else {
element.setAttribute(attrValueCurrent, getElementCurrentValue(element));
}
let isDirty = isElementDirty(element);
if (wasDirty != isDirty) {
isRowDirty(row);
let permutationsDirty = getPermutations(true);
if (Validation.isEmpty(permutationsDirty)) {
buttonCancel.classList.add(flagCollapsed);
buttonSave.classList.add(flagCollapsed);
} else {
buttonCancel.classList.remove(flagCollapsed);
buttonSave.classList.remove(flagCollapsed);
}
}
hookupProductCategoryFields() {
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagProductCategory, Utils.getListFromDict(productCategories), (event, element) => { this.hookupProductCategoryDdls(event, element); });
}
isElementDirty(element) {
let isDirty = element.attr(attrValuePrevious) != element.attr(attrValueCurrent);
let cell = getCellFromElement(element);
if (isDirty) {
element.classList.add(flagDirty);
cell.classList.add(flagDirty);
} else {
element.classList.remove(flagDirty);
cell.classList.remove(flagDirty);
}
return isDirty;
hookupProductCategoryDdls(ddlSelector) {
this.hookupChangeHandlerTableCells(ddlSelector, (event, element) => { this.handleChangeProductCategoryDdl(event, element); });
}
isRowDirty(row) {
let ddlCategory = row.querySelector('td.' + flagCategory + ' select');
handleChangeProductCategoryDdl(event, ddlCategory) {
this.handleChangeTableCellDdl(event, ddlCategory);
let idProductCategorySelected = DOM.getElementValueCurrent(ddlCategory);
let row = DOM.getRowFromElement(ddlCategory);
let tdProduct = row.querySelector('td.' + flagProduct);
tdProduct.dispatchEvent(new Event('click'));
let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
let variations = row.querySelector('td.' + flagVariations + ' textarea');
let quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
let quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
let quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
// return isElementDirty(ddlCategory) || isElementDirty(ddlProduct) || isElementDirty(variations) || isElementDirty(quantityStock) || isElementDirty(quantityMin) || isElementDirty(quantityMax);
let isDirty = ddlCategory.classList.contains(flagDirty) || ddlProduct.classList.contains(flagDirty) || variations.classList.contains(flagDirty) ||
quantityStock.classList.contains(flagDirty) || quantityMin.classList.contains(flagDirty) || quantityMax.classList.contains(flagDirty);
if (isDirty) {
row.classList.add(flagDirty);
} else {
row.classList.remove(flagDirty);
}
return isDirty;
ddlProduct.innerHTML = '';
ddlProduct.appendChild(DOM.createOption(null));
let optionJson, option;
Utils.getListFromDict(products).forEach((product) => {
if (product[attrIdProductCategory] != idProductCategorySelected) return;
optionJson = BusinessObjects.getOptionJsonFromObjectJson(product);
option = DOM.createOption(optionJson);
ddlProduct.appendChild(option);
});
this.handleChangeTableCellDdl(event, ddlProduct);
}
getProductVariationsText(element) {
element = document.querySelectorAll(element);
/*
let value = element.value;
let variations = value.split('\n');
variations = variations.map(function(variation) {
return variation.trim();
});
variations = variations.filter(function(variation) {
return variation.length > 0;
});
*/
let variations = dictVariations[element.attr(attrIdVariation)].map((variation, index) => {
return variation[keyNameVariationType] + ': ' + variation[keyNameVariation];
});
return variations.join(',\n');
hookupProductFields() {
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagProduct, Utils.getListFromDict(products));
}
getElementProductVariations(element) {
element = document.querySelectorAll(element);
let variations = element.attr(attrValueCurrent);
let objVariations = [];
if (!Validation.isEmpty(variations)) {
variations = variations.split(',');
variations.forEach((variation) => {
let parts = variation.split(':');
if (parts.length == 2) {
objVariations.push({
[attrIdVariationType]: parts[0].trim(),
[attrIdVariation]: parts[1].trim(),
});
}
});
}
return objVariations;
hookupProductVariationFields() {
this.hookupEventHandler("click", idTableMain + ' td.' + flagProductVariations + ' div', (event, element) => this.handleClickProductPermutationVariationsPreview(event, element));
}
handleClickPermutationsInputVariations(element) {
element = document.querySelectorAll(element);
let jsonVariation, jsonVariationType, tr, tdVariationType, variationType, attributesVariationType, tdNameVariation, nameVariation, attributesNameVariation, tdDelete, buttonDelete, tmpJsonVariation, tmpJsonVariationType;
let variations = getElementProductVariations(element);
let tblVariations = document.createElement("<table>");
let thead = document.createElement("<thead>");
tr = document.createElement("<tr>");
let thVariationType = document.createElement("<th>", {
text: 'Type',
});
let thNameVariation = document.createElement("<th>", {
text: 'Name',
});
let buttonAdd = document.createElement("<button>", {
class: flagAdd,
text: '+',
});
let thAddDelete = document.createElement("<th>");
handleClickProductPermutationVariationsPreview(event, element) {
this.toggleProductPermutationVariationsColumnCollapsed(false);
let permutationVariations = this.getElementProductVariations(element);
let tblVariations = document.createElement("table");
tblVariations.classList.add(flagProductVariations);
let thead = document.createElement("thead");
let tr = document.createElement("tr");
let thVariationType = document.createElement("th");
thVariationType.textContent = 'Type';
let thNameVariation = document.createElement("th");
thNameVariation.textContent = 'Name';
let buttonAdd = document.createElement("button");
buttonAdd.classList.add(flagAdd);
buttonAdd.textContent = '+';
let thAddDelete = document.createElement("th");
thAddDelete.appendChild(buttonAdd);
tr.appendChild(thVariationType);
tr.appendChild(thNameVariation);
tr.appendChild(thAddDelete);
thead.appendChild(tr);
tblVariations.appendChild(thead);
let tbody = document.createElement("<tbody>");
console.log('variations:', variations);
/*
if (Validation.isEmpty(variations)) {
return;
let tbody = document.createElement("tbody");
console.log('variations:', permutationVariations);
if (Validation.isEmpty(permutationVariations)) {
permutationVariations = [PageStoreProductPermutations.createOptionUnselectedProductVariation()];
}
*/
variations.forEach((variation, index) => {
jsonVariationType = dictVariations[variation[attrIdVariationType]];
jsonVariation = dictVariations[variation[attrIdVariation]];
tdVariationType = document.createElement("<td>", {
class: attrIdVariationType,
else {
permutationVariations.forEach((permutationVariation, index) => {
this.addProductPermutationVariationRow(tbody, permutationVariation);
});
attributesVariationType = {
class: attrIdVariationType,
value: variation[attrIdVariationType],
};
attributesVariationType[attrValueCurrent] = jsonVariation[attrIdVariationType];
attributesVariationType[attrValuePrevious] = jsonVariation[attrIdVariationType];
variationType = document.createElement("<select>", attributesVariationType);
listVariationTypes.forEach((idVariationType) => {
tmpJsonVariationType = dictVariationTypes[idVariationType];
variationType.appendChild(document.createElement('<option>', {
value: jsonVariationType[attrIdVariationType],
text: jsonVariationType[keyNameVariationType],
selected: (idVariationType == jsonVariationType[attrIdVariationType]),
}));
});
tdNameVariation = document.createElement("<td>", {
class: attrIdVariation,
});
attributesNameVariation = {
class: attrIdVariation,
value: variation[attrIdVariation],
};
attributesNameVariation[attrValueCurrent] = jsonVariation[attrIdVariation];
attributesNameVariation[attrValuePrevious] = jsonVariation[attrIdVariation];
nameVariation = document.createElement("<select>", attributesNameVariation);
listVariations.forEach((idVariation) => {
tmpJsonVariation = dictVariations[idVariation];
console.log("id_variation: ", idVariation);
console.log("tmpJsonVariation: ", tmpJsonVariation);
nameVariation.appendChild(document.createElement('<option>', {
value: tmpJsonVariation[attrIdVariation],
text: tmpJsonVariation[keyNameVariation],
selected: (idVariation == jsonVariation[attrIdVariation]),
}));
});
tdDelete = document.createElement("<td>", {
class: flagDelete,
});
buttonDelete = document.createElement("<button>", {
class: flagDelete,
text: 'x',
});
tr = document.createElement("<tr>");
tdVariationType.appendChild(variationType);
tr.appendChild(tdVariationType);
tdNameVariation.appendChild(nameVariation);
tr.appendChild(tdNameVariation);
tdDelete.appendChild(buttonDelete);
tr.appendChild(tdDelete);
tbody.appendChild(tr);
});
}
tblVariations.appendChild(tbody);
let parent = element.parentElement;
parent.innerHTML = '';
parent.appendChild(tblVariations);
console.log("tblVariations: ", tblVariations);
let selectorButtonAdd = idTableMain + ' td.' + flagProductVariations + ' button.' + flagAdd;
this.hookupEventHandler("click", selectorButtonAdd, this.handleClickButtonProductPermutationVariationsAdd);
let selectorButtonDelete = idTableMain + ' td.' + flagProductVariations + ' button.' + flagDelete;
this.hookupEventHandler("click", selectorButtonDelete, this.handleClickButtonProductPermutationVariationsDelete);
}
toggleProductPermutationVariationsColumnCollapsed(isCollapsed) {
this.toggleColumnHasClassnameFlag(flagProductVariations, isCollapsed, flagCollapsed);
}
getElementProductVariations(element) {
let permutationVariations = element.getAttribute(attrValueCurrent);
let objVariations = [];
let parts, new_variation, new_variation_type;
if (!Validation.isEmpty(permutationVariations)) {
permutationVariations = permutationVariations.split(',');
permutationVariations.forEach((variation) => {
parts = variation.split(':');
if (parts.length == 2) {
console.log("parts: ", parts);
new_variation_type = productVariationTypes[parts[0].trim()];
new_variation = productVariations[parts[1].trim()];
objVariations.push({
[flagProductVariationType]: new_variation_type,
[flagProductVariation]: new_variation,
});
}
else {
console.log("error: invalid variation: ", variation);
}
});
}
return objVariations;
}
/*
static createOptionUnselectedProductVariation() {
return {
[flagProductVariationType]: {
[flagNameAttrOptionText]: [flagName],
[flagNameAttrOptionValue]: [attrIdProductVariationType],
[flagName]: 'Select Variation Type',
[attrIdProductVariationType]: 0,
},
[flagProductVariation]: {
[flagNameAttrOptionText]: [flagName],
[flagNameAttrOptionValue]: [attrIdProductVariation],
[flagName]: 'Select Variation',
[attrIdProductVariation]: 0,
},
};
}
*/
handleClickButtonProductPermutationVariationsAdd(event, element) {
let row = DOM.getRowFromElement(element);
let tbody = row.querySelector('tbody');
let permutationVariation = PageStoreProductPermutations.createOptionUnselectedProductVariation();
this.addProductPermutationVariationRow(tbody, permutationVariation);
}
addProductPermutationVariationRow(tbody, permutationVariation) {
let productVariationType, optionProductVariationTypeJson, optionProductVariationType, productVariation, optionProductVariationJson, optionProductVariation;
/*
if (Validation.isEmpty(variations)) {
return;
}
*/
let productVariationKeys = Object.keys(productVariations);
let productVariationTypeKeys = Object.keys(productVariationTypes);
console.log("permutationVariation: ", permutationVariation);
let permutationVariationJson = permutationVariation[flagProductVariation];
let permutationVariationTypeJson = permutationVariation[flagProductVariationType];
let tdVariationType = document.createElement("td");
tdVariationType.classList.add(flagProductVariationType);
DOM.setElementAttributesValuesCurrentAndPrevious(tdVariationType, permutationVariationTypeJson[attrIdProductVariationType]);
let ddlVariationType = document.createElement("select");
ddlVariationType.classList.add(flagProductVariationType);
DOM.setElementAttributesValuesCurrentAndPrevious(ddlVariationType, permutationVariationTypeJson[attrIdProductVariationType]);
optionProductVariationType = DOM.createOption(null);
console.log("optionProductVariationType: ", optionProductVariationType);
ddlVariationType.appendChild(optionProductVariationType);
productVariationTypeKeys.forEach((productVariationTypeKey) => {
/*
optionProductVariationType = document.createElement('option');
optionProductVariationType.value = optionVariationType.value;
optionProductVariationType.text = optionVariationType.text;
*/
productVariationType = productVariationTypes[productVariationTypeKey];
optionProductVariationTypeJson = BusinessObjects.getOptionJsonFromObjectJson(productVariationType, permutationVariationTypeJson[attrIdProductVariationType]);
optionProductVariationType = DOM.createOption(optionProductVariationTypeJson);
console.log("optionProductVariationType: ", optionProductVariationType);
ddlVariationType.appendChild(optionProductVariationType);
});
let tdVariation = document.createElement("td");
tdVariation.classList.add(flagProductVariation);
DOM.setElementAttributesValuesCurrentAndPrevious(tdVariation, permutationVariationJson[attrIdProductVariation]);
let ddlVariation = document.createElement("select");
ddlVariation.classList.add(flagProductVariation);
DOM.setElementAttributesValuesCurrentAndPrevious(ddlVariation, permutationVariationJson[attrIdProductVariation]);
optionProductVariation = DOM.createOption(null);
console.log("optionProductVariation: ", optionProductVariation);
ddlVariation.appendChild(optionProductVariation);
productVariationKeys.forEach((productVariationKey) => {
productVariation = productVariations[productVariationKey];
optionProductVariationJson = BusinessObjects.getOptionJsonFromObjectJson(productVariation, permutationVariationJson[attrIdProductVariation]);
optionProductVariation = DOM.createOption(optionProductVariationJson);
console.log("optionProductVariation: ", optionProductVariation);
ddlVariation.appendChild(optionProductVariation);
});
let tdDelete = document.createElement("td");
tdDelete.classList.add(flagDelete);
let buttonDelete = document.createElement("button");
buttonDelete.classList.add(flagDelete);
buttonDelete.textContent = 'x';
let tr = document.createElement("tr");
tdVariationType.appendChild(ddlVariationType);
tr.appendChild(tdVariationType);
tdVariation.appendChild(ddlVariation);
tr.appendChild(tdVariation);
tdDelete.appendChild(buttonDelete);
tr.appendChild(tdDelete);
tbody.appendChild(tr);
}
handleClickButtonProductPermutationVariationsDelete(event, element) {
let row = getRowFromElement(element);
let variationsCell = row.closest('td.' + flagProductVariations);
row.remove();
this.updateProductPermutationVariations(variationsCell);
}
updateProductPermutationVariations(variationsCell) {
let variationPairsString = this.getProductPermutationVariationsText(variationsCell);
variationsCell.setAttribute(attrValueCurrent, variationPairsString);
DOM.isElementDirty(variationsCell);
}
getProductPermutationVariationsText(variationsTd) {
let rows = variationsTd.querySelectorAll('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 + ',';
});
return variationPairsString;
}
handleClickPermutationsVariationsButtonAdd(element) {
element = document.querySelectorAll(element);
let row = getRowFromElement(element);
let variations = row.querySelector('td.' + flagVariations + ' textarea');
let value = variations.value;
value = (Validation.isEmpty(value)) ? '' : value + '\n';
value += 'Type: Variation\n';
variations.value = value;
handleChangeInputPermutations(variations);
console.log("error: not implemented");
hookupDescriptionTextareas() {
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagDescription + ' textarea');
}
hookupCostFields(){
this.hookupCurrencyCostFields();
this.hookupCostInputs();
}
hookupCurrencyCostFields(){
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagCurrencyCost, Utils.getListFromDict(currencies));
}
hookupCostInputs(){
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCostLocal + ' input');
}
hookupProfitFields(){
// this.hookupCurrencyProfitFields();
this.hookupProfitInputs();
}
/*
hookupCurrencyProfitFields(){
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagCurrency, Utils.getListFromDict(currencies));
}
*/
hookupProfitInputs(){
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagProfitLocalMin + ' input');
}
hookupLatencyManufactureInputs(){
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagLatencyManufactureDays + ' input');
}
hookupQuantityFields(){
this.hookupQuantityMinInputs();
this.hookupQuantityMaxInputs();
this.hookupQuantityStockInputs();
this.hookupCountUnitMeasurementPerQuantityStepInputs();
this.hookupUnitMeasurementQuantityFields();
}
hookupQuantityMinInputs() {
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagQuantityMin + ' input');
}
hookupQuantityMaxInputs() {
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagQuantityMax + ' input');
}
hookupQuantityStockInputs() {
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagQuantityStock + ' input');
}
hookupCountUnitMeasurementPerQuantityStepInputs() {
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCountUnitMeasurementPerQuantityStep + ' input');
}
hookupUnitMeasurementQuantityFields() {
console.log("hooking up unit measurement quantity fields");
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagUnitMeasurementQuantity, Utils.getListFromDict(unitMeasurements));
}
hookupSubscriptionFields() {
this.hookupIsSubscriptionFields();
this.hookupIntervalRecurrenceFields();
this.hookupCountIntervalRecurrenceInputs();
}
hookupIsSubscriptionFields(){
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagIsSubscription + ' input', (event, element) => {
this.handleChangeElementCellTable(event, element);
let isSubscription = DOM.getElementValueCurrent(element);
let row = DOM.getRowFromElement(element);
let inputCountIntervalRecurrence = row.querySelector('td.' + flagCountUnitMeasurementIntervalRecurrence + ' input');
let divOrDdlIntervalRecurrence = row.querySelector('td.' + flagUnitMeasurementIntervalRecurrence + ' .' + flagUnitMeasurementIntervalRecurrence);
if (isSubscription) {
inputCountIntervalRecurrence.classList.remove(flagCollapsed);
DOM.setElementValueCurrentIfEmpty(inputCountIntervalRecurrence, 1);
divOrDdlIntervalRecurrence.classList.remove(flagCollapsed);
let tdUnitMeasurementIntervalRecurrence = divOrDdlIntervalRecurrence.closest('td');
tdUnitMeasurementIntervalRecurrence.dispatchEvent(new Event('click'));
} else {
inputCountIntervalRecurrence.classList.add(flagCollapsed);
divOrDdlIntervalRecurrence.classList.add(flagCollapsed);
}
});
}
hookupIntervalRecurrenceFields(){
this.hookupTableCellDDlPreviewsWhenNotCollapsed(idTableMain + ' td.' + flagUnitMeasurementIntervalRecurrence, Utils.getListFromDict(unitMeasurementsTime));
}
hookupCountIntervalRecurrenceInputs(){
this.hookupChangeHandlerTableCellsWhenNotCollapsed("change", idTableMain + ' td.' + flagCountUnitMeasurementIntervalRecurrence + ' input');
}
hookupIdStripeProductInputs(){
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagIdStripeProduct + ' input');
}
hookupExpirationFields(){
this.hookupDoesExpireFasterOnceUnsealedCheckboxes();
this.hookupIntervalExpirationUnsealedFields();
this.hookupCountIntervalExpirationUnsealedInputs();
}
hookupDoesExpireFasterOnceUnsealedCheckboxes(){
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagDoesExpireFasterOnceUnsealed + ' input', (event, element) => {
this.handleChangeElementCellTable(event, element);
let doesExpireFasterOnceUnsealed = DOM.getElementValueCurrent(element);
let row = DOM.getRowFromElement(element);
let inputCountIntervalExpirationUnsealed = row.querySelector('td.' + flagCountUnitMeasurementIntervalExpirationUnsealed + ' input');
let divOrDdlIntervalExpirationUnsealed = row.querySelector('td.' + flagUnitMeasurementIntervalExpirationUnsealed + ' .' + flagUnitMeasurementIntervalExpirationUnsealed);
if (doesExpireFasterOnceUnsealed) {
inputCountIntervalExpirationUnsealed.classList.remove(flagCollapsed);
DOM.setElementValueCurrentIfEmpty(inputCountIntervalExpirationUnsealed, 1);
divOrDdlIntervalExpirationUnsealed.classList.remove(flagCollapsed);
let tdUnitMeasurementIntervalExpirationUnsealed = divOrDdlIntervalExpirationUnsealed.closest('td');
tdUnitMeasurementIntervalExpirationUnsealed.dispatchEvent(new Event('click'));
} else {
inputCountIntervalExpirationUnsealed.classList.add(flagCollapsed);
divOrDdlIntervalExpirationUnsealed.classList.add(flagCollapsed);
}
});
}
hookupIntervalExpirationUnsealedFields(){
this.hookupTableCellDDlPreviewsWhenNotCollapsed(idTableMain + ' td.' + flagUnitMeasurementIntervalExpirationUnsealed, Utils.getListFromDict(unitMeasurementsTime));
}
hookupCountIntervalExpirationUnsealedInputs(){
this.hookupChangeHandlerTableCellsWhenNotCollapsed("change", idTableMain + ' td.' + flagCountUnitMeasurementIntervalExpirationUnsealed + ' input');
}
hookupActiveCheckboxes(){
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagActive + ' input');
}
leave() {

94
static/js/pages/store/stock_items.js
View File

@@ -45,7 +45,7 @@ export default class PageStoreStockItems extends BasePage {
let filterProduct = document.querySelectorAll(idFilterProduct);
Events.initialiseEventHandler(filterProduct, flagInitialised, function() {
listProducts.forEach(function(product) {
if (product[attrIdCategory] != getElementCurrentValue(document.querySelectorAll(idFilterCategory))) return;
if (product[attrIdProductCategory] != DOM.getElementValueCurrent(document.querySelectorAll(idFilterCategory))) return;
/*
let option = document.createElement('option');
option.value = product.value;
@@ -87,11 +87,11 @@ export default class PageStoreStockItems extends BasePage {
ajaxData[keyForm] = convertForm2JSON(elForm);
ajaxData.csrf_token = ajaxData[keyForm].csrf_token;
/*
ajaxData[attrIdCategory] = getElementCurrentValue(document.querySelectorAll(idFilterCategory));
ajaxData[attrIdProduct] = getElementCurrentValue(document.querySelectorAll(idFilterProduct));
ajaxData[flagIsOutOfStock] = getElementCurrentValue(document.querySelectorAll(idFilterIsOutOfStock));
ajaxData[flagQuantityMin] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMin));
ajaxData[flagQuantityMax] = getElementCurrentValue(document.querySelectorAll(idFilterQuantityMax));
ajaxData[attrIdProductCategory] = DOM.getElementValueCurrent(document.querySelectorAll(idFilterCategory));
ajaxData[attrIdProduct] = DOM.getElementValueCurrent(document.querySelectorAll(idFilterProduct));
ajaxData[flagIsOutOfStock] = DOM.getElementValueCurrent(document.querySelectorAll(idFilterIsOutOfStock));
ajaxData[flagQuantityMin] = DOM.getElementValueCurrent(document.querySelectorAll(idFilterQuantityMin));
ajaxData[flagQuantityMax] = DOM.getElementValueCurrent(document.querySelectorAll(idFilterQuantityMax));
*/
console.log('ajaxData:'); console.log(ajaxData);
@@ -115,22 +115,22 @@ export default class PageStoreStockItems extends BasePage {
row = document.querySelectorAll(row);
row.classList.remove(flagRowNew);
console.log("applying data row: ", dataRow);
dllCategory = row.querySelector('td.' + flagCategory + ' select');
dllCategory.val(dataRow[attrIdCategory]);
dllCategory = row.querySelector('td.' + flagProductCategory + ' select');
dllCategory.val(dataRow[attrIdProductCategory]);
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
listProducts.forEach(function(product) {
if (product[attrIdCategory] != dataRow[attrIdCategory]) return;
if (product[attrIdProductCategory] != dataRow[attrIdProductCategory]) return;
ddlProduct.appendChild(document.createElement('<option>', product));
});
ddlProduct.val(dataRow[attrIdProduct]);
row.querySelector('td.' + flagVariations + ' textarea').value = dataRow[flagVariations];
row.querySelector('td.' + flagProductVariations + ' textarea').value = dataRow[flagProductVariations];
row.querySelector('td.' + flagQuantityStock + ' input').value = dataRow[flagQuantityStock];
row.querySelector('td.' + flagQuantityMin + ' input').value = dataRow[flagQuantityMin];
row.querySelector('td.' + flagQuantityMax + ' input').value = dataRow[flagQuantityMax];
row.querySelector('td.' + flagCostLocal).innerHTML = dataRow[flagCostLocal];
row.attr(attrIdCategory, dataRow[flagCategory]);
row.attr(attrIdProduct, dataRow[flagProduct]);
row.attr(attrIdPermutation, dataRow[attrIdPermutation]);
row.setAttribute(attrIdProductCategory, dataRow[flagProductCategory]);
row.setAttribute(attrIdProduct, dataRow[flagProduct]);
row.setAttribute(attrIdPermutation, dataRow[attrIdPermutation]);
bodyTable.appendChild(row);
});
@@ -190,21 +190,21 @@ export default class PageStoreStockItems extends BasePage {
row = document.querySelectorAll(row);
if (dirtyOnly && !row.classList.contains(flagDirty)) return;
ddlCategory = row.querySelector('td.' + flagCategory + ' select');
ddlCategory = row.querySelector('td.' + flagProductCategory + ' select');
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
variations = row.querySelector('td.' + flagVariations + ' textarea');
variations = row.querySelector('td.' + flagProductVariations + ' textarea');
quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
permutation = {};
permutation[attrIdCategory] = ddlCategory.attr(attrValueCurrent);
permutation[attrIdProduct] = ddlProduct.attr(attrValueCurrent);
permutation[attrIdPermutation] = row.attr(attrIdPermutation)
permutation[flagVariations] = variations.attr(attrValueCurrent);
permutation[flagQuantityStock] = quantityStock.attr(attrValueCurrent);
permutation[flagQuantityMin] = quantityMin.attr(attrValueCurrent);
permutation[flagQuantityMax] = quantityMax.attr(attrValueCurrent);
permutation[attrIdProductCategory] = ddlCategory.getAttribute(attrValueCurrent);
permutation[attrIdProduct] = ddlProduct.getAttribute(attrValueCurrent);
permutation[attrIdPermutation] = row.getAttribute(attrIdPermutation)
permutation[flagProductVariations] = variations.getAttribute(attrValueCurrent);
permutation[flagQuantityStock] = quantityStock.getAttribute(attrValueCurrent);
permutation[flagQuantityMin] = quantityMin.getAttribute(attrValueCurrent);
permutation[flagQuantityMax] = quantityMax.getAttribute(attrValueCurrent);
permutations.push(permutation);
});
return permutations;
@@ -227,14 +227,14 @@ export default class PageStoreStockItems extends BasePage {
table.querySelector('tbody tr').each(function(index, row) {
console.log("hooking up row ", index);
row = document.querySelectorAll(row);
ddlCategory = row.querySelector('td.' + flagCategory + ' select');
ddlCategory = row.querySelector('td.' + flagProductCategory + ' select');
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
optionsCategory.clone().appendTo(ddlCategory);
/*
listProducts.forEach(function(product) {
if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
if (product[attrIdProductCategory] != DOM.getElementValueCurrent(ddlCategory)) return;
ddlProduct.appendChild(document.createElement('<option>', product));
});
*
@@ -245,9 +245,9 @@ export default class PageStoreStockItems extends BasePage {
table.querySelector('tbody tr').each(function(index, row) {
console.log("hooking up row ", index);
row = document.querySelectorAll(row);
ddlCategory = row.querySelector('td.' + flagCategory + ' select');
ddlCategory = row.querySelector('td.' + flagProductCategory + ' select');
ddlProduct = row.querySelector('td.' + flagProduct + ' select');
variations = row.querySelector('td.' + flagVariations + ' textarea');
variations = row.querySelector('td.' + flagProductVariations + ' textarea');
quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
@@ -256,8 +256,8 @@ export default class PageStoreStockItems extends BasePage {
// ddlCategory = document.querySelectorAll(ddlCategory);
ddlCategory.addEventListener('change', function() {
/*
ddlCategory.attr(attrValuePrevious, ddlCategory.attr(attrValueCurrent));
ddlCategory.attr(attrValueCurrent, ddlCategory.val());
ddlCategory.setAttribute(attrValuePrevious, ddlCategory.getAttribute(attrValueCurrent));
ddlCategory.setAttribute(attrValueCurrent, ddlCategory.val());
*/
handleChangeInputPermutations(this);
ddlCategory = this;
@@ -267,7 +267,7 @@ export default class PageStoreStockItems extends BasePage {
ddlProduct.querySelector('option').remove();
ddlProduct.appendChild(document.createElement('<option>', {value: '', text: 'Select Product'}));
listProducts.forEach(function(product) {
if (product[attrIdCategory] != getElementCurrentValue(ddlCategory)) return;
if (product[attrIdProductCategory] != DOM.getElementValueCurrent(ddlCategory)) return;
ddlProduct.appendChild(document.createElement('<option>', product));
});
handleChangeInputPermutations(ddlProduct);
@@ -320,14 +320,14 @@ export default class PageStoreStockItems extends BasePage {
let row = getRowFromElement(objJQuery);
let buttonCancel = document.querySelectorAll(idButtonCancel);
let buttonSave = document.querySelectorAll(idButtonSave);
let wasDirty = isElementDirty(objJQuery);
let wasDirty = updateAndCheckIsElementDirty(objJQuery);
if (objJQuery.classList.contains(flagVariations)) {
objJQuery.attr(attrValueCurrent, getVariationsCurrentValue(objJQuery));
if (objJQuery.classList.contains(flagProductVariations)) {
objJQuery.setAttribute(attrValueCurrent, getVariationsCurrentValue(objJQuery));
} else {
objJQuery.attr(attrValueCurrent, getElementCurrentValue(objJQuery));
objJQuery.setAttribute(attrValueCurrent, DOM.getElementValueCurrent(objJQuery));
}
let isDirty = isElementDirty(objJQuery);
let isDirty = updateAndCheckIsElementDirty(objJQuery);
if (wasDirty != isDirty) {
isRowDirty(row);
let permutationsDirty = getPermutations(true);
@@ -342,14 +342,14 @@ export default class PageStoreStockItems extends BasePage {
}
isRowDirty(row) {
let ddlCategory = row.querySelector('td.' + flagCategory + ' select');
let ddlCategory = row.querySelector('td.' + flagProductCategory + ' select');
let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
let variations = row.querySelector('td.' + flagVariations + ' textarea');
let variations = row.querySelector('td.' + flagProductVariations + ' textarea');
let quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
let quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
let quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
// return isElementDirty(ddlCategory) || isElementDirty(ddlProduct) || isElementDirty(variations) || isElementDirty(quantityStock) || isElementDirty(quantityMin) || isElementDirty(quantityMax);
// return updateAndCheckIsElementDirty(ddlCategory) || updateAndCheckIsElementDirty(ddlProduct) || updateAndCheckIsElementDirty(variations) || updateAndCheckIsElementDirty(quantityStock) || updateAndCheckIsElementDirty(quantityMin) || updateAndCheckIsElementDirty(quantityMax);
let isDirty = ddlCategory.classList.contains(flagDirty) || ddlProduct.classList.contains(flagDirty) || variations.classList.contains(flagDirty) ||
quantityStock.classList.contains(flagDirty) || quantityMin.classList.contains(flagDirty) || quantityMax.classList.contains(flagDirty);
if (isDirty) {
@@ -421,21 +421,21 @@ export class PageStoreProductCategories extends TableBasePage {
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
sliderDisplayOrder.setAttribute(attrValueCurrent, rowJson[flagDisplayOrder]);
DOM.setElementValuePrevious(sliderDisplayOrder, rowJson[flagDisplayOrder]);
DOM.setElementAttributeValuePrevious(sliderDisplayOrder, rowJson[flagDisplayOrder]);
DOM.setElementValueCurrent(textareaCode, rowJson[flagCode]);
DOM.setElementValuePrevious(textareaCode, rowJson[flagCode]);
DOM.setElementAttributeValuePrevious(textareaCode, rowJson[flagCode]);
DOM.setElementValueCurrent(textareaName, rowJson[flagName]);
DOM.setElementValuePrevious(textareaName, rowJson[flagName]);
DOM.setElementAttributeValuePrevious(textareaName, rowJson[flagName]);
DOM.setElementValueCurrent(textareaDescription, rowJson[flagDescription]);
DOM.setElementValuePrevious(textareaDescription, rowJson[flagDescription]);
DOM.setElementAttributeValuePrevious(textareaDescription, rowJson[flagDescription]);
tdAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
tdAccessLevel.setAttribute(flagAccessLevelRequired, rowJson[flagAccessLevelRequired]);
divAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
DOM.setElementValueCurrent(divAccessLevel, rowJson[attrIdAccessLevel]);
DOM.setElementValuePrevious(divAccessLevel, rowJson[attrIdAccessLevel]);
DOM.setElementAttributeValuePrevious(divAccessLevel, rowJson[attrIdAccessLevel]);
divAccessLevel.textContent = rowJson[flagAccessLevelRequired];
DOM.setElementValueCurrent(inputActive, rowJson[flagActive]);
DOM.setElementValuePrevious(inputActive, rowJson[flagActive]);
DOM.setElementAttributeValuePrevious(inputActive, rowJson[flagActive]);
row.setAttribute(rowJson[flagKeyPrimary], rowJson[rowJson[flagKeyPrimary]]);
let table = this.getTableMain();
@@ -452,7 +452,7 @@ export class PageStoreProductCategories extends TableBasePage {
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
let jsonCategory = {};
jsonCategory[attrIdCategory] = row.getAttribute(attrIdCategory);
jsonCategory[attrIdProductCategory] = row.getAttribute(attrIdProductCategory);
jsonCategory[flagCode] = DOM.getElementValueCurrent(textareaCode);
jsonCategory[flagName] = DOM.getElementValueCurrent(textareaName);
jsonCategory[flagDescription] = DOM.getElementValueCurrent(textareaDescription);
@@ -475,14 +475,14 @@ export class PageStoreProductCategories extends TableBasePage {
isRowDirty(row) {
if (row == null) return;
let ddlCategory = row.querySelector('td.' + flagCategory + ' select');
let ddlCategory = row.querySelector('td.' + flagProductCategory + ' select');
let ddlProduct = row.querySelector('td.' + flagProduct + ' select');
let variations = row.querySelector('td.' + flagVariations + ' textarea');
let variations = row.querySelector('td.' + flagProductVariations + ' textarea');
let quantityStock = row.querySelector('td.' + flagQuantityStock + ' input');
let quantityMin = row.querySelector('td.' + flagQuantityMin + ' input');
let quantityMax = row.querySelector('td.' + flagQuantityMax + ' input');
// return isElementDirty(ddlCategory) || isElementDirty(ddlProduct) || isElementDirty(variations) || isElementDirty(quantityStock) || isElementDirty(quantityMin) || isElementDirty(quantityMax);
// return updateAndCheckIsElementDirty(ddlCategory) || updateAndCheckIsElementDirty(ddlProduct) || updateAndCheckIsElementDirty(variations) || updateAndCheckIsElementDirty(quantityStock) || updateAndCheckIsElementDirty(quantityMin) || updateAndCheckIsElementDirty(quantityMax);
let isDirty = ddlCategory.classList.contains(flagDirty) || ddlProduct.classList.contains(flagDirty) || variations.classList.contains(flagDirty) ||
quantityStock.classList.contains(flagDirty) || quantityMin.classList.contains(flagDirty) || quantityMax.classList.contains(flagDirty);
if (isDirty) {

2
static/js/pages/user/user.js
View File

@@ -10,7 +10,7 @@ export default class PageUser extends BasePage {
initialize() {
this.sharedInitialize();
this.hookupButtonNavContact();
this.hookupButtonsNavContact();
}
leave() {

18
static/js/router.js
View File

@@ -112,18 +112,15 @@ export default class Router {
// this.routes[hashPageUserAccount] = (isPopState = false) => this.navigateToHash(hashPageUserAccount, isPopState);
this.initialize();
}
async loadPage(hashPage, isPopState = false) {
console.log("loadPage: " + hashPage);
const PageClass = await this.getClassPageFromHash(hashPage);
console.log("PageClass: ", PageClass);
loadPage(hashPage, isPopState = false) {
const PageClass = this.getClassPageFromHash(hashPage);
this.currentPage = new PageClass(this);
console.log("this.currentPage: ", this.currentPage);
this.currentPage.initialize(isPopState);
window.addEventListener('beforeunload', () => this.currentPage.leave());
}
async getClassPageFromHash(hashPage) {
getClassPageFromHash(hashPage) {
let pageJson = this.pages[hashPage];
console.log("pageJson: ", pageJson);
try {
/*
const module = await pagesContext(pageJson.pathModule);
@@ -133,7 +130,6 @@ export default class Router {
// const module = await import(pageJson.pathModule); // pageJson.page;
// const module = () => import(pageJson.pathModule);
const module = pageJson.module; // importModule;
console.log("module: ", module);
return module; // [pageJson.name];
}
catch (error) {
@@ -160,7 +156,7 @@ export default class Router {
this.loadPage(hashPageCurrent);
}
navigateToHash(hash, data = null, params = null, isPopState = false) {
this.beforeLeave();
// this.beforeLeave();
/*
if (this.routes[hash]) {
console.log("navigating to hash: " + hash);
@@ -174,13 +170,15 @@ export default class Router {
history.pushState({data: data, params: params}, '', hash);
API.goToUrl(url, data);
}
/* beforeunload listener
async beforeLeave() {
const ClassPageCurrent = await this.getClassPageFromHash(DOM.getHashPageCurrent());
const pageCurrent = new ClassPageCurrent(this);
pageCurrent.leave();
}
*/
navigateToUrl(url, data = null, appendHistory = true) {
this.beforeLeave();
// this.beforeLeave();
if (appendHistory) history.pushState(data, '', url);
url = API.parameteriseUrl(url, data);
API.goToUrl(url);