OnTheFly modal, Person Sub-component: create/edit form, show

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

@@ -20,7 +20,8 @@
             <on-the-fly-person
                v-bind:id="id"
                v-bind:type="type"
-               v-bind:action="action">
+               v-bind:action="action"
+               ref="castPerson">
             </on-the-fly-person>
          </template>
          
@@ -28,13 +29,15 @@
             <on-the-fly-thirdparty
                v-bind:id="id"
                v-bind:type="type"
-               v-bind:action="action">
+               v-bind:action="action"
+               ref="castThirdparty">
             </on-the-fly-thirdparty>
          </template>
          
          <template v-slot:body v-else>
             <on-the-fly-create
-               v-bind:action="action">
+               v-bind:action="action"
+               ref="castNew">
             </on-the-fly-create>
          </template>
             
@@ -44,7 +47,10 @@
                class="sc-button bt-update"> <!-- @click.prevent="$emit('..', ..)" -->
             </button>
             <button v-else
-               class="sc-button bt-save"> <!-- @click.prevent="$emit('..', ..)" -->
+               class="sc-button bt-save"
+               @click="saveAction"
+               > <!--  
+               -->
                {{ $t('action.save')}}
             </button>
          </template>
@@ -55,8 +61,8 @@
 </template>
 
 <script>
-import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
-import OnTheFlyPerson from './OnTheFly/Person.vue';
+import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
 import OnTheFlyThirdparty from './OnTheFly/ThirdParty.vue';
 import OnTheFlyCreate from './OnTheFly/Create.vue';
 
@@ -123,6 +129,16 @@ export default {
       changeActionTo(action) {
          // [BUG] clic first on show item button; in modal clic edit button; close modal; clic again on show item button
          this.$data.action = action; 
+      },
+      saveAction() {
+         console.log('saveAction');
+         if (this.type === 'person') {
+            this.$refs.castPerson.postData();
+         } else if (this.type === 'thirdparty') {
+            this.$refs.castThirdparty.postData();
+         } else {
+            this.$refs.castNew.castByType();
+         }
       }
    }
 }

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Create.vue

@@ -21,19 +21,21 @@
    <div class="my-4">
       <on-the-fly-person
          v-if="type === 'person'"
-         v-bind:action="action">
+         v-bind:action="action"
+         ref="castPerson">
       </on-the-fly-person>
       
       <on-the-fly-thirdparty
          v-if="type === 'thirdparty'"
-         v-bind:action="action">
+         v-bind:action="action"
+         ref="castThirdparty">
       </on-the-fly-thirdparty>
    </div>      
 </template>
 
 <script>
