@quandis/qbo4.messages 4.0.1-CI-20240405-163539

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@quandis/qbo4.messages",
+  "author": "Quandis, Inc.",
+  "license": "MIT",
+  "type": "module",
+  "version": "4.0.1-CI-20240405-163539",
+  "workspaces": [
+    "code"
+  ],
+  "main": "src/Program.js",
+  "private": false,
+  "scripts": {
+    "build": "ncu -u && npm install && npm run sass && tsc --build --force && npm run packdev && npm run packprod && del *.tgz && npm pack && ren *.tgz qbo4.messages.tgz",
+    "quick": "tsc --build --force && npm run packdev && del *.tgz && npm pack && ren *.tgz qbo4.messages.tgz",
+    "packdev": "webpack --config pack.dev.js --no-color",
+    "packprod": "webpack --config pack.prod.js --no-color",
+    "sass": "sass --load-path=node_modules --quiet scss/:wwwroot/css && node cssshake.js"
+  },
+  "keywords": [
+    "qbo"
+  ],
+  "files": [
+    "wwwroot/js/",
+    "wwwroot/css/",
+    "wwwroot/images/",
+    "src/",
+    "scss/"
+  ],
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.12",
+    "@quandis/qbo4.configuration": "*",
+    "@quandis/qbo4.logging": "*",
+    "@quandis/qbo4.ui": "*",
+    "jsonpath-plus": "^10.2.0",
+    "lit": "^3.2.1",
+    "reflect-metadata": "^0.2.2",
+    "tsyringe": "^4.8.0"
+  },
+  "devDependencies": {
+    "@esm-bundle/chai": "^4.3.4",
+    "@fullhuman/postcss-purgecss": "^7.0.2",
+    "autoprefixer": "^10.4.20",
+    "clean-css": "^5.3.3",
+    "eslint": "^9.17.0",
+    "glob": "^11.0.0",
+    "html-webpack-plugin": "^5.6.3",
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss": "^8.4.49",
+    "postcss-loader": "^8.1.1",
+    "sass": "^1.83.0",
+    "typescript": "^5.7.2",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-merge": "^6.0.1"
+  }
+}

package/scss/qbo-message.scss

@@ -0,0 +1 @@
+

package/src/Program.d.ts

@@ -0,0 +1,5 @@
+export { LitElement, TemplateResult, css, html } from "lit";
+export { customElement, property, state } from "lit/decorators.js";
+export { services } from '@quandis/qbo4.ui';
+export * from './qbo-message.js';
+export * from './styles.js';

package/src/Program.js

@@ -0,0 +1,9 @@
+import { html } from 'lit';
+window.qbo4 = window.qbo4 || {};
+window.qbo4.configuration = window.qbo4.configuration || {};
+window.qbo4.configuration.html = html;
+export { LitElement, css, html } from "lit";
+export { customElement, property, state } from "lit/decorators.js";
+export { services } from '@quandis/qbo4.ui';
+export * from './qbo-message.js';
+export * from './styles.js';

package/src/Program.ts

@@ -0,0 +1,12 @@
+import { html } from 'lit';
+
+(window.qbo4 as any) = window.qbo4 || {};
+(window.qbo4 as any).configuration = (window.qbo4 as any).configuration || {};
+(window.qbo4 as any).configuration.html = html;
+
+export { LitElement, TemplateResult, css, html } from "lit";
+export { customElement, property, state } from "lit/decorators.js";
+
+export { services } from '@quandis/qbo4.ui';
+export * from './qbo-message.js';
+export * from './styles.js';

package/src/qbo-message.d.ts

@@ -0,0 +1,17 @@
+declare const QboMessage_base: (new (...args: any[]) => import("@quandis/qbo4.ui").IFetch) & (new (...args: any[]) => import("@quandis/qbo4.configuration").ITemplate) & typeof import("lit").LitElement;
+export declare class QboMessage extends QboMessage_base {
+    static styles: import("lit").CSSResult[];
+    apiEndpoint: URL;
+    imagePath: any;
+    renderInHost: boolean;
+    show: boolean;
+    type: string;
+    connectedCallback(): Promise<void>;
+    firstUpdated(changedProperties: any): void;
+    disconnectedCallback(): void;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    paginate(e: CustomEvent): Promise<void>;
+    updatePayload(event: Event): Promise<void>;
+    search(component: QboMessage): import("lit-html").TemplateResult<1>;
+}
+export {};

