From e644f0d1669cdcb1f214d8100a7e20e91f7e54de Mon Sep 17 00:00:00 2001
From: Marc Rufener <marc.rufener@gmail.com>
Date: Thu, 9 Mar 2023 16:50:08 +0100
Subject: [PATCH] use newStepSetter in new step setter in affaire + clean

---
 .../ActivationAffaire/activationAffaire.html  |  2 +-
 front/src/components/Affaires/Etape/Etape.vue | 69 ++++++-------------
 front/src/components/Affaires/Etape/etape.css |  5 ++
 .../src/components/Affaires/Etape/etape.html  | 21 ++----
 .../Utils/NewStepSetter/NewStepSetter.vue     |  2 +-
 5 files changed, 33 insertions(+), 66 deletions(-)

diff --git a/front/src/components/Affaires/ActivationAffaire/activationAffaire.html b/front/src/components/Affaires/ActivationAffaire/activationAffaire.html
index 91e697bb..d9b6764c 100644
--- a/front/src/components/Affaires/ActivationAffaire/activationAffaire.html
+++ b/front/src/components/Affaires/ActivationAffaire/activationAffaire.html
@@ -3,6 +3,7 @@
     <md-dialog-title>Réactivation de l'affaire</md-dialog-title>
 
     <md-dialog-content>
+      <md-progress-bar md-mode="indeterminate" v-if="showProgressBar"></md-progress-bar>
       <p>
         En confirmant, les opérations suivantes seront réalisées:
         <ul>
@@ -18,7 +19,6 @@
     
 
     <md-dialog-actions>
-      <md-progress-bar md-mode="indeterminate" v-if="showProgressBar"></md-progress-bar>
       <md-button class="md-accent" @click="showActivationDialog=false">Annuler</md-button>
       <md-button class="md-primary" @click="activateAffaire" :disabled="disabledConfirmBtn">Confirmer</md-button>
     </md-dialog-actions>
diff --git a/front/src/components/Affaires/Etape/Etape.vue b/front/src/components/Affaires/Etape/Etape.vue
index 6bd6d506..0ca04683 100644
--- a/front/src/components/Affaires/Etape/Etape.vue
+++ b/front/src/components/Affaires/Etape/Etape.vue
@@ -1,4 +1,4 @@
-<style src="./etape.css" scoped></style>
+<style src="./etape.css" ></style>
 <style lang="css">.md-menu-content { z-index: 9000 !important; }</style>
 <template src="./etape.html"></template>
 
@@ -6,9 +6,10 @@
 <script>
 import ClotureAffaire from "@/components/Affaires/ClotureAffaire/ClotureAffaire.vue";
 import DateRangePicker from "@/components/Utils/DateRangePicker/DateRangePicker.vue";
+import NewStepSetter from "@/components/Utils/NewStepSetter/NewStepSetter.vue";
 
 import { handleException } from "@/services/exceptionsHandler";
-import { getTypesAffaires, stringifyAutocomplete2, logAffaireEtape, checkPermission } from '@/services/helper';
+import { logAffaireEtape, checkPermission } from '@/services/helper';
 
 
 const moment = require('moment');