-import OnTheFlyPerson from './Person.vue';
+import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
-import OnTheFlyThirdparty from './ThirdParty.vue';
+import OnTheFlyThirdparty from './ThirdParty.vue'; // TODO move in ChillThirdpartyAssets
 
 export default {
    name: "OnTheFlyCreate",
@@ -44,7 +46,7 @@ export default {
    },
    data() {
       return {
-         type: 'person'
+         type: 'person' //by default
       }
    },
    computed: {
@@ -60,8 +62,17 @@ export default {
    methods: {
       isActive(tab) {
          return (this.type === tab) ? true : false; 
+      },
+      castByType() {
+         console.log('saveActionByType');
+         if (this.type === 'person') {
+            this.$refs.castPerson.postData();
+         } else if (this.type === 'thirdparty') {
+            this.$refs.castThirdparty.postData();
+         } else {
+            throw Error('Invalid type of entity');
+         }
       }
-      
    }
 }
 </script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue

@@ -1,22 +0,0 @@
-<template>
-   <div v-if="action === 'show'">
-      show
-      person
-      {{ id }}
-   </div>
-   <div v-else-if="action === 'edit' || action === 'create'">
-      {{ action }}
-      person 
-      {{ id }}
-   </div>
-</template>
-
-<script>
-export default {
-   name: "OnTheFlyPerson",
-   props: ['id', 'type', 'action']
-}
-</script>
-
-<style lang="css" scoped>
-</style>

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

@@ -16,6 +16,7 @@ export default {
    name: "OnTheFlyThirdParty",
    props: ['id', 'type', 'action']
 }
+// TODO move in ChillThirdpartyAssets
 </script>
 
 <style lang="css" scoped>

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

@@ -0,0 +1,48 @@
+/*
+* GET a person by id
+*/
+const getPerson = (id) => {
+   const url = `/api/1.0/person/person/${id}.json`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response');
+      });
+};
+
+/*
+* GET a thirdparty by id
+* TODO move in ChillThirdpartyAssets !!
+*/
+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 person
+*/
+const postPerson = (body) => {
+   const url = `/api/1.0/person/person.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 { 
+   getPerson, 
+   getThirdparty,
+   postPerson 
+};

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

@@ -69,7 +69,7 @@
                   <on-the-fly
                      v-if="query.length >= 3" 
                      v-bind:buttonText="$t('onthefly.create.button', {q: query})"
-                     action="create">
+                     action="create"><!-- TODO first close this modal -->
                   </on-the-fly>
                </div>
                
@@ -177,7 +177,7 @@ export default {
          if (query.length >= 3) {
             searchPersons_2({ query, options: this.options })
                .then(suggested => new Promise((resolve, reject) => {
-                  console.log('suggested', suggested);
+                  //console.log('suggested', suggested);
                   this.loadSuggestions(suggested.results);
                   resolve();
             }));
@@ -186,14 +186,14 @@ export default {
          }
       },
       loadSuggestions(suggested) { 
-         console.log('suggested', suggested);
+         //console.log('suggested', suggested);
          this.search.suggested = suggested;
          this.search.suggested.forEach(function(item) {
             item.key = this.itemKey(item);
          }, this);
       },
       updateSelected(value) {
-         console.log('value', value);
+         //console.log('value', value);
          this.search.selected = value;
       },
       resetSearch() {

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

@@ -42,7 +42,7 @@ export default {
    computed: {
       selected: {
          set(value) {
-            console.log('value', value);
+            //console.log('value', value);
             this.$emit('updateSelected', value);
          },
          get() {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue

@@ -0,0 +1,210 @@
+<template>
+<div v-if="action === 'show'">
+   
+   <div class="flex-table">
+      <div class="item-bloc">
+         <div class="item-row">
+            <div class="item-col">
+               <h3 :title="person.id">{{ person.text }}</h3>
+               <p>
+                  <i class="fa fa-fw" 
+                     :class="genderClass">
+                     <!--
+                     :title="$t(genderTranslation)"
+                     -->
+                  </i>
+                  <span v-if="person.birthdate">
+                     {{ $t('person.born', { e: feminized }) }}
+                     {{ $d(person.birthdate.datetime, 'short') }}
+                  </span>
+               </p>
+            </div>
+            <div class="item-col">
+               <dl class="list-content"> 
+                  <dt>{{ $t('person.firstname') }}</dt>
+                  <dd>{{ person.firstName }}</dd>
+                  
+                  <dt>{{ $t('person.lastname') }}</dt>
+                  <dd>{{ person.lastName }}</dd>
+                  
+                  <dt>{{ $t('person.altnames') }}</dt>
+                  <dd>{{ person.altNames }}</dd>
+                  
+                  <span v-if="person.center">
+                     <dt>{{ $t('person.center_name') }}</dt>
+                     <dd :title="person.center.id">{{ person.center.name }}</dd>
+                  </span>
+                     
+                  <dt>{{ $t('person.phonenumber') }}</dt>
+                  <dd>{{ person.phonenumber }}</dd>
+                  
+                  <dt>{{ $t('person.mobilenumber') }}</dt>
+                  <dd>{{ person.mobilenumber }}</dd>
+                  
+                  <dt>{{ $t('person.gender.title') }}</dt>
+                  <!--
+                  <dd>{{ $t(genderTranslation) }}</dd>
+                  -->
+               </dl>
+            </div>
+         </div>
+      </div>
+   </div>   
+   
+</div>
+<div v-else-if="action === 'edit' || action === 'create'">
+   {{ action }}
+   
+   <input v-model="firstName" :placeholder="$t('person.firstname')" />
+   <input v-model="lastName" :placeholder="$t('person.lastname')" />
+   
+   <!--  TODO fix placeholder if undefined 
+         TODO dynamically get gender options
+   -->
+   <select v-model="gender">
+      <option disabled value="">{{ $t('person.gender.placeholder') }}</option> 
+      <option value="woman">{{ $t('person.gender.woman') }}</option>
+      <option value="man">{{ $t('person.gender.man') }}</option>
+      <option value="neuter">{{ $t('person.gender.neuter') }}</option>  
+   </select>
+   
+   <!--
+   <input 
+      type="text"
+      id="chill_personbundle_person_birthdate" 
+      name="chill_personbundle_person[birthdate]" 
+      required="required"
+      class="input datepicker"
+      v-model="birthDate"
+      aria-label="Use the arrow keys to pick a date"
+      />
+   <datepicker v-model="birthDate" />
+   -->
+   
+   <i class="fa fa-phone">
+   </i><input v-model="phonenumber" :placeholder="$t('person.phonenumber')" />
+   <i class="fa fa-mobile">
+   </i><input v-model="mobilenumber" :placeholder="$t('person.mobilenumber')" />
+   
+</div>
+</template>
+
+<script>
+import { getPerson, postPerson } from '../../_api/OnTheFly';
+//import Datepicker from 'vue3-datepicker';
+//import { ref } from 'vue';
+//const picked = ref(new Date())
+
+export default {
+   name: "OnTheFlyPerson",
+   props: ['id', 'type', 'action'],
+   data() {
+      return {
+         person: {
+            type: 'person'
+         }
+      }
+   },
+   computed: {
+      firstName: {
+         set(value) { this.person.firstName = value; },
+         get() { return this.person.firstName; }
+      },
+      lastName: {
+         set(value) { this.person.lastName = value; },
+         get() { return this.person.lastName; }
+      },
+      gender: {
+         set(value) { this.person.gender = value; },
+         get() { return this.person.gender; } 
+      },
+//      birthDate: {
+//         set(value) { this.person.birthdate.datetime = value; },
+//         get() { 
+//            if (this.person.birthdate) {
+//               let datetime = this.person.birthdate.datetime;
+//               return datetime.getDate() + '-' +  (datetime.getMonth() + 1) + '-' + datetime.getFullYear();
+//            } else {
+//               return ref(new Date());
+//            }
+//         } 
+//      },
+      phonenumber: {
+         set(value) { this.person.phonenumber = value; },
+         get() { return this.person.phonenumber; }
+      },
+      mobilenumber: {
+         set(value) { this.person.mobilenumber = value; },
+         get() { return this.person.mobilenumber; }
+      },
+      genderClass() {
+         switch (this.person.gender) {
+            case 'woman':
+               return 'fa-venus';
+            case 'man':
+               return 'fa-mars';
+            case 'neuter':
+               return 'fa-neuter';
+         }
+      },
+      genderTranslation() {
+         switch (this.person.gender) {
+            case 'woman':
+               return 'person.gender.woman';
+            case 'man':
+               return 'person.gender.man';
+            case 'neuter':
+               return 'person.gender.neuter';
+         }
+      },
+      feminized() {
+         return (this.person.gender === 'woman')? 'e' : ''; 
+      }
+   },
+   mounted() {
+      if (this.action !== 'create') {
+         this.loadData();
+      }
+   },
+   methods: {
+      loadData() {
+         //console.log('loading data', this.id);
+         getPerson(this.id)
+            .then(person => new Promise((resolve, reject) => {
+               this.person = person;
+               //console.log('person', this.person);
+               resolve();
+         }));
+      },
+      postData() {
+         postPerson(this.person)
+            .then(person => new Promise((resolve, reject) => {
+               this.person = person;
+               console.log('person', person);
+               resolve();
+         }));
+      }
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+ul {
+   li::marker {
+   }
+}
+div.flex-table {
+   div.item-bloc {
+      div.item-row {
+         div.item-col:last-child {
+            justify-content: flex-start;
+         }
+      }
+   }
+}
+dl {
+   dd {
+      margin-left: 1em;
+   }
+}
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_js/i18n.js

@@ -15,7 +15,21 @@ const personMessages = {
       person: {
          firstname: "Prénom",
          lastname: "Nom",
-         born: "né le ",
+         born: "né{e} le ",
+         center_id: "Identifiant du centre",
+         center_type: "Type de centre",
+         center_name: "Territoire", // vendée
+         phonenumber: "Téléphone",
+         mobilenumber: "Mobile",
+         altnames: "Autres noms",
+         gender: {
+            title: "Genre",
+            placeholder: "Choisissez le genre de l'usager",
+            woman: "Femme",
+            man: "Homme",
+            neuter: "Neutre",
+         }
+         
       },
       error_only_one_person: "Une seule personne peut être sélectionnée !"
    }

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig

@@ -31,7 +31,7 @@
                             {% set gender = (p.person.gender == 'woman') ? 'fa-venus' : 
                                 (p.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
                             {% set genderTitle = (p.person.gender == 'woman') ? 'femme' : 
-                                (p.person.gender == 'homme') ? 'fa-mars' : 'neutre' %}
+                                (p.person.gender == 'man') ? 'homme' : 'neutre' %}
                             <i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ p.person.birthdate|format_date('short') }}
                         </p>
                     </div>