Feat: Active column changed to add / delete / undelete buttons column on all table pages. \n Fix(UI): Product Permutations page preview Variations now shows when appropriate.

This commit is contained in:
2024-11-11 10:49:55 +00:00
parent 60431062f0
commit db15a7f8fc
40 changed files with 274 additions and 473 deletions

View File

@@ -50,47 +50,13 @@
width: 5vh;
min-width: 5vh;
}
/*
nips
*/
/*
.row-new {
visibility: hidden;
}
*/
textarea {
width: 95%;
}
select {
width: 100%;
}
input {
width: 90%;
}
td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea {
border: 2px solid var(--c_purple);
border-radius: 0.5vh;
}
#tableMain tbody tr td button {
padding: 0;
border: 0;
margin: 0;
text-decoration: none;
}
#tableMain tbody tr td table thead tr th.id_variation_type, #tableMain tbody tr td table tbody tr td.id_variation_type, #tableMain tbody tr td table thead tr th.id_variation, #tableMain tbody tr td table tbody tr td.id_variation {
width: 47.5%;
}
/*
select.id_variation, select.id_variation_type {
max-width: 40% !important;
}
*/

View File

@@ -114,13 +114,6 @@ td > input, td > select, td > textarea, .container-input > input, .container-inp
border-radius: 0.5vh;
}
#tableMain tbody tr td button {
padding: 0;
border: 0;
margin: 0;
text-decoration: none;
}
#tableMain tbody tr td table thead tr th.id_variation_type, #tableMain tbody tr td table tbody tr td.id_variation_type, #tableMain tbody tr td table thead tr th.id_variation, #tableMain tbody tr td table tbody tr td.id_variation {
width: 47.5%;
}

View File

@@ -46,30 +46,11 @@
min-width: 5vh;
}
textarea {
width: 95%;
}
select {
width: 100%;
}
input {
width: 90%;
}
td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea {
border: 2px solid var(--c_purple);
border-radius: 0.5vh;
}
#tableMain tbody tr td button {
padding: 0;
border: 0;
margin: 0;
text-decoration: none;
}
#tableMain tbody tr td table thead tr th.id_variation_type, #tableMain tbody tr td table tbody tr td.id_variation_type, #tableMain tbody tr td table thead tr th.id_variation, #tableMain tbody tr td table tbody tr td.id_variation {
width: 47.5%;
}

View File

@@ -107,50 +107,16 @@
width: 5vh;
min-width: 5vh;
}
/*
nips
*/
/*
.row-new {
visibility: hidden;
}
*/
textarea {
width: 95%;
}
select {
width: 100%;
}
input {
width: 90%;
}
td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea {
border: 2px solid var(--c_purple);
border-radius: 0.5vh;
}
#tableMain tbody tr td button {
padding: 0;
border: 0;
margin: 0;
text-decoration: none;
}
#tableMain tbody tr td table thead tr th.id_variation_type, #tableMain tbody tr td table tbody tr td.id_variation_type, #tableMain tbody tr td table thead tr th.id_variation, #tableMain tbody tr td table tbody tr td.id_variation {
width: 47.5%;
}
/*
select.id_variation, select.id_variation_type {
max-width: 40% !important;
}
*/
/*# sourceMappingURL=store_product_categories.bundle.css.map*/

View File

@@ -171,13 +171,6 @@ td > input, td > select, td > textarea, .container-input > input, .container-inp
border-radius: 0.5vh;
}
#tableMain tbody tr td button {
padding: 0;
border: 0;
margin: 0;
text-decoration: none;
}
#tableMain tbody tr td table thead tr th.id_variation_type, #tableMain tbody tr td table tbody tr td.id_variation_type, #tableMain tbody tr td table thead tr th.id_variation, #tableMain tbody tr td table tbody tr td.id_variation {
width: 47.5%;
}

View File

