Item 50 ecran 3 selection rcr

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,11 +4,12 @@ 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'
 
 const routes = [
@@ -104,6 +105,19 @@ const routes = [
     props: true,
     meta: {requiresAuth: true}
   },
+  {
+    path: '/suppression',
+    name: 'suppression',
+    component: SuppSteps,
+    meta: {requiresAuth: true}
+  },
+  {
+    path: '/suppression/:id',
+    name: 'suppressionWithId',
+    component: SuppSteps,
+    props: true,
+    meta: {requiresAuth: true}
+  },
 
   // Gestion de la 404, redirection vers la page d'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/Modification/ModifSteps.vue

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

src/views/Suppression/SuppSteps.vue

@@ -0,0 +1,181 @@
+<template>
+  <v-container :class="(currentStep === 4) ? '' : 'fill-height'" fluid>
+    <v-row align="center" justify="center">
+      <v-col :md="(currentStep === 4) ? '' : '7'">
+        <v-stepper v-model="currentStep" @update:model-value="changeEtape()" alt-labels>
+          <v-stepper-header>
+            <v-stepper-item
+              :color="currentStep >= 0 ? '#295494' : ''"
+              :complete="currentStep > 0"
+              editable
+              icon="mdi-numeric-1"
+              title="Séléction du RCR"
+              :subtitle="demande ? 'Demande n°'+demande.id : 'Demande'"
+            >
+            </v-stepper-item>
+            <v-divider></v-divider>
+            <v-stepper-item
+              :color="currentStep >= 1 ? '#295494' : ''"
+              :complete="currentStep > 1"
+              editable
+              icon="mdi-numeric-2"
+              title="PPN/RCR/EPN"
+              :subtitle="typeFileSelected ? 'Fichier '+ typeFileSelected : 'fichier envoyé'"
+            >
+            </v-stepper-item>
+            <v-divider></v-divider>
+            <v-stepper-item
+              :color="currentStep >= 3 ? '#295494' : ''"
+              :complete="currentStep > 3"
+              editable
+              icon="mdi-numeric-4"
+              title="Envoi"
+              subtitle="du fichier"
+            >
+            </v-stepper-item>
+            <v-divider></v-divider>
+            <v-stepper-item
+              :color="currentStep >= 4 ? '#295494' : ''"
+              icon="mdi-numeric-5"
+              title="Simulation"
+            >
+            </v-stepper-item>
+          </v-stepper-header>
+
+          <v-stepper-window>
+            <v-stepper-window-item>
+              <rcr v-model="rcrSelected" :is-loading="isLoading"></rcr>
+              <v-container class="d-flex justify-space-between">
+                <v-spacer></v-spacer>
+                <v-btn
+                  :disabled="!rcrSelected"
+                  @click="createDemande"
+                >
+                  Valider
+                </v-btn>
+              </v-container>
+            </v-stepper-window-item>
+            <v-stepper-window-item>
+              <type-file v-if="!typeFileSelected" v-model="typeFileSelected"></type-file>
+              <select-file v-else v-model="fileSelected">Selection du fichier {{typeFileSelected}}</select-file>
+              <v-alert
+                v-if="alertMessage"
+                :type="alertType"
+              >
+                <span v-html="alertMessage"></span>
+              </v-alert>
+              <v-container class="d-flex justify-space-between">
+                <v-btn v-if="typeFileSelected" @click="prevSelectTypeFile">
+                  précédent
+                </v-btn>
+                <v-btn v-else @click="prev">
+                  précédent
+                </v-btn>
+                <v-btn
+                  v-if="typeFileSelected"
+                  :disabled="!fileSelected"
+                  @click="uploadFile()"
+                >
+                  Envoyer
+                </v-btn>
+              </v-container>
+            </v-stepper-window-item>
+            <v-stepper-window-item>
+            </v-stepper-window-item>
+            <v-stepper-window-item>
+
+            </v-stepper-window-item>
+          </v-stepper-window>
+        </v-stepper>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import TypeFile from '@/components/Supp/TypeFile.vue';
+import SelectFile from '@/components/SelectFile.vue';
+import demandesService from '@/service/DemandesService';
+
+
+
+
+const currentStep = ref(0);
+const demande = ref();
+
+const emits = defineEmits(['backendError']);
+const props = defineProps({id: {type: String}});
+
+const rcrSelected = ref();
+const typeFileSelected = ref();
+const fileSelected = ref();
+const isLoading = ref(false);
+const alertMessage = ref('');
+const alertType = ref('success');
+
+
+function createDemande() {
+  if (demande.value && (rcrSelected.value === demande.value.rcr)) {
+    next();
+  } else if (demande.value) {
+    isLoading.value = true;
+    demandesService.modifierRcrDemande(demande.value.id, rcrSelected.value, 'SUPP')
+      .then(response => {
+        demande.value = response.data;
+        next();
+      }).catch(err => {
+      emits('backendError', err);
+    }).finally(() => {
+      isLoading.value = false;
+    });
+  } else {
+    isLoading.value = true;
+    demandesService.creerDemande(rcrSelected.value, 'SUPP')
+      .then(response => {
+        demande.value = response.data;
+        next();
+      }).catch(err => {
+      emits('backendError', err);
+    }).finally(() => {
+      isLoading.value = false;
+    });
+  }
+}
+
+function uploadFile() {
+  alertMessage.value = '';
+  alertType.value = 'success';
+  isLoading.value = true;
+  demandesService.uploadDemande(1, fileSelected.value, 'SUPP')
+    .then(() => {
+      alertMessage.value = "Fichier envoyé";
+    })
+    .catch(err => {
+      alertMessage.value = err.response.data.message;
+      alertType.value = 'error';
+    })
+    .finally(() => {
+      isLoading.value = false;
+    });
+}
+function prevSelectTypeFile(){
+  typeFileSelected.value = null;
+  raz();
+}
+function next() {
+  currentStep.value++;
+  raz();
+}
+
+function prev() {
+  currentStep.value--;
+  raz();
+}
+
+function raz(){
+  isLoading.value = false;
+  alertMessage.value = '';
+  alertType.value = 'success';
+}
+</script>

src/views/Suppression/SuppTable.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>

src/views/Utilisateur/ModificationEmail.vue

@@ -20,6 +20,6 @@ const user = authStore.getUser
 function setEmailUser(email){
   user.email = email;
   authStore.setUser(user);
-  router.push('Accueil');
+  router.push('accueil');
 }
 </script>