Add user group addressee

src/Bundle/ChillTicketBundle/src/Resources/public/types.ts

@@ -52,7 +52,7 @@ export interface Comment {
     updatedAt: DateTime|null,
 }
 
-interface AddresseeHistory {
+export interface AddresseeHistory {
     type: "ticket_addressee_history",
     id: number,
     startDate: DateTime|null,

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue

@@ -37,9 +37,11 @@ export default defineComponent({
         const motives = computed(() => store.getters.getMotives as Motive[])
         const ticket = computed(() => store.getters.getTicket as Ticket)
 
-        onMounted(() => {
+        onMounted(async () => {
             try {
-                store.dispatch('fetchMotives')
+                await store.dispatch('fetchMotives')
+                await store.dispatch('fetchUserGroups')
+                await store.dispatch('fetchUsers')
             } catch (error) {
                 toast.error(error)
             };

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

@@ -24,19 +24,21 @@
                 </div>
 
                 <div v-if="activeTab === 'transfert'">
-                    <div class="d-flex justify-content-end p-2">
+                    <form @submit.prevent="setAdressees">
-                        <button class="btn btn-chill-green text-white float-right" type="submit">
+                        <addressee-selector-component v-model="addressees" :user-groups="userGroups" :users="users" />
-                            <i class="fa fa-pencil"></i>
+                        <div class="d-flex justify-content-end p-2">
-                            {{ $t("transfert.save") }}
+                            <button class="btn btn-chill-green text-white float-right" type="submit">
-                        </button>
+                                <i class="fa fa-pencil"></i>
-                    </div>
+                                {{ $t("transfert.save") }}
+                            </button>
+                        </div>
+                    </form>
                 </div>
 
                 <div v-if="activeTab === 'motive'">
                     <form @submit.prevent="createMotive">
 
-                        <motive-selector-component v-model="motive" :motives="motives"
+                        <motive-selector-component v-model="motive" :motives="motives" />
-                            :current-motive="ticket.currentMotive" />
                         <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>
@@ -79,20 +81,23 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, ref } from "vue";
+import { computed, defineComponent, inject, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
 
 // Types
+import { User, UserGroup, UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/public/types";
 import { Comment, Motive, Ticket } from "../../../types";
 
 // Component
 import MotiveSelectorComponent from "./MotiveSelectorComponent.vue";
+import AddresseeSelectorComponent from "./AddresseeSelectorComponent.vue";
 
 export default defineComponent({
     name: "ActionToolbarComponent",
     components: {
         MotiveSelectorComponent,
+        AddresseeSelectorComponent,
     },
     setup() {
         const store = useStore();
@@ -100,11 +105,14 @@ export default defineComponent({
         const toast = inject('toast') as any;
         const activeTab = ref("");
 
-        const ticket = ref(store.getters.getTicket as Ticket);
+        const ticket = computed(() => store.getters.getTicket as Ticket);
-        const motives = ref(store.getters.getMotives as Motive[]);
+        const motives = computed(() => store.getters.getMotives as Motive[]);
+        const userGroups = computed(() => store.getters.getUserGroups as UserGroup[]);
+        const users = computed(() => store.getters.getUserGroups as User[]);
 
-        const motive = ref({} as Motive);
+        const motive = ref(ticket.value.currentMotive ? ticket.value.currentMotive: {} as Motive);
         const content = ref('' as Comment["content"]);
+        const addressees = ref(ticket.value.currentAddressees as Array<UserGroupOrUser>);
 
 
 
@@ -133,20 +141,35 @@ export default defineComponent({
             }
         }
 
+        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)
+            }
+        }
+
         return {
             activeTab,
             ticket,
             motives,
             motive,
+            userGroups,
+            addressees,
+            users,
             content,
             createMotive,
             createComment,
+            setAdressees,
         };
     },
 });
 </script>
 <style lang="scss" scoped>
-
 div.fixed-bottom {
     div.footer-ticket-main {
         background: none repeat scroll 0 0 #cabb9f;

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="row">
+        <div class="col-12 col-lg-4 col-md-6">
+            <vue-multiselect name="selectMotive" id="selectMotive" label="label" :custom-label="customUserGroupLabel"
+                track-by="id" open-direction="top" :multiple="false" :searchable="true"
+                :placeholder="$t('transfert.label')" :select-label="$t('multiselect.select_label')"
+                :deselect-label="$t('multiselect.deselect_label')" :selected-label="$t('multiselect.selected_label')"
+                :options="userGroups" v-model="userGroup" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import VueMultiselect from "vue-multiselect";
+
+// Types
+import { User, UserGroup, UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/public/types";
+
+
+export default defineComponent({
+    name: "AddresseeSelectorComponent",
+    props: {
+        modelValue: {
+            type: Array as PropType<UserGroupOrUser[]>,
+            default: [],
+            required: false,
+        },
+        userGroups: {
+            type: Array as PropType<UserGroup[]>,
+            required: true,
+        },
+        users: {
+            type: Array as PropType<User[]>,
+            required: true,
+        },
+    },
+    components: {
+        VueMultiselect,
+    },
+    emits: ["update:modelValue"],
+
+    setup(props, ctx) {
+        const addressees = ref(props.modelValue as UserGroupOrUser[]);
+        const userGroup = ref({} as UserGroup);
+        const { t } = useI18n();
+
+        watch(userGroup, (userGroup) => {
+            addressees.value.push(userGroup);
+            ctx.emit("update:modelValue", addressees.value);
+        });
+
+        return {
+            addressees,
+            userGroup,
+            customUserGroupLabel(userGroup: UserGroup) {
+                return userGroup.label ? userGroup.label.fr : t('transfert.label');
+            },
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/MotiveSelectorComponent.vue

@@ -21,14 +21,14 @@ import { Motive } from "../../../types";
 export default defineComponent({
     name: "MotiveSelectorComponent",
     props: {
+        modelValue: {
+            type: Object as PropType<Motive>,
+            required: false,
+        },
         motives: {
             type: Object as PropType<Motive[]>,
             required: true,
         },
-        currentMotive: {
-            type: Object as PropType<null|Motive>,
-            required: false,
-        },
     },
     components: {
         VueMultiselect,
@@ -36,7 +36,7 @@ export default defineComponent({
     emits: ["update:modelValue"],
 
     setup(props, ctx) {
-        const motive = ref(props.currentMotive ? props.currentMotive : {} as Motive);
+        const motive = ref(props.modelValue);
         const { t } = useI18n();
 
         watch(motive, (motive) => {

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

@@ -0,0 +1,30 @@
+<template>
+    <div class="col-12">
+        <i class="fa fa-paint-brush"></i>
+        <span class="mx-1">
+            {{ $t('history.user_group.',{ user_group: addresseeHistory.addressee.label }) }}
+        </span>
+    </div>
+</template>
+
+<script lang="ts">
+
+import { PropType, defineComponent } from 'vue';
+
+// Types
+import { AddresseeHistory } from '../../../types';
+
+export default defineComponent({
+    name: 'TicketHistoryAddresseeComponent',
+    props: {
+        addresseeHistory: {
+            type: Object as PropType<AddresseeHistory>,
+            required: true,
+        },
+    },
+
+    setup() {}
+});
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -20,6 +20,8 @@
                 v-else-if="history_line.event_type == 'set_motive'" />
             <ticket-history-comment-component :commentHistory="history_line.data"
                 v-else-if="history_line.event_type == 'add_comment'" />
+            <ticket-history-addressee-component :commentHistory="history_line.data"
+                v-else-if="history_line.event_type == 'add_addressee'" />
         </div>
     </div>
 </template>

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

@@ -10,6 +10,7 @@ const messages = {
             user: "Prise en charge par {username}",
             motive: "Motif indiqué: {motive}",
             comment: "Commentaire: {comment}",
+            user_group: "Transferer au group: {user_group}",
         },
         comment: {
             title: "Commentaire",

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/motive.ts

@@ -20,12 +20,6 @@ export const moduleMotive: Module<State, RootState> = {
         getMotives(state) {
             return state.motives;
         },
-        getMotiveOptions(state) {
-            return state.motives.map((motive) => ({
-                value: motive.id,
-                text: motive.label.fr,
-            }));
-        },
     },
     mutations: {
         setMotives(state, motives) {
@@ -39,8 +33,7 @@ export const moduleMotive: Module<State, RootState> = {
                     "/api/1.0/ticket/motive.json"
                 )) as Motive[];
                 commit("setMotives", results);
-            }
+            } catch (e: any) {
-            catch(e: any) {
                 throw e.name;
             }
         },
@@ -54,11 +47,15 @@ export const moduleMotive: Module<State, RootState> = {
                 const result = await makeFetch(
                     "POST",
                     `/api/1.0/ticket/${ticketId}/motive/set`,
-                    { motive }
+                    {
+                        motive: {
+                            id: motive.id,
+                            type: motive.type,
+                        },
+                    }
                 );
                 commit("setTicket", result);
-            }
+            } catch (e: any) {
-            catch(e: any) {
                 throw e.name;
             }
         },

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/user.ts

@@ -30,9 +30,16 @@ export const moduleUser: Module<State, RootState> = {
             return state.users;
         },
     },
-    mutations: {},
+    mutations: {
+        setUserGroups(state, userGroups) {
+            state.userGroups = userGroups;
+        },
+        setUsers(state, users) {
+            state.users = users;
+        },
+    },
     actions: {
-        getUserGroups({ commit }) {
+        fetchUserGroups({ commit }) {
             try {
                 fetchResults("/api/1.0/main/user-group.json").then(
                     (results) => {
@@ -43,23 +50,30 @@ export const moduleUser: Module<State, RootState> = {
                 throw e.name;
             }
         },
-        getUsers({ commit }) {
+        fetchUsers({ commit }) {
             try {
-                fetchResults("/1.0/main/user.json").then((results) => {
+                fetchResults("/api/1.0/main/user.json").then((results) => {
-                    commit("setUserGroups", results);
+                    commit("setUsers", results);
                 });
             } catch (e: any) {
                 throw e.name;
             }
         },
 
-        async setAdressees({ commit }, datas: { ticketId: number; addressees:  Array<UserGroupOrUser>}) {
+        async setAdressees(
+            { commit },
+            datas: { ticketId: number; addressees: Array<UserGroupOrUser> }
+        ) {
             const { ticketId, addressees } = datas;
             try {
                 const result = await makeFetch(
                     "POST",
                     `/api/1.0/ticket/${ticketId}/addressees/set`,
-                    addressees
+                    {
+                        addressees: addressees.map((addressee) => {
+                            return { id: addressee.id, type: addressee.type };
+                        }),
+                    }
                 );
                 commit("setTicket", result);
             } catch (e: any) {

src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig

@@ -36,7 +36,7 @@
 					<h3 class="text-primary">{{'concerned_patient' | trans}}</h3>
 					<h2>
 						{% for person in ticket.getPersons()  %}
-							<span class="badge text-bg-light" v-for="person in ticket.currentPersons">
+							<span class="badge text-bg-light">
 								{{ person.firstName }}
 								{{ person.lastName }}
 							</span>
@@ -51,12 +51,10 @@
 					<h3 class="text-primary">{{'speaker' | trans}}</h3>
 					<h2>
 						{% for addressee in ticket.getCurrentAddressee() %}
-							<span class="badge text-bg-light" v-for="person in ticket.currentPersons">
+							<span class="badge text-bg-light">
-								{% if addressee.type=='chill_main_user_group'  %}
+
-									{{ addressee.label.fr }}
+								{{ addressee.label.fr }}
-								{% else %}
+
-									{{ addressee.username }}
-								{% endif %}
 							</span>
 						{% endfor %}
 					</h2>