Add user group addressee

This commit is contained in:
Boris Waaub 2024-05-02 13:18:45 +02:00
parent 7b8cd90cf1
commit eb0bf56cff
11 changed files with 178 additions and 46 deletions

View File

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

View File

@ -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)
};

View File

@ -24,19 +24,21 @@
</div>
<div v-if="activeTab === 'transfert'">
<form @submit.prevent="setAdressees">
<addressee-selector-component v-model="addressees" :user-groups="userGroups" :users="users" />
<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("transfert.save") }}
</button>
</div>
</form>
</div>
<div v-if="activeTab === 'motive'">
<form @submit.prevent="createMotive">
<motive-selector-component v-model="motive" :motives="motives"
:current-motive="ticket.currentMotive" />
<motive-selector-component v-model="motive" :motives="motives" />
<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 motives = ref(store.getters.getMotives as Motive[]);
const ticket = computed(() => store.getters.getTicket as Ticket);
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;

View File

@ -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>

View File

@ -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) => {

View File

@ -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>

View File

@ -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>

View File

@ -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",

View File

@ -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;
}
},

View File

@ -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) => {
commit("setUserGroups", results);
fetchResults("/api/1.0/main/user.json").then((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) {

View File

@ -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">
{% if addressee.type=='chill_main_user_group' %}
<span class="badge text-bg-light">
{{ addressee.label.fr }}
{% else %}
{{ addressee.username }}
{% endif %}
</span>
{% endfor %}
</h2>