v-model added so data is taken from the form for all fields + modal title correction

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

@@ -18,7 +18,8 @@
          @close="modal.showModal = false">
 
          <template v-slot:header>
-            <h3 class="modal-title">{{ $t(titleModal) }}</h3>
+            <h3 v-if="parent" class="modal-title">{{ $t(titleModal, {q: parent.text}) }}</h3>
+            <h3 v-else class="modal-title">{{ $t(titleModal) }}</h3>
          </template>
 
          <template v-slot:body v-if="type === 'person'">
@@ -56,7 +57,7 @@
                :parent="parent"
                :action="action"
                type="thirdparty"
-               ref="castNew">
+               ref="castThirdparty">
             </on-the-fly-thirdparty>
          </template>
 
@@ -179,8 +180,8 @@ export default {
    },
    methods: {
       openModal() {
-         //console.log('## OPEN ON THE FLY MODAL');
+         // console.log('## OPEN ON THE FLY MODAL');
-         //console.log('## type:', this.type, ', action:', this.action);
+         // console.log('## type:', this.type, ', action:', this.action);
          this.modal.showModal = true;
          this.$nextTick(function() {
             //this.$refs.search.focus();
@@ -190,7 +191,7 @@ export default {
          this.$data.action = action;
       },
       saveAction() {
-         console.log('saveAction button: create/edit action with', this.type);
+         // console.log('saveAction button: create/edit action with', this.type);
          let
             type = this.type,
             data = {} ;
@@ -205,14 +206,20 @@ export default {
                break;
 
             default:
-               if (typeof this.type === 'undefined') { // action=create
+               if (typeof this.type === 'undefined') { // action=create or addContact
-                  type = this.$refs.castNew.radioType;
+                  if (this.action === 'addContact') {
-                  data = this.$refs.castNew.castDataByType();
+                     type = 'thirdparty'
+                     data = this.$refs.castThirdparty.$data.thirdparty;
+                     // console.log(data)
+                  } else {
+                     type = this.$refs.castNew.radioType;
+                     data = this.$refs.castNew.castDataByType();
+                  }
                } else {
                   throw 'error with object type';
                }
          }
-
+         console.log('type', type, 'data', data)
          // pass datas to parent
          this.$emit('saveFormOnTheFly', { type: type, data: data });
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/i18n.js

@@ -18,7 +18,7 @@ const ontheflyMessages = {
                 thirdparty: "un nouveau tiers professionnel"
             },
             addContact: {
-                title: "Créer un contact pour ..."
+                title: "Créer un contact pour {q}"
             }
             resource_comment_title: "Un commentaire est associé à cet interlocuteur"
         }

src/Bundle/ChillThirdPartyBundle/Entity/ThirdParty.php

@@ -126,13 +126,14 @@ class ThirdParty implements TrackCreationInterface, TrackUpdateInterface
      * @var Civility
      * @ORM\ManyToOne(targetEntity=Civility::class)
      * ORM\JoinColumn(name="civility", referencedColumnName="id", nullable=true)
-     * @Groups({"docgen:read", "read", "docgen:read:3party:parent"})
+     * @Groups({"docgen:read", "read", "write", "docgen:read:3party:parent"})
      * @Context(normalizationContext={"groups": "docgen:read"}, groups={"docgen:read:3party:parent"})
      */
     private ?Civility $civility = null;
 
     /**
      * @ORM\Column(name="comment", type="text", nullable=true)
+     * @Groups({"read", "write"})
      */
     private ?string $comment = null;
 
@@ -198,7 +199,7 @@ class ThirdParty implements TrackCreationInterface, TrackUpdateInterface
      *
      * @ORM\ManyToOne(targetEntity="Chill\ThirdPartyBundle\Entity\ThirdParty", inversedBy="children")
      * @ORM\JoinColumn(name="parent_id", referencedColumnName="id")
-     * @Groups({"read", "docgen:read"})
+     * @Groups({"read", "write", "docgen:read"})
      * @Context(normalizationContext={"groups": "docgen:read:3party:parent"}, groups={"docgen:read"})
      */
     private ?ThirdParty $parent = null;

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

@@ -65,20 +65,27 @@
             }"></third-party-render-box>
       </div>
 
-      <div v-if="parent" id="child-info">
+      <div v-if="parent">
          <div class="input-group mb-3">
-            <span class="input-group-text" id="comment"><i class="fa fa-fw fa-user-circle-o"></i></span>
+            <input type="hidden" name="parent_id" :value="parent.id" />
-            <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">
+         <div id="child-info">
-            <span class="input-group-text" id="comment"><i class="fa fa-fw fa-briefcase"></i></span>
+            <div class="input-group mb-3">
-            <select class="form-select form-select-lg" id="profession">
+               <!-- <span class="input-group-text" id="comment"><i class="fa fa-fw fa-briefcase"></i></span> -->
-               <option selected disabled >{{ $t('thirdparty.civility') }}</option>
+               <select class="form-select form-select-lg" id="profession" 
-               <option v-for="civility in civilities" :key="civility.id" :value="civility.id">{{ civility.name.fr }}</option>
+                  v-model="thirdparty.civility">
-            </select>
+                  <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 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" 
+                  v-model="thirdparty.profession">
+                  <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>
       </div>
 
@@ -121,6 +128,7 @@
             <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')"
+               v-model="thirdparty.comment"
             ></textarea>
          </div>
       </div>
@@ -218,7 +226,6 @@ export default {
          const url = `/api/1.0/main/civility.json`;
             makeFetch('GET', url)
                .then(response => {
-                  console.log(response)
                   this.$data.civilities = response.results;
                })
                .catch((error) => {
@@ -230,7 +237,6 @@ export default {
          const url = `/api/1.0/thirdparty/professions.json`;
             makeFetch('GET', url)
                .then(response => {
-                  console.log(response)
                   this.$data.professions = response.results;
                })
                .catch((error) => {
@@ -251,7 +257,9 @@ export default {
    mounted() {
       console.log('mounted', this.action);
       if (this.action !== 'create') {
-         this.loadData();
+         if (this.id) {
+            this.loadData();
+         }
          if (this.action === 'addContact') {
             this.loadProfessions();
             this.loadCivilities();
@@ -284,6 +292,10 @@ dl {
 
 #child-info {
    display: flex;
+   justify-content: space-between;
+   div {
+      width: 49%;
+   }
 }
 </style>