mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-21 15:13:50 +00:00
otf: prepare to create vue root component: moving files
This commit is contained in:
@@ -0,0 +1,91 @@
|
||||
<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" id="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" id="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 'ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue';
|
||||
import { postPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
|
||||
|
||||
export default {
|
||||
name: "OnTheFlyCreate",
|
||||
props: ['action'],
|
||||
components: {
|
||||
OnTheFlyPerson,
|
||||
OnTheFlyThirdparty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type: 'person' //by default
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
radioType: {
|
||||
set(type) {
|
||||
this.type = type;
|
||||
console.log('## type:', type, ', action:', this.action);
|
||||
},
|
||||
get() {
|
||||
return this.type;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isActive(tab) {
|
||||
return (this.type === tab) ? true : false;
|
||||
},
|
||||
castDataByType() {
|
||||
switch (this.radioType) {
|
||||
case 'person':
|
||||
return this.$refs.castPerson.$data.person;
|
||||
case 'thirdparty':
|
||||
let data = this.$refs.castThirdparty.$data.thirdparty;
|
||||
data.name = data.text;
|
||||
data.address = { id: data.address.address_id }
|
||||
return data;
|
||||
default:
|
||||
throw Error('Invalid type of entity')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
|
||||
<a class="btn btn-sm" 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>
|
||||
<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';
|
||||
|
||||
export default {
|
||||
name: 'OnTheFly',
|
||||
components: {
|
||||
Modal,
|
||||
OnTheFlyPerson,
|
||||
OnTheFlyThirdparty,
|
||||
OnTheFlyCreate
|
||||
},
|
||||
props: ['type', 'id', 'action', 'buttonText'],
|
||||
emits: ['saveFormOnTheFly'],
|
||||
data() {
|
||||
return {
|
||||
modal: {
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-dialog-scrollable modal-xl"
|
||||
},
|
||||
//action: this.action
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classAction() {
|
||||
switch (this.action) {
|
||||
case 'show':
|
||||
return 'btn-show';
|
||||
case 'edit':
|
||||
return 'btn-update';
|
||||
case 'create':
|
||||
return 'btn-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';
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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;
|
||||
break;
|
||||
|
||||
default:
|
||||
if (typeof this.type === 'undefined') { // action=create
|
||||
type = this.$refs.castNew.radioType;
|
||||
data = this.$refs.castNew.castDataByType();
|
||||
} else {
|
||||
throw 'error with object type';
|
||||
}
|
||||
}
|
||||
|
||||
// pass datas to parent
|
||||
this.$emit('saveFormOnTheFly', { type: type, data: data });
|
||||
|
||||
this.modal.showModal = false;
|
||||
},
|
||||
buildLocation(id, type) {
|
||||
if (type == 'person') {
|
||||
// TODO i18n
|
||||
return `/fr/person/${id}/general`;
|
||||
} else if (type == 'thirdparty') {
|
||||
return `/fr/thirdparty/thirdparty/${id}/show`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user