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.

business_objects/store/product.py

@@ -272,11 +272,17 @@ class Product(SQLAlchemy_ABC, Store_Base):
                 return index_permutation
         raise ValueError(f"{av.error_msg_str(id_permutation, 'id_permutation', 'Product.get_index_permutation_from_id', int)}\nPermutation ID not found.")
     """
+    """
     def add_product_variation(self, variation):
         av.val_instance(variation, 'variation', 'Product.add_product_variation', Product_Variation)
         # Helper_App.console_log(f'variation: {variation}')
         index_permutation = self.permutation_index[variation.id_permutation] # self.get_index_permutation_from_id(variation.id_permutation)
         self.permutations[index_permutation].add_product_variation(variation)
+    """
+    def add_product_variation_type(self, variation_type):
+        variation = variation_type.variations[0]
+        index_permutation = self.permutation_index[variation.id_permutation]
+        self.permutations[index_permutation].add_product_variation_type(variation_type)
     def add_product_price(self, price):
         av.val_instance(price, 'price', 'Product.add_product_price', Product_Price)
         index_permutation = self.permutation_index[price.id_permutation] # self.get_index_permutation_from_id(price.id_permutation)

business_objects/store/product_category.py

@@ -14,7 +14,8 @@ Business object for product category
 import lib.argument_validation as av
 from business_objects.db_base import SQLAlchemy_ABC, Get_Many_Parameters_Base
 from business_objects.store.product import Product, Product_Permutation, Product_Price
-from business_objects.store.product_variation import Product_Variation
+# from business_objects.store.product_variation import Product_Variation
+from business_objects.store.product_variation_type import Product_Variation_Type
 from business_objects.store.image import Image
 from business_objects.store.delivery_option import Delivery_Option
 from business_objects.store.discount import Discount
@@ -115,10 +116,17 @@ class Product_Category(SQLAlchemy_ABC, Store_Base):
         index_product = self.get_index_product_from_id(permutation.id_product)
         # index_product = self.product_index[permutation.id_product]
         self.products[index_product].add_product_permutation(permutation)
+    """
     def add_product_variation(self, variation):
         av.val_instance(variation, 'variation', 'Category.add_product_variation', Product_Variation)
         index_product = self.get_index_product_from_id(variation.id_product)
         self.products[index_product].add_product_variation(variation)
+    """ 
+    def add_product_variation_type(self, variation_type):
+        av.val_instance(variation_type, 'variation_type', 'Category.add_product_variation_type', Product_Variation_Type)
+        variation = variation_type.variations[0]
+        index_product = self.get_index_product_from_id(variation.id_product)
+        self.products[index_product].add_product_variation_type(variation_type)
     def add_product_price(self, price):
         av.val_instance(price, 'price', 'Category.add_product_price', Product_Price)
         index_product = self.get_index_product_from_id(price.id_product)
@@ -352,10 +360,17 @@ class Product_Category_Container(Store_Base):
         av.val_instance(permutation, 'permutation', 'Container_Product_Categories.add_product_permutation', Product_Permutation)
         index_category = self.get_index_category_from_id(permutation.id_category)
         self.categories[index_category].add_product_permutation(permutation)
+    """
     def add_product_variation(self, variation):
         av.val_instance(variation, 'variation', 'Container_Product_Categories.add_product_variation', Product_Variation)
         index_category = self.get_index_category_from_id(variation.id_category)
         self.categories[index_category].add_product_variation(variation)
