v1.0.11

sganis · Oct 4, 2023 · bfb4e2e · bfb4e2e
1 parent ed56144
commit bfb4e2e
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 57 deletions.
diff --git a/frontend/dist/assets/index-a2eb4064.js b/frontend/dist/assets/index-a2eb4064.js
diff --git a/frontend/dist/assets/index-c243a6f3.js b/frontend/dist/assets/index-c243a6f3.js
diff --git a/frontend/dist/assets/index-01748d3a.css → frontend/dist/assets/index-e625af75.css b/frontend/dist/assets/index-01748d3a.css → frontend/dist/assets/index-e625af75.css
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Pyme</title>
-    <script type="module" crossorigin src="/assets/index-a2eb4064.js"></script>
-    <link rel="stylesheet" href="/assets/index-01748d3a.css">
+    <script type="module" crossorigin src="/assets/index-c243a6f3.js"></script>
+    <link rel="stylesheet" href="/assets/index-e625af75.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/frontend/package.json b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "1.0.10",
+  "version": "1.0.11",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/frontend/src/lib/ItemTable.svelte b/frontend/src/lib/ItemTable.svelte
@@ -7,8 +7,14 @@
     export let sortCol;
     export let sortDesc;
     export let items;
+    export let offset;
+    export let limit;
+    export let total;
     export let showToolbar;
 
