Item 48 ecran 2 choix services / traitements

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "vuetify-project",
+	"name": "Item",
 	"version": "0.0.0",
 	"scripts": {
 		"dev": "vite",

src/App.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup>
-import {ref} from 'vue'
+import { onBeforeMount, ref } from 'vue';
 import Header from '@/components/Structure/Header.vue'
 import Navbar from '@/components/Structure/Navbar.vue'
 import Footer from '@/components/Structure/Footer.vue'
@@ -42,6 +42,10 @@ import {HttpStatusCode} from 'axios'
 const errorStack = ref([])
 const drawer = ref(false)
 
+onBeforeMount(() => {
+    document.title = 'Item';
+})
+
 function addError(error) {
   let newError = {
     message: 'Erreur',

src/components/Home/BtnAccueil.vue

@@ -1,14 +1,24 @@
 <template>
-  <div
-    class="btnAccueil py-12  px-4 d-flex align-center rounded"
-    style=" border-radius: 20px;"
-    @click="router.push(route)"
-  >
-    <v-icon x-large color="grey-darken-2" class="mr-3">{{ icon }}</v-icon>
-    <h3 class="flex-grow-1 text-center">
-      <slot/>
-    </h3>
-  </div>
+  <v-hover v-slot="{ isHovering, props }">
+    <button
+      v-bind="props"
+      type="button"
+      :class="`py-12  px-4 d-flex align-center rounded elevation-${isHovering ? 6 : 2}`"
+      style="border-radius: 20px; display: block; width: 100%;"
+      @click="router.push(route)"
+    >
+      <v-row>
+        <v-col cols="12" xl="3" lg="3" md="3" sm="3" xs="3" align-self="center">
+          <v-icon size="xx-large" color="grey-darken-2"  class="mr-3">{{ icon }}</v-icon>
+        </v-col>
+        <v-col cols="12" xl="9" lg="9" md="9" sm="9" xs="9" class="d-flex justify-start">
+          <span  class="text-h5 font-weight-bold">
+            <slot/>
+          </span>
+        </v-col>
+      </v-row>
+    </button>
+  </v-hover>
 </template>
 
 <script setup>
@@ -19,13 +29,3 @@ const props = defineProps({
   route: { type: String, required: true }
 })
 </script>
-<style scoped>
-.btnAccueil:hover {
-  cursor: pointer;
-  background-color: lightgrey !important;
-  transition-duration: 0.3s;
-}
-.btnAccueil {
-  border: 1px solid black;
-}
-</style>

src/components/Supp/TypeFile.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-card flat :loading="isLoading">
+    <v-card-title style="background-color: #295494; color: white" class="d-flex justify-space-between">
+      <span>Choix du type de fichier</span>
+      <v-btn depressed variant="text" @click="deleted()" prepend-icon="mdi-delete">Supprimer</v-btn>
+    </v-card-title>
+    <v-card-text class="pa-0 ma-0">
+      <v-hover v-slot="{ isHovering, props }" v-for="type in types" :key="type">
+        <div v-bind="props" :class="`btn-perso elevation-${isHovering ? 6 : 2} pa-5 ma-1 d-flex justify-space-between`" @click="onClick(type)">
+          <v-row class="align-center">
+            <v-col cols="12" sm="3" class="d-flex justify-center">
+              <v-icon size="x-large" dark color="primary"> mdi-file-document-outline  </v-icon>
+            </v-col>
+            <v-col cols="12" sm="9" class="d-flex justify-start"><span class="group">Fichier {{ type }}</span></v-col>
+          </v-row>
+        </div>
+      </v-hover>
+    </v-card-text>
+  </v-card>
+</template>
+<script setup>
+
+const props = defineProps({
+  isLoading: {
+    type: Boolean,
+    default: false
+  }
+})
+const typeFile = defineModel();
+const types = ['PPN','EPN']
+
+function onClick(type) {
+  typeFile.value = type;
+}
+
+</script>

src/router/index.js

@@ -4,12 +4,14 @@ import ExempTable from '@/views/Exemplarisation/ExempTable.vue'
 import ModifTable from '@/views/Modification/ModifTable.vue'
 import RecouvTable from '@/views/Recouvrement/RecouvTable.vue'
 import ModifSteps from '@/views/Modification/ModifSteps.vue';
+import RecouvSteps from '@/views/Recouvrement/RecouvSteps.vue';
+import ExempSteps from '@/views/Exemplarisation/ExempSteps.vue';
+import SuppSteps from '@/views/Suppression/SuppSteps.vue'
 import Accueil from '@/views/Accueil.vue';
 import ModificationEmail from '@/views/Utilisateur/ModificationEmail.vue';
 import demandesService from '@/service/DemandesService'
-import RecouvSteps from '@/views/Recouvrement/RecouvSteps.vue';
-import ExempSteps from '@/views/Exemplarisation/ExempSteps.vue';
 import {useAuthStore} from '@/store/authStore'
+import SuppTable from "@/views/Suppression/SuppTable.vue";
 
 const routes = [
   {
@@ -65,6 +67,12 @@ const routes = [
     component: RecouvTable,
     meta: {requiresAuth: true}
   },
+  {
+    path: '/suppression-tableau',
+    name: 'suppression-tableau',
+    component: SuppTable,
+    meta: {requiresAuth: true}
+  },
   {
     path: '/modification',
     name: 'modification',
@@ -105,40 +113,23 @@ const routes = [
     meta: {requiresAuth: true}
   },
   {
-    path: '/donnees-personnelles',
-    name: 'donnees-personnelles',
-    component: Accueil,
-    meta: {requiresAuth: false}
-  },
-  {
-    path: '/sortie-application-vers-assistance',
-    name: 'sortie-application-vers-assistance',
-    component: Accueil,
-    meta: {requiresAuth: false}
-  },
-  {
-    path: '/sortie-application-vers-documentation',
-    name: 'sortie-application-vers-documentation',
-    component: Accueil,
-    meta: {requiresAuth: false}
-  },
-  {
-    path: '/sortie-application-vers-accessibilite',
-    name: 'sortie-application-vers-accessibilite',
-    component: Accueil,
-    meta: {requiresAuth: false}
+    path: '/suppression',
+    name: 'suppression',
+    component: SuppSteps,
+    meta: {requiresAuth: true}
   },
   {
-    path: '/sortie-application-vers-mentions-legales',
-    name: 'sortie-application-vers-mentions-legales',
-    component: Accueil,
-    meta: {requiresAuth: false}
+    path: '/suppression/:id',
+    name: 'suppressionWithId',
+    component: SuppSteps,
+    props: true,
+    meta: {requiresAuth: true}
   },
+
+  // Gestion de la 404, redirection vers la page d'accueil
   {
-    path: '/sortie-application-vers-cgu',
-    name: 'sortie-application-vers-cgu',
-    component: Accueil,
-    meta: {requiresAuth: false}
+    path: '/:pathMatch(.*)*',
+    redirect: "/accueil",
   }
 ]
 

src/store/authStore.js

@@ -6,6 +6,7 @@ export const useAuthStore = defineStore('auth', {
     token: sessionStorage.getItem('token'),
     authenticated: !!sessionStorage.getItem('token'),
   }),
+
   getters: {
     getUser: (state) => state.user,
     isAuthenticated: (state) => state.authenticated,

src/views/Accueil.vue

@@ -1,37 +1,46 @@
 <template>
   <v-container class="fill-height">
-    <v-responsive class="align-centerfill-height mx-auto">
-      <div class="py-5"/>
-      <v-row>
-        <v-col class="text-center" cols="12" md="6">
-          <BtnAccueil id="btn-recouvrement" icon="mdi-percent" route="recouvrement">
+    <v-responsive class="align-centerfill-height">
+      <v-row class="pa-5">
+        <v-col class="text-center" cols="12" xl="6" lg="6" md="12" sm="12" xs="12">
+          <btn-accueil id="btn-recouvrement" icon="mdi-percent" route="recouvrement">
             Calculer mon taux de recouvrement
-          </BtnAccueil>
+          </btn-accueil>
         </v-col>
-        <v-col class="text-center" cols="12" md="6">
-          <BtnAccueil id="btn-recouvrement-tableau" icon="mdi-chart-bar" route="recouvrement-tableau">
+        <v-col class="text-center" cols="12" xl="6" lg="6" md="12" sm="12" xs="12">
+          <btn-accueil id="btn-recouvrement-tableau" icon="mdi-chart-bar" route="recouvrement-tableau">
             Gérer mes taux de recouvrement
-          </BtnAccueil>
+          </btn-accueil>
         </v-col>
-        <v-col class="text-center" cols="12" md="6">
-          <BtnAccueil id="btn-exemplarisation" icon="mdi-plus" route="exemplarisation">
+        <v-col class="text-center" cols="12" xl="6" lg="6" md="12" sm="12" xs="12">
+          <btn-accueil id="btn-exemplarisation" icon="mdi-plus-circle-outline" route="exemplarisation">
             Créer des exemplaires
-          </BtnAccueil>
+          </btn-accueil>
         </v-col>
-        <v-col class="text-center" cols="12" md="6">
-          <BtnAccueil id="btn-exemplarisation-tableau" icon="mdi-chart-bar" route="exemplarisation-tableau">
+        <v-col class="text-center" cols="12" xl="6" lg="6" md="12" sm="12" xs="12">
+          <btn-accueil id="btn-exemplarisation-tableau" icon="mdi-chart-bar" route="exemplarisation-tableau">
             Gérer mes créations
-          </BtnAccueil>
+          </btn-accueil>
         </v-col>
-        <v-col class="text-center" cols="12" md="6">
-          <BtnAccueil id="btn-modification" icon="mdi-pencil" route="modification">
+        <v-col class="text-center" cols="12" xl="6" lg="6" md="12" sm="12" xs="12">
+          <btn-accueil id="btn-modification" icon="mdi-pencil" route="modification">
             Modifier des exemplaires
-          </BtnAccueil>
+          </btn-accueil>
         </v-col>
-        <v-col class="text-center" cols="12" md="6">
-          <BtnAccueil id="btn-modification-tableau" icon="mdi-chart-bar" route="modification-tableau">
+        <v-col class="text-center" cols="12" xl="6" lg="6" md="12" sm="12" xs="12">
+          <btn-accueil id="btn-modification-tableau" icon="mdi-chart-bar" route="modification-tableau">
             Gérer mes modifications
-          </BtnAccueil>
+          </btn-accueil>
+        </v-col>
+        <v-col class="text-center" cols="12" xl="6" lg="6" md="12" sm="12" xs="12">
+          <btn-accueil id="btn-suppression" icon="mdi-close-circle-outline" route="suppression">
+            Supprimer des exemplaires
+          </btn-accueil>
+        </v-col>
+        <v-col class="text-center" cols="12" xl="6" lg="6" md="12" sm="12" xs="12">
+          <btn-accueil id="btn-suppression-tableau" icon="mdi-chart-bar" route="suppression-tableau">
+            Gérer mes suppressions
+          </btn-accueil>
         </v-col>
       </v-row>
     </v-responsive>

src/views/Modification/ModifSteps.vue

@@ -87,7 +87,7 @@
                   @click="uploadFileInit()"
                   v-if="!isLoaded"
                 >
-                  Envoyé
+                  Envoyer
                 </v-btn>
                 <v-btn
                   v-else