+    """
+    def add_product_variation_type(self, variation_type):
+        av.val_instance(variation_type, 'variation_type', 'Container_Product_Categories.add_product_variation_type', Product_Variation_Type)
+        variation = variation_type.variations[0]
+        index_category = self.get_index_category_from_id(variation.id_category)
+        self.categories[index_category].add_product_variation_type(variation_type)
     def add_product_price(self, price):
         av.val_instance(price, 'price', 'Container_Product_Categories.add_product_price', Product_Price)
         index_category = self.get_index_category_from_id(price.id_category)

business_objects/store/product_permutation.py

@@ -302,7 +302,7 @@ class Product_Permutation(db.Model, Store_Base):
             self.FLAG_CAN_VIEW: self.can_view,
             self.FLAG_CAN_EDIT: self.can_edit,
             self.FLAG_CAN_ADMIN: self.can_admin,
-            self.FLAG_PRODUCT_VARIATIONS: [variation_type.to_json() for variation_type in self.variation_tree.get_product_variation_types()],
+            self.FLAG_PRODUCT_VARIATIONS: [] if self.variation_tree is None else [variation_type.to_json() for variation_type in self.variation_tree.get_product_variation_types()],
             self.FLAG_PRODUCT_IMAGE: [image.to_json() for image in self.images],
             self.FLAG_DELIVERY_OPTION: [option.to_json() for option in self.delivery_options],
             self.FLAG_PRODUCT_PRICE: [price.to_json() for price in self.prices],
@@ -395,10 +395,10 @@ class Product_Permutation(db.Model, Store_Base):
             price_GBP_full: {self.price_GBP_full}
             price_GBP_min: {self.price_GBP_min}
         """
-
+    """
     def add_product_variation(self, variation):
         _m = 'Product_Permutation.add_product_variation'
-        """
+        ""
         av.val_instance(variation, 'variation', _m, Product_Variation)
         try:
             self.variation_index[variation.id_variation]
@@ -406,11 +406,18 @@ class Product_Permutation(db.Model, Store_Base):
         except KeyError:
             self.variation_index[variation.id_variation] = len(self.variations)
             self.variations.append(variation)
-        """
+        ""
         if self.variation_tree is None:
             self.variation_tree = Product_Variation_Tree.from_product_variation(variation)
         else:
             self.variation_tree.add_product_variation(variation)
+    """
+    def add_product_variation_type(self, variation_type):
+        _m = 'Product_Permutation.add_product_variation_type'
+        if self.variation_tree is None:
+            self.variation_tree = Product_Variation_Tree.from_product_variation_type(variation_type)
+        else:
+            self.variation_tree.add_product_variation_type(variation_type)
     def add_product_price(self, price):
         _m = 'Product_Permutation.add_product_price'
         av.val_instance(price, 'price', _m, Product_Price)

business_objects/store/product_variation_tree.py

@@ -11,6 +11,7 @@ Business object for product
 """
 
 # internal
+from business_objects.store.product_variation import Product_Variation
 from business_objects.store.product_variation_type import Product_Variation_Type
 from extensions import db
 from helpers.helper_app import Helper_App
@@ -49,9 +50,9 @@ class Product_Variation_Tree():
         node_root = Product_Variation_Tree_Node.from_variation_type_and_node_parent(variation_type_root, None)
         return cls.from_node_root(node_root)
     def is_equal(self, tree):
-        my_type_list = self.get_product_variations()
+        my_type_list = self.get_product_variation_types()
         sz_me = len(my_type_list)
-        other_type_list = tree.get_product_variations()
+        other_type_list = tree.get_product_variation_types()
         sz_other = len(other_type_list)
         is_equal = (sz_me == sz_other)
         if is_equal:
@@ -120,6 +121,7 @@ class Product_Variation_Tree():
             types.append(node.variation_type)
             node = node.nodes_child[0]
             at_leaf_node = node.is_leaf()
+        types.append(node.variation_type)
         return types
     """
     def get_product_variations(self):
@@ -140,7 +142,7 @@ class Product_Variation_Tree():
         preview_str = ''
         for variation_type in variation_types:
             is_first = (preview_str == '')
-            preview_str += f'{variation_type.name}: {variation_type.variations[0].name}'
+            preview_str += f'{variation_type.name_singular}: {variation_type.variations[0].name}'
             if is_first:
                 preview_str += '\n'
         Helper_App.console_log(f'preview_str: {preview_str}')

