From 0de1c5dc2f9581ecfa743f34c4d2d7293dcf2e9b Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 18 Sep 2024 15:18:16 +0200
Subject: [PATCH] update ux

add pager
---
 frontend/js/views/BankAccountsView.vue    |   2 +-
 frontend/js/views/CategoriesView.vue      |   2 +-
 frontend/js/views/TransactionsView.vue    | 126 +++++++++++++++-------
 frontend/js/views/UsersView.vue           |   2 +-
 frontend/scss/main.scss                   |  17 +++
 web/controller/bank_account/controller.go |   1 -
 web/controller/category/controller.go     |   3 +-
 web/controller/crud/config.go             |  13 ++-
 web/controller/crud/crud.go               |   4 +
 web/controller/transaction/controller.go  |   6 +-
 10 files changed, 130 insertions(+), 46 deletions(-)

diff --git a/frontend/js/views/BankAccountsView.vue b/frontend/js/views/BankAccountsView.vue
index 8eb1d27..a1fc2df 100644
--- a/frontend/js/views/BankAccountsView.vue
+++ b/frontend/js/views/BankAccountsView.vue
@@ -3,7 +3,7 @@
     <div class="d-flex justify-content-between p-3 mb-3">
       <h3>Comptes bancaires</h3>
       <BButtonToolbar key-nav>
-        <BButton @click="doAdd">Ajouter</BButton>
+        <BButton variant="primary" @click="doAdd">Ajouter</BButton>
       </BButtonToolbar>
     </div>
     <BTableSimple caption-top responsive v-if="data !== null">
diff --git a/frontend/js/views/CategoriesView.vue b/frontend/js/views/CategoriesView.vue
index a7c01be..7cb9866 100644
--- a/frontend/js/views/CategoriesView.vue
+++ b/frontend/js/views/CategoriesView.vue
@@ -3,7 +3,7 @@
     <div class="d-flex justify-content-between p-3 mb-3">
       <h3>Catégories</h3>
       <BButtonToolbar key-nav>
-        <BButton @click="doAdd">Ajouter</BButton>
+        <BButton variant="primary" @click="doAdd">Ajouter</BButton>
       </BButtonToolbar>
     </div>
     <BTableSimple caption-top responsive v-if="data !== null">
diff --git a/frontend/js/views/TransactionsView.vue b/frontend/js/views/TransactionsView.vue
index 1d9022d..0765e18 100644
--- a/frontend/js/views/TransactionsView.vue
+++ b/frontend/js/views/TransactionsView.vue
@@ -1,31 +1,42 @@
 <template>
   <BContainer fluid class="p-0">
-    <div class="d-flex justify-content-between p-3 mb-3">
-      <h3>Transactions</h3>
+    <div class="d-flex justify-content-between p-3">
+      <h3 class="mb-0">Transactions</h3>
+      <div v-if="data !== null" class="d-flex justify-content-between gap-2">
+        <BPagination v-model="page" :per-page="limit" :total-rows="limit*pages" @page-click="updatePage" class="m-0" />
+        <BFormSelect
+          v-model="limit"
+          :options="limits"
+          @change="updateLimit"
+          :required="true"
+        />
+      </div>
       <BButtonToolbar key-nav>
-        <BButton @click="doAdd">Importer</BButton>
+        <BButton variant="primary" @click="doAdd">Importer</BButton>
       </BButtonToolbar>
     </div>
-    <BTableSimple caption-top responsive v-if="data !== null">
-      <BThead>
-        <BTr>
-          <BTh v-for="field in fields" :width="field.width" class="cursor" :class="field.classes" @click="doSort(field.key)">
-            <SortButton :currentOrder="order" :currentSort="sort" :order="field.key" :label="field.label" />
-          </BTh>
-        </Btr>
-      </BThead>
-      <BTbody>
-        <BTr v-for="row in data.rows">
-          <BTd v-for="field in fields">
-            <span v-if="field.key">
-              <span v-if="field.render" v-html="field.render(row)"></span>
-              <span v-else v-text="row[field.key]"></span>
-            </span>
-            <span v-else="field.render" v-html="field.render(row)"></span>
-          </BTd>
-        </Btr>
-      </BTbody>
-    </BTableSimple>
+    <div class="crud-list">
+      <BTableSimple caption-top v-if="data !== null">
+        <BThead>
+          <BTr>
+            <BTh v-for="field in fields" :width="field.width" class="cursor" :class="field.thClasses" @click="doSort(field.key)">
+              <SortButton :currentOrder="order" :currentSort="sort" :order="field.key" :label="field.label" />
+            </BTh>
+          </Btr>
+        </BThead>
+        <BTbody>
+          <BTr v-for="row in data.rows">
+            <BTd v-for="field in fields" :width="field.width" :class="field.tdClasses">
+              <span v-if="field.key">
+                <span v-if="field.render" v-html="field.render(row)"></span>
+                <span v-else v-text="row[field.key]"></span>
+              </span>
+              <span v-else="field.render" v-html="field.render(row)"></span>
+            </BTd>
+          </Btr>
+        </BTbody>
+      </BTableSimple>
+    </div>
     <BModal v-if="form !== null" v-model="formShow" :title="form?.label" @ok="doSave">
       <BAlert :model-value="form.error !== null" variant="danger" v-text="form.error"></BAlert>
       <BForm @submit="doSave">
