button added to add contact to personne morale (styling not correct yet) + opening of onTheFly thirdparty, but conditions and parameters not yet correct

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue

@@ -1,11 +1,11 @@
 <template>
 
-    <a v-if="isDisplayBadge" @click="openModal">
-        <span class="chill-entity" :class="badgeType">
-            {{ buttonText }}
-        </span>
-    </a>
-    <a v-else class="btn btn-sm" target="_blank"
+   <a v-if="isDisplayBadge" @click="openModal">
+      <span class="chill-entity" :class="badgeType">
+         {{ buttonText }}
+      </span>
+   </a>
+   <a v-else class="btn btn-sm" target="_blank"
       :class="classAction"
       :title="$t(titleAction)"
       @click="openModal">
@@ -39,6 +39,16 @@
             </on-the-fly-thirdparty>
          </template>
 
+         <template v-slot:body v-else-if="action === 'addContact'">
+            <on-the-fly-thirdparty
+               :parent="parent"
+               type="thirdparty"
+               action="create"
+               kind="child"
+               ref="castThirdparty">
+            </on-the-fly-thirdparty>
+         </template>
+
          <template v-slot:body v-else>
             <on-the-fly-create
                v-bind:action="action"
@@ -78,7 +88,7 @@ export default {
       OnTheFlyThirdparty,
       OnTheFlyCreate
    },