business_objects/store/product_variation_type.py

@@ -30,7 +30,7 @@ from operator import attrgetter
 
 class Product_Variation_Type(db.Model, Store_Base):
     NAME_ATTR_OPTION_VALUE: ClassVar[str] = Store_Base.ATTR_ID_PRODUCT_VARIATION_TYPE
-    NAME_ATTR_OPTION_TEXT = Store_Base.FLAG_NAME_SINGULAR
+    NAME_ATTR_OPTION_TEXT = Store_Base.FLAG_NAME
 
     id_type = db.Column(db.Integer, primary_key=True)
     code = db.Column(db.String(50))

datastores/datastore_store_base.py

@@ -119,9 +119,9 @@ class DataStore_Store_Base(DataStore_Base):
         cursor.nextset()
         result_set_4 = cursor.fetchall()
         for row in result_set_4:
-            new_variation = Product_Variation.from_DB_get_many_product_catalogue(row)
+            new_variation_type = Product_Variation_Type.from_DB_get_many_product_catalogue(row)
             try:
-                category_list.add_product_variation(new_variation)
+                category_list.add_product_variation_type(new_variation_type)
             except Exception as e:
                 Helper_App.console_log(f'Error adding variation: {e}')
 

static/css/pages/store/product_categories.css

@@ -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;
-}
-*/

static/css/pages/store/product_permutations.css

@@ -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%;
 }

static/css/pages/store/products.css

@@ -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%;
 }

static/dist/css/store_product_categories.bundle.css

@@ -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*/

static/dist/css/store_product_permutations.bundle.css

@@ -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%;
 }

static/dist/js/main.bundle.js

@@ -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);
+        _this21.handleClickButtonRowDelete(event, element);
-        _this22.updateProductPermutationVariations(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);
       });
     }
   }, {

static/js/pages/base_table.js

@@ -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);

templates/components/common/buttons/_buttons_save_cancel.html

@@ -3,7 +3,7 @@
 {% elif block_id == 'button_cancel' %}
 <button id="{{ model.ID_BUTTON_CANCEL }}" type="button" class="{{ model.FLAG_CANCEL }}">Cancel</button>
 {% elif block_id == 'button_add' %}
-<button id="{{ model.ID_BUTTON_ADD }}" type="button" class="{{ model.FLAG_ADD }}">Add new</button>
+<button type="button" class="{{ model.FLAG_ACTIVE }} {{ model.FLAG_ADD }}">+</button>
 {% elif block_id == 'button_confirm' %}
 <button id="{{ model.ID_BUTTON_CONFIRM }}" type="button" class="{{ model.FLAG_SUBMIT }}">Confirm</button>
 {% elif block_id == 'button_get_in_touch' %}
@@ -18,10 +18,12 @@
         {% set block_id = 'button_apply_filters' %}
         {% include 'components/common/buttons/_buttons_save_cancel.html' %}
     </div>
-    <div class="{{ model.FLAG_CONTAINER_INPUT }} {{ model.FLAG_COLUMN }}">
+    {#
-        {% set block_id = 'button_add' %}
+        <div class="{{ model.FLAG_CONTAINER_INPUT }} {{ model.FLAG_COLUMN }}">
-        {% include 'components/common/buttons/_buttons_save_cancel.html' %}
+            {% set block_id = 'button_add' %}
-    </div>
+            {% include 'components/common/buttons/_buttons_save_cancel.html' %}
+        </div>
+    #}
     <div class="{{ model.FLAG_COLUMN }}">
         <div class="{{ model.FLAG_CONTAINER_INPUT }}">
             {% set block_id = 'button_save' %}

templates/components/store/_row_manufacturing_purchase_order.html

@@ -33,9 +33,8 @@
                 {{ model.ATTR_VALUE_CURRENT }}="" {{ model.ATTR_VALUE_PREVIOUS }}=""
             ></div>
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = true %}
-            <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" checked {{ model.ATTR_VALUE_CURRENT }}="{{ model.FLAG_BOOL_TRUE }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.FLAG_BOOL_TRUE }}">
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% else %}
     <tr class="{{ model.FLAG_MANUFACTURING_PURCHASE_ORDER }}" {{ model.ATTR_ID_MANUFACTURING_PURCHASE_ORDER }}="{{ order.id_order }}">
