Skip to content

GitLab

S
Simulateur Clara
Commit 0b12088b authored by Rémy Marronnier's avatar Rémy Marronnier
Browse files
Options

styling wip

parent 27584daa
Hide whitespace changes
Inline Side-by-side
Showing with 255 additions and 122 deletions
src/router.js
View file @ 0b12088b
......@@ -15,7 +15,7 @@ Vue.use(Router)
export default new Router({
// https://alligator.io/vuejs/vue-router-modify-head/ to change title and metadata
routes: [
{
path: '/',
......
src/store/modules/situation.js
View file @ 0b12088b
......@@ -5,6 +5,7 @@ export default {
changed: false,
disabled: false,
spectacle: false,
manager: false,
diploma: "",
inscription_period: "",
allocation_type: "",
......@@ -25,6 +26,9 @@ export default {
updateSpectacle(state, spectacle) {
state.spectacle = spectacle
},
updateManager(state, manager) {
state.manager = manager
},
updateDiploma(state, diploma) {
state.diploma = diploma
},
......@@ -145,6 +149,20 @@ export default {
//dispatch('getUncertain') ???
//this.$router.push('results')
},
submitManager({ commit, state }, manager) {
if (manager != state.manager) {
commit('updateManager', manager)
commit('updateChanged', true)
}
//if (state.filters.length == 0) { put those actions in the result component when loaded.
// dispatch('getFilters')
// //}
// dispatch('getResults')
// dispatch('getEligible')
// dispatch('getNonEligible')
//dispatch('getUncertain') ???
//this.$router.push('results')
},
},
getters: {
......@@ -152,6 +170,7 @@ export default {
changed: state => state.changed,
disabled: state => state.disabled,
spectacle: state => state.spectacle,
manager: state => state.manager,
diploma: state => state.diploma,
inscription_period: state => state.inscription_period,
allocation_type: state => state.allocation_type,
......
src/views/Questions.vue
View file @ 0b12088b
......@@ -11,4 +11,17 @@ export default {
</script>
<style>
.v-input--selection-controls.v-input .v-label {
color: black;
font-size: 24px;
margin-top: 15px;
margin-bottom: 15px;
}
.v-text-field {
font-size: 24px;
}
v-card-title {
justify-content: center;
}
</style>
\ No newline at end of file
src/views/questions/ARE.vue
View file @ 0b12088b
<template>
<v-form @submit.prevent="submitARE" ref="formARE" v-model="validity" :lazy-validation="lazy">
Quel est le montant de cette allocation ?
<v-text-field
v-model.number="monthly_allocation_value"
autofocus
required
:rules="rules"
min="0"
type="number"
label="Montant par mois"
></v-text-field>
<v-btn @click="back">Revenir</v-btn>
<v-btn v-bind:disabled="!validity" type="submit">Continuer</v-btn>
</v-form>
<v-card align="center">
<v-form @submit.prevent="submitARE" ref="formARE" v-model="validity" :lazy-validation="lazy">
Quel est le montant de cette allocation ?
<v-text-field
v-model.number="monthly_allocation_value"
autofocus
required
:rules="rules"
min="0"
type="number"
label="Montant par mois"
></v-text-field>
<v-btn x-large class="ma-2" color="#96a8b2" @click="back">Revenir</v-btn>
<v-btn
x-large
class="ma-2"
color="secondary"
v-bind:disabled="!validity"
type="submit"
>Continuer</v-btn>
</v-form>
</v-card>
</template>
<script>
......
src/views/questions/Address.vue
View file @ 0b12088b
......@@ -6,7 +6,7 @@
<v-row>
<v-col cols="12" md="8">
<v-autocomplete
max-width="200px"
width="200px"
v-model="address"
:items="items"
:loading="isLoading"
......
src/views/questions/Age.vue
View file @ 0b12088b
<template>
<v-form @submit.prevent="submitAge" ref="formAge" v-model="validity" :lazy-validation="lazy">
Quel est votre âge ?
<v-text-field
required
autofocus
v-model.number="age"
type="number"
min="0"
:rules="[rules.min]"
></v-text-field>
<v-btn @click="back">Revenir</v-btn>
<v-btn v-bind:disabled="!validity" type="submit">Continuer</v-btn>
</v-form>
<v-card align="center">
<v-card-title class="display-1">Quel est votre âge ?</v-card-title>
<v-form @submit.prevent="submitAge" ref="formAge" v-model="validity" :lazy-validation="lazy">
<v-text-field
required
autofocus
outlined
color="black"
v-model.number="age"
type="number"
min="0"
max="99"
:rules="[rules.min, rules.max]"
></v-text-field>
<v-btn x-large class="ma-6" color="#96a8b2" @click="back">Revenir</v-btn>
<v-btn
x-large
class="ma-6"
color="secondary"
v-bind:disabled="!validity"
type="submit"
>Continuer</v-btn>
</v-form>
</v-card>
</template>
<script>
......@@ -24,7 +36,8 @@ export default {
age: 0,
validity: false,
rules: {
min: v => v >= 16 || "doit être supérieur ou égal à 16"
min: v => v >= 16 || "doit être supérieur ou égal à 16",
max: v => v <= 100 || "doit être inférieur ou égal à 100"
}
}),
methods: {
......
src/views/questions/Allocation.vue
View file @ 0b12088b
<template>
<v-form @submit.prevent="submitAllocation" ref="formAllocation" v-model="validity">
Quelle allocation percevez-vous actuellement ?
<v-row>
<v-col>
<v-radio-group required :rules="rules" v-model="allocation_type">
<v-radio autofocus label="Une prestation d’assurance chômage : ARE / ASP" value="ARE_ASP"></v-radio>
<v-radio
label="Une prestation de solidarité : ASS / AER / APS / AS-FNE"
value="ASS_AER_ATA_APS_ASFNE"
></v-radio>
<v-radio
label="Une autre indemnité parmi les suivantes : RPS / RFPE / RFF / pension de retraite"
value="RPS_RFPA_RFF_PENSION"
></v-radio>
<v-radio label="Le RSA" value="RSA"></v-radio>
<v-radio label="L’AAH" value="AAH"></v-radio>
<v-radio label="Je ne suis pas indemnisé•e" value="none"></v-radio>
</v-radio-group>
</v-col>
<v-col>
<v-card color="secondary">
<v-list class="overflow-y-auto" max-height="400" flat color="lime lighten-4">
<v-subheader>Aide : Liste complète des allocations</v-subheader>
<v-list-item-group v-model="allocations" color="primary">
<v-list-item v-for="i in allocations" :key="i">
<v-list-item-content>
<v-list-item-title v-text="i"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
</v-col>
</v-row>
<v-btn @click="back">Revenir</v-btn>
<v-btn v-bind:disabled="!validity" type="submit">Continuer</v-btn>
</v-form>
<v-card align="center">
<v-form @submit.prevent="submitAllocation" ref="formAllocation" v-model="validity">
Quelle allocation percevez-vous actuellement ?
<v-row>
<v-col>
<v-radio-group required :rules="rules" v-model="allocation_type">
<v-radio
autofocus
label="Une prestation d’assurance chômage : ARE / ASP"
value="ARE_ASP"
></v-radio>
<v-radio
label="Une prestation de solidarité : ASS / AER / APS / AS-FNE"
value="ASS_AER_ATA_APS_ASFNE"
></v-radio>
<v-radio
label="Une autre indemnité parmi les suivantes : RPS / RFPE / RFF / pension de retraite"
value="RPS_RFPA_RFF_PENSION"
></v-radio>
<v-radio label="Le RSA" value="RSA"></v-radio>
<v-radio label="L’AAH" value="AAH"></v-radio>
<v-radio label="Je ne suis pas indemnisé•e" value="none"></v-radio>
</v-radio-group>
</v-col>
<v-col>
<v-card color="secondary">
<v-list class="overflow-y-auto" max-height="400" flat color="lime lighten-4">
<v-subheader>Aide : Liste complète des allocations</v-subheader>
<v-list-item-group v-model="allocations" color="primary">
<v-list-item v-for="i in allocations" :key="i">
<v-list-item-content>
<v-list-item-title v-text="i"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
</v-col>
</v-row>
<v-btn x-large class="ma-2" color="#96a8b2" @click="back">Revenir</v-btn>
<v-btn
x-large
class="ma-2"
color="secondary"
v-bind:disabled="!validity"
type="submit"
>Continuer</v-btn>
</v-form>
</v-card>
</template>
<script>
......
src/views/questions/Category.vue
View file @ 0b12088b
<template>
<v-form @submit.prevent="submitCategory" ref="formCategory" v-model="validity">
Êtes-vous actuellement dans l'une des situations suivantes ?
<v-radio-group required :rules="rules" v-model="category">
<v-radio autofocus value="categories_12345">
<template v-slot:label>
<ul>
<li>En activité à temps complet (hors contrat aidé)</li>
<li>En création d'entreprise</li>
<li>En arrêt maladie</li>
<li>En congé maternité ou congé parental</li>
<li>En formation autre que formation professionnelle</li>
</ul>
</template>
</v-radio>
<v-radio label="Je ne suis dans aucune de ces situations" value="other_categorie"></v-radio>
</v-radio-group>
<v-btn @click="back">Revenir</v-btn>
<v-btn v-bind:disabled="!validity" type="submit">Continuer</v-btn>
</v-form>
<v-card align="center">
<v-form @submit.prevent="submitCategory" ref="formCategory" v-model="validity">
Êtes-vous actuellement dans l'une des situations suivantes ?
<v-radio-group required :rules="rules" v-model="category">
<v-radio autofocus value="categories_12345">
<template v-slot:label>
<ul>
<li>En activité à temps complet (hors contrat aidé)</li>
<li>En création d'entreprise</li>
<li>En arrêt maladie</li>
<li>En congé maternité ou congé parental</li>
<li>En formation autre que formation professionnelle</li>
</ul>
</template>
</v-radio>
<v-radio label="Je ne suis dans aucune de ces situations" value="other_categorie"></v-radio>
</v-radio-group>
<v-btn x-large class="ma-2" color="#96a8b2" @click="back">Revenir</v-btn>
<v-btn
x-large
class="ma-2"
color="secondary"
v-bind:disabled="!validity"
type="submit"
>Continuer</v-btn>
</v-form>
</v-card>
</template>
<script>
......@@ -50,4 +58,12 @@ export default {
</script>
<style>
ul {
list-style-type: none;
border-left: 4px grey solid;
}
li {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
\ No newline at end of file
src/views/questions/Grade.vue
View file @ 0b12088b
<template>
<v-form @submit.prevent="submitDiploma" ref="formGrade" v-model="validity">
Quel est le diplôme le plus élevé que vous ayez obtenu ?
<v-radio-group required :rules="rules" v-model="diploma">
<v-radio autofocus label="Bac +4 et + (Master) / diplômes d’ingénieur" value="level_1"></v-radio>
<v-radio label="Bac +3 (Licence)" value="level_2"></v-radio>
<v-radio label="Bac +1 à bac +2 (BTS / DUT)" value="level_3"></v-radio>
<v-radio label="Bac" value="level_4"></v-radio>
<v-radio label="CAP / BEP" value="level_5"></v-radio>
<v-radio label="Je n'ai aucun de ces diplômes" value="level_bellow_5"></v-radio>
</v-radio-group>
<v-btn @click="back">Revenir</v-btn>
<v-btn v-bind:disabled="!validity" type="submit">Continuer</v-btn>
</v-form>
<v-card align="center">
<v-form @submit.prevent="submitDiploma" ref="formGrade" v-model="validity">
Quel est le diplôme le plus élevé que vous ayez obtenu ?
<v-radio-group required :rules="rules" v-model="diploma">
<v-radio autofocus label="Bac +4 et + (Master) / diplômes d’ingénieur" value="level_1"></v-radio>
<v-radio label="Bac +3 (Licence)" value="level_2"></v-radio>
<v-radio label="Bac +1 à bac +2 (BTS / DUT)" value="level_3"></v-radio>
<v-radio label="Bac" value="level_4"></v-radio>
<v-radio label="CAP / BEP" value="level_5"></v-radio>
<v-radio label="Je n'ai aucun de ces diplômes" value="level_bellow_5"></v-radio>
</v-radio-group>
<v-btn x-large class="ma-2" color="#96a8b2" @click="back">Revenir</v-btn>
<v-btn
x-large
class="ma-2"
color="secondary"
v-bind:disabled="!validity"
type="submit"
>Continuer</v-btn>
</v-form>
</v-card>
</template>
<script>
......
src/views/questions/Inscription.vue
View file @ 0b12088b
<template>
<v-form @submit.prevent="submitInscription" ref="formInscription" v-model="validity">
Depuis combien de temps êtes-vous inscrit•e à Pôle emploi ?
<v-radio-group required :rules="rules" v-model="inscription">
<v-radio label="Je ne suis pas inscrit.e" value="not_registred"></v-radio>
<v-radio label="Moins d'un an" value="less_than_year"></v-radio>
<v-radio label="Plus d'un an" value="more_than_a_year"></v-radio>
</v-radio-group>
<v-btn @click="back">Revenir</v-btn>
<v-btn v-bind:disabled="!validity" type="submit">Continuer</v-btn>
</v-form>
<v-card align="center">
<v-card-title class="display-1">Depuis combien de temps êtes-vous inscrit•e à Pôle emploi ?</v-card-title>
<v-form @submit.prevent="submitInscription" ref="formInscription" v-model="validity">
<v-radio-group required :rules="rules" v-model="inscription">
<v-radio label="Je ne suis pas inscrit.e" value="not_registred"></v-radio>
<v-radio label="Moins d'un an" value="less_than_year"></v-radio>
<v-radio label="Plus d'un an" value="more_than_a_year"></v-radio>
</v-radio-group>
<v-btn x-large class="ma-10" color="#96a8b2" @click="back">Revenir</v-btn>
<v-btn
x-large
class="ma-10"
color="secondary"
v-bind:disabled="!validity"
type="submit"
>Continuer</v-btn>
</v-form>
</v-card>
</template>
<script>
......
src/views/questions/Other.vue
View file @ 0b12088b
<template>
<v-form @submit.prevent="submitOther" ref="formOther" v-model="validity">
Êtes-vous dans l'une des situations suivantes ?
Cochez la ou les situations correspondantes
<v-checkbox autofocus v-model="spectacle" label="Artiste ou technicien•ne du spectacle"></v-checkbox>
<v-checkbox
v-model="disabled"
label="Bénéficiaire de l'obligation d'emploi (reconnu•e en situation de handicap)"
></v-checkbox>
<v-checkbox label="Cadre et/ou en recherche d'un poste d'encadrement"></v-checkbox>
<v-checkbox label="Je ne suis dans aucune de ces situations"></v-checkbox>
<v-btn @click="back">Revenir</v-btn>
<v-btn v-bind:disabled="!validity" type="submit">Continuer</v-btn>
</v-form>
<v-card align="center">
<v-form @submit.prevent="submitOther" ref="formOther" v-model="validity">
Êtes-vous dans l'une des situations suivantes ?
Cochez la ou les situations correspondantes
<v-checkbox autofocus v-model="spectacle" label="Artiste ou technicien•ne du spectacle"></v-checkbox>
<v-checkbox
v-model="disabled"
label="Bénéficiaire de l'obligation d'emploi (reconnu•e en situation de handicap)"
></v-checkbox>
<v-checkbox v-model="manager" label="Cadre et/ou en recherche d'un poste d'encadrement"></v-checkbox>
<v-checkbox v-model="none" label="Je ne suis dans aucune de ces situations"></v-checkbox>
<v-btn x-large class="ma-2" color="#96a8b2" @click="back">Revenir</v-btn>
<v-btn
x-large
class="ma-2"
color="secondary"
v-bind:disabled="!validity"
type="submit"
>Continuer</v-btn>
</v-form>
</v-card>
</template>
<script>
......@@ -24,10 +32,13 @@ export default {
data: () => ({
spectacle: false,
disabled: false,
manager: false,
none: false,
validity: false,
rules: [v => !!v || "doit être renseignée"]
}),
methods: {
onlyMe() {},
validate() {
if (this.$refs.formOther.validate()) {
this.validity = true;
......@@ -40,9 +51,34 @@ export default {
this.validate();
this.$store.dispatch("submitDisabled", this.disabled);
this.$store.dispatch("submitSpectacle", this.spectacle);
this.$store.dispatch("submitManager", this.manager);
// if choice != non inscrit
this.$router.push({ path: "/resultats" });
}
},
watch: {
spectacle: function(val) {
if (val) {
this.none = !val;
}
},
disabled: function(val) {
if (val) {
this.none = !val;
}
},
manager: function(val) {
if (val) {
this.none = !val;
}
},
none: function(val) {
if (val) {
this.spectacle = !val;
this.disabled = !val;
this.manager = !val;
}
}
}
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment