@nys-cui/cui-formpill 0.2.10 → 0.2.20

package/component-base/src/screens/index/index.js

@@ -0,0 +1,228 @@
+import SCREEN_TEMPLATE from './index.tpl.html';
+
+export default class INDEX extends SCREEN {
+    constructor(oProps) {
+        super(oProps);
+
+        this.sTitle = "Index";
+
+        this.oScreenCriteria = {
+            "resourceId": "index",
+            "renderModes": {
+                "default": {
+                    "layouts": []
+                }
+            }
+        }
+
+        this.sScreenTemplate = SCREEN_TEMPLATE;
+
+        this.config = {
+            "templates": {
+                "default": {
+                    "controls": [
+                        {
+                            "renderAs": "cui-listbox",
+                            "attributes": {
+                                "label": "Method",
+                                "componentKey": "operator",
+                                "required": "",
+                            },
+                            "children": [{
+                                "renderAs": "cui-item",
+                                "attributes": {
+                                    "label": "Tax Map ID Includes",
+                                    "value": "includes",
+                                    "pillValue": true
+                                }
+                            }, {
+                                "renderAs": "cui-item",
+                                "attributes": {
+                                    "label": "Tax Map ID Begins With",
+                                    "value": "begins",
+                                    "pillValue": true
+                                }
+                            }]
+                        },
+                        {
+                            "renderAs": "cui-text",
+                            "attributes": {
+                                "label": "Value",
+                                "componentKey": "value",
+                                "required": "",
+                                "validation": "checkMaxLength(30), isNumeric",
+                                'pillValue': true
+                            }
+                        }
+                    ]
+                }
+            },
+            "items": [
+                {
+                    "label": "Street Suffix",
+                    "value": "DE007",
+                    "controls": [
+                        {
+                            "renderAs": "cui-listbox",
+                            "attributes": {
+                                "label": "value",
+                                "componentKey": "value",
+                                "multiple": true,
+                                "search": true,
+                                "codedesc": true,
+                                'pillValue': true
+                            },
+                            "children": [
+                                {
+                                    "renderAs": "cui-item",
+                                    "attributes": {
+                                        "label": "Tax Map ID Includes",
+                                        "value": "includes"
+                                    }
+                                },
+                                {
+                                    "renderAs": "cui-item",
+                                    "attributes": {
+                                        "label": "Tax Map ID Begins With",
+                                        "value": "begins"
+                                    }
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    "label": "Owner Last Name",
+                    "value": "DE002",
+                    "template": "default"
+
+                },
+                {
+                    "label": "Neighborhood Code",
+                    "value": "DE018",
+                    "controls": [
+                        {
+                            "renderAs": "cui-listbox",
+                            "attributes": {
+                                "label": "Value",
+                                "componentKey": "value",
+                                "multiple": true,
+                                "search": true,
+                                "codedesc": true,
+                                "pillValue": true
+                            },
+                            "children": [{
+                                "renderAs": "cui-item",
+                                "attributes": {
+                                    "label": "Tax Map ID Includes",
+                                    "value": "includes"
+                                }
+                            }, {
+                                "renderAs": "cui-item",
+                                "attributes": {
+                                    "label": "Tax Map ID Begins With",
+                                    "value": "begins"
+                                }
+                            }],
+                            "relayEvents": ['change']
+                        }
+                    ]
+                },
+                {
+                    "label": "Total AV",
+                    "value": "DE014",
+                    "controls": [
+                        {
+                            "renderAs": "cui-text",
+                            "attributes": {
+                                "label": "Min",
+                                "componentKey": "first",
+                                "required": true,
+                                "validation": "checkMaxLength(12), isNumeric",
+                                "pillValue": true
+                            }
+                        },
+                        {
+                            "renderAs": "cui-text",
+                            "attributes": {
+                                "label": "Max",
+                                "componentKey": "last",
+                                "required": true,
+                                "validation": "checkMaxLength(12), isNumeric",
+                                "pillValue": true
+                            }
+                        }
+                    ]
+                },
+                {
+                    "label": "GIS",
+                    "value": "DE000",
+                    "controls": [
+                        {
+                            "renderAs": "cui-button",
+                            "attributes": {
+                                "text": "Launch GIS",
+                                "componentKey": "gis",
+                                "action": "launchGIS"
+                            }
+                        },
+                        {
+                            "renderAs": "cui-text",
+                            "attributes": {
+                                "readOnly": true,
+                                "label": "Parcels",
+                                "componentKey": "selected",
+                                "action": "launchGIS",
+                                "pillValue": true
+                            }
+                        },
+                        {
+                            "renderAs": "cui-hidden",
+                            "attributes": {
+                                "componentKey": "hidden"
+                            }
+                        }
+                    ]
+                }
+            ],
+            "relayEvents": ['change']
+        }
+    }
+
+    async init(oNavState) {
+
+    }
+
+    async preRender(oNavState, oScreenServiceResponse) {
+
+    }
+
+    async render(oNavState, oScreenServiceResponse, dScreenTemplate) {
+
+    }
+
+    async postRender(oNavState, oScreenServiceResponse, dScreen) {
+
+        let filter = dScreen.querySelector('cui-formpill');
+        filter.setState({ 'config': this.config }, true);
+        filter.setState({
+            "pills": [{
+                "value": "DE007", //Criteria value
+                "fields": { "value": "includes" },
+                "label": "Street Suffix",
+                "valueLabel": "Tax Map ID Includes"
+            }]
+        });
+    }
+
+    async search(evt) {
+        console.log(evt.detail.form.createFormData());
+
+    }
+
+    async launchGIS(evt) {
+        console.log(evt);
+
+        evt.detail.target.assignValueToFieldInPopover({ "selected": "10 Parcels", "hidden":"wskjfhgwuetgyfwkauyefkuaw" }, evt.detail.targetPopover);
+    }
+}

package/component-base/src/screens/index/index.tpl.html

@@ -0,0 +1,32 @@
+<div class="page">
+    <h2>Index page</h2>
+
+    <cui-section>
+        <div slot="section-contents">
+            <cui-form>
+                <div slot="form-contents">
+                    <div class="grid">
+                        <div class="row">
+                            <div class="col">
+                                <cui-formpill label="Add Criteria" addTitle="Add Criteria" updateTitle="Update Criteria" componentKEy="searchCriteria"></cui-formpill>
+                            </div>
+                        </div>
+                    </div>
+
+                     <div class="grid button-row">
+                            <div class="row">
+                                <div class="col">
+                                    <cui-button action="parcelSaveOption" text="Save Option"></cui-button>
+                                </div>
+                                <div class="col align-end">
+                                    <cui-button action="search" text="Search" primary="true"></cui-button>
+                                    <cui-button text="Reset" reset></cui-button>
+                                </div>
+                            </div>
+                        </div>
+                </div>
+            </cui-form>
+
+        </div>
+    </cui-section>
+</div>

package/component-base/src/spa.js

@@ -0,0 +1,117 @@
+import CUI_APP from '@nys-cui/cui-spa-app-class';
+
+import * as DOM from './modules/dom.js';
+
+//import component here
+//import [COMPONENT] from '../../dist/js/[component].js';
+import { CUI_FORMPILL, POPOVER_FORMPILL } from '../../src/cui-formpill.js';
+import CUI_POPOVER from '@nys-cui/cui-popover';
+import SECTION from '@nys-cui/cui-section';
+
+
+// First Party Web Components
+import ASOF from '@nys-cui/cui-asof';
+import BUTTON from '@nys-cui/cui-button';
+import CHECKBOX from '@nys-cui/cui-field-checkbox';
+import TEXT from '@nys-cui/cui-field-text';
+import DATE from '@nys-cui/cui-field-text-date';
+import DYNAMIC_BLOCK from '@nys-cui/cui-dynamic-block';
+import FORM from '@nys-cui/cui-form';
+import ICON from '@nys-cui/cui-icon';
+import INPUT_GROUP from '@nys-cui/cui-input-group';
+import { HELP, HELP_POPOVER } from '@nys-cui/cui-help';
+import HIDDEN from '@nys-cui/cui-hidden';
+import LINK from '@nys-cui/cui-link';
+import LISTBOX from '@nys-cui/cui-field-listbox';
+import { TABLE, TABLE_COL, TABLE_FOOT } from '@nys-cui/cui-table';
+import MODAL from '@nys-cui/cui-modal';
+import TEXTAREA from '@nys-cui/cui-field-textarea';
+import { TOAST, TOASTER } from '@nys-cui/cui-toast';
+import { BUTTON_MENU, POPOVER } from '@nys-cui/cui-button-menu';
+import CUI_MESSAGE from '@nys-cui/cui-message'
+import CUI_MESSAGE_LIST from '@nys-cui/cui-message-list';
+import { TREE, TREE_BRANCH, TREE_LEAF, TREE_FILTER } from '@nys-cui/cui-tree';
+import { CUI_TABS } from '@nys-cui/cui-tabs';
+
+class APP extends CUI_APP {
+    constructor() {
+        super('script#spa');
+
+        customElements.define('cui-formpill-popover', POPOVER_FORMPILL);
+        customElements.define('cui-formpill', CUI_FORMPILL);
+
+        // Define global components used by the project as a whole
+        customElements.define("cui-asof", ASOF);
+        customElements.define("cui-button", BUTTON);
+        customElements.define("cui-checkbox", CHECKBOX);
+        customElements.define("cui-dynamic-block", DYNAMIC_BLOCK)
+        customElements.define("cui-form", FORM);
+        customElements.define("cui-icon", ICON);
+        customElements.define('cui-help', HELP);
+        customElements.define('help-popover', HELP_POPOVER);
+        customElements.define('cui-hidden', HIDDEN);
+        customElements.define('cui-link', LINK);
+        customElements.define('cui-listbox', LISTBOX);
+        customElements.define('cui-section', SECTION);
+        customElements.define('cui-table', TABLE);
+        customElements.define('cui-table-col', TABLE_COL);
+        customElements.define('cui-table-foot', TABLE_FOOT);
+        customElements.define("cui-text", TEXT);
+        customElements.define("cui-date", DATE);
+        customElements.define("cui-textarea", TEXTAREA);
+
+        customElements.define("cui-tabs", CUI_TABS);
+        customElements.define("cui-tree", TREE);
+        customElements.define("cui-tree-branch", TREE_BRANCH);
+        customElements.define("cui-tree-leaf", TREE_LEAF);
+        customElements.define("cui-tree-filter", TREE_FILTER);
+
+        customElements.define('cui-button-menu', BUTTON_MENU);
+        customElements.define('button-menu-popover', POPOVER);
+        customElements.define("cui-message", CUI_MESSAGE);
+        customElements.define("cui-message-list", CUI_MESSAGE_LIST);
+        customElements.define("cui-modal", MODAL);
+        customElements.define('cui-toast', TOAST);
+        customElements.define('cui-toaster', TOASTER);
+        customElements.define("cui-input-group", INPUT_GROUP);
+        customElements.define('cui-popover', CUI_POPOVER);
+    }
+
+    async init() {
+        if (!this.__bInit) {
+            let oGlobalContextAppLevel = {
+                "globals": "value"
+            }
+
+            await super._init(this.oGlobalTemplates, oGlobalContextAppLevel);
+
+            DOM.clearElements(document.body);
+
+            this.dAppBody = DOM.createElement('div', { "id": "app-root" });
+
+            document.body.appendChild(this.dAppBody);
+
+            this._init_AppWrapper();
+
+            let sCurrentLocation = this.sLaunchPath.replace(this.sOrigin, '');
+
+            if (sCurrentLocation && sCurrentLocation.length && sCurrentLocation !== "/") {
+                await this.cRouter.navTo(sCurrentLocation);
+            }
+            else {
+                await this.cRouter.navTo("/");
+            }
+
+            this.__bInit = true;
+        }
+    }
+
+    _init_AppWrapper() {
+        this._dAppRoot = document.body;
+    }
+}
+
+(async function () {
+    const COMP_TEST_APP = new APP();
+    COMP_TEST_APP.init();
+})();

package/package.json

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