Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-14 14:24:24 +00:00
Code Issues Actions Projects Releases Wiki Activity

use record_actions sticky-form-buttons

Browse Source
This commit is contained in:
Boris Waaub 2024-05-21 10:53:25 +02:00
parent 650d2596d9
commit 2a23bf19cb
2 changed files with 95 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
View File

@ -1,83 +1,102 @@
<template> <template>
<div class="fixed-bottom"> <div class="fixed-bottom">
<div class="footer-ticket-details"> <div class="footer-ticket-details" v-if="activeTab">
<div class="tab-content p-2"> <div class="tab-content p-2">
<div>
<div v-if="activeTab">
<label class="col-form-label"> <label class="col-form-label">
{{ $t(`${activeTab}.title`) }} {{ $t(`${activeTab}.title`) }}
</label> </label>
</div> </div>
<div v-if="activeTab === 'comment'"> <div v-if="activeTab === 'comment'" class="p-2">
<form @submit.prevent="createComment"> <form @submit.prevent="createComment">
<ckeditor <ckeditor
name="content" name="content"
:placeholder="$t('comment.content')" :placeholder="$t('comment.content')"
:editor="editor" :editor="editor"
v-model="content" v-model="content"
tag-name="textarea"> tag-name="textarea"
>
</ckeditor> </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> </form>
</div> </div>
<div v-if="activeTab === 'transfert'"> <div v-if="activeTab === 'transfert'">
<form @submit.prevent="setAdressees" v-if="userGroups.length && users.length"> <form
<addressee-selector-component v-model="addressees" :user-groups="userGroups" :users="users" /> @submit.prevent="setAdressees"
<div class="d-flex justify-content-end p-1"> v-if="userGroups.length && users.length"
<button class="btn btn-chill-green text-white float-right" type="submit"> >
<i class="fa fa-pencil"></i> <addressee-selector-component
{{ $t("transfert.save") }} v-model="addressees"
</button> :user-groups="userGroups"
</div> :users="users"
/>
</form> </form>
</div> </div>
<div v-if="activeTab === 'motive'"> <div v-if="activeTab === 'motive'">
<form @submit.prevent="createMotive"> <form @submit.prevent="createMotive">
<motive-selector-component
<motive-selector-component v-model="motive" :motives="motives" /> v-model="motive"
<div class="d-flex justify-content-end p-1"> :motives="motives"
<button class="btn btn-chill-green text-white float-right" type="submit"> />
<i class="fa fa-pencil"></i>
{{ $t("motive.save") }}
</button>
</div>
</form> </form>
</div> </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> </div>
<div class="footer-ticket-main"> <div class="footer-ticket-main">
<ul class="nav nav-tabs justify-content-end"> <ul class="nav nav-tabs justify-content-end">
<li class="nav-item"> <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> <i class="fa fa-plus"></i>
{{ $t('comment.title') }} {{ $t("comment.title") }}
</button> </button>
</li> </li>
<li class="nav-item"> <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> <i class="fa fa-paper-plane"></i>
{{ $t('transfert.title') }} {{ $t("transfert.title") }}
</button> </button>
</li> </li>
<li class="nav-item"> <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> <i class="fa fa-paint-brush"></i>
{{ $t('motive.title') }} {{ $t("motive.title") }}
</button> </button>
</li> </li>
<li class="nav-item"> <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> <i class="fa fa-bolt"></i>
Fermer {{ $t("ticket.close") }}
</button> </button>
</li> </li>
</ul> </ul>
@ -89,11 +108,15 @@
import { computed, defineComponent, inject, ref } from "vue"; import { computed, defineComponent, inject, ref } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useStore } from "vuex"; import { useStore } from "vuex";
import CKEditor from '@ckeditor/ckeditor5-vue'; import CKEditor from "@ckeditor/ckeditor5-vue";
import ClassicEditor from "../../../../../../../ChillMainBundle/Resources/public/module/ckeditor5"; import ClassicEditor from "../../../../../../../ChillMainBundle/Resources/public/module/ckeditor5";
// Types // 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"; import { Comment, Motive, Ticket } from "../../../types";
// Component // Component
@ -110,29 +133,33 @@ export default defineComponent({
setup() { setup() {
const store = useStore(); const store = useStore();
const { t } = useI18n(); const { t } = useI18n();
const toast = inject('toast') as any; const toast = inject("toast") as any;
const activeTab = ref(""); const activeTab = ref("");
const ticket = computed(() => store.getters.getTicket as Ticket); const ticket = computed(() => store.getters.getTicket as Ticket);
const motives = computed(() => store.getters.getMotives as Motive[]); 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 users = computed(() => store.getters.getUsers as User[]);
const motive = ref(ticket.value.currentMotive ? ticket.value.currentMotive: {} as Motive); const motive = ref(
const content = ref('' as Comment["content"]); ticket.value.currentMotive
? ticket.value.currentMotive
: ({} as Motive)
);
const content = ref("" as Comment["content"]);
const addressees = ref([] as Array<UserGroupOrUser>); const addressees = ref([] as Array<UserGroupOrUser>);
async function createMotive() { async function createMotive() {
try { try {
await store.dispatch("createMotive", { await store.dispatch("createMotive", {
ticketId: ticket.value.id, ticketId: ticket.value.id,
motive: motive.value, motive: motive.value,
}); });
toast.success(t("motive.success")) toast.success(t("motive.success"));
} catch (error) { } catch (error) {
toast.error(error) toast.error(error);
} }
} }
@ -143,9 +170,9 @@ export default defineComponent({
content: content.value, content: content.value,
}); });
content.value = ""; content.value = "";
toast.success(t("comment.success")) toast.success(t("comment.success"));
} catch (error) { } catch (error) {
toast.error(error) toast.error(error);
} }
} }
@ -155,11 +182,14 @@ export default defineComponent({
ticketId: ticket.value.id, ticketId: ticket.value.id,
addressees: addressees.value, addressees: addressees.value,
}); });
toast.success(t("transfert.success")) toast.success(t("transfert.success"));
} catch (error) { } catch (error) {
toast.error(error) toast.error(error);
} }
} }
function handleClick() {
alert("Sera disponible plus tard");
}
return { return {
activeTab, activeTab,
@ -174,18 +204,20 @@ export default defineComponent({
createMotive, createMotive,
createComment, createComment,
setAdressees, setAdressees,
handleClick,
}; };
}, },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
div.fixed-bottom { .fixed-bottom {
div.footer-ticket-main { margin-bottom: 100px;
background: none repeat scroll 0 0 #cabb9f; }
} div.footer-ticket-main {
background: none repeat scroll 0 0 #cabb9f;
}
div.footer-ticket-details { div.footer-ticket-details {
background: none repeat scroll 0 0 #efe2ca; background: none repeat scroll 0 0 #efe2ca;
}
} }
</style> </style>

2
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts
View File

@ -5,6 +5,8 @@ const messages = {
fr: { fr: {
ticket: { ticket: {
previous_tickets: "Précédents tickets", previous_tickets: "Précédents tickets",
cancel: "Annuler",
close: "Fermer",
}, },
history: { history: {
person: "Ouverture par appel téléphonique de {person}", person: "Ouverture par appel téléphonique de {person}",