Simulateur.vue 17.9 KB
Newer Older
1
<template>
Lucas Détré's avatar
Lucas Détré committed
2 3 4 5 6 7 8 9 10
  <div id="Simulateur">
    <div class="container form-group pt-5">
      <div v-if="!resultats">
        <div class="row">
          <div class="col-md-12">
            <h2>Simuler un financement </h2>
          </div>
        </div>
        <hr class="simulateur-horizontal-separator">
11
        <!---------------- STEP FORMATION ---------------->
Lucas Détré's avatar
Lucas Détré committed
12
        <div class="formation-step step" :class="{step_completed_class: formation_step_completed}">
13
          <SimulateurStepFormation :id_formation="formation.numero"/>
Lucas Détré's avatar
Lucas Détré committed
14 15 16 17
        </div>
        <hr v-if="formation_step_completed" class="simulateur-horizontal-separator">
        <!---------------- STEP ONE ---------------->
        <div v-if="formation_step_completed" class="form-step step-one" :class="{step_completed_class: step_one_completed}">
18
          <SimulateurStepOne id="SimulateurStepOne"/>
Lucas Détré's avatar
Lucas Détré committed
19 20 21 22
        </div>
        <hr v-if="step_one_completed" class="simulateur-horizontal-separator">
        <!---------------- STEP TWO ---------------->
        <div v-if="step_one_completed" class="form-step step-two" :class="{step_completed_class: step_two_completed}">
23
          <SimulateurStepTwo id="SimulateurStepTwo"/>
Lucas Détré's avatar
Lucas Détré committed
24 25 26 27
        </div>
        <hr v-if="step_two_completed" class="simulateur-horizontal-separator">
        <!---------------- STEP THREE ---------------->
        <div v-if="step_two_completed" class="form-step step-three" :class="{step_completed_class: step_three_completed}">
28
          <SimulateurStepThree id="SimulateurStepThree"/>
Lucas Détré's avatar
Lucas Détré committed
29 30 31 32
        </div>
        <hr v-if="step_three_completed" class="simulateur-horizontal-separator">
        <!---------------- STEP FOUR ---------------->
        <div v-if="step_three_completed" class="form-step step-four" :class="{step_completed_class: step_four_completed}">
33
          <SimulateurStepFour id="SimulateurStepFour"/>
Lucas Détré's avatar
Lucas Détré committed
34 35 36 37
        </div>
        <hr v-if="step_four_completed" class="simulateur-horizontal-separator">
        <!---------------- STEP FIVE ---------------->
        <div v-if="step_four_completed" class="form-step step-five" :class="{step_completed_class: step_five_completed}">
Lucas Détré's avatar
Lucas Détré committed
38
          <SimulateurStepFive id="SimulateurStepFive"/>
Lucas Détré's avatar
Lucas Détré committed
39 40 41 42 43 44
        </div>
        <!---------------- STEP FIVE ---------------->
        <div v-if="step_five_completed" class="form-step">
          <input type="button" class="btn main-button" value="Simuler" v-on:click="simulate()"/>
        </div>
      </div>
45
    </div>
46
      <!------------------- RESULTATS -------------->
47 48
    <div v-if="resultats" id="simulate-results">
      <div v-if="!isLoading" class="mt-5">
49
        <SimulateurResultats :schema="schema" :financements="financements" :financements_eligibles="financements_eligibles" :scenario="scenario" :context="context" :id_formation="formation.numero"></SimulateurResultats>
50 51
      </div>
      <div v-else class="text-center loading-gif">
52
        <img src="@/assets/images/loading.gif" alt="loading...">
Lucas Détré's avatar
Lucas Détré committed
53
      </div>
54
    </div>
Lucas Détré's avatar
Lucas Détré committed
55
  </div>
56 57
</template>
<script>
58 59 60 61 62 63
  import SimulateurStepFormation from './SimulateurStepFormation.vue';
  import SimulateurStepOne from './SimulateurStepOne.vue';
  import SimulateurStepTwo from './SimulateurStepTwo.vue';
  import SimulateurStepThree from './SimulateurStepThree.vue';
  import SimulateurStepFour from './SimulateurStepFour.vue';
  import SimulateurStepFive from './SimulateurStepFive';
