SimulateurResultats.vue 8.01 KB
Newer Older
1 2
<template>
  <div id="SimulateurResultats">
3 4 5 6 7
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2>
            Résultats de simulation de financement
8 9 10 11
            <div class="pull-right inline">
              <button v-on:click="editSimulation();" class="btn main-button-primary mr-3"><span class="mr-1">Editer la simulation</span><i class="ml-1 fas fa-edit"></i></button>
              <button v-on:click="newSimulation();" class="btn main-button-primary"><span class="mr-1">Nouvelle simulation</span><i class="ml-1 fas fa-redo"></i></button>
            </div>
12 13
          </h2>
        </div>
14
      </div>
15 16 17 18 19 20 21 22 23 24 25 26
      <hr class="simulateur-horizontal-separator">
      <div class="row">
        <div class="col-md-12 text-center mb-3">
          <h3>
            <span v-if="this.financements_eligibles.length == 0">
              Aucun financement n'est disponible pour ce profil
            </span>
            <span v-else>
              Nous avons trouvé {{this.financements_eligibles.length }} financement<span v-if="this.financements_eligibles.length > 1">s</span> pour réaliser votre formation
            </span>
          </h3>
        </div>
27
      </div>
28 29 30 31 32 33 34 35 36
      <div v-for="(financement, id) in this.financements_eligibles" :key="id" class="mb-5">
        <div id="financements" class="row">
          <div class="col-md-12 col-sm-12 droits">
            <div data-type="FORMATION FINANCEE" class="row">
              <div class="col-md-8 block-description">
                <div class="row mt-3">
                  <div class="col-md-12">
                    <h3 class="financement">{{ financement.intitule }}</h3>
                  </div>
37
                </div>
38 39 40 41 42 43 44 45
                <div class="row explication">
                  <div class="col-md-12">
                    <div class="row">
                      <div class="col-md-12">
                        <strong>Je souhaite bénéficier de ce financement :</strong><br/>
                        {{ financement.demarches }}
                        <a rel="nofollow noopener noreferrer" target="_blank" href="https://www.moncompteactivite.gouv.fr">moncompteactivite.gouv.fr</a><br/>
                      </div>
46
                    </div>
47 48 49 50 51 52
                    <div class="row explication">
                      <div class="col-md-12">
                        <span class="savoir-plus" data-toggle="collapse" :data-target="'#more-explication-'+id" aria-expanded="false" aria-controls="moreexplication">
                          <strong style="cursor:pointer; text-decoration:underline">En savoir plus&nbsp;</strong><strong>&gt;</strong>
                        </span>
                      </div>
53
                    </div>
54 55 56 57
                    <div class="row collapse" :id="'more-explication-'+id">
                      <div class="col-md-12">
                        {{ financement.description }}
                      </div>
58 59 60
                    </div>
                  </div>
                </div>
61
              </div>
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
              <div class="col-md-4 block-cout-remu">
                <div class="mt-3">
                  <div class="cout"></div>
                  <div class="priseencharge remu">
                    <strong>Prise en charge</strong><br/>
                    {{ financement.prise_en_charge_texte }}
                  </div>
                  <div v-if="financement.plafond_prise_en_charge != 0" class="plafondpriseencharge remu">
                    <strong>Plafond de prise en charge</strong><br/>
                    {{ financement.plafond_prise_en_charge}}
                  </div>
                  <div class="remu">
                    <strong>Rémunération mensuelle</strong>
                    <br/>
                    <span v-if="financement.remuneration == 0">
                      Vous ne percevez pas de rémunération pendant la formation
                    </span>
                    <span v-else>
                      {{ financement.remuneration }}
                    </span>
                  </div>
                  <div class="remu"></div>
                  <div class="organisme remu">
                  </div>
                  <div class="aides-a-la-formation">
                    <a rel="noopener noreferrer" href="https://clara.pole-emploi.fr/aides/detail/aides-a-la-formation" target="_blank" style="color:blue;">Aides possibles à la formation</a>
                  </div>
