layout form

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

@@ -1,10 +1,8 @@
 <template>
-  <h1>Hello</h1>
-
   <div id="workEditor">
     <div id="title">
-      <label>{{ $t('action_title') }}</label>
-      <p>{{ work.socialAction.text }}</p>
+      <label class="action_title_label">{{ $t('action_title') }}</label>
+      <p class="action_title">{{ work.socialAction.text }}</p>
     </div>
     <div id="startDate">
       <label>{{ $t('startDate') }}</label>
@@ -15,6 +13,7 @@
       <input type="date" v-model="endDate" />
     </div>
     <div id="comment">
+      <label>Commentaire</label>
       <ckeditor 
         :editor="editor"
         v-model="note"
@@ -23,13 +22,13 @@
     </div>
     <div id="objectives" class="objectives_list">
       <div class="title" aria="hidden">
-        <div><h3>Objectifs</h3></div>
-        <div><h3>Résultats</h3></div>
+        <div><h3>Motifs - objectifs - dispositifs</h3></div>
+        <div><h3>Orientations - résultats</h3></div>
       </div>
 
       <!-- results which are not attached to an objective -->
       <div v-if="hasResultsForAction">
-        <div>
+        <div class="results_without_objective">
           {{ $t('results_without_objective') }}
         </div>
         <div>
@@ -40,10 +39,10 @@
       <!-- results which **are** attached to an objective -->
       <div v-for="g in goalsPicked">
         <div>
-          <span @click="removeGoal(g)">
+          <div @click="removeGoal(g)" class="objective-title">
             <i class="fa fa-times"></i>
             {{ g.title.fr }}
-          </span> 
+          </div> 
         </div>
         <div>
           <add-result destination="goal" :goal="g"></add-result>  
@@ -54,17 +53,23 @@
       <div class="add_goal">
         <div>
           <div v-if="showAddObjective">
-            <ul>
-              <li v-for="g in availableForCheckGoal" @click="addGoal(g)">
+
+            <p>Motifs, objectifs et dispositifs disponibles pour ajout&nbsp;:</p>
+
+            <ul class="list-objectives">
+              <li v-for="g in availableForCheckGoal" @click="addGoal(g)" class="badge badge-primary">
                 <i class="fa fa-plus"></i>
                 {{ g.title.fr }} 
               </li>
             </ul>
           </div>
-          <div @click="toggleAddObjective">
-            <i class="fa fa-plus"></i>
-            {{ $t('add_objective') }}
-          </div>
+          <ul class="record_actions">
+            <li>
+              <button @click="toggleAddObjective" class="sc-button bt-create">
+                Ajouter un objectif
+              </button>
+            </li>
+          </ul>
         </div>
         <div><!-- empty for results --></div>
       </div>
@@ -140,18 +145,18 @@
         </ul>
       </div>
 
-      <ul class="record_actions">
-        <li>
-          <add-persons
-             buttonTitle="Ajouter des tiers"
-             modalTitle="Choisir des tiers"
-             v-bind:key="thirdPartyPicker.key"
-             v-bind:options="thirdPartyPicker.options"
-             @addNewPersons="addThirdParties"
-             ref="thirdPartyPicker"> <!-- to cast child method -->
-          </add-persons>
-        </li>
-      </ul>
+        <ul class="record_actions">
+          <li>
+            <add-persons
+               buttonTitle="Ajouter des tiers"
+               modalTitle="Choisir des tiers"
+               v-bind:key="thirdPartyPicker.key"
+               v-bind:options="thirdPartyPicker.options"
+               @addNewPersons="addThirdParties"
+               ref="thirdPartyPicker"> <!-- to cast child method -->
+            </add-persons>
+          </li>
+        </ul>
     </div>
   </div>
 
@@ -168,11 +173,23 @@
     "objectives objectives"
     "persons persons"
     "handling handling"
-    "3parties 3parties"
+    "tparties tparties"
     ;
+
+  grid-template-columns: 50%;
+  column-gap: 1rem;
   
   #title {
     grid-area: title;
+
+    .action_title_label {
+      margin-bottom: 0;
+    }
+    .action_title {
+      margin-top: 0;
+      font-weight: bold;
+      font-size: 1.5rem;
+    }
   }
   #startDate {
     grid-area: startDate;
@@ -186,10 +203,19 @@
   #objectives {
     grid-area: objectives;
 
+    > div.title {
+      background-color: var(--chill-light-gray);
+      color: white;
+
+      h3 {
+        text-align: center;
+      }
+    }
+
     > div {
       display: grid;
       grid-template-areas: "obj res";
-      grid-template-columns: "50% 50%";
+      grid-template-columns: 50%;
       column-gap: 1rem;
 
       > div {
@@ -201,6 +227,61 @@
           grid-area: res;
         }
       }
