ThirdPartyRenderBox created and old view replaced

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

@@ -15,16 +15,15 @@
             <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,7 +1,7 @@
 <template>
-<tr>
+<!-- <tr> -->
    
-   <td>
+   <!-- <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>
@@ -18,41 +18,58 @@
       {{ resource.resource.address.postcode.name }}
    </td>
    
-   <td>
-      <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-remove"
-               v-bind:title="$t('action.remove')" 
-               @click.prevent="$emit('remove', resource)">
-            </button>
-         </li>
-      </ul>
-   </td>
-</tr>
+   <td> -->
+      <third-party-render-box
+         :options="{
+            addLink : false,
+            addId : false,
+            addEntity: true,
+            addInfo: true
+         }"
+         :thirdparty="resource"
+      >
+         <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-remove"
+                     v-bind:title="$t('action.remove')" 
+                     @click.prevent="$emit('remove', resource)">
+                  </button>
+               </li>
+            </ul>
+         </template>
+      
+      
+      </third-party-render-box>
+      
+   <!-- </td>
+</tr> -->
 </template>
 
 <script>
 import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+import ThirdPartyRenderBox from '../../../../../../../ChillThirdPartyBundle/Resources/public/vuejs/_components/ThirdPartyRenderbox.vue'
 
 export default {
    name: 'ResourceItem',
    components: {
-      OnTheFly
+      OnTheFly,
+      ThirdPartyRenderBox
    },
    props: ['resource'],
    emits: ['remove']