feat(UI): Stock Items page added with getting, filtering, and saving data.
This commit is contained in:
@@ -198,7 +198,7 @@ export default class PageStoreProductPermutations extends TableBasePage {
|
||||
super.hookupTableMain();
|
||||
this.hookupProductCategoryFields();
|
||||
this.hookupProductFields();
|
||||
this.hookupProductVariationFields();
|
||||
this.hookupProductPermutationVariationFields();
|
||||
this.hookupDescriptionTextareas();
|
||||
this.hookupCostFields();
|
||||
this.hookupLatencyManufactureInputs();
|
||||
@@ -235,200 +235,12 @@ export default class PageStoreProductPermutations extends TableBasePage {
|
||||
hookupProductFields() {
|
||||
this.hookupTableCellDdlPreviews(idTableMain + ' td.' + flagProduct, Utils.getListFromDict(products));
|
||||
}
|
||||
hookupProductVariationFields() {
|
||||
this.hookupEventHandler("click", idTableMain + ' td.' + flagProductVariations + ' div', (event, element) => this.handleClickProductPermutationVariationsPreview(event, element));
|
||||
}
|
||||
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:', permutationVariations);
|
||||
if (Validation.isEmpty(permutationVariations)) {
|
||||
permutationVariations = [PageStoreProductPermutations.createOptionUnselectedProductVariation()];
|
||||
}
|
||||
else {
|
||||
permutationVariations.forEach((permutationVariation, index) => {
|
||||
this.addProductPermutationVariationRow(tbody, permutationVariation);
|
||||
});
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
hookupDescriptionTextareas() {
|
||||
this.hookupChangeHandlerTableCells(idTableMain + ' td.' + flagDescription + ' textarea');
|
||||
@@ -495,7 +307,6 @@ export default class PageStoreProductPermutations extends TableBasePage {
|
||||
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'));
|
||||
@@ -528,7 +339,6 @@ export default class PageStoreProductPermutations extends TableBasePage {
|
||||
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'));
|
||||
|
||||
Reference in New Issue
Block a user