From 14c0c9763fe4fafe9c09f25d721c4de3ab046ca1 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Wed, 11 Aug 2021 14:06:38 +0200
Subject: [PATCH] fix styles flashbag and action-row

---
 .../vuejs/AccompanyingCourseWorkEdit/App.vue  | 202 +++++++++---------
 .../components/AddEvaluation.vue              |  47 ++--
 2 files changed, 124 insertions(+), 125 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
index c82b99d6e..a97fb9da6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -1,22 +1,22 @@
 <template>
    <div id="workEditor" class="my-4">
 
-      <div id="title" class="action-title">
+      <div id="title" class="action-row">
          <label>{{ $t('action_title') }}</label>
          <p>{{ work.socialAction.text }}</p>
       </div>
 
-      <div id="startDate">
+      <div id="startDate" class="action-row">
          <label>{{ $t('startDate') }}</label>
          <input v-model="startDate" type="date"/>
       </div>
 
-      <div id="endDate">
+      <div id="endDate" class="action-row">
          <label>{{ $t('endDate') }}</label>
          <input v-model="endDate" type="date"/>
       </div>
 
-      <div id="comment">
+      <div id="comment" class="action-row">
          <label>{{ $t('comments') }}</label>
          <ckeditor
             v-model="note"
@@ -25,7 +25,7 @@
          ></ckeditor>
       </div>
 
-      <div id="objectives">
+      <div id="objectives" class="action-row">
          <div aria="hidden" class="title">
             <div><h3>{{ $t('goals_title') }}</h3></div>
             <div><h3>{{ $t('results_title') }}</h3></div>
@@ -79,7 +79,7 @@
          </div>
       </div>
 
-      <div id="evaluations">
+      <div id="evaluations" class="action-row">
          <div aria="hidden" class="title">
             <div><h3>{{ $t('Evaluations') }}</h3></div>
          </div>
@@ -106,7 +106,7 @@
          </div>
       </div>
 
-      <div id="persons">
+      <div id="persons" class="action-row">
          <h3>{{ $t('persons_involved') }}</h3>
 
          <ul>
@@ -117,7 +117,7 @@
          </ul>
       </div>
 
-      <div id="handlingThirdParty">
+      <div id="handlingThirdParty" class="action-row">
          <h3>{{ $t('handling_thirdparty') }}</h3>
 
          <div v-if="!hasHandlingThirdParty">
@@ -152,7 +152,7 @@
 
       </div>
 
-      <div id="thirdParties">
+      <div id="thirdParties" class="action-row">
          <h3>{{ $t('thirdparty_intervener') }}</h3>
 
          <div v-if="!hasThirdParties">
@@ -187,7 +187,7 @@
          </ul>
       </div>
 
-      <div v-if="errors.length > 0" id="errors">
+      <div v-if="errors.length > 0" id="errors" class="alert alert-danger flashbag">
          <p>{{ $t('fix_these_errors') }}</p>
          <ul>
             <li v-for="e in errors">{{ e }}</li>
@@ -347,8 +347,8 @@ export default {
          return this.$store.state.goalsForAction.filter(g => !pickedIds.includes(g.id));
       },
       availableForCheckEvaluation() {
-         console.log('evaluationsPicked', this.$store.state.evaluationsPicked);
-         console.log('evaluationsForAction', this.$store.state.evaluationsForAction);
+         //console.log('evaluationsPicked', this.$store.state.evaluationsPicked);
+         //console.log('evaluationsForAction', this.$store.state.evaluationsForAction);
          let pickedIds = this.$store.state.evaluationsPicked.map(e => e.evaluation.id);
          return this.$store.state.evaluationsForAction.filter(e => !pickedIds.includes(e.id));
       },
@@ -452,112 +452,116 @@ div#workEditor {
    #errors {
       grid-area: errors; }
 
-
-   & > div {
+   div.action-row {
       @include border-collapse;
       padding: 1em;
-   }
 
-   div.action-title {
-      label {
-         margin-bottom: 0;
+      &#title {
+         label {
+            margin-bottom: 0;
+         }
+         p {
+            margin-top: 0;
+            font-weight: bold;
+            font-size: 1.5rem;
+         }
       }
-      p {
-         margin-top: 0;
-         font-weight: bold;
-         font-size: 1.5rem;
-      }
-   }
-
-   div#objectives {
-      & > div {
-         display: grid;
-         grid-template-areas: "obj res";
-         grid-template-columns: 50%;
-         column-gap: 0rem;
 
+      &#objectives {
          & > div {
-            @include border-collapse;
-            padding: 1em;
+            display: grid;
+            grid-template-columns: 50%;
+            column-gap: 0rem;
+            grid-template-areas: "obj res";
 
-            &:nth-child(1) {
-               grid-area: obj; }
+            & > div {
+               @include border-collapse;
+               padding: 1em;
 
-            &:nth-child(2) {
-               grid-area: res; }
-         }
+               &:nth-child(1) {
+                  grid-area: obj; }
 
-         & > div.results_without_objective {
-            background: repeating-linear-gradient(
-                  45deg,
-                  $gray-500,
-                  $gray-500 10px,
-                  $gray-100 10px,
-                  $gray-100 20px
-            );
-            text-align: center;
-            font-weight: 700;
-            padding-top: 1.5rem;
-         }
-      }
-   }
+               &:nth-child(2) {
+                  grid-area: res; }
+            }
 
