Merge branch 'master' into features/sql-vue-from-household-address-to-person

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

@@ -0,0 +1,153 @@
+<template>
+  
+   <a class="sc-button" target="_blank"
+      :class="classAction"
+      :title="$t(titleAction)"
+      @click="openModal">
+      {{ buttonText }}
+   </a>
+  
+   <teleport to="body">
+      <modal v-if="modal.showModal"
+         :modalDialogClass="modal.modalDialogClass"
+         @close="modal.showModal = false">
+         
+         <template v-slot:header>
+            <h3 class="modal-title">{{ $t(titleModal) }}</h3>
+         </template>
+         
+         <template v-slot:body v-if="type === 'person'">
+            <on-the-fly-person
+               v-bind:id="id"
+               v-bind:type="type"
+               v-bind:action="action"
+               ref="castPerson">
+            </on-the-fly-person>
+         </template>
+         
+         <template v-slot:body v-else-if="type === 'thirdparty'">
+            <on-the-fly-thirdparty
+               v-bind:id="id"
+               v-bind:type="type"
+               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"
+               ref="castNew">
+            </on-the-fly-create>
+         </template>
+            
+         <template v-slot:footer>
+            <button v-if="action === 'show'"
+               @click="changeActionTo('edit')"
+               class="sc-button bt-update"> <!-- @click.prevent="$emit('..', ..)" -->
+            </button>
+            <button v-else
+               class="sc-button bt-save"
+               @click="saveAction"
+               > <!--  
+               -->
+               {{ $t('action.save')}}
+            </button>
+         </template>
+         
+      </modal>
+   </teleport>
+   
+</template>
+
+<script>
+import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
+import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
+import OnTheFlyThirdparty from './OnTheFly/ThirdParty.vue';
+import OnTheFlyCreate from './OnTheFly/Create.vue';
+
+export default {
+   name: 'OnTheFly',
+   components: {
+      Modal,
+      OnTheFlyPerson,
+      OnTheFlyThirdparty,
+      OnTheFlyCreate
+   },
+   props: ['type', 'id', 'action', 'buttonText'],
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-xl"
+         },
+         action: this.action
+      }
+   },
+   computed: {
+      action() {
+         return this.$data.action;
+      },
+      classAction() {
+         switch (this.action) {
+            case 'show':
+               return 'bt-show';
+            case 'edit':
+               return 'bt-update';
+            case 'create':
+               return 'bt-create';
+         }
+      },
+      titleAction() {
+         switch (this.action) {
+            case 'show':
+               return 'action.show';
+            case 'edit':
+               return 'action.edit';
+            case 'create':
+               return 'action.create';
+         }
+      },
+      titleModal() {
+         switch (this.action) {
+            case 'show':
+               return 'onthefly.show.' + this.type;
+            case 'edit':
+               return 'onthefly.edit.' + this.type;
+            case 'create':
+               return 'onthefly.create.title';
+         }
+      }
+   },
+   methods: {
+      openModal() {
+         this.modal.showModal = true;
+         this.$nextTick(function() {
+            //this.$refs.search.focus();
+         })
+      },
+      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 {
+            // saveAction() ==cast=to==> child.castByType() ==cast=to==> grand-child.postData()
+            this.$refs.castNew.castByType();
+         }
+         this.modal.showModal = false;
+      }
+   }
+}
+</script>
+
+<style lang="css" scoped>
+a {
+   cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,84 @@
+<template>   
+   <ul class="nav nav-tabs">
+      <li class="nav-item">
+         <a class="nav-link" :class="{ active: isActive('person') }">
+            <label for="person">
+               <input type="radio" name="person" v-model="radioType" value="person">
+               {{ $t('onthefly.create.person') }}
+            </label>
+         </a>
+      </li>
+      <li class="nav-item">
+         <a class="nav-link" :class="{ active: isActive('thirdparty') }">
+            <label for="thirdparty">
+               <input type="radio" name="thirdparty" v-model="radioType" value="thirdparty">
+               {{ $t('onthefly.create.thirdparty') }}
+            </label>
+         </a>
+      </li>
+   </ul>
+   
+   <div class="my-4">
+      <on-the-fly-person
+         v-if="type === 'person'"
+         v-bind:action="action"
+         ref="castPerson">
+      </on-the-fly-person>
+      
+      <on-the-fly-thirdparty
+         v-if="type === 'thirdparty'"
+         v-bind:action="action"
+         ref="castThirdparty">
+      </on-the-fly-thirdparty>
+   </div>      
+</template>
+
+<script>
+import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
+import OnTheFlyThirdparty from './ThirdParty.vue'; // TODO move in ChillThirdpartyAssets
+
+export default {
+   name: "OnTheFlyCreate",
+   props: ['action'], 
+   components: {
+      OnTheFlyPerson,
+      OnTheFlyThirdparty
+   },
+   data() {
+      return {
+         type: 'person' //by default
+      }
+   },
+   computed: {
+      radioType: {
+         set(type) {
+            this.type = type;
+         },
+         get() {
+            return this.type;
+         }
+      }
+   },
+   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>
+
+<style lang="css" scoped>
+label {
+   cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,23 @@
+<template>
+   <div v-if="action === 'show'">
+      show
+      thirdparty
+      {{ id }}
+   </div>
+   <div v-else-if="action === 'edit' || action === 'create'">
+      {{ action }}
+      thirdparty 
+      {{ id }}
+   </div>
+</template>
+
+<script>
+export default {
+   name: "OnTheFlyThirdParty",
+   props: ['id', 'type', 'action']
+}
+// TODO move in ChillThirdpartyAssets
+</script>
+
+<style lang="css" scoped>
+</style>