@@ -79,8 +78,7 @@
                 {{ model.ATTR_VALUE_PREVIOUS }}="{{ order.price_total_local_VAT_incl }}"
             ></div>
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = order.active %}
-            <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" {% if order.active %}checked{% endif %} {{ model.ATTR_VALUE_CURRENT }}="{{ order.active | lower }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ order.active | lower }}">
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% endif %} 

templates/components/store/_row_product.html

@@ -23,9 +23,8 @@
         >
             <div class="{{ model.FLAG_ACCESS_LEVEL}}" {{ model.ATTR_ID_ACCESS_LEVEL }}="1">View</div>
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = true %}
-            <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" checked {{ model.ATTR_VALUE_CURRENT }}="{{ model.FLAG_BOOL_TRUE }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.FLAG_BOOL_TRUE }}">
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% else %}
     <tr class="{{ model.FLAG_PRODUCT }}" {{ model.ATTR_ID_PRODUCT }}="{{ product.id_product }}">
@@ -55,8 +54,7 @@
         >
             <div class="{{ model.FLAG_ACCESS_LEVEL}}" {{ model.ATTR_ID_ACCESS_LEVEL }}="{{ product.id_access_level_required }}" {{ model.ATTR_VALUE_CURRENT }}="{{ product.id_access_level_required }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ product.id_access_level_required }}">{{ product.name_access_level_required }}</div>
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = product.active %}
-            <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" {% if product.active %}checked{% endif %} {{ model.ATTR_VALUE_CURRENT }}="{{ product.active | lower }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ product.active | lower }}">
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% endif %}

templates/components/store/_row_product_category.html

@@ -15,9 +15,8 @@
         <td class="{{ model.FLAG_ACCESS_LEVEL }}" {{ model.ATTR_VALUE_CURRENT }}="1" {{ model.ATTR_VALUE_PREVIOUS }}="1">
             <div class="{{ model.FLAG_ACCESS_LEVEL}}" {{ model.ATTR_VALUE_CURRENT }}="1" {{ model.ATTR_VALUE_PREVIOUS }}="1">View</div>
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = true %}
-            <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" checked {{ model.ATTR_VALUE_CURRENT }}="{{ model.FLAG_BOOL_TRUE }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.FLAG_BOOL_TRUE }}">
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% else %}
     <tr class="{{ model.FLAG_PRODUCT_CATEGORY }}" {{ model.ATTR_ID_PRODUCT_CATEGORY }}="{{ category.id_category }}">
@@ -37,8 +36,7 @@
         <td class="{{ model.FLAG_ACCESS_LEVEL }}" {{ model.ATTR_VALUE_CURRENT }}="{{ category.id_access_level_required }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ category.id_access_level_required }}">
             <div class="{{ model.FLAG_ACCESS_LEVEL}}" {{ model.ATTR_VALUE_CURRENT }}="{{ category.id_access_level_required }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ category.id_access_level_required }}">{{ category.name_access_level_required }}</div>
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = category.active %}
-            <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" {% if category.active %}checked{% endif %} {{ model.ATTR_VALUE_CURRENT }}="{{ category.active | lower }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ category.active | lower }}">
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% endif %}

templates/components/store/_row_product_permutation.html

