Merge branch 'ameliorations_composants_vue' of gitlab.com:Chill-Projet/chill-bundles into ameliorations_composants_vue

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

@@ -93,8 +93,9 @@ export default {
          }
          & > div {
             margin: 1em 3em 0;
-         }
-         table {
+            &.flex-table {
+               margin: 1em 0 0;
+            }
          }
 
          &.errors {

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

@@ -9,33 +9,15 @@
       <label class="chill-no-data-statement">{{ $tc('persons_associated.counter', counter) }}</label>
    </div>
 
-   <participation-item
-      v-for="participation in participations"
-      v-bind:participation="participation"
-      v-bind:key="participation.id"
-      @remove="removeParticipation"
-      @close="closeParticipation">
-   </participation-item>
-
-   <!-- <table class="table table-bordered table-striped border-dark align-middle" v-if="participations.length > 0">
-      <thead>
-         <tr>
-            <th class="chill-orange">{{ $t('persons_associated.name') }}</th>
-            <th class="chill-orange">{{ $t('persons_associated.startdate') }}</th>
-            <th class="chill-orange">{{ $t('persons_associated.enddate') }}</th>
-            <th class="chill-orange">{{ $t('action.actions') }}</th>
-         </tr>
-      </thead>
-      <tbody>
-         <participation-item
-            v-for="participation in participations"
-            v-bind:participation="participation"
-            v-bind:key="participation.id"
-            @remove="removeParticipation"
-            @close="closeParticipation">
-         </participation-item>
-      </tbody>
-   </table> -->
+   <div class="flex-table mb-3">
+      <participation-item
+         v-for="participation in participations"
+         v-bind:participation="participation"
+         v-bind:key="participation.id"
+         @remove="removeParticipation"
+         @close="closeParticipation">
+      </participation-item>
+   </div>
 
    <div>
       <add-persons

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

@@ -1,5 +1,4 @@
 <template>
-
    <person-render-box
       :options="{
                addInfo : true,
@@ -10,61 +9,53 @@
                addAge : false,
                hLevel : 1
             }"
-      :participation="participation">
+      :person="participation.person">
+
+      <template v-slot:record-actions>
+         <ul class="record_actions">
+            <li>
+               <on-the-fly
+                  v-bind:type="participation.person.type"
+                  v-bind:id="participation.person.id"
+                  action="show">
+               </on-the-fly>
+            </li>
+            <li>
+               <on-the-fly
+                  v-bind:type="participation.person.type"
+                  v-bind:id="participation.person.id"
+                  action="edit">
+               </on-the-fly>
+            </li>
+            <!-- <li>
+               <button class="btn btn-delete"
+                  :title="$t('action.delete')"
+                  @click.prevent="$emit('remove', participation)">
+               </button>
+            </li> -->
+            <li>
+               <button v-if="!participation.endDate"
+                  class="btn btn-sm btn-remove"
+                  v-bind:title="$t('action.remove')"
+                  @click.prevent="$emit('close', participation)">
+               </button>
+               <button v-else class="btn btn-sm btn-remove disabled"></button>
+            </li>
+         </ul>
+
+      </template>
    </person-render-box>
 
-<!-- <tr>
-   <td>
-      {{ participation.person.firstName }}
-      {{ participation.person.lastName }}
-      <person-render-box
-         v-bind:options="options"
-         v-bind:participation="participation"
-      ></person-render-box>
-   </td>
-   <td><span v-if="participation.startDate">
-       {{ $d(participation.startDate.datetime, 'short') }}</span>
-   </td>
-   <td><span v-if="participation.endDate">
-       {{ $d(participation.endDate.datetime, 'short') }}</span>
-   </td>
-   <td>
-      <ul class="record_actions">
-         <button-location
-            v-if="hasCurrentHouseholdAddress"
-            v-bind:person="participation.person">
-         </button-location>
-         <li>
-            <on-the-fly
-               v-bind:type="participation.person.type"
-               v-bind:id="participation.person.id"
-               action="show">
-            </on-the-fly>
-         </li>
-         <li>
-            <on-the-fly
-               v-bind:type="participation.person.type"
-               v-bind:id="participation.person.id"
-               action="edit">
-            </on-the-fly>
-         </li>
-         li>
-            <button class="btn btn-delete"
-               :title="$t('action.delete')"
-               @click.prevent="$emit('remove', participation)">
-            </button>
-         </li
-         <li>
-            <button v-if="!participation.endDate"
-               class="btn btn-sm btn-remove"
-               v-bind:title="$t('action.remove')"
-               @click.prevent="$emit('close', participation)">
-            </button>
-            <button v-else class="btn btn-sm btn-remove" disabled></button>
-         </li>
-      </ul>
-   </td>
-</tr> -->
+   <!-- dates of participation
+      <tr>
+         <td><span v-if="participation.startDate">
+             {{ $d(participation.startDate.datetime, 'short') }}</span>
+         </td>
+         <td><span v-if="participation.endDate">
+             {{ $d(participation.endDate.datetime, 'short') }}</span>
+         </td>
+      </tr>
+   -->
 </template>
 
 <script>

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

