@nys-cui/cui-formpill 0.1.0 → 0.2.0

package/package.json

@@ -6,7 +6,7 @@
     },
     "main": "./dist/js/cui-formpill.js",
     "type": "module",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "scripts": {
         "clean": "rm -rf ./dist",
         "build": "npm run clean && cui --dep",

package/src/cui-formpill.js

@@ -7,6 +7,7 @@ class CUI_FORMPILL_PILL extends HTMLElement {
 
         this.attachShadow({ mode: 'open' });
 
+        this._connected = false;
         this._state = {};
 
         this.oPropsToStateNames = {
@@ -50,8 +51,7 @@ class CUI_FORMPILL_PILL extends HTMLElement {
     setState(props) {
         // Need to map props to state variable names if we want to keep them prefixed. 
         this._state = Object.assign(this._state, this.normalizeProps(props));
-
-        this.render();
+        if (this._connected) this.render();
     }
 
     clearSlottedElements(slotName) {
@@ -90,7 +90,7 @@ class CUI_FORMPILL_PILL extends HTMLElement {
         this._state.sValue3 = (this.getAttribute('value3')) ? this.getAttribute('value3') : null;
         this._state.asValues = (this.getAttribute('values')) ? this.getAttribute('values') : null;
 
-        this._initialState = this._state;
+        this._connected = true;
         this.render();
     }
 
@@ -142,7 +142,6 @@ class CUI_FORMPILL_PILL extends HTMLElement {
 
         removeButton.addEventListener('click', (e) => {
             this.remove();
-
             this.dispatchEvent(myEvent)
         })
 
@@ -187,7 +186,8 @@ class CUI_FORMPILL extends HTMLElement {
             "html": "sHtmlContent",
             "config": "configData",
             "addTitle": "sAddTitle",
-            "updateTitle": "sUpdateTitle"
+            "updateTitle": "sUpdateTitle",
+            "value": "aoValue"
 
         }
 
@@ -205,15 +205,99 @@ class CUI_FORMPILL extends HTMLElement {
         </div>`;
     }
 
-    setState(props) {
+    setInitialState(state) {
+        for (let [k, v] of Object.entries(this._state)) {
+            switch (k) {
+                case "adPills":
+                    this._initialState[k] = [];
+                    for (let pill of v) {
+                        let copiedPill = document.createElement("cui-formpill-pill");
+                        if (!state) {
+                            for (const attrValue of structuredClone(pill.getAttributeNames()))
+                                copiedPill.setAttribute(attrValue, pill.getAttribute(attrValue));
+
+                        } else {
+
+                            for (const attrValue of structuredClone(pill.getAttributeNames()))
+                                copiedPill.setAttribute(attrValue, pill._state[pill.oPropsToStateNames[attrValue]]);
+
+                        }
+                        this._initialState[k].push(copiedPill);
+
+                    }
+                    break;
+
+                case "criteriaList":
+                    this._initialState[k] = structuredClone(v);
+                    break;
+
+                case "configData":
+                    this._initialState[k] = structuredClone(v);
+                    break;
+
+                default:
+                    this._initialState[k] = v;
+
+            }
+
+        }
+    }
+
+    setState(props, bOverrideInitialState = false) {
         // Need to map props to state variable names if we want to keep them prefixed. 
+        if (!this._initialState) this._initialState = {};
+
         this._state = Object.assign(this._state, this.normalizeProps(props));
 
         if (this._connected) {
             this.render();
         }
+
+        if (bOverrideInitialState) {
+            if (this._connected) {
+                this.setInitialState(true);
+            } else {
+                this.setInitialState();
+            }
+        }
     }
+    reset() {
 
+        for (const [k, v] of Object.entries(this._initialState)) {
+            switch (k) {
+                case "adPills":
+                    this._state[k] = [];
+                    for (const pill of v) {
+                        const myEvent = new CustomEvent("pill-removed", {
+                            detail: { pill: pill }
+                        });
+                        this.dispatchEvent(myEvent);
+                        let copiedPill = document.createElement("cui-formpill-pill");
+                        for (const attrValue of structuredClone(pill.getAttributeNames())) {
+                            copiedPill.setAttribute(attrValue, pill.getAttribute(attrValue));
+                        }
+                        this._state[k].push(copiedPill);
+
+                    }
+                    break;
+
+                case "criteriaList":
+                    this._state[k] = structuredClone(v);
+                    break;
+
+                case "configData":
+                    this._state[k] = structuredClone(v);
+                    break;
+
+                default:
+                    this._state[k] = v;
+
+            }
+
+        }
+
+        this.render(true);
+    }
     get label() {
 
         if (this.dLabelContents) {
@@ -270,15 +354,17 @@ class CUI_FORMPILL extends HTMLElement {
         this._state.sComponentKey = (this.getAttribute('componentKey')) ? this.getAttribute('componentKey') : "";
         this._state.bAccessibleHideLabel = this.hasAttribute('accessiblehidelabel') ? true : false;
         this._state.sPosition = (this.getAttribute('position')) ? this.getAttribute('position') : "bottom-center";
+        this._state.aoValue = (this.getAttribute('value')) ? this.getAttribute('value') : [];
 
         //Set initial state only once at connection to page. At this point any initial data should have been passed to the field. 
         if (!this._initialState || this._initialState == null) {
             // Shallow clone for now unless it's determined we need a deep clone. 
-            this._initialState = { ...this._state };
+            this._initialState = {};
         }
 
-        this._state.fGlobalBodyClick = this.globalBodyClick.bind(this);
+        this.fGlobalBodyClick = this.globalBodyClick.bind(this);
 
+        this.setInitialState();
         this.render();
     }
 
@@ -304,7 +390,7 @@ class CUI_FORMPILL extends HTMLElement {
     </div>`
     }
 
-    render() {
+    render(reset = false) {
         this.clearShadowDom(this.shadowRoot);
         this.clearSlottedElements("menu-trigger");
         this.clearSlottedElements("labelContents");
@@ -312,6 +398,25 @@ class CUI_FORMPILL extends HTMLElement {
 
         this.shadowRoot.innerHTML = `${this.sFieldLayout} `;
 
+        this._state.adPills = [];
+
+        if (this._state.configData?.filterCriteria && !this._state.configData.filterCriteria.loadedPills) {
+            this._state.configData.filterCriteria.loadedPills = []
+        }
+
+        if (this._state.aoValue && this._state.aoValue.length > 0 && this._state.configData?.filterCriteria?.loadedPills && reset === false) {
+            this._state.configData.filterCriteria.loadedPills = []
+            for (let pill of this._state.aoValue) {
+                this._state.configData.filterCriteria.loadedPills.push(pill);
+            }
+            this.addPillfromJSON();
+
+        } else if (reset === true) {
+            this.addPillfromJSON();
+        }
+
+
+
         let adSlots = this.shadowRoot.querySelectorAll('slot');
 
         if (adSlots.length) {
@@ -341,12 +446,40 @@ class CUI_FORMPILL extends HTMLElement {
         pillDiv.classList.add('pill-container');
         pillDiv.part = "pill-container"
         pillDiv.slot = "pill-container"
-        let dTriggerElem = document.createElement('button');
+        this.appendChild(label);
+        this.appendChild(pillDiv);
 
+        let dTriggerElem = document.createElement('button');
         if (this._state.adPills.length > 0) {
+
             for (let i = 0; i < this._state.adPills.length; i++) {
+
                 pillDiv.append(this._state.adPills[i])
+                const customEvent = new CustomEvent('pill-created', { detail: { pill: this._state.adPills[i] } });
+                this.dispatchEvent(customEvent);
+                this._state.adPills[i].addEventListener('pill_removed', (e) => {
+                    let removedValue = e.detail.state.sValue1;
+                    if (!this._state.criteriaList.some(item => item.value === removedValue)) {
+                        this._state.criteriaList.unshift(this._state.configData.filterCriteria.items.find(item => item.value === removedValue));
+                    }
+                    const myEvent = new CustomEvent("pill-removed", {
+                        detail: { pill: e.detail }
+                    });
+                    let index = this._state.adPills.findIndex(item => item._state == e.detail.state);
+
+                    if (index > 0) {
+                        this._state.adPills.splice(index, 1);
+
+                    } else if (index === 0) {
+                        this._state.adPills = [];
+                    }
+                    this.dispatchEvent(myEvent);
+                });
+                this.querySelectorAll('.pill-title')[pillDiv.children.length - 1].addEventListener('click', (e) => {
+                    this.menuTriggerOnClick(e.target.closest("cui-formpill-pill"));
+                });
             }
+
         }
 
         dTriggerElem.title = this._state.sLabel;
@@ -383,10 +516,8 @@ class CUI_FORMPILL extends HTMLElement {
             dTriggerElem.prepend(addIconDiv);
         }
 
-        this._state.dTriggerElem = dTriggerElem;
-        this.appendChild(label)
-        this.appendChild(pillDiv)
-        this.appendChild(this._state.dTriggerElem);
+        this.dTriggerElem = dTriggerElem;
+        this.appendChild(this.dTriggerElem);
 
         window.addEventListener('resize', (e) => {
             this.windowResize(e);
@@ -455,11 +586,11 @@ class CUI_FORMPILL extends HTMLElement {
 
         dPopoverHeader.appendChild(dPopoverTitle);
 
-        let closeButton =  document.createElement('button');
+        let closeButton = document.createElement('button');
         closeButton.classList.add('close-button');
         closeButton.textContent = '×'
         dPopoverHeader.appendChild(closeButton);
-        closeButton.addEventListener('click', () => {this.hidePopover()})
+        closeButton.addEventListener('click', () => { this.hidePopover() })
 
         let dPopoverFooter = document.createElement('div');
         dPopoverFooter.classList.add("popover-footer");
@@ -525,7 +656,7 @@ class CUI_FORMPILL extends HTMLElement {
 
     async displayPopover() {
 
-        let adPopoverElements = await this.createPopover(this._state.dTriggerElem);
+        let adPopoverElements = await this.createPopover(this.dTriggerElem);
         let dPopoverBody = adPopoverElements[0];
         let dPopoverContent = adPopoverElements[1];
         let dMenuPopover = adPopoverElements[2];
@@ -541,7 +672,7 @@ class CUI_FORMPILL extends HTMLElement {
         if (this._state.configData) {
             if (this._state.configData.filterCriteria) {
                 this.criteria = document.createElement('cui-listbox');
-                this.criteria.setAttribute('search', '')
+                this.criteria.setAttribute('search', '');
                 let items = []
 
                 if (this._state.criteriaList === null) {
@@ -558,7 +689,7 @@ class CUI_FORMPILL extends HTMLElement {
                         items.push(item);
                     }
                 }
-                
+
                 this.criteria.setState({ 'items': items, 'label': `${(this._state.configData.filterCriteria.fieldLabel) ? this._state.configData.filterCriteria.fieldLabel : 'Criteria'}` })
                 this.criteria.setAttribute('required', '');
                 this.criteria.setAttribute('componentKey', 'contextHeaderCriteria');
@@ -586,7 +717,7 @@ class CUI_FORMPILL extends HTMLElement {
                     this.hidePopover();
                 })
             }
-            document.body.addEventListener('click', this._state.fGlobalBodyClick, false);
+            document.body.addEventListener('click', this.fGlobalBodyClick, false);
         });
 
 
@@ -644,7 +775,7 @@ class CUI_FORMPILL extends HTMLElement {
                     this.hidePopover();
                 })
             }
-            document.body.addEventListener('click', this._state.fGlobalBodyClick, false);
+            document.body.addEventListener('click', this.fGlobalBodyClick, false);
         });
 
 
@@ -661,6 +792,7 @@ class CUI_FORMPILL extends HTMLElement {
             if (controls.options && controls.value) {
 
                 this.method = document.createElement('cui-listbox');
+                if (controls.search) this.method.setAttribute('search', '');
                 this.method.setState({ 'items': controls.options, 'label': `${(controls.fieldLabel) ? controls.fieldLabel : 'Method'}` });
                 this.method.setAttribute('value', pill._state.sValue2)
                 this.method.setAttribute('required', '');
@@ -743,6 +875,7 @@ class CUI_FORMPILL extends HTMLElement {
                     if (controls.options && controls.value) {
 
                         this.method = document.createElement('cui-listbox');
+                        if (controls.search) this.method.setAttribute("search", "");
                         this.method.setState({ 'items': controls.options, 'label': `${(controls.fieldLabel) ? controls.fieldLabel : 'Method'}` });
                         this.method.setAttribute('required', '');
                         this.method.setAttribute('componentKey', 'contextHeaderMethod');
@@ -764,6 +897,9 @@ class CUI_FORMPILL extends HTMLElement {
                         if (controls.value.multiple) {
                             this.dValueField.setAttribute('multiple', true)
                         }
+                        if (controls.value.search) {
+                            this.dValueField.setAttribute('search', true)
+                        }
                         dPopoverBody.insertBefore(this.dValueField, dPopoverFooter);
                     } else if (controls.value && controls.value.control) {
 
@@ -812,7 +948,6 @@ class CUI_FORMPILL extends HTMLElement {
                     formPill.setAttribute('value2', this.method.value)
                     formPill.setAttribute('value3', this.dValueField.value)
                     let pillText = `${this.criteria._state.aItems.find(item => item.value === this.criteria.value)?.label}:  ${this.dValueField.value}`
-
                     if (sFor === 'update') {
                         formPill.setState({
                             'value1': this.criteria.value, 'value2': this.method.value, 'value3': this.dValueField.value,
@@ -836,10 +971,19 @@ class CUI_FORMPILL extends HTMLElement {
                             if (!this._state.criteriaList.some(item => item.value === removedValue)) {
                                 this._state.criteriaList.unshift(this._state.configData.filterCriteria.items.find(item => item.value === removedValue));
                             }
-
                             const myEvent = new CustomEvent("pill-removed", {
                                 detail: { pill: e.detail }
                             });
+
+                            let index = this._state.adPills.findIndex(item => item._state == e.detail.state);
+
+                            //if(index > 0){
+                            this._state.adPills.splice(index, 1);
+
+                            //}else if(index === 0){
+                            //this._state.adPills = [];
+                            //}
+
                             this.dispatchEvent(myEvent);
                         });
                     }
@@ -855,8 +999,6 @@ class CUI_FORMPILL extends HTMLElement {
 
                     let curValue = this.criteria.value;
                     formPill.setAttribute('value1', curValue)
-
-
                     let pillText;
                     if (this.dValueField.value.indexOf(',') == -1) {
                         formPill.setAttribute('value2', this.dValueField.value)
@@ -908,6 +1050,15 @@ class CUI_FORMPILL extends HTMLElement {
                             const myEvent = new CustomEvent("pill-removed", {
                                 detail: { pill: e.detail }
                             });
+
+                            let index = this._state.adPills.findIndex(item => item._state == e.detail.state);
+
+                            //if(index > 0){
+                            this._state.adPills.splice(index, 1);
+
+                            //}else if(index === 0){
+                            //    this._state.adPills = [];
+                            //}
                             this.dispatchEvent(myEvent);
                         });
 
@@ -961,6 +1112,15 @@ class CUI_FORMPILL extends HTMLElement {
                             const myEvent = new CustomEvent("pill-removed", {
                                 detail: { pill: e.detail }
                             });
+                            let index = this._state.adPills.findIndex(item => item._state == e.detail.state);
+
+                            //if(index > 0){
+                            this._state.adPills.splice(index, 1);
+
+                            //}else if(index === 0){
+                            //this._state.adPills = [];
+                            //}
+
                             this.dispatchEvent(myEvent);
                         });
                     }
@@ -993,6 +1153,57 @@ class CUI_FORMPILL extends HTMLElement {
 
     }
 
+    addPillfromJSON() {
+        if (this._state?.configData?.filterCriteria?.loadedPills) {
+            for (let pill of this._state.configData.filterCriteria?.loadedPills) {
+                let formPill;
+                formPill = document.createElement('cui-formpill-pill');
+                this._state.adPills.push(formPill);
+
+                for (const [k, v] of Object.entries(pill)) {
+                    formPill.setAttribute(k, v);
+                }
+
+                let pillText;
+
+                if (pill.value2 != null && pill.value3 != null) {
+                    pillText = `${this._state.configData.filterCriteria.items.find(item => item.value === pill.value1)?.label}:  ${pill.value3}`
+                } else if (pill.values != null) {
+                    pillText = `${this._state.configData.filterCriteria.items.find(item => item.value === pill.value1)?.label}:  ${pill.values}`
+                } else if (pill.value2 != null) {
+                    pillText = `${this._state.configData.filterCriteria.items.find(item => item.value === pill.value1)?.label}:  ${pill.value2}`
+
+                }
+
+                formPill.setAttribute('text', pillText.slice(0, 30) + (pillText.length > 30 ? "..." : ""))
+                let items = [];
+                if (this._state.criteriaList === null) {
+                    for (let item of this._state.configData.filterCriteria.items) {
+                        let lbValue = { 'label': item.label, 'value': item.value };
+                        if (item.multiple) {
+                            lbValue.multiple = item.multiple
+                        }
+                        items.push(lbValue);
+                    }
+                    this._state.criteriaList = items;
+                } else {
+                    for (let item of this._state.criteriaList) {
+                        items.push(item);
+                    }
+                }
+                let updatedList = this._state.criteriaList.filter(item => {
+                    if (item.multiple) {
+                        return true;
+                    }
+                    return item.value !== pill.value1;
+                });
+
+                this._state.criteriaList = updatedList;
+
+            }
+        }
+    }
+
     validateRegion(dRegion) {
         let validationResult = this.cValidator.validateRegion(dRegion);
 
@@ -1048,7 +1259,7 @@ class CUI_FORMPILL extends HTMLElement {
             this._state.dMenuPopover = null;
         }
 
-        document.body.removeEventListener('click', this._state.fGlobalBodyClick);
+        document.body.removeEventListener('click', this.fGlobalBodyClick);
 
         this._state.bMenuDisplayed = false;
     }
@@ -1056,7 +1267,7 @@ class CUI_FORMPILL extends HTMLElement {
     disconnectedCallback() {
         this.hidePopover();
         // closeBtn.removeEventListener('click', (e));
-        document.body.removeEventListener('click', this._state.fGlobalBodyClick);
+        document.body.removeEventListener('click', this.fGlobalBodyClick);
     }
 
     // Utility function function to clear all elements from shadow root.