@quandis/qbo4.ui 4.0.1-CI-20240429-172951 → 4.0.1-CI-20240429-225952

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20240429-172951",
+  "version": "4.0.1-CI-20240429-225952",
   "workspaces": [
     "code"
   ],

package/readme.md

@@ -69,7 +69,6 @@ In this example, the `qms` is cloned in `getApiService`, and the `relativePath`
 You can write your own `IApiService` class, and register it to qbo's DI container:
 
 ```typescript
-import { services } from "@quandis/qbo4.logging";
 import { services, IApiService } from "@quandis/qbo4.ui";
 
 @injectable()

package/src/qbo/IApiService.d.ts

@@ -13,6 +13,7 @@ export interface IApiService {
      * @param payload The payload to send to the API.
      */
     fetch(relativePath: string | null, payload: Record<string, string> | null): Promise<any>;
+    clone(relativePath: string | null): IApiService;
 }
 /**
  *  Define a token for the IApiService interface

package/src/qbo/IApiService.ts

@@ -16,6 +16,9 @@ export interface IApiService {
      * @param payload The payload to send to the API.
      */
     fetch(relativePath: string | null, payload: Record<string, string> | null): Promise<any>;
+
+    
+    clone(relativePath: string | null): IApiService;
 }
 
 /**

package/src/qbo/Program.d.ts

@@ -11,6 +11,7 @@ export * from './qbo-badge.js';
 export * from './qbo-contact.js';
 export * from './qbo-datalist.js';
 export * from './qbo-docviewer.js';
+export * from './qbo-form-edit.js';
 export * from './qbo-form-element.js';
 export * from './qbo-json.js';
 export * from './qbo-mainmenu.js';

package/src/qbo/Program.js

@@ -12,6 +12,7 @@ export * from './qbo-badge.js';
 export * from './qbo-contact.js';
 export * from './qbo-datalist.js';
 export * from './qbo-docviewer.js';
+export * from './qbo-form-edit.js';
 export * from './qbo-form-element.js';
 export * from './qbo-json.js';
 export * from './qbo-mainmenu.js';
@@ -115,10 +116,5 @@ export function getApiService(url) {
     const service = services.container.isRegistered(name)
         ? services.container.resolve(name)
         : new RestApiService(url);
-    if (relativePath) {
-        const clone = structuredClone(service);
-        clone.relativePath = relativePath;
-        return clone;
-    }
-    return service;
+    return (relativePath) ? service.clone(relativePath) : service;
 }

package/src/qbo/Program.ts

@@ -14,6 +14,7 @@ export * from './qbo-badge.js';
 export * from './qbo-contact.js';
 export * from './qbo-datalist.js'
 export * from './qbo-docviewer.js'
+export * from './qbo-form-edit.js';
 export * from './qbo-form-element.js';
 export * from './qbo-json.js';
 export * from './qbo-mainmenu.js';
@@ -124,10 +125,5 @@ export function getApiService(url: string) {
         ? services.container.resolve<IApiService>(name)
         : new RestApiService(url);
 
-    if (relativePath) {
-        const clone = structuredClone(service);
-        clone.relativePath = relativePath;
-        return clone;
-    }
-    return service;
+    return (relativePath) ? service.clone(relativePath) : service;
 }

package/src/qbo/RestApiService.d.ts

@@ -6,5 +6,6 @@ export declare class RestApiService implements IApiService {
     relativePath: string;
     constructor(apiEndpoint: string, headers?: HeadersInit, method?: string | null);
     fetch(relativePath: string | null, payload?: Record<string, string> | null): Promise<any>;
+    clone(relativePath: string | null): IApiService;
 }
 export declare function registerRestApi(name: string, apiEndpoint: string, headers?: HeadersInit, method?: string | null): void;

package/src/qbo/RestApiService.js

@@ -24,6 +24,11 @@ export class RestApiService {
         }
         return response.json();
     }
+    clone(relativePath) {
+        const clone = new RestApiService(this.apiEndpoint, this.headers, this.method);
+        clone.relativePath = relativePath ?? '';
+        return clone;
+    }
 }
 // Register a RestApiService with the default name 'default' and the base URL of the current page
 services.container.registerInstance('default', new RestApiService(document.querySelector('base[href]')?.getAttribute('href') || window.location.origin));

package/src/qbo/RestApiService.ts

@@ -35,6 +35,12 @@ export class RestApiService implements IApiService {
 
         return response.json();
     }
+
+    clone(relativePath: string | null): IApiService {
+        const clone = new RestApiService(this.apiEndpoint, this.headers, this.method);
+        clone.relativePath = relativePath ?? '';
+        return clone;
+    }
 }
 
 // Register a RestApiService with the default name 'default' and the base URL of the current page

package/src/qbo/qbo-contact.js

@@ -187,6 +187,7 @@ let QboContact = class QboContact extends LitElement {
                 <label for="SCRAID" class="${this.formLabelSmallClass}">SCRA ID</label>
                 <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAID" value="${this.jsonData?.ContactItem?.SCRAID}"/>
             </div>
+            <qbo-form-edit createdDate="${this.jsonData?.ContactItem?.CreatedDate}" createdPerson="${this.jsonData?.ContactItem?.CreatedPerson}" updatedDate="${this.jsonData?.ContactItem?.UpdatedDate}" updatedPerson="${this.jsonData?.ContactItem?.UpdatedPerson}"></qbo-select>
         </slot>`;
     }
 };

