New website focusing on ERP services.
This commit is contained in:
@@ -43,46 +43,10 @@ export default class BasePage {
|
||||
|
||||
hookupCommonElements() {
|
||||
// hookupVideos();
|
||||
this.hookupNavigation();
|
||||
this.hookupImagesLogo();
|
||||
this.hookupLogos();
|
||||
this.hookupOverlays();
|
||||
}
|
||||
|
||||
hookupNavigation() {
|
||||
/* Can be removed: */
|
||||
let overlayHamburger = document.querySelector(idOverlayHamburger);
|
||||
let hamburgerOptions = overlayHamburger.querySelectorAll('div.' + flagRow);
|
||||
let countOptions = hamburgerOptions.length;
|
||||
// console.log('count nav options: ', countOptions);
|
||||
// overlayHamburger.css('height', (countOptions * 27) + 'px');
|
||||
/* end of can be removed */
|
||||
|
||||
this.hookupEventHandler("click", idButtonHamburger, (event, element) => {
|
||||
let overlayHamburger = document.querySelector(idOverlayHamburger);
|
||||
if (overlayHamburger.classList.contains(flagCollapsed)) {
|
||||
overlayHamburger.classList.remove(flagCollapsed);
|
||||
overlayHamburger.classList.add(flagExpanded);
|
||||
} else {
|
||||
overlayHamburger.classList.remove(flagExpanded);
|
||||
overlayHamburger.classList.add(flagCollapsed);
|
||||
}
|
||||
// overlayHamburger.classList.add(flagInitialised);
|
||||
});
|
||||
|
||||
this.hookupButtonsNavHome();
|
||||
this.hookupButtonsNavServices();
|
||||
this.hookupButtonsNavContact();
|
||||
this.hookupButtonsNavUserAccount();
|
||||
this.hookupButtonsNavUserLogout();
|
||||
this.hookupButtonsNavUserLogin();
|
||||
this.hookupButtonsNavStoreHome();
|
||||
this.hookupButtonsNavStoreManufacturingPurchaseOrders();
|
||||
this.hookupButtonsNavStoreProductPermutations();
|
||||
this.hookupButtonsNavStoreStockItems();
|
||||
this.hookupButtonsNavStoreSuppliers();
|
||||
this.hookupButtonsNavStoreSupplierPurchaseOrders();
|
||||
this.hookupButtonsNavAdminHome();
|
||||
}
|
||||
hookupEventHandler(eventType, selector, callback) {
|
||||
Events.initialiseEventHandler(selector, flagInitialised, (element) => {
|
||||
element.addEventListener(eventType, (event) => {
|
||||
@@ -91,77 +55,12 @@ export default class BasePage {
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonsNavHome() {
|
||||
this.hookupButtonsNav('.' + flagNavHome, hashPageHome);
|
||||
}
|
||||
hookupButtonsNav(buttonSelector, hashPageNav) {
|
||||
this.hookupEventHandler("click", buttonSelector, (event, button) => {
|
||||
this.router.navigateToHash(hashPageNav);
|
||||
});
|
||||
}
|
||||
hookupButtonsNavServices() {
|
||||
this.hookupButtonsNav('.' + flagNavServices, hashPageServices);
|
||||
}
|
||||
hookupButtonsNavContact() {
|
||||
this.hookupButtonsNav('.' + flagNavContact, hashPageContact);
|
||||
}
|
||||
hookupButtonsNavUserAccount() {
|
||||
this.hookupButtonsNav('.' + flagNavUserAccount, hashPageUserAccount);
|
||||
}
|
||||
hookupButtonsNavUserLogout() {
|
||||
this.hookupButtonsNav('.' + flagNavUserLogout, hashPageUserLogout);
|
||||
}
|
||||
hookupButtonsNavUserLogin() {
|
||||
this.hookupEventHandler("click", '.' + flagNavUserLogin, (event, navigator) => {
|
||||
event.stopPropagation();
|
||||
this.leave();
|
||||
API.loginUser()
|
||||
.then((response) => {
|
||||
if (response.Success) {
|
||||
// this.router.navigateToUrl(response[flagCallback], null, false); // window.app.
|
||||
window.location.href = response[flagCallback];
|
||||
} else {
|
||||
DOM.alertError("Error", response.Message);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonsNavStoreHome() {
|
||||
this.hookupButtonsNav('.' + flagNavStoreHome, hashPageStoreHome);
|
||||
}
|
||||
hookupButtonsNavStoreManufacturingPurchaseOrders() {
|
||||
this.hookupButtonsNav('.' + flagNavStoreManufacturingPurchaseOrders, hashPageStoreManufacturingPurchaseOrders);
|
||||
}
|
||||
hookupButtonsNavStoreProductCategories() {
|
||||
this.hookupButtonsNav('.' + flagNavStoreProductCategories, hashPageStoreProductCategories);
|
||||
}
|
||||
hookupButtonsNavStoreProducts() {
|
||||
this.hookupButtonsNav('.' + flagNavStoreProducts, hashPageStoreProducts);
|
||||
}
|
||||
hookupButtonsNavStoreProductPermutations() {
|
||||
this.hookupButtonsNav('.' + flagNavStoreProductPermutations, hashPageStoreProductPermutations);
|
||||
}
|
||||
hookupButtonsNavStoreProductPrices() {
|
||||
this.hookupButtonsNav('.' + flagNavStoreProductPrices, hashPageStoreProductPrices);
|
||||
}
|
||||
hookupButtonsNavStoreProductVariations() {
|
||||
this.hookupButtonsNav('.' + flagNavStoreProductVariations, hashPageStoreProductVariations);
|
||||
}
|
||||
hookupButtonsNavStoreStockItems() {
|
||||
this.hookupButtonsNav('.' + flagNavStoreStockItems, hashPageStoreStockItems);
|
||||
}
|
||||
hookupButtonsNavAdminHome() {
|
||||
this.hookupButtonsNav('.' + flagNavAdminHome, hashPageAdminHome);
|
||||
}
|
||||
hookupButtonsNavStoreSuppliers() {
|
||||
this.hookupButtonsNav('.' + flagNavStoreSuppliers, hashPageStoreSuppliers);
|
||||
}
|
||||
hookupButtonsNavStoreSupplierPurchaseOrders() {
|
||||
this.hookupButtonsNav('.' + flagNavStoreSupplierPurchaseOrders, hashPageStoreSupplierPurchaseOrders);
|
||||
}
|
||||
|
||||
hookupImagesLogo() {
|
||||
this.hookupButtonsNav("img." + flagImageLogo, hashPageHome);
|
||||
hookupLogos() {
|
||||
this.hookupEventHandler("click", "." + flagImageLogo + "," + "." + flagLogo, (event, element) => {
|
||||
if (_verbose) { console.log('clicking logo'); }
|
||||
this.router.navigateToHash(hashPageHome);
|
||||
});
|
||||
}
|
||||
|
||||
hookupOverlays() {
|
||||
@@ -178,7 +77,6 @@ export default class BasePage {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
hookupButtonSave() {
|
||||
Events.initialiseEventHandler('form.' + flagFilter + ' button.' + flagSave, flagInitialised, (button) => {
|
||||
button.addEventListener("click", (event) => {
|
||||
@@ -190,13 +88,6 @@ export default class BasePage {
|
||||
});
|
||||
}
|
||||
|
||||
hookupVideos() {
|
||||
Events.initialiseEventHandler('video', flagInitialised, (video) => {
|
||||
video.addEventListener("mouseover", videoPlay(video));
|
||||
video.addEventListener("mouseout", videoPause(video));
|
||||
});
|
||||
}
|
||||
|
||||
leave() {
|
||||
if (_verbose) { console.log('Leaving ' + this.title + ' page'); }
|
||||
if (this.constructor === BasePage) {
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
|
||||
import Events from "../../lib/events.js";
|
||||
import BasePage from "../base.js";
|
||||
|
||||
export default class PageAdminHome extends BasePage {
|
||||
static hash = hashPageAdminHome;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
this.hookupAdminStore();
|
||||
}
|
||||
|
||||
hookupAdminStore() {
|
||||
this.hookupButtonsNavStoreProductCategories();
|
||||
this.hookupButtonsNavStoreProducts();
|
||||
this.hookupButtonsNavStoreProductPermutations();
|
||||
this.hookupButtonsNavStoreProductPrices();
|
||||
this.hookupButtonsNavStoreStockItems();
|
||||
this.hookupButtonsNavStoreProductVariations();
|
||||
|
||||
this.hookupButtonsNavAdminStoreStripeProducts();
|
||||
this.hookupButtonsNavAdminStoreStripePrices();
|
||||
}
|
||||
hookupButtonsNavAdminStoreStripeProducts() {
|
||||
Events.initialiseEventHandler('.' + flagNavAdminStoreStripeProducts, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
this.router.navigateToHash(hashPageAdminStoreStripeProducts);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupButtonsNavAdminStoreStripePrices() {
|
||||
Events.initialiseEventHandler('.' + flagNavAdminStoreStripePrices, flagInitialised, function(navigator) {
|
||||
navigator.addEventListener("click", function(event) {
|
||||
this.router.navigateToHash(hashPageAdminStoreStripePrices);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
@@ -10,5 +10,12 @@ export default class PageContact extends BasePage {
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
this.hookupButtonSubmitFormContactUs();
|
||||
}
|
||||
|
||||
hookupButtonSubmitFormContactUs() {
|
||||
const button = document.querySelector('form input[type="submit"]');
|
||||
button.classList.add(flagButton);
|
||||
button.classList.add(flagButtonPrimary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
|
||||
// internal
|
||||
import BasePage from "../base.js";
|
||||
// external
|
||||
import AOS from 'aos';
|
||||
|
||||
|
||||
export default class PageHome extends BasePage {
|
||||
static hash = hashPageHome;
|
||||
@@ -11,8 +15,45 @@ export default class PageHome extends BasePage {
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
this.hookupButtonsNavContact();
|
||||
// this.initialiseAOS();
|
||||
this.initialiseAnimations();
|
||||
}
|
||||
|
||||
/* AOS */
|
||||
initialiseAOS() {
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
once: true,
|
||||
});
|
||||
}
|
||||
/* Manual animations *
|
||||
initialiseAnimations() {
|
||||
// Check if IntersectionObserver is supported
|
||||
if ('IntersectionObserver' in window) {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('active');
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '50px'
|
||||
});
|
||||
|
||||
// Observe all elements with 'reveal' class
|
||||
document.querySelectorAll('.reveal').forEach((element) => {
|
||||
observer.observe(element);
|
||||
});
|
||||
} else {
|
||||
// If IntersectionObserver is not supported, make all elements visible
|
||||
document.querySelectorAll('.reveal').forEach((element) => {
|
||||
element.style.opacity = 1;
|
||||
});
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
|
||||
import BasePage from "../base.js";
|
||||
|
||||
export default class PageServices extends BasePage {
|
||||
static hash = hashPageServices;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,198 +0,0 @@
|
||||
|
||||
import Events from "../../lib/events.js";
|
||||
import LocalStorage from "../../lib/local_storage.js";
|
||||
import BasePage from "../base.js";
|
||||
|
||||
export default class PageStoreBasket extends BasePage {
|
||||
static hash = hashPageStoreBasket;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
this.hookupStoreCardsInfo();
|
||||
this.hookupOverlaysStoreBasketInfo();
|
||||
this.hookupButtonCheckoutSession();
|
||||
}
|
||||
|
||||
|
||||
hookupStoreCardsInfo() {
|
||||
|
||||
document.querySelectorAll(idContainerInfoDelivery).addEventListener("click", function(event) {
|
||||
if (_verbose) { console.log("delivery modal display method"); }
|
||||
document.querySelectorAll(idOverlayInfoDelivery).css('display', 'block');
|
||||
});
|
||||
|
||||
document.querySelectorAll(idContainerInfoBilling).addEventListener("click", function(event) {
|
||||
if (_verbose) { console.log("billing modal display method"); }
|
||||
document.querySelectorAll(idOverlayInfoBilling).css('display', 'block');
|
||||
});
|
||||
}
|
||||
|
||||
hookupOverlaysStoreBasketInfo() {
|
||||
|
||||
let elOverlay, elForm;
|
||||
|
||||
// Delivery
|
||||
elOverlay = document.querySelectorAll(idOverlayInfoDelivery);
|
||||
elForm = elOverlay.querySelector('form');
|
||||
|
||||
hookupOverlay(elOverlay);
|
||||
Events.initialiseEventHandler(elForm, flagInitialised, function() {
|
||||
elForm.submit(function(event) {
|
||||
elForm = document.querySelectorAll(elForm);
|
||||
event.preventDefault();
|
||||
if (_verbose) { console.log("delivery submit method"); }
|
||||
|
||||
ajaxData = {};
|
||||
ajaxData[keyInfoType] = keyInfoDelivery;
|
||||
ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoDelivery);
|
||||
|
||||
ajaxJSONData('info delivery', mapHashToController(hashStoreBasketInfo), ajaxData, loadInfoAddress, false);
|
||||
// document.querySelectorAll(idOverlayInfoDelivery).css('display', 'none');
|
||||
});
|
||||
});
|
||||
|
||||
// Billing
|
||||
elOverlay = document.querySelectorAll(idOverlayInfoBilling);
|
||||
elForm = elOverlay.querySelector('form');
|
||||
|
||||
hookupOverlay(elOverlay);
|
||||
Events.initialiseEventHandler(elForm, flagInitialised, function() {
|
||||
elForm.submit(function(event) {
|
||||
event.preventDefault();
|
||||
if (_verbose) { console.log("billing submit method"); }
|
||||
|
||||
ajaxData = {};
|
||||
ajaxData[keyInfoType] = keyInfoBilling;
|
||||
ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoBilling); // formData; // form.serialize();
|
||||
|
||||
ajaxJSONData('info billing', mapHashToController(hashStoreBasketInfo), ajaxData, loadInfoAddress, false);
|
||||
// document.querySelectorAll(idOverlayInfoBilling).css('display', 'none');
|
||||
});
|
||||
});
|
||||
let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyCity, keyCounty];
|
||||
for (var k in keys) {
|
||||
elForm.querySelector('#' + keys[k]).removeAttr('required');
|
||||
}
|
||||
}
|
||||
|
||||
loadInfoAddress(response) {
|
||||
|
||||
if (_verbose) { console.log('response:'); console.log(response.data); }
|
||||
let infoType = response.data[keyInfoType];
|
||||
let infoAddress = response.data[infoType];
|
||||
LocalStorage.setLocalStorage(infoType, infoAddress);
|
||||
|
||||
// update webpage elements in background
|
||||
if (infoType == keyInfoBilling) {
|
||||
|
||||
let container = document.querySelectorAll(idContainerInfoBilling);
|
||||
if (infoAddress[keyInfoIdentical]) {
|
||||
container.querySelector('div').innerHTML = "Same as delivery address";
|
||||
} else {
|
||||
container.querySelector('div').innerHTML = "<strong>" + infoAddress[keyNameFull] + '</strong> at <strong>' + infoAddress[keyPostcode] + "</strong>";
|
||||
}
|
||||
|
||||
document.querySelectorAll(idOverlayInfoBilling).css('display', 'none');
|
||||
|
||||
document.querySelectorAll(idOverlayInfoBilling).querySelector('form').classList.add(flagSubmitted);
|
||||
} else {
|
||||
|
||||
let container = document.querySelectorAll(idContainerInfoDelivery);
|
||||
container.querySelector('div').innerHTML = "<strong>" + infoAddress[keyNameFull] + '</strong> at <strong>' + infoAddress[keyPostcode] + "</strong>";
|
||||
|
||||
document.querySelectorAll(idOverlayInfoDelivery).css('display', 'none');
|
||||
|
||||
document.querySelectorAll(idOverlayInfoDelivery).querySelector('form').classList.add(flagSubmitted);
|
||||
}
|
||||
}
|
||||
|
||||
convertFormBilling2JSON(ajaxData, idOverlayInfo) {
|
||||
|
||||
let elOverlay, elForm, elOverlayDelivery, elFormDelivery;
|
||||
|
||||
elOverlay = document.querySelectorAll(idOverlayInfo);
|
||||
elForm = elOverlay.querySelector('form');
|
||||
elOverlay = document.querySelectorAll(idOverlayInfoDelivery);
|
||||
elForm = elOverlay.querySelector('form');
|
||||
|
||||
ajaxData[flagForm] = convertForm2JSON(elForm); // formData; // form.serialize();
|
||||
let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
|
||||
if (_verbose) {
|
||||
console.log('converting billing form to json\nform ID: ' + elForm.id);
|
||||
console.log('ajaxData:');
|
||||
console.log(ajaxData);
|
||||
}
|
||||
ajaxData[flagForm][keyInfoIdentical] = getElementValueCurrent(elForm.querySelector('#' + keyInfoIdentical));
|
||||
for (var k in keys) {
|
||||
if (idOverlayInfo == idOverlayInfoBilling && ajaxData[flagForm][keyInfoIdentical]) {
|
||||
ajaxData[flagForm][keys[k]] = getElementValueCurrent(elFormDelivery.querySelector('#' + keys[k]));
|
||||
} else {
|
||||
ajaxData[flagForm][keys[k]] = getElementValueCurrent(elForm.querySelector('#' + keys[k]));
|
||||
}
|
||||
}
|
||||
if (_verbose) {
|
||||
console.log('ajaxData:');
|
||||
console.log(ajaxData);
|
||||
}
|
||||
return ajaxData;
|
||||
}
|
||||
|
||||
hookupButtonCheckoutSession() {
|
||||
let btnCheckout = document.querySelectorAll(idButtonCheckout);
|
||||
btnCheckout.classList.remove(flagInitialised);
|
||||
Events.initialiseEventHandler(idButtonCheckout, flagInitialised, function() {
|
||||
|
||||
btnCheckout.removeEventListener("click");
|
||||
btnCheckout.addEventListener("click", function(event) {
|
||||
|
||||
|
||||
//setupPageLocalStorageNext(hashPageStoreBasket);
|
||||
let basket = LocalStorage.getLocalStorage(keyBasket);
|
||||
// goToPage(hashPageStoreBasket);
|
||||
let ajaxData = {};
|
||||
ajaxData[keyBasket] = basket;
|
||||
ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoDelivery);
|
||||
ajaxData = convertFormBilling2JSON(ajaxData, idOverlayInfoBilling);
|
||||
ajaxData[key_code_currency] = getCurrencySelected();
|
||||
// ajaxData[keyIsSubscription] = false; // only checkout one-time payment items for now
|
||||
|
||||
ajaxJSONData('checkout session', mapHashToController(hashPageStoreCheckout), ajaxData, handleResponseCheckout, false);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
handleResponseCheckout(response) {
|
||||
// let tmpData = {};
|
||||
// tmpData[keyIdCheckout] = response.data[keyIdCheckout]
|
||||
// goToPage(hashPageStoreCheckoutSession, tmpData);
|
||||
window.location.href = response.data[keyUrlCheckout]
|
||||
}
|
||||
|
||||
hookupButtonFormBillingCopy() {
|
||||
|
||||
// let elButton = document.querySelectorAll(idButtonFormBillingCopy);
|
||||
|
||||
Events.initialiseEventHandler(idButtonFormBillingCopy, flagInitialised, function() {
|
||||
document.querySelectorAll(idButtonFormBillingCopy).addEventListener("click", function (event) {
|
||||
|
||||
let keys = [keyNameFull, keyPhoneNumber, keyPostcode, keyAddress1, keyAddress2, keyCity, keyCounty];
|
||||
|
||||
let elFormBilling = document.querySelectorAll(idOverlayInfoBilling).querySelector('form');
|
||||
let elFormDelivery = document.querySelectorAll(idOverlayInfoDelivery).querySelector('form');
|
||||
|
||||
for (var k in keys) {
|
||||
elFormBilling.querySelector('#' + keys[k]).value = getElementValueCurrent(elFormDelivery.querySelector('#' + keys[k]));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
|
||||
import BasePage from "../base.js";
|
||||
|
||||
export default class PageStoreHome extends BasePage {
|
||||
static hash = hashPageStoreHome;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
this.hookupFiltersStore();
|
||||
this.hookupStoreHome();
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
@@ -1,509 +0,0 @@
|
||||
|
||||
import API from "../../api.js";
|
||||
import BusinessObjects from "../../lib/business_objects/business_objects.js";
|
||||
import DOM from "../../dom.js";
|
||||
import Events from "../../lib/events.js";
|
||||
import ProductPermutation from "../../lib/business_objects/store/product_permutation.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 PageStoreManufacturingPurchaseOrders extends TableBasePage {
|
||||
static hash = hashPageStoreManufacturingPurchaseOrders;
|
||||
static attrIdRowObject = attrIdManufacturingPurchaseOrder;
|
||||
callSaveTableContent = API.saveManufacturingPurchaseOrders;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
this.storeMixin = new StoreTableMixinPage(this);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
|
||||
hookupFilters() {
|
||||
this.sharedHookupFilters();
|
||||
this.hookupFilterActive();
|
||||
}
|
||||
|
||||
loadRowTable(rowJson) {
|
||||
}
|
||||
getJsonRow(row) {
|
||||
if (row == null) return;
|
||||
let tdCurrency = row.querySelector('td.' + flagCurrency);
|
||||
let inputCostTotalLocalVatExcl = row.querySelector('td.' + flagCostTotalLocalVatExcl + ' input');
|
||||
let inputCostTotalLocalVatIncl = row.querySelector('td.' + flagCostTotalLocalVatIncl + ' input');
|
||||
let inputPriceTotalLocalVatExcl = row.querySelector('td.' + flagPriceTotalLocalVatExcl + ' input');
|
||||
let inputPriceTotalLocalVatIncl = row.querySelector('td.' + flagPriceTotalLocalVatIncl + ' input');
|
||||
let trsPurchaseOrderItem = row.querySelectorAll('tr.' + flagOrderItems);
|
||||
let buttonActive = row.querySelector(':scope > td.' + flagActive + ' button');
|
||||
|
||||
let jsonRow = {};
|
||||
jsonRow[attrIdManufacturingPurchaseOrder] = row.getAttribute(attrIdManufacturingPurchaseOrder);
|
||||
jsonRow[attrIdCurrency] = DOM.getElementAttributeValueCurrent(tdCurrency);
|
||||
jsonRow[flagCostTotalLocalVatExcl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatExcl);
|
||||
jsonRow[flagCostTotalLocalVatIncl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatIncl);
|
||||
jsonRow[flagPriceTotalLocalVatExcl] = DOM.getElementAttributeValueCurrent(inputPriceTotalLocalVatExcl);
|
||||
jsonRow[flagPriceTotalLocalVatIncl] = DOM.getElementAttributeValueCurrent(inputPriceTotalLocalVatIncl);
|
||||
let orderItems = [];
|
||||
if (trsPurchaseOrderItem != null) {
|
||||
trsPurchaseOrderItem.forEach((tr) => {
|
||||
orderItems.push(this.getJsonRowOrderItem(tr));
|
||||
});
|
||||
}
|
||||
jsonRow[flagOrderItems] = orderItems;
|
||||
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
|
||||
return jsonRow;
|
||||
}
|
||||
getJsonRowOrderItem(tr) {
|
||||
let inputDisplayOrder = tr.querySelector('td.' + flagDisplayOrder + ' input');
|
||||
let tdCategory = tr.querySelector('td.' + flagProductCategory);
|
||||
let tdProduct = tr.querySelector('td.' + flagProduct);
|
||||
let tdVariations = tr.querySelector('td.' + flagProductVariations);
|
||||
let tdUnitQuantity = tr.querySelector('td.' + flagUnitMeasurementQuantity);
|
||||
let inputQuantityUsed = tr.querySelector('td.' + flagQuantityUsed + ' input');
|
||||
let inputQuantityProduced = tr.querySelector('td.' + flagQuantityProduced + ' input');
|
||||
let tdUnitMeasurementLatencyManufacture = tr.querySelector('td.' + flagUnitMeasurementLatencyManufacture);
|
||||
let inputLatencyManufacture = tr.querySelector('td.' + flagLatencyManufacture + ' input');
|
||||
let buttonActive = tr.querySelector(':scope > td.' + flagActive + ' button');
|
||||
|
||||
let jsonRow = {};
|
||||
jsonRow[attrIdManufacturingPurchaseOrder] = tr.getAttribute(attrIdManufacturingPurchaseOrder);
|
||||
jsonRow[attrIdManufacturingPurchaseOrderProductLink] = tr.getAttribute(attrIdManufacturingPurchaseOrderProductLink);
|
||||
jsonRow[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(inputDisplayOrder);
|
||||
jsonRow[attrIdProductCategory] = DOM.getElementAttributeValueCurrent(tdCategory);
|
||||
jsonRow[attrIdProduct] = DOM.getElementAttributeValueCurrent(tdProduct);
|
||||
jsonRow[flagProductVariations] = DOM.getElementAttributeValueCurrent(tdVariations);
|
||||
jsonRow[attrIdUnitMeasurementQuantity] = DOM.getElementAttributeValueCurrent(tdUnitQuantity);
|
||||
jsonRow[flagQuantityUsed] = DOM.getElementAttributeValueCurrent(inputQuantityUsed);
|
||||
jsonRow[flagQuantityProduced] = DOM.getElementAttributeValueCurrent(inputQuantityProduced);
|
||||
jsonRow[attrIdUnitMeasurementLatencyManufacture] = DOM.getElementAttributeValueCurrent(tdUnitMeasurementLatencyManufacture);
|
||||
jsonRow[flagLatencyManufacture] = DOM.getElementAttributeValueCurrent(inputLatencyManufacture);
|
||||
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
|
||||
|
||||
return jsonRow;
|
||||
}
|
||||
initialiseRowNew(tbody, row) {
|
||||
super.initialiseRowNew(tbody, row);
|
||||
}
|
||||
|
||||
hookupTableMain() {
|
||||
super.hookupTableMain();
|
||||
this.hookupCurrencyFields();
|
||||
this.hookupCostAndPriceInputs();
|
||||
this.hookupOrderItemsFields();
|
||||
this.hookupFieldsActive();
|
||||
}
|
||||
hookupCostAndPriceInputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCostTotalLocalVatExcl + ' input');
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCostTotalLocalVatIncl + ' input');
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagPriceTotalLocalVatExcl + ' input');
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagPriceTotalLocalVatIncl + ' input');
|
||||
}
|
||||
hookupOrderItemsFields() {
|
||||
this.hookupOrderItemsPreviews();
|
||||
this.hookupFieldsOrderItemDisplayOrder();
|
||||
this.hookupFieldsOrderItemProductCategory();
|
||||
this.hookupFieldsOrderItemProduct();
|
||||
this.hookupFieldsOrderItemProductVariations();
|
||||
this.hookupFieldsOrderItemUnitQuantity();
|
||||
this.hookupFieldsOrderItemQuantityUsed();
|
||||
this.hookupFieldsOrderItemQuantityProduced();
|
||||
this.hookupFieldsOrderItemUnitMeasurementLatencyManufacture();
|
||||
this.hookupFieldsOrderItemLatencyManufacture();
|
||||
this.hookupFieldsOrderItemActive();
|
||||
this.hookupFieldsOrderItemAddDelete();
|
||||
this.hookupButtonsOrderItemAdd();
|
||||
}
|
||||
hookupOrderItemsPreviews() {
|
||||
this.hookupEventHandler("click", idTableMain + ' td.' + flagOrderItems, (event, td) => {
|
||||
if (!td.classList.contains(flagCollapsed)) return;
|
||||
this.handleClickOrderItemsPreview(event, td);
|
||||
});
|
||||
}
|
||||
handleClickOrderItemsPreview(event, element) {
|
||||
if (_verbose) { console.log("click order items preview"); }
|
||||
this.toggleColumnHeaderCollapsed(flagOrderItems, false);
|
||||
element.classList.remove(flagCollapsed);
|
||||
let row = DOM.getRowFromElement(element);
|
||||
let idManufacturingPurchaseOrder = row.getAttribute(attrIdManufacturingPurchaseOrder);
|
||||
let manufacturingPurchaseOrder = idManufacturingPurchaseOrder > 0 ? manufacturingPurchaseOrders[idManufacturingPurchaseOrder] : {
|
||||
[flagOrderItems]: [],
|
||||
};
|
||||
let tblOrderItems = document.createElement("table");
|
||||
tblOrderItems.classList.add(flagOrderItems);
|
||||
let thead = document.createElement("thead");
|
||||
let tr = document.createElement("tr");
|
||||
|
||||
let thDisplayOrder = document.createElement("th");
|
||||
thDisplayOrder.classList.add(flagDisplayOrder);
|
||||
thDisplayOrder.textContent = 'Display Order';
|
||||
let thCategory = document.createElement("th");
|
||||
thCategory.classList.add(flagProductCategory);
|
||||
thCategory.textContent = 'Category';
|
||||
let thProduct = document.createElement("th");
|
||||
thProduct.classList.add(flagProduct);
|
||||
thProduct.textContent = 'Product';
|
||||
let thVariations = document.createElement("th");
|
||||
thVariations.classList.add(flagProductVariations);
|
||||
thVariations.classList.add(flagCollapsed);
|
||||
thVariations.textContent = 'Variations';
|
||||
let thUnitQuantity = document.createElement("th");
|
||||
thUnitQuantity.classList.add(flagUnitMeasurementQuantity);
|
||||
thUnitQuantity.textContent = 'Unit Quantity';
|
||||
let thQuantityUsed = document.createElement("th");
|
||||
thQuantityUsed.classList.add(flagQuantityUsed);
|
||||
thQuantityUsed.textContent = 'Quantity Used';
|
||||
let thQuantityProduced = document.createElement("th");
|
||||
thQuantityProduced.classList.add(flagQuantityProduced);
|
||||
thQuantityProduced.textContent = 'Quantity Produced';
|
||||
/*
|
||||
let thCostTotalLocalVatExcl = document.createElement("th");
|
||||
thCostTotalLocalVatExcl.classList.add(flagCostTotalLocalVatExcl);
|
||||
thCostTotalLocalVatExcl.textContent = 'Cost Total Local VAT Excl';
|
||||
let thCostTotalLocalVatIncl = document.createElement("th");
|
||||
thCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
|
||||
thCostTotalLocalVatIncl.textContent = 'Cost Total Local VAT Incl';
|
||||
let thCostUnitLocalVatExcl = document.createElement("th");
|
||||
thCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
|
||||
thCostUnitLocalVatExcl.textContent = 'Cost Unit Local VAT Excl';
|
||||
let thCostUnitLocalVatIncl = document.createElement("th");
|
||||
thCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
|
||||
thCostUnitLocalVatIncl.textContent = 'Cost Unit Local VAT Incl';
|
||||
*/
|
||||
let thUnitMeasurementLatencyManufacture = document.createElement("th");
|
||||
thUnitMeasurementLatencyManufacture.classList.add(flagUnitMeasurementLatencyManufacture);
|
||||
thUnitMeasurementLatencyManufacture.textContent = 'Unit Measurement Latency Manufacture';
|
||||
let thLatencyManufacture = document.createElement("th");
|
||||
thLatencyManufacture.classList.add(flagLatencyManufacture);
|
||||
thLatencyManufacture.textContent = 'Latency Manufacture';
|
||||
let thActive = document.createElement("th");
|
||||
thActive.classList.add(flagActive);
|
||||
thActive.textContent = 'Active';
|
||||
let thAddDelete = document.createElement("th");
|
||||
thAddDelete.classList.add(flagAdd);
|
||||
let buttonAdd = document.createElement("button");
|
||||
buttonAdd.classList.add(flagAdd);
|
||||
buttonAdd.textContent = '+';
|
||||
thAddDelete.appendChild(buttonAdd);
|
||||
|
||||
tr.appendChild(thDisplayOrder);
|
||||
tr.appendChild(thCategory);
|
||||
tr.appendChild(thProduct);
|
||||
tr.appendChild(thVariations);
|
||||
tr.appendChild(thUnitQuantity);
|
||||
tr.appendChild(thQuantityUsed);
|
||||
tr.appendChild(thQuantityProduced);
|
||||
/*
|
||||
tr.appendChild(thCostTotalLocalVatExcl);
|
||||
tr.appendChild(thCostTotalLocalVatIncl);
|
||||
tr.appendChild(thCostUnitLocalVatExcl);
|
||||
tr.appendChild(thCostUnitLocalVatIncl);
|
||||
*/
|
||||
tr.appendChild(thUnitMeasurementLatencyManufacture);
|
||||
tr.appendChild(thLatencyManufacture);
|
||||
tr.appendChild(thActive);
|
||||
tr.appendChild(thAddDelete);
|
||||
thead.appendChild(tr);
|
||||
tblOrderItems.appendChild(thead);
|
||||
|
||||
let tbody = document.createElement("tbody");
|
||||
manufacturingPurchaseOrder[flagOrderItems].forEach((orderItem, index) => {
|
||||
this.addRowManufacturingPurchaseOrderItem(tbody, orderItem);
|
||||
});
|
||||
tblOrderItems.appendChild(tbody);
|
||||
|
||||
let cell = DOM.getCellFromElement(element);
|
||||
let cellNew = cell.cloneNode(false);
|
||||
cellNew.appendChild(tblOrderItems);
|
||||
row.replaceChild(cellNew, cell);
|
||||
if (_verbose) { console.log("tblOrderItems: ", tblOrderItems); }
|
||||
this.hookupOrderItemsFields();
|
||||
}
|
||||
addRowManufacturingPurchaseOrderItem(tbody, orderItem) { // productVariationTypeOptions, productVariationOptions, productCategoryOptions, productOptions, unitMeasurementOptions,
|
||||
if (_verbose) { console.log("addRowManufacturingPurchaseOrderItem: ", orderItem); }
|
||||
let tdDisplayOrder = document.createElement("td");
|
||||
tdDisplayOrder.classList.add(flagDisplayOrder);
|
||||
let inputDisplayOrder = document.createElement("input");
|
||||
inputDisplayOrder.classList.add(flagDisplayOrder);
|
||||
inputDisplayOrder.type = 'number';
|
||||
inputDisplayOrder.step = 1;
|
||||
DOM.setElementValuesCurrentAndPrevious(inputDisplayOrder, orderItem[flagDisplayOrder]);
|
||||
tdDisplayOrder.appendChild(inputDisplayOrder);
|
||||
|
||||
let tdCategory = document.createElement("td");
|
||||
tdCategory.classList.add(flagProductCategory);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(tdCategory, orderItem[attrIdProductCategory]);
|
||||
let divCategory = document.createElement("div");
|
||||
divCategory.classList.add(flagProductCategory);
|
||||
// DOM.setElementAttributesValuesCurrentAndPrevious(divCategory, orderItem[attrIdProductCategory]);
|
||||
let productCategory = productCategories[orderItem[attrIdProductCategory]];
|
||||
divCategory.textContent = BusinessObjects.getObjectText(productCategory);
|
||||
tdCategory.appendChild(divCategory);
|
||||
|
||||
let tdProduct = document.createElement("td");
|
||||
tdProduct.classList.add(flagProduct);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(tdProduct, orderItem[attrIdProductCategory]);
|
||||
let divProduct = document.createElement("div");
|
||||
divProduct.classList.add(flagProduct);
|
||||
// DOM.setElementAttributesValuesCurrentAndPrevious(divProduct, orderItem[attrIdProduct]);
|
||||
let product = products[orderItem[attrIdProduct]];
|
||||
divProduct.textContent = BusinessObjects.getObjectText(product);
|
||||
tdProduct.appendChild(divProduct);
|
||||
|
||||
let tdVariations = document.createElement("td");
|
||||
tdVariations.classList.add(flagProductVariations);
|
||||
tdVariations.classList.add(flagCollapsed);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(tdVariations, orderItem[attrIdProductCategory]);
|
||||
let divVariations = document.createElement("div");
|
||||
divVariations.classList.add(flagProductVariations);
|
||||
// DOM.setElementAttributesValuesCurrentAndPrevious(divVariations, orderItem[attrIdProductVariation]);
|
||||
let variationsText = ProductPermutation.getProductVariationsPreviewFromIdCsv(orderItem[flagProductVariations]);
|
||||
divVariations.textContent = variationsText;
|
||||
tdVariations.appendChild(divVariations);
|
||||
|
||||
let tdUnitQuantity = document.createElement("td");
|
||||
tdUnitQuantity.classList.add(flagUnitMeasurementQuantity);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(tdUnitQuantity, orderItem[attrIdProductCategory]);
|
||||
let divUnitQuantity = document.createElement("div");
|
||||
divUnitQuantity.classList.add(flagUnitMeasurementQuantity);
|
||||
// DOM.setElementValuesCurrentAndPrevious(divUnitQuantity, orderItem[flagUnitMeasurementQuantity]);
|
||||
let unitQuantity = unitMeasurements[orderItem[attrIdUnitMeasurementQuantity]];
|
||||
divUnitQuantity.textContent = BusinessObjects.getObjectText(unitQuantity);
|
||||
tdUnitQuantity.appendChild(divUnitQuantity);
|
||||
|
||||
let tdQuantityUsed = document.createElement("td");
|
||||
tdQuantityUsed.classList.add(flagQuantityUsed);
|
||||
let inputQuantityUsed = document.createElement("input");
|
||||
inputQuantityUsed.classList.add(flagQuantityUsed);
|
||||
inputQuantityUsed.type = 'number';
|
||||
DOM.setElementValuesCurrentAndPrevious(inputQuantityUsed, orderItem[flagQuantityUsed]);
|
||||
tdQuantityUsed.appendChild(inputQuantityUsed);
|
||||
|
||||
let tdQuantityProduced = document.createElement("td");
|
||||
tdQuantityProduced.classList.add(flagQuantityProduced);
|
||||
let inputQuantityProduced = document.createElement("input");
|
||||
inputQuantityProduced.classList.add(flagQuantityProduced);
|
||||
inputQuantityProduced.type = 'number';
|
||||
DOM.setElementValuesCurrentAndPrevious(inputQuantityProduced, orderItem[flagQuantityProduced]);
|
||||
tdQuantityProduced.appendChild(inputQuantityProduced);
|
||||
|
||||
/*
|
||||
let tdCostTotalLocalVatExcl = document.createElement("td");
|
||||
tdCostTotalLocalVatExcl.classList.add(flagCostTotalLocalVatExcl);
|
||||
let inputCostTotalLocalVatExcl = document.createElement("input");
|
||||
inputCostTotalLocalVatExcl.classList.add(flagCostTotalLocalVatExcl);
|
||||
inputCostTotalLocalVatExcl.type = 'number';
|
||||
inputCostTotalLocalVatExcl.step = 0.01;
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(inputCostTotalLocalVatExcl, orderItem[flagCostTotalLocalVatExcl]);
|
||||
tdCostTotalLocalVatExcl.appendChild(inputCostTotalLocalVatExcl);
|
||||
|
||||
let tdCostTotalLocalVatIncl = document.createElement("td");
|
||||
tdCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
|
||||
let inputCostTotalLocalVatIncl = document.createElement("input");
|
||||
inputCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
|
||||
inputCostTotalLocalVatIncl.type = 'number';
|
||||
inputCostTotalLocalVatIncl.step = 0.01;
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(inputCostTotalLocalVatIncl, orderItem[flagCostTotalLocalVatIncl]);
|
||||
tdCostTotalLocalVatIncl.appendChild(inputCostTotalLocalVatIncl);
|
||||
|
||||
let tdCostUnitLocalVatExcl = document.createElement("td");
|
||||
tdCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
|
||||
let divCostUnitLocalVatExcl = document.createElement("div");
|
||||
divCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
|
||||
DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatExcl, orderItem[flagCostUnitLocalVatExcl]);
|
||||
tdCostUnitLocalVatExcl.appendChild(divCostUnitLocalVatExcl);
|
||||
|
||||
let tdCostUnitLocalVatIncl = document.createElement("td");
|
||||
tdCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
|
||||
let divCostUnitLocalVatIncl = document.createElement("div");
|
||||
divCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
|
||||
DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatIncl, orderItem[flagCostUnitLocalVatIncl]);
|
||||
tdCostUnitLocalVatIncl.appendChild(divCostUnitLocalVatIncl);
|
||||
*/
|
||||
|
||||
let tdUnitMeasurementLatencyManufacture = document.createElement("td");
|
||||
tdUnitMeasurementLatencyManufacture.classList.add(flagUnitMeasurementLatencyManufacture);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(tdUnitMeasurementLatencyManufacture, orderItem[attrIdUnitMeasurementLatencyManufacture]);
|
||||
let divUnitMeasurementLatencyManufacture = document.createElement("div");
|
||||
divUnitMeasurementLatencyManufacture.classList.add(flagUnitMeasurementLatencyManufacture);
|
||||
// DOM.setElementValuesCurrentAndPrevious(divUnitMeasurementLatencyManufacture, orderItem[flagUnitMeasurementLatencyManufacture]);
|
||||
let unitMeasurementLatencyManufacture = unitMeasurementsTime[orderItem[attrIdUnitMeasurementLatencyManufacture]];
|
||||
divUnitMeasurementLatencyManufacture.textContent = BusinessObjects.getObjectText(unitMeasurementLatencyManufacture);
|
||||
tdUnitMeasurementLatencyManufacture.appendChild(divUnitMeasurementLatencyManufacture);
|
||||
|
||||
let tdLatencyManufacture = document.createElement("td");
|
||||
tdLatencyManufacture.classList.add(flagLatencyManufacture);
|
||||
let inputLatencyManufacture = document.createElement("input");
|
||||
inputLatencyManufacture.classList.add(flagLatencyManufacture);
|
||||
inputLatencyManufacture.type = 'number';
|
||||
inputLatencyManufacture.step = 1;
|
||||
DOM.setElementValuesCurrentAndPrevious(inputLatencyManufacture, orderItem[flagLatencyManufacture]);
|
||||
tdLatencyManufacture.appendChild(inputLatencyManufacture);
|
||||
|
||||
let tdActive = this.createTdActive(orderItem[flagActive]);
|
||||
|
||||
let tr = document.createElement("tr");
|
||||
tr.classList.add(flagOrderItems);
|
||||
tr.setAttribute(attrIdManufacturingPurchaseOrder, orderItem[attrIdManufacturingPurchaseOrder]);
|
||||
tr.setAttribute(attrIdManufacturingPurchaseOrderProductLink, orderItem[attrIdManufacturingPurchaseOrderProductLink]);
|
||||
tr.appendChild(tdDisplayOrder);
|
||||
tr.appendChild(tdCategory);
|
||||
tr.appendChild(tdProduct);
|
||||
tr.appendChild(tdVariations);
|
||||
tr.appendChild(tdUnitQuantity);
|
||||
tr.appendChild(tdQuantityUsed);
|
||||
tr.appendChild(tdQuantityProduced);
|
||||
/*
|
||||
tr.appendChild(tdCostTotalLocalVatExcl);
|
||||
tr.appendChild(tdCostTotalLocalVatIncl);
|
||||
tr.appendChild(tdCostUnitLocalVatExcl);
|
||||
tr.appendChild(tdCostUnitLocalVatIncl);
|
||||
*/
|
||||
tr.appendChild(tdUnitMeasurementLatencyManufacture);
|
||||
tr.appendChild(tdLatencyManufacture);
|
||||
tr.appendChild(tdActive);
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
hookupFieldsOrderItemDisplayOrder() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagDisplayOrder + ' input');
|
||||
}
|
||||
hookupFieldsOrderItemProductCategory() {
|
||||
this.hookupTableCellDdlPreviews(
|
||||
idTableMain + ' td.' + flagOrderItems + ' td.' + flagProductCategory
|
||||
, Utils.getListFromDict(productCategories)
|
||||
, (cellSelector) => { this.hookupProductCategoryDdls(cellSelector); }
|
||||
);
|
||||
}
|
||||
hookupFieldsOrderItemProduct() {
|
||||
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagOrderItems + ' td.' + flagProduct, Utils.getListFromDict(products));
|
||||
}
|
||||
hookupFieldsOrderItemProductVariations() {
|
||||
this.hookupEventHandler("click", idTableMain + ' td.' + flagOrderItems + ' td.' + flagProductVariations, (event, element) => this.handleClickProductPermutationVariationsPreview(event, element));
|
||||
}
|
||||
hookupFieldsOrderItemUnitQuantity() {
|
||||
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagOrderItems + ' td.' + flagUnitMeasurementQuantity, Utils.getListFromDict(unitMeasurements));
|
||||
}
|
||||
hookupFieldsOrderItemQuantityUsed() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagQuantityUsed + ' input');
|
||||
}
|
||||
hookupFieldsOrderItemQuantityProduced() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagQuantityProduced + ' input');
|
||||
}
|
||||
/*
|
||||
hookupFieldsOrderItemPriceTotalLocalVatExcl() {
|
||||
this.hookupChangeHandlerTableCells(
|
||||
idTableMain + ' td.' + flagOrderItems + ' td.' + flagPriceTotalLocalVatExcl + ' input'
|
||||
, (event, element) => {
|
||||
this.handleChangeNestedElementCellTable(event, element);
|
||||
this.updateFieldsPriceUnitLocalVatExcl(element);
|
||||
}
|
||||
);
|
||||
}
|
||||
hookupFieldsOrderItemPriceTotalLocalVatIncl() {
|
||||
this.hookupChangeHandlerTableCells(
|
||||
idTableMain + ' td.' + flagOrderItems + ' td.' + flagPriceTotalLocalVatIncl + ' input'
|
||||
, (event, element) => {
|
||||
this.handleChangeNestedElementCellTable(event, element);
|
||||
this.updateFieldsPriceUnitLocalVatIncl(element);
|
||||
}
|
||||
);
|
||||
}
|
||||
updateFieldsPriceUnitLocalVatExcl(elementChanged) {
|
||||
let row = elementChanged.closest('tr.' + flagOrderItems);
|
||||
let inputPriceTotalLocalVatExcl = row.querySelector('td.' + flagPriceTotalLocalVatExcl + ' input');
|
||||
let priceTotalLocalVatExcl = DOM.getElementValueCurrent(inputPriceTotalLocalVatExcl);
|
||||
let inputQuantityUsed = row.querySelector('td.' + flagQuantityUsed + ' input');
|
||||
let quantityUsed = DOM.getElementValueCurrent(inputQuantityUsed);
|
||||
|
||||
let divPriceUnitLocalVatExcl = row.querySelector('td.' + flagPriceUnitLocalVatExcl + ' div');
|
||||
let priceUnitLocalVatExcl = quantityUsed == 0 ? 0 : priceTotalLocalVatExcl / quantityUsed;
|
||||
DOM.setElementValuesCurrentAndPrevious(divPriceUnitLocalVatExcl, priceUnitLocalVatExcl);
|
||||
|
||||
let rowManufacturingPurchaseOrder = row.closest(idTableMain + ' > tbody > tr');
|
||||
let divPriceGrandTotalLocalVatExcl = rowManufacturingPurchaseOrder.querySelector('td.' + flagPriceTotalLocalVatExcl + ' div');
|
||||
let inputsPriceTotalLocalVatExcl = rowManufacturingPurchaseOrder.querySelectorAll('td.' + flagOrderItems + ' td.' + flagPriceTotalLocalVatExcl + ' input');
|
||||
let priceGrandTotalLocalVatExcl = Array.from(inputsPriceTotalLocalVatExcl).reduce((acc, input) => acc + Number(DOM.getElementValueCurrent(input)), 0);
|
||||
DOM.setElementValueCurrent(divPriceGrandTotalLocalVatExcl, priceGrandTotalLocalVatExcl);
|
||||
}
|
||||
updateFieldsPriceUnitLocalVatIncl(elementChanged) {
|
||||
let row = elementChanged.closest('tr.' + flagOrderItems);
|
||||
let inputPriceTotalLocalVatIncl = row.querySelector('td.' + flagPriceTotalLocalVatIncl + ' input');
|
||||
let priceTotalLocalVatIncl = DOM.getElementValueCurrent(inputPriceTotalLocalVatIncl);
|
||||
let inputQuantityUsed = row.querySelector('td.' + flagQuantityUsed + ' input');
|
||||
let quantityUsed = DOM.getElementValueCurrent(inputQuantityUsed);
|
||||
|
||||
let divPriceUnitLocalVatIncl = row.querySelector('td.' + flagPriceUnitLocalVatIncl + ' div');
|
||||
let priceUnitLocalVatIncl = quantityUsed == 0 ? 0 : priceTotalLocalVatIncl / quantityUsed;
|
||||
DOM.setElementValuesCurrentAndPrevious(divPriceUnitLocalVatIncl, priceUnitLocalVatIncl);
|
||||
|
||||
let rowManufacturingPurchaseOrder = row.closest(idTableMain + ' > tbody > tr');
|
||||
let divPriceGrandTotalLocalVatIncl = rowManufacturingPurchaseOrder.querySelector('td.' + flagPriceTotalLocalVatIncl + ' div');
|
||||
let inputsPriceTotalLocalVatIncl = rowManufacturingPurchaseOrder.querySelectorAll('td.' + flagOrderItems + ' td.' + flagPriceTotalLocalVatIncl + ' input');
|
||||
let priceGrandTotalLocalVatIncl = Array.from(inputsPriceTotalLocalVatIncl).reduce((acc, input) => acc + Number(DOM.getElementValueCurrent(input)), 0);
|
||||
DOM.setElementValueCurrent(divPriceGrandTotalLocalVatIncl, priceGrandTotalLocalVatIncl);
|
||||
}
|
||||
hookupFieldsOrderItemPriceUnitLocalVatExcl() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagPriceUnitLocalVatExcl + ' input');
|
||||
}
|
||||
hookupFieldsOrderItemPriceUnitLocalVatIncl() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagPriceUnitLocalVatIncl + ' input');
|
||||
}
|
||||
*/
|
||||
hookupFieldsOrderItemUnitMeasurementLatencyManufacture() {
|
||||
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagOrderItems + ' td.' + flagUnitMeasurementLatencyManufacture, Utils.getListFromDict(unitMeasurementsTime));
|
||||
}
|
||||
hookupFieldsOrderItemLatencyManufacture() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagLatencyManufacture + ' input');
|
||||
}
|
||||
hookupFieldsOrderItemActive() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' input.' + flagActive);
|
||||
}
|
||||
hookupFieldsOrderItemAddDelete() {
|
||||
let selectorButton = idTableMain + ' td.' + flagOrderItems + ' td.' + flagOrderItems + ' button';
|
||||
let selectorButtonDelete = selectorButton + '.' + flagDelete;
|
||||
let selectorButtonUndelete = selectorButton + '.' + flagAdd;
|
||||
this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete);
|
||||
this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
|
||||
this.hookupButtonsOrderItemAdd();
|
||||
}
|
||||
hookupButtonsOrderItemAdd() {
|
||||
this.hookupEventHandler("click", idTableMain + ' td.' + flagOrderItems + ' th button.' + flagAdd, (event, element) => {
|
||||
let row = element.closest(idTableMain + ' > tbody > tr');
|
||||
let idManufacturingPurchaseOrder = row.getAttribute(attrIdManufacturingPurchaseOrder);
|
||||
// let hasActiveOrderItem = row.querySelectorAll('td.' + flagOrderItems + ' input.' + flagActive + ':checked').length > 0;
|
||||
let countManufacturingOrderItems = row.querySelectorAll('td.' + flagOrderItems + ' td.' + flagManufacturingPurchaseOrder).length;
|
||||
let manufacturingPurchaseOrderItem = {
|
||||
[attrIdManufacturingPurchaseOrder]: idManufacturingPurchaseOrder,
|
||||
[attrIdManufacturingPurchaseOrderProductLink]: -1 - countManufacturingOrderItems,
|
||||
[attrIdProductCategory]: 0,
|
||||
[attrIdProduct]: 0,
|
||||
[flagProductVariations]: '',
|
||||
[attrIdUnitMeasurementQuantity]: 0,
|
||||
[flagQuantityUsed]: '',
|
||||
[flagQuantityProduced]: '',
|
||||
[attrIdUnitMeasurementLatencyManufacture]: 0,
|
||||
[flagLatencyManufacture]: '',
|
||||
[flagDisplayOrder]: countManufacturingOrderItems + 1,
|
||||
[flagActive]: true, // !hasActiveOrderItem,
|
||||
};
|
||||
let tbody = row.querySelector('td.' + flagOrderItems + ' table tbody');
|
||||
this.addRowManufacturingPurchaseOrderItem(tbody, manufacturingPurchaseOrderItem);
|
||||
/*
|
||||
if (!hasActiveOrderItem) {
|
||||
let tdOrderItem = row.querySelector('td.' + flagOrderItems);
|
||||
// tdOrderItem.setAttribute(attrIdManufacturingOrderItem, manufacturingPurchaseOrderItem[attrIdManufacturingOrderItem]);
|
||||
DOM.setElementAttributeValueCurrent(tdOrderItem, manufacturingPurchaseOrderItem[attrIdManufacturingOrderItem]);
|
||||
}
|
||||
*/
|
||||
this.hookupOrderItemsFields();
|
||||
});
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,452 +0,0 @@
|
||||
|
||||
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";
|
||||
|
||||
export default class StoreMixinPage {
|
||||
constructor(pageCurrent) {
|
||||
this.page = pageCurrent;
|
||||
}
|
||||
|
||||
initialize() {
|
||||
console.log('hookup store start for ', this.page.hash);
|
||||
this.hookupFilters();
|
||||
this.hookupLocalStorageStore();
|
||||
this.hookupBasket();
|
||||
this.hookupButtonsAddToBasket();
|
||||
}
|
||||
hookupFilters() {
|
||||
this.hookupFilterCurrency();
|
||||
this.hookupFilterDeliveryRegion();
|
||||
this.hookupFilterIsIncludedVAT();
|
||||
}
|
||||
hookupFilterCurrency() {
|
||||
/*
|
||||
let elForm = document.querySelectorAll(idFormCurrency);
|
||||
let elSelector = document.querySelectorAll(elForm.querySelector('select')[0]);
|
||||
Events.initialiseEventHandler(elSelector, flagInitialised, function(){
|
||||
elForm = document.querySelectorAll(idFormCurrency);
|
||||
elSelector.addEventListener("change", function(event) {
|
||||
ajaxData = {};
|
||||
ajaxData[flagForm] = convertForm2JSON(elForm);
|
||||
console.log('sending data to currency selector controller: '); console.log(ajaxData);
|
||||
ajaxJSONData('select currency', mapHashToController(hashStoreSelectCurrency), ajaxData, function() { window.location.reload() }, false);
|
||||
|
||||
let optionSelected = elSelector.options[elSelector.selectedIndex]
|
||||
let textSelected = optionSelected.getAttribute(attrDataShort)
|
||||
|
||||
});
|
||||
});
|
||||
console.log("form currency initialised")
|
||||
*/
|
||||
|
||||
let dropdownCurrency = document.querySelectorAll(idCurrency)[0];
|
||||
// dropdownCurrency.options.map(function(option) {
|
||||
let option, indexHyphen, textOption;
|
||||
for (let indexOption = 0; indexOption < dropdownCurrency.options.length; indexOption++) {
|
||||
option = document.querySelectorAll(dropdownCurrency.options[indexOption]);
|
||||
textOption = option.text();
|
||||
indexHyphen = textOption.indexOf('-');
|
||||
option.setAttribute(attrTextExpanded, textOption);
|
||||
option.setAttribute(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
|
||||
option.classList.add(flagCollapsed);
|
||||
}
|
||||
handleSelectCollapse(dropdownCurrency);
|
||||
Events.initialiseEventHandler(dropdownCurrency, flagInitialised, function() {
|
||||
dropdownCurrency = document.querySelectorAll(dropdownCurrency);
|
||||
dropdownCurrency.addEventListener("focus", function() {
|
||||
handleSelectExpand(dropdownCurrency);
|
||||
});
|
||||
dropdownCurrency.addEventListener("blur", function() {
|
||||
handleSelectCollapse(dropdownCurrency);
|
||||
});
|
||||
dropdownCurrency.addEventListener("change", function() {
|
||||
let selectedCurrency = dropdownCurrency.val();
|
||||
if (_verbose) { console.log("selected currency: ", selectedCurrency); }
|
||||
let basket = LocalStorage.getLocalStorage(keyBasket);
|
||||
basket[keyIdCurrency] = selectedCurrency;
|
||||
// LocalStorage.setLocalStorage(keyIdCurrency, selectedCurrency);
|
||||
LocalStorage.setLocalStorage(keyBasket, basket);
|
||||
let ajaxData = {};
|
||||
ajaxData[keyBasket] = basket;
|
||||
ajaxJSONData('update currency', mapHashToController(hashPageCurrent), ajaxData, loadPageBody, false);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupFilterDeliveryRegion() {
|
||||
/*
|
||||
let elForm = document.querySelectorAll(idFormDeliveryRegion);
|
||||
let elSelector = document.querySelectorAll(elForm.querySelector('select')[0]);
|
||||
Events.initialiseEventHandler(elSelector, flagInitialised, function(){
|
||||
elForm = document.querySelectorAll(idFormDeliveryRegion);
|
||||
elSelector.addEventListener("change", function(event) {
|
||||
ajaxData = {};
|
||||
ajaxData[flagForm] = convertForm2JSON(elForm);
|
||||
console.log('sending data to delivery region selector controller: '); console.log(ajaxData);
|
||||
ajaxJSONData('select delivery region', mapHashToController(hashStoreSelectDeliveryRegion), ajaxData, function() { window.location.reload() }, false);
|
||||
});
|
||||
console.log("form delivery region initialised")
|
||||
});
|
||||
*/
|
||||
|
||||
let dropdownRegion = document.querySelectorAll(idRegionDelivery)[0];
|
||||
|
||||
let option, indexHyphen, textOption;
|
||||
for (let indexOption = 0; indexOption < dropdownRegion.options.length; indexOption++) {
|
||||
option = document.querySelectorAll(dropdownRegion.options[indexOption]);
|
||||
textOption = option.text();
|
||||
indexHyphen = textOption.indexOf('-');
|
||||
option.setAttribute(attrTextExpanded, textOption);
|
||||
option.setAttribute(attrTextCollapsed, textOption.substring(0, indexHyphen - 1));
|
||||
option.classList.add(flagCollapsed);
|
||||
}
|
||||
|
||||
handleSelectCollapse(dropdownRegion);
|
||||
|
||||
Events.initialiseEventHandler(dropdownRegion, flagInitialised, function() {
|
||||
dropdownRegion = document.querySelectorAll(dropdownRegion);
|
||||
dropdownRegion.addEventListener("focus", function() {
|
||||
if (_verbose) { console.log("dropdown region focused"); }
|
||||
handleSelectExpand(dropdownRegion);
|
||||
});
|
||||
dropdownRegion.addEventListener("blur", function() {
|
||||
if (_verbose) { console.log("dropdown region blurred"); }
|
||||
handleSelectCollapse(dropdownRegion);
|
||||
});
|
||||
dropdownRegion.addEventListener("change", function() {
|
||||
handleSelectCollapse(dropdownRegion);
|
||||
let selectedRegion = dropdownRegion.val();
|
||||
if (_verbose) { console.log("selected region: ", selectedRegion); }
|
||||
let basket = LocalStorage.getLocalStorage(keyBasket);
|
||||
basket[keyIdRegionDelivery] = selectedRegion;
|
||||
// LocalStorage.setLocalStorage(keyIdRegionDelivery, selectedRegion);
|
||||
LocalStorage.setLocalStorage(keyBasket, basket);
|
||||
let ajaxData = {};
|
||||
ajaxData[keyIdRegionDelivery] = selectedRegion;
|
||||
ajaxJSONData('update region', mapHashToController(hashStoreSetRegion), ajaxData, null, false);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupFilterIsIncludedVAT() {
|
||||
let elForm = document.querySelectorAll(idFormIsIncludedVAT);
|
||||
let elSelector = document.querySelectorAll(elForm.querySelector('input[type="checkbox"]')[0]);
|
||||
Events.initialiseEventHandler(elSelector, flagInitialised, function(){
|
||||
elForm = document.querySelectorAll(idFormIsIncludedVAT);
|
||||
elSelector.addEventListener("change", function(event) {
|
||||
ajaxData = {};
|
||||
ajaxData[flagForm] = convertForm2JSON(elForm);
|
||||
if (_verbose) {
|
||||
console.log('sending data to include VAT controller: ');
|
||||
console.log(ajaxData);
|
||||
}
|
||||
ajaxJSONData('set include VAT', mapHashToController(hashStoreSetIsIncludedVAT), ajaxData, function() { window.location.reload() }, false);
|
||||
});
|
||||
if (_verbose) { console.log("form is included VAT initialised"); }
|
||||
});
|
||||
}
|
||||
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 basketLocalStorage = LocalStorage.getLocalStorage(keyBasket);
|
||||
if (!StoreMixinPage.validateBasket(basketLocalStorage)) {
|
||||
if (_verbose) { console.log('locally-stored basket not valid'); }
|
||||
basketLocalStorage = StoreMixinPage.makeNewBasket();
|
||||
}
|
||||
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);
|
||||
}
|
||||
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();
|
||||
this.hookupBasketItemPlusAndMinusButtons();
|
||||
this.hookupBasketAddInputs();
|
||||
this.hookupBasketEditInputs();
|
||||
this.hookupDeleteBasketItemButtons();
|
||||
}
|
||||
toggleShowButtonCheckout() {
|
||||
if (_verbose) { console.log("toggling checkout button"); }
|
||||
const buttonCheckout = document.querySelectorAll(idButtonCheckout);
|
||||
const labelBasketEmpty = document.querySelectorAll(idLabelBasketEmpty);
|
||||
if (userBasket['items'].length == 0) {
|
||||
buttonCheckout.style.display = "none";
|
||||
labelBasketEmpty.style.display = "";
|
||||
} else {
|
||||
buttonCheckout.style.display = "";
|
||||
labelBasketEmpty.style.display = "none";
|
||||
}
|
||||
}
|
||||
hookupButtonCheckout() {
|
||||
if (_verbose) { console.log("hooking up checkout button"); }
|
||||
const buttonCheckout = document.querySelectorAll(idButtonCheckout);
|
||||
// let lsPage = getPageLocalStorage(hashPageCurrent);
|
||||
Events.initialiseEventHandler(buttonCheckout, flagInitialised, function() {
|
||||
buttonCheckout.addEventListener("click", function() {
|
||||
/*
|
||||
//setupPageLocalStorageNext(hashPageStoreBasket);
|
||||
let basket = LocalStorage.getLocalStorage(keyBasket);
|
||||
// goToPage(hashPageStoreBasket);
|
||||
let ajaxData = {};
|
||||
ajaxData[keyBasket] = basket;
|
||||
|
||||
ajaxJSONData('checkout', mapHashToController(hashPageStoreBasket), ajaxData, null, false);
|
||||
*/
|
||||
this.router.navigateToHash(hashPageStoreBasket);
|
||||
});
|
||||
});
|
||||
}
|
||||
hookupBasketItemPlusAndMinusButtons() {
|
||||
const minVal = 1;
|
||||
const basket = document.querySelector(idFormBasket);
|
||||
// Basket Add
|
||||
// Increment
|
||||
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.getAttribute(attrFormType) + '][' + attrIdProduct + '=' + elButton.getAttribute(attrIdProduct) + ']');
|
||||
let newVal = parseInt(DOM.getElementValueCurrent(elInput));
|
||||
if (isNaN(newVal)) newVal = minVal;
|
||||
newVal += 1;
|
||||
elInput.val(newVal);
|
||||
});
|
||||
});
|
||||
});
|
||||
// Decrement
|
||||
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.getAttribute(attrIdProduct) + ']');
|
||||
let elInput= document.querySelectorAll(getFormProductSelector(typeFormBasketAdd, elButton)).querySelector('input[type="number"]');
|
||||
let newVal = parseInt(DOM.getElementValueCurrent(elInput));
|
||||
if (isNaN(newVal)) newVal = minVal;
|
||||
newVal = Math.max(minVal, newVal - 1);
|
||||
elInput.val(newVal);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Basket Edit
|
||||
// Increment
|
||||
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.getAttribute(attrIdProduct) + ']');
|
||||
let elInput = document.querySelectorAll(getFormProductSelector(typeFormBasketEdit, elButton)).querySelector('input[type="number"]');
|
||||
// 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);
|
||||
elInput.trigger("change");
|
||||
});
|
||||
});
|
||||
});
|
||||
// Decrement
|
||||
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(DOM.getElementValueCurrent(elInput));
|
||||
if (isNaN(newVal)) newVal = minVal;
|
||||
newVal = Math.max(minVal, newVal - 1);
|
||||
elInput.val(newVal);
|
||||
elInput.trigger("change");
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
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);
|
||||
});
|
||||
});
|
||||
}
|
||||
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);
|
||||
}
|
||||
});
|
||||
let deleteButton = basketEditForm.querySelector('button'); // [type="button"]
|
||||
deleteButton.addEventListener("click", (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
API.storeDeleteBasketItem(basketEditForm.getAttribute(attrIdPermutation));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
loadBasket(response) {
|
||||
userBasket = response.data[keyBasket];
|
||||
let basketForm = document.querySelectorAll(idFormBasket);
|
||||
/*
|
||||
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();
|
||||
}
|
||||
|
||||
getCurrencySelected() {
|
||||
let elementSelectorCurrency = document.querySelectorAll(idSelectorCurrency);
|
||||
let selectedCurrency = elementSelectorCurrency.val();
|
||||
if (_verbose) { console.log("selected currency: ", selectedCurrency); }
|
||||
return selectedCurrency;
|
||||
}
|
||||
|
||||
hookupStoreCardsProduct() {
|
||||
|
||||
let d; // , lsShared;
|
||||
let selectorCardProduct = '.card.subcard';
|
||||
Events.initialiseEventHandler(selectorCardProduct, flagInitialised, function(cardProduct) {
|
||||
if (_verbose) { console.log("initialising product card: ", cardProduct); }
|
||||
cardProduct.addEventListener("click", function(event) {
|
||||
// d = { keyIdProduct: product.getAttribute(attrIdProduct) }
|
||||
var elemClicked = event.target;
|
||||
if (elemClicked.id != 'submit') { // disable for submit buttons
|
||||
if (_verbose) {
|
||||
console.log("product click: " + cardProduct.getAttribute(attrIdProduct));
|
||||
console.log("permutation click: " + cardProduct.getAttribute(attrIdPermutation));
|
||||
}
|
||||
var d = {}
|
||||
d[keyIdProduct] = cardProduct.getAttribute(attrIdProduct)
|
||||
d[keyIdPermutation] = cardProduct.getAttribute(attrIdPermutation)
|
||||
// send quantity requested
|
||||
goToPage(hashPageStoreProduct, d);
|
||||
}
|
||||
});
|
||||
if (_verbose) { console.log("click method added for product ID: " + cardProduct.getAttribute(attrIdProduct) + ', permutation ID: ', cardProduct.getAttribute(attrIdPermutation)); }
|
||||
});
|
||||
}
|
||||
|
||||
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) {
|
||||
|
||||
let lsOld = getPageLocalStorage(pageHashCurrent);
|
||||
pageHashCurrent = pageHash;
|
||||
clearPageLocalStorage(pageHashCurrent);
|
||||
setupPageLocalStorage(pageHashCurrent);
|
||||
let lsNew = getPageLocalStorage(pageHashCurrent);
|
||||
lsNew[keyBasket] = (keyBasket in lsOld) ? lsOld[keyBasket] : {'items': []};
|
||||
setPageLocalStorage(pageHashCurrent, lsNew);
|
||||
|
||||
goToPage(pageHash, parameters_dict);
|
||||
}
|
||||
*/
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
|
||||
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,132 +0,0 @@
|
||||
|
||||
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;
|
||||
static attrIdRowObject = attrIdProductCategory;
|
||||
callSaveTableContent = API.saveCategories;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
this.storeMixin = new StoreTableMixinPage(this);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
|
||||
hookupFilters() {
|
||||
this.sharedHookupFilters();
|
||||
this.hookupFilterIsNotEmpty();
|
||||
this.hookupFilterActive();
|
||||
}
|
||||
hookupFilterIsNotEmpty() {
|
||||
this.hookupEventHandler("change", idFormFilters + ' .' + flagIsNotEmpty, (event, filter) => {
|
||||
PageStoreProductCategories.isDirtyFilter(filter);
|
||||
});
|
||||
}
|
||||
|
||||
loadRowTable(rowJson) {
|
||||
if (rowJson == null) return;
|
||||
if (_verbose) { console.log("applying data row: ", rowJson); }
|
||||
let row = _rowBlank.cloneNode(true);
|
||||
row.classList.remove(flagRowNew);
|
||||
row.classList.remove(flagInitialised);
|
||||
row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
|
||||
element.classList.remove(flagInitialised);
|
||||
});
|
||||
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
|
||||
let textareaCode = row.querySelector('td.' + flagCode + ' textarea');
|
||||
let textareaName = row.querySelector('td.' + flagName + ' textarea');
|
||||
let textareaDescription = row.querySelector('td.' + flagDescription + ' textarea');
|
||||
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
|
||||
let divAccessLevel = tdAccessLevel.querySelector('div.' + flagAccessLevel);
|
||||
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
|
||||
|
||||
DOM.setElementValuesCurrentAndPrevious(sliderDisplayOrder, rowJson[flagDisplayOrder]);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaCode, rowJson[flagCode]);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaName, rowJson[flagName]);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaDescription, rowJson[flagDescription]);
|
||||
tdAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
|
||||
tdAccessLevel.setAttribute(flagAccessLevelRequired, rowJson[flagAccessLevelRequired]);
|
||||
divAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
|
||||
DOM.setElementValuesCurrentAndPrevious(divAccessLevel, rowJson[attrIdAccessLevel]);
|
||||
divAccessLevel.textContent = rowJson[flagAccessLevelRequired];
|
||||
DOM.setElementValuesCurrentAndPrevious(inputActive, rowJson[flagActive]);
|
||||
row.setAttribute(rowJson[flagKeyPrimary], rowJson[rowJson[flagKeyPrimary]]);
|
||||
|
||||
let table = TableBasePage.getTableMain();
|
||||
let bodyTable = table.querySelector('tbody');
|
||||
bodyTable.appendChild(row);
|
||||
}
|
||||
getJsonRow(row) {
|
||||
if (row == null) return;
|
||||
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
|
||||
let textareaCode = row.querySelector('td.' + flagCode + ' textarea');
|
||||
let textareaName = row.querySelector('td.' + flagName + ' textarea');
|
||||
let textareaDescription = row.querySelector('td.' + flagDescription + ' textarea');
|
||||
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
|
||||
let buttonActive = row.querySelector(':scope > td.' + flagActive + ' button');
|
||||
|
||||
let jsonCategory = {};
|
||||
jsonCategory[attrIdProductCategory] = row.getAttribute(attrIdProductCategory);
|
||||
jsonCategory[flagCode] = DOM.getElementAttributeValueCurrent(textareaCode);
|
||||
jsonCategory[flagName] = DOM.getElementAttributeValueCurrent(textareaName);
|
||||
jsonCategory[flagDescription] = DOM.getElementAttributeValueCurrent(textareaDescription);
|
||||
// jsonCategory[flagAccessLevelRequired] = tdAccessLevel.getAttribute(flagAccessLevelRequired);
|
||||
jsonCategory[attrIdAccessLevel] = DOM.getElementAttributeValueCurrent(tdAccessLevel);
|
||||
jsonCategory[flagActive] = buttonActive.classList.contains(flagDelete);
|
||||
jsonCategory[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(sliderDisplayOrder);
|
||||
return jsonCategory;
|
||||
}
|
||||
initialiseRowNew(tbody, row) {
|
||||
if (row == null) return;
|
||||
this.initialiseSliderDisplayOrderRowNew(tbody, row);
|
||||
}
|
||||
|
||||
hookupTableMain() {
|
||||
super.hookupTableMain();
|
||||
this.hookupSlidersDisplayOrderTable();
|
||||
this.hookupTextareasCodeTable();
|
||||
this.hookupTextareasNameTable();
|
||||
this.hookupTextareasDescriptionTable();
|
||||
this.hookupTdsAccessLevel();
|
||||
this.hookupFieldsActive();
|
||||
}
|
||||
|
||||
/*
|
||||
isDirtyRow(row) {
|
||||
if (row == null) return false;
|
||||
console.log("Product Category isDirtyRow");
|
||||
console.log("row: ", row);
|
||||
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder);
|
||||
let inputCode = row.querySelector('td.' + flagCode + ' textarea');
|
||||
let inputName = row.querySelector('td.' + flagName + ' textarea');
|
||||
let inputDescription = row.querySelector('td.' + flagDescription + ' textarea');
|
||||
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
|
||||
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
|
||||
let isDirty = sliderDisplayOrder.classList.contains(flagDirty) || inputCode.classList.contains(flagDirty) || inputName.classList.contains(flagDirty) ||
|
||||
inputDescription.classList.contains(flagDirty) || tdAccessLevel.classList.contains(flagDirty) || inputActive.classList.contains(flagDirty);
|
||||
DOM.handleDirtyElement(row, isDirty);
|
||||
return isDirty;
|
||||
}
|
||||
*/
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
|
||||
/*
|
||||
getFiltersDefaults() {
|
||||
filters = {};
|
||||
filters.flagIsNotEmpty = true;
|
||||
filters.flagActive = true;
|
||||
return filters;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
@@ -1,361 +0,0 @@
|
||||
|
||||
import API from "../../api.js";
|
||||
import BusinessObjects from "../../lib/business_objects/business_objects.js";
|
||||
import DOM from "../../dom.js";
|
||||
import Events from "../../lib/events.js";
|
||||
import TableBasePage from "../base_table.js";
|
||||
import Utils from "../../lib/utils.js";
|
||||
import Validation from "../../lib/validation.js";
|
||||
import StoreTableMixinPage from "./mixin_table.js";
|
||||
|
||||
export default class PageStoreProductPermutations extends TableBasePage {
|
||||
static hash = hashPageStoreProductPermutations;
|
||||
static attrIdRowObject = attrIdProductPermutation;
|
||||
callSaveTableContent = API.saveProductPermutations;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
this.storeMixin = new StoreTableMixinPage(this);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
|
||||
hookupFilters() {
|
||||
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);
|
||||
}
|
||||
|
||||
loadRowTable(rowJson) {
|
||||
if (rowJson == null) return;
|
||||
if (_verbose) { console.log("applying data row: ", rowJson); }
|
||||
/*
|
||||
let tableMain = TableBasePage.getTableMain();
|
||||
let row = _rowBlank.cloneNode(true);
|
||||
row.classList.remove(flagRowNew);
|
||||
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.' + flagLatencyManufacture + ' input');
|
||||
DOM.setElementValuesCurrentAndPrevious(inputLatencyManufactureDays, rowJson[flagLatencyManufacture]);
|
||||
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);
|
||||
*/
|
||||
}
|
||||
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 inputCostLocalVatExcl = row.querySelector('td.' + flagCostUnitLocalVatExcl + ' input');
|
||||
// let inputCostLocalVatIncl = row.querySelector('td.' + flagCostUnitLocalVatIncl + ' input');
|
||||
let tdCurrencyCost = row.querySelector('td.' + flagCurrencyCost);
|
||||
let inputProfitLocalMin = row.querySelector('td.' + flagProfitLocalMin + ' input');
|
||||
let inputLatencyManufactureDays = row.querySelector('td.' + flagLatencyManufacture + ' 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 buttonActive = row.querySelector(':scope > td.' + flagActive + ' button');
|
||||
|
||||
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[flagCostUnitLocalVatExcl] = inputCostLocalVatExcl.getAttribute(attrValueCurrent);
|
||||
// jsonRow[flagCostUnitLocalVatIncl] = inputCostLocalVatIncl.getAttribute(attrValueCurrent);
|
||||
jsonRow[flagCurrencyCost] = tdCurrencyCost.getAttribute(attrValueCurrent);
|
||||
jsonRow[flagProfitLocalMin] = inputProfitLocalMin.getAttribute(attrValueCurrent);
|
||||
jsonRow[flagLatencyManufacture] = 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] = buttonActive.classList.contains(flagDelete);
|
||||
return jsonRow;
|
||||
}
|
||||
initialiseRowNew(tbody, row) {
|
||||
this.initialiseRowNewDdlsProductCategoryAndProduct(row);
|
||||
|
||||
let checkboxIsSubscription = row.querySelector('td.' + flagIsSubscription + ' input');
|
||||
let checkboxDoesExpireFasterOnceUnsealed = row.querySelector('td.' + flagDoesExpireFasterOnceUnsealed + ' input');
|
||||
this.handleChangeCheckboxDoesExpireFasterOnceUnsealed(null, checkboxDoesExpireFasterOnceUnsealed);
|
||||
this.handleChangeCheckboxIsSubscription(null, checkboxIsSubscription);
|
||||
}
|
||||
initialiseRowNewDdlsProductCategoryAndProduct(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');
|
||||
if (_verbose) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
hookupTableMain() {
|
||||
super.hookupTableMain();
|
||||
this.hookupFieldsProductCategory();
|
||||
this.hookupProductFields();
|
||||
this.hookupFieldsProductPermutationVariation();
|
||||
this.hookupDescriptionTextareas();
|
||||
this.hookupCostFields();
|
||||
this.hookupProfitFields();
|
||||
this.hookupLatencyManufactureInputs();
|
||||
this.hookupQuantityFields();
|
||||
this.hookupSubscriptionFields();
|
||||
this.hookupIdStripeProductInputs();
|
||||
this.hookupExpirationFields();
|
||||
this.hookupFieldsActive();
|
||||
}
|
||||
hookupFieldsProductCategory() {
|
||||
this.hookupTableCellDdlPreviews(
|
||||
idTableMain + ' td.' + flagProductCategory
|
||||
, Utils.getListFromDict(productCategories)
|
||||
, (cellSelector) => { this.hookupProductCategoryDdls(cellSelector); }
|
||||
);
|
||||
}
|
||||
hookupProductFields() {
|
||||
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagProduct, Utils.getListFromDict(products));
|
||||
}
|
||||
|
||||
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.' + flagCostUnitLocalVatExcl + ' input');
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCostUnitLocalVatIncl + ' 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.' + flagLatencyManufacture + ' 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() {
|
||||
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.handleChangeCheckboxIsSubscription(event, element);
|
||||
});
|
||||
}
|
||||
handleChangeCheckboxIsSubscription(event, element) {
|
||||
this.handleChangeNestedElementCellTable(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);
|
||||
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(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.handleChangeCheckboxDoesExpireFasterOnceUnsealed(event, element);
|
||||
});
|
||||
}
|
||||
handleChangeCheckboxDoesExpireFasterOnceUnsealed(event, element) {
|
||||
this.handleChangeNestedElementCellTable(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);
|
||||
divOrDdlIntervalExpirationUnsealed.classList.remove(flagCollapsed);
|
||||
let tdUnitMeasurementIntervalExpirationUnsealed = divOrDdlIntervalExpirationUnsealed.closest('td');
|
||||
tdUnitMeasurementIntervalExpirationUnsealed.dispatchEvent(new Event('click'));
|
||||
this.hook
|
||||
} else {
|
||||
inputCountIntervalExpirationUnsealed.classList.add(flagCollapsed);
|
||||
divOrDdlIntervalExpirationUnsealed.classList.add(flagCollapsed);
|
||||
}
|
||||
}
|
||||
hookupIntervalExpirationUnsealedFields(){
|
||||
this.hookupTableCellDDlPreviewsWhenNotCollapsed(idTableMain + ' td.' + flagUnitMeasurementIntervalExpirationUnsealed, Utils.getListFromDict(unitMeasurementsTime));
|
||||
}
|
||||
hookupCountIntervalExpirationUnsealedInputs(){
|
||||
this.hookupChangeHandlerTableCellsWhenNotCollapsed(idTableMain + ' td.' + flagCountUnitMeasurementIntervalExpirationUnsealed + ' input');
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,240 +0,0 @@
|
||||
|
||||
import API from "../../api.js";
|
||||
import BusinessObjects from "../../lib/business_objects/business_objects.js";
|
||||
import DOM from "../../dom.js";
|
||||
import Events from "../../lib/events.js";
|
||||
import TableBasePage from "../base_table.js";
|
||||
import Utils from "../../lib/utils.js";
|
||||
import Validation from "../../lib/validation.js";
|
||||
import StoreTableMixinPage from "./mixin_table.js";
|
||||
|
||||
export default class PageStoreProductVariations extends TableBasePage {
|
||||
static hash = hashPageStoreProductVariations;
|
||||
static attrIdRowObject = attrIdProductVariationType;
|
||||
callSaveTableContent = API.saveProductVariations;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
this.storeMixin = new StoreTableMixinPage(this);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
|
||||
hookupFilters() {
|
||||
this.sharedHookupFilters();
|
||||
this.hookupFilterActive();
|
||||
this.hookupFilterIsNotEmpty();
|
||||
}
|
||||
|
||||
loadRowTable(rowJson) {
|
||||
}
|
||||
getJsonRow(row) {
|
||||
if (row == null) return;
|
||||
let inputDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' input');
|
||||
let textareaCode = row.querySelector('td.' + flagCode + ' textarea');
|
||||
let textareaName = row.querySelector('td.' + flagName + ' textarea');
|
||||
let textareaNamePlural = row.querySelector('td.' + flagNamePlural + ' textarea');
|
||||
let tdProductVariations = row.querySelector('td.' + flagProductVariations);
|
||||
let buttonActive = row.querySelector(':scope > td.' + flagActive + ' button');
|
||||
|
||||
let jsonRow = {};
|
||||
jsonRow[attrIdProductVariationType] = row.getAttribute(attrIdProductVariationType);
|
||||
if (Validation.isEmpty(jsonRow[attrIdProductVariationType])) jsonRow[attrIdProductVariationType] = -1;
|
||||
jsonRow[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(inputDisplayOrder);
|
||||
jsonRow[flagCode] = DOM.getElementAttributeValueCurrent(textareaCode);
|
||||
jsonRow[flagName] = DOM.getElementAttributeValueCurrent(textareaName);
|
||||
jsonRow[flagNamePlural] = DOM.getElementAttributeValueCurrent(textareaNamePlural);
|
||||
|
||||
let variations = [];
|
||||
if (tdProductVariations.classList.contains(flagDirty)) {
|
||||
let trsProductVariation = tdProductVariations.querySelectorAll('tr.' + flagProductVariation + '.' + flagDirty);
|
||||
if (trsProductVariation != null) {
|
||||
trsProductVariation.forEach((tr, indexRow) => {
|
||||
variations.push(this.getJsonRowProductVariation(tr, indexRow));
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
// variations = BusinessObjects.getListObjectsFromIdDictAndCsv(productVariationTypes, DOM.getElementAttributeValueCurrent(tdProductVariations));
|
||||
}
|
||||
jsonRow[flagProductVariations] = variations;
|
||||
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
|
||||
return jsonRow;
|
||||
}
|
||||
getJsonRowProductVariation(tr, indexRow) {
|
||||
let inputDisplayOrder = tr.querySelector('td.' + flagDisplayOrder + ' input');
|
||||
let textareaCode = tr.querySelector('td.' + flagCode + ' textarea');
|
||||
let textareaName = tr.querySelector('td.' + flagName + ' textarea');
|
||||
// let checkboxActive = tr.querySelector('td.' + flagActive + ' input');
|
||||
let buttonActive = tr.querySelector(':scope > td.' + flagActive + ' button');
|
||||
|
||||
let jsonRow = {};
|
||||
jsonRow[attrIdProductVariation] = tr.getAttribute(attrIdProductVariation);
|
||||
if (Validation.isEmpty(jsonRow[attrIdProductVariation])) jsonRow[attrIdProductVariation] = -1 - indexRow;
|
||||
jsonRow[attrIdProductVariationType] = tr.getAttribute(attrIdProductVariationType);
|
||||
jsonRow[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(inputDisplayOrder);
|
||||
jsonRow[flagCode] = DOM.getElementAttributeValueCurrent(textareaCode);
|
||||
jsonRow[flagName] = DOM.getElementAttributeValueCurrent(textareaName);
|
||||
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
|
||||
|
||||
return jsonRow;
|
||||
}
|
||||
initialiseRowNew(tbody, row) {
|
||||
super.initialiseRowNew(tbody, row);
|
||||
this.initialiseSliderDisplayOrderRowNew(tbody, row);
|
||||
}
|
||||
|
||||
hookupTableMain() {
|
||||
super.hookupTableMain();
|
||||
this.hookupSlidersDisplayOrderTable();
|
||||
this.hookupTextareasCodeTable();
|
||||
this.hookupTextareasNameTable();
|
||||
this.hookupTextareasNamePluralTable();
|
||||
this.hookupFieldsProductVariation();
|
||||
this.hookupFieldsActive();
|
||||
}
|
||||
hookupTextareasNamePluralTable() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' tbody tr td.' + flagNamePlural + ' textarea');
|
||||
}
|
||||
hookupFieldsProductVariation() {
|
||||
this.hookupProductVariationsPreviews();
|
||||
this.hookupFieldsProductVariationDisplayOrder();
|
||||
this.hookupFieldsProductVariationCode();
|
||||
this.hookupFieldsProductVariationName();
|
||||
this.hookupFieldsProductVariationActive();
|
||||
}
|
||||
hookupProductVariationsPreviews() {
|
||||
this.hookupEventHandler("click", idTableMain + ' td.' + flagProductVariations + ' div', (event, element) => {
|
||||
let td = DOM.getCellFromElement(element);
|
||||
if (!td.classList.contains(flagCollapsed)) return;
|
||||
this.handleClickProductVariationsPreview(event, element);
|
||||
});
|
||||
}
|
||||
handleClickProductVariationsPreview(event, element) {
|
||||
if (_verbose) { console.log("click order items preview"); }
|
||||
let row = DOM.getRowFromElement(element);
|
||||
let idProductVariationType = row.getAttribute(attrIdProductVariationType);
|
||||
let productVariationType = productVariationTypes[idProductVariationType];
|
||||
if (productVariationType == null) productVariationType = {
|
||||
[flagProductVariations]: [],
|
||||
};
|
||||
let tblProductVariations = document.createElement("table");
|
||||
tblProductVariations.classList.add(flagProductVariations);
|
||||
let thead = document.createElement("thead");
|
||||
let tr = document.createElement("tr");
|
||||
|
||||
let thDisplayOrder = document.createElement("th");
|
||||
thDisplayOrder.classList.add(flagDisplayOrder);
|
||||
thDisplayOrder.textContent = 'Display Order';
|
||||
let thCode = document.createElement("th");
|
||||
thCode.classList.add(flagCode);
|
||||
thCode.textContent = 'Code';
|
||||
let thName = document.createElement("th");
|
||||
thName.classList.add(flagName);
|
||||
thName.textContent = 'Name';
|
||||
let thActive = document.createElement("th");
|
||||
thActive.classList.add(flagActive);
|
||||
// thActive.textContent = 'Active';
|
||||
let buttonAdd = document.createElement("button");
|
||||
buttonAdd.classList.add(flagActive);
|
||||
buttonAdd.classList.add(flagAdd);
|
||||
buttonAdd.textContent = '+';
|
||||
thActive.appendChild(buttonAdd);
|
||||
|
||||
tr.appendChild(thDisplayOrder);
|
||||
tr.appendChild(thCode);
|
||||
tr.appendChild(thName);
|
||||
tr.appendChild(thActive);
|
||||
thead.appendChild(tr);
|
||||
tblProductVariations.appendChild(thead);
|
||||
|
||||
let tbody = document.createElement("tbody");
|
||||
productVariationType[flagProductVariations].forEach((productVariation, index) => {
|
||||
this.addRowProductVariation(tbody, productVariation);
|
||||
});
|
||||
tblProductVariations.appendChild(tbody);
|
||||
|
||||
let cell = DOM.getCellFromElement(element);
|
||||
let cellNew = cell.cloneNode(false);
|
||||
cellNew.appendChild(tblProductVariations);
|
||||
cellNew.classList.remove(flagCollapsed);
|
||||
row.replaceChild(cellNew, cell);
|
||||
if (_verbose) { console.log("tblProductVariations: ", tblProductVariations); }
|
||||
this.toggleColumnHeaderCollapsed(flagProductVariations, false);
|
||||
this.hookupFieldsProductVariation();
|
||||
}
|
||||
addRowProductVariation(tbody, productVariation) {
|
||||
if (_verbose) { console.log("addRowProductVariation: ", productVariation); }
|
||||
|
||||
let tdDisplayOrder = document.createElement("td");
|
||||
tdDisplayOrder.classList.add(flagDisplayOrder);
|
||||
let inputDisplayOrder = document.createElement("input");
|
||||
inputDisplayOrder.classList.add(flagDisplayOrder);
|
||||
inputDisplayOrder.type = 'number';
|
||||
inputDisplayOrder.step = 1;
|
||||
DOM.setElementValuesCurrentAndPrevious(inputDisplayOrder, productVariation[flagDisplayOrder]);
|
||||
tdDisplayOrder.appendChild(inputDisplayOrder);
|
||||
|
||||
let tdCode = document.createElement("td");
|
||||
tdCode.classList.add(flagCode);
|
||||
let textareaCode = document.createElement("textarea");
|
||||
textareaCode.classList.add(flagCode);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaCode, productVariation[flagCode]);
|
||||
tdCode.appendChild(textareaCode);
|
||||
|
||||
let tdName = document.createElement("td");
|
||||
tdName.classList.add(flagName);
|
||||
let textareaName = document.createElement("textarea");
|
||||
textareaName.classList.add(flagName);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaName, productVariation[flagName]);
|
||||
tdName.appendChild(textareaName);
|
||||
|
||||
let tdActive = this.createTdActive(productVariation[flagActive]);
|
||||
|
||||
let tr = document.createElement("tr");
|
||||
tr.classList.add(flagProductVariation);
|
||||
tr.setAttribute(attrIdProductVariationType, productVariation[attrIdProductVariationType]);
|
||||
tr.setAttribute(attrIdProductVariation, productVariation[attrIdProductVariation]);
|
||||
tr.appendChild(tdDisplayOrder);
|
||||
tr.appendChild(tdCode);
|
||||
tr.appendChild(tdName);
|
||||
tr.appendChild(tdActive);
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
hookupFieldsProductVariationDisplayOrder() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagProductVariations + ' td.' + flagDisplayOrder + ' input');
|
||||
}
|
||||
hookupFieldsProductVariationCode() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagProductVariations + ' textarea.' + flagCode);
|
||||
}
|
||||
hookupFieldsProductVariationName() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagProductVariations + ' textarea.' + flagName);
|
||||
}
|
||||
hookupFieldsProductVariationActive() {
|
||||
this.hookupFieldsActive(flagProductVariations, (event, element) => { this.hookupButtonsProductVariationAdd(event, element); });
|
||||
}
|
||||
hookupButtonsProductVariationAdd(event, element) {
|
||||
let row = element.closest(idTableMain + ' > tbody > tr');
|
||||
let idProductVariationType = row.getAttribute(attrIdProductVariationType);
|
||||
let idProductVariation = row.getAttribute(attrIdProductVariation);
|
||||
let countProductVariations = row.querySelectorAll('td.' + flagProductVariations + ' tr').length;
|
||||
let productVariation = {
|
||||
[attrIdProductVariationType]: idProductVariationType,
|
||||
[attrIdProductVariation]: idProductVariation,
|
||||
[flagCode]: '',
|
||||
[flagName]: '',
|
||||
[flagDisplayOrder]: countProductVariations,
|
||||
[flagActive]: true,
|
||||
};
|
||||
let tbody = row.querySelector('td.' + flagProductVariations + ' table tbody');
|
||||
this.addRowProductVariation(tbody, productVariation);
|
||||
this.hookupFieldsProductVariation();
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
|
||||
import Events from "../../lib/events.js";
|
||||
import TableBasePage from "../base_table.js";
|
||||
import API from "../../api.js";
|
||||
import DOM from "../../dom.js";
|
||||
import StoreTableMixinPage from "./mixin_table.js";
|
||||
import Utils from "../../lib/utils.js";
|
||||
|
||||
export default class PageStoreProducts extends TableBasePage {
|
||||
static hash = hashPageStoreProducts;
|
||||
static attrIdRowObject = attrIdProduct;
|
||||
callSaveTableContent = API.saveProducts;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
this.storeMixin = new StoreTableMixinPage(this);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
|
||||
hookupFilters() {
|
||||
this.sharedHookupFilters();
|
||||
this.hookupFilterProductCategory();
|
||||
this.hookupFilterIsNotEmpty();
|
||||
this.hookupFilterActive();
|
||||
}
|
||||
hookupFilterProductCategory() {
|
||||
this.hookupFilter(flagProductCategory);
|
||||
}
|
||||
|
||||
loadRowTable(rowJson) {
|
||||
return;
|
||||
if (rowJson == null) return;
|
||||
let row = _rowBlank.cloneNode(true);
|
||||
row.classList.remove(flagRowNew);
|
||||
row.classList.remove(flagInitialised);
|
||||
row.querySelectorAll('.' + flagInitialised).forEach(function(element) {
|
||||
element.classList.remove(flagInitialised);
|
||||
});
|
||||
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
|
||||
let tdProductCategory = row.querySelector('td.' + flagProductCategory);
|
||||
let divProductCategory = tdProductCategory.querySelector('div.' + flagProductCategory);
|
||||
let textareaName = row.querySelector('td.' + flagName + ' textarea');
|
||||
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
|
||||
let divAccessLevel = tdAccessLevel.querySelector('div.' + flagAccessLevel);
|
||||
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
|
||||
|
||||
DOM.setElementValuesCurrentAndPrevious(sliderDisplayOrder, rowJson[flagDisplayOrder]);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaCode, rowJson[flagCode]);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaName, rowJson[flagName]);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaDescription, rowJson[flagDescription]);
|
||||
tdAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
|
||||
tdAccessLevel.setAttribute(flagAccessLevelRequired, rowJson[flagAccessLevelRequired]);
|
||||
divAccessLevel.setAttribute(attrIdAccessLevel, rowJson[attrIdAccessLevel]);
|
||||
DOM.setElementValuesCurrentAndPrevious(divAccessLevel, rowJson[attrIdAccessLevel]);
|
||||
divAccessLevel.textContent = rowJson[flagAccessLevelRequired];
|
||||
DOM.setElementValuesCurrentAndPrevious(inputActive, rowJson[flagActive]);
|
||||
row.setAttribute(rowJson[flagKeyPrimary], rowJson[rowJson[flagKeyPrimary]]);
|
||||
|
||||
let table = TableBasePage.getTableMain();
|
||||
let bodyTable = table.querySelector('tbody');
|
||||
bodyTable.appendChild(row);
|
||||
}
|
||||
getJsonRow(row) {
|
||||
if (row == null) return;
|
||||
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder + ' .' + flagSlider);
|
||||
let tdProductCategory = row.querySelector('td.' + flagProductCategory);
|
||||
let textareaName = row.querySelector('td.' + flagName + ' textarea');
|
||||
// let tdProductVariations = row.querySelector('td.' + flagProductVariations);
|
||||
let inputHasVariations = row.querySelector('td.' + flagHasVariations + ' input[type="checkbox"]');
|
||||
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
|
||||
let buttonActive = row.querySelector(':scope > td.' + flagActive + ' button');
|
||||
|
||||
let jsonProduct = {};
|
||||
jsonProduct[attrIdProduct] = row.getAttribute(attrIdProduct);
|
||||
jsonProduct[attrIdProductCategory] = DOM.getElementAttributeValueCurrent(tdProductCategory);
|
||||
jsonProduct[flagName] = DOM.getElementAttributeValueCurrent(textareaName);
|
||||
// jsonRow[flagProductVariations] = DOM.getElementAttributeValueCurrent(tdProductVariations);
|
||||
// jsonRow[flagHasVariations] = jsonRow[flagProductVariations] != '';
|
||||
jsonProduct[flagHasVariations] = DOM.getElementAttributeValueCurrent(inputHasVariations);
|
||||
// jsonProduct[flagAccessLevelRequired] = tdAccessLevel.getAttribute(flagAccessLevelRequired);
|
||||
jsonProduct[attrIdAccessLevel] = DOM.getElementAttributeValueCurrent(tdAccessLevel);
|
||||
jsonProduct[flagActive] = buttonActive.classList.contains(flagDelete);
|
||||
jsonProduct[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(sliderDisplayOrder);
|
||||
return jsonProduct;
|
||||
}
|
||||
initialiseRowNew(tbody, row) {
|
||||
if (row == null) return;
|
||||
this.initialiseSliderDisplayOrderRowNew(tbody, row);
|
||||
}
|
||||
|
||||
hookupTableMain() {
|
||||
super.hookupTableMain();
|
||||
this.hookupSlidersDisplayOrderTable();
|
||||
this.hookupTdsProductCategory();
|
||||
this.hookupTextareasNameTable();
|
||||
this.hookupInputsHasVariationsTable();
|
||||
this.hookupTdsAccessLevel();
|
||||
this.hookupFieldsActive();
|
||||
}
|
||||
hookupTdsProductCategory() {
|
||||
let cellSelector = idTableMain + ' tbody td.' + flagProductCategory;
|
||||
this.hookupTableCellDdlPreviews(cellSelector, Utils.getListFromDict(productCategories));
|
||||
}
|
||||
hookupInputsHasVariationsTable() {
|
||||
let cellSelector = idTableMain + ' tbody td.' + flagHasVariations + ' input[type="checkbox"]';
|
||||
this.hookupChangeHandlerTableCells(cellSelector);
|
||||
}
|
||||
|
||||
/*
|
||||
isDirtyRow(row) {
|
||||
if (row == null) return false;
|
||||
console.log("Product Product isDirtyRow");
|
||||
console.log("row: ", row);
|
||||
let sliderDisplayOrder = row.querySelector('td.' + flagDisplayOrder);
|
||||
let inputCode = row.querySelector('td.' + flagCode + ' textarea');
|
||||
let inputName = row.querySelector('td.' + flagName + ' textarea');
|
||||
let inputDescription = row.querySelector('td.' + flagDescription + ' textarea');
|
||||
let tdAccessLevel = row.querySelector('td.' + flagAccessLevel);
|
||||
let inputActive = row.querySelector('td.' + flagActive + ' input[type="checkbox"]');
|
||||
let isDirty = sliderDisplayOrder.classList.contains(flagDirty) || inputCode.classList.contains(flagDirty) || inputName.classList.contains(flagDirty) ||
|
||||
inputDescription.classList.contains(flagDirty) || tdAccessLevel.classList.contains(flagDirty) || inputActive.classList.contains(flagDirty);
|
||||
DOM.handleDirtyElement(row, isDirty);
|
||||
return isDirty;
|
||||
}
|
||||
*/
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
|
||||
/*
|
||||
getFiltersDefaults() {
|
||||
filters = {};
|
||||
filters.flagIsNotEmpty = true;
|
||||
filters.flagActive = true;
|
||||
return filters;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
@@ -1,355 +0,0 @@
|
||||
|
||||
import API from "../../api.js";
|
||||
import BusinessObjects from "../../lib/business_objects/business_objects.js";
|
||||
import DOM from "../../dom.js";
|
||||
import Events from "../../lib/events.js";
|
||||
import TableBasePage from "../base_table.js";
|
||||
import Utils from "../../lib/utils.js";
|
||||
import Validation from "../../lib/validation.js";
|
||||
import StoreTableMixinPage from "./mixin_table.js";
|
||||
|
||||
export default class PageStoreStockItems extends TableBasePage {
|
||||
static hash = hashPageStoreStockItems;
|
||||
static attrIdRowObject = attrIdStockItem;
|
||||
callSaveTableContent = API.saveStockItems;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
this.storeMixin = new StoreTableMixinPage(this);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
|
||||
hookupFilters() {
|
||||
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);
|
||||
PageStoreStockItems.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);
|
||||
}
|
||||
|
||||
loadRowTable(rowJson) {
|
||||
}
|
||||
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 tdCurrencyCost = row.querySelector('td.' + flagCurrencyCost);
|
||||
let inputCostLocalVatExcl = row.querySelector('td.' + flagCostUnitLocalVatExcl + ' input');
|
||||
let inputCostLocalVatIncl = row.querySelector('td.' + flagCostUnitLocalVatIncl + ' input');
|
||||
let inputDatePurchased = row.querySelector('td.' + flagDatePurchased + ' input');
|
||||
let inputDateReceived = row.querySelector('td.' + flagDateReceived + ' input');
|
||||
let tdStorageLocation = row.querySelector('td.' + flagStorageLocation);
|
||||
let inputIsSealed = row.querySelector('td.' + flagIsSealed + ' input');
|
||||
let inputDateUnsealed = row.querySelector('td.' + flagDateUnsealed + ' input');
|
||||
let inputDateExpiration = row.querySelector('td.' + flagDateExpiration + ' input');
|
||||
let inputIsConsumed = row.querySelector('td.' + flagIsConsumed + ' input');
|
||||
let inputDateConsumed = row.querySelector('td.' + flagDateConsumed + ' input');
|
||||
let buttonActive = row.querySelector(':scope > td.' + flagActive + ' button');
|
||||
|
||||
let jsonRow = {};
|
||||
jsonRow[attrIdStockItem] = row.getAttribute(attrIdStockItem);
|
||||
jsonRow[attrIdProductPermutation] = tdProductVariations.getAttribute(attrIdProductPermutation);
|
||||
jsonRow[attrIdProductCategory] = DOM.getElementAttributeValueCurrent(tdProductCategory);
|
||||
jsonRow[attrIdProduct] = DOM.getElementAttributeValueCurrent(tdProduct);
|
||||
jsonRow[flagProductVariations] = DOM.getElementAttributeValueCurrent(tdProductVariations);
|
||||
jsonRow[flagHasVariations] = jsonRow[flagProductVariations] != '';
|
||||
jsonRow[flagCurrencyCost] = DOM.getElementAttributeValueCurrent(tdCurrencyCost);
|
||||
jsonRow[flagCostUnitLocalVatExcl] = DOM.getElementAttributeValueCurrent(inputCostLocalVatExcl);
|
||||
jsonRow[flagCostUnitLocalVatIncl] = DOM.getElementAttributeValueCurrent(inputCostLocalVatIncl);
|
||||
jsonRow[flagDatePurchased] = DOM.getElementAttributeValueCurrent(inputDatePurchased);
|
||||
jsonRow[flagDateReceived] = DOM.getElementAttributeValueCurrent(inputDateReceived);
|
||||
jsonRow[attrIdStorageLocation] = DOM.getElementAttributeValueCurrent(tdStorageLocation);
|
||||
jsonRow[flagIsSealed] = DOM.getElementAttributeValueCurrent(inputIsSealed);
|
||||
jsonRow[flagDateUnsealed] = DOM.getElementAttributeValueCurrent(inputDateUnsealed);
|
||||
jsonRow[flagDateExpiration] = DOM.getElementAttributeValueCurrent(inputDateExpiration);
|
||||
jsonRow[flagIsConsumed] = DOM.getElementAttributeValueCurrent(inputIsConsumed);
|
||||
jsonRow[flagDateConsumed] = DOM.getElementAttributeValueCurrent(inputDateConsumed);
|
||||
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
|
||||
return jsonRow;
|
||||
}
|
||||
initialiseRowNew(tbody, row) {
|
||||
super.initialiseRowNew(tbody, row);
|
||||
let ddlCategoryFilter = document.querySelector(idFormFilters + ' #' + attrIdProductCategory);
|
||||
let idProductCategoryFilter = DOM.getElementValueCurrent(ddlCategoryFilter);
|
||||
let hasCategoryFilter = !(Validation.isEmpty(idProductCategoryFilter) || idProductCategoryFilter == '0');
|
||||
let ddlProductFilter = document.querySelector(idFormFilters + ' #' + attrIdProduct);
|
||||
let idProductFilter = DOM.getElementValueCurrent(ddlProductFilter);
|
||||
let hasProductFilter = !(Validation.isEmpty(idProductFilter) || idProductFilter == '0');
|
||||
if (_verbose) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
hookupTableMain() {
|
||||
super.hookupTableMain();
|
||||
this.hookupProductCategoryFields();
|
||||
this.hookupProductFields();
|
||||
this.hookupFieldsProductPermutationVariation();
|
||||
this.hookupCurrencyCostFields();
|
||||
this.hookupCostInputs();
|
||||
this.hookupOrderDateInputs();
|
||||
this.hookupStorageLocationFields();
|
||||
this.hookupSealingInputs();
|
||||
this.hookupExpirationDateInputs();
|
||||
this.hookupConsumationInputs();
|
||||
this.hookupFieldsActive();
|
||||
}
|
||||
hookupProductCategoryFields() {
|
||||
this.hookupTableCellDdlPreviews(
|
||||
idTableMain + ' td.' + flagProductCategory
|
||||
, Utils.getListFromDict(productCategories)
|
||||
, (event, element) => { this.hookupProductCategoryDdls(event, element); }
|
||||
);
|
||||
}
|
||||
hookupProductFields() {
|
||||
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagProduct, Utils.getListFromDict(products));
|
||||
}
|
||||
|
||||
/*
|
||||
handleClickProductPermutationVariationsPreview(event, element) {
|
||||
let row = DOM.getRowFromElement(element);
|
||||
let tdProduct = row.querySelector('td.' + flagProduct);
|
||||
let idProduct = DOM.getElementValueCurrent(tdProduct);
|
||||
let product = products[idProduct];
|
||||
if (!product[flagHasVariations]) return;
|
||||
super.handleClickProductPermutationVariationsPreview(event, element);
|
||||
}
|
||||
*/
|
||||
handleClickButtonProductPermutationVariationsAdd(event, element) {
|
||||
let row = DOM.getRowFromElement(element);
|
||||
let tbody = row.querySelector('tbody');
|
||||
let permutationVariation = PageStoreStockItems.createOptionUnselectedProductVariation();
|
||||
this.addProductPermutationVariationRow(tbody, permutationVariation);
|
||||
}
|
||||
|
||||
hookupCurrencyCostFields(){
|
||||
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagCurrencyCost, Utils.getListFromDict(currencies));
|
||||
}
|
||||
hookupCostInputs(){
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCostUnitLocalVatExcl + ' input');
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCostUnitLocalVatIncl + ' input');
|
||||
}
|
||||
hookupOrderDateInputs(){
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagDatePurchased + ' input');
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagDateReceived + ' input');
|
||||
}
|
||||
|
||||
hookupStorageLocationFields(){
|
||||
this.hookupEventHandler(
|
||||
"click",
|
||||
idTableMain + ' td.' + flagStorageLocation + ' div',
|
||||
(event, element) => this.handleClickStorageLocationPreview(event, element)
|
||||
);
|
||||
}
|
||||
handleClickStorageLocationPreview(event, element) {
|
||||
this.toggleColumnCollapsed(flagStorageLocation, false);
|
||||
let idPlant = element.getAttribute(attrIdPlant);
|
||||
let idStorageLocation = element.getAttribute(attrIdStorageLocation);
|
||||
let tblStorageLocation = document.createElement("table");
|
||||
tblStorageLocation.classList.add(flagStorageLocation);
|
||||
let thead = document.createElement("thead");
|
||||
let thPlant = document.createElement("th");
|
||||
thPlant.textContent = 'Plant';
|
||||
let thLocation = document.createElement("th");
|
||||
thLocation.textContent = 'Location';
|
||||
let trHead = document.createElement("tr");
|
||||
trHead.appendChild(thPlant);
|
||||
trHead.appendChild(thLocation);
|
||||
thead.appendChild(trHead);
|
||||
tblStorageLocation.appendChild(thead);
|
||||
let tbody = document.createElement("tbody");
|
||||
|
||||
let plant, optionPlantJson, optionPlant, storageLocation, optionStorageLocationJson, optionStorageLocation;
|
||||
let plantKeys = Object.keys(plants);
|
||||
let storageLocationKeys = Object.keys(storageLocations);
|
||||
|
||||
debugger;
|
||||
let plantJson = idPlant != null ? plants[idPlant] : {
|
||||
[attrIdPlant]: null,
|
||||
};
|
||||
let storageLocationJson = idStorageLocation != null ? storageLocations[idStorageLocation] : {
|
||||
[attrIdStorageLocation]: null,
|
||||
};
|
||||
|
||||
let tdPlant = document.createElement("td");
|
||||
tdPlant.classList.add(flagPlant);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(tdPlant, plantJson[attrIdPlant]);
|
||||
|
||||
let ddlPlant = document.createElement("select");
|
||||
ddlPlant.classList.add(flagPlant);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(ddlPlant, plantJson[attrIdPlant]);
|
||||
|
||||
optionPlant = DOM.createOption(null);
|
||||
if (_verbose) { console.log("optionPlant: ", optionPlant); }
|
||||
ddlPlant.appendChild(optionPlant);
|
||||
|
||||
plantKeys.forEach((plantKey) => {
|
||||
plant = plants[plantKey];
|
||||
optionPlantJson = BusinessObjects.getOptionJsonFromObjectJson(
|
||||
plant, // objectJson
|
||||
plantJson[attrIdPlant] // valueSelected
|
||||
);
|
||||
optionPlant = DOM.createOption(optionPlantJson);
|
||||
if (_verbose) { console.log("optionPlant: ", optionPlant); }
|
||||
ddlPlant.appendChild(optionPlant);
|
||||
});
|
||||
|
||||
let tdStorageLocation = document.createElement("td");
|
||||
tdStorageLocation.classList.add(flagStorageLocation);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(tdStorageLocation, storageLocationJson[attrIdStorageLocation]);
|
||||
|
||||
let ddlStorageLocation = document.createElement("select");
|
||||
ddlStorageLocation.classList.add(flagStorageLocation);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(ddlStorageLocation, storageLocationJson[attrIdStorageLocation]);
|
||||
|
||||
optionStorageLocation = DOM.createOption(null);
|
||||
if (_verbose) { console.log("optionStorageLocation: ", optionStorageLocation); }
|
||||
ddlStorageLocation.appendChild(optionStorageLocation);
|
||||
|
||||
storageLocationKeys.forEach((StorageLocationKey) => {
|
||||
storageLocation = storageLocations[StorageLocationKey];
|
||||
optionStorageLocationJson = BusinessObjects.getOptionJsonFromObjectJson(
|
||||
storageLocation, // objectJson
|
||||
storageLocationJson[attrIdStorageLocation] // valueSelected
|
||||
);
|
||||
optionStorageLocation = DOM.createOption(optionStorageLocationJson);
|
||||
if (_verbose) { console.log("optionStorageLocation: ", optionStorageLocation); }
|
||||
ddlStorageLocation.appendChild(optionStorageLocation);
|
||||
});
|
||||
|
||||
let trBody = document.createElement("tr");
|
||||
tdPlant.appendChild(ddlPlant);
|
||||
trBody.appendChild(tdPlant);
|
||||
tdStorageLocation.appendChild(ddlStorageLocation);
|
||||
trBody.appendChild(tdStorageLocation);
|
||||
tbody.appendChild(trBody);
|
||||
|
||||
tblStorageLocation.appendChild(tbody);
|
||||
let tdParent = DOM.getCellFromElement(element);
|
||||
tdParent.innerHTML = '';
|
||||
tdParent.appendChild(tblStorageLocation);
|
||||
if (_verbose) { console.log("tblStorageLocation: ", tblStorageLocation); }
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagPlant + ' select', (event, element) => { this.handleChangeStoragePlantDdl(event, element); });
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagStorageLocation + ' select', (event, element) => { this.handleChangeStorageLocationDdl(event, element); });
|
||||
}
|
||||
handleChangeStoragePlantDdl(event, ddlPlant) {
|
||||
this.handleChangeNestedElementCellTable(event, ddlPlant);
|
||||
let row = DOM.getRowFromElement(ddlPlant);
|
||||
let ddlStorageLocation = row.querySelector('td.' + flagStorageLocation + ' select');
|
||||
ddlStorageLocation.innerHTML = '';
|
||||
ddlStorageLocation.appendChild(DOM.createOption(null));
|
||||
let idPlant = DOM.getElementValueCurrent(ddlPlant);
|
||||
let storageLocations = plants[idPlant][flagStorageLocations];
|
||||
let optionJson, option;
|
||||
storageLocations.forEach((storageLocation) => {
|
||||
optionJson = BusinessObjects.getOptionJsonFromObjectJson(storageLocation);
|
||||
option = DOM.createOption(optionJson);
|
||||
ddlStorageLocation.appendChild(option);
|
||||
});
|
||||
this.handleChangeNestedElementCellTable(event, ddlStorageLocation);
|
||||
}
|
||||
handleChangeStorageLocationDdl(event, ddlStorageLocation) {
|
||||
this.handleChangeNestedElementCellTable(event, ddlStorageLocation);
|
||||
}
|
||||
|
||||
hookupSealingInputs() {
|
||||
this.hookupIsSealedFields();
|
||||
this.hookupDateUnsealedInputs();
|
||||
}
|
||||
hookupIsSealedFields(){
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagIsSealed + ' input', (event, element) => {
|
||||
this.handleChangeNestedElementCellTable(event, element);
|
||||
let isSealed = DOM.getElementValueCurrent(element);
|
||||
let row = DOM.getRowFromElement(element);
|
||||
let inputDateUnsealed = row.querySelector('td.' + flagDateUnsealed + ' input');
|
||||
if (isSealed) {
|
||||
inputDateUnsealed.classList.add(flagCollapsed);
|
||||
} else {
|
||||
inputDateUnsealed.classList.remove(flagCollapsed);
|
||||
}
|
||||
});
|
||||
}
|
||||
hookupDateUnsealedInputs(){
|
||||
this.hookupChangeHandlerTableCellsWhenNotCollapsed("change", idTableMain + ' td.' + flagDateUnsealed + ' input');
|
||||
}
|
||||
|
||||
hookupExpirationDateInputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagDateExpiration + ' input');
|
||||
}
|
||||
|
||||
hookupConsumationInputs() {
|
||||
this.hookupIsConsumedFields();
|
||||
this.hookupDateConsumedInputs();
|
||||
}
|
||||
hookupIsConsumedFields(){
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagIsConsumed + ' input', (event, element) => {
|
||||
this.handleChangeNestedElementCellTable(event, element);
|
||||
let isConsumed = DOM.getElementValueCurrent(element);
|
||||
let row = DOM.getRowFromElement(element);
|
||||
let inputDateConsumed = row.querySelector('td.' + flagDateConsumed + ' input');
|
||||
if (isConsumed) {
|
||||
inputDateConsumed.classList.remove(flagCollapsed);
|
||||
} else {
|
||||
inputDateConsumed.classList.add(flagCollapsed);
|
||||
}
|
||||
});
|
||||
}
|
||||
hookupDateConsumedInputs(){
|
||||
this.hookupChangeHandlerTableCellsWhenNotCollapsed("change", idTableMain + ' td.' + flagDateConsumed + ' input');
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,509 +0,0 @@
|
||||
|
||||
import API from "../../api.js";
|
||||
import BusinessObjects from "../../lib/business_objects/business_objects.js";
|
||||
import DOM from "../../dom.js";
|
||||
import Events from "../../lib/events.js";
|
||||
import ProductPermutation from "../../lib/business_objects/store/product_permutation.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 PageStoreSupplierPurchaseOrders extends TableBasePage {
|
||||
static hash = hashPageStoreSupplierPurchaseOrders;
|
||||
static attrIdRowObject = attrIdSupplierPurchaseOrder;
|
||||
callSaveTableContent = API.saveSupplierPurchaseOrders;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
this.storeMixin = new StoreTableMixinPage(this);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
|
||||
hookupFilters() {
|
||||
this.sharedHookupFilters();
|
||||
this.hookupFilterActive();
|
||||
}
|
||||
|
||||
loadRowTable(rowJson) {
|
||||
}
|
||||
getJsonRow(row) {
|
||||
if (row == null) return;
|
||||
let tdSupplier = row.querySelector('td.' + flagSupplier);
|
||||
let tdCurrency = row.querySelector('td.' + flagCurrency);
|
||||
let inputCostTotalLocalVatExcl = row.querySelector('td.' + flagCostTotalLocalVatExcl + ' input');
|
||||
let inputCostTotalLocalVatIncl = row.querySelector('td.' + flagCostTotalLocalVatIncl + ' input');
|
||||
let trsPurchaseOrderItem = row.querySelectorAll('tr.' + flagOrderItems);
|
||||
let buttonActive = tr.querySelector(':scope > td.' + flagActive + ' button');
|
||||
|
||||
let jsonRow = {};
|
||||
jsonRow[attrIdSupplierPurchaseOrder] = row.getAttribute(attrIdSupplierPurchaseOrder);
|
||||
jsonRow[attrIdSupplier] = DOM.getElementAttributeValueCurrent(tdSupplier);
|
||||
jsonRow[attrIdCurrency] = DOM.getElementAttributeValueCurrent(tdCurrency);
|
||||
jsonRow[flagCostTotalLocalVatExcl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatExcl);
|
||||
jsonRow[flagCostTotalLocalVatIncl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatIncl);
|
||||
// jsonRow[flagOrderItems] = DOM.getElementAttributeValueCurrent(tdItems);
|
||||
let orderItems = [];
|
||||
if (trsPurchaseOrderItem != null) {
|
||||
trsPurchaseOrderItem.forEach((tr) => {
|
||||
orderItems.push(this.getJsonRowOrderItem(tr));
|
||||
});
|
||||
}
|
||||
jsonRow[flagOrderItems] = orderItems;
|
||||
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
|
||||
return jsonRow;
|
||||
}
|
||||
getJsonRowOrderItem(tr) {
|
||||
let inputDisplayOrder = tr.querySelector('td.' + flagDisplayOrder + ' input');
|
||||
let tdCategory = tr.querySelector('td.' + flagProductCategory);
|
||||
let tdProduct = tr.querySelector('td.' + flagProduct);
|
||||
let tdVariations = tr.querySelector('td.' + flagProductVariations);
|
||||
let tdUnitQuantity = tr.querySelector('td.' + flagUnitMeasurementQuantity);
|
||||
let inputQuantityOrdered = tr.querySelector('td.' + flagQuantityOrdered + ' input');
|
||||
let inputQuantityReceived = tr.querySelector('td.' + flagQuantityReceived + ' input');
|
||||
let inputCostTotalLocalVatExcl = tr.querySelector('td.' + flagCostTotalLocalVatExcl + ' input');
|
||||
let inputCostTotalLocalVatIncl = tr.querySelector('td.' + flagCostTotalLocalVatIncl + ' input');
|
||||
let inputLatencyDeliveryDays = tr.querySelector('td.' + flagLatencyDeliveryDays + ' input');
|
||||
let buttonActive = tr.querySelector(':scope > td.' + flagActive + ' button');
|
||||
|
||||
let jsonRow = {};
|
||||
jsonRow[attrIdSupplierPurchaseOrder] = tr.getAttribute(attrIdSupplierPurchaseOrder);
|
||||
jsonRow[attrIdSupplierPurchaseOrderProductLink] = tr.getAttribute(attrIdSupplierPurchaseOrderProductLink);
|
||||
jsonRow[flagDisplayOrder] = DOM.getElementAttributeValueCurrent(inputDisplayOrder);
|
||||
jsonRow[attrIdProductCategory] = DOM.getElementAttributeValueCurrent(tdCategory);
|
||||
jsonRow[attrIdProduct] = DOM.getElementAttributeValueCurrent(tdProduct);
|
||||
jsonRow[flagProductVariations] = DOM.getElementAttributeValueCurrent(tdVariations);
|
||||
jsonRow[attrIdUnitMeasurementQuantity] = DOM.getElementAttributeValueCurrent(tdUnitQuantity);
|
||||
jsonRow[flagQuantityOrdered] = DOM.getElementAttributeValueCurrent(inputQuantityOrdered);
|
||||
jsonRow[flagQuantityReceived] = DOM.getElementAttributeValueCurrent(inputQuantityReceived);
|
||||
jsonRow[flagCostTotalLocalVatExcl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatExcl);
|
||||
jsonRow[flagCostTotalLocalVatIncl] = DOM.getElementAttributeValueCurrent(inputCostTotalLocalVatIncl);
|
||||
jsonRow[flagLatencyDeliveryDays] = DOM.getElementAttributeValueCurrent(inputLatencyDeliveryDays);
|
||||
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
|
||||
|
||||
return jsonRow;
|
||||
}
|
||||
initialiseRowNew(tbody, row) {
|
||||
super.initialiseRowNew(tbody, row);
|
||||
}
|
||||
|
||||
hookupTableMain() {
|
||||
super.hookupTableMain();
|
||||
this.hookupSupplierFields();
|
||||
this.hookupCurrencyFields();
|
||||
this.hookupCostInputs();
|
||||
this.hookupOrderItemsFields();
|
||||
this.hookupFieldsActive();
|
||||
}
|
||||
hookupSupplierFields() {
|
||||
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagSupplier, Utils.getListFromDict(suppliers));
|
||||
}
|
||||
hookupCostInputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCostTotalLocalVatExcl + ' input');
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagCostTotalLocalVatIncl + ' input');
|
||||
}
|
||||
hookupOrderItemsFields() {
|
||||
this.hookupOrderItemsPreviews();
|
||||
this.hookupFieldsOrderItemDisplayOrder();
|
||||
this.hookupFieldsOrderItemProductCategory();
|
||||
this.hookupFieldsOrderItemProduct();
|
||||
// this.hookupFieldsOrderItemProductVariations();
|
||||
this.hookupFieldsProductPermutationVariation();
|
||||
this.hookupFieldsOrderItemUnitQuantity();
|
||||
this.hookupFieldsOrderItemQuantityOrdered();
|
||||
this.hookupFieldsOrderItemQuantityReceived();
|
||||
this.hookupFieldsOrderItemCostTotalLocalVatExcl();
|
||||
this.hookupFieldsOrderItemCostTotalLocalVatIncl();
|
||||
this.hookupFieldsOrderItemLatencyDeliveryDays();
|
||||
this.hookupFieldsOrderItemActive();
|
||||
this.hookupFieldsOrderItemAddDelete();
|
||||
}
|
||||
hookupOrderItemsPreviews() {
|
||||
this.hookupEventHandler("click", idTableMain + ' > tbody > tr > td.' + flagOrderItems + ' > div', (event, div) => {
|
||||
let td = DOM.getCellFromElement(div);
|
||||
if (!td.classList.contains(flagCollapsed)) return;
|
||||
this.handleClickOrderItemsPreview(event, div);
|
||||
});
|
||||
}
|
||||
handleClickOrderItemsPreview(event, element) {
|
||||
if (_verbose) { console.log("click order items preview"); }
|
||||
this.toggleColumnHeaderCollapsed(flagOrderItems, false);
|
||||
/*
|
||||
let td = DOM.getCellFromElement(element);
|
||||
td.classList.remove(flagCollapsed);
|
||||
*/
|
||||
|
||||
let row = DOM.getRowFromElement(element);
|
||||
let idSupplierPurchaseOrder = row.getAttribute(attrIdSupplierPurchaseOrder);
|
||||
// if (idSupplierPurchaseOrder == null || idSupplierPurchaseOrder < 1) return;
|
||||
let supplierPurchaseOrder = supplierPurchaseOrders[idSupplierPurchaseOrder];
|
||||
if (supplierPurchaseOrder == null) supplierPurchaseOrder = {
|
||||
[flagOrderItems]: [],
|
||||
};
|
||||
let tblOrderItems = document.createElement("table");
|
||||
tblOrderItems.classList.add(flagOrderItems);
|
||||
let thead = document.createElement("thead");
|
||||
let tr = document.createElement("tr");
|
||||
|
||||
let thDisplayOrder = document.createElement("th");
|
||||
thDisplayOrder.classList.add(flagDisplayOrder);
|
||||
thDisplayOrder.textContent = 'Display Order';
|
||||
let thCategory = document.createElement("th");
|
||||
thCategory.classList.add(flagProductCategory);
|
||||
thCategory.textContent = 'Category';
|
||||
let thProduct = document.createElement("th");
|
||||
thProduct.classList.add(flagProduct);
|
||||
thProduct.textContent = 'Product';
|
||||
let thVariations = document.createElement("th");
|
||||
thVariations.classList.add(flagProductVariations);
|
||||
thVariations.classList.add(flagCollapsed);
|
||||
thVariations.textContent = 'Variations';
|
||||
let thUnitQuantity = document.createElement("th");
|
||||
thUnitQuantity.classList.add(flagUnitMeasurementQuantity);
|
||||
thUnitQuantity.textContent = 'Unit Quantity';
|
||||
let thQuantityOrdered = document.createElement("th");
|
||||
thQuantityOrdered.classList.add(flagQuantityOrdered);
|
||||
thQuantityOrdered.textContent = 'Quantity Ordered';
|
||||
let thQuantityReceived = document.createElement("th");
|
||||
thQuantityReceived.classList.add(flagQuantityReceived);
|
||||
thQuantityReceived.textContent = 'Quantity Received';
|
||||
let thCostTotalLocalVatExcl = document.createElement("th");
|
||||
thCostTotalLocalVatExcl.classList.add(flagCostTotalLocalVatExcl);
|
||||
thCostTotalLocalVatExcl.textContent = 'Cost Total Local VAT Excl';
|
||||
let thCostTotalLocalVatIncl = document.createElement("th");
|
||||
thCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
|
||||
thCostTotalLocalVatIncl.textContent = 'Cost Total Local VAT Incl';
|
||||
let thCostUnitLocalVatExcl = document.createElement("th");
|
||||
thCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
|
||||
thCostUnitLocalVatExcl.textContent = 'Cost Unit Local VAT Excl';
|
||||
let thCostUnitLocalVatIncl = document.createElement("th");
|
||||
thCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
|
||||
thCostUnitLocalVatIncl.textContent = 'Cost Unit Local VAT Incl';
|
||||
let thLatencyDeliveryDays = document.createElement("th");
|
||||
thLatencyDeliveryDays.classList.add(flagLatencyDeliveryDays);
|
||||
thLatencyDeliveryDays.textContent = 'Latency Delivery (Days)';
|
||||
let thActive = document.createElement("th");
|
||||
thActive.classList.add(flagActive);
|
||||
thActive.textContent = 'Active';
|
||||
let thAddDelete = document.createElement("th");
|
||||
thAddDelete.classList.add(flagAdd);
|
||||
let buttonAdd = document.createElement("button");
|
||||
buttonAdd.classList.add(flagAdd);
|
||||
buttonAdd.textContent = '+';
|
||||
thAddDelete.appendChild(buttonAdd);
|
||||
|
||||
tr.appendChild(thDisplayOrder);
|
||||
tr.appendChild(thCategory);
|
||||
tr.appendChild(thProduct);
|
||||
tr.appendChild(thVariations);
|
||||
tr.appendChild(thUnitQuantity);
|
||||
tr.appendChild(thQuantityOrdered);
|
||||
tr.appendChild(thQuantityReceived);
|
||||
tr.appendChild(thCostTotalLocalVatExcl);
|
||||
tr.appendChild(thCostTotalLocalVatIncl);
|
||||
tr.appendChild(thCostUnitLocalVatExcl);
|
||||
tr.appendChild(thCostUnitLocalVatIncl);
|
||||
tr.appendChild(thLatencyDeliveryDays);
|
||||
tr.appendChild(thActive);
|
||||
tr.appendChild(thAddDelete);
|
||||
thead.appendChild(tr);
|
||||
tblOrderItems.appendChild(thead);
|
||||
|
||||
let tbody = document.createElement("tbody");
|
||||
supplierPurchaseOrder[flagOrderItems].forEach((orderItem, index) => {
|
||||
this.addRowSupplierPurchaseOrderItem(tbody, orderItem);
|
||||
});
|
||||
tblOrderItems.appendChild(tbody);
|
||||
|
||||
let cell = DOM.getCellFromElement(element);
|
||||
let cellNew = cell.cloneNode(false);
|
||||
cellNew.appendChild(tblOrderItems);
|
||||
cellNew.classList.remove(flagCollapsed);
|
||||
row.replaceChild(cellNew, cell);
|
||||
if (_verbose) { console.log("tblOrderItems: ", tblOrderItems); }
|
||||
this.hookupOrderItemsFields();
|
||||
}
|
||||
addRowSupplierPurchaseOrderItem(tbody, orderItem) { // productVariationTypeOptions, productVariationOptions, productCategoryOptions, productOptions, unitMeasurementOptions,
|
||||
if (_verbose) { console.log("addRowSupplierPurchaseOrderItem: ", orderItem); }
|
||||
|
||||
let tdDisplayOrder = document.createElement("td");
|
||||
tdDisplayOrder.classList.add(flagDisplayOrder);
|
||||
let inputDisplayOrder = document.createElement("input");
|
||||
inputDisplayOrder.classList.add(flagDisplayOrder);
|
||||
inputDisplayOrder.type = 'number';
|
||||
inputDisplayOrder.step = 1;
|
||||
DOM.setElementValuesCurrentAndPrevious(inputDisplayOrder, orderItem[flagDisplayOrder]);
|
||||
tdDisplayOrder.appendChild(inputDisplayOrder);
|
||||
|
||||
let tdCategory = document.createElement("td");
|
||||
tdCategory.classList.add(flagProductCategory);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(tdCategory, orderItem[attrIdProductCategory]);
|
||||
let divCategory = document.createElement("div");
|
||||
divCategory.classList.add(flagProductCategory);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(divCategory, orderItem[attrIdProductCategory]);
|
||||
// divCategory.textContent = orderItem[flagProductCategory];
|
||||
let productCategory = productCategories[orderItem[attrIdProductCategory]];
|
||||
divCategory.textContent = BusinessObjects.getObjectText(productCategory);
|
||||
tdCategory.appendChild(divCategory);
|
||||
|
||||
let tdProduct = document.createElement("td");
|
||||
tdProduct.classList.add(flagProduct);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(tdProduct, orderItem[attrIdProduct]);
|
||||
let divProduct = document.createElement("div");
|
||||
divProduct.classList.add(flagProduct);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(divProduct, orderItem[attrIdProduct]);
|
||||
// divProduct.textContent = orderItem[flagProduct];
|
||||
let product = products[orderItem[attrIdProduct]];
|
||||
divProduct.textContent = BusinessObjects.getObjectText(product);
|
||||
tdProduct.appendChild(divProduct);
|
||||
|
||||
let tdVariations = document.createElement("td");
|
||||
tdVariations.classList.add(flagProductVariations);
|
||||
tdVariations.classList.add(flagCollapsed);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(tdVariations, orderItem[flagProductVariations]);
|
||||
let divVariations = document.createElement("div");
|
||||
divVariations.classList.add(flagProductVariations);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(divVariations, orderItem[flagProductVariations]);
|
||||
// divVariations.textContent = orderItem[flagProductVariations];
|
||||
let variationsText = ProductPermutation.getProductVariationsPreviewFromIdCsv(orderItem[flagProductVariations]);
|
||||
divVariations.textContent = variationsText;
|
||||
tdVariations.appendChild(divVariations);
|
||||
|
||||
let tdUnitQuantity = document.createElement("td");
|
||||
tdUnitQuantity.classList.add(flagUnitMeasurementQuantity);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(tdUnitQuantity, orderItem[attrIdUnitMeasurementQuantity]);
|
||||
let divUnitQuantity = document.createElement("div");
|
||||
divUnitQuantity.classList.add(flagUnitMeasurementQuantity);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(divUnitQuantity, orderItem[attrIdUnitMeasurementQuantity]);
|
||||
let unitQuantity = unitMeasurements[orderItem[attrIdUnitMeasurementQuantity]];
|
||||
divUnitQuantity.textContent = BusinessObjects.getObjectText(unitQuantity);
|
||||
tdUnitQuantity.appendChild(divUnitQuantity);
|
||||
|
||||
let tdQuantityOrdered = document.createElement("td");
|
||||
tdQuantityOrdered.classList.add(flagQuantityOrdered);
|
||||
let inputQuantityOrdered = document.createElement("input");
|
||||
inputQuantityOrdered.classList.add(flagQuantityOrdered);
|
||||
inputQuantityOrdered.type = 'number';
|
||||
DOM.setElementValuesCurrentAndPrevious(inputQuantityOrdered, orderItem[flagQuantityOrdered]);
|
||||
tdQuantityOrdered.appendChild(inputQuantityOrdered);
|
||||
|
||||
let tdQuantityReceived = document.createElement("td");
|
||||
tdQuantityReceived.classList.add(flagQuantityReceived);
|
||||
let inputQuantityReceived = document.createElement("input");
|
||||
inputQuantityReceived.classList.add(flagQuantityReceived);
|
||||
inputQuantityReceived.type = 'number';
|
||||
DOM.setElementValuesCurrentAndPrevious(inputQuantityReceived, orderItem[flagQuantityReceived]);
|
||||
tdQuantityReceived.appendChild(inputQuantityReceived);
|
||||
|
||||
let tdCostTotalLocalVatExcl = document.createElement("td");
|
||||
tdCostTotalLocalVatExcl.classList.add(flagCostTotalLocalVatExcl);
|
||||
let inputCostTotalLocalVatExcl = document.createElement("input");
|
||||
inputCostTotalLocalVatExcl.classList.add(flagCostTotalLocalVatExcl);
|
||||
inputCostTotalLocalVatExcl.type = 'number';
|
||||
inputCostTotalLocalVatExcl.step = 0.01;
|
||||
DOM.setElementValuesCurrentAndPrevious(inputCostTotalLocalVatExcl, orderItem[flagCostTotalLocalVatExcl]);
|
||||
tdCostTotalLocalVatExcl.appendChild(inputCostTotalLocalVatExcl);
|
||||
|
||||
let tdCostTotalLocalVatIncl = document.createElement("td");
|
||||
tdCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
|
||||
let inputCostTotalLocalVatIncl = document.createElement("input");
|
||||
inputCostTotalLocalVatIncl.classList.add(flagCostTotalLocalVatIncl);
|
||||
inputCostTotalLocalVatIncl.type = 'number';
|
||||
inputCostTotalLocalVatIncl.step = 0.01;
|
||||
DOM.setElementValuesCurrentAndPrevious(inputCostTotalLocalVatIncl, orderItem[flagCostTotalLocalVatIncl]);
|
||||
tdCostTotalLocalVatIncl.appendChild(inputCostTotalLocalVatIncl);
|
||||
|
||||
let tdCostUnitLocalVatExcl = document.createElement("td");
|
||||
tdCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
|
||||
let divCostUnitLocalVatExcl = document.createElement("div");
|
||||
divCostUnitLocalVatExcl.classList.add(flagCostUnitLocalVatExcl);
|
||||
DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatExcl, Validation.toFixedOrDefault(orderItem[flagCostUnitLocalVatExcl], 3, null));
|
||||
tdCostUnitLocalVatExcl.appendChild(divCostUnitLocalVatExcl);
|
||||
|
||||
let tdCostUnitLocalVatIncl = document.createElement("td");
|
||||
tdCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
|
||||
let divCostUnitLocalVatIncl = document.createElement("div");
|
||||
divCostUnitLocalVatIncl.classList.add(flagCostUnitLocalVatIncl);
|
||||
DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatIncl, Validation.toFixedOrDefault(orderItem[flagCostUnitLocalVatIncl], 3, null));
|
||||
tdCostUnitLocalVatIncl.appendChild(divCostUnitLocalVatIncl);
|
||||
|
||||
let tdLatencyDeliveryDays = document.createElement("td");
|
||||
tdLatencyDeliveryDays.classList.add(flagLatencyDeliveryDays);
|
||||
let inputLatencyDeliveryDays = document.createElement("input");
|
||||
inputLatencyDeliveryDays.classList.add(flagLatencyDeliveryDays);
|
||||
inputLatencyDeliveryDays.type = 'number';
|
||||
inputLatencyDeliveryDays.step = 1;
|
||||
DOM.setElementValuesCurrentAndPrevious(inputLatencyDeliveryDays, orderItem[flagLatencyDeliveryDays]);
|
||||
tdLatencyDeliveryDays.appendChild(inputLatencyDeliveryDays);
|
||||
|
||||
let tdActive = this.createTdActive(orderItem[flagActive]);
|
||||
|
||||
let tr = document.createElement("tr");
|
||||
tr.classList.add(flagOrderItems);
|
||||
tr.setAttribute(attrIdSupplierPurchaseOrder, orderItem[attrIdSupplierPurchaseOrder]);
|
||||
tr.setAttribute(attrIdSupplierPurchaseOrderProductLink, orderItem[attrIdSupplierPurchaseOrderProductLink]);
|
||||
tr.appendChild(tdDisplayOrder);
|
||||
tr.appendChild(tdCategory);
|
||||
tr.appendChild(tdProduct);
|
||||
tr.appendChild(tdVariations);
|
||||
tr.appendChild(tdUnitQuantity);
|
||||
tr.appendChild(tdQuantityOrdered);
|
||||
tr.appendChild(tdQuantityReceived);
|
||||
tr.appendChild(tdCostTotalLocalVatExcl);
|
||||
tr.appendChild(tdCostTotalLocalVatIncl);
|
||||
tr.appendChild(tdCostUnitLocalVatExcl);
|
||||
tr.appendChild(tdCostUnitLocalVatIncl);
|
||||
tr.appendChild(tdLatencyDeliveryDays);
|
||||
tr.appendChild(tdActive);
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
hookupFieldsOrderItemDisplayOrder() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagDisplayOrder + ' input');
|
||||
}
|
||||
hookupFieldsOrderItemProductCategory() {
|
||||
this.hookupTableCellDdlPreviews(
|
||||
idTableMain + ' td.' + flagOrderItems + ' td.' + flagProductCategory
|
||||
, Utils.getListFromDict(productCategories)
|
||||
, (cellSelector) => { this.hookupProductCategoryDdls(cellSelector); }
|
||||
);
|
||||
}
|
||||
hookupFieldsOrderItemProduct() {
|
||||
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagOrderItems + ' td.' + flagProduct, Utils.getListFromDict(products));
|
||||
}
|
||||
/*
|
||||
hookupFieldsOrderItemProductVariations() {
|
||||
this.hookupEventHandler("click", idTableMain + ' td.' + flagOrderItems + ' td.' + flagProductVariations, (event, element) => this.handleClickProductPermutationVariationsPreview(event, element));
|
||||
}
|
||||
hookupDdlsProductPermutationVariation() {
|
||||
this.hookupTableCellDdls(idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariation);
|
||||
}
|
||||
hookupDdlsProductPermutationVariationType() {
|
||||
this.hookupTableCellDdls(idTableMain + ' td.' + flagProductVariations + ' td.' + flagProductVariationType);
|
||||
}
|
||||
*/
|
||||
hookupFieldsOrderItemUnitQuantity() {
|
||||
this.hookupTableCellDdlPreviews(
|
||||
idTableMain + ' td.' + flagOrderItems + ' td.' + flagUnitMeasurementQuantity
|
||||
, Utils.getListFromDict(unitMeasurements)
|
||||
);
|
||||
}
|
||||
hookupFieldsOrderItemQuantityOrdered() {
|
||||
this.hookupChangeHandlerTableCells(
|
||||
idTableMain + ' td.' + flagOrderItems + ' td.' + flagQuantityOrdered + ' input'
|
||||
);
|
||||
}
|
||||
hookupFieldsOrderItemQuantityReceived() {
|
||||
this.hookupChangeHandlerTableCells(
|
||||
idTableMain + ' td.' + flagOrderItems + ' td.' + flagQuantityReceived + ' input'
|
||||
);
|
||||
}
|
||||
hookupFieldsOrderItemCostTotalLocalVatExcl() {
|
||||
this.hookupChangeHandlerTableCells(
|
||||
idTableMain + ' td.' + flagOrderItems + ' td.' + flagCostTotalLocalVatExcl + ' input'
|
||||
, (event, element) => {
|
||||
this.handleChangeNestedElementCellTable(event, element); // flagCostTotalLocalVatExcl);
|
||||
this.updateFieldsCostUnitLocalVatExcl(element);
|
||||
}
|
||||
);
|
||||
}
|
||||
hookupFieldsOrderItemCostTotalLocalVatIncl() {
|
||||
this.hookupChangeHandlerTableCells(
|
||||
idTableMain + ' td.' + flagOrderItems + ' td.' + flagCostTotalLocalVatIncl + ' input'
|
||||
, (event, element) => {
|
||||
this.handleChangeNestedElementCellTable(event, element); // flagCostTotalLocalVatIncl);
|
||||
this.updateFieldsCostUnitLocalVatIncl(element);
|
||||
}
|
||||
);
|
||||
}
|
||||
updateFieldsCostUnitLocalVatExcl(elementChanged) {
|
||||
let row = elementChanged.closest('tr.' + flagOrderItems);
|
||||
let inputCostTotalLocalVatExcl = row.querySelector('td.' + flagCostTotalLocalVatExcl + ' input');
|
||||
let costTotalLocalVatExcl = DOM.getElementValueCurrent(inputCostTotalLocalVatExcl);
|
||||
let inputQuantityOrdered = row.querySelector('td.' + flagQuantityOrdered + ' input');
|
||||
let quantityOrdered = DOM.getElementValueCurrent(inputQuantityOrdered);
|
||||
|
||||
let divCostUnitLocalVatExcl = row.querySelector('td.' + flagCostUnitLocalVatExcl + ' div');
|
||||
let costUnitLocalVatExcl = quantityOrdered == 0 ? 0 : costTotalLocalVatExcl / quantityOrdered;
|
||||
DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatExcl, costUnitLocalVatExcl.toFixed(3));
|
||||
|
||||
let rowSupplierPurchaseOrder = row.closest(idTableMain + ' > tbody > tr');
|
||||
let divCostGrandTotalLocalVatExcl = rowSupplierPurchaseOrder.querySelector('td.' + flagCostTotalLocalVatExcl + ' div');
|
||||
let inputsCostTotalLocalVatExcl = rowSupplierPurchaseOrder.querySelectorAll('td.' + flagOrderItems + ' td.' + flagCostTotalLocalVatExcl + ' input');
|
||||
let costGrandTotalLocalVatExcl = Array.from(inputsCostTotalLocalVatExcl).reduce((acc, input) => acc + Number(DOM.getElementValueCurrent(input)), 0);
|
||||
DOM.setElementValueCurrent(divCostGrandTotalLocalVatExcl, costGrandTotalLocalVatExcl);
|
||||
}
|
||||
updateFieldsCostUnitLocalVatIncl(elementChanged) {
|
||||
let row = elementChanged.closest('tr.' + flagOrderItems);
|
||||
let inputCostTotalLocalVatIncl = row.querySelector('td.' + flagCostTotalLocalVatIncl + ' input');
|
||||
let costTotalLocalVatIncl = DOM.getElementValueCurrent(inputCostTotalLocalVatIncl);
|
||||
let inputQuantityOrdered = row.querySelector('td.' + flagQuantityOrdered + ' input');
|
||||
let quantityOrdered = DOM.getElementValueCurrent(inputQuantityOrdered);
|
||||
|
||||
let divCostUnitLocalVatIncl = row.querySelector('td.' + flagCostUnitLocalVatIncl + ' div');
|
||||
let costUnitLocalVatIncl = quantityOrdered == 0 ? 0 : costTotalLocalVatIncl / quantityOrdered;
|
||||
DOM.setElementValuesCurrentAndPrevious(divCostUnitLocalVatIncl, costUnitLocalVatIncl.toFixed(3));
|
||||
|
||||
let rowSupplierPurchaseOrder = row.closest(idTableMain + ' > tbody > tr');
|
||||
let divCostGrandTotalLocalVatIncl = rowSupplierPurchaseOrder.querySelector('td.' + flagCostTotalLocalVatIncl + ' div');
|
||||
let inputsCostTotalLocalVatIncl = rowSupplierPurchaseOrder.querySelectorAll('td.' + flagOrderItems + ' td.' + flagCostTotalLocalVatIncl + ' input');
|
||||
let costGrandTotalLocalVatIncl = Array.from(inputsCostTotalLocalVatIncl).reduce((acc, input) => acc + Number(DOM.getElementValueCurrent(input)), 0);
|
||||
DOM.setElementValueCurrent(divCostGrandTotalLocalVatIncl, costGrandTotalLocalVatIncl);
|
||||
}
|
||||
hookupFieldsOrderItemLatencyDeliveryDays() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' td.' + flagLatencyDeliveryDays + ' input');
|
||||
}
|
||||
hookupFieldsOrderItemActive() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagOrderItems + ' input.' + flagActive);
|
||||
}
|
||||
hookupFieldsOrderItemAddDelete() {
|
||||
let selectorButton = idTableMain + ' td.' + flagOrderItems + ' td.' + flagOrderItems + ' button';
|
||||
let selectorButtonDelete = selectorButton + '.' + flagDelete;
|
||||
let selectorButtonUndelete = selectorButton + '.' + flagAdd;
|
||||
this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete);
|
||||
this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
|
||||
this.hookupButtonsOrderItemAdd();
|
||||
}
|
||||
hookupButtonsOrderItemAdd() {
|
||||
this.hookupEventHandler("click", idTableMain + ' td.' + flagOrderItems + ' th button.' + flagAdd, (event, element) => {
|
||||
let row = element.closest(idTableMain + ' > tbody > tr');
|
||||
let idSupplierPurchaseOrder = row.getAttribute(attrIdSupplierPurchaseOrder);
|
||||
// let hasActiveOrderItem = row.querySelectorAll('td.' + flagOrderItems + ' input.' + flagActive + ':checked').length > 0;
|
||||
let countSupplierOrderItems = row.querySelectorAll('td.' + flagOrderItems + ' td.' + flagSupplierPurchaseOrder).length;
|
||||
let supplierOrderItem = {
|
||||
[attrIdSupplierPurchaseOrder]: idSupplierPurchaseOrder,
|
||||
[attrIdSupplierPurchaseOrderProductLink]: -1 - countSupplierOrderItems,
|
||||
[attrIdProductCategory]: 0,
|
||||
[attrIdProduct]: 0,
|
||||
[flagProductVariations]: '',
|
||||
[attrIdUnitMeasurementQuantity]: 0,
|
||||
[flagQuantityOrdered]: '',
|
||||
[flagQuantityReceived]: '',
|
||||
[flagCostTotalLocalVatExcl]: '',
|
||||
[flagCostTotalLocalVatIncl]: '',
|
||||
[flagCostUnitLocalVatExcl]: '',
|
||||
[flagCostUnitLocalVatIncl]: '',
|
||||
[flagLatencyDeliveryDays]: '',
|
||||
[flagDisplayOrder]: countSupplierOrderItems + 1,
|
||||
[flagActive]: true, // !hasActiveOrderItem,
|
||||
};
|
||||
let tbody = row.querySelector('td.' + flagOrderItems + ' table tbody');
|
||||
this.addRowSupplierPurchaseOrderItem(tbody, supplierOrderItem);
|
||||
/*
|
||||
if (!hasActiveOrderItem) {
|
||||
let tdOrderItem = row.querySelector('td.' + flagOrderItems);
|
||||
// tdOrderItem.setAttribute(attrIdSupplierOrderItem, supplierOrderItem[attrIdSupplierOrderItem]);
|
||||
DOM.setElementAttributeValueCurrent(tdOrderItem, supplierOrderItem[attrIdSupplierPurchaseOrderProductLink]);
|
||||
}
|
||||
*/
|
||||
this.hookupOrderItemsFields();
|
||||
});
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,381 +0,0 @@
|
||||
|
||||
import API from "../../api.js";
|
||||
import BusinessObjects from "../../lib/business_objects/business_objects.js";
|
||||
import DOM from "../../dom.js";
|
||||
import Events from "../../lib/events.js";
|
||||
import TableBasePage from "../base_table.js";
|
||||
import Utils from "../../lib/utils.js";
|
||||
import Validation from "../../lib/validation.js";
|
||||
import StoreTableMixinPage from "./mixin_table.js";
|
||||
|
||||
export default class PageStoreSuppliers extends TableBasePage {
|
||||
static hash = hashPageStoreSuppliers;
|
||||
static attrIdRowObject = attrIdSupplier;
|
||||
callSaveTableContent = API.saveSuppliers;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
this.storeMixin = new StoreTableMixinPage(this);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.sharedInitialize();
|
||||
}
|
||||
|
||||
hookupFilters() {
|
||||
this.sharedHookupFilters();
|
||||
this.hookupFilterActive();
|
||||
}
|
||||
|
||||
loadRowTable(rowJson) {
|
||||
}
|
||||
getJsonRow(row) {
|
||||
if (row == null) return;
|
||||
let textareaNameCompany = row.querySelector('td.' + flagNameCompany + ' textarea');
|
||||
let textareaNameContact = row.querySelector('td.' + flagNameContact + ' textarea');
|
||||
let textareaDepartmentContact = row.querySelector('td.' + flagDepartmentContact + ' textarea');
|
||||
let tdAddress = row.querySelector('td.' + flagAddress);
|
||||
let textareaPhoneNumber = row.querySelector('td.' + flagPhoneNumber + ' textarea');
|
||||
let textareaFax = row.querySelector('td.' + flagFax + ' textarea');
|
||||
let textareaEmail = row.querySelector('td.' + flagEmail + ' textarea');
|
||||
let textareaWebsite = row.querySelector('td.' + flagWebsite + ' textarea');
|
||||
let tdCurrency = row.querySelector('td.' + flagCurrency);
|
||||
let buttonActive = row.querySelector(':scope > td.' + flagActive + ' button');
|
||||
|
||||
let jsonRow = {};
|
||||
jsonRow[attrIdSupplier] = row.getAttribute(attrIdSupplier);
|
||||
jsonRow[flagNameCompany] = DOM.getElementAttributeValueCurrent(textareaNameCompany);
|
||||
jsonRow[flagNameContact] = DOM.getElementAttributeValueCurrent(textareaNameContact);
|
||||
jsonRow[flagDepartmentContact] = DOM.getElementAttributeValueCurrent(textareaDepartmentContact);
|
||||
jsonRow[attrIdSupplierAddress] = DOM.getElementAttributeValueCurrent(tdAddress);
|
||||
jsonRow[flagSupplierAddress] = this.getSupplierAddressesFromRow(row);
|
||||
jsonRow[flagPhoneNumber] = DOM.getElementAttributeValueCurrent(textareaPhoneNumber);
|
||||
jsonRow[flagFax] = DOM.getElementAttributeValueCurrent(textareaFax);
|
||||
jsonRow[flagEmail] = DOM.getElementAttributeValueCurrent(textareaEmail);
|
||||
jsonRow[flagWebsite] = DOM.getElementAttributeValueCurrent(textareaWebsite);
|
||||
jsonRow[attrIdCurrency] = DOM.getElementAttributeValueCurrent(tdCurrency);
|
||||
jsonRow[flagActive] = buttonActive.classList.contains(flagDelete);
|
||||
return jsonRow;
|
||||
}
|
||||
getSupplierAddressesFromRow(row) {
|
||||
let supplierAddresses = [];
|
||||
let trs = row.querySelectorAll('td.' + flagAddress + ' tbody tr');
|
||||
let address, inputPostcode, inputAddressLine1, inputAddressLine2, inputCity, inputCounty, ddlRegion, inputActive;
|
||||
trs.forEach((tr) => {
|
||||
inputPostcode = tr.querySelector('td.' + flagPostcode + ' textarea');
|
||||
inputAddressLine1 = tr.querySelector('td.' + flagAddressLine1 + ' textarea');
|
||||
inputAddressLine2 = tr.querySelector('td.' + flagAddressLine2 + ' textarea');
|
||||
inputCity = tr.querySelector('td.' + flagCity + ' textarea');
|
||||
inputCounty = tr.querySelector('td.' + flagCounty + ' textarea');
|
||||
ddlRegion = tr.querySelector('td.' + flagRegion + ' select');
|
||||
inputActive = tr.querySelector('td.' + flagActive + ' input');
|
||||
address = {
|
||||
[attrIdSupplierAddress]: tr.getAttribute(attrIdSupplierAddress),
|
||||
[attrIdSupplier]: row.getAttribute(attrIdSupplier),
|
||||
[flagPostcode]: DOM.getElementAttributeValueCurrent(inputPostcode),
|
||||
[flagAddressLine1]: DOM.getElementAttributeValueCurrent(inputAddressLine1),
|
||||
[flagAddressLine2]: DOM.getElementAttributeValueCurrent(inputAddressLine2),
|
||||
[flagCity]: DOM.getElementAttributeValueCurrent(inputCity),
|
||||
[flagCounty]: DOM.getElementAttributeValueCurrent(inputCounty),
|
||||
[attrIdRegion]: DOM.getElementAttributeValueCurrent(ddlRegion),
|
||||
[flagActive]: DOM.getElementAttributeValueCurrent(inputActive),
|
||||
};
|
||||
supplierAddresses.push(address);
|
||||
});
|
||||
return supplierAddresses;
|
||||
}
|
||||
initialiseRowNew(tbody, row) {
|
||||
super.initialiseRowNew(tbody, row);
|
||||
}
|
||||
|
||||
hookupTableMain() {
|
||||
super.hookupTableMain();
|
||||
this.hookupNameCompanyInputs();
|
||||
this.hookupNameContactInputs();
|
||||
this.hookupDepartmentContactInputs();
|
||||
this.hookupAddressFields();
|
||||
this.hookupPhoneNumberInputs();
|
||||
this.hookupFaxInputs();
|
||||
this.hookupEmailInputs();
|
||||
this.hookupWebsiteInputs();
|
||||
this.hookupCurrencyFields();
|
||||
this.hookupFieldsActive();
|
||||
}
|
||||
hookupNameCompanyInputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagNameCompany + ' textarea');
|
||||
}
|
||||
hookupNameContactInputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagNameContact + ' textarea');
|
||||
}
|
||||
hookupDepartmentContactInputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagDepartmentContact + ' textarea');
|
||||
}
|
||||
|
||||
hookupAddressFields() {
|
||||
this.hookupAddressPreviews();
|
||||
this.hookupAddressPostcodeInputs();
|
||||
this.hookupAddressLine1Inputs();
|
||||
this.hookupAddressLine2Inputs();
|
||||
this.hookupAddressCityInputs();
|
||||
this.hookupAddressCountyInputs();
|
||||
this.hookupAddressRegionDdls();
|
||||
this.hookupAddressActiveCheckboxes();
|
||||
this.hookupAddressDeleteButtons();
|
||||
this.hookupAddressUndeleteButtons();
|
||||
this.hookupAddressAddButtons();
|
||||
}
|
||||
hookupAddressPreviews() {
|
||||
this.hookupEventHandler("click", idTableMain + ' td.' + flagAddress, (event, td) => {
|
||||
if (!td.classList.contains(flagCollapsed)) return;
|
||||
this.handleClickAddressPreview(event, td);
|
||||
});
|
||||
}
|
||||
handleClickAddressPreview(event, element) {
|
||||
if (_verbose) { console.log("click address preview"); }
|
||||
this.toggleColumnHeaderCollapsed(flagAddress, false);
|
||||
element.classList.remove(flagCollapsed);
|
||||
let row = DOM.getRowFromElement(element);
|
||||
let idSupplier = row.getAttribute(attrIdSupplier);
|
||||
let supplierAddressList = idSupplier > 0 ? supplierAddresses[idSupplier] : [];
|
||||
let tblAddresses = document.createElement("table");
|
||||
tblAddresses.classList.add(flagAddress);
|
||||
let thead = document.createElement("thead");
|
||||
let tr = document.createElement("tr");
|
||||
let thPostcode = document.createElement("th");
|
||||
thPostcode.classList.add(flagPostcode);
|
||||
thPostcode.textContent = 'Postcode';
|
||||
let thAddressLine1 = document.createElement("th");
|
||||
thAddressLine1.classList.add(flagAddressLine1);
|
||||
thAddressLine1.textContent = 'Address Line 1';
|
||||
let thAddressLine2 = document.createElement("th");
|
||||
thAddressLine2.classList.add(flagAddressLine2);
|
||||
thAddressLine2.textContent = 'Address Line 2';
|
||||
let thCity = document.createElement("th");
|
||||
thCity.classList.add(flagCity);
|
||||
thCity.textContent = 'City';
|
||||
let thCounty = document.createElement("th");
|
||||
thCounty.classList.add(flagCounty);
|
||||
thCounty.textContent = 'County';
|
||||
let thRegion = document.createElement("th");
|
||||
thRegion.classList.add(flagRegion);
|
||||
thRegion.textContent = 'Region';
|
||||
let thActive = document.createElement("th");
|
||||
thActive.classList.add(flagActive);
|
||||
thActive.textContent = 'Active';
|
||||
let thAddDelete = document.createElement("th");
|
||||
thAddDelete.classList.add(flagAdd);
|
||||
let buttonAdd = document.createElement("button");
|
||||
buttonAdd.classList.add(flagAdd);
|
||||
buttonAdd.textContent = '+';
|
||||
thAddDelete.appendChild(buttonAdd);
|
||||
|
||||
tr.appendChild(thPostcode);
|
||||
tr.appendChild(thAddressLine1);
|
||||
tr.appendChild(thAddressLine2);
|
||||
tr.appendChild(thCity);
|
||||
tr.appendChild(thCounty);
|
||||
tr.appendChild(thRegion);
|
||||
tr.appendChild(thActive);
|
||||
tr.appendChild(thAddDelete);
|
||||
thead.appendChild(tr);
|
||||
tblAddresses.appendChild(thead);
|
||||
|
||||
let tbody = document.createElement("tbody");
|
||||
let regionOptions = Utils.getListFromDict(regions);
|
||||
supplierAddressList.forEach((supplierAddress, index) => {
|
||||
this.addRowSupplierAddress(tbody, supplierAddress, regionOptions);
|
||||
});
|
||||
tblAddresses.appendChild(tbody);
|
||||
|
||||
let cell = DOM.getCellFromElement(element);
|
||||
let cellNew = cell.cloneNode(false);
|
||||
cellNew.appendChild(tblAddresses);
|
||||
row.replaceChild(cellNew, cell);
|
||||
if (_verbose) { console.log("tblAddresses: ", tblAddresses); }
|
||||
this.hookupAddressFields();
|
||||
}
|
||||
addRowSupplierAddress(tbody, supplierAddress, regionOptions) {
|
||||
if (_verbose) { console.log("addRowSupplierAddress: ", supplierAddress); }
|
||||
let tdPostcode = document.createElement("td");
|
||||
tdPostcode.classList.add(flagPostcode);
|
||||
let textareaPostcode = document.createElement("textarea");
|
||||
textareaPostcode.classList.add(flagPostcode);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaPostcode, supplierAddress[flagPostcode]);
|
||||
tdPostcode.appendChild(textareaPostcode);
|
||||
|
||||
let tdAddressLine1 = document.createElement("td");
|
||||
tdAddressLine1.classList.add(flagAddressLine1);
|
||||
let textareaAddressLine1 = document.createElement("textarea");
|
||||
textareaAddressLine1.classList.add(flagAddressLine1);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaAddressLine1, supplierAddress[flagAddressLine1]);
|
||||
tdAddressLine1.appendChild(textareaAddressLine1);
|
||||
|
||||
let tdAddressLine2 = document.createElement("td");
|
||||
tdAddressLine2.classList.add(flagAddressLine2);
|
||||
let textareaAddressLine2 = document.createElement("textarea");
|
||||
textareaAddressLine2.classList.add(flagAddressLine2);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaAddressLine2, supplierAddress[flagAddressLine2]);
|
||||
tdAddressLine2.appendChild(textareaAddressLine2);
|
||||
|
||||
let tdCity = document.createElement("td");
|
||||
tdCity.classList.add(flagCity);
|
||||
let textareaCity = document.createElement("textarea");
|
||||
textareaCity.classList.add(flagCity);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaCity, supplierAddress[flagCity]);
|
||||
tdCity.appendChild(textareaCity);
|
||||
|
||||
let tdCounty = document.createElement("td");
|
||||
tdCounty.classList.add(flagCounty);
|
||||
let textareaCounty = document.createElement("textarea");
|
||||
textareaCounty.classList.add(flagCounty);
|
||||
DOM.setElementValuesCurrentAndPrevious(textareaCounty, supplierAddress[flagCounty]);
|
||||
tdCounty.appendChild(textareaCounty);
|
||||
|
||||
let region = supplierAddress[flagRegion];
|
||||
if (!region) region = {[attrIdRegion]: ''};
|
||||
let tdRegion = document.createElement("td");
|
||||
tdRegion.classList.add(flagRegion);
|
||||
DOM.setElementAttributesValuesCurrentAndPrevious(tdRegion, region[attrIdRegion]);
|
||||
let ddlRegion = document.createElement("select");
|
||||
ddlRegion.classList.add(flagRegion);
|
||||
let optionJson, option;
|
||||
option = DOM.createOption(null);
|
||||
ddlRegion.appendChild(option);
|
||||
regionOptions.forEach((regionOption) => {
|
||||
optionJson = BusinessObjects.getOptionJsonFromObjectJson(regionOption);
|
||||
option = DOM.createOption(optionJson);
|
||||
ddlRegion.appendChild(option);
|
||||
});
|
||||
DOM.setElementValuesCurrentAndPrevious(ddlRegion, region[attrIdRegion]);
|
||||
tdRegion.appendChild(ddlRegion);
|
||||
|
||||
let tdActive = this.createTdActive(supplierAddress[flagActive]);
|
||||
|
||||
let tr = document.createElement("tr");
|
||||
tr.setAttribute(attrIdSupplierAddress, supplierAddress[attrIdSupplierAddress]);
|
||||
tr.setAttribute(attrIdSupplier, supplierAddress[attrIdSupplier]);
|
||||
tr.appendChild(tdPostcode);
|
||||
tr.appendChild(tdAddressLine1);
|
||||
tr.appendChild(tdAddressLine2);
|
||||
tr.appendChild(tdCity);
|
||||
tr.appendChild(tdCounty);
|
||||
tr.appendChild(tdRegion);
|
||||
tr.appendChild(tdActive);
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
hookupAddressPostcodeInputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagPostcode);
|
||||
}
|
||||
hookupAddressLine1Inputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagAddressLine1);
|
||||
}
|
||||
hookupAddressLine2Inputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagAddressLine2);
|
||||
}
|
||||
hookupAddressCityInputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagCity);
|
||||
}
|
||||
hookupAddressCountyInputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' textarea.' + flagCounty);
|
||||
}
|
||||
hookupAddressRegionDdls() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' select.' + flagRegion);
|
||||
}
|
||||
hookupAddressActiveCheckboxes() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagAddress + ' input.' + flagActive, (event, element) => {
|
||||
let rowSupplierAddress = element.closest('tr');
|
||||
let idAddress = rowSupplierAddress.getAttribute(attrIdSupplierAddress);
|
||||
DOM.setElementAttributeValueCurrent(rowSupplierAddress, idAddress);
|
||||
let rowSupplier = rowSupplierAddress.closest(idTableMain + ' > tbody > tr');
|
||||
let checkboxesActive = rowSupplier.querySelectorAll('td.' + flagAddress + ' input.' + flagActive);
|
||||
let isActive = element.checked;
|
||||
if (isActive) {
|
||||
checkboxesActive.forEach((checkbox) => {
|
||||
if (checkbox == element) return;
|
||||
DOM.setElementValueCurrent(checkbox, false);
|
||||
});
|
||||
}
|
||||
/*
|
||||
else if (checkboxesActive.length > 0) {
|
||||
DOM.setElementValueCurrent(checkboxesActive[0], false);
|
||||
}
|
||||
*/
|
||||
});
|
||||
}
|
||||
hookupFieldsAddressAddDelete() {
|
||||
let selectorButton = idTableMain + ' td.' + flagAddress + ' button';
|
||||
let selectorButtonDelete = selectorButton + '.' + flagDelete;
|
||||
let selectorButtonUndelete = selectorButton + '.' + flagAdd;
|
||||
this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete);
|
||||
this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
|
||||
}
|
||||
hookupAddressDeleteButtons() {
|
||||
this.hookupEventHandler("click", idTableMain + ' td.' + flagAddress + ' button.' + flagDelete, (event, element) => {
|
||||
let row = DOM.getRowFromElement(element);
|
||||
row.classList.add(flagDelete);
|
||||
|
||||
let buttonAdd = document.createElement("button");
|
||||
buttonAdd.classList.add(flagAdd);
|
||||
buttonAdd.textContent = '+';
|
||||
element.replaceWith(buttonAdd);
|
||||
this.hookupAddressUndeleteButtons();
|
||||
});
|
||||
}
|
||||
hookupAddressUndeleteButtons() {
|
||||
this.hookupEventHandler("click", idTableMain + ' td.' + flagAddress + ' td button.' + flagAdd, (event, element) => {
|
||||
let row = DOM.getRowFromElement(element);
|
||||
row.classList.remove(flagDelete);
|
||||
|
||||
let buttonDelete = document.createElement("button");
|
||||
buttonDelete.classList.add(flagDelete);
|
||||
buttonDelete.textContent = 'x';
|
||||
element.replaceWith(buttonDelete);
|
||||
this.hookupAddressDeleteButtons();
|
||||
});
|
||||
}
|
||||
hookupAddressAddButtons() {
|
||||
this.hookupEventHandler("click", idTableMain + ' td.' + flagAddress + ' th button.' + flagAdd, (event, element) => {
|
||||
let row = element.closest(idTableMain + ' > tbody > tr');
|
||||
let idSupplier = row.getAttribute(attrIdSupplier);
|
||||
let hasActiveAddress = row.querySelectorAll('td.' + flagAddress + ' input.' + flagActive + ':checked').length > 0;
|
||||
let countSupplierAddresses = row.querySelectorAll('td.' + flagAddress + ' td.' + flagAddress).length;
|
||||
let supplierAddress = {
|
||||
[attrIdSupplier]: idSupplier,
|
||||
[attrIdSupplierAddress]: -1 - countSupplierAddresses,
|
||||
[flagPostcode]: '',
|
||||
[flagAddressLine1]: '',
|
||||
[flagAddressLine2]: '',
|
||||
[flagCity]: '',
|
||||
[flagCounty]: '',
|
||||
[attrIdRegion]: '',
|
||||
[flagActive]: !hasActiveAddress,
|
||||
};
|
||||
let tbody = row.querySelector('td.' + flagAddress + ' table tbody');
|
||||
this.addRowSupplierAddress(tbody, supplierAddress, Utils.getListFromDict(regions));
|
||||
if (!hasActiveAddress) {
|
||||
let tdAddress = row.querySelector('td.' + flagAddress);
|
||||
// tdAddress.setAttribute(attrIdSupplierAddress, supplierAddress[attrIdSupplierAddress]);
|
||||
DOM.setElementAttributeValueCurrent(tdAddress, supplierAddress[attrIdSupplierAddress]);
|
||||
}
|
||||
this.hookupAddressFields();
|
||||
});
|
||||
}
|
||||
|
||||
hookupPhoneNumberInputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagPhoneNumber + ' textarea');
|
||||
}
|
||||
hookupFaxInputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagFax + ' textarea');
|
||||
}
|
||||
hookupEmailInputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagEmail + ' textarea');
|
||||
}
|
||||
hookupWebsiteInputs() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagWebsite + ' textarea');
|
||||
}
|
||||
|
||||
leave() {
|
||||
super.leave();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user