@quandis/qbo4.ui 4.0.1-CI-20240430-215338 → 4.0.1-CI-20240507-200005

package/src/qbo/qbo-form-edit.js

@@ -9,24 +9,67 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { elementDateTime } from './Program.js';
+const formEditMap = new Map();
+formEditMap.set('defaultLayout', (component) => {
+    return html `<div slot="content">
+        <span>Created:</span>
+        <br/>
+        <span>${elementDateTime(component.CreatedDate)}</span>
+        <br/>
+        <span>${component.CreatedPerson}</span>
+        <br/>
+        <br/>
+        <span>Updated:</span>
+        <br/>
+        <span>${elementDateTime(component.UpdatedDate)}</span>
+        <br/>
+        <span>${component.UpdatedPerson}</span>
+    </div>`;
+});
+formEditMap.set('createdLayout', (component) => {
+    return html `<div slot="content">
+        <span>Created:</span>
+        <br/>
+        <span>${elementDateTime(component.CreatedDate)}</span>
+        <br/>
+        <span>${component.CreatedPerson}</span>
+    </div>`;
+});
+formEditMap.set('updatedLayout', (component) => {
+    return html `<div slot="content">
+        <span>Updated:</span>
+        <br/>
+        <span>${elementDateTime(component.UpdatedDate)}</span>
+        <br/>
+        <span>${component.UpdatedPerson}</span>
+    </div>`;
+});
 let QboFormEdit = class QboFormEdit extends LitElement {
     constructor() {
         super(...arguments);
         this.buttonPrimaryClass = 'qbo-primary';
-        this.createdDate = null;
-        this.createdPerson = null;
+        this.data = {};
         this.divButtonGroupClass = 'qbo-btn-group';
         this.divFormActionClass = 'qbo-form-actions';
         this.divSectionHeaderClass = 'qbo-header';
         this.editLabel = 'Edit';
-        this.updatedDate = null;
-        this.updatedPerson = null;
+        this.infoButtonClass = 'qbo-btn-light';
+        this.infoIconClass = 'qbo-icon-info';
+        this.infoTitle = 'Last Updated';
+        this.popoverClass = 'qbo-float-end';
+        this.spanEditClass = 'qbo-icon-edit';
+        this.type = 'defaultLayout';
         this.renderInHost = true;
     }
     createRenderRoot() {
         return this.renderInHost ? this : super.createRenderRoot();
     }
     render() {
+        const data = this.closest('*[apiendpoint]');
+        if (this.type == null)
+            this.type = 'createdLayout';
+        const popover = formEditMap.has(this.type) ? formEditMap.get(this.type)(this.data) : null;
         return html `<slot>
             <div class="${this.divSectionHeaderClass}">
                 <hr />
@@ -34,7 +77,7 @@ let QboFormEdit = class QboFormEdit extends LitElement {
             <div class="${this.divFormActionClass}">
                 <div class="${this.divButtonGroupClass}">
                     <button type="button" class="${this.buttonPrimaryClass}">
-                        <span class="bi-pencil-square"> ${this.editLabel}</span>
+                        <span class="${this.spanEditClass}"> ${this.editLabel}</span>
                     </button>
                     <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
                     <ul class="dropdown-menu">
@@ -52,10 +95,11 @@ let QboFormEdit = class QboFormEdit extends LitElement {
                         </li>
                     </ul>
                 </div>
-                <qbo-popover>
-                    <button type="button" class="btn btn-light float-end" data-bs-toggle="popover" data-bs-placement="left" data-bs-container="body" title="Last Updated" data-bs-html="true" data-bs-content="Created:<br/>${this.createdDate}<br/>${this.createdPerson}<br/><br/>Updated:<br/>${this.updatedDate}<br/>${this.updatedPerson}">
-                        <i class="bi-info"></i>
+                <qbo-popover class="${this.popoverClass}">
+                    <button type="button" class="${this.infoButtonClass}" title="${this.infoTitle}">
+                        <i class="${this.infoIconClass}"></i>
                     </button>
+                    ${popover}
                 </qbo-popover>
             </div>
         </slot>`;
@@ -66,13 +110,9 @@ __decorate([
     __metadata("design:type", Object)
 ], QboFormEdit.prototype, "buttonPrimaryClass", void 0);
 __decorate([
-    property({ type: Date }),
+    property({ type: Object, attribute: false }),
     __metadata("design:type", Object)
-], QboFormEdit.prototype, "createdDate", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], QboFormEdit.prototype, "createdPerson", void 0);
+], QboFormEdit.prototype, "data", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
@@ -90,13 +130,29 @@ __decorate([
     __metadata("design:type", Object)
 ], QboFormEdit.prototype, "editLabel", void 0);
 __decorate([
-    property({ type: Date }),
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "infoButtonClass", void 0);
+__decorate([
+    property({ type: String }),
     __metadata("design:type", Object)
-], QboFormEdit.prototype, "updatedDate", void 0);
+], QboFormEdit.prototype, "infoIconClass", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
-], QboFormEdit.prototype, "updatedPerson", void 0);
+], QboFormEdit.prototype, "infoTitle", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "popoverClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "spanEditClass", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "type", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)