64
  import SimulateurResultats from './SimulateurResultats.vue';
65

66
  export default {
67 68 69
    name: 'Simulateur',
    components: {
      SimulateurResultats,
70 71 72 73 74 75
      SimulateurStepFormation,
      SimulateurStepOne,
      SimulateurStepTwo,
      SimulateurStepThree,
      SimulateurStepFour,
      SimulateurStepFive,
76
    },
77 78
    data: function () {
      return {
Lucas Détré's avatar
Lucas Détré committed
79 80 81 82 83 84
        // champs de formulaire
        // step formation
        id_formation : null,
        formationNotExists: null,
        intitule_formation : null,
        //flag permettant de detecter si la formation est eligible à un financement en cas de profil de salarié
85
        financement_accessible_salarie_formation: null,
Lucas Détré's avatar
Lucas Détré committed
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
        formation : {
          numero : null,
        },
        // step one
        situation_inscrit: undefined,
          // DE
          situation_inscritcumuldureeinscriptionsur12mois: '',
          allocation_type: '',
            // Indemnisé
            allocation_dateend: '',
            allocation_cost: '',
        // step two
        birthdate: '',
          // Salarié
          salaire: '',
          // DE
          commune_beneficiaire_autocomplete: '',
          niveauscolaire: '',
        // step 3
        situation_cpfconnu: '',
          // CPF connu
          situation_creditheurescpf: '',
        // step 4
          // salarié
          contrat: '',
            //cdd
            experience: '',
            moistravailleencdd: '',
            //cdi
            experienceannee: '',
            ancienneteentrepriseactuelle: '',
117

Lucas Détré's avatar
Lucas Détré committed
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
          // DE
          situation_contratapprentissage: false,
            // apprentissage
            situation_contratapprentissagetype: false,
            situation_rupturecontratapprentissage: false,
          situation_cdd: false,
            // CDD
            situation_cdd5years: false,
            // CDD 5 ans
            situation_cdd12months: false,
              // CDD 1 ans
              situation_salairebrutecdd: false,
          situation_contrataide: false,
            // CA
            situation_personneencourscontrataide: false,
          situation_6moissur12: false,
        // step 5
          // DE
            situation_th: false,
            situation_travailleurnonsal12dont6dans3ans: false,
            situation_parentisole: false,
            situation_mere3enfants: false,
            situation_divorceeveuve: false,
            situation_projetcreationentreprise: false,
            situation_vaepartiellemoins5ans: false,
          // Salarié
            naf: '',
            idcc: '',
            commune_entreprise_autocomplete: '',
        // TO DO input formation
148 149
        financements: [],
        financements_eligibles: [],
150
        scenario: '',
Lucas Détré's avatar
Lucas Détré committed
151
        resultats: false,
152
        isLoading: true,
Lucas Détré's avatar
Lucas Détré committed
153
        test: [],
154
        schema: {},
155 156
        context: {},
      }
Lucas Détré's avatar
Lucas Détré committed
157 158 159
    },
    computed: {
      formation_step_completed: function () {
160
        return this.formation.numero != null;
Lucas Détré's avatar
Lucas Détré committed
161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176
      },
      step_one_completed: function () {
        if (this.situation_inscrit == 1) {
          if (this.situation_inscritcumuldureeinscriptionsur12mois != '' && this.situation_inscritcumuldureeinscriptionsur12mois != '-') {
            if (this.allocation_type == 'non') return true
            else {
              if (this.allocation_dateend != '' && this.allocation_cost != '') return true
            }
          }
        } else if (this.situation_inscrit == 2) return true;
        return false;
      },
      step_two_completed: function () {
        if (this.step_one_completed) {
          if (this.birthdate.match(/^\s*(3[01]|[12][0-9]|0?[1-9])\/(1[012]|0?[1-9])\/((?:19|20)\d{2})\s*$/gi) != null) {
            if (this.situation_inscrit == 1) {
177
              if (this.commune_beneficiaire != undefined && this.niveauscolaire != '' && this.niveauscolaire != '-') {
Lucas Détré's avatar
Lucas Détré committed
178 179 180 181 182 183 184 185 186 187 188 189 190 191 192
                return true;
              }
            } else if (this.situation_inscrit == 2) {
              if (this.salaire != '') return true;
            }
          }
        }
        return false;
      },
      step_three_completed: function () {
        if (this.step_two_completed) {
          if (this.situation_cpfconnu != '') {
            if (this.situation_cpfconnu == 'cpfconnu') {
              if (this.situation_creditheurescpf) return true;
            } else return true;
193
          }
Lucas Détré's avatar
Lucas Détré committed
194 195 196 197 198
        }
        return false
      },
      step_four_completed: function () {
        if (this.step_three_completed) {
199 200 201 202 203 204 205
          if (this.situation_inscrit == '1') {
            if(this.situation_contratapprentissage) {
              if (this.situation_contratapprentissagetype == false || this.situation_contratapprentissagetype == "-") return false;
            }
            if(this.situation_contrataide) return (this.situation_personneencourscontrataide === "oui" || this.situation_personneencourscontrataide === "non");
            return true;
          }
Lucas Détré's avatar
Lucas Détré committed
206 207 208 209
          else if (this.situation_inscrit == '2') {
            if (this.contrat == 'cdd') {
              if (this.moistravailleencdd != '' && this.experience != '') return true;
            } else if (this.contrat == 'cdi') {
210
              if (this.ancienneteentrepriseactuelle != '' && this.experienceannee != '') return true;
Lucas Détré's avatar
Lucas Détré committed
211
            }
212
          }
Lucas Détré's avatar
Lucas Détré committed
213 214 215 216 217 218 219 220 221 222 223 224 225 226 227
        }
        return false
      },
      step_five_completed: function () {
        if (this.step_four_completed) {
          if (this.situation_inscrit == 1) return true;
          else if (this.situation_inscrit == 2) {
            if (this.idcc != '' && this.naf != '' && this.commune_entreprise != undefined) return true;
          }
        }
        return false;
      },
      age_beneficiaire : function () {
        if(this.birthdate.match(/^\s*(3[01]|[12][0-9]|0?[1-9])\/(1[012]|0?[1-9])\/((?:19|20)\d{2})\s*$/gi) == null) {
          return null;
228
        } else {
Lucas Détré's avatar
Lucas Détré committed
229
          // birthday is a date
Lucas Détré's avatar
Lucas Détré committed
230 231 232 233 234 235 236
          var today = new Date(),
          birthdate_reformat = new Date(this.birthdate.replace(/(\d{2})[-/](\d{2})[-/](\d+)/, "$2/$1/$3"));
          if(today.getMonth - birthdate_reformat.getMonth < 0) {
            return today.getFullYear() - birthdate_reformat.getFullYear() - 1;
          } else if(today.getMonth() - birthdate_reformat.getMonth() == 0) {
            if (today.getDate() - birthdate_reformat.getDate() < 0) {
              return today.getFullYear() - birthdate_reformat.getFullYear() - 1;
237
            }
Lucas Détré's avatar
Lucas Détré committed
238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258
          }
          return today.getFullYear() - birthdate_reformat.getFullYear();
        }
      },
      commune_beneficiaire: function () {
        // getting insee code from input field
        return this.commune_beneficiaire_autocomplete.split('(').length < 2 ? undefined : this.commune_beneficiaire_autocomplete.split('(')[1].substr(0,this.commune_beneficiaire_autocomplete.split('(')[1].length-1).trim();
      },
      departement: function () {
        return this.commune_beneficiaire == undefined ? undefined : this.commune_beneficiaire.substr(0,2)
      },
      commune_entreprise: function () {
        return this.commune_entreprise_autocomplete.split('(').length < 2 ? undefined : this.commune_entreprise_autocomplete.split('(')[1].substr(0,this.commune_entreprise_autocomplete.split('(')[1].length-1).trim();
      },
      request: function () {
        return {
          beneficiaire : {
            droit_prive: this.situation_inscrit == 1 ? false : true,
            inscrit_pe: this.situation_inscrit == 2 ? false : true,
            solde_cpf: this.situation_creditheurescpf == '' ? 0 : this.situation_creditheurescpf,
            remuneration: this.salaire == '' ? 0 : this.salaire,
259 260
            allocation: this.allocation_cost == '' ? 0 : this.allocation_cost,
            type_allocation: this.allocation_type == 'non' ? null : this.allocation_type,
Lucas Détré's avatar
Lucas Détré committed
261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288
            fin_allocation: this.allocation_dateend,
            naissance: this.birthdate,
            age: this.age_beneficiaire,
            parent_isole: this.situation_parentisole,
            mere_trois_enfants: this.situation_mere3enfants,
            veuve_ou_divorcee: this.situation_divorceeveuve,
            creation_entreprise: this.situation_projetcreationentreprise,
            contrat_aide_actuel: this.situation_personneencourscontrataide == 1 ? false : true,
            contrat_aide_passe: this.situation_contrataide,
            experience_professionnelle: this.experience,
            experience_professionnelle_5_dernieres_annees: this.situation_cdd5years,
            mois_travailles_en_cdd: this.situation_cdd12months,
            jours_travailes:'',
            heures_travaillees: '',
            contrat: this.contrat,
            mois_entreprise: null,
            heures_entreprise: null,
            commune: this.commune_beneficiaire,
            departement: this.departement,
            niveau_scolaire: this.niveauscolaire,
            th: this.sitation_th,
            a_travaille_six_mois: this.situation_6moissur12,
            a_travaille_douze_mois: this.situation_6moissur12,
            entreprise : {
              naf: this.naf.match(/^\d{2}\.?\d{2}[a-zA-Z]$/gi) == null ? null : this.naf.match(/^\d{2}\.?\d{2}[a-zA-Z]$/gi),
              idcc: this.idcc,
              commune: this.commune_entreprise,
              opco: null,
289
              opacif: null
Lucas Détré's avatar
Lucas Détré committed
290 291 292 293 294
            }
          },
          formation : this.formation
        }
      }
295 296 297
    },
    mounted: function () {
      this.loadSchema();
298
      this.simulateFromUrl();
Lucas Détré's avatar
Lucas Détré committed
299
    },
300
    methods: {
301 302 303 304 305 306 307
      loadSchema: function () {
        fetch('/explore/schema')
        .then((response) => response.json())
        .then((data) => {
          this.schema = data
        })
      },
308 309 310 311 312 313 314 315 316 317 318 319 320 321 322
      simulateFromUrl: function() {
        if(window.location.hash.substr(1).match(/^simulate/))
          var simulate_link = window.location.hash.substr(9)
          if(simulate_link.includes('labonneformation'))
            this.$http.get('/explore/decode-lbf-url?url='+simulate_link)
            .then(response => {
              this.context = response.body
              this.$http.get('/explore/catalog?id='+this.context['formation.numero']).then(response => {
                  if(response.status == 200) {
                    this.simulate()
                  }
                })
            })
      },
      prepareRequest: function() {
323
        if (this.situation_inscrit == 1) {
Lucas Détré's avatar
Lucas Détré committed
324 325 326
          if (this.allocation_type == 'non') {
            this.allocation_type = null;
            this.allocation_dateend = null;
327
          }
Lucas Détré's avatar
Lucas Détré committed
328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363
          this.salaire = null;
          this.moistravailleencdd = null;
          this.ancienneteentrepriseactuelle = null;
          this.experience = null;
          this.experienceannee = null;
          this.naf = '';
          this.idcc = '';
          this.commune_entreprise_autocomplete = '';

        } else if (this.situation_inscrit == 2) {
          this.allocation_type = null;
          this.allocation_dateend = null;
          this.situation_inscritcumuldureeinscriptionsur12mois = null;
          this.allocation_cost = null;
          this.commune_beneficiaire_autocomplete = '';
          this.niveauscolaire = null;

          if (this.contrat == 'cdi') {
            this.experience = null;
            this.moistravailleencdd = null;

          } else if (this.contrat == 'cdd') {
            this.experienceannee = null;
            this.ancienneteentrepriseactuelle = null;
          }

          this.situation_th = null;
          this.situation_travailleurnonsal12dont6dans3ans = null;
          this.situation_parentisole = null;
          this.situation_mere3enfants = null;
          this.situation_divorceeveuve = null;
          this.situation_projetcreationentreprise = null;
          this.situation_vaepartiellemoins5ans = null;
        }
        if (this.situation_cpfconnu != 'cpfconnu') this.situation_creditheurescpf = null;

364 365 366
      },
      simulate: function () {
        this.isLoading = true;
Lucas Détré's avatar
Lucas Détré committed
367

368
        if(!this.objectIsEmpty(this.context)) {
369 370 371
          this.prepareRequest()
        }

372
        this.$http.post('/financement?context=1&explain=true&scenario=1', this.request).then(response => {
373 374 375 376 377 378 379 380 381 382
          if(this.objectIsEmpty(response.body) == false) {
            for(var i=0; i<response.body.financements.length-1; i++) {
              if(this.situation_cpfconnu=='cpfempty') {
                if(response.body.financements[i].type_lbf!='cpf') {
                  this.financements.push(response.body.financements[i])
                  if (response.body.financements[i].eligible) this.financements_eligibles.push(response.body.financements[i]);
                }
              } else {
                this.financements = response.body.financements;
                if (response.body.financements[i].eligible) this.financements_eligibles.push(response.body.financements[i]);
Lucas Détré's avatar
Lucas Détré committed
383 384
              }
            }
Lucas Détré's avatar
Lucas Détré committed
385
          }
386
          this.scenario = response.body.scenario;
387
          this.context = response.body.context;
Lucas Détré's avatar
Lucas Détré committed
388 389 390
          this.isLoading = false;
        }).created
        this.resultats = true;
391 392 393 394 395 396 397
      },
      objectIsEmpty: function (obj) {
        for(var key in obj) {
          if(obj.hasOwnProperty(key))
            return false;
        }
        return true;
Lucas Détré's avatar
Lucas Détré committed
398
      },
399 400
    }
  }
