accourse: add warning alert box in each bloc with minimum confirm conditions

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

@@ -87,8 +87,8 @@ export default {
          }
          padding: 0em 0em;
          margin: 1em 0;
-         border: 1px dotted tint-color($chill-accourse-context, 10%);
          border-radius: 5px;
+         border: 1px dotted tint-color($chill-accourse-context, 10%);
          border-left: 1px dotted tint-color($chill-accourse-context, 10%);
          border-right: 1px dotted tint-color($chill-accourse-context, 10%);
          dd {
@@ -96,10 +96,15 @@ export default {
          }
          & > div {
             margin: 1em 3em 0;
+
             &.flex-table,
             &.flex-bloc {
                margin: 1em 0 0;
             }
+            &.alert.to-confirm {
+               margin: 1em 0 0;
+               padding: 1em 3em;
+            }
          }
 
          div.flex-table {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue

@@ -91,7 +91,7 @@ export default {
             },
             scopes: {
               msg: 'confirm.set_a_scope',
-              anchor: '#section-65'
+              anchor: '#section-60'
             }
          }
       }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue

@@ -55,11 +55,15 @@
          </ul>
       </div>
 
+      <div v-if="!isLocationValid" class="alert alert-warning to-confirm">
+         {{ $t('courselocation.not_valid') }}
+      </div>
+
    </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
+import {mapGetters, mapState} from "vuex";
 import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress.vue';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
 
@@ -102,6 +106,9 @@ export default {
          accompanyingCourse: state => state.accompanyingCourse,
          context: state => state.addressContext
       }),
+      ...mapGetters([
+         'isLocationValid'
+      ]),
       isTemporaryAddress() {
          return this.accompanyingCourse.locationStatus === 'address';
       },

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue

@@ -58,11 +58,14 @@
       </add-persons>
    </div>
 
+   <div v-if="!isParticipationValid" class="alert alert-warning to-confirm">
+      {{ $t('persons_associated.participation_not_valid') }}
+   </div>
 </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import {mapGetters, mapState} from 'vuex';
 import ParticipationItem from "./PersonsAssociated/ParticipationItem.vue"
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
 
@@ -89,6 +92,9 @@ export default {
          courseId: state => state.accompanyingCourse.id,
          participations: state => state.accompanyingCourse.participations
       }),
+      ...mapGetters([
+         'isParticipationValid'
+      ]),
       currentParticipations() {
          return this.participations.filter(p => p.endDate === null)
       },
@@ -126,7 +132,7 @@ export default {
 <style lang="scss" scoped>
 div#accompanying-course {
    div.vue-component {
-      & > div.alert {
+      & > div.alert.no-household {
          margin: 0 0 -1em;
       }
       div.no-household {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Scopes.vue

@@ -11,7 +11,7 @@
         </div>
      </div>
 
-    <div v-if="!isScopeValid" class="alert alert-warning separator">
+    <div v-if="!isScopeValid" class="alert alert-warning to-confirm">
       {{ $t('scopes.add_at_least_one') }}
     </div>
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue

@@ -21,13 +21,17 @@
         </VueMultiselect>
      </div>
 
+     <div v-if="!isSocialIssueValid" class="alert alert-warning to-confirm">
+        {{ $t('social_issue.not_valid') }}
+     </div>
+
   </div>
 </template>
 
 <script>
 import VueMultiselect from 'vue-multiselect';
 import { getSocialIssues } from '../api';
-import { mapState } from 'vuex';
+import {mapGetters, mapState} from 'vuex';
 
 export default {
    name: "SocialIssue",
@@ -41,6 +45,9 @@ export default {
       ...mapState({
          value: state => state.accompanyingCourse.socialIssues,
       }),
+      ...mapGetters([
+         'isSocialIssueValid'
+      ])
    },
    mounted() {
       this.getOptions();

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js

@@ -50,6 +50,7 @@ const appMessages = {
          show_household: "Voir le ménage",
          person_without_household_warning: "Certaines personnes n'appartiennent à aucun ménage actuellement. Renseignez leur appartenance à un ménage dès que possible.",
          update_household: "Modifier l'appartenance",
+         participation_not_valid: "Sélectionnez ou créez au minimum 1 usager",
       },
       requestor: {
          title: "Demandeur",
@@ -72,6 +73,7 @@ const appMessages = {
       social_issue: {
          title: "Problématiques sociales",
          label: "Choisir les problématiques sociales",
+         not_valid: "Sélectionnez au minimum une problématique sociale",
       },
       courselocation: {
          title: "Localisation du parcours",
@@ -84,6 +86,7 @@ const appMessages = {
          sure_description: "Voulez-vous faire de cette adresse l'adresse du parcours ?",
          ok: "Désigner comme adresse du parcours",
          person_locator: "Parcours localisé auprès de {0}",
+         not_valid: "Indiquez au minimum une localisation temporaire du parcours",
          no_address: "Il n'y a pas d'adresse associée au parcours"
       },
       scopes: {