chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/OnTheFly.vue

<template>

   <a v-if="isDisplayBadge" @click="openModal">
      <span class="chill-entity" :class="badgeType">
         {{ buttonText }}<span v-if="isDead"> (‡)</span>
      </span>
   </a>
   <a v-else class="btn btn-sm" target="_blank"
      :class="classAction"
      :title="$t(titleAction)"
      @click="openModal">
      {{ buttonText }}<span v-if="isDead"> (‡)</span>
   </a>

   <teleport to="body">
      <modal v-if="modal.showModal"
         :modalDialogClass="modal.modalDialogClass"
         @close="modal.showModal = false">

         <template v-slot:header>
            <h3 v-if="parent" class="modal-title">{{ $t(titleModal, {q: parent.text}) }}</h3>
            <h3 v-else class="modal-title">{{ $t(titleModal) }}</h3>
         </template>

         <template v-slot:body v-if="type === 'person'">
            <on-the-fly-person
               :id="id"
               :type="type"
               :action="action"
               ref="castPerson">
            </on-the-fly-person>
            <div v-if="hasResourceComment">
               <h3>{{ $t('onthefly.resource_comment_title') }}</h3>
               <blockquote class="chill-user-quote">
                  {{ parent.comment }}
               </blockquote>
            </div>
         </template>

         <template v-slot:body v-else-if="type === 'thirdparty'">
            <on-the-fly-thirdparty
               :id="id"
               :type="type"
               :action="action"
               ref="castThirdparty">
            </on-the-fly-thirdparty>
            <div v-if="hasResourceComment">
               <h3>{{ $t('onthefly.resource_comment_title') }}</h3>
               <blockquote class="chill-user-quote">
                  {{ parent.comment }}
               </blockquote>
            </div>
         </template>

         <template v-slot:body v-else-if="parent">
            <on-the-fly-thirdparty
               :parent="parent"
               :action="action"
               type="thirdparty"
               ref="castThirdparty">
            </on-the-fly-thirdparty>
         </template>

         <template v-slot:body v-else>
            <on-the-fly-create
               :action="action"
               :allowedTypes="allowedTypes"
               :query="query"
               ref="castNew">
            </on-the-fly-create>
         </template>

         <template v-slot:footer>
            <a v-if="action === 'show'"
               :href="buildLocation(id, type)"
               :title="$t(titleMessage)"
               class="btn btn-show">{{ $t(buttonMessage) }}
            </a>
            <a v-else
               class="btn btn-save"
               @click="saveAction">
               {{ $t('action.save')}}
            </a>
         </template>

      </modal>
   </teleport>

</template>

<script>
import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
import OnTheFlyCreate from './Create.vue';
import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
import OnTheFlyThirdparty from 'ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue';
import { postThirdparty } from "ChillThirdPartyAssets/vuejs/_api/OnTheFly";

export default {
   name: 'OnTheFly',
   components: {
      Modal,
      OnTheFlyPerson,
      OnTheFlyThirdparty,
      OnTheFlyCreate
   },
   props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'isDead', 'parent', 'allowedTypes', 'query'],
   emits: ['saveFormOnTheFly'],
   data() {
      return {
         modal: {
            showModal: false,
            modalDialogClass: "modal-dialog-scrollable modal-xl"
         }
      }
   },
   computed: {
      hasResourceComment() {
         return (typeof this.parent !== 'undefined' && this.parent !== null)
            && this.action === 'show'
            && this.parent.type === 'accompanying_period_resource'
            && (this.parent.comment !== null && this.parent.comment !== '')
            ;
      },
      classAction() {
         switch (this.action) {
            case 'show':
               return 'btn-show';
            case 'edit':
               return 'btn-update';
            case 'create':
               return 'btn-create';
            case 'addContact':
               return 'btn-tpchild';
         }
      },
      titleAction() {
         switch (this.action) {
            case 'show':
               return 'action.show';
            case 'edit':
               return 'action.edit';
            case 'create':
               return 'action.create';
            case 'addContact':
               return 'action.addContact';
         }
      },
      titleCreate() {
         return this.allowedTypes.every(t => t === 'person')
            ? 'onthefly.create.title.person'
            : this.allowedTypes.every(t => t === 'thirdparty')
               ? 'onthefly.create.title.thirdparty'
               : 'onthefly.create.title.default'
      },
      titleModal() {
         switch (this.action) {
            case 'show':
               return 'onthefly.show.' + this.type;
            case 'edit':
               return 'onthefly.edit.' + this.type;
            case 'create':
               return this.titleCreate;
            case 'addContact':
               return 'onthefly.addContact.title';
         }
      },
      titleMessage() {
         switch (this.type){
            case 'person':
               return 'action.redirect.' + this.type;
            case 'thirdparty':
               return 'action.redirect.' + this.type;
         }
      },
      buttonMessage() {
         switch (this.type){
            case 'person':
               return 'onthefly.show.file_' + this.type;
            case 'thirdparty':
               return 'onthefly.show.file_' + this.type;
         }
      },
      isDisplayBadge() {
         return (this.displayBadge === true && this.buttonText !== null);
      },
      badgeType() {
         return 'entity-' + this.type + ' badge-' + this.type;
      },
      getReturnPath() {
         return `?returnPath=${window.location.pathname}${window.location.search}${window.location.hash}`;
      },
   },
   methods: {
      closeModal() {
         this.modal.showModal = false;
      },
      openModal() {
         // console.log('## OPEN ON THE FLY MODAL');
         // console.log('## type:', this.type, ', action:', this.action);
         this.modal.showModal = true;
         this.$nextTick(function() {
            //this.$refs.search.focus();
         })
      },
      changeActionTo(action) {
         this.$data.action = action;
      },
      saveAction() {
         // console.log('saveAction button: create/edit action with', this.type);
         let
            type = this.type,
            data = {} ;

         switch (type) {
            case 'person':
               data = this.$refs.castPerson.$data.person;
               break;

            case 'thirdparty':
               data = this.$refs.castThirdparty.$data.thirdparty;
               /* never executed ? */
               break;

            default:
               if (typeof this.type === 'undefined') { // action=create or addContact
                   console.log('will rewrite data');
                  if (this.action === 'addContact') {
                     type = 'thirdparty'
                     data = this.$refs.castThirdparty.$data.thirdparty;
                     console.log('data original', data);
                     data.parent = {type: "thirdparty", id: this.parent.id};
                  } else {
                     type = this.$refs.castNew.radioType;
                     data = this.$refs.castNew.castDataByType();
                     console.log(data)
                  }
               } else {
                  throw 'error with object type';
               }
         }
         console.log('type', type);
         console.log('data', data);
         // pass datas to parent
         this.$emit('saveFormOnTheFly', { type: type, data: data });
      },
      buildLocation(id, type) {
         if (type === 'person') {
            // TODO i18n
            return encodeURI(`/fr/person/${id}/general${this.getReturnPath}`);
         } else if (type === 'thirdparty') {
            return encodeURI(`/fr/3party/3party/${id}/view${this.getReturnPath}`);
         }
      }
   }
}
</script>

<style lang="css" scoped>
a {
   cursor: pointer;
}

/* .btn-add-contact {
   background-color: pink;
} */
</style>