-   props: ['type', 'id', 'action', 'buttonText', 'displayBadge'],
+   props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'parent'],
    emits: ['saveFormOnTheFly'],
    data() {
       return {
@@ -98,6 +108,8 @@ export default {
                return 'btn-update';
             case 'create':
                return 'btn-create';
+            case 'addContact':
+               return 'btn-create';
          }
       },
       titleAction() {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeThirdParty.vue

@@ -2,12 +2,12 @@
     <div class="container tpartycontainer">
       <div class="tparty-identification">
         <span class="name">
-           {{ item.result.text }}
+            {{ item.result.text }}
         </span>
           <span class="location">
           <template v-if="hasAddress">
-           {{ getAddress.text }} -
-           {{ getAddress.postcode.name }}
+            {{ getAddress.text }} -
+            {{ getAddress.postcode.name }}
           </template>
         </span>
       </div>
@@ -19,15 +19,20 @@
     </div>
 
     <div class="right_actions">
-       <badge-entity
-         :entity="item.result"
-         :options="{ displayLong: true }">
-       </badge-entity>
-       <on-the-fly
-           type="thirdparty"
-           v-bind:id="item.result.id"
-           action="show">
-       </on-the-fly>
+      <badge-entity
+        :entity="item.result"
+        :options="{ displayLong: true }">
+      </badge-entity>
+      <on-the-fly
+          type="thirdparty"
+          action="create"
+          :parent="item.result"
+      ></on-the-fly>
+      <on-the-fly
+          type="thirdparty"
+          v-bind:id="item.result.id"
+          action="show">
+      </on-the-fly>
     </div>
 </template>
 
@@ -48,36 +53,36 @@ const i18n = {
 };
 
 export default {
-   name: 'SuggestionThirdParty',
-   components: {
-      OnTheFly,
-      BadgeEntity
-   },
-   props: ['item'],
-   i18n,
-   computed: {
-     hasAddress() {
-       if (this.$props.item.result.address !== null) {
-         return true;
-       }
-       if (this.$props.item.result.parent !== null) {
-         this.$props.item.result.parent.address !== null;
-       }
-     },
-     hasParent() {
-       return this.$props.item.result.parent !== null;
-     },
-     getAddress() {
-       if (this.$props.item.result.address !== null) {
-         return this.$props.item.result.address;
-       }
-       if (this.$props.item.result.parent.address !== null) {
-         return this.$props.item.result.parent.address;
-       }
+  name: 'SuggestionThirdParty',
+  components: {
+    OnTheFly,
+    BadgeEntity
+  },
+  props: ['item'],
+  i18n,
+  computed: {
+    hasAddress() {
+      if (this.$props.item.result.address !== null) {
+        return true;
+      }
+      if (this.$props.item.result.parent !== null) {
+        this.$props.item.result.parent.address !== null;
+      }
+    },
+    hasParent() {
+      return this.$props.item.result.parent !== null;
+    },
+    getAddress() {
+      if (this.$props.item.result.address !== null) {
+        return this.$props.item.result.address;
+      }
+      if (this.$props.item.result.parent.address !== null) {
+        return this.$props.item.result.parent.address;
+      }
 
-       return null;
-     }
-   }
+      return null;
+    }
+  }
 }
 </script>
 

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue

@@ -21,58 +21,73 @@
       </div>
    </div>
    <div v-else-if="action === 'edit' || action === 'create'">
-
-       <div class="form-floating mb-3" v-if="thirdparty.kind !== 'child'">
-           <div class="form-check">
-               <input class="form-check-input mt-0" type="radio" v-model="kind" value="company" id="tpartyKindInstitution">
-               <label for="tpartyKindInstitution" class="required">
-                   <badge-entity
-                      :entity="{ type: 'thirdparty', kind: 'company' }"
-                      :options="{ displayLong: true }">
-                   </badge-entity>
-               </label>
-           </div>
-           <div class="form-check">
-               <input class="form-check-input mt-0" type="radio" v-model="kind" value="contact" id="tpartyKindContact">
-               <label for="tpartyKindContact" class="required">
-                   <badge-entity
-                      :entity="{ type: 'thirdparty', kind: 'contact' }"
-                      :options="{ displayLong: true }">
-                   </badge-entity>
-               </label>
-           </div>
-       </div>
-       <div v-else>
-           <p>Contact de&nbsp;:</p>
-          <third-party-render-box :thirdparty="thirdparty.parent"
-              :options="{
-                   addInfo: true,
-                   addEntity: false,
-                   addAltNames: true,
-                   addId: false,
-                   addLink: false,
-                   addAge: false,
-                   hLevel: 4,
-                   addCenter: false,
-                   addNoData: true,
-                   isMultiline: false
+      {{ action }}
+      <div class="form-floating mb-3" v-if="thirdparty.kind !== 'child'">
+         <div class="form-check">
+            <input class="form-check-input mt-0" type="radio" v-model="kind" value="company" id="tpartyKindInstitution">
+            <label for="tpartyKindInstitution" class="required">
+                  <badge-entity
+                     :entity="{ type: 'thirdparty', kind: 'company' }"
+                     :options="{ displayLong: true }">
+                  </badge-entity>
+            </label>
+         </div>
+         <div class="form-check">
+            <input class="form-check-input mt-0" type="radio" v-model="kind" value="contact" id="tpartyKindContact">
+            <label for="tpartyKindContact" class="required">
+                  <badge-entity
+                     :entity="{ type: 'thirdparty', kind: 'contact' }"
+                     :options="{ displayLong: true }">
+                  </badge-entity>
+            </label>
+         </div>
+      </div>
+      <div v-else>
+         <p>Contact de&nbsp;:</p>
+         <third-party-render-box v-if="thirdparty.parent"
+            :thirdparty="thirdparty.parent"
+            :options="{
+               addInfo: true,
+               addEntity: false,
+               addAltNames: true,
+               addId: false,
+               addLink: false,
+               addAge: false,
+               hLevel: 4,
+               addCenter: false,
+               addNoData: true,
+               isMultiline: false
+         }"></third-party-render-box>
+         <third-party-render-box v-else
+            :thirdparty="parent"
+            :options="{
+                  addInfo: true,
+                  addEntity: false,
+                  addAltNames: true,
+                  addId: false,
+                  addLink: false,
+                  addAge: false,
+                  hLevel: 4,
+                  addCenter: false,
+                  addNoData: true,
+                  isMultiline: false
             }"></third-party-render-box>
-       </div>
+      </div>
       <div class="form-floating mb-3">
          <input class="form-control form-control-lg" id="name" v-model="thirdparty.text" v-bind:placeholder="$t('thirdparty.name')" />
          <label for="name">{{ $t('thirdparty.name') }}</label>
       </div>
 
-       <template
-           v-if="thirdparty.kind !== 'child'">
-           <add-address
-               key="thirdparty"
-               :context="context"
-               :options="addAddress.options"
-               :address-changed-callback="submitAddress"
-               ref="addAddress">
-           </add-address>
-       </template>
+      <template
+         v-if="thirdparty.kind !== 'child'">
+         <add-address
+            key="thirdparty"
+            :context="context"
+            :options="addAddress.options"
+            :address-changed-callback="submitAddress"
+            ref="addAddress">
+         </add-address>
+      </template>
 
       <div class="input-group mb-3">
          <span class="input-group-text" id="email"><i class="fa fa-fw fa-envelope"></i></span>