@quandis/qbo4.ui 4.0.1-CI-20241021-180407 → 4.0.1-CI-20241022-165449

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20241021-180407",
+  "version": "4.0.1-CI-20241022-165449",
   "workspaces": [
     "code"
   ],

package/scss/qboui.scss

@@ -78,6 +78,20 @@
         @extend .active;
     }
 
+    li.pageSize {
+        @extend .input-group;
+        @extend .w-auto;
+
+        input {
+            @extend .form-control;
+            width: 5em;
+        }
+
+        span {
+            @extend .input-group-text;
+        }
+    }
+
     &.center {
         @extend .justify-content-center;
     }

package/src/qbo/RestApiService.js

@@ -19,8 +19,15 @@ export class RestApiService {
             headers: headers,
             body: (method === 'POST' && payload) ? JSON.stringify(payload) : null
         });
-        if (response.ok)
-            return response.json();
+        const accept = headers.get("Accept") ?? '';
+        if (response.ok) {
+            switch (accept) {
+                case "application/json":
+                    return await response.json();
+                default:
+                    return await response.text();
+            }
+        }
         console.error(`API request failed with status ${response.status}`);
         return null;
     }

package/src/qbo/RestApiService.ts

@@ -28,9 +28,15 @@ export class RestApiService implements IApiService {
             headers: headers,
             body: (method === 'POST' && payload) ? JSON.stringify(payload) : null
         });
-
-        if (response.ok)
-            return response.json();
+        const accept = headers.get("Accept") ?? '';
+        if (response.ok) {
+            switch (accept) {
+                case "application/json":
+                    return await response.json();
+                default:
+                    return await response.text();
+            }
+        }
         console.error(`API request failed with status ${response.status}`);
         return null;
     }

package/src/qbo/qbo-fetch.js

