layout for form

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue

@@ -1,55 +1,125 @@
 <template>
-  <h1>{{ $t('create_work') }}</h1>
 
-  <div v-for="si in socialIssues">
-    <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"> {{ si.title.fr }}
-  </div>
+  <h2>{{ $t('pick_social_issue') }}</h2>
 
-  <div v-if="hasSocialIssuePicked">
-    <h2>{{ $t('pick_an_action') }}</h2>
 
-    <vue-multiselect
-      v-model="socialActionPicked"
-      label="text"
-      :options="socialActionsReachables"
-      :searchable="true"
-      :close-on-select="true"
-      :show-labels="true"
-      track-by="id"
-    ></vue-multiselect> 
-  </div>
+  <div id="awc_create_form">
 
-  <div v-if="isLoadingSocialActions">
-    <p>spinner</p>
-  </div>
+    <div id="picking">
+      <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
+        
+      <div v-for="si in socialIssues">
+        <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"> {{ si.title.fr }}
+      </div>
 
-  <div v-if="hasSocialActionPicked">
-    <p><label>{{ $t('start_date') }}</label> <input type="date" v-model="startDate" /></p>
-    <p><label>{{ $t('end_date') }}</label> <input type="date" v-model="endDate" /></p>
-  </div>
+      <div v-if="hasSocialIssuePicked">
+        <h2>{{ $t('pick_an_action') }}</h2>
 
-  <div >
-    <ul class="record_actions">
-      <li class="cancel">
-        <a href="#" class="sc-button bt-cancel">
-          {{ $t('Cancel') }}
-        </a>
-      </li>
-      <li v-if="hasSocialActionPicked">
-        <button class="sc-button bt-save" @click="submit">
-          {{ $t('Save') }}
-        </button>
-      </li>
-    </ul>
+        <vue-multiselect
+          v-model="socialActionPicked"
+          label="text"
+          :options="socialActionsReachables"
+          :searchable="true"
+          :close-on-select="true"
+          :show-labels="true"
+          track-by="id"
+        ></vue-multiselect> 
+      </div>
+
+      <div v-if="isLoadingSocialActions">
+        <p>spinner</p>
+      </div>
+    </div>
+
+    <div v-if="hasSocialActionPicked" id="start_date">
+      <p><label>{{ $t('startDate') }}</label> <input type="date" v-model="startDate" /></p>
+    </div>
+
+    <div v-if="hasSocialActionPicked" id="end_date">
+      <p><label>{{ $t('endDate') }}</label> <input type="date" v-model="endDate" /></p>
+    </div>
+
+    <div id="confirm">
+      <div v-if="hasErrors">
+        <p>{{ $t('form_has_errors') }}</p>
+
+        <ul>
+          <li v-for="e in errors">
+            {{ e }}
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <ul class="record_actions">
+          <li class="cancel">
+            <a href="#" class="sc-button bt-cancel">
+              {{ $t('action.cancel') }}
+            </a>
+          </li>
+          <li v-if="hasSocialActionPicked">
+            <button class="sc-button bt-save" v-show="!isPostingWork" @click="submit">
+              {{ $t('action.save') }}
+            </button>
+            <button class="sc-button bt-save" v-show="isPostingWork" disabled>
+              {{ $t('Save') }}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 
 </template>
 
+<style lang="scss">
+
+#awc_create_form {
+  display: grid;
+  grid-template-areas: 
+    "picking picking"
+    "start_date end_date"
+    "confirm confirm"
+    ;
+  grid-template-columns: 50% 50%;
+  column-gap: 1.5rem;
+
+  #picking {
+    grid-area: picking;
+  }
+
+  #start_date {
+    grid-area: start_date;
+  }
+
+  #end_date {
+    grid-area: end_date;
+  }
+
+  #confirm {
+    grid-area: confirm;
+  }
+}
+</style>
 
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import VueMultiselect from 'vue-multiselect';
-import { dateToISO } from 'ChillMainAssets/js/date.js';
+import { dateToISO, ISOToDate } from 'ChillMainAssets/js/date.js';
+
+const i18n = {
+  messages: {
+    fr: {
+      startDate: "Date de début",
+      endDate: "Date de fin",
+      form_has_errors: "Le formulaire comporte des erreurs",
+      pick_social_issue: "Choisir une problématique sociale",
+      pick_an_action: "Choisir une action d'accompagnement",
+      pick_social_issue_linked_with_action: "Indiquez la problématique sociale liée à l'action d'accompagnement",
+
+    }
+  }
+}
 
 export default {
   name: 'App',
@@ -61,15 +131,19 @@ export default {
       this.$store.dispatch('submit');
     }
   },
+  i18n,
   computed: {
     ...mapState([
       'socialIssues',
       'socialActionsReachables',
+      'errors',
     ]),
     ...mapGetters([
       'hasSocialIssuePicked',
       'hasSocialActionPicked',
       'isLoadingSocialActions',
+      'isPostingWork',
+      'hasErrors',
     ]),
     socialIssuePicked: {
       get() {
@@ -104,10 +178,10 @@ export default {
     },
     endDate: {
       get() {
-        return this.$store.state.endDate;
+        return dateToISO(this.$store.state.endDate);
       },
       set(value) {
-        this.$store.commit('setEndDate', value);
+        this.$store.commit('setEndDate', ISOToDate(value));
       }
     },
   }