package/src/qbo-message.js

@@ -0,0 +1,135 @@
+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 } from "lit";
+import { property } from "lit/decorators.js";
+import { QboTemplate, template } from "@quandis/qbo4.configuration";
+import { QboFetchMixin, getArray, formatDate, qboui } from "@quandis/qbo4.ui";
+import { messageCss } from "./styles.js";
+export class QboMessage extends QboFetchMixin(QboTemplate) {
+    constructor() {
+        super(...arguments);
+        this.apiEndpoint = new URL("api://qbo4/messages/message");
+        this.imagePath = window.qbo4['imagePath'] ?? '/ui/images/qbo-icons.svg';
+        this.renderInHost = false;
+        this.show = true;
+        this.type = 'search';
+    }
+    static { this.styles = [
+        qboui,
+        messageCss,
+    ]; }
+    async connectedCallback() {
+        if (Object.keys(this.dataset).length > 0)
+            this.payload = { ...this.dataset };
+        switch (this.type) {
+            case "search":
+                this.apiEndpoint = new URL("api://qbo4/messages/message/search");
+                break;
+        }
+        super.connectedCallback();
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+    async paginate(e) {
+        if (this.payload == null)
+            this.payload = {};
+        this.payload['DisplaySize'] = e.detail['display'];
+        this.payload['RecordStart'] = e.detail['start'];
+        await this.fetchData(this.headers ?? {}, this.payload);
+    }
+    async updatePayload(event) {
+        const payload = event.detail?.payload;
+        if (payload) {
+            this.payload = payload;
+            await this.fetchData(this.headers, this.payload);
+        }
+    }
+    search(component) {
+        const json = getArray(component.jsonData);
+        const count = Number(json?.[0]?.RecordCount) || 25;
+        return html `<slot class=${component.show ? '' : 'collapse'}>
+<h3 class="title">
+    <button type="button" class="expandcollapse" @click="${(e) => component.show = !component.show}">
+        <svg>
+            <use href="${component.imagePath}#${component.show ? 'dash' : 'plus'}">
+        </svg>
+    </button>
+    Messages
+</h3>
+<div class="qbo-row">
+    <div class="qbo-col qbo-col-noborder">
+        <table class="qbo-nowrap" data-drop>
+            <thead>
+                <tr>
+                    <th>Date</th>
+                    <th>Time</th>
+                    <th>Comment</th>
+                    <th>User</th>
+                    <th>Parent Type</th>
+                    <th>Parent Name</th>
+                </tr>
+            </thead>
+            <tbody>
+                ${json ? json.map(item => html `
+                    <tr>
+                        <td>${formatDate(item.DateAdded)}</td>
+                        <td></td>
+                        <td>${item.BodyText}</td>
+                        <td>${item.CreatedPerson}</td>
+                        <td>${item.Object}</td>
+                        <td>${item.ParentLabel}</td>
+                    </tr>
+                `) : html `<tr><td colspan="6">No data available</td></tr>`}
+            </tbody>
+            <tfoot>
+                <tr>
+                    <td colspan="6" class="progress-wrapper">${json && json[0] ? html `<qbo-paginate count="${json[0].RecordCount ?? 25}" @change=${(e) => component.paginate(e)}></qbo-paginate>` : html ``}</td>
+                </tr>
+            </tfoot>
+        </table>
+    </div>
+</div></slot>`;
+    }
+}
+__decorate([
+    property({ type: URL }),
+    __metadata("design:type", Object)
+], QboMessage.prototype, "apiEndpoint", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], QboMessage.prototype, "imagePath", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Boolean)
+], QboMessage.prototype, "renderInHost", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboMessage.prototype, "show", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], QboMessage.prototype, "type", void 0);
+__decorate([
+    template('search'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [QboMessage]),
+    __metadata("design:returntype", void 0)
+], QboMessage.prototype, "search", null);
+if (!customElements.get('qbo-message'))
+    customElements.define('qbo-message', QboMessage);