@@ -17,7 +18,8 @@ export default {
   name: "Etape",
   components: {
     ClotureAffaire,
-    DateRangePicker
+    DateRangePicker,
+    NewStepSetter
   },
   props: {
     affaire: Object,
@@ -34,7 +36,7 @@ export default {
     dateperiod_start: null,
     etapeAffaire: {
       nb_jours_etape: 0,
-      prochaine: null,
+      prochaine_id: null,
       remarque: null,
       showDialog: false,
     },
@@ -42,7 +44,6 @@ export default {
     isAdmin: false,
     numerosReserves: [],
     periodClientStatus: false,
-    suiviAffaireTheorique: [],
     updateAffaireDate: {
       text: "",
       value: false,
@@ -58,39 +59,12 @@ export default {
   }),
 
   methods: {
-    /**
-     * Search affaire etapes
-     */
-    async searchAffaireEtapes() {
-      this.$http.get(
-        process.env.VUE_APP_API_URL + process.env.VUE_APP_ETAPES_INDEX_ENDPOINT,
-        {
-          withCredentials: true,
-          headers: { Accept: "application/json" }
-        }
-      ).then(response => {
-        this.affaireEtapes = stringifyAutocomplete2(response.data.filter(x => x.ordre !== null));
-        // get suivi d'affaire théorique
-        this.typesAffaires = getTypesAffaires().then(response => {
-          if (response && response.data) {
-            try {
-              this.suiviAffaireTheorique = response.data.filter(x => x.id === this.affaire.type_id)[0].logique_processus;
-            }
-            catch {
-              this.suiviAffaireTheorique = [];
-            }
-
-          }
-        })
-      }).catch(err => handleException(err, this));
-    },
-
     /**
      * open New state dialog
      */
     async openNewStateDialog(){
       // set next step prediction
-      this.etapeAffaire.prochaine = null;
+      this.etapeAffaire.prochaine_id = null;
       this.etapeAffaire.chef_equipe_id = this.affaire.technicien_id || null;
       this.etapeAffaire.remarque = null;
 
@@ -99,13 +73,10 @@ export default {
       
       this.etapeAffaire.nb_jours_etape = Math.floor((now_datetime - etape_datetime)/3600000/24) + 1;
       
-      if (this.suiviAffaireTheorique.includes(this.affaire.etape_id)) {
-        this.etapeAffaire.prochaine = this.affaireEtapes.filter(x => x.id === this.suiviAffaireTheorique[this.suiviAffaireTheorique.indexOf(this.affaire.etape_id)+1])[0];
-      }
 
       // if step "chez le client" next step is "operateur_travail"
       if (this.affaire.etape_id === this.etapes_affaire_conf.chez_client) {
-        this.etapeAffaire.prochaine = this.affaireEtapes.filter(x => x.id === this.etapes_affaire_conf.travaux_chef_equipe)[0];
+        this.etapeAffaire.prochaine_id = this.etapes_affaire_conf.travaux_chef_equipe;
       } 
       
       const etapes_jours_clients = [
@@ -161,7 +132,7 @@ export default {
         this.joursHorsSGRF.date_to = null;
       }
 
-      if (!this.etapeAffaire.prochaine || !this.etapeAffaire.prochaine.id) {
+      if (!this.etapeAffaire.prochaine_id) {
         alert("Il faut renseigner le champ 'prochaine étape'.")
         return
       }
@@ -185,9 +156,9 @@ export default {
       }
 
       // fix value of this.etapeAffaire.chef_equipe_id to null if another step is selected
-      this.etapeAffaire.chef_equipe_id = this.etapeAffaire.prochaine.id && this.etapeAffaire.prochaine.id === this.etapes_affaire_conf.travaux_chef_equipe? this.etapeAffaire.chef_equipe_id: null;
+      this.etapeAffaire.chef_equipe_id = this.etapeAffaire.prochaine_id === this.etapes_affaire_conf.travaux_chef_equipe? this.etapeAffaire.chef_equipe_id: null;
       
-      logAffaireEtape(this.affaire.id, this.etapeAffaire.prochaine.id, this.etapeAffaire.remarque, this.etapeAffaire.chef_equipe_id, this.joursHorsSGRF.date_from, this.joursHorsSGRF.date_to)
+      logAffaireEtape(this.affaire.id, this.etapeAffaire.prochaine_id, this.etapeAffaire.remarque, this.etapeAffaire.chef_equipe_id, this.joursHorsSGRF.date_from, this.joursHorsSGRF.date_to)
       .then(() => {
         this.$root.$emit("ShowMessage", "L'étape a bien été mise à jour");
         this.etapeAffaire.showDialog = false;
@@ -280,7 +251,7 @@ export default {
         }
 
         // Si aucun numéro n'est réservé dans l'affaire, clôre l'affaire
-        if ((this.etapeAffaire.prochaine && this.etapeAffaire.prochaine.id && this.etapeAffaire.prochaine.id === this.etapes_affaire_conf.fin_processus) &&
+        if ((this.etapeAffaire.prochaine_id === this.etapes_affaire_conf.fin_processus) &&
             (![this.typesAffaires_conf.mutation, this.typesAffaires_conf.modification, this.typesAffaires_conf.remaniement_parcellaire,
                this.typesAffaires_conf.modification_visa, this.typesAffaires_conf.modification_mutation].includes(this.affaire.type_id)) &&
             (this.numerosReserves.length === 0)) {
@@ -306,9 +277,9 @@ export default {
       this.updateAffaireDate.show = (
         [this.etapes_affaire_conf.envoi, this.etapes_affaire_conf.validation].includes(this.affaire.etape_id) && this.affaire.type_id !== this.typesAffaires_conf.pcop) ||
         (this.etapes_affaire_conf.envoi_pcop === this.affaire.etape_id && this.affaire.type_id === this.typesAffaires_conf.pcop) || 
-        this.etapeAffaire.prochaine && this.etapeAffaire.prochaine.id === this.etapes_affaire_conf.fin_processus && this.affaire.type_id === this.typesAffaires_conf.cadastration;
+        this.etapeAffaire.prochaine_id === this.etapes_affaire_conf.fin_processus && this.affaire.type_id === this.typesAffaires_conf.cadastration;
       
-      if (this.etapeAffaire.prochaine && this.etapeAffaire.prochaine.id) {
+      if (this.etapeAffaire.prochaine_id) {
         this.setNewEtapeParameters();
       }
     },
@@ -325,12 +296,12 @@ export default {
       };
 
       if (
-        (this.etapeAffaire.prochaine.id && this.etapeAffaire.prochaine.id === this.etapes_affaire_conf.fin_processus) &&
+        (this.etapeAffaire.prochaine_id === this.etapes_affaire_conf.fin_processus) &&
         ![this.typesAffaires_conf.ppe, this.typesAffaires_conf.modification_ppe, this.typesAffaires_conf.pcop].includes(this.affaire.type_id)
       ) {
         // update date_validation or date_cloture if next step is "fin de processus"
         if (
-          (this.etapeAffaire.prochaine && this.etapeAffaire.prochaine.id && this.etapeAffaire.prochaine.id === this.etapes_affaire_conf.fin_processus) &&
+          (this.etapeAffaire.prochaine_id === this.etapes_affaire_conf.fin_processus) &&
           (![this.typesAffaires_conf.mutation, this.typesAffaires_conf.modification, this.typesAffaires_conf.remaniement_parcellaire,
           this.typesAffaires_conf.modification_visa, this.typesAffaires_conf.modification_mutation].includes(this.affaire.type_id)) && (this.numerosReserves.length === 0)
         ) {
@@ -364,7 +335,7 @@ export default {
         ((this.affaire.etape_id === this.etapes_affaire_conf.envoi && ![this.typesAffaires_conf.pcop, this.typesAffaires_conf.cadastration].includes(this.affaire.type_id)) ||
         (this.affaire.etape_id === this.etapes_affaire_conf.envoi_pcop && this.affaire.type_id === this.typesAffaires_conf.pcop) ||
         (this.affaire.etape_id === this.etapes_affaire_conf.envoi_cadastration && this.affaire.type_id === this.typesAffaires_conf.cadastration)) &&
-        ([this.etapes_affaire_conf.validation, this.etapes_affaire_conf.signature_art35].includes(this.etapeAffaire.prochaine.id) ||
+        ([this.etapes_affaire_conf.validation, this.etapes_affaire_conf.signature_art35].includes(this.etapeAffaire.prochaine_id) ||
         [this.typesAffaires_conf.ppe, this.typesAffaires_conf.modification_ppe, this.typesAffaires_conf.pcop].includes(this.affaire.type_id))
       ) {
         this.updateAffaireDate = {
@@ -421,10 +392,14 @@ export default {
       }).catch(err => handleException(err, this));
     },
 
+    /** get selected value for new step */
+    setNewStepId(value) {
+      this.etapeAffaire.prochaine_id = value;
+    }
+
   },
 
   mounted: function() {
-    this.searchAffaireEtapes();
     this.$root.$on( "setEtapeNouveauxNumeros", (data) => this.setNumerosReserves(data) );
 
     // operateur is admin?
diff --git a/front/src/components/Affaires/Etape/etape.css b/front/src/components/Affaires/Etape/etape.css
index 6fee98ac..3f7ab11b 100644
--- a/front/src/components/Affaires/Etape/etape.css
+++ b/front/src/components/Affaires/Etape/etape.css
@@ -1,3 +1,8 @@
+.etapeDialog .md-dialog-container {
+    min-width: 750px !important;
+    width: 750px !important;
+}
+
 .etape {
     width: 100%;
     float: left;
diff --git a/front/src/components/Affaires/Etape/etape.html b/front/src/components/Affaires/Etape/etape.html
index 9a81f5f0..3e7ddfea 100644
--- a/front/src/components/Affaires/Etape/etape.html
+++ b/front/src/components/Affaires/Etape/etape.html
@@ -18,29 +18,16 @@
   
 
     <!-- Dialog pour la création de nouvelle étape dans l'affaire -->
-    <md-dialog :md-active.sync="etapeAffaire.showDialog" style="margin: auto; width: 900px">
+    <md-dialog :md-active.sync="etapeAffaire.showDialog" class="etapeDialog">
         <md-dialog-title>Nouvelle étape</md-dialog-title>
 
         <md-dialog-content>
             <div class="md-layout md-gutter md-alignment-top-space-between">
-                <div class="md-layout-item md-size-45">
-                    <!-- Nom de l'étape en cours -->
-                    <md-field>
-                        <label>Etape en cours</label>
-                        <md-input v-model="affaire.etape" readonly></md-input>
-                    </md-field>
-                </div>
-
-                <h3 style="margin-top: 24px">=></h3>
+                <div class="md-layout-item md-size-100">
 
-                <div class="md-layout-item md-size-45">
-                    <!-- Nom de la prochaine étape -->
-                    <md-autocomplete v-model="etapeAffaire.prochaine" :md-options="affaireEtapes" md-dense required @md-selected="onSelectNextStep" style="z-index: 9000 !important">
-                        <label>Prochaine étape</label>
-                    </md-autocomplete>
+                    <NewStepSetter :affaire_id="affaire.id" @new-step-selected="setNewStepId" />
                 </div>
-
-                <div class="md-layout-item md-size-45" v-if="etapeAffaire.prochaine && etapeAffaire.prochaine.id && etapeAffaire.prochaine.id === etapes_affaire_conf.travaux_chef_equipe">
+                <div class="md-layout-item md-size-45" v-if="etapeAffaire.prochaine_id === etapes_affaire_conf.travaux_chef_equipe">
                     <!-- Sélection de l'opérateur -->
                     <md-field>
                         <label>Opérateur·rice</label>
diff --git a/front/src/components/Utils/NewStepSetter/NewStepSetter.vue b/front/src/components/Utils/NewStepSetter/NewStepSetter.vue
index 9ef08029..99fa48a6 100644
--- a/front/src/components/Utils/NewStepSetter/NewStepSetter.vue
+++ b/front/src/components/Utils/NewStepSetter/NewStepSetter.vue
@@ -32,7 +32,7 @@ export default {
         }
       ).then(response => {
         this.actual_step = response.data.etape;
-        this.next_step_id = response.data.predicted_next_step_id;
+        this.new_step_id = response.data.predicted_next_step_id;
       }).catch(err => handleException(err, this));
     },