#init

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+out/*

src/App.vue

@@ -2,45 +2,36 @@
 import TicketList from '@/components/TicketList.vue'
 import {onMounted, ref} from 'vue';
 import {Tab} from 'bootstrap'
-
-const tabWrapper = ref(null)
-
-onMounted(() => {
-  new Tab(tabWrapper.value)
-})
 </script>
 
 <template>
 <div class="container-fluid">
-
   <div class="card">
     <div class="card-body">
-
-
-
-  <ul class="nav nav-tabs nav-tabs-bordered" id="ticketsList" role="tablist">
-    <li class="nav-item" role="presentation">
-      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Nouvelles Fiches</button>
-    </li>
-    <li class="nav-item" role="presentation">
-      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Fiches en cours</button>
-    </li>
-    <li class="nav-item" role="presentation">
-      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Mes Fiches</button>
-    </li>
-  </ul>
-  <div class="tab-content" id="ticketsListContent">
-    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
-      <ticket-list></ticket-list>
+      <ul class="nav nav-tabs nav-tabs-bordered" id="ticketsList" role="tablist" ref="tab">
+        <li class="nav-item" role="presentation">
+          <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#new" type="button">Nouvelles Fiches</button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#pending" type="button">Fiches en cours</button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" data-bs-toggle="tab" data-bs-target="#my" type="button">Mes fiches</button>
+        </li>
+      </ul>
+      <div class="tab-content" id="ticketsListContent">
+        <div class="tab-pane show active" id="new" role="tabpanel" tabindex="0">
+          <ticket-list></ticket-list>
+        </div>
+        <div class="tab-pane" id="pending" role="tabpanel" tabindex="0">
+         TO DO 2
+        </div>
+        <div class="tab-pane" id="my" role="tabpanel" tabindex="0">
+          TO DO 3
+        </div>
+      </div>
     </div>
-    <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
-    <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
   </div>
-
-</div>
-
-  </div>
-
 </div>
 </template>
 

src/assets/style.scss

@@ -0,0 +1,4 @@
+#app {
+  @import "bootstrap/scss/bootstrap.scss";
+  @import "niceAdmin.scss";
+}

src/components/TicketList.vue

@@ -47,6 +47,28 @@ const grid = new Grid({
   pagination: {
     limit: 10,
     summary: false
+  },
+  language: {
+    search: {
+      placeholder: 'Filtrer...',
+    },
+    sort: {
+      sortAsc: 'Trier par ordre croissant',
+      sortDesc: 'Trier par ordre décroissant',
+    },
+    pagination: {
+      previous: 'Précédent',
+      next: 'Suivant',
+      navigate: (page, pages) => `Page ${page} / ${pages}`,
+      page: (page) => `Page ${page}`,
+      showing: 'items',
+      of: 'sur',
+      to: 'à',
+      results: 'résultats',
+    },
+    loading: 'Chargement...',
+    noRecordsFound: 'Aucun résulat trouvé',
+    error: 'Une erreur est survenue',
   }
 
 });

src/main.js

@@ -2,8 +2,10 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 
-import "bootstrap/scss/bootstrap.scss";
+
 import './style.css'
+import './assets/style.scss'
+
 
 import '@fortawesome/fontawesome-free/css/fontawesome.css'
 import '@fortawesome/fontawesome-free/css/solid.css'