mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-14 14:24:24 +00:00
Adapt layout action toolbar
This commit is contained in:
Boris Waaub
parent
2a23bf19cb
commit
4996ac3b7c
@ -8,53 +8,41 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
>
|
||||
</ckeditor>
|
||||
</form>
|
||||
</div>
|
||||
<form @submit.prevent="submitAction">
|
||||
<add-comment-component
|
||||
v-model="content"
|
||||
v-if="activeTab === 'comment'"
|
||||
/>
|
||||
|
||||
<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"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<addressee-selector-component
|
||||
v-model="addressees"
|
||||
:user-groups="userGroups"
|
||||
:users="users"
|
||||
v-if="activeTab === 'transfert'"
|
||||
/>
|
||||
|
||||
<div v-if="activeTab === 'motive'">
|
||||
<form @submit.prevent="createMotive">
|
||||
<motive-selector-component
|
||||
v-model="motive"
|
||||
:motives="motives"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<motive-selector-component
|
||||
v-model="motive"
|
||||
:motives="motives"
|
||||
v-if="activeTab === 'motive'"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<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-create" type="submit">
|
||||
{{ $t("ticket.save") }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-ticket-main">
|
||||
@ -63,9 +51,13 @@
|
||||
<button
|
||||
type="button"
|
||||
class="m-2 btn btn-light"
|
||||
@click="activeTab = 'comment'"
|
||||
@click="
|
||||
activeTab === 'comment'
|
||||
? (activeTab = '')
|
||||
: (activeTab = 'comment')
|
||||
"
|
||||
>
|
||||
<i class="fa fa-plus"></i>
|
||||
<i class="fa fa-comment"></i>
|
||||
{{ $t("comment.title") }}
|
||||
</button>
|
||||
</li>
|
||||
@ -73,7 +65,11 @@
|
||||
<button
|
||||
type="button"
|
||||
class="m-2 btn btn-light"
|
||||
@click="activeTab = 'transfert'"
|
||||
@click="
|
||||
activeTab === 'transfert'
|
||||
? (activeTab = '')
|
||||
: (activeTab = 'transfert')
|
||||
"
|
||||
>
|
||||
<i class="fa fa-paper-plane"></i>
|
||||
{{ $t("transfert.title") }}
|
||||
@ -83,7 +79,11 @@
|
||||
<button
|
||||
type="button"
|
||||
class="m-2 btn btn-light"
|
||||
@click="activeTab = 'motive'"
|
||||
@click="
|
||||
activeTab === 'motive'
|
||||
? (activeTab = '')
|
||||
: (activeTab = 'motive')
|
||||
"
|
||||
>
|
||||
<i class="fa fa-paint-brush"></i>
|
||||
{{ $t("motive.title") }}
|
||||
@ -108,8 +108,6 @@
|
||||
import { computed, defineComponent, inject, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStore } from "vuex";
|
||||
import CKEditor from "@ckeditor/ckeditor5-vue";
|
||||
import ClassicEditor from "../../../../../../../ChillMainBundle/Resources/public/module/ckeditor5";
|
||||
|
||||
// Types
|
||||
import {
|
||||
@ -122,19 +120,20 @@ import { Comment, Motive, Ticket } from "../../../types";
|
||||
// Component
|
||||
import MotiveSelectorComponent from "./MotiveSelectorComponent.vue";
|
||||
import AddresseeSelectorComponent from "./AddresseeSelectorComponent.vue";
|
||||
import AddCommentComponent from "./AddCommentComponent.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ActionToolbarComponent",
|
||||
components: {
|
||||
AddCommentComponent,
|
||||
MotiveSelectorComponent,
|
||||
AddresseeSelectorComponent,
|
||||
ckeditor: CKEditor.component,
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const { t } = useI18n();
|
||||
const toast = inject("toast") as any;
|
||||
const activeTab = ref("");
|
||||
const activeTab = ref("" as "" | "comment" | "motive" | "transfert");
|
||||
|
||||
const ticket = computed(() => store.getters.getTicket as Ticket);
|
||||
const motives = computed(() => store.getters.getMotives as Motive[]);
|
||||
@ -151,42 +150,52 @@ export default defineComponent({
|
||||
const content = ref("" as Comment["content"]);
|
||||
const addressees = ref([] as Array<UserGroupOrUser>);
|
||||
|
||||
async function createMotive() {
|
||||
async function submitAction() {
|
||||
try {
|
||||
await store.dispatch("createMotive", {
|
||||
ticketId: ticket.value.id,
|
||||
motive: motive.value,
|
||||
});
|
||||
toast.success(t("motive.success"));
|
||||
switch (activeTab.value) {
|
||||
case "comment":
|
||||
if (!content.value) {
|
||||
toast.error(t("comment.error"));
|
||||
} else {
|
||||
await store.dispatch("createComment", {
|
||||
ticketId: ticket.value.id,
|
||||
content: content.value,
|
||||
});
|
||||
content.value = "";
|
||||
activeTab.value = "";
|
||||
toast.success(t("comment.success"));
|
||||
}
|
||||
break;
|
||||
case "motive":
|
||||
if (!motive.value.id) {
|
||||
toast.error(t("motive.error"));
|
||||
} else {
|
||||
await store.dispatch("createMotive", {
|
||||
ticketId: ticket.value.id,
|
||||
motive: motive.value,
|
||||
});
|
||||
activeTab.value = "";
|
||||
toast.success(t("motive.success"));
|
||||
}
|
||||
break;
|
||||
case "transfert":
|
||||
if (!addressees.value.length) {
|
||||
toast.error(t("transfert.error"));
|
||||
} else {
|
||||
await store.dispatch("setAdressees", {
|
||||
ticketId: ticket.value.id,
|
||||
addressees: addressees.value,
|
||||
});
|
||||
activeTab.value = "";
|
||||
toast.success(t("transfert.success"));
|
||||
}
|
||||
break;
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function createComment() {
|
||||
try {
|
||||
await store.dispatch("createComment", {
|
||||
ticketId: ticket.value.id,
|
||||
content: content.value,
|
||||
});
|
||||
content.value = "";
|
||||
toast.success(t("comment.success"));
|
||||
} catch (error) {
|
||||
toast.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function setAdressees() {
|
||||
try {
|
||||
await store.dispatch("setAdressees", {
|
||||
ticketId: ticket.value.id,
|
||||
addressees: addressees.value,
|
||||
});
|
||||
toast.success(t("transfert.success"));
|
||||
} catch (error) {
|
||||
toast.error(error);
|
||||
}
|
||||
}
|
||||
function handleClick() {
|
||||
alert("Sera disponible plus tard");
|
||||
}
|
||||
@ -200,18 +209,20 @@ export default defineComponent({
|
||||
addressees,
|
||||
users,
|
||||
content,
|
||||
editor: ClassicEditor,
|
||||
createMotive,
|
||||
createComment,
|
||||
setAdressees,
|
||||
submitAction,
|
||||
handleClick,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.fixed-bottom {
|
||||
margin-bottom: 100px;
|
||||
ul.record_actions.sticky-form-buttons {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.sticky-form-buttons {
|
||||
margin-top: 0px;
|
||||
background: none;
|
||||
}
|
||||
div.footer-ticket-main {
|
||||
background: none repeat scroll 0 0 #cabb9f;
|
||||
|
||||
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<ckeditor
|
||||
name="content"
|
||||
:placeholder="$t('comment.content')"
|
||||
:editor="editor"
|
||||
v-model="content"
|
||||
tag-name="textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType, defineComponent, ref, watch } from "vue";
|
||||
|
||||
import CKEditor from "@ckeditor/ckeditor5-vue";
|
||||
import ClassicEditor from "../../../../../../../ChillMainBundle/Resources/public/module/ckeditor5";
|
||||
|
||||
export default defineComponent({
|
||||
name: "AddCommentComponent",
|
||||
props: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ckeditor: CKEditor.component,
|
||||
},
|
||||
emits: ["update:modelValue"],
|
||||
|
||||
setup(props, ctx) {
|
||||
const content = ref(props.modelValue);
|
||||
|
||||
watch(content, (content) => {
|
||||
ctx.emit("update:modelValue", content);
|
||||
});
|
||||
|
||||
return {
|
||||
content,
|
||||
editor: ClassicEditor,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -6,6 +6,7 @@ const messages = {
|
||||
ticket: {
|
||||
previous_tickets: "Précédents tickets",
|
||||
cancel: "Annuler",
|
||||
save: "Enregistrer",
|
||||
close: "Fermer",
|
||||
},
|
||||
history: {
|
||||
@ -21,22 +22,22 @@ const messages = {
|
||||
comment: {
|
||||
title: "Commentaire",
|
||||
label: "Ajouter un commentaire",
|
||||
save: "Enregistrer",
|
||||
succcess: "Commentaire enregistré",
|
||||
success: "Commentaire enregistré",
|
||||
content: "Ajouter un commentaire",
|
||||
error: "Aucun commentaire ajouté",
|
||||
},
|
||||
motive: {
|
||||
title: "Motif",
|
||||
label: "Choisir un motif",
|
||||
save: "Enregistrer",
|
||||
success: "Motif enregistré",
|
||||
error: "Aucun motif sélectionné",
|
||||
},
|
||||
transfert: {
|
||||
title: "Transfert",
|
||||
user_group_label: "Transferer vers un groupe",
|
||||
user_label: "Transferer vers un ou plusieurs utilisateurs",
|
||||
save: "Enregistrer",
|
||||
success: "Transfert effectué",
|
||||
error: "Aucun destinataire sélectionné",
|
||||
},
|
||||
close: "Fermer",
|
||||
banner: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user