Merge branch 'person_renderbox_thirdparty_onthefly' into post-prototypage

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

@@ -1,22 +1,109 @@
 <template>
-   <div v-if="action === 'show'">
-      show
-      thirdparty
-      {{ id }}
+  <div v-if="action === 'show'">
+      <div class="flex-table">
+         <third-party-render-box
+            :thirdparty="thirdparty"
+            :options="{
+               addInfo: true,
+               addEntity: false,
+               addAltNames: true,
+               addId: true,
+               addLink: false,
+               addAge: false,
+               hLevel: 3,
+               addCenter: true,
+               addNoData: true,
+               isMultiline: true
+            }"
+         ></third-party-render-box>
+      </div>
    </div>
    <div v-else-if="action === 'edit' || action === 'create'">
-      {{ action }}
-      thirdparty
-      {{ id }}
+      
+      <div class="form-floating mb-3">
+         <input class="form-control form-control-lg" id="firstname" v-model="thirdparty.firstName" v-bind:placeholder="$t('thirdparty.firstname')" />
+         <label for="firstname">{{ $t('thirdparty.firstname') }}</label>
+      </div>
+
+      <div class="form-floating mb-3">
+         <input class="form-control form-control-lg" id="lastname" v-model="thirdparty.lastName" v-bind:placeholder="$t('thirdparty.lastname')" />
+         <label for="lastname">{{ $t('thirdparty.lastname') }}</label>
+      </div>
+
+      <div class="input-group mb-3">
+         <span class="input-group-text" id="email"><i class="fa fa-fw fa-envelope"></i></span>
+         <input class="form-control form-control-lg"
+            v-model="thirdparty.email"
+            v-bind:placeholder="$t('thirdparty.email')"
+            v-bind:aria-label="$t('thirdparty.email')"
+            aria-describedby="email" />
+      </div>
+
+      <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.phonenumber"
+            v-bind:placeholder="$t('thirdparty.phonenumber')"
+            v-bind:aria-label="$t('thirdparty.phonenumber')"
+            aria-describedby="phonenumber" />
+      </div>
+
    </div>
 </template>
 
 <script>
+import ThirdPartyRenderBox from '../Entity/ThirdPartyRenderBox.vue';
+import { getThirdparty, postThirdparty } from '../../_api/OnTheFly';
+
 export default {
    name: "OnTheFlyThirdParty",
-   props: ['id', 'type', 'action']
+   props: ['id', 'type', 'action'],
+   components: {
+      ThirdPartyRenderBox,
+   },
+   data: function() {
+      return {
+         thirdparty: {
+            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();
+      }
+   },
 }
 </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>
+