SimulateurResultats.vue 7.58 KB
Newer Older
1 2
<template>
  <div id="SimulateurResultats">
3 4 5 6 7 8 9 10
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h2>
            Résultats de simulation de financement
            <button v-on:click="newSimulation();" class="btn main-button-primary pull-right"><span class="mr-1">Nouvelle simulation</span><i class="ml-1 fas fa-redo"></i></button>
          </h2>
        </div>
11
      </div>
12 13 14 15 16 17 18 19 20 21 22 23
      <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>
24
      </div>
25 26 27 28 29 30 31 32 33
      <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>
34
                </div>
35 36 37 38 39 40 41 42
                <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>
43
                    </div>
44 45 46 47 48 49
                    <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>
50
                    </div>
51 52 53 54
                    <div class="row collapse" :id="'more-explication-'+id">
                      <div class="col-md-12">
                        {{ financement.description }}
                      </div>
55 56 57
                    </div>
                  </div>
                </div>
58
              </div>
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
              <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>
86 87 88 89 90
                </div>
              </div>
            </div>
          </div>
        </div>
91
        <hr class="simulateur-horizontal-separator">
92 93
      </div>
    </div>
94 95 96
    <div id="explainCollapseGroup">
      <div class="row" id="explainButtonsGroup">
        <div class="col-md-4">
97 98 99
          <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>
100 101 102
          </span>
        </div>
        <div class="col-md-4">
103 104 105
          <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>
106 107 108
          </span>
        </div>
        <div class="col-md-4">
109 110 111
          <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>
112 113
          </span>
        </div>
114
      </div>
115 116 117 118
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div id="scenario" data-parent="#explainCollapseGroup" class="collapse">
119 120 121
              <SimulateurScenario :scenario="scenario"></SimulateurScenario>
            </div>
          </div>
122
        </div>
123 124 125
        <div class="row">
          <div class="col-md-12">
            <div id="context" data-parent="#explainCollapseGroup" class="collapse">
126 127 128 129
              <SimulateurContext :schema="schema" :context="context"></SimulateurContext>
            </div>
          </div>
        </div>
130 131 132 133
        <div class="row">
          <div class="col-md-12">
            <div id="explain" data-parent="#explainCollapseGroup" class="collapse">
              <SimulateurExplain :schema="schema" :financements="financements"></SimulateurExplain>
134 135
            </div>
          </div>
136
        </div>
137
      </div>
138
    </div>
139 140 141
  </div>
</template>
<script>
142

143
  import SimulateurScenario from './SimulateurScenario.vue';
144
  import SimulateurExplain from './SimulateurExplain.vue';
145
  import SimulateurContext from './SimulateurContext.vue';
146

147
  export default {
148 149
    name: 'SimulateurResultats',
    components: {
150
      SimulateurScenario,
151
      SimulateurExplain,
152
      SimulateurContext
153
    },
154
    props: ['schema','financements', 'financements_eligibles', 'scenario', 'context', 'isLoading'],
155 156 157 158 159 160 161
    data : function () {
      return {
        scenarioToggled:false,
        contextToggled:false,
        explainToggled:false,
      }
    },
162 163 164 165 166
    methods: {
      newSimulation : function () {
        location.reload();
      }
    }
167

168 169
  }
</script>
170 171 172 173 174 175 176 177 178 179 180 181
<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>