Commit 5d07fb68 authored by Lucas Détré's avatar Lucas Détré

Merge branch 'new-simulator' into 'vue-editor'

New simulator

See merge request !29
parents a0570397 60c1d091
Pipeline #2392 passed with stage
in 1 minute and 48 seconds
<template>
<div id="Catalogue">
<div id="CatalogueSearch">
<div class="container mb-0 mt-0">
<div class="row">
<div class="col-md-6">
<h2>Recherche Catalogue</h2>
<input type="text" ref="intercarif" placeholder="Identifiant INTERCARIF" v-model="intercarif">
<input @click="search()" type="button" class="btn main-button ml-4" value="Chercher">
<p>Plus d'info sur le format du catalogue: <a href="http://lheo.gouv.fr/langage">http://lheo.gouv.fr/langage</a>.</p>
<div class="col-md-12">
<h2>Catalogue</h2>
<input type="text" ref="intercarif" placeholder="Identifiant INTERCARIF" v-model="intercarif" class="form-control"><br>
<input @click="search()" type="button" class="btn main-button pull-right" value="Chercher">
</div>
<div class="col-md-6 results">
</div>
<br>
<div class="row">
<div class="col-md-12 results">
<div v-if="this.intercarif && Object.keys(this.results).length">
<pre>{{ this.results }}</pre>
</div>
......@@ -24,6 +26,7 @@
</template>
<script>
export default {
name: 'CatalogueSearch',
data: function () {
return {
intercarif: "",
......
<template>
<div id="CertifInfo">
<div id="CertifInfoSearch">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Recherche Certif Info</h2>
<input type="text" ref="certifinfo" placeholder="Code Certif Info" v-model="certifinfo">
<input @click="search()" type="button" class="btn main-button ml-4" value="Chercher">
<div class="col-md-12">
<h2>Certif Info</h2>
<input type="text" ref="certifinfo" placeholder="Code Certif Info" v-model="certifinfo" class="form-control"><br>
<input @click="search()" type="button" class="btn main-button pull-right" value="Chercher">
</div>
<div class="col-md-6 results">
</div>
<br>
<div class="row">
<div class="col-md-12 results">
<div v-if="this.certifinfo && Object.keys(this.results).length">
<ul class="dash">
<li v-for="(result,code) in this.results" :key="code">
......@@ -25,7 +28,7 @@
</template>
<script>
export default {
name: 'CertifInfo',
name: 'CertifInfoSearch',
data: function () {
return {
certifinfo: "",
......
......@@ -2,12 +2,15 @@
<div id="IDCCSearch">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Recherche IDCC</h2>
<input type="text" ref="idcc" placeholder="Chercher une convention collective" v-model="idcc">
<input @click="search()" type="button" class="btn main-button ml-4" value="Chercher">
<div class="col-md-12">
<h2>IDCC</h2>
<input type="text" ref="idcc" placeholder="Chercher une convention collective" v-model="idcc" class="form-control"><br>
<input @click="search()" type="button" class="btn main-button pull-right" value="Chercher">
</div>
<div class="col-md-6 results">
</div>
<br>
<div class="row">
<div class="col-md-12 results">
<div v-if="this.idcc && Object.keys(this.results).length">
<ul class="dash">
<li v-for="(result,code) in this.results" :key="code">
......
<template>
<div id="NAFSearch">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>NAF</h2>
<input type="text" ref="naf" placeholder="Code NAF" v-model="naf" class="form-control"><br>
<input @click="search()" type="button" class="btn main-button pull-right" value="Chercher">
</div>
</div>
<br>
<div class="row">
<div class="col-md-12 results">
<div v-if="this.naf && Object.keys(this.results).length">
<ul class="dash">
<li v-for="(result,code) in this.results" :key="code">
{{ result.name }}
</li>
</ul>
</div>
<div v-if="this.naf && this.resultsIsEmpty">
<p> Aucune activité principale trouvée avec l'identifiant «{{ this.naf }}».</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'NAFSearch',
data: function () {
return {
naf: "",
results: {},
resultsIsEmpty: false,
}
},
computed: {
},
methods: {
search: function () {
this.$http.get('/naf?q='+this.naf).then(response => {
this.results = response.body;
this.resultsIsEmpty = this.isEmpty(this.results);
}).created;
},
isEmpty: function (obj) {
for(var key in obj) {
if(obj.hasOwnProperty(key))
return false;
}
return true;
}
}
}
</script>
......@@ -11,7 +11,9 @@
<svg class="nav-icon">
<use xlink:href="#accueil_icon" />
</svg>
Accueil
<span class="nav-label">
Accueil
</span>
</router-link>
</li>
<li class="nav-item">
......@@ -19,7 +21,9 @@
<svg class="nav-icon">
<use xlink:href="#referentiel_icon" />
</svg>
Référentiel
<span class="nav-label">
Référentiel
</span>
</router-link>
</li>
<li class="nav-item">
......@@ -27,23 +31,30 @@
<svg class="nav-icon">
<use xlink:href="#financements_icon" />
</svg>
Financements
<span class="nav-label">
Financements
</span>
</router-link>
</li>
<!--<li class="nav-item">
<li class="nav-item">
<router-link to="/simulateur" name="simulateur" class="nav-link">
<svg class="nav-icon">
<use xlink:href="#simulateur_icon" />
</svg>
Simulateur
<span class="nav-label">
Simulateur
</span>
</router-link>
</li>
<!--
<li class="nav-item">
<router-link to="/scenarios" name="scenarios" class="nav-link">
<svg class="nav-icon">
<use xlink:href="#scenarios_icon" />
</svg>
Scénarios
<span class="nav-label">
Scénarios
</span>
</router-link>
</li>-->
<li class="nav-item">
......@@ -51,7 +62,9 @@
<svg class="nav-icon">
<use xlink:href="#outils_icon" />
</svg>
Outils
<span class="nav-label">
Outils
</span>
</router-link>
</li>
</ul>
......@@ -166,4 +179,15 @@
.router-link-active:hover {
color:white;
}
@media screen and (max-width: 1024px) {
.nav-label {
display: none !important;
}
.nav-icon {
width: 23px !important;
height:23px !important;
align-content: center;
}
}
</style>
<template>
<div id="Outils">
<IDCCSearch class="section-outil"></IDCCSearch>
<hr class="outil-horizontal-separator">
<Catalogue class="section-outil"></Catalogue>
<hr class="outil-horizontal-separator">
<CertifInfo class="section-outil"></CertifInfo>
<div class="container ml-3 mr-3 mt-5">
<div class="row outils-row">
<div class="col-md-6 col-sm-12">
<IDCCSearch class="section-outil"></IDCCSearch>
</div>
<div class="col-md-6 col-sm-12">
<CatalogueSearch class="section-outil"></CatalogueSearch>
</div>
</div>
<div class="col-md-12 pb-3">
<hr class="outil-horizontal-separator">
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<CertifInfoSearch class="section-outil"></CertifInfoSearch>
</div>
<div class="col-md-6 col-sm-12">
<NAFSearch class="section-outil"></NAFSearch>
</div>
</div>
</div>
</div>
</template>
<script>
import IDCCSearch from './IDCCSearch.vue'
import Catalogue from './Catalogue.vue'
import CertifInfo from './CertifInfo.vue'
import CatalogueSearch from './CatalogueSearch.vue'
import CertifInfoSearch from './CertifInfoSearch.vue'
import NAFSearch from './NAFSearch.vue'
export default {
name: 'Outils',
components: {
IDCCSearch,
Catalogue,
CertifInfo
CatalogueSearch,
CertifInfoSearch,
NAFSearch
}
}
</script>
<style scoped>
.section-outil {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
margin-left: 2rem;
#Outils {
padding-top: 2vh;
}
.outils-row {
min-height:30vh;
}
</style>
<template>
<div id="Simulateur">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Depuis un résultat de financement LBF
<a v-if="Object.keys(this.url).length" :href="this.url">
<i class="icon">link</i>
</a>
</h2>
</div>
<div class="col-md-6">
<div v-if="Object.keys(this.errors).length && !Object.keys(this.context).length" class="results">
<ul>
<li v-for="(message, key) in this.errors" :key="key">
<strong>{{ key }}</strong>
{{ message }}
</li>
</ul>
</div>
<div class="results" v-else>
<p>Vous devez faire une simulation sur LBF et cliquer sur le bouton "simuler sur trèfle"</p>
<p>
Pour voir le bouton sur le site de production glisser/déposer ce lien dans votre bookmark
<a class="btn main-button ml-2" :href="href()">
LBF mode expert
</a>
</p>
</div>
<div class="results" v-if="Object.keys(this.context).length">
<h2>Financements</h2>
<p class="filter">
<span @click="this.filter()" :class="'label'+ {eligible: this.tagsEligible.includes(tag)}" v-for="(tag, i) in this.tags" :key="i">
{{tag}}
</span>
</p>
<p v-if="!this.currentFilter">
<label for="fin_checkbox">Tous les financements</label>
<input name="fin_checkbox" type="checkbox" @click="this.checked=toggleFailed"/>
</p>
<p v-else>
<label for="fin_eligibles_checkbox">Tous les financements éligibles</label>
<input name="fin_eligibles_checkbox" type="checkbox" @click="this.checked=this.filter"/>
</p>
<ul>
<li v-for="financement in this.financements" :key="financement.id" :class="'result visible'+{hide:(!financement.eligible && !this.currentFilter)}">
<h3 @click="this.$parent.toggle">
{{ financement.intitule }}
<label @click="this.filter()" class="label" v-for="(tag, i) in financement.tags" :key="i">
{{ tag }}
</label>
</h3>
<p>
<strong>Description</strong>
{{ financement.description }}
</p>
<p>
<strong>Démarches</strong>
{{ financement.demarches }}
</p>
<virtual v-if="financement.eligible">
<p>
<strong>Prise en charge</strong>
{{ financement.prise_en_charge }}
</p>
<p v-if="financement.prise_en_charge_texte">
<strong>Prise en charge</strong>
{{ financement.prise_en_charge_texte }}
</p>
<p>
<strong>Plafond de prise en charge</strong>
{{ financement.plafond_prise_en_charge }}
</p>
<p>
<strong>Plafond de prix horaire</strong>
{{ financement.plafond_prix_horaire }}
</p>
<p>
<strong>Nombre d'heures prises en charge</strong>
{{ financement.heures }}
</p>
<p>
<strong>Rémunération</strong>
{{ financement.remuneration }}
</p>
<p v-if="financement.remuneration_texte">
<strong>Rémunération</strong>
{{ financement.remuneration_texte }}
</p>
<p v-if="financement.fin_remuneration">
<strong>Fin de la rémunération</strong>
{{ renderValue('financement.fin_remuneration', financement.fin_remuneration) }}
</p>
<p v-if="financement.rff" }}>
<strong>RFF</strong>
{{ financement.rff }}
</p>
<p v-if="financement.debut_rff" }}>
<strong>Début de la RFF</strong>
{{ renderValue('financement.debut_rff', financement.debut_rff) }}
</p>
<p v-if="financement.fin_rff" }}>
<strong>Fin de la RFF</strong>
{{ renderValue('financement.fin_rff', financement.fin_rff) }}
</p>
<p v-if="financement.organisme" }}>
<strong>Organisme</strong>
{{financement.organisme.nom }}
</p>
</virtual>
<p>
<strong>Règles de gestion</strong>
<eligibilite conditions={ explain }></eligibilite>
</p>
</li>
</ul>
<p v-if="!this.financements.length">Aucun financement trouvé.</p>
<h2>Contexte</h2>
<context :data="this.context"></context>
<h2>Scénario de test</h2>
<textarea @focus="this.selectScenario()" v-model="this.scenario"/>
</div>
</div>
</div>
</div>
<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">
<!---------------- STEP ONE ---------------->
<div class="formation-step step" :class="{step_completed_class: formation_step_completed}">
<div class="row">
<div class="col-md-12">
<h4>Formation</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="id_formation">Identifiant de formation intercarif</label>
<input v-model="id_formation" v-on:keydown="formationNotExists=null; formation.numero=null" id="id_formation" type="text" value="" placeholder="identifiant intercarif" class="form-control" /><br>
<button class="btn main-button mr-5" v-on:click="searchCatalogue()">Chercher</button>
<strong v-if="formationNotExists===false">{{ intitule_formation }}</strong>
<span v-if="formationNotExists===true" style="color:red">Aucune formation trouvée pour l'identifiant renseigné</span><br>
</div>
</div>
</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}">
<div class="row">
<div class="col-md-12">
<h4>Situation</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 form-check">
<input v-model="situation_inscrit" name="situation_inscrit" id="situation_inscrit1" type="radio" value="1" class="form-check-input"/>
<label for="situation_inscrit1" class="form-check-label">Vous êtes inscrit(e) comme demandeur d'emploi</label>
</div>
</div>
<div v-if="situation_inscrit==1">
<div class="row">
<div class="col-md-12 group-indent1">
<label for="situation_inscritcumuldureeinscriptionsur12mois">Depuis combien de temps êtes-vous inscrit à Pôle Emploi ?</label>&nbsp;
<select v-model="situation_inscritcumuldureeinscriptionsur12mois" id="situation_inscritcumuldureeinscriptionsur12mois" class="form-control">
<option value="-" selected>-</option>
<option value="1">de 1 à 3 mois</option>
<option value="3">de 3 à 6 mois</option>
<option value="6">de 6 à 12 mois</option>
<option value="12">12 mois et plus</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12 group-indent1">
<label for="allocation_type">Type d'allocation</label>&nbsp;
<select v-model="allocation_type" id="allocation_type" class="form-control">
<option value="-" selected>-</option>
<option value="non">Non indemnisé</option>
<option value="are">Allocation d'aide au Retour à l'Emploi (ARE)</option>
<option value="ass">Allocation de Solidarité Spécifique (ASS)</option>
<option value="rsa">Revenu de Solidarité Active (RSA)</option>
<option value="asr">Allocation Spécifique de Reclassement (ASR)</option>
<option value="atp">Allocation de Transition Professionnelle (ATP)</option>
<option value="asp">Allocation de Sécurisation Professionnelle (ASP)</option>
<option value="aex">Allocation ex-employeur secteur public</option>
</select>
</div>
</div>
</div>
<div v-if="allocation_type != 'non' && allocation_type != '-' && allocation_type != '' && situation_inscrit == 1">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 group-indent2">
<label for="allocation_dateend">Date de fin estimée de votre indemnisation</label>&nbsp;
<input v-model="allocation_dateend" id="allocation_dateend" type="text" value="" placeholder="JJ/MM/AAAA" pattern="^\d{1,2}/\d{1,2}/\d{4}$" class="date form-control" :class="{input_format_error: badFormatAllocation_dateend, input_format_valid: goodFormatAllocation_dateend}"/>
</div>
</div>
<div class="row">
<div class="col-md-12 group-indent2">
<label for="allocation_cost">Montant mensuel de votre allocation</label>&nbsp;
<input v-model="allocation_cost" id="allocation_cost" type="number" value="" placeholder="arrondi à l'€ net / mois" min="0" class="form-control"/>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 form-check">
<input v-model="situation_inscrit" name="situation_inscrit" id="situation_inscrit2" type="radio" value="2" required="required" class="form-check-input"/>&nbsp;
<label for="situation_inscrit2" class="form-check-label" >Vous êtes salarié(e) de droit privé</label>
</div>
</div>
</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}">
<div v-if="situation_inscrit == 2 && financement__accessible_salarie_formation == false">
<h5 style="color:red;">Seules les personnes inscrites comme « demandeur d'emploi » peuvent bénéficier d'une aide financière pour cette formation.</h5>
</div>
<div v-else>
<div class="row">
<div class="col-md-12">
<h4>Date de naissance</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input v-model="birthdate" name="birthdate" id="birthdate" type="text" title="Format : JJ/MM/AAAA" required="required" placeholder="JJ/MM/AAAA" class="date form-control" :class="{input_format_error: badFormatBirthdate, input_format_valid: goodFormatBirthdate}"/>
</div>
</div>
<div v-if="situation_inscrit == 1">
<div class="row">
<div class="col-md-12">
<h4>Domicile</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 autocomplete">
<b-form-input v-model="commune_beneficiaire_autocomplete" list="commune-beneficiaire-list" placeholder="Rentrez votre code postal"></b-form-input>
<datalist id="commune-beneficiaire-list">
<option v-for="commune in this.commune_beneficiaire_list" :key="commune.codeCommune">
{{ commune.nomCommune }} | {{ commune.codePostal }} ({{ commune.codeCommune }})
</option>
</datalist>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>Votre niveau d'étude</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<select v-model="niveauscolaire" name="niveauscolaire" id="niveauscolaire" class="form-control">
<option value="-" selected>-</option>
<option value="2">Sans dipl&ocirc;me (VI)</option>
<option value="3">Préqualification (V bis)</option>
<option value="4">CAP, BEP, CFPA du premier degré (V)</option>
<option value="5">BP, BT, baccalauréat professionnel ou technologique (IV)</option>
<option value="5.1">Baccalauréat général (IV)</option>
<option value="6">BTS, DUT (III)</option>
<option value="7">Licence ou master 1 (II)</option>
<option value="8">Supérieur ou égal à master 2 (I)</option>
<option value="1">Sans niveau spécifique</option>
</select>
</div>
</div>
</div>
<div v-if="situation_inscrit == 2">
<div class="row">
<div class="col-md-12">
<h4>Votre rémunération mensuelle actuelle</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input v-model="salaire" name="salaire" id="salaire" type="number" value="" placeholder="salaire arrondi à l'€ net / mois" min="0" class="form-control"/>
</div>
</div>
</div>
</div>
</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}">
<div class="row">
<div class="col-md-12">
<h4>Compte personnel de formation (CPF)</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 form-check">
<input v-model="situation_cpfconnu" name="situation_cpfconnu" id="cpf1" type="radio" value="cpfconnu" class="form-check-input"/>
&nbsp;<label for="cpf1" class="form-check-label">Vous connaissez vos droits à formation CPF en euros</label>
</div>
</div>
<div v-if="situation_cpfconnu=='cpfconnu'" class="row">
<div class="col-md-12 group-indent1">
<input v-model="situation_creditheurescpf" name="situation_creditheurescpf" id="situation_creditheurescpf" type="number" placeholder="Votre crédit en euro" min="0" class="form-control"/>
</div>
</div>
<div v-if="situation_creditheurescpf != ''" class="row">
<div class="col-md-12 group-indent1">
<span id="situation_cpfconnu_label" class="text-muted">
Attention : assurez-vous bien d'avoir
<a href="https://www.moncompteformation.gouv.fr/espace-prive/html/#/compte-utilisateur/connexion" target="_blank" class="text-muted" rel="noopener noreferrer">
<u>activé votre Compte Personnel Formation</u>
</a>
pour pouvoir mobiliser vos heures CPF
</span>
</div>
</div>
<div class="row">
<div class="col-md-12 form-check">
<input v-model="situation_cpfconnu" name="situation_cpfconnu" id="cpf2" type="radio" value="cpfinconnu" class="form-check-input"/>&nbsp;
<label for="cpf2" class="form-check-label">Vous ne connaissez pas vos droits à formation CPF en euros</label>
</div>
</div>
<div v-if="situation_cpfconnu == 'cpfinconnu'" class="row">
<div class="col-md-12">
<span id="situation_creditheurescpfconnu_label" class="text-muted">
Activez votre
<a href="https://www.moncompteformation.gouv.fr/espace-prive/html/#/compte-utilisateur/connexion" target="_blank" class="text-muted" rel="noopener noreferrer">
<u>Compte Personnel Formation (CPF)</u>
</a>.
</span>
</div>
</div>
<div class="row">
<div class="col-md-12 form-check">