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.
This commit is contained in:
@@ -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]));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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
25
static/js/pages/store/mixin_table.js
Normal 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
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user