mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-14 14:24:24 +00:00
use record_actions sticky-form-buttons
This commit is contained in:
Boris Waaub
parent
650d2596d9
commit
2a23bf19cb
@ -1,83 +1,102 @@
|
||||
<template>
|
||||
<div class="fixed-bottom">
|
||||
<div class="footer-ticket-details">
|
||||
<div class="footer-ticket-details" v-if="activeTab">
|
||||
<div class="tab-content p-2">
|
||||
|
||||
<div v-if="activeTab">
|
||||
<div>
|
||||
<label class="col-form-label">
|
||||
{{ $t(`${activeTab}.title`) }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'comment'">
|
||||
<div v-if="activeTab === 'comment'" class="p-2">
|
||||
<form @submit.prevent="createComment">
|
||||
<ckeditor
|
||||
name="content"
|
||||
:placeholder="$t('comment.content')"
|
||||
:editor="editor"
|
||||
v-model="content"
|
||||
tag-name="textarea">
|
||||
tag-name="textarea"
|
||||
>
|
||||
</ckeditor>
|
||||
|
||||
<div class="d-flex justify-content-end p-2">
|
||||
<button class="btn btn-chill-green text-white float-right" type="submit">
|
||||
<i class="fa fa-pencil"></i>
|
||||
{{ $t("comment.save") }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'transfert'">
|
||||
<form @submit.prevent="setAdressees" v-if="userGroups.length && users.length">
|
||||
<addressee-selector-component v-model="addressees" :user-groups="userGroups" :users="users" />
|
||||
<div class="d-flex justify-content-end p-1">
|
||||
<button class="btn btn-chill-green text-white float-right" type="submit">
|
||||
<i class="fa fa-pencil"></i>
|
||||
{{ $t("transfert.save") }}
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
@submit.prevent="setAdressees"
|
||||
v-if="userGroups.length && users.length"
|
||||
>
|
||||
<addressee-selector-component
|
||||
v-model="addressees"
|
||||
:user-groups="userGroups"
|
||||
:users="users"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'motive'">
|
||||
<form @submit.prevent="createMotive">
|
||||
|
||||
<motive-selector-component v-model="motive" :motives="motives" />
|
||||
<div class="d-flex justify-content-end p-1">
|
||||
<button class="btn btn-chill-green text-white float-right" type="submit">
|
||||
<i class="fa fa-pencil"></i>
|
||||
{{ $t("motive.save") }}
|
||||
</button>
|
||||
</div>
|
||||
<motive-selector-component
|
||||
v-model="motive"
|
||||
:motives="motives"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<ul class="record_actions sticky-form-buttons">
|
||||
<li class="cancel">
|
||||
<button @click="activeTab = ''" class="btn btn-cancel">
|
||||
{{ $t("ticket.cancel") }}
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="btn btn-update" type="submit">
|
||||
{{ $t("comment.save") }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-ticket-main">
|
||||
<ul class="nav nav-tabs justify-content-end">
|
||||
<li class="nav-item">
|
||||
<button type="button" class="m-2 btn btn-light" @click="activeTab = 'comment'">
|
||||
<button
|
||||
type="button"
|
||||
class="m-2 btn btn-light"
|
||||
@click="activeTab = 'comment'"
|
||||
>
|
||||
<i class="fa fa-plus"></i>
|
||||
{{ $t('comment.title') }}
|
||||
{{ $t("comment.title") }}
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button type="button" class="m-2 btn btn-light" @click="activeTab = 'transfert'">
|
||||
<button
|
||||
type="button"
|
||||
class="m-2 btn btn-light"
|
||||
@click="activeTab = 'transfert'"
|
||||
>
|
||||
<i class="fa fa-paper-plane"></i>
|
||||
{{ $t('transfert.title') }}
|
||||
{{ $t("transfert.title") }}
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button type="button" class="m-2 btn btn-light" @click="activeTab = 'motive'">
|
||||
<button
|
||||
type="button"
|
||||
class="m-2 btn btn-light"
|
||||
@click="activeTab = 'motive'"
|
||||
>
|
||||
<i class="fa fa-paint-brush"></i>
|
||||
{{ $t('motive.title') }}
|
||||
{{ $t("motive.title") }}
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button type="button" class="m-2 btn btn-light" @click="activeTab = ''">
|
||||
<button
|
||||
type="button"
|
||||
class="m-2 btn btn-light"
|
||||
@click="handleClick()"
|
||||
>
|
||||
<i class="fa fa-bolt"></i>
|
||||
Fermer
|
||||
{{ $t("ticket.close") }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@ -89,11 +108,15 @@
|
||||
import { computed, defineComponent, inject, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStore } from "vuex";
|
||||
import CKEditor from '@ckeditor/ckeditor5-vue';
|
||||
import CKEditor from "@ckeditor/ckeditor5-vue";
|
||||
import ClassicEditor from "../../../../../../../ChillMainBundle/Resources/public/module/ckeditor5";
|
||||
|
||||
// Types
|
||||
import { User, UserGroup, UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/public/types";
|
||||
import {
|
||||
User,
|
||||
UserGroup,
|
||||
UserGroupOrUser,
|
||||
} from "../../../../../../../ChillMainBundle/Resources/public/types";
|
||||
import { Comment, Motive, Ticket } from "../../../types";
|
||||
|
||||
// Component
|
||||
@ -110,29 +133,33 @@ export default defineComponent({
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const { t } = useI18n();
|
||||
const toast = inject('toast') as any;
|
||||
const toast = inject("toast") as any;
|
||||
const activeTab = ref("");
|
||||
|
||||
const ticket = computed(() => store.getters.getTicket as Ticket);
|
||||
const motives = computed(() => store.getters.getMotives as Motive[]);
|
||||
const userGroups = computed(() => store.getters.getUserGroups as UserGroup[]);
|
||||
const userGroups = computed(
|
||||
() => store.getters.getUserGroups as UserGroup[]
|
||||
);
|
||||
const users = computed(() => store.getters.getUsers as User[]);
|
||||
|
||||
const motive = ref(ticket.value.currentMotive ? ticket.value.currentMotive: {} as Motive);
|
||||
const content = ref('' as Comment["content"]);
|
||||
const motive = ref(
|
||||
ticket.value.currentMotive
|
||||
? ticket.value.currentMotive
|
||||
: ({} as Motive)
|
||||
);
|
||||
const content = ref("" as Comment["content"]);
|
||||
const addressees = ref([] as Array<UserGroupOrUser>);
|
||||
|
||||
|
||||
|
||||
async function createMotive() {
|
||||
try {
|
||||
await store.dispatch("createMotive", {
|
||||
ticketId: ticket.value.id,
|
||||
motive: motive.value,
|
||||
});
|
||||
toast.success(t("motive.success"))
|
||||
toast.success(t("motive.success"));
|
||||
} catch (error) {
|
||||
toast.error(error)
|
||||
toast.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
@ -143,9 +170,9 @@ export default defineComponent({
|
||||
content: content.value,
|
||||
});
|
||||
content.value = "";
|
||||
toast.success(t("comment.success"))
|
||||
toast.success(t("comment.success"));
|
||||
} catch (error) {
|
||||
toast.error(error)
|
||||
toast.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
@ -155,11 +182,14 @@ export default defineComponent({
|
||||
ticketId: ticket.value.id,
|
||||
addressees: addressees.value,
|
||||
});
|
||||
toast.success(t("transfert.success"))
|
||||
toast.success(t("transfert.success"));
|
||||
} catch (error) {
|
||||
toast.error(error)
|
||||
toast.error(error);
|
||||
}
|
||||
}
|
||||
function handleClick() {
|
||||
alert("Sera disponible plus tard");
|
||||
}
|
||||
|
||||
return {
|
||||
activeTab,
|
||||
@ -174,12 +204,15 @@ export default defineComponent({
|
||||
createMotive,
|
||||
createComment,
|
||||
setAdressees,
|
||||
handleClick,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
div.fixed-bottom {
|
||||
.fixed-bottom {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
div.footer-ticket-main {
|
||||
background: none repeat scroll 0 0 #cabb9f;
|
||||
}
|
||||
@ -187,5 +220,4 @@ div.fixed-bottom {
|
||||
div.footer-ticket-details {
|
||||
background: none repeat scroll 0 0 #efe2ca;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,6 +5,8 @@ const messages = {
|
||||
fr: {
|
||||
ticket: {
|
||||
previous_tickets: "Précédents tickets",
|
||||
cancel: "Annuler",
|
||||
close: "Fermer",
|
||||
},
|
||||
history: {
|
||||
person: "Ouverture par appel téléphonique de {person}",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user