89 90 91 92 93
                </div>
              </div>
            </div>
          </div>
        </div>
94
        <hr class="simulateur-horizontal-separator">
95 96
      </div>
    </div>
97 98 99
    <div id="explainCollapseGroup">
      <div class="row" id="explainButtonsGroup">
        <div class="col-md-4">
100 101 102
          <span class="ml-5" data-toggle="collapse" data-target="#scenario" aria-expanded="false" aria-controls="scenario" style="cursor:pointer;" v-on:click="scenarioToggled=!scenarioToggled">
            <button v-if="!scenarioToggled" class="btn main-button-primary">Voir le scénario de simulation</button>
            <button v-else class="btn main-button-primary">Masquer le scénario de simulation</button>
103 104 105
          </span>
        </div>
        <div class="col-md-4">
106 107 108
          <span class="ml-5" data-toggle="collapse" data-target="#context" aria-expanded="false" aria-controls="context" style="cursor:pointer;" v-on:click="contextToggled=!contextToggled">
            <button v-if="!contextToggled" class="btn main-button-primary">Voir le contexte de simulation</button>
            <button v-else class="btn main-button-primary">Masquer le contexte de simulation</button>
109 110 111
          </span>
        </div>
        <div class="col-md-4">
112 113 114
          <span class="ml-5" data-toggle="collapse" data-target="#explain" aria-expanded="false" aria-controls="explain" style="cursor:pointer;" v-on:click="explainToggled=!explainToggled">
            <button v-if="!explainToggled" class="btn main-button-primary">Voir l'explication de simulation</button>
            <button v-else class="btn main-button-primary">Masquer l'explication de simulation</button>
115 116
          </span>
        </div>
117
      </div>
118 119 120 121
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div id="scenario" data-parent="#explainCollapseGroup" class="collapse">
122 123 124
              <SimulateurScenario :scenario="scenario"></SimulateurScenario>
            </div>
          </div>
125
        </div>
126 127 128
        <div class="row">
          <div class="col-md-12">
            <div id="context" data-parent="#explainCollapseGroup" class="collapse">
129 130 131 132
              <SimulateurContext :schema="schema" :context="context"></SimulateurContext>
            </div>
          </div>
        </div>
133 134 135 136
        <div class="row">
          <div class="col-md-12">
            <div id="explain" data-parent="#explainCollapseGroup" class="collapse">
              <SimulateurExplain :schema="schema" :financements="financements"></SimulateurExplain>
137 138
            </div>
          </div>
139
        </div>
140
      </div>
141
    </div>
142 143 144
  </div>
</template>
<script>
145

146
  import SimulateurScenario from './SimulateurScenario.vue';
147
  import SimulateurExplain from './SimulateurExplain.vue';
148
  import SimulateurContext from './SimulateurContext.vue';
149

150
  export default {
151 152
    name: 'SimulateurResultats',
    components: {
153
      SimulateurScenario,
154
      SimulateurExplain,
155
      SimulateurContext
156
    },
157
    props: ['schema','financements', 'financements_eligibles', 'scenario', 'context', 'isLoading', 'id_formation'],
158 159 160 161 162 163 164
    data : function () {
      return {
        scenarioToggled:false,
        contextToggled:false,
        explainToggled:false,
      }
    },
165 166 167
    methods: {
      newSimulation : function () {
        location.reload();
168 169 170 171 172
      },
      editSimulation: function () {
        this.$parent.resultats = false;
        this.$parent.financements_eligibles = [];
        this.$parent.formation.numero = this.id_formation;
173 174
      }
    }
175

176 177
  }
</script>
178 179 180 181 182 183 184 185 186 187 188 189
<style scoped>
  #explainButtonsGroup {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index:2;
    background: white;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    margin:0;
  }
</style>