make onTheFly with API call

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_api/OnTheFly.js

@@ -0,0 +1,36 @@
+/*
+* GET a thirdparty by id
+*/
+const getThirdparty = (id) => {
+   const url = `/api/1.0/thirdparty/thirdparty/${id}.json`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { 
+             return response.json(); 
+            }
+         throw Error('Error with request resource response');
+      });
+};
+
+/*
+* POST a new person
+*/
+const postThirdparty = (body) => {
+   const url = `/api/1.0/thirdparty/thirdparty.json`;
+   return fetch(url, {
+         method: 'POST',
+         headers: {
+           'Content-Type': 'application/json;charset=utf-8'
+         },
+         body: JSON.stringify(body)
+      })
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
+};
+   
+export { 
+   getThirdparty, 
+   postThirdparty 
+};

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

@@ -26,7 +26,7 @@
                     <time v-else-if="thirdparty.deathdate" datetime="{{ thirdparty.deathdate.datetime }}" title="{{ thirdparty.deathdate }}">
                         {{ birthdate }} - {{ deathdate }}
                     </time>
-                    <span class="age">{{ thirdparty.age }}</span>
+                    <span v-if="options.addAge == true" class="age">{{ thirdparty.age }}</span>
                 </p>
             </div>
         </div>
@@ -37,9 +37,9 @@
                     <i class="fa fa-li fa-map-marker"></i>
                     <show-address :address="thirdparty.address" :isMultiline="isMultiline"></show-address>
                 </li>
-                <li v-if="thirdparty.telephone">
+                <li v-if="thirdparty.phonenumber">
                     <i class="fa fa-li fa-mobile"></i>
-                    <a :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
+                    <a :href="'tel: ' + thirdparty.phonenumber">{{ thirdparty.phonenumber }}</a>
                 </li>
                 <li v-if="thirdparty.email">
                     <i class="fa fa-li fa-envelope-o"></i>

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

@@ -9,6 +9,7 @@
                addAltNames: true,
                addId: true,
                addLink: false,
+               addAge: false,
                hLevel: 3,
                addCenter: true,
                addNoData: true,
@@ -40,7 +41,7 @@
       <div class="input-group mb-3">
          <span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
          <input class="form-control form-control-lg"
-            v-model="thirdparty.telephone"
+            v-model="thirdparty.phonenumber"
             v-bind:placeholder="$t('thirdparty.phonenumber')"
             v-bind:aria-label="$t('thirdparty.phonenumber')"
             aria-describedby="phonenumber" />
@@ -50,7 +51,8 @@
 </template>
 
 <script>
-import ThirdPartyRenderBox from '../Entity/ThirdPartyRenderBox.vue'
+import ThirdPartyRenderBox from '../Entity/ThirdPartyRenderBox.vue';
+import { getThirdparty, postThirdparty } from '../../_api/OnTheFly';
 
 export default {
    name: "OnTheFlyThirdParty",
@@ -61,18 +63,47 @@ export default {
    data: function() {
       return {
          thirdparty: {
-            text : "Bart Maes",
-            firstName : "Bart",
-            lastName : "Maes",
-            email : "bartmaes@gmail.com",
-            telephone : "0475 94 66 15",
+            type: 'thirdparty'
          }
       }
-   }
+   },
+   methods: {
+      loadThirdparty(){
+         getThirdparty(this.id).then(thirdparty => new Promise((resolve, reject) => {
+            this.thirdparty = thirdparty;
+            resolve();
+         }));
+      },
+      postData() {
+         postThirdparty(this.thirdparty).then(thirdparty => new Promise((resolve, reject) => {
+            this.thirdparty = thirdparty;
+            resolve();
+         }))
+      }
+   },
+   mounted() {
+      if (this.action !== 'create'){
+         this.loadThirdparty();
+      }
+   },
 }
 // TODO move in ChillThirdpartyAssets
 </script>
 
-<style lang="css" scoped>
+<style lang="scss" scoped>
+div.flex-table {
+   div.item-bloc {
+      div.item-row {
+         div.item-col:last-child {
+            justify-content: flex-start;
+         }
+      }
+   }
+}
+dl {
+   dd {
+      margin-left: 1em;
+   }
+}
 </style>