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

Add feature open and close ticket

Browse Source
This commit is contained in:
Boris Waaub 2025-06-24 10:44:03 +00:00 committed by Julien Fastré
parent d43b739654
commit f4eeee1598
8 changed files with 220 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
View File

@ -13,7 +13,7 @@ export interface Motive {
label: TranslatableString;
}
export type TicketState = "open"|"closed";
export type TicketState = "open" | "closed";
interface TicketHistory<T extends string, D extends object> {
event_type: T;
@ -75,16 +75,20 @@ export interface PersonsState {
}
export interface StateChange {
new_state: TicketState
new_state: TicketState;
}
export interface CreateTicketState {}
export interface StateChange {
new_state: TicketState;
}
//interface AddPersonEvent extends TicketHistory<"add_person", PersonHistory> {};
export interface AddCommentEvent
extends TicketHistory<"add_comment", Comment> {}
export interface SetMotiveEvent
extends TicketHistory<"set_motive", MotiveHistory> {}
export interface CreateTicketState {
by: User;
}
interface AddPersonEvent extends TicketHistory<"add_person", PersonHistory> {}
export type AddCommentEvent = TicketHistory<"add_comment", Comment>;
export type SetMotiveEvent = TicketHistory<"set_motive", MotiveHistory>;
//interface AddAddressee extends TicketHistory<"add_addressee", AddresseeHistory> {};
//interface RemoveAddressee extends TicketHistory<"remove_addressee", AddresseeHistory> {};
export interface AddresseesStateEvent
@ -96,8 +100,9 @@ export interface PersonStateEvent
export interface ChangeStateEvent
extends TicketHistory<"state_change", StateChange> {}
// TODO : Remove add_persont event from TicketHistoryLine
export type TicketHistoryLine =
/* AddPersonEvent */
| AddPersonEvent
| CreateTicketEvent
| AddCommentEvent
| SetMotiveEvent /*AddAddressee | RemoveAddressee | */

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

@ -9,7 +9,7 @@
</div>
<form
v-if="activeTab !== 'set_persons'"
v-if="activeTab !== 'persons_state'"
@submit.prevent="submitAction"
>
<add-comment-component
@ -21,7 +21,7 @@
v-model="addressees"
:user-groups="userGroups"
:users="users"
v-if="activeTab === 'add_addressee'"
v-if="activeTab === 'addressees_state'"
/>
<motive-selector-component
@ -71,87 +71,41 @@
>Annuler</a
>
</li>
<li class="nav-item p-2">
<li
v-for="btn in actionButtons"
:key="btn.key"
class="nav-item p-2"
>
<button
type="button"
:class="`btn ${
activeTab === 'set_motive'
? 'btn-primary'
: 'btn-light'
}`"
:class="`btn ${activeTab === btn.key ? 'btn-primary' : 'btn-light'}`"
@click="
activeTab === 'set_motive'
activeTab === btn.key
? (activeTab = '')
: (activeTab = 'set_motive')
: (activeTab = btn.key)
"
:disabled="btn.disabled.value"
>
<i :class="actionIcons['set_motive']"></i>
{{ trans(CHILL_TICKET_TICKET_SET_MOTIVE_TITLE) }}
<i :class="actionIcons[btn.key]" />
{{ trans(btn.label) }}
</button>
</li>
<li class="nav-item p-2">
<button
type="button"
:class="`btn ${
activeTab === 'add_comment'
? 'btn-primary'
: 'btn-light'
}`"
@click="
activeTab === 'add_comment'
? (activeTab = '')
: (activeTab = 'add_comment')
"
>
<i :class="actionIcons['add_comment']"></i>
{{ trans(CHILL_TICKET_TICKET_ADD_COMMENT_TITLE) }}
</button>
</li>
<li class="nav-item p-2">
<button
type="button"
:class="`btn ${
activeTab === 'add_addressee'
? 'btn-primary'
: 'btn-light'
}`"
@click="
activeTab === 'add_addressee'
? (activeTab = '')
: (activeTab = 'add_addressee')
"
>
<i :class="actionIcons['addressees_state']"></i>
{{ trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE) }}
</button>
</li>
<li class="nav-item p-2">
<button
type="button"
:class="`btn ${
activeTab === 'set_persons'
? 'btn-primary'
: 'btn-light'
}`"
@click="
activeTab === 'set_persons'
? (activeTab = '')
: (activeTab = 'set_persons')
"
>
<i :class="actionIcons['set_persons']"></i>
{{ trans(CHILL_TICKET_TICKET_SET_PERSONS_TITLE) }}
</button>
</li>
<li class="nav-item p-2">
<button
type="button"
class="btn btn-light"
@click="handleClick()"
@click="isOpen ? closeTicket() : reopenTicket()"
>
<i class="fa fa-bolt"></i>
{{ trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE) }}
<i :class="actionIcons['state_change']"></i>
{{
isOpen
? trans(
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE,
)
: trans(
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN,
)
}}
</button>
</li>
</ul>
@ -183,9 +137,14 @@ import {
CHILL_TICKET_TICKET_SET_MOTIVE_ERROR,
CHILL_TICKET_TICKET_SET_MOTIVE_SUCCESS,
CHILL_TICKET_TICKET_SET_PERSONS_TITLE,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CANCEL,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_SAVE,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_SUCCESS,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_ERROR,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_SUCCESS,
CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_ERROR,
} from "translator";
// Types
@ -199,9 +158,8 @@ import { Comment, Motive, Ticket } from "../../../types";
const store = useStore();
const toast = useToast();
const activeTab = ref(
"" as "" | "add_comment" | "set_motive" | "add_addressee" | "set_persons",
);
const activeTab = ref("" as string);
const actionIcons = ref(store.getters.getActionIcons);
const activeTabTitle = computed((): string => {
switch (activeTab.value) {
@ -209,16 +167,44 @@ const activeTabTitle = computed((): string => {
return trans(CHILL_TICKET_TICKET_ADD_COMMENT_TITLE);
case "set_motive":
return trans(CHILL_TICKET_TICKET_SET_MOTIVE_TITLE);
case "add_addressee":
case "addressees_state":
return trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE);
case "set_persons":
case "persons_state":
return trans(CHILL_TICKET_TICKET_SET_PERSONS_TITLE);
default:
return "";
}
});
const actionButtons = [
{
key: "set_motive",
label: CHILL_TICKET_TICKET_SET_MOTIVE_TITLE,
icon: computed(() => actionIcons.value["set_motive"]),
disabled: computed(() => !isOpen.value),
},
{
key: "add_comment",
label: CHILL_TICKET_TICKET_ADD_COMMENT_TITLE,
icon: computed(() => actionIcons.value["add_comment"]),
disabled: computed(() => !isOpen.value),
},
{
key: "addressees_state",
label: CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE,
icon: computed(() => actionIcons.value["addressees_state"]),
disabled: computed(() => !isOpen.value),
},
{
key: "persons_state",
label: CHILL_TICKET_TICKET_SET_PERSONS_TITLE,
icon: computed(() => actionIcons.value["persons_state"]),
disabled: computed(() => !isOpen.value),
},
];
const ticket = computed(() => store.getters.getTicket as Ticket);
const isOpen = computed(() => store.getters.isOpen);
const motives = computed(() => store.getters.getMotives as Motive[]);
const userGroups = computed(() => store.getters.getUserGroups as UserGroup[]);
const users = computed(() => store.getters.getUsers as User[]);
@ -279,7 +265,7 @@ async function submitAction() {
);
}
break;
case "add_addressee":
case "addressees_state":
if (!addressees.value.length) {
toast.error(trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_ERROR));
} else {
@ -299,15 +285,32 @@ async function submitAction() {
}
}
function handleClick() {
alert("Sera disponible plus tard");
async function closeTicket() {
try {
await store.dispatch("closeTicket");
closeAllActions();
toast.success(trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_SUCCESS));
} catch (error) {
console.error(error);
toast.success(trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_ERROR));
}
}
async function reopenTicket() {
try {
await store.dispatch("reopenTicket");
toast.success(
trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_SUCCESS),
);
} catch (error) {
console.error(error);
toast.error(trans(CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_ERROR));
}
}
function closeAllActions() {
activeTab.value = "";
}
const actionIcons = ref(store.getters.getActionIcons);
</script>
<style lang="scss" scoped>
@ -328,7 +331,8 @@ div.footer-ticket-details {
}
.fixed-bottom {
max-width: 1272px;
margin: 0 auto;
position: sticky;
top: 0;
overflow: hidden;
}
</style>

16
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
View File

@ -17,9 +17,17 @@
<span
class="badge text-bg-chill-green text-white"
style="font-size: 1rem"
v-if="isOpen"
>
{{ trans(CHILL_TICKET_TICKET_BANNER_OPEN) }}
</span>
<span
class="badge text-bg-chill-red text-white"
style="font-size: 1rem"
v-else
>
{{ trans(CHILL_TICKET_TICKET_BANNER_CLOSED) }}
</span>
</div>
<div class="d-flex justify-content-end">
<p class="created-at-timespan" v-if="ticket.createdAt">
@ -49,7 +57,6 @@
:buttonText="person.textAge"
:displayBadge="'true' === 'true'"
action="show"
CHILL_TICKET_TICKET_BANNER_CONCERNED_USAGER
></on-the-fly>
</div>
<div class="col-md-6 col-sm-12">
@ -88,6 +95,7 @@ import {
trans,
CHILL_TICKET_TICKET_BANNER_NO_MOTIVE,
CHILL_TICKET_TICKET_BANNER_OPEN,
CHILL_TICKET_TICKET_BANNER_CLOSED,
CHILL_TICKET_TICKET_BANNER_SINCE,
CHILL_TICKET_TICKET_BANNER_CONCERNED_USAGER,
CHILL_TICKET_TICKET_BANNER_SPEAKER,
@ -98,10 +106,14 @@ import {
CHILL_TICKET_TICKET_BANNER_AND,
} from "translator";
// Store
import { useStore } from "vuex";
const props = defineProps<{
ticket: Ticket;
}>();
const store = useStore();
const today = ref(new Date());
const createdAt = ref(props.ticket.createdAt);
@ -109,6 +121,8 @@ setInterval(() => {
today.value = new Date();
}, 5000);
const isOpen = computed(() => store.getters.isOpen);
const since = computed(() => {
if (createdAt.value == null) {
return "";

6
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryAddresseeComponent.vue
View File

@ -1,17 +1,17 @@
<template>
<div class="col-12">
<addressee-component :addressees="addressees" />
<addressee-component :addressees="addresseeState.addressees" />
</div>
</template>
<script setup lang="ts">
// Types
import { UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/public/types";
import { AddresseeState } from "../../../types";
// Components
import AddresseeComponent from "./AddresseeComponent.vue";
defineProps<{
addressees: UserGroupOrUser[];
addresseeState: AddresseeState;
}>();
</script>

34
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryListComponent.vue
View File

@ -1,21 +1,24 @@
<template>
<div
class="card my-2 bg-light"
v-for="history_line in history"
v-for="history_line in history.filter(
(line) => line.event_type != 'add_person',
)"
:key="history.indexOf(history_line)"
>
<div class="card-header">
<div class="history-header">
<div class="description">
<div
class="history-header d-flex align-items-center justify-content-between"
>
<div class="d-flex align-items-center fw-bold">
<i
:class="`${actionIcons[history_line.event_type]} me-1`"
></i>
<span>{{ explainSentence(history_line) }}</span>
</div>
<div>
<span class="fw-bold fst-italic mx-1">
{{ formatDate(history_line.at) }}
</span>
<TicketHistoryStateComponent
:new_state="history_line.data.new_state"
v-if="history_line.event_type == 'state_change'"
/>
</div>
<div>
<span class="badge-user">
@ -23,10 +26,16 @@
:user="history_line.by"
></user-render-box-badge>
</span>
<span class="fst-italic mx-2">
{{ formatDate(history_line.at) }}
</span>
</div>
</div>
</div>
<div class="card-body row">
<div
class="card-body row"
v-if="history_line.event_type != 'state_change'"
>
<ticket-history-person-component
:personHistory="history_line.data"
v-if="history_line.event_type == 'persons_state'"
@ -40,7 +49,7 @@
v-else-if="history_line.event_type == 'add_comment'"
/>
<ticket-history-addressee-component
:addressees="history_line.data.addressees"
:addresseeState="history_line.data"
v-else-if="history_line.event_type == 'addressees_state'"
/>
<ticket-history-create-component
@ -64,8 +73,9 @@ import TicketHistoryMotiveComponent from "./TicketHistoryMotiveComponent.vue";
import TicketHistoryCommentComponent from "./TicketHistoryCommentComponent.vue";
import TicketHistoryAddresseeComponent from "./TicketHistoryAddresseeComponent.vue";
import TicketHistoryCreateComponent from "./TicketHistoryCreateComponent.vue";
import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";
import TicketHistoryStateComponent from "./TicketHistoryStateComponent.vue";
import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";
// Utils
import { ISOToDatetime } from "../../../../../../../ChillMainBundle/Resources/public/chill/js/date";
@ -87,6 +97,8 @@ function explainSentence(history: TicketHistoryLine): string {
return "Nouveau motifs";
case "create_ticket":
return "Ticket créé";
case "state_change":
return "Status du ticket modifié";
default:
return "";
}

41
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketHistoryStateComponent.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<span
class="text-chill-green mx-2"
style="
font-size: 1rem;
max-width: 80px;
white-space: normal;
word-break: break-word;
"
v-if="props.new_state == 'open'"
>
{{ trans(CHILL_TICKET_TICKET_BANNER_OPEN) }}
</span>
<span
class="text-chill-red mx-2"
style="
font-size: 1rem;
max-width: 80px;
white-space: normal;
word-break: break-word;
"
v-else-if="props.new_state == 'closed'"
>
{{ trans(CHILL_TICKET_TICKET_BANNER_CLOSED) }}
</span>
</template>
<script setup lang="ts">
// Types
import { StateChange } from "../../../types";
// Translations
import {
trans,
CHILL_TICKET_TICKET_BANNER_OPEN,
CHILL_TICKET_TICKET_BANNER_CLOSED,
} from "translator";
const props = defineProps<StateChange>();
</script>
<style scoped lang="scss"></style>

64
src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/ticket.ts
View File

@ -2,6 +2,7 @@ import { Module } from "vuex";
import { RootState } from "..";
import { Ticket } from "../../../../types";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
export interface State {
ticket: Ticket;
@ -12,18 +13,18 @@ export const moduleTicket: Module<State, RootState> = {
state: () => ({
ticket: {} as Ticket,
action_icons: {
// TODO cleanup those keys
add_person: "fa fa-eyedropper",
add_comment: "fa fa-comment",
set_motive: "fa fa-paint-brush",
//add_addressee: "fa fa-paper-plane",
addressees_state: "fa fa-paper-plane",
set_persons: "fa fa-eyedropper",
persons_state: "fa fa-eyedropper",
state_change: "fa fa-bolt",
},
toto: "toto",
}),
getters: {
isOpen(state) {
return state.ticket.currentState === "open";
},
getTicket(state) {
state.ticket.history = state.ticket.history.sort((a, b) =>
b.at.datetime.localeCompare(a.at.datetime),
@ -35,39 +36,36 @@ export const moduleTicket: Module<State, RootState> = {
return state.action_icons;
},
getDistinctAddressesHistory(state) {
const addresseeHistory = state.ticket.history.reduce(
(result, item) => {
const { datetime } = item.at;
if (
![
"add_addressee",
"remove_addressee",
"add_person",
].includes(item.event_type)
) {
result[datetime] = item;
return result;
}
if (!result[datetime]) {
result[datetime] = [];
}
/*
if (item.event_type === "add_addressee") {
result[datetime].push(item);
}
*/
return result;
},
{} as any,
);
return Object.values(addresseeHistory) as Ticket["history"][];
return state.ticket.history;
},
},
mutations: {
setTicket(state, ticket) {
setTicket(state, ticket: Ticket) {
state.ticket = ticket;
},
},
actions: {},
actions: {
async closeTicket({ commit, state }) {
try {
const result: Ticket = await makeFetch(
"POST",
`/api/1.0/ticket/ticket/${state.ticket.id}/close`,
);
commit("setTicket", result as Ticket);
} catch (e: any) {
throw e.name;
}
},
async reopenTicket({ commit, state }) {
try {
const result: Ticket = await makeFetch(
"POST",
`/api/1.0/ticket/ticket/${state.ticket.id}/open`,
);
commit("setTicket", result as Ticket);
} catch (e: any) {
throw e.name;
}
},
},
};

6
src/Bundle/ChillTicketBundle/src/translations/messages+intl-icu.fr.yml
View File

@ -11,6 +11,11 @@ chill_ticket:
cancel: "Annuler"
save: "Enregistrer"
close: "Fermer"
close_success: "Ticket fermé"
close_error: "Erreur lors de la fermeture du ticket"
reopen: "Rouvrir"
reopen_success: "Rouverture du ticket réussie"
reopen_error: "Erreur lors de la rouverture du ticket"
add_comment:
title: "Commentaire"
label: "Ajouter un commentaire"
@ -37,6 +42,7 @@ chill_ticket:
concerned_usager: "Usagers concernés"
speaker: "Attribué à"
open: "Ouvert"
closed: "Fermé"
since: "Depuis {time}"
and: "et"
days: >-