@@ -75,9 +75,8 @@
         <td class="{{ model.FLAG_LATENCY_MANUFACTURE }}">
             <input class="{{ model.FLAG_LATENCY_MANUFACTURE }}" type="number" min="0" value="1" {{ model.ATTR_VALUE_CURRENT }}="1" {{ model.ATTR_VALUE_PREVIOUS }}>
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = true %}
-            <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" {{ model.ATTR_VALUE_CURRENT }}="{{ model.FLAG_BOOL_TRUE }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.FLAG_BOOL_TRUE }}" checked>
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% else %}
     <tr class="{{ model.FLAG_PRODUCT_PERMUTATION }}" {{ model.ATTR_ID_PRODUCT_PERMUTATION }}="{{ permutation.id_permutation }}">
@@ -166,8 +165,7 @@
         <td class="{{ model.FLAG_LATENCY_MANUFACTURE }}">
             <input class="{{ model.FLAG_LATENCY_MANUFACTURE }}" type="number" min="0" value="{{ permutation.latency_manufacture }}" {{ model.ATTR_VALUE_CURRENT }}="{{ permutation.latency_manufacture }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ permutation.latency_manufacture }}">
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = permutation.active %}
-            <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" {{ model.ATTR_VALUE_CURRENT }}="{{ permutation.active | lower }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ permutation.active | lower }}" {% if permutation.active %}checked{% endif %}>
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% endif %}

templates/components/store/_row_product_variation_type.html

@@ -15,15 +15,8 @@
         <td class="{{ model.FLAG_PRODUCT_VARIATIONS}} {{ model.FLAG_COLLAPSED }}">
             {% include 'components/store/_preview_product_variation_type_variations.html' %}
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = true %}
-            {# 
+        {% include 'components/store/_td_active.html' %}
-                <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" checked {{ model.ATTR_VALUE_CURRENT }}="{{ model.FLAG_BOOL_TRUE }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.FLAG_BOOL_TRUE }}">
-            #}
-            <button type="button" class="{{ model.FLAG_ACTIVE }} {{ model.FLAG_DELETE }}" 
-                {{ model.ATTR_VALUE_CURRENT }}="{{ model.FLAG_BOOL_TRUE }}" 
-                {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.FLAG_BOOL_TRUE }}"
-            >x</button>
-        </td>
     </tr>
 {% else %}
     <tr class="{{ model.FLAG_PRODUCT_VARIATION_TYPE }}" {{ model.ATTR_ID_PRODUCT_VARIATION_TYPE }}="{{ variation_type.id_type }}">
@@ -52,14 +45,7 @@
         <td class="{{ model.FLAG_PRODUCT_VARIATIONS}} {{ model.FLAG_COLLAPSED }}">
             {% include 'components/store/_preview_product_variation_type_variations.html' %}
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = variation_type.active %}
-            {# 
+        {% include 'components/store/_td_active.html' %}
-                <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" {% if variation_type.active %}checked{% endif %} {{ model.ATTR_VALUE_CURRENT }}="{{ variation_type.active | lower }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ variation_type.active | lower }}">
-            #}
-            <button type="button" class="{{ model.FLAG_ACTIVE }} {% if variation_type.active %}{{ model.FLAG_DELETE }}{% endif %}" 
-                {{ model.ATTR_VALUE_CURRENT }}="{{ variation_type.active | lower }}" 
-                {{ model.ATTR_VALUE_PREVIOUS }}="{{ variation_type.active | lower }}"
-            >{% if variation_type.active %}x{% else %}+{% endif %}</button>
-        </td>
     </tr>
 {% endif %}

templates/components/store/_row_stock_item.html

@@ -54,9 +54,8 @@
                 {{ model.ATTR_VALUE_PREVIOUS }} 
             />
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = true %}
-            <input type="checkbox" class="{{ model.FLAG_ACTIVE }}" checked {{ model.ATTR_VALUE_CURRENT }}="{{ model.FLAG_BOOL_TRUE }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.FLAG_BOOL_TRUE }}" />
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% else %}
     <tr class="{{ model.FLAG_STOCK_ITEM }}" {{ model.ATTR_ID_STOCK_ITEM }}="{{ stock_item.id_stock }}">
