Commit add43a81 authored by Lucas Détré's avatar Lucas Détré 😺
Browse files

new explain view with filtering on tags + adjustements

parent cc3e77bf
Pipeline #2875 passed with stage
in 1 minute and 34 seconds
<template>
<div id="Eligibilite">
<ul>
<li v-for="(props, id) in this.conditions" :key="id" :class="{passed: props.status, failed: !props.status}">
<span v-html="transformData(props.condition)"/>
<span v-if="props.children">
<eligibilite :conditions="props.children"/>
</span>
</li>
</ul>
</div>
</template>
<script>
import Eligibilite from './Eligibilite.vue';
export default {
name: 'Eligibilite',
props: ['conditions', 'schema'],
components: {
Eligibilite,
},
methods: {
transformData: function (data) {
return data
.replace(/Ou /g, '<span style="font-style: italic">&nbsp;Ou&nbsp; </span>')
.replace(/OU /g, '<span style="font-style: italic">&nbsp;OU&nbsp; </span>')
.replace(/, ou /g, '<span style="font-style: italic">&nbsp;, ou&nbsp; </span>')
.replace(/Et /g, '<span style="font-style: italic">&nbsp;Et&nbsp; </span>')
.replace(/ET /g, '<span style="font-style: italic">&nbsp;ET&nbsp; </span>')
.replace(/, et /g, '<span style="font-style: italic">&nbsp;, et&nbsp; </span>');
}
}
}
</script>
<style scoped>
.failed:before {
content: '✗';
color: crimson;
}
.passed:before {
content: '✔';
color: forestgreen;
}
li li {
padding-left: 1.5rem;
}
li ul, li.sub {
display: inline;
padding-left: 0;
}
.connective {
font-style: italic !important;
}
</style>
\ No newline at end of file
......@@ -42,20 +42,19 @@
<input type="button" class="btn main-button" value="Simuler" v-on:click="simulate()"/>
</div>
</div>
</div>
<!------------------- RESULTATS --------------->
<div v-else id="simulate-results">
<div v-if="!isLoading" class="mt-5">
<SimulateurResultats :schema="schema" :financements="financements" :financements_eligibles="financements_eligibles" :scenario="scenario" :context="context"></SimulateurResultats>
</div>
<div v-else class="text-center loading-gif">
<img src="./../assets/images/loading.gif" alt="loading...">
</div>
<div v-if="resultats" id="simulate-results">
<div v-if="!isLoading" class="mt-5">
<SimulateurResultats :schema="schema" :financements="financements" :financements_eligibles="financements_eligibles" :scenario="scenario" :context="context"></SimulateurResultats>
</div>
<div v-else class="text-center loading-gif">
<img src="./../assets/images/loading.gif" alt="loading...">
</div>
</div>
</div>
</template>
<script>
import SimulateurStepFormation from './SimulateurStepFormation.vue';
import SimulateurStepOne from './SimulateurStepOne.vue';
import SimulateurStepTwo from './SimulateurStepTwo.vue';
......@@ -155,9 +154,6 @@
schema: {},
}
},
mounted: function () {
this.loadSchema();
},
computed: {
formation_step_completed: function () {
return this.formation.numero != null;
......@@ -199,7 +195,13 @@
},
step_four_completed: function () {
if (this.step_three_completed) {
if (this.situation_inscrit == '1') return true;
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;
}
else if (this.situation_inscrit == '2') {
if (this.contrat == 'cdd') {
if (this.moistravailleencdd != '' && this.experience != '') return true;
......@@ -289,7 +291,9 @@
formation : this.formation
}
}
},
mounted: function () {
this.loadSchema();
},
methods: {
loadSchema: function () {
......
<template>
<div id="SimulateurExplain">
<br>
<pre> {{ this.financements }} </pre>
<div class="filter">
<span v-for="(tag, i) in this.tags" :key="i" class="filter-tags label" :class="{eligible: tagsEligibles.includes(tag), selected: selectedTags.includes(tag)}" v-on:click="setFilter(tag)">
{{tag}}
</span>
</div>
<br>
<div>
<span v-if="this.showReinitFilterButton" v-on:click="initFilter();" class="btn main-button pull-right">Réinitialiser les filtres</span>
</div>
<br>
<br>
<ul>
<li v-for="(financement, financement_id) in this.financements" :key="financement_id" class="result" :class="{hide:showFinancement(financement)}">
<br>
<h5 :class="{passed: financement.eligible, failed: !financement.eligible}" data-toggle="collapse" :data-target="'#details_'+financement_id" aria-expanded="false" aria-controls="explain" style="cursor:pointer;" >{{ financement.intitule }}
<div class="pull-right">
<label v-for="(tag, tag_id) in financement.tags" :key="tag_id" class="label">{{ tag }}</label>
</div>
</h5>
<div :id="'details_'+financement_id" class="collapse">
<p><strong>Description</strong> {{ financement.description }}</p>
<p><strong>Démarches</strong> {{ financement.demarches }}</p>
<div 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,schema) }}</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,schema) }}</p>
<p v-if="financement.fin_rff"><strong>Fin de la RFF</strong> {{ renderValue('financement.fin_rff', financement.fin_rff,schema) }}</p>
<p v-if="financement.organisme"><strong>Organisme</strong> {{ financement.organisme.nom }}</p>
</div>
<p>
<strong>Règles de gestion</strong><br><br>
<eligibilite :conditions="financement.explain" :schema="schema"/>
</p>
</div>
<br>
</li>
</ul>
</div>
</template>
<script>
import Eligibilite from './Eligibilite.vue';
export default {
name: 'SimulateurExplain',
props: ['', 'financements'],
computed : {
name: 'SimulateurExplain',
props: ['schema', 'financements', 'financements_eligibles'],
components: {
Eligibilite,
},
data : function () {
return {
tags: [],
tagsEligibles: [],
selectedTags : [],
showReinitFilterButton: [],
}
},
mounted : function () {
this.initFilter();
},
methods: {
initFilter : function () {
this.filteredFinancements = this.financements;
for (var i = 0; i < this.financements.length; i++) {
this.tags = this.tags.concat(this.financements[i]['tags']);
if(this.financements[i]['eligible']) this.tagsEligibles = this.tagsEligibles.concat(this.financements[i]['tags']);
}
if(this.tags) this.tags = [...new Set(this.tags)].sort()
if(this.tagsEligibles) this.tagsEligibles = [...new Set(this.tagsEligibles)]
this.selectedTags = this.tags
this.showReinitFilterButton=false;
},
setFilter: function (tag) {
var tag_array = [tag]
this.selectedTags=tag_array;
this.showReinitFilterButton = true;
this.filteredFinancements = this.filterFinancements(tag);
},
filterFinancements: function (tag) {
return this.financements.filter(financement => {
if (tag != "") {
//replace all accents characters in the search string by their non-accented equivalent
var searchWithoutAccents = tag.normalize('NFD').replace(/[\u0300-\u036f]/g, "")
//create a RegExp for the search string to be case-insensitive
var searchRegExp = new RegExp(searchWithoutAccents,'ig')
return this.filterable(financement.tags).match(searchRegExp);
}
return true
})
},
filterable: function (tags) {
//replace all accents characters in the search string by their non-accented equivalent
return "".concat(tags.join(",")).normalize('NFD').replace(/[\u0300-\u036f]/g, "");
},
showFinancement: function (financement) {
if (this.selectedTags != this.tags) {
console.log("hello");
for(var i = 0; i< financement.tags.length; i++) {
if (this.selectedTags.includes(financement.tags[i])) return false;
}
return true;
} else {
return !financement.eligible;
}
},
renderValue: function (key, value, schema_tmp) {
schema_tmp = schema_tmp || this.schema[key]
if (schema_tmp['type'] === 'array') return value.map(v => this.renderValue(key, v, schema_tmp['items'])).join(', ')
if (schema_tmp['type'] === "boolean") return value ? 'oui' : 'non'
if (schema_tmp['format'] === 'date') return (new Date(value * 1000)).toLocaleDateString()
if (schema_tmp['enum']) return schema_tmp === undefined ? schema_tmp['enum'][value]+' ('+value+')' : ''
return value
},
renderLabel: function (key) {
return this.schema[key]['label'].charAt(0).toUpperCase() + this.schema[key]['label'].slice(1)
}
}
}
</script>
......@@ -24,4 +139,57 @@
font-family: 'mono';
white-space: pre-wrap;
}
.results {
padding: 10px;
border-left: 1px solid #ddd;
}
.result {
border-bottom: 1px solid #eee;
}
.result.hide {
display: none;
}
.result.visible p {
display: block;
}
.result.visible {
border: 1px solid #eee;
padding: 5px;
}
.result h3 {
font-weight: normal;
}
.label {
color: white;
font-size: small;
display: inline-block;
background-color: slategray;
border-radius: 0.25em;
padding: 0.2em;
margin: 0.2em 0.2em;
cursor: pointer;
}
.filter-tags {
opacity: 0.5;
}
.selected {
opacity: 1 !important;
}
.filter .eligible {
background-color: forestgreen !important;
}
.filter .eligible {
background-color: forestgreen !important;
}
.filter .label {
background-color: crimson;
}
.failed:before {
content: '✗';
color: crimson;
}
.passed:before {
content: '✔';
color: forestgreen;
}
</style>
<template>
<div id="SimulateurResultats">
<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 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>
</div>
</div>
<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>
<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>
</div>
</div>
<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 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>
</div>
</div>
<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 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>
</div>
</div>
<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 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>
</div>
</div>
<div class="row collapse" :id="'more-explication-'+id">
<div class="col-md-12">
{{ financement.description }}
<div class="row collapse" :id="'more-explication-'+id">
<div class="col-md-12">
{{ financement.description }}
</div>
</div>
</div>
</div>
</div>
</div>
<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 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>
</div>
</div>
</div>
</div>
</div>
<hr class="simulateur-horizontal-separator">
</div>
<hr class="simulateur-horizontal-separator">
</div>
<div class="row">
<div class="col-md-4">
<span data-toggle="collapse" data-target="#scenario" aria-expanded="false" aria-controls="scenario" style="cursor:pointer;">
<button class="btn main-button-primary">Voir le scénario de simulation</button>
</span>
</div>
<div class="col-md-4">
<span data-toggle="collapse" data-target="#context" aria-expanded="false" aria-controls="context" style="cursor:pointer;">
<button class="btn main-button-primary">Voir le contexte de simulation</button>
</span>
</div>
<div class="col-md-4">
<span data-toggle="collapse" data-target="#explain" aria-expanded="false" aria-controls="explain" style="cursor:pointer;">
<button class="btn main-button-primary">Voir l'explication de simulation</button>
</span>
<div id="explainCollapseGroup">
<div class="row" id="explainButtonsGroup">
<div class="col-md-4">
<span class="ml-5" data-toggle="collapse" data-target="#scenario" aria-expanded="false" aria-controls="scenario" style="cursor:pointer;">
<button class="btn main-button-primary">Voir le scénario de simulation</button>
</span>
</div>
<div class="col-md-4">
<span class="ml-5" data-toggle="collapse" data-target="#context" aria-expanded="false" aria-controls="context" style="cursor:pointer;">
<button class="btn main-button-primary">Voir le contexte de simulation</button>
</span>
</div>
<div class="col-md-4">
<span class="ml-5" data-toggle="collapse" data-target="#explain" aria-expanded="false" aria-controls="explain" style="cursor:pointer;">
<button class="btn main-button-primary">Voir l'explication de simulation</button>
</span>
</div>
</div>
<div class="row">
<div id="scenario" class="collapse">
<div class="row">
<div class="col-md-12">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="scenario" data-parent="#explainCollapseGroup" class="collapse">
<SimulateurScenario :scenario="scenario"></SimulateurScenario>
</div>
</div>
</div>
<div id="context" class="collapse">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div id="context" data-parent="#explainCollapseGroup" class="collapse">
<SimulateurContext :schema="schema" :context="context"></SimulateurContext>
</div>
</div>
</div>
<div id="explain" class="collapse">
<div class="row">
<div class="col-md-12">
<SimulateurExplain :financements="financements"></SimulateurExplain>
<div class="row">
<div class="col-md-12">
<div id="explain" data-parent="#explainCollapseGroup" class="collapse">
<SimulateurExplain :schema="schema" :financements="financements"></SimulateurExplain>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -154,3 +157,15 @@
}
</script>
<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>
<template>
<div id="SimulateurScenario">
<br>
<pre v-html="this.transformed_scenario"/>
</div>
</template>
<script>
export default {
name: 'SimulateurScenario',
props: ['', 'scenario'],
computed : {