@quandis/qbo4.messages 4.0.1-CI-20250107-192804 → 4.0.1-CI-20250107-224931

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20250107-192804",
+  "version": "4.0.1-CI-20250107-224931",
   "workspaces": [
     "code"
   ],

package/src/qbo-message.d.ts

@@ -2,6 +2,8 @@ declare const QboMessage_base: (new (...args: any[]) => import("@quandis/qbo4.ui
 export declare class QboMessage extends QboMessage_base {
     static styles: import("lit").CSSResult[];
     apiEndpoint: URL;
+    display: number;
+    start: number;
     imagePath: any;
     renderInHost: boolean;
     show: boolean;

package/src/qbo-message.js

@@ -16,6 +16,8 @@ export class QboMessage extends QboFetchMixin(QboTemplate) {
     constructor() {
         super(...arguments);
         this.apiEndpoint = new URL("api://qbo4/messages/message");
+        this.display = 25;
+        this.start = 0;
         this.imagePath = window.qbo4['imagePath'] ?? '/ui/images/qbo-icons.svg';
         this.renderInHost = false;
         this.show = true;
@@ -51,7 +53,13 @@ export class QboMessage extends QboFetchMixin(QboTemplate) {
             this.payload = {};
         this.payload['DisplaySize'] = e.detail['display'];
         this.payload['RecordStart'] = e.detail['start'];
-        await this.fetchData(this.headers ?? {}, this.payload);
+        const currentDisplay = this.display;
+        this.display = Number(this.payload['DisplaySize']);
+        const currentStart = this.start;
+        this.start = Number(this.payload['RecordStart']);
+        const count = Number(getArray(this.jsonData)?.[0]?.RecordCount) || 0;
+        if (count > 0 && (currentDisplay != this.display || currentStart != this.start))
+            await this.fetchData(this.headers ?? {}, this.payload);
     }
     view(message, e) {
         e.preventDefault();
@@ -62,11 +70,9 @@ export class QboMessage extends QboFetchMixin(QboTemplate) {
     }
     search(component) {
         const json = getArray(component.jsonData);
-        const count = Number(json?.[0]?.RecordCount) || json?.length || 25;
-        const sorted = json ? json
-            .filter(item => item?.UpdatedDate)
-            .sort((a, b) => new Date(b.UpdatedDate).getTime() - new Date(a.UpdatedDate).getTime())
-            : [];
+        const count = Number(json?.[0]?.RecordCount) || json?.length || 0;
+        const length = json?.length || 0;
+        const jsonPage = length > component.display ? json?.slice(component.start, component.start + component.display) : json;
         return html `<slot class=${component.show ? '' : 'collapse'}>
 <h3 class="title">
     <button type="button" class="expandcollapse" @click="${(e) => component.show = !component.show}">
@@ -90,7 +96,7 @@ export class QboMessage extends QboFetchMixin(QboTemplate) {
                 </tr>
             </thead>
             <tbody>
-                ${json ? json.map(item => html `
+                ${jsonPage ? jsonPage.map(item => html `
                     <tr>
                         ${component?.showInline
             ? html `<td><a href="/api/message/${item.MessageID}" @click=${(e) => component.view(item, e)}>${item.Message ?? item.BodyText}</a></td>`
@@ -132,6 +138,14 @@ __decorate([
     property({ type: URL }),
     __metadata("design:type", Object)
 ], QboMessage.prototype, "apiEndpoint", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], QboMessage.prototype, "display", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], QboMessage.prototype, "start", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)

package/src/qbo-message.ts

@@ -14,6 +14,12 @@ export class QboMessage extends QboFetchMixin(QboTemplate) {
     @property({ type: URL })
     apiEndpoint = new URL("api://qbo4/messages/message");
 
+    @property({ type: Number })
+    display = 25;
+
+    @property({ type: Number })
+    start = 0;
+
     @property({ type: String })
     imagePath = window.qbo4['imagePath'] ?? '/ui/images/qbo-icons.svg';
 
@@ -61,7 +67,15 @@ export class QboMessage extends QboFetchMixin(QboTemplate) {
 
         this.payload['DisplaySize'] = e.detail['display'];
         this.payload['RecordStart'] = e.detail['start'];
-        await this.fetchData(this.headers ?? {}, this.payload);
+
+        const currentDisplay: Number = this.display;
+        this.display = Number(this.payload['DisplaySize']);
+        const currentStart: Number = this.start;
+        this.start = Number(this.payload['RecordStart']);
+
+        const count = Number(getArray(this.jsonData)?.[0]?.RecordCount) || 0;
+        if (count > 0 && (currentDisplay != this.display || currentStart != this.start))
+            await this.fetchData(this.headers ?? {}, this.payload);
     }
 
     view(message: any, e: Event) {
@@ -76,11 +90,9 @@ export class QboMessage extends QboFetchMixin(QboTemplate) {
     @template('search')
     search(component: QboMessage) {
         const json = getArray(component.jsonData);
-        const count: number = Number(json?.[0]?.RecordCount) || json?.length || 25;
-        const sorted = json? json
-            .filter(item => item?.UpdatedDate)
-            .sort((a, b) => new Date(b.UpdatedDate).getTime() - new Date(a.UpdatedDate).getTime())
-            : [];
+        const count: number = Number(json?.[0]?.RecordCount) || json?.length || 0;
+        const length = json?.length || 0;
+        const jsonPage = length > component.display ? json?.slice(component.start, component.start + component.display) : json;
 
         return html`<slot class=${component.show ? '' : 'collapse'}>
 <h3 class="title">
@@ -105,7 +117,7 @@ export class QboMessage extends QboFetchMixin(QboTemplate) {
                 </tr>
             </thead>
             <tbody>
-                ${json ? json.map(item => html`
+                ${jsonPage ? jsonPage.map(item => html`
                     <tr>
                         ${component?.showInline
                             ? html`<td><a href="/api/message/${item.MessageID}" @click=${(e) => component.view(item, e)}>${item.Message ?? item.BodyText}</a></td>`