@@ -2463,7 +2463,6 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupButtonsAddSaveCancel",
value: function hookupButtonsAddSaveCancel() {
this.hookupButtonAddRowTable();
this.hookupButtonSave();
this.hookupButtonCancel();
this.toggleShowButtonsSaveCancel(false);
@@ -2555,14 +2554,6 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
button.classList.add(flagCollapsed);
});
}
}, {
key: "hookupButtonAddRowTable",
value: function hookupButtonAddRowTable() {
var _this8 = this;
this.hookupEventHandler("click", idFormFilters + ' button.' + flagAdd, function (event, button) {
_this8.handleClickAddRowTable(event, button);
});
}
}, {
key: "handleClickAddRowTable",
value: function handleClickAddRowTable(event, button) {
@@ -2591,14 +2582,14 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupTableMain",
value: function hookupTableMain() {
var _this9 = this;
var _this8 = this;
if (this.constructor === TableBasePage) {
throw new Error("Must implement hookupTableMain() method.");
}
if (true) {
// _rowBlank == null) {
Events.initialiseEventHandler(idTableMain, flagInitialised, function (table) {
_this9.cacheRowBlank();
_this8.cacheRowBlank();
});
}
}
@@ -2643,9 +2634,9 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupChangeHandlerTableCells",
value: function hookupChangeHandlerTableCells(inputSelector) {
var _this10 = this;
var _this9 = this;
var handler = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (event, element) {
_this10.handleChangeNestedElementCellTable(event, element);
_this9.handleChangeNestedElementCellTable(event, element);
};
Events.initialiseEventHandler(inputSelector, flagInitialised, function (input) {
input.addEventListener("change", function (event) {
@@ -2789,9 +2780,9 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupChangeHandlerTableCellsWhenNotCollapsed",
value: function hookupChangeHandlerTableCellsWhenNotCollapsed(inputSelector) {
var _this11 = this;
var _this10 = this;
var handler = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (event, element) {
if (!element.classList.contains(flagCollapsed)) _this11.handleChangeNestedElementCellTable(event, element);
if (!element.classList.contains(flagCollapsed)) _this10.handleChangeNestedElementCellTable(event, element);
};
this.hookupEventHandler("change", inputSelector, handler);
}
@@ -2871,10 +2862,10 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupFieldsActive",
value: function hookupFieldsActive() {
var _this12 = this;
var _this11 = this;
var flagTable = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var handleClickRowNew = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (event, element) {
_this12.handleClickAddRowTable(event, element);
_this11.handleClickAddRowTable(event, element);
};
var selectorButton = 'table' + (Validation.isEmpty(flagTable) ? '' : '.' + flagTable) + ' > tbody > tr > td.' + flagActive + ' button';
var selectorButtonDelete = selectorButton + '.' + flagDelete;
@@ -2889,16 +2880,19 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupButtonsRowDelete",
value: function hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete) {
var _this13 = this;
var _this12 = this;
this.hookupEventHandler("click", selectorButtonDelete, function (event, element) {
_this13.handleClickButtonRowDelete(event, element, selectorButtonDelete, selectorButtonUndelete);
_this12.handleClickButtonRowDelete(event, element, selectorButtonDelete, selectorButtonUndelete);
});
}
}, {
key: "handleClickButtonRowDelete",
value: function handleClickButtonRowDelete(event, element, selectorButtonDelete, selectorButtonUndelete) {
// let row = DOM.getRowFromElement(element);
var row = DOM.getRowFromElement(element);
// row.classList.add(flagDelete);
if (row.classList.contains(flagRowNew) && !DOM.hasDirtyChildrenContainer(row)) {
row.parentNode.removeChild(row);
}
var buttonAdd = element.cloneNode(false); // document.createElement("button");
buttonAdd.classList.remove(flagInitialised);
buttonAdd.classList.remove(flagDelete);
@@ -2913,9 +2907,9 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupButtonsRowUndelete",
value: function hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete) {
var _this14 = this;
var _this13 = this;
this.hookupEventHandler("click", selectorButtonUndelete, function (event, element) {
_this14.handleClickButtonRowUndelete(event, element, selectorButtonDelete, selectorButtonUndelete);
_this13.handleClickButtonRowUndelete(event, element, selectorButtonDelete, selectorButtonUndelete);
});
}
}, {
@@ -2943,15 +2937,15 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupTableCellDdlPreviews",
value: function hookupTableCellDdlPreviews(cellSelector, optionList) {
var _this15 = this;
var _this14 = this;
var ddlHookup = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (cellSelector) {
_this15.hookupTableCellDdls(cellSelector);
_this14.hookupTableCellDdls(cellSelector);
};
var changeHandler = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function (event, element) {
_this15.handleChangeNestedElementCellTable(event, element);
_this14.handleChangeNestedElementCellTable(event, element);
};
this.hookupEventHandler("click", cellSelector, function (event, td) {
_this15.handleClickTableCellDdlPreview(event, td, optionList, cellSelector, function (cellSelector) {
_this14.handleClickTableCellDdlPreview(event, td, optionList, cellSelector, function (cellSelector) {
ddlHookup(cellSelector, function (event, element) {
changeHandler(event, element);
});
@@ -2962,9 +2956,9 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupTableCellDdls",
value: function hookupTableCellDdls(ddlSelector) {
var _this16 = this;
var _this15 = this;
var changeHandler = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (event, element) {
_this16.handleChangeNestedElementCellTable(event, element);
_this15.handleChangeNestedElementCellTable(event, element);
};
this.hookupEventHandler("change", ddlSelector, function (event, element) {
changeHandler(event, element);
@@ -2973,9 +2967,9 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "handleClickTableCellDdlPreview",
value: function handleClickTableCellDdlPreview(event, td, optionObjectList, cellSelector) {
var _this17 = this;
var _this16 = this;
var ddlHookup = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : function (cellSelector) {
_this17.hookupTableCellDdls(cellSelector);
_this16.hookupTableCellDdls(cellSelector);
};
if (td.querySelector('select')) return;
// td.removeEventListener("click", ddlHookup);
@@ -3036,14 +3030,14 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupTableCellDDlPreviewsWhenNotCollapsed",
value: function hookupTableCellDDlPreviewsWhenNotCollapsed(cellSelector, optionList) {
var _this18 = this;
var _this17 = this;
var ddlHookup = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (event, element) {
_this18.hookupTableCellDdls(event, element);
_this17.hookupTableCellDdls(event, element);
};
this.hookupEventHandler("click", cellSelector, function (event, td) {
var div = td.querySelector('div');
if (!div || div.classList.contains(flagCollapsed)) return;
_this18.handleClickTableCellDdlPreview(event, td, optionList, cellSelector, function (event, element) {
_this17.handleClickTableCellDdlPreview(event, td, optionList, cellSelector, function (event, element) {
ddlHookup(event, element);
});
});
@@ -3051,9 +3045,9 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupProductCategoryDdls",
value: function hookupProductCategoryDdls(ddlSelector) {
var _this19 = this;
var _this18 = this;
this.hookupChangeHandlerTableCells(ddlSelector, function (event, element) {
_this19.handleChangeProductCategoryDdl(event, element);
_this18.handleChangeProductCategoryDdl(event, element);
});
}
}, {
@@ -3087,15 +3081,15 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupPreviewsProductPermutationVariation",
value: function hookupPreviewsProductPermutationVariation() {
var _this20 = this;
var _this19 = this;
this.hookupEventHandler("click", idTableMain + ' td.' + flagProductVariations, function (event, element) {
return _this20.handleClickProductPermutationVariationsPreview(event, element);
return _this19.handleClickProductPermutationVariationsPreview(event, element);
});
}
}, {
key: "handleClickProductPermutationVariationsPreview",
value: function handleClickProductPermutationVariationsPreview(event, element) {
var _this21 = this;
var _this20 = this;
var tblVariations = element.querySelector('table.' + flagProductVariations);
if (!Validation.isEmpty(tblVariations)) return;
this.toggleColumnCollapsed(flagProductVariations, false);
@@ -3124,7 +3118,7 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
var tbody = document.createElement("tbody");
if (!Validation.isEmpty(permutationVariations)) {
permutationVariations.forEach(function (permutationVariation, index) {
_this21.addProductPermutationVariationRow(tbody, permutationVariation);
_this20.addProductPermutationVariationRow(tbody, permutationVariation);
});
}
tblVariations.appendChild(tbody);
@@ -3280,13 +3274,13 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupButtonsProductPermutationVariationAddDelete",
value: function hookupButtonsProductPermutationVariationAddDelete() {
var _this22 = this;
var _this21 = this;
var selectorButton = idTableMain + ' td.' + flagProductVariations + ' tr.' + flagProductVariation + ' button';
var selectorButtonDelete = selectorButton + '.' + flagDelete;
var selectorButtonUndelete = selectorButton + '.' + flagAdd;
this.hookupButtonsRowDelete(selectorButtonDelete, selectorButtonUndelete, function (event, element) {
_this22.handleClickButtonRowDelete(event, element);
_this22.updateProductPermutationVariations(element);
_this21.handleClickButtonRowDelete(event, element);
_this21.updateProductPermutationVariations(element);
});
this.hookupButtonsRowUndelete(selectorButtonDelete, selectorButtonUndelete);
this.hookupButtonsProductPermutationVariationAdd();
@@ -3294,9 +3288,9 @@ var TableBasePage = /*#__PURE__*/function (_BasePage) {
}, {
key: "hookupButtonsProductPermutationVariationAdd",
value: function hookupButtonsProductPermutationVariationAdd() {
var _this23 = this;
var _this22 = this;
this.hookupEventHandler("click", idTableMain + ' td.' + flagProductVariations + ' button.' + flagAdd, function (event, element) {
_this23.handleClickButtonProductPermutationVariationAdd(event, element);
_this22.handleClickButtonProductPermutationVariationAdd(event, element);
});
}
}, {

View File

@@ -140,7 +140,6 @@ export default class TableBasePage extends BasePage {
.catch(error => console.error('Error:', error));
}
hookupButtonsAddSaveCancel() {
this.hookupButtonAddRowTable();
this.hookupButtonSave();
this.hookupButtonCancel();
this.toggleShowButtonsSaveCancel(false);
@@ -216,9 +215,6 @@ export default class TableBasePage extends BasePage {
button.classList.add(flagCollapsed);
});
}
hookupButtonAddRowTable() {
this.hookupEventHandler("click", idFormFilters + ' button.' + flagAdd, (event, button) => { this.handleClickAddRowTable(event, button); });
}
handleClickAddRowTable(event, button) {
event.stopPropagation();
_rowBlank.setAttribute(this.constructor.attrIdRowObject, -1 - _rowBlank.getAttribute(this.constructor.attrIdRowObject));
@@ -496,8 +492,11 @@ export default class TableBasePage extends BasePage {
});
}
handleClickButtonRowDelete(event, element, selectorButtonDelete, selectorButtonUndelete) {
// let row = DOM.getRowFromElement(element);
let row = DOM.getRowFromElement(element);
// row.classList.add(flagDelete);
if (row.classList.contains(flagRowNew) && !DOM.hasDirtyChildrenContainer(row)) {
row.parentNode.removeChild(row);
}
let buttonAdd = element.cloneNode(false); // document.createElement("button");
buttonAdd.classList.remove(flagInitialised);
buttonAdd.classList.remove(flagDelete);