package/src/qbo/qbo-form-edit.ts

@@ -1,5 +1,43 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { elementDateTime } from './Program.js';
+
+type TemplateFunction = (component: any) => TemplateResult;
+const formEditMap: Map<string, TemplateFunction> = new Map();
+formEditMap.set('defaultLayout', (component: any) => {
+    return html`<div slot="content">
+        <span>Created:</span>
+        <br/>
+        <span>${elementDateTime(component.CreatedDate)}</span>
+        <br/>
+        <span>${component.CreatedPerson}</span>
+        <br/>
+        <br/>
+        <span>Updated:</span>
+        <br/>
+        <span>${elementDateTime(component.UpdatedDate)}</span>
+        <br/>
+        <span>${component.UpdatedPerson}</span>
+    </div>`;
+});
+formEditMap.set('createdLayout', (component: any) => {
+    return html`<div slot="content">
+        <span>Created:</span>
+        <br/>
+        <span>${elementDateTime(component.CreatedDate)}</span>
+        <br/>
+        <span>${component.CreatedPerson}</span>
+    </div>`;
+});
+formEditMap.set('updatedLayout', (component: any) => {
+    return html`<div slot="content">
+        <span>Updated:</span>
+        <br/>
+        <span>${elementDateTime(component.UpdatedDate)}</span>
+        <br/>
+        <span>${component.UpdatedPerson}</span>
+    </div>`;
+});
 
 @customElement('qbo-form-edit')
 export class QboFormEdit extends LitElement {
@@ -7,11 +45,8 @@ export class QboFormEdit extends LitElement {
     @property({ type: String })
     buttonPrimaryClass: String | null = 'qbo-primary';
 
-    @property({ type: Date })
-    createdDate = null;
-
-    @property({ type: String })
-    createdPerson = null;
+    @property({ type: Object, attribute: false })
+    data: Object = { };
 
     @property({ type: String })
     divButtonGroupClass: String | null = 'qbo-btn-group';
@@ -25,11 +60,23 @@ export class QboFormEdit extends LitElement {
     @property({ type: String })
     editLabel: String | null = 'Edit';
 
-    @property({ type: Date })
-    updatedDate = null;
+    @property({ type: String })
+    infoButtonClass: String | null = 'qbo-btn-light';
+
+    @property({ type: String })
+    infoIconClass: String | null = 'qbo-icon-info';
+
+    @property({ type: String })
+    infoTitle: String | null = 'Last Updated';
+
+    @property({ type: String })
+    popoverClass: String | null = 'qbo-float-end';
 
     @property({ type: String })
-    updatedPerson = null;
+    spanEditClass: String | null = 'qbo-icon-edit';
+
+    @property()
+    type: string | null = 'defaultLayout';
 
     @property({ type: Boolean })
     renderInHost = true;
@@ -39,6 +86,10 @@ export class QboFormEdit extends LitElement {
     }
 
     render() {
+        const data : any = this.closest('*[apiendpoint]');
+        if (this.type == null) this.type = 'createdLayout'
+        const popover = formEditMap.has(this.type) ? formEditMap.get(this.type)!(this.data) : null;
+
         return html`<slot>
             <div class="${this.divSectionHeaderClass}">
                 <hr />
@@ -46,7 +97,7 @@ export class QboFormEdit extends LitElement {
             <div class="${this.divFormActionClass}">
                 <div class="${this.divButtonGroupClass}">
                     <button type="button" class="${this.buttonPrimaryClass}">
-                        <span class="bi-pencil-square"> ${this.editLabel}</span>
+                        <span class="${this.spanEditClass}"> ${this.editLabel}</span>
                     </button>
                     <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
                     <ul class="dropdown-menu">
@@ -64,10 +115,11 @@ export class QboFormEdit extends LitElement {
                         </li>
                     </ul>
                 </div>
-                <qbo-popover>
-                    <button type="button" class="btn btn-light float-end" data-bs-toggle="popover" data-bs-placement="left" data-bs-container="body" title="Last Updated" data-bs-html="true" data-bs-content="Created:<br/>${this.createdDate}<br/>${this.createdPerson}<br/><br/>Updated:<br/>${this.updatedDate}<br/>${this.updatedPerson}">
-                        <i class="bi-info"></i>
+                <qbo-popover class="${this.popoverClass}">
+                    <button type="button" class="${this.infoButtonClass}" title="${this.infoTitle}">
+                        <i class="${this.infoIconClass}"></i>
                     </button>
+                    ${popover}
                 </qbo-popover>
             </div>
         </slot>`;

package/src/qbo/qbo-mainmenu.js

@@ -182,20 +182,20 @@ let QboMainMenu = class QboMainMenu extends QboFetch {
             </li>`;
     }
     render() {
-        if (this.jsonData.MainMenu) {
+        if (this.jsonData && this.jsonData.Root && this.jsonData.Root.MainMenu) {
             return html `
                 <nav class="${this.navClass}">
                     <div>
                         <a href="#">
-                            ${this.renderImage(this.jsonData.MainMenu.Image)}
-                            ${this.jsonData.MainMenu.Label}
+                            ${this.renderImage(this.jsonData.Root.MainMenu.Image)}
+                            ${this.jsonData.Root.MainMenu.Label}
                         </a>
                         <button type="${this.buttonType}" data-bs-toggle="${this.collapseToggle}" data-bs-target="#${this.dropdownId}" aria-expanded="${this.ariaExpanded}" aria-label="${this.ariaLabel}">
                             <span/>
                         </button>
                         <div id="${this.dropdownId}">
                             <ul>
-                                ${this.renderMenu(this.jsonData.MainMenu, false, false)}
+                                ${this.renderMenu(this.jsonData.Root.MainMenu, false, false)}
                             </ul>
                         </div>
                     </div>

package/src/qbo/qbo-mainmenu.ts

@@ -238,20 +238,20 @@ export class QboMainMenu extends QboFetch {
     }
 
     render() {
-        if (this.jsonData.MainMenu) {
+        if (this.jsonData && this.jsonData.Root && this.jsonData.Root.MainMenu) {
             return html`
                 <nav class="${this.navClass}">
                     <div>
                         <a href="#">
-                            ${this.renderImage(this.jsonData.MainMenu.Image)}
-                            ${this.jsonData.MainMenu.Label}
+                            ${this.renderImage(this.jsonData.Root.MainMenu.Image)}
+                            ${this.jsonData.Root.MainMenu.Label}
                         </a>
                         <button type="${this.buttonType}" data-bs-toggle="${this.collapseToggle}" data-bs-target="#${this.dropdownId}" aria-expanded="${this.ariaExpanded}" aria-label="${this.ariaLabel}">
                             <span/>
                         </button>
                         <div id="${this.dropdownId}">
                             <ul>
-                                ${this.renderMenu(this.jsonData.MainMenu, false, false)}
+                                ${this.renderMenu(this.jsonData.Root.MainMenu, false, false)}
                             </ul>
                         </div>
                     </div>

package/src/qbo/qbo-popover.d.ts

@@ -3,6 +3,7 @@ export declare class QboPopover extends LitElement {
     selector: string;
     renderInHost: boolean;
     createRenderRoot(): HTMLElement | DocumentFragment;
-    updated(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    firstUpdated(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/src/qbo/qbo-popover.js

@@ -19,13 +19,24 @@ let QboPopover = class QboPopover extends LitElement {
     createRenderRoot() {
         return this.renderInHost ? this : super.createRenderRoot();
     }
-    updated(changedProperties) {
-        /* Enable Popover */
-        this.renderRoot.querySelectorAll(`${this.selector}`).forEach(function (t) {
-            new Popover(t);
-        });
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('data-bs-toggle', 'popover');
+        this.setAttribute('data-bs-placement', 'left');
+        this.setAttribute('data-bs-container', 'body');
+        this.setAttribute('data-bs-html', 'true');
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        const content = this.querySelector('*[slot=content]');
+        if (content instanceof HTMLElement)
+            content.style.display = 'none';
+        this.setAttribute('data-bs-content', content?.innerHTML ?? 'no content provided');
+        new Popover(this);
+    }
+    render() {
+        return html `<slot></slot>`;
     }
-    render() { return html `<slot></slot>`; }
 };
 __decorate([
     property({ type: String }),

package/src/qbo/qbo-popover.ts

@@ -15,12 +15,26 @@ export class QboPopover extends LitElement {
         return this.renderInHost ? this : super.createRenderRoot();
     }
 
-    updated(changedProperties: PropertyValues) {
-        /* Enable Popover */
-        this.renderRoot.querySelectorAll(`${this.selector}`).forEach(function (t) {
-            new Popover(t);
-        });
+    connectedCallback() {
+        super.connectedCallback();
+
+        this.setAttribute('data-bs-toggle', 'popover');
+        this.setAttribute('data-bs-placement', 'left');
+        this.setAttribute('data-bs-container', 'body');
+        this.setAttribute('data-bs-html', 'true');
+    }
+
+    firstUpdated(changedProperties: PropertyValues) {
+        super.firstUpdated(changedProperties);
+
+        const content = this.querySelector('*[slot=content]');
+        if (content instanceof HTMLElement) content.style.display = 'none';
+        this.setAttribute('data-bs-content', content?.innerHTML ?? 'no content provided');
+
+        new Popover(this);
     }
 
-    render() { return html`<slot></slot>`; }
+    render() {
+        return html`<slot></slot>`;
+    }
 }

package/src/qbo/qbo-ssn.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export declare class QboSSN extends LitElement {
+    apiEndpoint: string;
+    contactId: String | null;
+    disabled: boolean;
+    formControlSmallClass: String | null;
+    name: String | null;
+    show: boolean;
+    ssn: String | null;
+    url: String | null;
+    renderInHost: boolean;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    toggleSSN(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/qbo/qbo-ssn.js

@@ -0,0 +1,106 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { services } from '@quandis/qbo4.configuration';
+import { RestApiService } from './RestApiService.js';
+let QboSSN = class QboSSN extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.apiEndpoint = 'qbo';
+        this.contactId = null;
+        this.disabled = true;
+        this.formControlSmallClass = 'qbo-sm';
+        this.name = 'USSSN';
+        this.show = false;
+        this.ssn = null;
+        this.url = 'contact/UnmaskSSN';
+        this.renderInHost = true;
+    }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    async toggleSSN() {
+        this.show = !this.show;
+        if (this.show) {
+            const service = services.container.isRegistered(this.apiEndpoint)
+                ? services.container.resolve(this.apiEndpoint) : new RestApiService(this.apiEndpoint);
+            const json = await service.fetch(`${this.url}`, { ID: `${this.contactId}` });
+            this.renderRoot.querySelectorAll('input').forEach(input => {
+                if (input instanceof HTMLInputElement) {
+                    if (json?.ContactCollection?.length > 0 && json.ContactCollection[0].USSSN != null && json.ContactCollection[0].USSSN.length == 9) {
+                        const ssn = json.ContactCollection[0].USSSN;
+                        input.value = `${ssn.substring(0, 3)}-${ssn.substring(3, 5)}-${ssn.substring(5, 9)}`;
+                        this.renderRoot.querySelectorAll('i').forEach(i => {
+                            i.className = 'bi bi-eye-slash';
+                        });
+                    }
+                }
+            });
+        }
+        else {
+            this.renderRoot.querySelectorAll('input').forEach(input => {
+                if (input instanceof HTMLInputElement)
+                    input.value = `${this.ssn}`;
+                this.renderRoot.querySelectorAll('i').forEach(i => {
+                    i.className = 'bi bi-eye';
+                });
+            });
+        }
+    }
+    render() {
+        return html `<slot>
+            <div class="input-group">
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="${this.name}" value="${this.ssn}"/>
+                <span @click="${this.toggleSSN}" class="input-group-text" style="cursor:pointer;"><i class="bi bi-eye"></i></span>
+            </div>
+        </slot>`;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "apiEndpoint", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "contactId", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "formControlSmallClass", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "show", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "ssn", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "url", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboSSN.prototype, "renderInHost", void 0);
+QboSSN = __decorate([
+    customElement('qbo-ssn')
+], QboSSN);
+export { QboSSN };

package/src/qbo/qbo-ssn.ts

@@ -0,0 +1,80 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { IApiService } from './IApiService.js';
+import { services } from '@quandis/qbo4.configuration';
+import { RestApiService } from './RestApiService.js';
+
+@customElement('qbo-ssn')
+export class QboSSN extends LitElement {
+
+    @property({ type: String })
+    apiEndpoint = 'qbo';
+
+    @property({ type: String })
+    contactId: String | null = null;
+
+    @property({ type: Boolean })
+    disabled = true;
+
+    @property({ type: String })
+    formControlSmallClass: String | null = 'qbo-sm';
+
+    @property({ type: String })
+    name: String | null = 'USSSN';
+
+    @property({ type: Boolean })
+    show = false;
+
+    @property({ type: String })
+    ssn: String | null = null;
+
+    @property({ type: String })
+    url: String | null = 'contact/UnmaskSSN';
+
+    @property({ type: Boolean })
+    renderInHost = true;
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    async toggleSSN() {
+        this.show = !this.show;
+
+        if (this.show) {
+            const service: IApiService = services.container.isRegistered(this.apiEndpoint)
+                ? services.container.resolve<IApiService>(this.apiEndpoint) : new RestApiService(this.apiEndpoint);
+            const json = await service.fetch(`${this.url}`, { ID: `${this.contactId}` });
+
+            this.renderRoot.querySelectorAll('input').forEach(input => {
+                if (input instanceof HTMLInputElement) {
+                    if (json?.ContactCollection?.length > 0 && json.ContactCollection[0].USSSN != null && json.ContactCollection[0].USSSN.length == 9) {
+                        const ssn = json.ContactCollection[0].USSSN;
+                        input.value = `${ssn.substring(0, 3)}-${ssn.substring(3, 5)}-${ssn.substring(5, 9)}`;
+
+                        this.renderRoot.querySelectorAll('i').forEach(i => {
+                            i.className = 'bi bi-eye-slash';
+                        });
+                    }
+                }
+            });
+        } else {
+            this.renderRoot.querySelectorAll('input').forEach(input => {
+                if (input instanceof HTMLInputElement) input.value = `${this.ssn}`;
+
+                this.renderRoot.querySelectorAll('i').forEach(i => {
+                    i.className = 'bi bi-eye';
+                });
+            });
+        }
+    }
+
+    render() {
+        return html`<slot>
+            <div class="input-group">
+                <input type="text" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="${this.name}" value="${this.ssn}"/>
+                <span @click="${this.toggleSSN}" class="input-group-text" style="cursor:pointer;"><i class="bi bi-eye"></i></span>
+            </div>
+        </slot>`;
+    }
+}