Item 86 migrer stepper exemplarisation

src/components/DialogLancerTraitement.vue

@@ -0,0 +1,49 @@
+<template>
+  <!-- POPUP DE LANCEMENT DU TRAITEMENT-->
+  <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 primary-title>{{title}}</v-card-title>
+        <v-card-text><span style="font-size: small" v-html="body"></span></v-card-text>
+        <v-divider></v-divider>
+        <v-card-actions class="justify-space-between">
+          <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-card-actions>
+      </v-card>
+    </v-skeleton-loader>
+  </v-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import router from '@/router';
+
+
+const dialog = defineModel();
+const emits = defineEmits(['launch'])
+const props = defineProps({
+  isLoading: {
+    required: false,
+    type: Boolean,
+    default: false
+  },
+})
+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.');
+const isFinished = ref(false);
+function confirm() {
+  emits('launch');
+  title.value = "Traitement validé";
+  body.value = "Votre demande est en cours de traitement.<br/>Un mail vous sera envoyé quand celui-ci sera terminé.<br/>Vous pouvez retrouver l'ensemble de vos demandes sur votre tableau de bord ITEM. Rubrique \"Gérer mes créations\".";
+  isFinished.value = true;
+}
+</script>

src/components/NavigateNotice.vue

@@ -0,0 +1,79 @@
+<template>
+  <!--Boutons de navigation-->
+  <!--Conteneur bouton 1-->
+  <v-row class="d-flex justify-center">
+    <v-btn
+      :disabled="nbNotice.nbNoticeEnCours === 0"
+      large
+      dark
+      @click="first"
+      aria-label="Première notice">
+      <v-icon>mdi-page-first</v-icon>
+    </v-btn>
+  </v-row>
+  <v-row class="d-flex justify-center">
+    <div style="width: 4em; text-align: center;">Première notice</div>
+  </v-row>
+  <!--Conteneur bouton 2-->
+  <v-row class="d-flex justify-center">
+    <v-btn
+      :disabled="nbNotice.nbNoticeEnCours === 0"
+      large
+      dark
+      @click="prev"
+      aria-label="Notice précédente">
+      <v-icon>mdi-chevron-left</v-icon>
+    </v-btn>
+  </v-row>
+  <v-row class="d-flex justify-center">
+    <div style="width: 5em; text-align: center;">Notice précédente</div>
+  </v-row>
+  <!--Conteneur bouton 3-->
+  <v-row class="d-flex justify-center">
+    <v-btn
+      :disabled="nbNotice.nbNoticeEnCours === nbNotice.nbTotalNotice - 1"
+      large
+      dark
+      @click="next"
+      aria-label="Notice suivante">
+      <v-icon>mdi-chevron-right</v-icon>
+    </v-btn>
+  </v-row>
+  <v-row class="d-flex justify-center">
+    <div style="width: 4em; text-align: center;">Notice suivante</div>
+  </v-row>
+  <!--Conteneur bouton 4-->
+  <v-row class="d-flex justify-center">
+    <v-btn
+      :disabled="nbNotice.nbNoticeEnCours === nbNotice.nbTotalNotice - 1"
+      large
+      dark
+      @click="last"
+      aria-label="Dernière notice">
+      <v-icon>mdi-page-last</v-icon>
+    </v-btn>
+  </v-row>
+  <v-row class="d-flex justify-center">
+    <div style="width: 4em; text-align: center;">Dernière notice</div>
+  </v-row>
+</template>
+<script setup>
+const nbNotice = defineModel();
+const emits = defineEmits(['clicked']);
+function first(){
+  nbNotice.value.nbNoticeEnCours = 0;
+  emits('clicked');
+}
+function last(){
+  nbNotice.value.nbNoticeEnCours = nbNotice.value.nbTotalNotice - 1;
+  emits('clicked');
+}
+function next(){
+  nbNotice.value.nbNoticeEnCours++;
+  emits('clicked');
+}
+function prev(){
+  nbNotice.value.nbNoticeEnCours--;
+  emits('clicked');
+}
+</script>

src/components/Rcr.vue

@@ -1,10 +1,11 @@
 A<template>
-  <v-card>
+  <v-card elevation="0">
     <v-card-title style="background-color: #295494; color: white">
       <span>Sélection du RCR</span>
     </v-card-title>
     <v-card-text class="pt-5">
       <v-autocomplete
+        :loading="isLoading"
         color="info"
         hide-selected
         v-model="rcr"
@@ -25,6 +26,7 @@ import { onMounted, ref } from 'vue';
 const listRcr = ref([]);
 const rcr = defineModel()
 const user = JSON.parse(sessionStorage.getItem('user'));
+const props = defineProps(  {isLoading: { type: Boolean}})
 
 onMounted(() => {
   idrefService.getRcrByIln(user.iln)

src/components/RecapDemande.vue

@@ -0,0 +1,33 @@
+<template>
+  <!-- INFOS GENERALES DE LA DEMANDE -->
+  <div id="demInfos" class="elevation-2 mb-4 mt-2">
+    <h3 class="d-flex justify-center">Ma demande</h3>
+    <v-container fluid>
+      <v-row>
+        <v-col>
+          <v-row class="d-flex justify-center pa-1">Numéro de Demande</v-row>
+          <v-row class="d-flex justify-center pa-1">{{ demande.id }}</v-row>
+        </v-col>
+        <v-col>
+          <v-row class="d-flex justify-center pa-1">Date de modification</v-row>
+          <v-row class="d-flex justify-center pa-1">{{ demande.dateModification }}</v-row>
+        </v-col>
+        <v-col>
+          <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-row class="d-flex justify-center pa-1">{{ demande.typeExemp }}</v-row>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  demande: {type: Object, required: true}
+});
+
+</script>

