Using thirdparty renderbox to display intervening thirdparties

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

@@ -148,9 +148,7 @@
                </li>
             </ul>
          </div>
-         <div v-else class="flex-table"> 
-            <!-- <p>{{ handlingThirdParty.text }}</p>
-            <address-render-box :address="handlingThirdParty.address"></address-render-box> -->
+         <div v-else class="flex-table">
                <third-party-render-box
                   :thirdparty="handlingThirdParty"
                   :options="{
@@ -164,8 +162,7 @@
                      }"></third-party-render-box>
             <ul class="record_actions">
                <li>
-                  <button :title="$t('remove_handling_thirdparty')" class="btn btn-remove"
-                        @click="removeHandlingThirdParty"></button>
+                  <button :title="$t('remove_handling_thirdparty')" class="btn btn-remove" @click="removeHandlingThirdParty"/>
                </li>
             </ul>
          </div>
@@ -180,32 +177,22 @@
          </div>
 
          <div v-else>
-            <!-- <div class="flex-bloc mb-3">
+            <div class="flex-bloc mb-3">
                   <third-party-render-box
-                     :v-for="t in thirdParties"
-                     :thirdparty="t"
+                     v-for="thirdparty in thirdParties"
+                     :key="thirdparty.id"
+                     :thirdparty="thirdparty"
                      :options="{ addLink : false, addId : false, addEntity: true, addInfo: false, hLevel: 3 }"
                      >
                      <template v-slot:record-actions>
                         <ul class="record_actions">
-                           <li><on-the-fly :id="t.id" action="show"></on-the-fly></li>
-                           <li><on-the-fly :id="t.id" action="edit" @saveFormOnTheFly="saveFormOnTheFly"></on-the-fly></li>
-                           <li><button class="btn btn-sm btn-remove" :title="$t('action.remove')" @click.prevent="$emit('remove', resource)"></button></li>
+                           <li>
+                              <button :title="$t('remove_thirdparty')" class="btn btn-remove" @click="removeThirdParty(thirdparty)" />
+                           </li>
                         </ul>
                      </template>
                   </third-party-render-box>
-            </div> -->
-            <ul>
-               <li v-for="t in thirdParties">
-                  <p>{{ t.text }}</p>
-                  <address-render-box :address="t.address"></address-render-box>
-
-                  <ul class="record_actions">
-                     <button :title="$t('remove_thirdparty')" class="btn btn-remove"
-                             @click="removeThirdParty(t)"></button>
-                  </ul>
-               </li>
-            </ul>
+            </div>
          </div>
 
          <ul class="record_actions">
@@ -222,17 +209,17 @@
          </ul>
       </div>
 
-     <div>
-       <pick-template
-           entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork"
-           :templates="this.templatesAvailablesForAction"
-           :entityId="work.id"
-           :beforeMove="beforeGenerateTemplate">
-         <template v-slot:title>
-           <h3>{{ $t('Generate doc') }}</h3>
-         </template>
-       </pick-template>
-     </div>
+   <div>
+      <pick-template
+         entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork"
+         :templates="this.templatesAvailablesForAction"
+         :entityId="work.id"
+         :beforeMove="beforeGenerateTemplate">
+      <template v-slot:title>
+         <h3>{{ $t('Generate doc') }}</h3>
+      </template>
+      </pick-template>
+   </div>
 
       <div v-if="errors.length > 0" id="errors" class="alert alert-danger flashbag">
          <p>{{ $t('fix_these_errors') }}</p>
@@ -459,8 +446,8 @@ export default {
          this.$store.dispatch('submit');
       },
       beforeGenerateTemplate() {
-          console.log('before generate');
-          return Promise.resolve();
+         console.log('before generate');
+         return Promise.resolve();
       }
    }
 };
@@ -476,15 +463,15 @@ div#workEditor {
    grid-template-columns: 50%;
    column-gap: 0rem;
    grid-template-areas:
-       "title title"
-       "startDate endDate"
-       "comment comment"
-       "objectives objectives"
-       "evaluations evaluations"
-       "persons persons"
-       "handling handling"
-       "tparties tparties"
-       "errors errors";
+      "title title"
+      "startDate endDate"
+      "comment comment"
+      "objectives objectives"
+      "evaluations evaluations"
+      "persons persons"
+      "handling handling"
+      "tparties tparties"
+      "errors errors";
 
    #title {
       grid-area: title; }

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue

@@ -16,7 +16,7 @@
                         {{ $t('thirdparty.child')}}
                     </span>
                     <span class="badge bg-thirdparty-company" v-else-if="thirdparty.kind == 'company'">
-                       {{ $t('thirdparty.company')}}
+                    {{ $t('thirdparty.company')}}
                     </span>
                     <span class="badge bg-thirdparty-contact" v-else>
                         {{ $t('thirdparty.contact')}}
@@ -40,12 +40,12 @@
 
 
         <div class="item-col">
-           <div class="float-button bottom">
-              <div class="box">
-                 <div class="action">
-                    <slot name="record-actions"></slot>
-                 </div>
-                 <confidential v-if="thirdparty.contactDataAnonymous">
+        <div class="float-button bottom">
+            <div class="box">
+                <div class="action">
+                <slot name="record-actions"></slot>
+                </div>
+                <confidential v-if="thirdparty.contactDataAnonymous">
                     <template v-slot:confidential-content>
                         <ul class="list-content fa-ul">
                             <li v-if="thirdparty.address">
@@ -77,8 +77,8 @@
                         <a :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
                     </li>
                 </ul>
-              </div>
-           </div>
+            </div>
+        </div>
         </div>
 
     </div>