From 0b12088bc6be2e1fe9813f6daf3d52dab7702d4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Marronnier?= <rmarronnier@gmail.com>
Date: Tue, 24 Dec 2019 14:40:59 +0100
Subject: [PATCH] styling wip

---
 src/router.js                       |  2 +-
 src/store/modules/situation.js      | 19 +++++++
 src/views/Questions.vue             | 13 +++++
 src/views/questions/ARE.vue         | 36 +++++++-----
 src/views/questions/Address.vue     |  2 +-
 src/views/questions/Age.vue         | 41 +++++++++-----
 src/views/questions/Allocation.vue  | 86 ++++++++++++++++-------------
 src/views/questions/Category.vue    | 54 +++++++++++-------
 src/views/questions/Grade.vue       | 34 +++++++-----
 src/views/questions/Inscription.vue | 28 ++++++----
 src/views/questions/Other.vue       | 62 ++++++++++++++++-----
 11 files changed, 255 insertions(+), 122 deletions(-)

diff --git a/src/router.js b/src/router.js
index c898c05..52ab5fe 100644
--- a/src/router.js
+++ b/src/router.js
@@ -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: '/',
diff --git a/src/store/modules/situation.js b/src/store/modules/situation.js
index 7f86d90..a8a7eff 100644
--- a/src/store/modules/situation.js
+++ b/src/store/modules/situation.js
@@ -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,
diff --git a/src/views/Questions.vue b/src/views/Questions.vue
index 62a9ebb..24e50dd 100644
--- a/src/views/Questions.vue
+++ b/src/views/Questions.vue
@@ -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
diff --git a/src/views/questions/ARE.vue b/src/views/questions/ARE.vue
index 0b0db8f..585e370 100644
--- a/src/views/questions/ARE.vue
+++ b/src/views/questions/ARE.vue
@@ -1,18 +1,26 @@
  <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>
diff --git a/src/views/questions/Address.vue b/src/views/questions/Address.vue
index 36bba04..b9b698b 100644
--- a/src/views/questions/Address.vue
+++ b/src/views/questions/Address.vue
@@ -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"
diff --git a/src/views/questions/Age.vue b/src/views/questions/Age.vue
index bd25042..e73043c 100644
--- a/src/views/questions/Age.vue
+++ b/src/views/questions/Age.vue
@@ -1,17 +1,29 @@
  <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: {
diff --git a/src/views/questions/Allocation.vue b/src/views/questions/Allocation.vue
index 1458b49..b3195fd 100644
--- a/src/views/questions/Allocation.vue
+++ b/src/views/questions/Allocation.vue
@@ -1,41 +1,53 @@
  <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>
diff --git a/src/views/questions/Category.vue b/src/views/questions/Category.vue
index e968a57..062eceb 100644
--- a/src/views/questions/Category.vue
+++ b/src/views/questions/Category.vue
@@ -1,23 +1,31 @@
  <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
diff --git a/src/views/questions/Grade.vue b/src/views/questions/Grade.vue
index e4cf495..5a5d1ee 100644
--- a/src/views/questions/Grade.vue
+++ b/src/views/questions/Grade.vue
@@ -1,17 +1,25 @@
  <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>
diff --git a/src/views/questions/Inscription.vue b/src/views/questions/Inscription.vue
index 7fe09e8..7efd193 100644
--- a/src/views/questions/Inscription.vue
+++ b/src/views/questions/Inscription.vue
@@ -1,14 +1,22 @@
  <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>
diff --git a/src/views/questions/Other.vue b/src/views/questions/Other.vue
index c9fbb88..1ffecfd 100644
--- a/src/views/questions/Other.vue
+++ b/src/views/questions/Other.vue
@@ -1,17 +1,25 @@
  <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>
-- 
GitLab