+    $:page = offset/limit + 1;
+    $:total_pages = Math.ceil(total/limit);
+
     let searchText;
     
     const searchLater = () => {
@@ -26,8 +32,8 @@
     const showModify = (o) => {
         dispatch('showModify', o);
     }
-    const showRemove = (o) => {
-        dispatch('showRemove', o);
+    const goToPage = (page) => {
+        dispatch('goToPage', page);
     }
     
 </script>
@@ -60,13 +66,14 @@
         New
     </button>
 </div>
-<br>
 {/if}
 
-<div class="row">
+
+
+<div class="row mt-3">
     <div class="table-responsive">
         <table class="table table-hover table-sm">
-            <thead class="table-success">
+            <thead class="table-warning">
                 <tr>
                     {#each table.columns as col, i}
                     <th on:click={()=>sort(col)} role="button" class="text-nowrap">
@@ -82,38 +89,51 @@
             <tbody>
             {#each items as o, i}
             <tr class="clickable" on:click={()=>showModify(o)}>
-                {#each table.columns as col}
-                <td>{ o[col] || ""}</td>
+                {#each table.columns as col, index}
+                    {#if col === 'paid' && o[col] }
+                    <td><i class="bi-check2"/></td>
+                    {:else}
+                    <td>{ o[col] || ""}</td>
+                    {/if}
                 {/each}
-                <!-- <td class="text-nowrap text-end">
-                    <button class="btn btn-light btn-sm btn-width-sm" type="button" 
-                        on:click={() => showModify(o)}>
-                        <i class="bi-pencil"/>
-                    </button>
-                    <button class="btn btn-light btn-sm btn-width-sm" type="button" 
-                        on:click={() => showRemove(o)}>
-                        <i class="bi-trash3"/>
-                    </button>
-                </td>             -->
             </tr>    
             {/each} 
             </tbody>
         </table>        
     </div>
 </div>
 
-<div>Total: {items.length}</div>
+
+<div class="d-flex flex-row justify-content-end gap-3">
+    {#if total_pages}
+    {#if page > 1}
+    <a href="#/" on:click={()=>goToPage(1)} class="page"><i class="bi-chevron-double-left"/></a>
+    <a href="#/" on:click={()=>goToPage(page - 1)} class="page"><i class="bi-chevron-left"/></a>
+    {:else}
+    <i class="bi-chevron-double-left link-disabled" />
+    <i class="bi-chevron-left link-disabled" />
+    {/if}
+    Page {page}/{total_pages}
+    {#if page + 1 <= total_pages}
+    <a href="#/" on:click={()=>goToPage(page + 1)} class="page"><i class="bi-chevron-right"/></a>
+    <a href="#/" on:click={()=>goToPage(total_pages)} class="page"><i class="bi-chevron-double-right"/></a>
+    {:else}
+    <i class="bi-chevron-right link-disabled" />
+    <i class="bi-chevron-double-right link-disabled" />
+    {/if}    
+    {/if}
+</div>
 
 
 <style>
-    .btn-width-sm {
-        width: 32px;
-    }
     .bi-app {
         content: "\2122";
         color: transparent !important;
     }
     .clickable {
         cursor: pointer;
     }
+    .link-disabled {
+        color: lightgray;
+    }
 </style>
diff --git a/frontend/src/lib/itemManager.js b/frontend/src/lib/itemManager.js
@@ -3,10 +3,12 @@ import { push } from "svelte-spa-router";
 import { working, state, apierror } from "./store";
 
 export default class ItemManager {
-  constructor(url, sortcol, sortdesc) {
+  constructor(url, sortcol, sortdesc, limit, offset) {
     this.url = url;
     this.sortCol = sortcol;
     this.sortDesc = sortdesc;
+    this.limit = limit;
+    this.offset = offset;
     this.searchText = "";
     this.result = [];
     this.error = "";
@@ -17,7 +19,7 @@ export default class ItemManager {
       working.set(true);
       apierror.set("");
       this.error = "";
-      let query = `q=${this.searchText}&sortcol=${this.sortCol}&desc=${this.sortDesc}`;
+      let query = `q=${this.searchText}&sortcol=${this.sortCol}&desc=${this.sortDesc}&limit=${this.limit}&offset=${this.offset}`;
 
       const r = await fetch(`${this.url}?${query}`, {
         headers: {

diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
@@ -26,8 +26,8 @@
 
     let title = "Orders";
     let table = {
-        header : ['Date','Cust','Total', 'Paid'],
-        columns : ['date','customer','price','paid'],
+        header : ['ID','Date','Cust','Total', 'Paid'],
+        columns : ['id','date','customer','price','paid'],
     }
     let itemInit = {
         date: today,
@@ -43,7 +43,11 @@
     }
     let order = {...itemInit}
 
-    let items = [];
+    let result = {
+        items : [],
+        offset : 0,
+    };
+    let limit = 10;
     let error = '';
     let timer;
     const waitTime = 500;
@@ -52,15 +56,15 @@
         console.log('mouning home, state:', JSON.stringify($state));
         console.log(url);
         if (manager===undefined)
-            manager = new ItemManager(url, sortCol, sortDesc);
+            manager = new ItemManager(url, sortCol, sortDesc, limit, 0);
         await manager.search();
         error = manager.error;
-        items = manager.result;       
+        result = manager.result;       
     });
     const refresh = async () => {
         await manager.search();
         error = manager.error;
-        items = manager.result;
+        result = manager.result;       
     } 
     const searchLater = async (e) => {
         const searchText = e.detail;
@@ -69,12 +73,12 @@
         if (e.key == "Enter") {
             await manager.search();
             error = manager.error;
-            items = manager.result;
+            result = manager.result;       
         } else {
             timer = setTimeout(async () => {
                 await manager.search();
                 error = manager.error;
-                items = manager.result;
+                result = manager.result;       
             }, waitTime);
         }
     }
@@ -90,7 +94,7 @@
         sortDesc = manager.sortDesc;
         await manager.search();
         error = manager.error;
-        items = manager.result;
+        result = manager.result;       
     }
     const showCreate = () => {
         order = {...itemInit};
@@ -117,6 +121,17 @@
         isModal = true;
         error = '';
     }
+    const goToPage = async (e) => {
+        let page = e.detail;
+        if (page < 1) page = 1;
+        let offset = (page-1)*limit;
+        //console.log('goto page:', page, offset);
+        
+        manager.offset = offset;
+        await manager.search();
+        error = manager.error;
+        result = manager.result;
+    }
 
 </script>
 
@@ -135,7 +150,10 @@
 <ItemsTable 
     {title}
     {showToolbar}
-    {items} 
+    items={result.items} 
+    {limit}
+    offset={result.offset}
+    total={result.total}
     {table} 
     {sortCol} 
     {sortDesc} 
@@ -144,7 +162,8 @@
     on:searchLater={searchLater} 
     on:showCreate={showCreate}  
     on:showRemove={showRemove}  
-    on:showModify={showModify} />
+    on:showModify={showModify} 
+    on:goToPage={goToPage} />
 
 
 <style>

diff --git a/frontend/src/routes/Order.svelte b/frontend/src/routes/Order.svelte
@@ -266,6 +266,7 @@
                 delay="200"
                 bind:selectedItem={order.customer}
                 bind:text={currentCustomer}
+                disabled={$working}
                 create={true}
                 createText={"Item doesn't exist, create one?"} 
                 onCreate={handleCreate}         />