@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { getApiService } from './RestApiService.js';
 export const QboFetchMixin = (superClass) => {
     class QboFetchClass extends superClass {
         constructor(...args) {
@@ -21,13 +22,15 @@ export const QboFetchMixin = (superClass) => {
             this.headerTag = 'script[name="headers"]';
             this.html = null;
             this.fetchOnLoad = true;
+            this.headers = null;
+            this.payload = null;
         }
         async connectedCallback() {
             super.connectedCallback();
             if (this.fetchOnLoad) {
-                const headers = this.getHeaders();
-                const payload = this.getPayload(headers);
-                await this.fetchData(headers, payload);
+                this.headers = this.headers ?? this.getHeaders();
+                this.payload = this.payload ?? this.getPayload(this.headers);
+                await this.fetchData(this.headers, this.payload);
             }
         }
         getHeaders() {
@@ -65,18 +68,20 @@ export const QboFetchMixin = (superClass) => {
             if (payload !== null)
                 this.method = 'POST';
             try {
-                const response = await fetch(this.apiEndpoint, {
-                    method: this.method,
-                    headers: headers,
-                    body: payload ? JSON.stringify(payload) : null
-                });
+                const api = getApiService(this.apiEndpoint);
+                const response = await api.fetch(null, payload);
+                //const response = await fetch(this.apiEndpoint, {
+                //    method: this.method,
+                //    headers: headers,
+                //    body: payload ? JSON.stringify(payload) : null
+                //});
                 switch (this.accept) {
                     case "application/json":
-                        this.jsonData = await response.json();
+                        this.jsonData = response;
                         this.html = null;
                         break;
                     default:
-                        this.html = await response.text();
+                        this.html = response;
                         this.jsonData = null;
                         break;
                 }
@@ -120,6 +125,14 @@ export const QboFetchMixin = (superClass) => {
         property({ type: Boolean }),
         __metadata("design:type", Object)
     ], QboFetchClass.prototype, "fetchOnLoad", void 0);
+    __decorate([
+        property({ attribute: false }),
+        __metadata("design:type", Object)
+    ], QboFetchClass.prototype, "headers", void 0);
+    __decorate([
+        property({ attribute: false }),
+        __metadata("design:type", Object)
+    ], QboFetchClass.prototype, "payload", void 0);
     ;
     return QboFetchClass;
 };

package/src/qbo/qbo-fetch.ts

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { getApiService } from './RestApiService.js';
 
 // Define the interface for the mixin
 export declare class IFetch {
@@ -11,7 +12,6 @@ export declare class IFetch {
     protected fetchData(headers: { [key: string]: string; }, payload: Object | null): Promise<void>;
     protected getPayload(headers: { [key: string]: string; });
     protected getHeaders(): { [key: string]: string };
-    // protected createRenderRoot(): unknown;
 }
 
 type Constructor<T = {}> = new (...args: any[]) => T;
@@ -42,6 +42,12 @@ export const QboFetchMixin = <T extends Constructor<LitElement>>(superClass: T)
         @property({ type: Boolean })
         fetchOnLoad = true;
 
+        @property({ attribute: false })
+        headers: { [key: string]: string } | null = null;
+
+        @property({ attribute: false })
+        payload: Record<string, string> | null = null;
+
         constructor(...args: any[]) {
             super(...args);
         }
@@ -50,9 +56,9 @@ export const QboFetchMixin = <T extends Constructor<LitElement>>(superClass: T)
             super.connectedCallback();
 
             if (this.fetchOnLoad) {
-                const headers = this.getHeaders();
-                const payload = this.getPayload(headers);
-                await this.fetchData(headers, payload);
+                this.headers = this.headers ?? this.getHeaders();
+                this.payload = this.payload ?? this.getPayload(this.headers);
+                await this.fetchData(this.headers, this.payload);
             }
         }
 
@@ -71,7 +77,7 @@ export const QboFetchMixin = <T extends Constructor<LitElement>>(superClass: T)
 
         getPayload(headers: { [key: string]: string; }) {
             const payloadTag = this.querySelector('script[name="payload"]');
-            let payload: Object | null = null;
+            let payload: Record<string, string> | null = null;
             if (payloadTag && payloadTag.textContent !== null) {
                 try {
                     payload = JSON.parse(payloadTag.textContent);
@@ -85,23 +91,26 @@ export const QboFetchMixin = <T extends Constructor<LitElement>>(superClass: T)
         }
 
         /* @description Fetch data from an api, and set @see {@link html} or @see {@link jsonData} with the result. */
-        async fetchData(headers: { [key: string]: string; }, payload: Object | null) {
+        async fetchData(headers: { [key: string]: string; }, payload: Record<string, string> | null) {
             if (this.apiEndpoint === null) return;
             if (payload !== null)
                 this.method = 'POST';
             try {
-                const response = await fetch(this.apiEndpoint, {
-                    method: this.method,
-                    headers: headers,
-                    body: payload ? JSON.stringify(payload) : null
-                });
+
+                const api = getApiService(this.apiEndpoint);
+                const response = await api.fetch(null, payload);
+                //const response = await fetch(this.apiEndpoint, {
+                //    method: this.method,
+                //    headers: headers,
+                //    body: payload ? JSON.stringify(payload) : null
+                //});
                 switch (this.accept) {
                     case "application/json":
-                        this.jsonData = await response.json();
+                        this.jsonData = response;
                         this.html = null;
                         break;
                     default:
-                        this.html = await response.text();
+                        this.html = response;
                         this.jsonData = null;
                         break;
                 }

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

@@ -6,11 +6,14 @@ export declare class QboPaginate extends LitElement {
     pageLimit: number;
     currentPage: number;
     rollingView: boolean;
+    editSize: boolean;
     private get maxPage();
     static styles: import("lit").CSSResult[];
     goToPage(page: any): void;
     renderPage(i: number): TemplateResult<1>;
     renderSpacer(): TemplateResult<1>;
     renderPageNumbers(): TemplateResult[];
+    setDisplaySize(e: Event): void;
+    renderPageSize(): TemplateResult<1>;
     render(): TemplateResult<1>;
 }

package/src/qbo/qbo-paginate.js

@@ -19,6 +19,7 @@ let QboPaginate = class QboPaginate extends LitElement {
         this.pageLimit = 10;
         this.currentPage = 1;
         this.rollingView = true;
+        this.editSize = true;
     }
     get maxPage() {
         return Math.floor(this.count / this.display) + (this.count % this.display === 0 ? 0 : 1);
@@ -37,8 +38,8 @@ let QboPaginate = class QboPaginate extends LitElement {
         }));
     }
     renderPage(i) {
-        return html `<li class="page-item ${this.currentPage === i ? 'active' : ''}">
-          <a class="page-link" @click="${() => this.goToPage(i)}">${i}</a>
+        return html `<li class="${this.currentPage === i ? 'active' : ''}">
+          <a @click="${(e) => this.goToPage(i)}">${i}</a>
         </li>`;
     }
     renderSpacer() {
@@ -69,21 +70,37 @@ let QboPaginate = class QboPaginate extends LitElement {
         }
         return pages;
     }
+    setDisplaySize(e) {
+        const target = e.target;
+        const display = parseInt(target.value);
+        if (!isNaN(display)) {
+            this.display = display;
+            this.start = 0;
+            this.goToPage(1);
+        }
+    }
+    renderPageSize() {
+        return html `<li class="pageSize">
+  <input type="number" min="5" value="${this.display}" title="Display Size" @change=${(e) => this.setDisplaySize(e)}>
+  <span>records per page</span>
+</li>`;
+    }
     render() {
         return html `
       <nav aria-label="Page navigation">
-        <ul class="qbo-paginate paginate">
-          <li class="page-item ${this.currentPage === 1 ? 'disabled' : ''}">
-            <a class="page-link" aria-label="Previous" @click="${this.goToPage(this.currentPage--)}">
+        <ul class="qbo-paginate">
+          <li class="${this.currentPage === 1 ? 'disabled' : ''}">
+            <a aria-label="Previous" @click="${(e) => this.goToPage(this.currentPage--)}">
               <span aria-hidden="true">&laquo;</span>
             </a>
           </li>
           ${this.renderPageNumbers()}
-          <li class="page-item ${this.currentPage === this.maxPage ? 'disabled' : ''}">
-            <a class="page-link" aria-label="Next" @click="${this.goToPage(this.currentPage++)}">
+          <li class="${this.currentPage === this.maxPage ? 'disabled' : ''}">
+            <a aria-label="Next" @click="${(e) => this.goToPage(this.currentPage++)}">
               <span aria-hidden="true">&raquo;</span>
             </a>
           </li>
+          ${this.editSize ? this.renderPageSize() : html ``}
         </ul>
       </nav>`;
     }
@@ -112,6 +129,10 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], QboPaginate.prototype, "rollingView", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], QboPaginate.prototype, "editSize", void 0);
 QboPaginate = __decorate([
     customElement('qbo-paginate')
 ], QboPaginate);

package/src/qbo/qbo-paginate.ts

@@ -22,6 +22,9 @@ export class QboPaginate extends LitElement {
     @property({ type: Boolean })
     rollingView = true;
 
+    @property({ type: Boolean })
+    editSize = true;
+
     private get maxPage(): number {
         return Math.floor(this.count / this.display) + (this.count % this.display === 0 ? 0 : 1);
     }
@@ -45,8 +48,8 @@ export class QboPaginate extends LitElement {
 
     
     renderPage(i: number) {
-        return html`<li class="page-item ${this.currentPage === i ? 'active' : ''}">
-          <a class="page-link" @click="${() => this.goToPage(i)}">${i}</a>
+        return html`<li class="${this.currentPage === i ? 'active' : ''}">
+          <a @click="${(e) => this.goToPage(i)}">${i}</a>
         </li>`;
     }
 
@@ -79,21 +82,39 @@ export class QboPaginate extends LitElement {
         return pages;
     }
 
+    setDisplaySize(e: Event) {
+        const target = e.target as HTMLInputElement;
+        const display = parseInt(target.value);
+        if (!isNaN(display)) {
+            this.display = display;
+            this.start = 0;
+            this.goToPage(1); 
+        }
+    }
+
+    renderPageSize() {
+        return html`<li class="pageSize">
+  <input type="number" min="5" value="${this.display}" title="Display Size" @change=${(e) => this.setDisplaySize(e)}>
+  <span>records per page</span>
+</li>`
+    }
+
     render() {
         return html`
       <nav aria-label="Page navigation">
-        <ul class="qbo-paginate paginate">
-          <li class="page-item ${this.currentPage === 1 ? 'disabled' : ''}">
-            <a class="page-link" aria-label="Previous" @click="${this.goToPage(this.currentPage--) }">
+        <ul class="qbo-paginate">
+          <li class="${this.currentPage === 1 ? 'disabled' : ''}">
+            <a aria-label="Previous" @click="${(e) => this.goToPage(this.currentPage--) }">
               <span aria-hidden="true">&laquo;</span>
             </a>
           </li>
           ${this.renderPageNumbers()}
-          <li class="page-item ${this.currentPage === this.maxPage ? 'disabled' : ''}">
-            <a class="page-link" aria-label="Next" @click="${this.goToPage(this.currentPage++)}">
+          <li class="${this.currentPage === this.maxPage ? 'disabled' : ''}">
+            <a aria-label="Next" @click="${(e) => this.goToPage(this.currentPage++)}">
               <span aria-hidden="true">&raquo;</span>
             </a>
           </li>
+          ${this.editSize ? this.renderPageSize() : html``}
         </ul>
       </nav>`;
     }