Merge remote-tracking branch 'origin/master' into features/activity-form

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

@@ -65,9 +65,14 @@
                   @updateSelected="updateSelected">
                </person-suggestion>
 
-               <button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
-                  {{ $t('action.create') }} "{{ query }}"
-               </button>
+               <div class="create-button">
+                  <on-the-fly
+                     v-if="query.length >= 3" 
+                     v-bind:buttonText="$t('onthefly.create.button', {q: query})"
+                     action="create"><!-- TODO first close this modal -->
+                  </on-the-fly>
+               </div>
+               
             </div>
          </template>
 
@@ -84,6 +89,7 @@
 
 <script>
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
 import PersonSuggestion from './AddPersons/PersonSuggestion';
 import { searchPersons, searchPersons_2 } from 'ChillPersonAssets/vuejs/_api/AddPersons';
 
@@ -92,6 +98,7 @@ export default {
    components: {
       Modal,
       PersonSuggestion,
+      OnTheFly
    },
    props: [
       'buttonTitle',
@@ -170,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();
             }));
@@ -179,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() {
@@ -256,4 +263,8 @@ export default {
          }
       }
    }
+   .create-button > a {
+      margin-top: 0.5em;
+      margin-left: 2.6em;
+   }
 </style>

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/AddPersons/TypePerson.vue

@@ -14,22 +14,23 @@
       <span class="badge badge-pill badge-secondary" :title="item.key">
          {{ $t('item.type_person') }}
       </span>
-      <a class="sc-button bt-show" target="_blank" :title="item.key" :href="url.show"></a>
+      <on-the-fly
+         type="person"
+         v-bind:id="item.result.id"
+         action="show">
+      </on-the-fly>
       
    </div>
 </template>
 
 <script>
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+
 export default {
    name: 'SuggestionPerson',
-   props: ['item'],
-   data() {
-      return {
-         url: {
-            show: '/fr/person/' + this.item.result.person_id + '/general',
-            edit: '/fr/person/' + this.item.result.person_id + '/general/edit'
-         },
-      }
+   components: {
+      OnTheFly
    },
+   props: ['item']
 }
 </script>

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

@@ -15,22 +15,23 @@
       <span class="badge badge-pill badge-secondary" :title="item.key">
          {{ $t('item.type_thirdparty') }}
       </span>
-      <a class="sc-button bt-show" target="_blank" :title="item.key" :href="url.show"></a>
+      <on-the-fly
+         type="thirdparty"
+         v-bind:id="item.result.id"
+         action="show">
+      </on-the-fly>
       
    </div>
 </template>
 
 <script>
+import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
+
 export default {
    name: 'SuggestionThirdParty',
-   props: ['item'],
-   data() {
-      return {
-         url: {
-            show: '/fr/thirdparty/thirdparty/' + this.item.result.thirdparty_id + '/show',
-            edit: '/fr/thirdparty/thirdparty/' + this.item.result.thirdparty_id + '/edit'
-         },
-      }
+   components: {
+      OnTheFly
    },
+   props: ['item']
 }
 </script>

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

@@ -0,0 +1,200 @@
+<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'">
+   
+   <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>
+   
+   <i class="fa fa-birthday-cake"></i>
+   <input type="date"
+      id="chill_personbundle_person_birthdate" 
+      name="chill_personbundle_person[birthdate]" 
+      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';
+
+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) { 
+            if (this.person.birthdate) {
+               this.person.birthdate.datetime = value + "T00:00:00+0100"; 
+            } else {
+               this.person.birthdate = { datetime: value + "T00:00:00+0100"};
+            }
+         },
+         get() { 
+            return (this.person.birthdate) ? this.person.birthdate.datetime.split('T')[0] : ''; 
+         } 
+      },
+      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() {
+         getPerson(this.id)
+            .then(person => new Promise((resolve, reject) => {
+               this.person = person;
+               console.log('get person', this.person);
+               resolve();
+         }));
+      },
+      postData() {
+         postPerson(this.person)
+            .then(person => new Promise((resolve, reject) => {
+               this.person = person;
+               console.log('post 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>