@@ -142,8 +141,7 @@
                 {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.format_datetime(stock_item.date_consumed) }}" 
             />
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = stock_item.active %}
-            <input type="checkbox" {{ "checked" if stock_item.active else "" }} {{ model.ATTR_VALUE_CURRENT }}="{{ stock_item.active | lower }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ stock_item.active | lower }}" />
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% endif %}

templates/components/store/_row_supplier.html

@@ -27,9 +27,8 @@
         <td class="{{ model.FLAG_CURRENCY }}" {{ model.ATTR_VALUE_CURRENT }}="" {{ model.ATTR_VALUE_PREVIOUS }}="">
             {% include 'components/store/_preview_DDL_currency.html' %}
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = true %}
-            <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" checked {{ model.ATTR_VALUE_CURRENT }}="{{ model.FLAG_BOOL_TRUE }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.FLAG_BOOL_TRUE }}">
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% else %}
     <tr class="{{ model.FLAG_SUPPLIER }}" {{ model.ATTR_ID_SUPPLIER }}="{{ supplier.id_supplier }}">
@@ -62,8 +61,7 @@
         <td class="{{ model.FLAG_CURRENCY }}" {{ model.ATTR_VALUE_CURRENT }}="{{ currency.id_currency }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ currency.id_currency }}">
             {% include 'components/store/_preview_DDL_currency.html' %}
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = supplier.active %}
-            <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" checked {{ model.ATTR_VALUE_CURRENT }}="{{ supplier.active | lower }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ supplier.active | lower }}">
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% endif %}

templates/components/store/_row_supplier_purchase_order.html

@@ -22,9 +22,8 @@
                 {{ model.ATTR_VALUE_CURRENT }}="" {{ model.ATTR_VALUE_PREVIOUS }}=""
             ></div>
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = true %}
-            <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" checked {{ model.ATTR_VALUE_CURRENT }}="{{ model.FLAG_BOOL_TRUE }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ model.FLAG_BOOL_TRUE }}">
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% else %}
     <tr class="{{ model.FLAG_SUPPLIER_PURCHASE_ORDER }}" {{ model.ATTR_ID_SUPPLIER_PURCHASE_ORDER }}="{{ order.id_order }}">
@@ -61,8 +60,7 @@
                 {{ model.ATTR_VALUE_PREVIOUS }}="{{ order.cost_total_local_VAT_incl }}"
             ></div>
         </td>
-        <td class="{{ model.FLAG_ACTIVE }}">
+        {% set active = order.active %}
-            <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" checked {{ model.ATTR_VALUE_CURRENT }}="{{ order.active | lower }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ order.active | lower }}">
+        {% include 'components/store/_td_active.html' %}
-        </td>
     </tr>
 {% endif %}

templates/components/store/_td_active.html

