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

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

Browse Source
This commit is contained in:
teddy
2024-09-24 23:25:52 +01:00
parent 2954b2050c
commit 45ac0405b4
243 changed files with 6596 additions and 4460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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