add route for transaction

backend/controller/transaction/controller.go

@@ -22,7 +22,7 @@ func (ctrl *Controller) Config() crud.Configuration {
 		Table:        "transactions",
 		Model:        model.Transaction{},
 		Models:       []model.Transaction{},
-		ValidOrders:  []string{"accounted_at", "short_label", "label", "reference", "information", "operation_type", "debit", "credit", "date", "category_id", "bank_account_id"},
+		ValidOrders:  []string{"id", "accounted_at", "short_label", "label", "reference", "information", "operation_type", "debit", "credit", "date", "category_id", "bank_account_id"},
 		DefaultLimit: 20,
 		DefaultOrder: "date",
 		DefaultSort:  "desc",

frontend/js/router/index.js

@@ -17,6 +17,14 @@ const router = createRouter({
         icon: ['fa-solid', 'fa-money-bill-transfer'],
       },
       component: () => import('../views/transaction/ListView.vue'),
+      children: [
+        {
+          path: '/transaction/:id',
+          props: true,
+          name: 'transaction_show',
+          component: () => import('../views/transaction/ShowView.vue'),
+        },
+      ],
     },
     {
       path: '/users',

frontend/js/views/transaction/ListView.vue

@@ -3,6 +3,8 @@
     fluid
     class="p-0"
   >
+    <RouterView />
+
     <CrudHeader :title="$route.meta.label">
       <template #menu>
         <BButtonToolbar key-nav>
@@ -43,26 +45,6 @@
       />
     </div>
 
-    <BModal
-      v-if="info !== null"
-      v-model="infoShow"
-      class="modal-lg info"
-      :title="info.reference"
-    >
-      <ShowView :transaction="info" />
-
-      <template #footer>
-        <div>
-          <BButton
-            variant="secondary"
-            class="me-2"
-            @click="infoShow = false"
-            >Fermer</BButton
-          >
-        </div>
-      </template>
-    </BModal>
-
     <BModal
       v-if="form !== null"
       v-model="formShow"
@@ -117,13 +99,13 @@ import CrudHeader from '../../components/crud/CrudHeader.vue'
 import CrudFilter from '../../components/CrudFilter.vue'
 import CrudPager from '../../components/crud/CrudPager.vue'
 import FormView from '../../components/crud/FormView.vue'
-import ShowView from './ShowView.vue'
 import DataList from '../../components/crud/DataList.vue'
 import { ref, onMounted, watch } from 'vue'
 import { getStorage, saveStorage } from '../../lib/storage'
 import { createRequestOptions } from '../../lib/request'
 import { queryFilters, appendRequestQueryFilters } from '../../lib/filter'
 import { renderDate, renderCategory, renderBankAccount, renderEuro, renderLabelWithSum } from '../../lib/renderers'
+import { useRouter, RouterView } from 'vue-router'
 
 const endpoint = `/api/transaction`
 const order = ref(getStorage(`${endpoint}:order`))
@@ -134,10 +116,9 @@ const data = ref(null)
 const pages = ref(null)
 const form = ref(null)
 const formShow = ref(false)
-const infoShow = ref(false)
-const info = ref(null)
 const filters = ref(getStorage(`${endpoint}:filters`) ?? [])
 const filtersShow = ref(false)
+const router = useRouter()
 
 watch(order, (v) => saveStorage(`${endpoint}:order`, v))
 watch(sort, (v) => saveStorage(`${endpoint}:sort`, v))
@@ -170,8 +151,7 @@ const refresh = () => {
 }
 
 const doShow = (item) => {
-  info.value = item
-  infoShow.value = true
+  router.replace({ name: 'transaction_show', params: { id: item.id } })
 }
 
 const doUpdateFilters = (a) => {

frontend/js/views/transaction/ShowView.vue

@@ -1,69 +1,120 @@
 <template>
-  <BTableSimple
-    responsive
-    class="w-100"
+  <div
+    v-if="data"
+    id="transaction"
   >
-    <BTr>
-      <BTh>Libellé</BTh>
-      <BTd>{{ transaction.label }}</BTd>
-    </BTr>
-    <BTr>
-      <BTh>Libellé simplifié</BTh>
-      <BTd>{{ transaction.short_label }}</BTd>
-    </BTr>
-    <BTr>
-      <BTh>Référence</BTh>
-      <BTd>{{ transaction.reference }}</BTd>
-    </BTr>
-    <BTr>
-      <BTh>Informations</BTh>
-      <BTd>{{ transaction.transactionrmation }}</BTd>
-    </BTr>
-    <BTr>
-      <BTh>Type d'opération</BTh>
-      <BTd>{{ transaction.operation_type }}</BTd>
-    </BTr>
-    <BTr>
-      <BTh>Débit</BTh>
-      <BTd>{{ transaction.debit }}</BTd>
-    </BTr>
-    <BTr>
-      <BTh>Crédit</BTh>
-      <BTd>{{ transaction.credit }}</BTd>
-    </BTr>
-    <BTr>
-      <BTh>Date</BTh>
-      <BTd>{{ renderDate(transaction.date) }}</BTd>
-    </BTr>
-    <BTr>
-      <BTh>Comptabilisée le</BTh>
-      <BTd>{{ renderDate(transaction.accounted_at) }}</BTd>
-    </BTr>
-    <BTr>
-      <BTh>Catégorie banque</BTh><BTd>{{ transaction.bank_category }}</BTd>
-    </BTr>
-    <BTr>
-      <BTh>Sous-catégorie banque</BTh>
-      <BTd>{{ transaction.bank_sub_category }}</BTd>
-    </BTr>
-    <BTr>
-      <BTh>Catégorie</BTh>
-      <BTd>
-        <!-- eslint-disable vue/no-v-html -->
-        <span v-html="renderCategory(transaction.category)"></span>
-      </BTd>
-    </BTr>
-  </BTableSimple>
+    <BModal
+      v-model="modal"
+      scrollable
+      ok-only
+      size="lg"
+      :title="data.label"
+    >
+      <BTableSimple
+        v-if="data"
+        responsive
+        class="table"
+      >
+        <BTr>
+          <BTh width="30%">Libellé</BTh>
+          <BTd>{{ data.label }}</BTd>
+        </BTr>
+        <BTr>
+          <BTh>Libellé simplifié</BTh>
+          <BTd>{{ data.short_label }}</BTd>
+        </BTr>
+        <BTr>
+          <BTh>Référence</BTh>
+          <BTd>{{ data.reference }}</BTd>
+        </BTr>
+        <BTr>
+          <BTh>Informations</BTh>
+          <BTd>{{ data.transactionrmation }}</BTd>
+        </BTr>
+        <BTr>
+          <BTh>Type d'opération</BTh>
+          <BTd>{{ data.operation_type }}</BTd>
+        </BTr>
+        <BTr>
+          <BTh>Débit</BTh>
+          <BTd>{{ data.debit }}</BTd>
+        </BTr>
+        <BTr>
+          <BTh>Crédit</BTh>
+          <BTd>{{ data.credit }}</BTd>
+        </BTr>
+        <BTr>
+          <BTh>Date</BTh>
+          <BTd>{{ renderDate(data.date) }}</BTd>
+        </BTr>
+        <BTr>
+          <BTh>Comptabilisée le</BTh>
+          <BTd>{{ renderDate(data.accounted_at) }}</BTd>
+        </BTr>
+        <BTr>
+          <BTh>Catégorie banque</BTh>
+          <BTd>{{ data.bank_category }}</BTd>
+        </BTr>
+        <BTr>
+          <BTh>Sous-catégorie banque</BTh>
+          <BTd>{{ data.bank_sub_category }}</BTd>
+        </BTr>
+        <BTr>
+          <BTh class="border-0">Catégorie</BTh>
+          <BTd class="border-0">
+            <!-- eslint-disable vue/no-v-html -->
+            <span
+              class="p-0"
+              v-html="renderCategory(data.category)"
+            ></span>
+          </BTd>
+        </BTr>
+      </BTableSimple>
+    </BModal>
+  </div>
 </template>
 
 <script setup>
-import { BTableSimple, BTr, BTh, BTd } from 'bootstrap-vue-next'
+import { BTableSimple, BTr, BTh, BTd, BModal } from 'bootstrap-vue-next'
 import { renderDate, renderCategory } from '../../lib/renderers'
+import { createRequestOptions } from '../../lib/request'
+import { onMounted, ref, watch } from 'vue'
 
-defineProps({
-  transaction: {
-    type: Object,
+const data = ref(null)
+const modal = ref(true)
+
+const props = defineProps({
+  id: {
+    type: Number,
     required: true,
   },
 })
+
+const id = ref(props.id)
+
+watch(
+  () => props.id,
+  (newValue) => {
+    id.value = newValue
+    loadData()
+  },
+)
+
+const loadData = () => {
+  fetch(
+    `/api/transaction?${new URLSearchParams({
+      id__eq: id.value,
+    })}`,
+    createRequestOptions(),
+  )
+    .then((response) => {
+      return response.json()
+    })
+    .then(function (value) {
+      data.value = value.rows[0]
+      modal.value = true
+    })
+}
+
+onMounted(loadData)
 </script>

frontend/scss/main.scss

@@ -129,6 +129,25 @@ $nav-size-sm: 50px;
   }
 }
 
+#transaction {
+  .table {
+    width: 100%;
+
+    th,
+    td {
+      vertical-align: middle;
+      padding-top: 0.8rem;
+      padding-bottom: 0.8rem;
+    }
+
+    thead th {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+}
+
 #body {
   width: calc(100vw - $nav-size);
   max-height: 100vh;