diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue index b2abb8276..0128d8866 100644 --- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue +++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue @@ -41,12 +41,18 @@ + @@ -71,6 +77,7 @@ import ToggleComponent from "../TicketList/components/ToggleComponent.vue"; // Translations import { trans, + CHILL_TICKET_TICKET_INIT_FORM_SUBMIT, CHILL_TICKET_TICKET_INIT_FORM_TITLE, CHILL_TICKET_TICKET_INIT_FORM_SUCCESS, CHILL_TICKET_TICKET_INIT_FORM_ERROR, @@ -96,26 +103,39 @@ const showTicketInitFormModal = ref(false); const loading = ref(true); const refreshKey = ref(0); -async function handleFormSubmit(ticketForm: TicketInitForm) { +// ticketForm réactif pour v-model +const ticketForm = ref({ + content: "", + addressees: ticket.value?.currentAddressees, + motive: ticket.value?.currentMotive, + persons: ticket.value?.currentPersons, + caller: ticket.value?.caller, + emergency: ticket.value?.emergency, +} as TicketInitForm); + +async function handleFormSubmit() { try { - if (!ticketForm.motive || ticketForm.content.trim() === "") { + if (!ticketForm.value.motive || ticketForm.value.content.trim() === "") { toast.warning(trans(CHILL_TICKET_TICKET_INIT_FORM_WARNING)); return; } - if (ticketForm.motive) { - await store.dispatch("createMotive", ticketForm.motive); + if (ticketForm.value.motive) { + await store.dispatch("createMotive", ticketForm.value.motive); } - if (ticketForm.content.trim() !== "") { - await store.dispatch("createComment", ticketForm.content); + if (ticketForm.value.content.trim() !== "") { + await store.dispatch("createComment", ticketForm.value.content); } // Ne pas mettre à jour emergency si le motif force l'état d'urgence - if (ticketForm.motive && !ticketForm.motive.makeTicketEmergency) { - await store.dispatch("setEmergency", ticketForm.emergency); + if ( + ticketForm.value.motive && + !ticketForm.value.motive.makeTicketEmergency + ) { + await store.dispatch("setEmergency", ticketForm.value.emergency); } - await store.dispatch("setAddressees", ticketForm.addressees); - await store.dispatch("setPersons", ticketForm.persons); + await store.dispatch("setAddressees", ticketForm.value.addressees); + await store.dispatch("setPersons", ticketForm.value.persons); // Forcer le rafraîchissement des composants refreshKey.value++; diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketInitFormComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketInitFormComponent.vue index 7a3066251..463209f1a 100644 --- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketInitFormComponent.vue +++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketInitFormComponent.vue @@ -1,84 +1,73 @@ @@ -94,20 +83,12 @@ import PersonsSelectorComponent from "./Person/PersonsSelectorComponent.vue"; import AddresseeSelectorComponent from "./Addressee/AddresseeSelectorComponent.vue"; import EmergencyToggleComponent from "./Emergency/EmergencyToggleComponent.vue"; // Types -import { - Motive, - MotiveWithParent, - Ticket, - TicketEmergencyState, - TicketInitForm, -} from "../../../types"; +import { Motive, TicketInitForm } from "../../../types"; import { Person } from "ChillPersonAssets/types"; // Translations import { trans, - CHILL_TICKET_TICKET_INIT_FORM_SUBMIT, - CHILL_TICKET_TICKET_INIT_FORM_RESET, CHILL_TICKET_TICKET_SET_MOTIVE_TITLE, CHILL_TICKET_TICKET_ADD_COMMENT_TITLE, CHILL_TICKET_TICKET_SET_PERSONS_TITLE_CALLER, @@ -117,32 +98,23 @@ import { CHILL_TICKET_LIST_FILTER_EMERGENCY, CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE, } from "translator"; -import { UserGroup, UserGroupOrUser } from "ChillMainAssets/types"; +import { UserGroup } from "ChillMainAssets/types"; const props = defineProps<{ - ticket: Ticket; + modelValue: TicketInitForm; motives: Motive[]; suggestedPersons: Person[]; }>(); const emit = defineEmits<{ "update:modelValue": [value: TicketInitForm]; - submit: [formData: TicketInitForm]; }>(); const store = useStore(); -const ticketForm = reactive({ - content: "", - addressees: props.ticket.currentAddressees as UserGroupOrUser[], - motive: props.ticket.currentMotive as MotiveWithParent | null, - persons: props.ticket.currentPersons as Person[], - caller: props.ticket.caller as Person | null, - emergency: props.ticket.emergency as TicketEmergencyState, -} as TicketInitForm); - +const ticketForm = reactive({ ...props.modelValue }); const isEmergency = ref( - props.ticket.emergency == "yes" ? true : false, + props.modelValue.emergency == "yes" ? true : false, ); const userGroups = computed(() => store.getters.getUserGroups as UserGroup[]); @@ -155,23 +127,16 @@ watch( }, ); -function submitForm() { - emit("submit", { - content: ticketForm.content, - motive: ticketForm.motive, - addressees: [...ticketForm.addressees], - persons: [...ticketForm.persons], - caller: ticketForm.caller, - emergency: isEmergency.value ? "yes" : "no", - }); -} -function resetForm() { - ticketForm.content = ""; - ticketForm.motive = null; - ticketForm.persons = []; - ticketForm.caller = null; - ticketForm.emergency = props.ticket.emergency as TicketEmergencyState; -} +watch( + ticketForm, + (newVal) => { + emit("update:modelValue", { + ...newVal, + emergency: isEmergency.value ? "yes" : "no", + }); + }, + { deep: true }, +);