src/components/Simulation.vue

@@ -0,0 +1,125 @@
+<template>
+  <recap-demande :demande="demande"></recap-demande>
+
+  <v-overlay v-model="isLoading" class="justify-center align-center">
+    <v-progress-circular
+      color="blue-lighten-3"
+      indeterminate
+      :size="128"
+      :width="12"
+    ></v-progress-circular>
+  </v-overlay>
+  <!-- CONTENU SIMULATION -->
+  <v-card>
+    <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>
+    </v-card-title>
+    <!--TEMPLATE DE SIMULATION-->
+    <v-alert type="warning" align="center" class="my-3 pa-2" dense prominent border="left">
+      Cet écran est une <strong>prévisualisation</strong> du traitement.<br>
+      Il s'agit de la <strong>dernière étape</strong> avant de lancer le traitement en <strong>base de
+      production</strong>. Merci de <strong>vérifier vos données</strong>.
+    </v-alert>
+    <h3 class="d-flex justify-center" style="border: 1px solid lightgrey">Ligne de votre fichier :
+      {{ nbNotice.nbNoticeEnCours + 1 }} sur {{ nbNotice.nbTotalNotice }}</h3>
+    <h4 class="d-flex justify-center py-4" v-if="numeroPPNNotice">PPN n° {{ numeroPPNNotice }}</h4>
+    <v-row class="pt-5">
+      <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>
+          </v-container>
+        </v-card>
+      </v-col>
+      <v-col cols="12" sm="12" md="2" class="pb-10">
+        <navigate-notice v-model="nbNotice" @clicked="refresh()"></navigate-notice>
+      </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>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script setup>
+
+import RecapDemande from '@/components/RecapDemande.vue';
+import NavigateNotice from '@/components/NavigateNotice.vue';
+import { onMounted, ref } from 'vue';
+import demandesService from '@/service/DemandesService';
+
+const props = defineProps({
+  demande: {
+    type: Object,
+    required: true
+  }
+});
+const emits = defineEmits(['deleted'])
+
+const nbNotice = ref({
+  nbNoticeEnCours: 0,
+  nbTotalNotice: 0
+});
+const numeroPPNNotice = ref();
+const noticeAvant = ref();
+const noticeApres = ref();
+const isLoading = ref(true);
+
+onMounted(() => {
+  demandesService.getNbLigneFichier(props.demande.id, 'EXEMP')
+    .then(response => {
+      console.log(response.data);
+      nbNotice.value.nbTotalNotice = response.data;
+    });
+  demandesService.simulerLigne(props.demande.id, 0, 'EXEMP')
+    .then(response => {
+      numeroPPNNotice.value = response.data[0];
+      noticeAvant.value = response.data[1];
+      noticeApres.value = response.data[2];
+    })
+    .finally(() => {
+      isLoading.value = false;
+    });
+});
+
+function refresh() {
+  isLoading.value = true;
+  demandesService.simulerLigne(props.demande.id, nbNotice.value.nbNoticeEnCours, 'EXEMP')
+    .then(response => {
+      numeroPPNNotice.value = response.data[0];
+      noticeAvant.value = response.data[1];
+      noticeApres.value = response.data[2];
+    })
+    .finally(() => {
+      isLoading.value = false;
+    });
+}
+
+function deleted() {
+  emits('deleted');
+}
+</script>
+
+<style>
+h3 {
+  font-size: x-large;
+  font-weight: normal;
+}
+
+h4 {
+  font-size: large;
+  font-weight: normal;
+}
+</style>

src/components/TypeExemp.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-card elevation="1" :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-card-text>
+  </v-card>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import DemandesService from '@/service/DemandesService';
+
+const typeExemp = defineModel();
+const emits = defineEmits(['click', 'deleted']);
+const props = defineProps({ isLoading: { type: Boolean } });
+const listExemp = ref([]);
+
+onMounted(() => {
+  DemandesService.getTypeExemp()
+    .then(response => {
+      listExemp.value = response.data;
+    });
+});
+
+function getIcon(exemp) {
+  if (exemp.numTypeExemp === 1) return 'mdi-book-open';
+  if (exemp.numTypeExemp === 2) return 'mdi-text-box-multiple';
+  return 'mdi-book-open-blank-variant';
+}
+
+function onClick(exemp) {
+  typeExemp.value = exemp;
+  emits('click');
+}
+
+function deleted() {
+  emits('deleted');
+}
+
+</script>
+
+<style scoped>
+.btn-perso:hover {
+  background-color: lightgrey;
+  transition-duration: 0.3s;
+  cursor: pointer;
+}
+
+.group {
+  font-size: large;
+  font-weight: bold;
+  border-radius: 5%;
+}
+</style>