Merge branch 'master' into person_renderbox_thirdparty_onthefly

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

@@ -33,7 +33,7 @@ import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRe
 export default {
    name: "ButtonLocation",
    components: {
-      import AddressRenderBox from,
+      AddressRenderBox,
       Modal,
    },
    props: ['person'],

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

@@ -2,16 +2,44 @@
 <div class="vue-component">
    <h2><a name="section-10"></a>{{ $t('persons_associated.title')}}</h2>
 
-   <div v-if="participations.length > 0">
+   <div v-if="currentParticipations.length > 0">
       <label class="col-form-label">{{ $tc('persons_associated.counter', counter) }}</label>
    </div>
    <div v-else>
       <label class="chill-no-data-statement">{{ $tc('persons_associated.counter', counter) }}</label>
    </div>
 
+   <div v-if="participationWithoutHousehold.length > 0" class="alert alert-warning no-household">
+      <i class="fa fa-warning fa-2x"></i>
+      <form method="GET" action="/fr/person/household/members/editor">
+         <div class="float-button bottom"><div class="box">
+            <div class="action">
+               <button class="btn btn-update" type="submit">{{ $t('persons_associated.update_household') }}</button>
+            </div>
+            <p class="mb-3">{{ $t('persons_associated.person_without_household_warning') }}</p>
+            <div class="form-check" v-for="p in participationWithoutHousehold">
+               <input type="checkbox"
+                  class="form-check-input"
+                  v-model="hasNoHousehold"
+                  name="persons[]"
+                  checked="checked"
+                  :id="p.person.id"
+                  :value="p.person.id"
+               />
+               <label class="form-check-label" for="hasNoHousehold">
+                  {{ p.person.text }}
+               </label>
+            </div>
+            <input type="hidden" name="expand_suggestions" value="true">
+            <input type="hidden" name="returnPath" :value="getReturnPath">
+            <input type="hidden" name="accompanying_period_id" :value="courseId">
+         </div></div>
+      </form>
+   </div>
+
    <div class="flex-table mb-3">
       <participation-item
-         v-for="participation in participations"
+         v-for="participation in currentParticipations"
          v-bind:participation="participation"
          v-bind:key="participation.id"
          @remove="removeParticipation"
@@ -56,10 +84,24 @@ export default {
          }
       }
    },
-   computed: mapState({
-      participations: state => state.accompanyingCourse.participations,
-      counter: state => state.accompanyingCourse.participations.length
-   }),
+   computed: {
+      ...mapState({
+         courseId: state => state.accompanyingCourse.id,
+         participations: state => state.accompanyingCourse.participations
+      }),
+      currentParticipations() {
+         return this.participations.filter(p => p.endDate === null)
+      },
+      counter() {
+         return this.currentParticipations.length;
+      },
+      participationWithoutHousehold() {
+         return this.currentParticipations.filter(p => p.person.current_household_id === null);
+      },
+      getReturnPath() {
+         return window.location.pathname + window.location.search + window.location.hash;
+      }
+   },
    methods: {
       removeParticipation(item) {
         //console.log('@@ CLICK remove participation: item', item);
@@ -81,3 +123,30 @@ export default {
    }
 }
 </script>
+<style lang="scss" scoped>
+div#accompanying-course {
+   div.vue-component {
+      & > div.alert {
+         margin: 0 0 -1em;
+      }
+      div.no-household {
+         padding-bottom: 1.5em;
+         display: flex;
+         flex-direction: row;
+         & > i {
+            flex-basis: 1.5em; flex-grow: 0; flex-shrink: 0;
+            padding-top: 0.2em;
+            opacity: 0.75;
+         }
+         & > form {
+            flex-basis: auto;
+            div.action {
+               button.btn-update {
+                  margin-right: 2em;
+               }
+            }
+         }
+      }
+   }
+}
+</style>

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

@@ -5,11 +5,13 @@
                addId : false,
                addEntity: false,
                addLink: false,
+               addHouseholdLink: true,
                addAltNames: true,
                addAge : true,
                hLevel : 3,
             }"
-      :person="participation.person">
+      :person="participation.person"
+      :returnPath="getAccompanyingCourseReturnPath">
 
       <template v-slot:record-actions>
          <ul class="record_actions">
@@ -40,34 +42,54 @@
             <li>
                <button v-if="!participation.endDate"
                   class="btn btn-sm btn-remove"
-                  v-bind:title="$t('action.remove')"
-                  @click.prevent="$emit('close', participation)">
+                  v-bind:title="$t('persons_associated.leave_course')"
+                       @click="modal.showModal = true">
                </button>
-               <button v-else
-                  class="btn btn-sm btn-remove disabled"></button>
             </li>
          </ul>
 
       </template>
    </person-render-box>
+
+   <teleport to="body">
+      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
+         <template v-slot:header>
+            <h2 class="modal-title">{{ $t('persons_associated.sure') }}</h2>
+         </template>
+         <template v-slot:body>
+            <p>{{ $t('persons_associated.sure_description') }}</p>
+         </template>
+         <template v-slot:footer>
+            <button class="btn btn-danger" @click.prevent="$emit('close', participation)">
+               {{ $t('persons_associated.ok') }}
+            </button>
+         </template>
+      </modal>
+   </teleport>
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import ButtonLocation from '../ButtonLocation.vue';
 import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 
 export default {
    name: 'ParticipationItem',
    components: {
       OnTheFly,
       ButtonLocation,
-      PersonRenderBox
+      PersonRenderBox,
+      Modal
    },
    props: ['participation'],
    emits: ['remove', 'close'],
    data() {
       return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-centered modal-md"
+         },
          PersonRenderBox: {
             participation: 'participation',
             options: {
@@ -86,6 +108,9 @@ export default {
             return true;
          }
          return false;
+      },
+      getAccompanyingCourseReturnPath() {
+         return `fr/parcours/${this.$store.state.accompanyingCourse.id}/edit#section-10`;
       }
    }
 }
@@ -93,10 +118,7 @@ export default {
 /*
  *  dates of participation
  *
- *   :title="$t('persons_associated.date_start_to_end', {
- *      start: $d(participation.startDate.datetime, 'short'),
- *      end: $d(participation.endDate.datetime, 'short')
- *   })"
+ *
  *
  *   <tr>
  *      <td><span v-if="participation.startDate">