Feat(SQL, UI): Logic for Get-Many SQL Stored Procedures refactored to use Calc Stored Procedures and Dog Command Links page styling improved.
This commit is contained in:
355
static/js/pages/dog/stock_items.js
Normal file
355
static/js/pages/dog/stock_items.js
Normal file
@@ -0,0 +1,355 @@
|
||||
|
||||
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 DogTableMixinPage from "./mixin_table.js";
|
||||
|
||||
export default class PageDogStockItems extends TableBasePage {
|
||||
static hash = hashPageDogStockItems;
|
||||
static attrIdRowObject = attrIdStockItem;
|
||||
callSaveTableContent = API.saveStockItems;
|
||||
|
||||
constructor(router) {
|
||||
super(router);
|
||||
this.dogMixin = new DogTableMixinPage(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);
|
||||
PageDogStockItems.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 = PageDogStockItems.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();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user