package/src/qbo/qbo-contact.ts

@@ -212,6 +212,7 @@ export class QboContact extends LitElement {
                 <label for="SCRAID" class="${this.formLabelSmallClass}">SCRA ID</label>
                 <input type="number" ?disabled=${this.disabled} class="${this.formControlSmallClass}" name="SCRAID" value="${this.jsonData?.ContactItem?.SCRAID}"/>
             </div>
+            <qbo-form-edit createdDate="${this.jsonData?.ContactItem?.CreatedDate}" createdPerson="${this.jsonData?.ContactItem?.CreatedPerson}" updatedDate="${this.jsonData?.ContactItem?.UpdatedDate}" updatedPerson="${this.jsonData?.ContactItem?.UpdatedPerson}"></qbo-select>
         </slot>`;
     }
 }

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

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+export declare class QboFormEdit extends LitElement {
+    createdDate: null;
+    createdPerson: null;
+    updatedDate: null;
+    updatedPerson: null;
+    renderInHost: boolean;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,82 @@
+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';
+let QboFormEdit = class QboFormEdit extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.createdDate = null;
+        this.createdPerson = null;
+        this.updatedDate = null;
+        this.updatedPerson = null;
+        this.renderInHost = true;
+    }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    render() {
+        return html `<slot>
+            <div class="col-md-12 mt-3">
+                <hr />
+            </div>
+            <div class="col-md-12 mt-2">
+                <div class="btn-group">
+                    <button type="button" class="btn btn-primary">
+                        <span class="bi-pencil-square"> Edit</span>
+                    </button>
+                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
+                    <ul class="dropdown-menu">
+                        <li>
+                            <a class="dropdown-item" href="#">
+                                <i class="bi-clock-history"></i>
+                                <span>History</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#">
+                                <i class="bi-question"></i>
+                                <span>Help</span>
+                            </a>
+                        </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>
+                    </button>
+                </qbo-popover>
+            </div>
+        </slot>`;
+    }
+};
+__decorate([
+    property({ type: Date }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "createdDate", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "createdPerson", void 0);
+__decorate([
+    property({ type: Date }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "updatedDate", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "updatedPerson", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboFormEdit.prototype, "renderInHost", void 0);
+QboFormEdit = __decorate([
+    customElement('qbo-form-edit')
+], QboFormEdit);
+export { QboFormEdit };

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

@@ -0,0 +1,60 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('qbo-form-edit')
+export class QboFormEdit extends LitElement {
+
+    @property({ type: Date })
+    createdDate = null;
+
+    @property({ type: String })
+    createdPerson = null;
+
+    @property({ type: Date })
+    updatedDate = null;
+
+    @property({ type: String })
+    updatedPerson = null;
+
+    @property({ type: Boolean })
+    renderInHost = true;
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    render() {
+        return html`<slot>
+            <div class="col-md-12 mt-3">
+                <hr />
+            </div>
+            <div class="col-md-12 mt-2">
+                <div class="btn-group">
+                    <button type="button" class="btn btn-primary">
+                        <span class="bi-pencil-square"> Edit</span>
+                    </button>
+                    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
+                    <ul class="dropdown-menu">
+                        <li>
+                            <a class="dropdown-item" href="#">
+                                <i class="bi-clock-history"></i>
+                                <span>History</span>
+                            </a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" href="#">
+                                <i class="bi-question"></i>
+                                <span>Help</span>
+                            </a>
+                        </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>
+                    </button>
+                </qbo-popover>
+            </div>
+        </slot>`;
+    }
+}