-   div#evaluations {
-      & > div {
-         @include border-collapse;
-         padding: 1em;
-      }
-   }
-
-   div#objectives,
-   div#evaluations {
-      padding: 0;
-
-      & > div.title {
-         background-color: $gray-200;
-         color: $gray-700;
-
-         h3 {
-            text-align: center;
-         }
-      }
-
-      div.item-title {
-         font-weight: bold;
-      }
-
-      ul.list-evaluations,
-      ul.list-objectives,
-      ul.list-results {
-
-         list-style-type: none;
-         padding: 0;
-
-         li {
-            margin: 0.5rem;
-
-            &.badge {
-               padding-bottom: 0;
-               padding-top: 0;
-               padding-left: 0;
+            & > div.results_without_objective {
+               background: repeating-linear-gradient(
+                     45deg,
+                     $gray-500,
+                     $gray-500 10px,
+                     $gray-100 10px,
+                     $gray-100 20px
+               );
+               text-align: center;
+               font-weight: 700;
+               padding-top: 1.5rem;
             }
          }
       }
 
-      i.fa {
-         padding: 0.25rem;
-         color: $white;
+      &#evaluations {
+         & > div {
+            @include border-collapse;
+            padding: 1em;
+         }
+      }
 
-         &.fa-plus { background-color: $green; }
-         &.fa-times { background-color: $red; }
-         &.fa-pencil { background-color: $orange; }
+      &#objectives,
+      &#evaluations {
+         padding: 0;
+
+         & > div.title {
+            background-color: $gray-200;
+            color: $gray-700;
+
+            h3 {
+               text-align: center;
+            }
+         }
+
+         div.item-title {
+            font-weight: bold;
+         }
+
+         ul.list-evaluations,
+         ul.list-objectives,
+         ul.list-results {
+
+            list-style-type: none;
+            padding: 0;
+
+            li {
+               margin: 0.5rem;
+
+               &.badge {
+                  padding-bottom: 0;
+                  padding-top: 0;
+                  padding-left: 0;
+               }
+            }
+         }
+
+         i.fa {
+            padding: 0.25rem;
+            color: $white;
+
+            &.fa-plus { background-color: $green; }
+            &.fa-times { background-color: $red; }
+            &.fa-pencil { background-color: $orange; }
+         }
+      }
+
+      &#persons {
+         margin-top: 1.5em;
       }
    }
 
-   div#persons {
-      margin-top: 1.5em;
+   div#errors {
+      &.alert {
+         margin-top: 2em;
+      }
    }
-
 }
 
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
index b85f7e780..455dc2adb 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
@@ -1,27 +1,25 @@
 <template>
-   <div v-if="hasEvaluation">
-      <div v-for="e in pickedEvaluations">
-         <div class="item-title" @click="removeEvaluation(e)">
-            <i class="fa fa-fw fa-times"></i>
-            {{ e.evaluation.title.fr }}
-         </div>
-         <div v-if="!editEvaluation">
-            voit l'évaluation
-            <ul class="record_actions">
-               <li>
-                  <a class="btn btn-sm btn-update" @click="toggleEditEvaluation(e)">{{ $t('action.edit') }}</a>
-               </li>
-            </ul>
-         </div>
-         <div v-if="editEvaluation">
-            <form-evaluation ref="FormEvaluation">
-            </form-evaluation>
-            <ul class="record_actions">
-               <li>
-                  <button class="btn btn-sm btn-update" @click="submitForm">{{ $t('action.save') }}</button>
-               </li>
-            </ul>
-         </div>
+   <div v-for="e in pickedEvaluations">
+      <div class="item-title" @click="removeEvaluation(e)">
+         <i class="fa fa-fw fa-times"></i>
+         {{ e.evaluation.title.fr }}
+      </div>
+      <div v-if="!editEvaluation">
+         voit l'évaluation
+         <ul class="record_actions">
+            <li>
+               <a class="btn btn-sm btn-update" @click="toggleEditEvaluation(e)">{{ $t('action.edit') }}</a>
+            </li>
+         </ul>
+      </div>
+      <div v-if="editEvaluation">
+         <form-evaluation ref="FormEvaluation">
+         </form-evaluation>
+         <ul class="record_actions">
+            <li>
+               <button class="btn btn-sm btn-update" @click="submitForm">{{ $t('action.save') }}</button>
+            </li>
+         </ul>
       </div>
    </div>
 </template>
@@ -52,9 +50,6 @@ export default {
       };
    },
    computed: {
-      hasEvaluation() {
-         return this.$store.state.evaluationsPicked.length > 0;
-      },
       pickedEvaluations() {
          return this.$store.state.evaluationsPicked;
       }