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

static/js/components/common/inputs/input_date.js

@@ -1,5 +1,5 @@
 
-import Validation from "./lib/validation.js";
+import Validation from "../../../lib/validation.js";
 
 
 // Date picker inputs
@@ -99,7 +99,7 @@ function turnInputIntoDatePicker(input, notFuture, notPast, exceptionValueArray)
     input.addEventListener('contextmenu', function() { this.datepicker('hide'); });
 
     // Disable autocomplete suggestions appearing when clicking on input
-    input.attr('autocomplete', 'off');
+    input.getAttribute('autocomplete', 'off');
 }
 
 function setDatePickerDate(input, objDate) {

static/js/components/common/inputs/select.js

@@ -2,14 +2,14 @@
 
 function handleSelectCollapse(elementSelect) {
     let optionSelected = document.querySelectorAll(elementSelect).querySelector('option:selected');
-    optionSelected.text(optionSelected.attr(attrTextCollapsed));
+    optionSelected.text(optionSelected.getAttribute(attrTextCollapsed));
     console.log('collapsed: ', optionSelected.text());
     optionSelected.classList.remove(flagExpanded);
     optionSelected.classList.add(flagCollapsed);
 }
 function handleSelectExpand(elementSelect) {
     let optionSelected = document.querySelectorAll(elementSelect).querySelector('option:selected');
-    optionSelected.text(optionSelected.attr(attrTextExpanded));
+    optionSelected.text(optionSelected.getAttribute(attrTextExpanded));
     console.log('expanded: ', optionSelected.text());
     optionSelected.classList.remove(flagCollapsed);
     optionSelected.classList.add(flagExpanded);

static/js/components/common/inputs/textarea.js

@@ -1,5 +1,5 @@
 
-import Validation from "./lib/validation.js";
+import Validation from "../../../lib/validation.js";
 
 export default class TextArea {
     removeBlankTextAreaLines(textarea) {
@@ -25,7 +25,7 @@ export default class TextArea {
 
         // Clear style height and set rows = 1
         elTextarea.style.removeProperty('height');
-        textarea.attr('rows', 1);
+        textarea.getAttribute('rows', 1);
 
         const paddingTop = parseCSSPropertyToFloat(textarea, 'padding-top');
         const paddingBottom= parseCSSPropertyToFloat(textarea, 'padding-bottom');

static/js/components/common/table.js

@@ -1,5 +1,5 @@
 
-import Validation from "./lib/validation.js";
+import Validation from "../../lib/validation.js";
 
 
 export default class Table {

static/js/components/common/temporary/overlay_confirm.js

@@ -0,0 +1,26 @@
+
+import Events from "../../../lib/events.js";
+
+export default class OverlayConfirm {
+    static hookup(callbackSuccess) {
+        Events.initialiseEventHandler(idOverlayConfirm + ' button.' + flagCancel, flagInitialised, (buttonCancel) => {
+            buttonCancel.addEventListener('click', () => {
+                let overlay = document.querySelector(idOverlayConfirm);
+                overlay.style.visibility = 'hidden';
+            });
+        });
+        Events.initialiseEventHandler(idOverlayConfirm + ' button.' + flagSubmit, flagInitialised, (buttonConfirm) => {
+            buttonConfirm.addEventListener('click', () => {
+                let overlay = document.querySelector(idOverlayConfirm);
+                let textarea = overlay.querySelector('textarea');
+                overlay.style.visibility = 'hidden';
+                callbackSuccess(textarea.value);
+            });
+        });
+    }
+    static show() {
+        let overlay = document.querySelector(idOverlayConfirm);
+        overlay.classList.remove(flagCollapsed);
+        overlay.style.visibility = 'visible';
+    }
+}

static/js/components/common/temporary/overlay_error.js

@@ -0,0 +1,19 @@
+
+import Events from "../../../lib/events.js";
+
+export default class OverlayError {
+    static hookup() {
+        Events.initialiseEventHandler(idOverlayError + ' button.' + flagCancel, flagInitialised, (buttonCancel) => {
+            buttonCancel.addEventListener('click', () => {
+                let overlay = document.querySelector(idOverlayError);
+                overlay.style.visibility = 'hidden';
+            });
+        });
+    }
+    static show(msgError) {
+        let overlay = document.querySelector(idOverlayError);
+        let labelError = overlay.querySelector(idLabelError);
+        labelError.innerText = msgError;
+        overlay.style.visibility = 'visible';
+    }
+}