Merge branch 'feature/WW-26-architecture'

src/components/app-pagination/AppPaginationElement.ts

@@ -0,0 +1,131 @@
+import { attr, controller, target } from "@github/catalyst";
+import { html, render } from "@github/jtml";
+import { AppMainElement } from "components/app-main/AppMainElement";
+import { closest, isTrue } from "core/utils";
+
+@controller
+class AppPaginationElement extends HTMLElement {
+    @closest appMain: AppMainElement;
+    public items: Array<any>;
+    @attr page: number;
+    @attr rpp: number;
+    @attr totalItems: number;
+    @attr autoInit: string;
+    fetchFunc: Function = () => {};
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {}
+
+    attributeChangedCallback() {
+        this.update();
+    }
+
+    setItems = (items) => {
+        this.items = items;
+        this.update();
+    };
+
+    setFetchFunc = async (fetchFunc: Function, autoInit?) => {
+        this.fetchFunc = fetchFunc;
+        if (autoInit) {
+            const options = {
+                rpp: this.rpp || 5,
+                page: this.page || 1,
+            };
+            this.executeFetch(options);
+        }
+    };
+
+    executeFetch = async (options?) => {
+        if (!options) {
+            options = {
+                rpp: this.rpp || 5,
+                page: this.page || 1,
+            };
+        }
+
+        try {
+            const response = await this.fetchFunc(options);
+            this.setItems(response?.items);
+            this.totalItems = response?.totalRecords;
+            this.page = response?.page;
+            this.rpp = response?.rpp;
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
+    pageBack = () => {
+        const { page } = this;
+        if (page > 1) {
+            this.page--;
+            this.executeFetch();
+        }
+    };
+
+    pageNext = () => {
+        const { rpp, totalItems, page } = this;
+        const pageRange = Math.ceil(totalItems / rpp);
+        if (page < pageRange) {
+            this.page++;
+            this.executeFetch();
+        }
+    };
+
+    render = () => {
+        const { rpp, totalItems, page, items } = this;
+
+        const renderItem = (item) => html`<tr>
+            <td>${item.description}</td>
+            <td>${item.amount}</td>
+        </tr>`;
+
+        const renderItems = () => {
+            if (items?.length > 0) {
+                return html`${items?.map((item) => renderItem(item))}`;
+            }
+            return html``;
+        };
+
+        const renderPagination = () => {
+            if (totalItems > items?.length) {
+                const pageRange = Math.ceil(totalItems / rpp);
+                return html`
+                    <div>
+                        <button
+                            class="btn btn-blue btn-squared ${page <= 1
+                                ? "disabled"
+                                : ""}"
+                            data-action="click:app-pagination#pageBack"
+                        >
+                            Prev
+                        </button>
+                        <button
+                            class="btn btn-blue btn-squared ${page >= pageRange
+                                ? "disabled"
+                                : ""}"
+                            data-action="click:app-pagination#pageNext"
+                        >
+                            Next
+                        </button>
+                    </div>
+                `;
+            }
+        };
+
+        return html`<div>
+            <table>
+                ${renderItems()}
+            </table>
+            ${renderPagination()}
+        </div>`;
+    };
+
+    update = () => {
+        render(this.render(), this);
+    };
+}
+
+export type { AppPaginationElement };

src/components/index.ts

@@ -1,9 +1,10 @@
-export * from "./app-shadow/AppShadowElement";
 export * from "./app-link/AppLinkElement";
 export * from "./menu-item/MenuItemElement";
-export * from "./app-main/AppMainElement";
+export * from "./app-pagination/AppPaginationElement";
 export * from "./app-modal/AppModalElement";
 export * from "./app-root/AppRootElement";
 export * from "./app-slot/AppSlotElement";
 export * from "./app-menu/AppMenuElement";
 export * from "./input-field/InputFieldElement";
+export * from "./app-main/AppMainElement";
+export * from "./app-shadow/AppShadowElement";

src/pages/history-page/HistoryPageElement.ts

@@ -2,13 +2,13 @@ import { attr, targets, controller, target } from "@github/catalyst";
 import { closest, index, update, isTrue } from "core/utils";
 import { html, render, until } from "@github/jtml";
 import { TransactionsService } from "services/";
-import { AppMainElement } from "components/";
+import { AppMainElement, AppPaginationElement } from "components/";
 
 @controller
 class HistoryPageElement extends HTMLElement {
     private transactionsService: TransactionsService;
-    private transactions: Array<any> = [];
     @closest appMain: AppMainElement;
+    @target pagination: AppPaginationElement;
     constructor() {
         super();
     }
@@ -17,8 +17,8 @@ class HistoryPageElement extends HTMLElement {
         this.transactionsService = new TransactionsService(
             this.appMain?.appService
         );
-        if (this.appMain.isAuth) this.getTransactions();
         this.update();
+        this.pagination?.setFetchFunc?.(this.getTransactions, true)!;
         window.addEventListener("tokenchange", this.update);
     }
 
@@ -26,41 +26,20 @@ class HistoryPageElement extends HTMLElement {
         window.removeEventListener("tokenchange", this.update);
     }
 
-    getTransactions = async () => {
+    getTransactions = async (options) => {
         try {
-            const response = await this.transactionsService.getAll();
-            if (response) {
-                this.setTransactions(response?.items);
-            }
+            const response = await this.transactionsService.getAll(options);
+            return response;
         } catch (err) {
             throw err;
         }
     };
 
-    setTransactions(transactions: Array<any>) {
-        this.transactions = transactions;
-        console.log(transactions);
-        this.update();
-    }
-
-    openModal = () => {
-        const _modal = this.appMain.appModal;
-        if (_modal) {
-            this.appMain.closeModal();
-        } else {
-            this.appMain.createModal("login-page");
-        }
-    };
-
     render = () => {
         return html`
-            <ul>
-                ${this.transactions
-                    ? this.transactions.map((transaction) => {
-                          return html` <li>${transaction.description}</li> `;
-                      })
-                    : null}
-            </ul>
+            <app-pagination
+                data-target="history-page.pagination"
+            ></app-pagination>
         `;
     };