#26 tabs to see each table

components/DbCompoundShowList.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+const { t } = useI18n();
+const props = defineProps({
+    nameTable: {
+        type:String,
+        required:true
+    }
+});
+console.log(props.nameTable);
+const structTable = await $fetch("/api/manageControl/header",{
+    method:"post",
+    body:{nameTable:props.nameTable}
+});
+
+structTable.push({key:"action"});
+
+const nbPage = await $fetch("/api/manageControl/nbPages",{
+    method:"post",
+    body:{nameTable:props.nameTable}
+});
+
+const items = await $fetch("/api/manageControl/getPage",{
+    method:"post",
+    body:{nameTable:props.nameTable}
+});
+
+const totalItems = await $fetch("/api/manageControl/totalItems",{
+    method:"post",
+    body:{nameTable:props.nameTable}
+});
+
+</script>
+
+<template>
+  <v-data-table-server
+    :headers="structTable"
+    :items="items"
+    :items-length="totalItems"
+  >
+    <template #headers="{ columns, isSorted, getSortIcon, toggleSort }">
+      <tr>
+        <template
+          v-for="column in columns"
+          :key="column.key"
+        >
+          <td>
+            <span
+              class="mr-2 cursor-pointer"
+              @click="() => toggleSort(column)"
+            >{{ t("header."+column.key) }}</span>
+            <template v-if="isSorted(column)">
+              <v-icon :icon="getSortIcon(column)" />
+            </template>
+          </td>
+        </template>
+      </tr>
+    </template>
+    <template #item.action="{ item }">
+      <v-btn
+        density="compact"
+        icon="mdi-pen"
+        color="green"
+        @click="console.log(item)"
+      />
+      <v-btn
+        density="compact"
+        icon="mdi-trash-can"
+        color="red"
+        @click="console.log(item)"
+      />
+    </template>
+  </v-data-table-server>
+</template>

components/ExtrasNav.vue

@@ -14,14 +14,15 @@ import lang from "~/components/LangButton.vue";
 import {reactive} from "vue";
 // import { useI18n } from "#imports";
 const { t } = useI18n();
+const localePath = useLocalePath()
 
 const iconLinkTo = ref("i-heroicons-home-modern");
 const titleLinkTo = ref(t("button.home"));
-const pathLinkTo = ref("/");
+const pathLinkTo = ref(localePath({name: "index"}));
 if(props.linkTo == "control"){
     iconLinkTo.value = "i-heroicons-scale";
     titleLinkTo.value = t("button.control");
-    pathLinkTo.value = "/control"
+    pathLinkTo.value = localePath({name: "control"})
 }
 
 // Variable identify user

lang/en-US.ts

@@ -15,6 +15,12 @@ export default {
         viewProject: "View",
         yes: "Yes"
     },
