Item 91 migrer le stepper modification

src/App.vue

@@ -19,9 +19,9 @@
 
 <script setup>
 import {onMounted, ref} from 'vue'
-import Header from '@/components/Header.vue'
-import Navbar from '@/components/Navbar.vue'
-import Footer from '@/components/Footer.vue'
+import Header from '@/components/Structure/Header.vue'
+import Navbar from '@/components/Structure/Navbar.vue'
+import Footer from '@/components/Structure/Footer.vue'
 import router from '@/router/index'
 import { HttpStatusCode } from 'axios';
 import DemandesService from '@/service/DemandesService'

src/components/DialogLancerTraitement.vue

@@ -16,7 +16,7 @@
           <v-btn v-if="!isFinished" color="primary" @click="dialog = false" aria-label="Annuler">Annuler</v-btn>
           <v-spacer v-else></v-spacer>
           <v-btn v-if="!isFinished" color="primary" @click="confirm()" aria-label="Valider">Valider</v-btn>
-          <v-btn v-else color="primary" @click="router.push('exemplarisation-tableau')" aria-label="OK">OK</v-btn>
+          <v-btn v-else color="primary" @click="router.push(route)" aria-label="OK">OK</v-btn>
         </v-card-actions>
       </v-card>
     </v-skeleton-loader>
@@ -36,6 +36,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  route: {
+    required: true,
+    type: String,
+  }
 })
 const title = ref('Lancement du traitement en production');
 const body = ref('Êtes-vous sûr de vouloir lancer le traitement en production ?<br/> Aucune annulation n\'est possible.');

src/components/DialogSuppression.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-dialog v-model="dialog" width="500">
+    <v-skeleton-loader
+      :loading="isLoading"
+      class="mx-auto"
+      elevation="12"
+      width="500"
+      type="table-heading, list-item-two-line, table-tfoot"
+    >
+      <v-card>
+        <v-card-title>Suppression</v-card-title>
+        <v-divider></v-divider>
+        <v-card-text>Êtes-vous certain de vouloir supprimer définitivement cette demande ?</v-card-text>
+        <v-card-actions>
+
+          <v-container class="d-flex justify-space-between">
+            <v-btn @click="cancel()">Annuler</v-btn>
+            <v-btn @click="confirm()">Confirmer</v-btn>
+          </v-container>
+        </v-card-actions>
+      </v-card>
+    </v-skeleton-loader>
+  </v-dialog>
+</template>
+<script setup>
+import demandesService from '@/service/DemandesService';
+import router from '@/router';
+import { ref } from 'vue';
+
+const dialog = defineModel();
+const emits = defineEmits(['supp'])
+const props = defineProps({
+  returnToAccueil: {
+    required: false,
+    type: Boolean,
+  },
+  demande: {
+    required: true,
+    type: Object
+  }
+})
+const isLoading = ref(false);
+
+function confirm() {
+  isLoading.value = true;
+  demandesService.deleteDemande(props.demande.id, props.demande.type)
+    .then(()=>{
+      if(props.returnToAccueil){
+        router.push('/accueil');
+      }
+      emits('supp');
+    }).finally(() => {
+    isLoading.value = false;
+    dialog.value = false;
+  })
+}
+
+function cancel() {
+  dialog.value = false;
+}
+
+</script>
+

src/components/TypeExemp.vue → src/components/Exemp/TypeExemp.vue

@@ -1,19 +1,20 @@
 <template>
-  <v-card elevation="1" :loading="isLoading">
+  <v-card flat :loading="isLoading">
     <v-card-title style="background-color: #295494; color: white" class="d-flex justify-space-between">
       <span>Choix du type d'exemplarisation</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">
-      <div class="btn-perso elevation-1 pa-8 d-flex justify-space-between" @click="onClick(exemp)"
-           v-for="exemp in listExemp" :key="exemp.numTypeExemp">
-        <v-row class="align-center">
-          <v-col cols="12" sm="3" class="d-flex justify-center">
-            <v-icon size="x-large" dark color="primary">{{ getIcon(exemp) }}</v-icon>
-          </v-col>
-          <v-col cols="12" sm="9" class="d-flex justify-start"><span class="group">{{ exemp.libelle }}</span></v-col>
-        </v-row>
-      </div>
+      <v-hover v-slot="{ isHovering, props }" v-for="exemp in listExemp" :key="exemp.numTypeExemp">
+        <div v-bind="props" :class="`btn-perso elevation-${isHovering ? 6 : 2} pa-5 ma-1 d-flex justify-space-between`" @click="onClick(exemp)">
+          <v-row class="align-center">
+            <v-col cols="12" sm="3" class="d-flex justify-center">
+              <v-icon size="x-large" dark color="primary">{{ getIcon(exemp) }}</v-icon>
+            </v-col>
+            <v-col cols="12" sm="9" class="d-flex justify-start"><span class="group">{{ exemp.libelle }}</span></v-col>
+          </v-row>
+        </div>
+      </v-hover>
     </v-card-text>
   </v-card>
 </template>