package/src/qbo-message.ts

@@ -0,0 +1,120 @@
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { QboTemplate, template } from "@quandis/qbo4.configuration";
+import { QboFetchMixin, getArray, formatDate, qboui } from "@quandis/qbo4.ui";
+import { messageCss } from "./styles.js";
+
+export class QboMessage extends QboFetchMixin(QboTemplate) {
+
+    static styles = [
+        qboui,
+        messageCss,
+    ];
+
+    @property({ type: URL })
+    apiEndpoint = new URL("api://qbo4/messages/message");
+
+    @property({ type: String })
+    imagePath = window.qbo4['imagePath'] ?? '/ui/images/qbo-icons.svg';
+
+    @property()
+    renderInHost: boolean = false;
+
+    @property({ type: Boolean })
+    show = true;
+
+    @property()
+    type: string = 'search';
+
+    async connectedCallback() {
+        if (Object.keys(this.dataset).length > 0)
+            this.payload = { ...this.dataset } as Record<string, string>;
+        switch (this.type) {
+            case "search":
+                this.apiEndpoint = new URL("api://qbo4/messages/message/search");
+                break;
+        }
+        super.connectedCallback();
+    }
+
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+
+    createRenderRoot() {
+        return this.renderInHost ? this : super.createRenderRoot();
+    }
+
+    async paginate(e: CustomEvent) {
+        if (this.payload == null)
+            this.payload = {};
+
+        this.payload['DisplaySize'] = e.detail['display'];
+        this.payload['RecordStart'] = e.detail['start'];
+        await this.fetchData(this.headers ?? {}, this.payload);
+    }
+
+    async updatePayload(event: Event) {
+        const payload = (event as CustomEvent).detail?.payload;
+        if (payload) {
+            this.payload = payload;
+            await this.fetchData(this.headers!, this.payload);
+        }
+    }
+
+    @template('search')
+    search(component: QboMessage) {
+        const json = getArray(component.jsonData);
+        const count: number = Number(json?.[0]?.RecordCount) || 25;
+
+        return html`<slot class=${component.show ? '' : 'collapse'}>
+<h3 class="title">
+    <button type="button" class="expandcollapse" @click="${(e) => component.show = !component.show}">
+        <svg>
+            <use href="${component.imagePath}#${component.show ? 'dash' : 'plus'}">
+        </svg>
+    </button>
+    Message Center
+</h3>
+<div class="qbo-row-viewer">
+    <div class="qbo-col qbo-col-noborder">
+        <table class="qbo-nowrap" data-drop>
+            <thead>
+                <tr>
+                    <th>Date</th>
+                    <th>Time</th>
+                    <th>Comment</th>
+                    <th>User</th>
+                    <th>Parent Type</th>
+                    <th>Parent Name</th>
+                </tr>
+            </thead>
+            <tbody>
+                ${json ? json.map(item => html`
+                    <tr>
+                        <td>${formatDate(item.DateAdded)}</td>
+                        <td></td>
+                        <td>${item.BodyText}</td>
+                        <td>${item.CreatedPerson}</td>
+                        <td>${item.Object}</td>
+                        <td>${item.ParentLabel}</td>
+                    </tr>
+                `) : html`<tr><td colspan="6">No data available</td></tr>`}
+            </tbody>
+            <tfoot>
+                <tr>
+                    <td colspan="6" class="progress-wrapper">${json && json[0] ? html`<qbo-paginate count="${json[0].RecordCount ?? 25}" @change=${(e) => component.paginate(e)}></qbo-paginate>` : html``}</td>
+                </tr>
+            </tfoot>
+        </table>
+    </div>
+</div></slot>`
+    }
+}
+
+if (!customElements.get('qbo-message'))
+    customElements.define('qbo-message', QboMessage);

package/src/styles.d.ts

@@ -0,0 +1 @@
+export declare const messageCss: import("lit").CSSResult;

package/src/styles.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const messageCss = css ``;

package/src/styles.ts

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+
+export const messageCss = css``;

package/wwwroot/css/qbo-message.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=qbo-message.css.map */

package/wwwroot/css/qbo-message.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"qbo-message.css"}