+
+      > div.results_without_objective {
+        background: repeating-linear-gradient(
+        45deg,
+        var(--chill-light-gray),
+        var(--chill-light-gray) 10px,
+        var(--chill-llight-gray) 10px,
+        var(--chill-llight-gray) 20px
+      );
+
+        text-align: center;
+        font-weight: 700;
+        padding-top: 1.5rem;
+      }
+    }
+
+    ul.list-objectives {
+      list-style-type: none;
+      padding: 0;
+
+      li {
+        margin: 0.5rem;
+      }
+    }
+
+    div.objective-title {
+      margin-top: 1rem;
+      font-size: 1.5rem;
+      font-weight: bold;
+      text-align: center;
+
+
+      i.fa {
+        padding: 0.25rem;
+      }
+
+      i.fa-times {
+        background-color: red;
+        color: white;
+      }
+    }
+
+    li.badge, div.badge {
+      padding-bottom: 0;
+      padding-top: 0;
+      padding-left: 0;
+
+      i.fa {
+        padding: 0.25rem;
+      }
+
+      i.fa-plus {
+        background-color: green;
+      }
+
     }
   }
   #persons {
@@ -210,7 +291,7 @@
     grid-area: handling;
   }
   #thirdParties {
-    grid-area: 3parties;
+    grid-area: tparties;
   }
 }
 
@@ -227,6 +308,19 @@ import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import ShowAddress from 'ChillMainAssets/vuejs/_components/ShowAddress.vue';
 
+const i18n = {
+  messages: {
+    fr: {
+      action_title: "Action d'accompagnement",
+      startDate: "Date de début",
+      endDate: "Date de fin",
+      results_without_objective: "Résultats sans objectifs",
+      add_objectif: "Ajouter un motif - objectif - dispositif",
+      persons_involved: "Usagers concernés", 
+    }
+}
+};
+
 export default {
   name: 'App',
   components: {
@@ -236,6 +330,7 @@ export default {
     Person,
     ShowAddress,
   },
+  i18n,
   data() {
     return {
       editor: ClassicEditor,

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/_components/AddResult.vue

@@ -1,37 +1,93 @@
 <template>
   <div class="addResult" v-if="hasResult">
-    <ul>
-      <li v-for="r in pickedResults" @click="removeResult(r)">
+    <p class="chill-no-data-statement" v-if="pickedResults.length ===0">
+      Aucun résultat associé
+    </p>
+    <ul class="list-results">
+      <li v-for="r in pickedResults" @click="removeResult(r)" class="badge badge-primary">
         <i class="fa fa-times"></i>
         {{ r.title.fr }}
       </li>
-    </ul>
-    <div v-if="isExpanded">
-      <p>pick result</p>
-
-      <ul>
-        <li v-for="r in availableForCheckResults" @click="addResult(r)">
+      <template v-if="isExpanded">
+        <li v-for="r in availableForCheckResults" @click="addResult(r)" class="badge badge-primary">
           <i class="fa fa-plus"></i>
           {{ r.title.fr }}
         </li>
-      </ul>
-    </div>
-    <button @click="toggleSelect">
-      {{ $t('add_a_result') }}
-    </button>
+      </template>
+    </ul>
+    <ul class="record_actions">
+      <li v-if="isExpanded">
+        <button @click="toggleSelect" class="sc-button bt-hide" >
+          <i class="fa fa-eye-slash"></i>
+          Masquer résultats et orientations disponibles
+        </button>
+      </li>
+      <li v-else>
+        <button @click="toggleSelect" class="sc-button bt-show">
+          Afficher résultats et orientations disponibles
+        </button>
+      </li>
+    </ul>
   </div>
   <div class="noResult" v-if="!hasResult">
-    <div>
+    <div class="chill-no-data-statement">
       {{ $t('goal_has_ho_result') }}
     </div>
   </div>
 </template>
 
+<style lang="scss">
+
+button.hide {
+  background-color: rgb(51, 77, 92);
+}
+
+ul.list-results {
+  list-style-type: none;
+  padding: 0;
+
+  li {
+    margin: 0.5rem;
+  }
+
+  li.badge {
+    padding-bottom: 0;
+    padding-top: 0;
+    padding-left: 0;
+
+    i.fa {
+      /*border-radius: 0.25rem; */
+      padding: 0.25rem;
+    }
+
+    i.fa-plus {
+      background-color: green;
+    }
+
+    i.fa-times {
+      background-color: red;
+      color: white;
+    }
+  }
+}
+
+</style>
+
 <script>
 
+const i18n = {
+  messages: {
+    fr: {
+      add_a_result: "Résultat - orientation disponibles",
+      goal_has_no_result: "Aucun résultat - orientation disponible",
+    }
+  }
+};
+
 export default {
   name: "AddResult",
   props: [ 'destination', 'goal' ],
+  i18n,
   data() {
     return {
       isExpanded: false,

src/Bundle/ChillPersonBundle/translations/messages.fr.yml

@@ -330,6 +330,10 @@ Move household: Nouveau déménagement
 Addresses history for household: Historique des adresses
 
 # accompanying course work
+Accompanying Course Actions: Actions d'accompagnements
 accompanying_course_work:
+    create: Créer une action
     Create accompanying course work: Créer une action d'accompagnement
+    Edit accompanying course work: Modifier une action d'accompagnement
+    List accompanying course work: Liste des actions d'accompagnement