@@ -0,0 +1,13 @@
+
+
+{% with _active = (active is not defined or active or active is none) %}
+    <td class="{{ model.FLAG_ACTIVE }}">
+        {# 
+            <input class="{{ model.FLAG_ACTIVE }}" type="checkbox" {% if active %}checked{% endif %} {{ model.ATTR_VALUE_CURRENT }}="{{ active | lower }}" {{ model.ATTR_VALUE_PREVIOUS }}="{{ active | lower }}">
+        #}
+        <button type="button" class="{{ model.FLAG_ACTIVE }} {% if active %}{{ model.FLAG_DELETE }}{% endif %}" 
+            {{ model.ATTR_VALUE_CURRENT }}="{{ active | lower }}" 
+            {{ model.ATTR_VALUE_PREVIOUS }}="{{ active | lower }}"
+        >{% if active %}x{% else %}+{% endif %}</button>
+    </td>
+{% endwith %}

templates/pages/store/_manufacturing_purchase_orders.html

@@ -50,7 +50,10 @@
                 <th class="{{ model.FLAG_COST_TOTAL_LOCAL_VAT_INCL }}">Cost Total VAT Incl.</th>
                 <th class="{{ model.FLAG_PRICE_TOTAL_LOCAL_VAT_EXCL }}">Price Total VAT Excl.</th>
                 <th class="{{ model.FLAG_PRICE_TOTAL_LOCAL_VAT_INCL }}">Price Total VAT Incl.</th>
-                <th class="{{ model.FLAG_ACTIVE}}">Active</th>
+                <th class="{{ model.FLAG_ACTIVE}}">
+                    {% set block_id = 'button_add' %}
+                    {% include 'components/common/buttons/_buttons_save_cancel.html' %}
+                </th>
             </tr>
         </thead>
         <tbody>

templates/pages/store/_product_categories.html

@@ -27,40 +27,6 @@
                 {% endfor %}
             </div>
         </div>
-        {#
-        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
-            <div class="{{ model.FLAG_CONTAINER_INPUT }} {{ model.FLAG_ROW }}">
-                {% set block_id = 'button_apply_filters' %}
-                {% include 'components/common/buttons/_buttons_save_cancel.html' %}
-            </div>
-        </div>
-        <!--
-        -->
-        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
-            <div class="{{ model.FLAG_CONTAINER_INPUT }}">
-                {% set block_id = 'button_add' %}
-                {% include 'components/common/buttons/_buttons_save_cancel.html' %}
-            </div>
-        </div>
-        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
-            <div class="{{ model.FLAG_CONTAINER_INPUT }}">
-                {% set block_id = 'button_save' %}
-                {% include 'components/common/buttons/_buttons_save_cancel.html' %}
-            </div>
-        </div>
-        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
-            <div class="{{ model.FLAG_CONTAINER_INPUT }}">
-                {% set block_id = 'button_cancel' %}
-                {% include 'components/common/buttons/_buttons_save_cancel.html' %}
-            </div>
-        </div>
-        <!--
-        <div class="{{ model.FLAG_ROW }} {{ model.FLAG_CARD }}">
-            <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
-            </div>
-        </div>
-        -->
-        #}
         {% set block_id = 'buttons_table_default' %}
         {% include 'components/common/buttons/_buttons_save_cancel.html' %}
     </form>
@@ -74,7 +40,10 @@
                 <th class="{{ model.FLAG_NAME }}">Name</th>
                 <th class="{{ model.FLAG_DESCRIPTION }}">Description</th>
                 <th class="{{ model.FLAG_ACCESS_LEVEL }}">Access Level Required</th>
-                <th class="{{ model.FLAG_ACTIVE}}">Active</th>
+                <th class="{{ model.FLAG_ACTIVE}}">
+                    {% set block_id = 'button_add' %}
+                    {% include 'components/common/buttons/_buttons_save_cancel.html' %}
+                </th>
             </tr>
         </thead>
         <tbody>

templates/pages/store/_product_permutations.html

@@ -117,7 +117,10 @@
                 <th class="{{ model.FLAG_CURRENCY_COST }}">Cost Currency</th>
                 <th class="{{ model.FLAG_PROFIT_LOCAL_MIN }}">Profit Local Min</th>
                 <th class="{{ model.FLAG_LATENCY_MANUFACTURE }}">Manufacturing Latency</th>
-                <th class="{{ model.FLAG_ACTIVE }}">Active</th>
+                <th class="{{ model.FLAG_ACTIVE }}">
+                    {% set block_id = 'button_add' %}
+                    {% include 'components/common/buttons/_buttons_save_cancel.html' %}
+                </th>
             </tr>
         </thead>
         <tbody>

templates/pages/store/_product_variations.html

@@ -23,12 +23,6 @@
                 {% endfor %}
             </div>
         </div>
-        <div class="{{ model.FLAG_CONTAINER }} {{ model.FLAG_COLUMN }}">
-            <div class="{{ model.FLAG_CONTAINER_INPUT }} {{ model.FLAG_ROW }}">
-                {% set block_id = 'button_apply_filters' %}
-                {% include 'components/common/buttons/_buttons_save_cancel.html' %}
-            </div>
-        </div>
         {% set block_id = 'buttons_table_default' %}
         {% include 'components/common/buttons/_buttons_save_cancel.html' %}
     </form>
@@ -43,7 +37,8 @@
                 <th class="{{ model.FLAG_NAME_PLURAL }}">Name Plural</th>
                 <th class="{{ model.FLAG_PRODUCT_VARIATIONS }} {{ model.FLAG_COLLAPSED }}">Variations</th>
                 <th class="{{ model.FLAG_ACTIVE}}">
-                    <button type="button" class="{{ model.FLAG_ACTIVE }} {{ model.FLAG_ADD }}">+</button>
+                    {% set block_id = 'button_add' %}
+                    {% include 'components/common/buttons/_buttons_save_cancel.html' %}
                 </th>
             </tr>
         </thead>

templates/pages/store/_products.html

@@ -63,7 +63,10 @@
                 <th class="{{ model.FLAG_NAME }}">Name</th>
                 <th class="{{ model.FLAG_HAS_VARIATIONS }}">Has Variations?</th>
                 <th class="{{ model.FLAG_ACCESS_LEVEL }}">Access Level Required</th>
-                <th class="{{ model.FLAG_ACTIVE}}">Active</th>
+                <th class="{{ model.FLAG_ACTIVE}}">
+                    {% set block_id = 'button_add' %}
+                    {% include 'components/common/buttons/_buttons_save_cancel.html' %}
+                </th>
             </tr>
         </thead>
         <tbody>

templates/pages/store/_stock_items.html

@@ -76,7 +76,10 @@
                 <th class="{{ model.FLAG_DATE_EXPIRATION }}">Date Expiration</th>
                 <th class="{{ model.FLAG_IS_CONSUMED }}">Is Consumed</th>
                 <th class="{{ model.FLAG_DATE_CONSUMED }}">Date Consumed</th>
-                <th class="{{ model.FLAG_ACTIVE }}">Active</th>
+                <th class="{{ model.FLAG_ACTIVE }}">
+                    {% set block_id = 'button_add' %}
+                    {% include 'components/common/buttons/_buttons_save_cancel.html' %}
+                </th>
             </tr>
         </thead>
         <tbody>

templates/pages/store/_supplier_purchase_orders.html

@@ -46,7 +46,10 @@
                 <th class="{{ model.FLAG_CURRENCY }}">Currency</th>
                 <th class="{{ model.FLAG_COST_TOTAL_LOCAL_VAT_EXCL }}">Cost Total VAT Excl.</th>
                 <th class="{{ model.FLAG_COST_TOTAL_LOCAL_VAT_INCL }}">Cost Total VAT Incl.</th>
-                <th class="{{ model.FLAG_ACTIVE}}">Active</th>
+                <th class="{{ model.FLAG_ACTIVE}}">
+                    {% set block_id = 'button_add' %}
+                    {% include 'components/common/buttons/_buttons_save_cancel.html' %}
+                </th>
             </tr>
         </thead>
         <tbody>

templates/pages/store/_suppliers.html

@@ -32,7 +32,10 @@
                 <th class="{{ model.FLAG_EMAIL }}">Email</th>
                 <th class="{{ model.FLAG_WEBSITE }}">Website</th>
                 <th class="{{ model.FLAG_CURRENCY }}">Currency</th>
-                <th class="{{ model.FLAG_ACTIVE}}">Active</th>
+                <th class="{{ model.FLAG_ACTIVE}}">
+                    {% set block_id = 'button_add' %}
+                    {% include 'components/common/buttons/_buttons_save_cancel.html' %}
+                </th>
             </tr>
         </thead>
         <tbody>