David Foucher's avatar
David Foucher committed
401
</script>
402

403
<style>
404 405 406
  html {
    scroll-behavior: smooth;
  }
Lucas Détré's avatar
Lucas Détré committed
407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447
  .row {
    margin-bottom: 1rem;
  }
  .form-step {
    margin-bottom: 3rem;
  }
  .group-indent1 {
    padding-left: 3vw;
  }
  .group-indent2 {
    padding-left: 6vw;
  }
  .group-indent3 {
    padding-left: 9vw;
  }
  .simulateur-horizontal-separator {
    border: none;
    border-top: 1px solid #bfbfbf;
    height: 1px;
    width: 100%;
    position:relative;
  }
  .autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
  }
  .autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
  }
  .autocomplete-items div {
    padding: 10px;
    cursor: pointer;
448 449
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
Lucas Détré's avatar
Lucas Détré committed
450 451 452
  }
  .autocomplete-items div:hover {
    /*when hovering an item:*/
453
    background-color: #e9e9e9;
Lucas Détré's avatar
Lucas Détré committed
454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482
  }
  .block-description {
    background-color: #F1F1F1;
    border-radius: 5px 0px 0px 5px;
  }
  .block-cout-remu {
    background-color: #CAD6E6;
    border-radius: 0px 5px 5px 0px;
  }
  .form-step {
    padding-right: 1vw;
    padding-left: 2vw;
    transition: padding 0.2s 0s ease;
  }
  .step_completed_class {
    background-color: rgba(153, 255, 102, 0.1);
    padding-right: 3vw;
    padding-left: 3vw;
    padding-top: 3vh;
    padding-bottom: 3vh;
    border-radius: 10px;
    transition: padding 0.2s 0s linear;
  }
  .input_format_error {
    background-color: rgba(215, 44, 44, 0.2);
  }
  .input_format_valid {
    background-color: rgba(153, 255, 102, 0.1);
  }
483
</style>