@@ -90,6 +101,7 @@ import {
   BButtonToolbar,
   BFormSelect,
   BFormFile,
+  BPagination,
 } from 'bootstrap-vue-next'
 
 import SortButton from './../components/SortButton.vue'
@@ -100,11 +112,33 @@ const order = ref(null)
 const sort = ref(null)
 const page = ref(1)
 const pages = ref(null)
-const limit = ref(null)
+const limit = ref(10)
 const form = ref(null)
 const formShow = ref(false)
 const endpoint = `/api/transaction`
 
+const defineLimits = () => {
+  let v = []
+
+  for (let i of [10, 20, 50, 100]) {
+    v.push({value: i, text: i})
+  }
+
+  return v
+}
+
+const limits = defineLimits()
+
+const updatePage = (event, value) => {
+  page.value = value
+  refresh()
+}
+
+const updateLimit = () => {
+  page.value = 1
+  refresh()
+}
+
 const refresh = () => {
   fetch(`${endpoint}?${new URLSearchParams({
     order: order.value,
@@ -238,37 +272,53 @@ const fields = [
   {
     key: 'date',
     label: 'Date',
+    width: '90px',
     render: (item) => renderDate(item.date),
   },
-  {
-    key: 'accounted_at',
-    label: 'Comptabilisé',
-    render: (item) => renderDate(item.accounted_at),
-  },
   {
     key: 'short_label',
-    label: 'Libelle simplifie',
-  },
-  {
-    key: 'label',
-    label: 'Libelle',
-  },
-  {
-    key: 'information',
-    label: 'Informations',
+    width: '150px',
+    label: 'Libellé',
   },
   {
     key: 'operation_type',
+    width: '120px',
     label: 'Type',
   },
   {
     key: 'debit',
     label: 'Débit',
+    width: '120px',
+    thClasses: ['text-end'],
+    tdClasses: ['text-end'],
   },
   {
     key: 'credit',
     label: 'Crédit',
+    width: '120px',
+    thClasses: ['text-end'],
+    tdClasses: ['text-end'],
   },
+  {
+    key: 'category',
+    label: 'Catégorie',
+    width: '120px',
+    render: (item) => {
+      if (item.category !== null) {
+        return item.category.label
+      }
+    },
+  },
+  {
+    key: 'bank_account',
+    label: 'Compte',
+    width: '120px',
+    render: (item) => {
+      if (item.bank_account !== null) {
+        return item.bank_account.label
+      }
+    },
+  }
 ]
 
 onMounted(() => {
diff --git a/frontend/js/views/UsersView.vue b/frontend/js/views/UsersView.vue
index 150edbb..138ec63 100644
--- a/frontend/js/views/UsersView.vue
+++ b/frontend/js/views/UsersView.vue
@@ -3,7 +3,7 @@
     <div class="d-flex justify-content-between p-3 mb-3">
       <h3>Utilisateurs</h3>
       <BButtonToolbar key-nav>
-        <BButton @click="doAdd">Ajouter</BButton>
+        <BButton variant="primary" @click="doAdd">Ajouter</BButton>
       </BButtonToolbar>
     </div>
     <BTableSimple caption-top responsive v-if="data !== null">
diff --git a/frontend/scss/main.scss b/frontend/scss/main.scss
index 8317f1c..1fe6891 100644
--- a/frontend/scss/main.scss
+++ b/frontend/scss/main.scss
@@ -17,6 +17,7 @@
 #app, main {
   min-height: 100vh;
   max-height: 100vh;
+  overflow: hidden;
 }
 
 $nav-size: 300px;
@@ -25,6 +26,22 @@ $nav-size: 300px;
   width: $nav-size;
 }
 
+.crud {
+  &-list {
+    width: calc(100vw - $nav-size);
+    height: calc(100vh - 90px);
+    overflow: auto;
+
+    thead th {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+}
+
 #body {
   width: calc(100vw - $nav-size);
+  max-height: 100vh;
+  overflow: scroll;
 }
diff --git a/web/controller/bank_account/controller.go b/web/controller/bank_account/controller.go
index f0147d8..adb4045 100644
--- a/web/controller/bank_account/controller.go
+++ b/web/controller/bank_account/controller.go
@@ -16,7 +16,6 @@ func (ctrl *Controller) Config() crud.Configuration {
 		Model:        model.BankAccount{},
 		Models:       []model.BankAccount{},
 		ValidOrders:  []string{"id", "label"},
-		ValidLimits:  []int{20, 50, 100},
 		DefaultLimit: 20,
 		CreateModel: func() interface{} {
 			return new(model.BankAccount)
diff --git a/web/controller/category/controller.go b/web/controller/category/controller.go
index 17df9a9..8af958e 100644
--- a/web/controller/category/controller.go
+++ b/web/controller/category/controller.go
@@ -16,8 +16,7 @@ func (ctrl *Controller) Config() crud.Configuration {
 		Model:        model.Category{},
 		Models:       []model.Category{},
 		ValidOrders:  []string{"id", "label"},
-		ValidLimits:  []int{20, 50, 100},
-		DefaultLimit: 20,
+		DefaultLimit: 100,
 		CreateModel: func() interface{} {
 			return new(model.Category)
 		},
diff --git a/web/controller/crud/config.go b/web/controller/crud/config.go
index 224b805..9b08342 100644
--- a/web/controller/crud/config.go
+++ b/web/controller/crud/config.go
@@ -1,5 +1,7 @@
 package crud
 
+import "gorm.io/gorm"
+
 type Configuration struct {
 	Model        interface{}
 	Models       any
@@ -9,6 +11,7 @@ type Configuration struct {
 	DefaultSort  string
 	DefaultLimit int
 	CreateModel  func() interface{}
+	ListQuery    func(*gorm.DB)
 }
 
 func (c *Configuration) GetDefaultOrder() string {
@@ -27,6 +30,14 @@ func (c *Configuration) GetDefaultSort() string {
 	return "asc"
 }
 
+func (c *Configuration) GetValidLimits() []int {
+	if len(c.ValidLimits) > 0 {
+		return c.ValidLimits
+	}
+
+	return []int{10, 20, 50, 100}
+}
+
 func (c *Configuration) IsValidOrder(value string) bool {
 	for _, v := range c.ValidOrders {
 		if v == value {
@@ -38,7 +49,7 @@ func (c *Configuration) IsValidOrder(value string) bool {
 }
 
 func (c *Configuration) IsValidLimit(value int) bool {
-	for _, v := range c.ValidLimits {
+	for _, v := range c.GetValidLimits() {
 		if v == value {
 			return true
 		}
diff --git a/web/controller/crud/crud.go b/web/controller/crud/crud.go
index a70a3c4..405b4ba 100644
--- a/web/controller/crud/crud.go
+++ b/web/controller/crud/crud.go
@@ -50,6 +50,10 @@ func (ctrl *Controller) List(c echo.Context) error {
 		Desc:   sort == "desc",
 	})
 
+	if ctrl.Config.ListQuery != nil {
+		ctrl.Config.ListQuery(db)
+	}
+
 	data := ListData{
 		Limit: ctrl.Config.DefaultLimit,
 		Order: order,
diff --git a/web/controller/transaction/controller.go b/web/controller/transaction/controller.go
index 219c7af..6ae717b 100644
--- a/web/controller/transaction/controller.go
+++ b/web/controller/transaction/controller.go
@@ -10,6 +10,7 @@ import (
 	"gitnet.fr/deblan/budget/database/manager"
 	"gitnet.fr/deblan/budget/database/model"
 	"gitnet.fr/deblan/budget/web/controller/crud"
+	"gorm.io/gorm"
 )
 
 type Controller struct {
@@ -21,13 +22,16 @@ func (ctrl *Controller) Config() crud.Configuration {
 		Model:        model.Transaction{},
 		Models:       []model.Transaction{},
 		ValidOrders:  []string{"accounted_at", "short_label", "label", "reference", "information", "operation_type", "debit", "credit", "date"},
-		ValidLimits:  []int{20, 50, 100},
 		DefaultLimit: 20,
 		DefaultOrder: "date",
 		DefaultSort:  "desc",
 		CreateModel: func() interface{} {
 			return new(model.Transaction)
 		},
+		ListQuery: func(db *gorm.DB) {
+			db.Joins("BankAccount")
+			db.Joins("Category")
+		},
 	}
 }