onTheFly modal to add contact to thirdparty - form fields for profession,civility, and comment added - no saving possible yet

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

@@ -51,13 +51,12 @@
             </div>
          </template>
 
-         <template v-slot:body v-else-if="action === 'addContact'">
+         <template v-slot:body v-else-if="parent">
             <on-the-fly-thirdparty
                :parent="parent"
+               :action="action"
                type="thirdparty"
-               action="create"
-               kind="child"
-               ref="castThirdparty">
+               ref="castNew">
             </on-the-fly-thirdparty>
          </template>
 
@@ -139,6 +138,8 @@ export default {
                return 'action.edit';
             case 'create':
                return 'action.create';
+            case 'addContact':
+               return 'action.addContact';
          }
       },
       titleModal() {
@@ -149,6 +150,8 @@ export default {
                return 'onthefly.edit.' + this.type;
             case 'create':
                return 'onthefly.create.title';
+            case 'addContact':
+               return 'onthefly.addContact.title';
          }
       },
       titleMessage() {
@@ -231,4 +234,8 @@ export default {
 a {
    cursor: pointer;
 }
+
+/* .btn-add-contact {
+   background-color: pink;
+} */
 </style>

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

@@ -24,8 +24,8 @@
         :options="{ displayLong: true }">
       </badge-entity>
       <on-the-fly
+          v-bind:parent="item.result"
           action="addContact"
-          :parent="item.result"
       ></on-the-fly>
       <on-the-fly
           type="thirdparty"

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

@@ -19,9 +19,15 @@
          ></third-party-render-box>
       </div>
    </div>
-   <div v-else-if="action === 'edit' || action === 'create'">
-
-      <div class="form-floating mb-3" v-if="thirdparty.kind !== 'child'">
+   <div v-else-if="action === 'edit' || action === 'create' || action === 'addContact'">
+      <div v-if="parent">
+         <div class="parent-info">
+            <i class="fa fa-li fa-hand-o-right"></i>
+            <b class="me-2">{{ $t('child_of') }}</b>
+            <span class="chill-entity badge-thirdparty">{{ parent.text }}</span>
+         </div>
+      </div>
+      <div class="form-floating mb-3" v-else-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">
@@ -42,23 +48,9 @@
          </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"
+         <!-- <p>Contact de&nbsp;:</p> -->
+         <third-party-render-box
+            :thirdparty="thirdparty"
             :options="{
                   addInfo: true,
                   addEntity: false,
@@ -72,13 +64,31 @@
                   isMultiline: false
             }"></third-party-render-box>
       </div>
+
+      <div v-if="parent" id="child-info">
+         <div class="input-group mb-3">
+            <span class="input-group-text" id="comment"><i class="fa fa-fw fa-user-circle-o"></i></span>
+            <select class="form-select form-select-lg" id="civility">
+               <option selected disabled >{{ $t('thirdparty.profession') }}</option>
+               <option v-for="profession in professions" :key="profession.id" :value="profession.id">{{ profession.name.fr }}</option>
+            </select>
+         </div>
+         <div class="input-group mb-3">
+            <span class="input-group-text" id="comment"><i class="fa fa-fw fa-briefcase"></i></span>
+            <select class="form-select form-select-lg" id="profession">
+               <option selected disabled >{{ $t('thirdparty.civility') }}</option>
+               <option v-for="civility in civilities" :key="civility.id" :value="civility.id">{{ civility.name.fr }}</option>
+            </select>
+         </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'">
+         v-if="thirdparty.kind !== 'child' || parent">
          <add-address
             key="thirdparty"
             :context="context"
@@ -106,6 +116,14 @@
             aria-describedby="phonenumber" />
       </div>
 
+      <div v-if="parent">
+         <div class="input-group mb-3">
+            <span class="input-group-text" id="comment"><i class="fa fa-fw fa-pencil"></i></span>
+            <textarea class="form-control form-control-lg"
+               v-bind:placeholder="$t('thirdparty.comment')"
+            ></textarea>
+         </div>
+      </div>
    </div>
 </template>
 
@@ -114,10 +132,11 @@ import ThirdPartyRenderBox from '../Entity/ThirdPartyRenderBox.vue';
 import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress';
 import { getThirdparty } from '../../_api/OnTheFly';
 import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
 
 export default {
    name: "OnTheFlyThirdParty",
-   props: ['id', 'type', 'action'],
+   props: ['id', 'type', 'action', 'parent'],
    components: {
       ThirdPartyRenderBox,
       AddAddress,
@@ -129,6 +148,8 @@ export default {
          thirdparty: {
             type: 'thirdparty',
          },
+         professions: [],
+         civilities: [],
          addAddress: {
             options: {
                openPanesInModal: true,
@@ -137,27 +158,27 @@ export default {
                   size: 'btn-sm'
                },
                title: {
-                   create: 'add_an_address_title',
-                   edit: 'edit_address'
+                  create: 'add_an_address_title',
+                  edit: 'edit_address'
                }
             }
          }
       }
    },
    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;
-           }
-       },
+      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: {
@@ -168,10 +189,10 @@ export default {
             addressId: null
          };
          if ( !(this.thirdparty.address === undefined || this.thirdparty.address === null)
-             && this.thirdparty.address.address_id !== null
+            && this.thirdparty.address.address_id !== null
          ) { // to complete
-             context.addressId = this.thirdparty.address.address_id;
-             context.edit = true;
+            context.addressId = this.thirdparty.address.address_id;
+            context.edit = true;
          }
          console.log('context', context);
          //this.context = context; <--
@@ -185,30 +206,58 @@ export default {
             this.thirdparty.kind = thirdparty.kind;
             //console.log('get thirdparty', thirdparty);
             if (this.action !== 'show') {
-                if (thirdparty.address !== null) {
-                    // bof! we force getInitialAddress because addressId not available when mounted
-                    this.$refs.addAddress.getInitialAddress(thirdparty.address.address_id);
-                }
+               if (thirdparty.address !== null) {
+                  // bof! we force getInitialAddress because addressId not available when mounted
+                  this.$refs.addAddress.getInitialAddress(thirdparty.address.address_id);
+               }
             }
             resolve();
          }));
       },