+    header:{
+        action: "Actions",
+        name: "Name",
+        url: "URL",
+        description: "Description"
+    },
     image:{
         banner:{
             alt:"P2M2 icon",
@@ -55,6 +61,11 @@ export default {
         updateProject:"updated",
         waitCreateProject: "Hold on please, we're creating your project"
     },
+    tabs:{
+        reference: "Reference",
+        machine: "Machine",
+        fitting: "Fitting"
+    },
     title:{
         projectName: "Projet name"
     }

lang/fr-FR.ts

@@ -15,6 +15,12 @@ export default {
         viewProject: "Détails",
         yes: "Oui"
     },
+    header:{
+        action: "Actions",
+        name: "Nom",
+        url: "URL",
+        description: "Description"
+    },
     image: {
         banner: {
             alt: "icône P2M2",
@@ -55,6 +61,11 @@ export default {
         updateProject:"est mise à jour",
         waitCreateProject: "Projet en cours de création"
     },
+    tabs:{
+        reference: "Témoin",
+        machine: "Matériel",
+        fitting: "Ajustement"
+    },
     title: {
         projectName: "Nom du projet"
     }

nuxt.config.ts

@@ -31,7 +31,7 @@ export default defineNuxtConfig({
         preference: "light"
     },
     i18n: {
-        strategy: "no_prefix",
+        // strategy: "no_prefix",
         locales: [
             {
                 code: "en-US",
@@ -46,7 +46,18 @@ export default defineNuxtConfig({
 
         ],
         lazy: true,
-        langDir: "lang"
+        langDir: "lang",
+        customRoutes: "config",   // disable custom route with page components
+        pages: {
+            index: {
+                en: "/",
+                fr: "/",
+            },
+            control: {
+                en: "/control",
+                fr: "/control",
+            }
+        }
     },
     pages:true,
     // thx: https://stackoverflow.com/a/77140279

pages/control.vue

@@ -3,23 +3,26 @@
  -->
 
 <script lang="ts">
+import comp from "~/components/DbCompoundShowList.vue";
 import banner from "~/components/BannerMain.vue";
 import extras from "~/components/ExtrasNav.vue";
-import extract from "~/components/ExtractInfo.vue";
 import login from "~/components/LoginForm.vue";
 import bug from "~/components/BugButton.vue";
 import { useCookie } from "nuxt/app";
 
 export default{
     components:{
+        comp,
         login,
         banner,
         extras,
-        extract,
         bug
     },
     data(){
-        return {checkSession: false};
+        return {
+            checkSession: false,
+            tab: "reference"
+        };
     },
     created:async function() {
         const token = useCookie("token",{sameSite:"strict"});
@@ -38,8 +41,16 @@ export default{
             body: token.value.toString()
         });
     },
+    methods:{
+        t(params:string) {
+            const {t} = useI18n();
+            return t(params);
+        }
+    }
+
 };
 
+
 </script>
 
 <template>
@@ -64,11 +75,85 @@ export default{
       </UContainer>
       <login />
     </template>
-
-    <extract v-if="checkSession" />
+    <UContainer v-if="checkSession">
+      <div class="d-flex flex-row">
+        <v-tabs
+          v-model="tab"
+          direction="vertical"
+        >
+          <v-tab value="reference">
+            <v-icon start>
+              mdi-beaker-outline
+            </v-icon>
+            {{ t("tabs.reference") }}
+          </v-tab>
+          <v-tab value="machine">
+            <v-icon start>
+              mdi-washing-machine
+            </v-icon>
+            {{ t("tabs.machine") }}
+          </v-tab>
+          <v-tab value="fitting">
+            <v-icon start>
+              mdi-scale-balance
+            </v-icon>
+            {{ t("tabs.fitting") }}
+          </v-tab>
+        </v-tabs>
+        <v-window v-model="tab">
+          <v-window-item value="reference">
+            <v-card flat>
+              <v-card-text>
+                <comp
+                  name-table="compound"
+                />
+              </v-card-text>
+            </v-card>
+          </v-window-item>
+          <v-window-item value="machine">
+            <v-card flat>
+              <v-card-text>
+                <p>
+                  Morbi nec metus. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nunc sed turpis.
+                </p>
+
+                <p>
+                  Suspendisse feugiat. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In hac habitasse platea dictumst. Fusce ac felis sit amet ligula pharetra condimentum.
+                </p>
+
+                <p>
+                  Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Nam commodo suscipit quam. In consectetuer turpis ut velit. Sed cursus turpis vitae tortor. Aliquam eu nunc.
+                </p>
+
+                <p>
+                  Etiam ut purus mattis mauris sodales aliquam. Ut varius tincidunt libero. Aenean viverra rhoncus pede. Duis leo. Fusce fermentum odio nec arcu.
+                </p>
+
+                <p class="mb-0">
+                  Donec venenatis vulputate lorem. Aenean viverra rhoncus pede. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce commodo aliquam arcu. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
+                </p>
+              </v-card-text>
+            </v-card>
+          </v-window-item>
+          <v-window-item value="fitting">
+            <v-card flat>
+              <v-card-text>
+                <p>
+                  Fusce a quam. Phasellus nec sem in justo pellentesque facilisis. Nam eget dui. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
+                </p>
+
+                <p class="mb-0">
+                  Cras sagittis. Phasellus nec sem in justo pellentesque facilisis. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nam at tortor in tellus interdum sagittis.
+                </p>
+              </v-card-text>
+            </v-card>
+          </v-window-item>
+        </v-window>
+      </div>
+    </UContainer>
+
     <!-- <bug v-else /> -->
     <template 
-
       #footer
     >
       <bug />

server/api/class/tableClass.ts

@@ -43,21 +43,30 @@ export default class Table {
     get header(){
         return this._headers.filter(x => x.key != "id");
     }
-    /**
-     * Get number of page of Table
-     * @param nbRowsByPage number : number of rows by page
-     * @returns number
-     */
-    async getNbPage(nbRowsByPage: number){
+
+    async totalItems(){
         const client = new pg.Client();
         await client.connect();
         // get number of rows
         // TODO add id in all table or use sql properties to get nb rows
-        const resp = await client.query(`SELECT COUNT(id) as nbRows
+        const resp = await client.query(`SELECT COUNT(id) as nb_rows
                                    FROM ${this._nameTable}`);
+        console.log(resp);
+
         client.end();
-        return Math.floor(resp.rows[0].nbRows/nbRowsByPage) +
-            (resp.rows[0].nbRows%nbRowsByPage?1:0);
+        console.log(resp.rows[0].nb_rows);
+        return resp.rows[0].nb_rows;
+    }
+    /**
+     * Get number of page of Table
+     * @param nbRowsByPage number : number of rows by page
+     * @returns number
+     */
+    async getNbPage(nbRowsByPage: number){
+        const nbRows = this.totalItems;
+
+        return Math.floor(nbRows/nbRowsByPage) +
+            (nbRows%nbRowsByPage?1:0);
     }
 
     /**

server/api/manageControl/[action].post.ts

@@ -17,11 +17,19 @@ export default defineEventHandler(async (event) => {
     }
 
     if (action == "nbPages"){
-        return table.getNbPage(2);
+        return await table.getNbPage(2);
     }
 
     if(action == "getPage"){
-        return table.getPage(1, 2);
+        return await table.getPage(1, 2);
+    }
+
+    if(action == "totalItems"){
+        console.log("vas-y");
+
+        console.log(await table.totalItems());
+
+        return await table.totalItems();
     }
     return table.header;
 });