@@ -10,24 +10,14 @@
       <label class="chill-no-data-statement">{{ $tc('resources.counter', counter) }}</label>
    </div>
 
-   <table class="table table-bordered table-striped border-dark align-middle" v-if="resources.length > 0">
-      <thead>
-         <tr>
-            <th class="chill-orange">{{ $t('resources.text') }}</th>
-            <th class="chill-orange">{{ $t('resources.description') }}</th>
-            <th class="chill-orange">{{ $t('action.actions') }}</th>
-         </tr>
-      </thead>
-      <tbody>
-         <resource-item
-            v-for="resource in resources"
-            v-bind:resource="resource"
-            v-bind:key="resource.id"
-            @remove="removeResource">
-         </resource-item>
-      </tbody>
-   </table>
-
+   <div class="flex-table mb-3">
+      <resource-item
+         v-for="resource in resources"
+         v-bind:resource="resource"
+         v-bind:key="resource.id"
+         @remove="removeResource">
+      </resource-item>
+   </div>
    <div>
       <add-persons
         buttonTitle="resources.add_resources"

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

@@ -1,64 +1,52 @@
 <template>
-<tr>
+      <third-party-render-box
+         :options="{
+            addLink : false,
+            addId : false,
+            addEntity: true,
+            addInfo: true
+         }"
+         :thirdparty="resource">
 
-   <td>
-      <span class="badge rounded-pill bg-secondary"
-         v-bind:title="resource.resource.id">
-         <span v-if="resource.resource.type === 'person'" >{{ $t('item.type_person') }}</span>
-         <span v-if="resource.resource.type === 'thirdparty'" >{{ $t('item.type_thirdparty') }}</span>
-      </span>
-      {{ resource.resource.text }}
-   </td>
-
-   <td v-if="resource.resource.type === 'person'">
-      {{ $tc('person.born') }}{{ $d(resource.resource.birthdate.datetime, 'short') }}
-   </td>
-   <td v-else-if="resource.resource.type === 'thirdparty'">
-      {{ resource.resource.address.text }}<br>
-      {{ resource.resource.address.postcode.name }}
-   </td>
-
-   <td>
-      <ul class="record_actions">
-         <button-location
-            v-if="hasCurrentHouseholdAddress"
-            v-bind:person="resource.resource">
-         </button-location>
-         <li>
-            <on-the-fly
-               v-bind:type="resource.resource.type"
-               v-bind:id="resource.resource.id"
-               action="show">
-            </on-the-fly>
-         </li>
-         <li>
-            <on-the-fly
-               v-bind:type="resource.resource.type"
-               v-bind:id="resource.resource.id"
-               action="edit">
-            </on-the-fly>
-         </li>
-         <li>
-            <button
-               class="btn btn-sm btn-remove"
-               v-bind:title="$t('action.remove')"
-               @click.prevent="$emit('remove', resource)">
-            </button>
-         </li>
-      </ul>
-   </td>
-</tr>
+         <template v-slot:record-actions>
+            <ul class="record_actions">
+               <li>
+                  <on-the-fly
+                     v-bind:type="resource.resource.type"
+                     v-bind:id="resource.resource.id"
+                     action="show">
+                  </on-the-fly>
+               </li>
+               <li>
+                  <on-the-fly
+                     v-bind:type="resource.resource.type"
+                     v-bind:id="resource.resource.id"
+                     action="edit">
+                  </on-the-fly>
+               </li>
+               <li>
+                  <button
+                     class="btn btn-sm btn-remove"
+                     v-bind:title="$t('action.remove')"
+                     @click.prevent="$emit('remove', resource)">
+                  </button>
+               </li>
+            </ul>
+         </template>
+      </third-party-render-box>
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import ButtonLocation from '../ButtonLocation.vue';
+import ThirdPartyRenderBox from '../../../../../../../ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue'
 
 export default {
    name: 'ResourceItem',
    components: {
       OnTheFly,
-      ButtonLocation
+      ButtonLocation,
+      ThirdPartyRenderBox
    },
    props: ['resource'],
    emits: ['remove'],