+      loadCivilities() {
+         const url = `/api/1.0/main/civility.json`;
+            makeFetch('GET', url)
+               .then(response => {
+                  console.log(response)
+                  this.$data.civilities = response.results;
+               })
+               .catch((error) => {
+                  console.log(error)
+                  // this.$toast.open({message: error.body})
+               })
+      },
+      loadProfessions() {
+         const url = `/api/1.0/thirdparty/professions.json`;
+            makeFetch('GET', url)
+               .then(response => {
+                  console.log(response)
+                  this.$data.professions = response.results;
+               })
+               .catch((error) => {
+                  console.log(error)
+                  // this.$toast.open({message: error.body})
+               })
+      },
       submitAddress(payload) {
          console.log('submitAddress', payload);
           if (typeof payload.addressId !== 'undefined') { // <--
-              this.context.edit = true;
-              this.context.addressId = payload.addressId; // bof! use legacy and not legacy in payload
-              this.thirdparty.address = payload.address;  // <--
-              console.log('switch address to edit mode', this.context);
-          }
+            this.context.edit = true;
+            this.context.addressId = payload.addressId; // bof! use legacy and not legacy in payload
+            this.thirdparty.address = payload.address;  // <--
+            console.log('switch address to edit mode', this.context);
+         }
       }
    },
    mounted() {
-      //console.log('mounted', this.action);
+      console.log('mounted', this.action);
       if (this.action !== 'create') {
          this.loadData();
+         if (this.action === 'addContact') {
+            this.loadProfessions();
+            this.loadCivilities();
+         }
       } else {
-          this.thirdparty.kind = 'company';
+         this.thirdparty.kind = 'company';
       }
    },
 }
@@ -229,5 +278,12 @@ dl {
       margin-left: 1em;
    }
 }
+.parent-info {
+   margin-bottom: 1rem;
+}
+
+#child-info {
+   display: flex;
+}
 </style>