Create thirdparty on the fly with institution / contact

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

@@ -20,6 +20,20 @@
    </div>
    <div v-else-if="action === 'edit' || action === 'create'">
 
+       <div class="form-floating mb-3">
+           <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">
+                   {{ $t('tparty.company')}}
+               </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">
+                   {{ $t('tparty.contact')}}
+               </label>
+           </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>
@@ -59,6 +73,17 @@ import ThirdPartyRenderBox from '../Entity/ThirdPartyRenderBox.vue';
 import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress';
 import { getThirdparty } from '../../_api/OnTheFly';
 
+const i18n = {
+    messages: {
+        fr: {
+            tparty: {
+                contact: "Contact",
+                company: "Institution"
+            }
+        }
+    }
+};
+
 export default {
    name: "OnTheFlyThirdParty",
    props: ['id', 'type', 'action'],
@@ -66,11 +91,12 @@ export default {
       ThirdPartyRenderBox,
       AddAddress
    },
+   i18n,
    data() {
       return {
          //context: {}, <--
          thirdparty: {
-            type: 'thirdparty'
+            type: 'thirdparty',
          },
          addAddress: {
             options: {
@@ -88,6 +114,19 @@ export default {
       }
    },
    computed: {
+       kind: {
+           get() {
+               // note: there are also default to 'institution' set in the "mounted" method
+               if (this.$data.thirdparty.kind !== undefined) {
+                   return this.$data.thirdparty.kind;
+               } else {
+                   return 'company';
+               }
+           },
+           set(v) {
+               this.$data.thirdparty.kind = v;
+           }
+       },
       context() {
          let context = {
             target: {
@@ -133,6 +172,8 @@ export default {
    mounted() {
       if (this.action !== 'create') {
          this.loadData();
+      } else {
+          this.thirdparty.kind = 'company';
       }
    },
 }