@@ -53,8 +54,6 @@ function deleted() {
 
 <style scoped>
 .btn-perso:hover {
-  background-color: lightgrey;
-  transition-duration: 0.3s;
   cursor: pointer;
 }
 

src/components/Modif/DownloadFile.vue

@@ -0,0 +1,56 @@
+<template>
+  <v-card elevation="0">
+    <v-card-title style="background-color: #295494; color: white" class="d-flex justify-space-between">
+      <span><slot></slot></span>
+      <v-btn depressed variant="text" @click="deleted()" prepend-icon="mdi-delete">Supprimer</v-btn>
+    </v-card-title>
+    <v-card-actions class="py-6">
+      <v-spacer></v-spacer>
+      <v-btn
+        rounded
+        x-large
+        variant="flat"
+        color="#295494"
+        ref="fileLinkBtn"
+        :href="fileLink"
+        :disabled="isDisabled"
+        @click="clicked()"
+        append-icon="mdi-cloud-download"
+        :download="fileName">Télécharger le fichier de correspondances PPN/EPN
+      </v-btn>
+      <v-spacer></v-spacer>
+    </v-card-actions>
+  </v-card>
+</template>
+<script setup>
+
+const emits = defineEmits(['deleted','clicked']);
+const props = defineProps({
+  fileName: {
+    required: true,
+    type: String
+  },
+  fileLink: {
+    required: true,
+    type: String
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+function clicked(){
+  emits('clicked');
+}
+
+function deleted() {
+  emits('deleted');
+}
+</script>
+<style scoped>
+v-btn{
+  color: red !important;
+}
+
+</style>

src/components/Modif/TypeTraitement.vue

@@ -0,0 +1,67 @@
+<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 traitement</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="traitement in listTraitement" :key="traitement.id">
+        <div v-bind="props" :class="`btn-perso elevation-${isHovering ? 6 : 2} pa-5 ma-1 d-flex justify-space-between`" @click="onClick(traitement)">
+          <v-row class="align-center">
+            <v-col cols="12" sm="3" class="d-flex justify-center">
+              <v-icon size="xx-large" dark color="primary">{{ getIcon(traitement) }}</v-icon>
+            </v-col>
+            <v-col cols="12" sm="9" class="d-flex justify-start"><p class="group" >{{ traitement.libelle }}</p></v-col>
+          </v-row>
+        </div>
+      </v-hover>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import DemandesService from '@/service/DemandesService';
+
+const typeTraitement = defineModel();
+const emits = defineEmits(['clicked', 'deleted']);
+const props = defineProps({ isLoading: { type: Boolean } });
+const listTraitement = ref([]);
+
+onMounted(() => {
+  DemandesService.getTypeTraitement()
+    .then(response => {
+      listTraitement.value = response.data;
+    });
+});
+
+function getIcon(traitement) {
+  if (traitement.id === 1) return 'mdi-plus';
+  if (traitement.id === 2) return 'mdi-pencil';
+  if (traitement.id === 3) return 'mdi-redo';
+  if (traitement.id === 4) return 'mdi-close';
+  if (traitement.id === 5) return 'mdi-delete';
+  return 'mdi-nuke';
+}
+
+function onClick(traitement) {
+  typeTraitement.value = traitement;
+  emits('clicked');
+}
+
+function deleted() {
+  emits('deleted');
+}
+
+</script>
+
+<style scoped>
+.btn-perso:hover {
+  cursor: pointer;
+}
+
+.group {
+  font-size: x-large;
+}
+</style>

src/components/RecapDemande.vue

@@ -16,16 +16,21 @@
           <v-row class="d-flex justify-center pa-1">RCR</v-row>
           <v-row class="d-flex justify-center pa-1">{{ demande.rcr }} - {{ demande.shortname }}</v-row>
         </v-col>
-        <v-col>
-          <v-row class="d-flex justify-center pa-1">Type d'exemplarisation</v-row>
+        <v-col v-if="demande.typeExemp">
+          <v-row class="d-flex justify-center pa-1">Type de document</v-row>
           <v-row class="d-flex justify-center pa-1">{{ demande.typeExemp }}</v-row>
         </v-col>
+        <v-col v-if="demande.traitement">
+          <v-row class="d-flex justify-center pa-1">Type de traitement</v-row>
+          <v-row class="d-flex justify-center pa-1">{{ demande.traitement }}</v-row>
+        </v-col>
       </v-row>
     </v-container>
   </div>
 </template>
 
 <script setup>
+
 const props = defineProps({
   demande: {type: Object, required: true}
 });

src/components/Simulation.vue

@@ -10,7 +10,7 @@
     ></v-progress-circular>
   </v-overlay>
   <!-- CONTENU SIMULATION -->
-  <v-card>
+  <v-card flat class="pb-2">
     <v-card-title style="background-color: #295494; color: white" class="d-flex justify-space-between">
       <span>Ecran de simulation</span>
       <v-btn depressed variant="text" @click="deleted()" prepend-icon="mdi-delete">Supprimer</v-btn>
@@ -28,13 +28,9 @@
       <v-col cols="12" sm="12" md="5"> <!--Exemplaires existants-->
         <!--Carte activée si présence exemplaires pour cette notice-->
         <v-card class="pa-1" outlined tile>
-          <span>Exemplaire(s) existant(s)</span>
-          <v-container id="scroll-target" style="max-height: 400px" class="overflow-y-auto">
-            <pre style="text-align: left; padding-top: 1em">
-              <span class="inner-pre" style="text-align: left; padding-top: 1em; overflow-x:scroll;">
-                {{ noticeAvant }}
-              </span>
-            </pre>
+          <h5 class="d-flex justify-center">{{ labelBefore }}</h5>
+          <v-container id="scroll-target" style="max-height: 400px" class="overflow-auto">
+            <pre style="text-align: left" class="py-4">{{ noticeAvant }}</pre>
           </v-container>
         </v-card>
       </v-col>
@@ -43,10 +39,8 @@
       </v-col>
       <v-col cols="12" sm="12" md="5"> <!--Exemplaire à créer-->
         <v-card class="pa-1" outlined tile>
-          <span>Exemplaire à créer</span>
-          <pre style="text-align: left; padding-top: 1em; overflow-x:scroll;">
-            {{ noticeApres }}
-          </pre>
+          <h5 class="d-flex justify-center">{{ labelAfter }}</h5>
+          <pre style="text-align: left" class="py-4 overflow-auto">{{ noticeApres }}</pre>
         </v-card>
       </v-col>
     </v-row>
@@ -64,6 +58,14 @@ const props = defineProps({
   demande: {
     type: Object,
     required: true
+  },
+  labelBefore: {
+    type: String,
+    default: 'Avant'
+  },
+  labelAfter: {
+    type: String,
+    default: 'Après'
   }
 });
 const emits = defineEmits(['deleted'])
@@ -73,17 +75,17 @@ const nbNotice = ref({
   nbTotalNotice: 0
 });
 const numeroPPNNotice = ref();
-const noticeAvant = ref();
-const noticeApres = ref();
+const noticeAvant = ref("");
+const noticeApres = ref("");
 const isLoading = ref(true);
 
 onMounted(() => {
-  demandesService.getNbLigneFichier(props.demande.id, 'EXEMP')
+  demandesService.getNbLigneFichier(props.demande.id, props.demande.type)
     .then(response => {
       console.log(response.data);
       nbNotice.value.nbTotalNotice = response.data;
     });
-  demandesService.simulerLigne(props.demande.id, 0, 'EXEMP')
+  demandesService.simulerLigne(props.demande.id, 0, props.demande.type)
     .then(response => {
       numeroPPNNotice.value = response.data[0];
       noticeAvant.value = response.data[1];
@@ -96,7 +98,7 @@ onMounted(() => {
 
 function refresh() {
   isLoading.value = true;
-  demandesService.simulerLigne(props.demande.id, nbNotice.value.nbNoticeEnCours, 'EXEMP')
+  demandesService.simulerLigne(props.demande.id, nbNotice.value.nbNoticeEnCours, props.demande.type)
     .then(response => {
       numeroPPNNotice.value = response.data[0];
       noticeAvant.value = response.data[1];
@@ -119,7 +121,11 @@ h3 {
 }
 
 h4 {
-  font-size: large;
+  font-size: x-large;
+  font-weight: normal;
+}
+h5 {
+  font-size: x-large;
   font-weight: normal;
 }
 </style>