mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-10-31 01:08:26 +00:00
Use colors and badges for history and banner
This commit is contained in:
Boris Waaub
@@ -1,87 +1,5 @@
|
||||
<template>
|
||||
<Teleport to="#header-ticket-main">
|
||||
<div class="container-xxl text-primary">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-12 ps-md-5 ps-xxl-0">
|
||||
<h2>#{{ ticket.id }}</h2>
|
||||
<h1 v-if="ticket.currentMotive">
|
||||
{{ ticket.currentMotive.label.fr }}
|
||||
</h1>
|
||||
<p class="chill-no-data-statement" v-else>
|
||||
{{ $t("banner.no_motive") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="float-end">
|
||||
<h1>
|
||||
<span class="badge text-bg-chill-green text-white">
|
||||
{{ $t("banner.open") }}
|
||||
</span>
|
||||
</h1>
|
||||
<h3 class="fst-italic" v-if="ticket.createdAt">
|
||||
{{
|
||||
$t("banner.since", {
|
||||
count: getSince(ticket.createdAt),
|
||||
})
|
||||
}}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
<Teleport to="#header-ticket-details">
|
||||
<div class="container-xxl">
|
||||
<div class="row justify-content-between">
|
||||
<!-- <div class="col-md-4 col-sm-12">
|
||||
<h3 class="text-primary">{{ $t("concerned_patient") }}</h3>
|
||||
</div> -->
|
||||
<div class="col-md-6 col-sm-12 ps-md-5 ps-xxl-0">
|
||||
<h3 class="text-primary">{{ $t("banner.caller") }}</h3>
|
||||
<h2>
|
||||
<person-render-box
|
||||
render="badge"
|
||||
v-for="person in ticket.currentPersons"
|
||||
:key="person.id"
|
||||
:person="person"
|
||||
:options="{
|
||||
addLink: true,
|
||||
addId: false,
|
||||
addAltNames: false,
|
||||
addEntity: true,
|
||||
addInfo: true,
|
||||
hLevel: 3,
|
||||
isMultiline: true,
|
||||
isConfidential: false,
|
||||
|
||||
}"
|
||||
/>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<h3 class="text-primary">{{ $t("banner.speaker") }}</h3>
|
||||
|
||||
<h2>
|
||||
<span
|
||||
class="badge text-bg-light m-1"
|
||||
v-for="user_group in ticket.currentAddressees.filter((addressee) => addressee.type == 'user') as Array<User>"
|
||||
:key="user_group.id"
|
||||
>
|
||||
{{ user_group.label }}
|
||||
</span>
|
||||
<span
|
||||
class="badge text-bg-light m-1"
|
||||
v-for="user_group in ticket.currentAddressees.filter((addressee) => addressee.type == 'user_group') as Array<UserGroup>"
|
||||
:key="user_group.id"
|
||||
>
|
||||
{{ user_group.label.fr }}
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
<banner-component :ticket="ticket" />
|
||||
<div class="container-xxl pt-1" style="padding-bottom: 55px">
|
||||
<ticket-selector-component :tickets="[]" />
|
||||
<ticket-history-list-component :history="ticketHistory" />
|
||||
@@ -94,18 +12,13 @@ import { computed, defineComponent, inject, onMounted, ref } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
|
||||
// Types
|
||||
import {
|
||||
DateTime,
|
||||
User,
|
||||
UserGroup,
|
||||
} from "../../../../../../ChillMainBundle/Resources/public/types";
|
||||
import { Motive, Ticket } from "../../types";
|
||||
|
||||
// Components
|
||||
import TicketSelectorComponent from "./components/TicketSelectorComponent.vue";
|
||||
import TicketHistoryListComponent from "./components/TicketHistoryListComponent.vue";
|
||||
import ActionToolbarComponent from "./components/ActionToolbarComponent.vue";
|
||||
import PersonRenderBox from "../../../../../../ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue";
|
||||
import BannerComponent from "./components/BannerComponent.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "App",
|
||||
@@ -113,12 +26,11 @@ export default defineComponent({
|
||||
TicketSelectorComponent,
|
||||
TicketHistoryListComponent,
|
||||
ActionToolbarComponent,
|
||||
PersonRenderBox,
|
||||
BannerComponent,
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const toast = inject("toast") as any;
|
||||
const headline = ref({} as HTMLHeadingElement);
|
||||
|
||||
store.commit("setTicket", JSON.parse(window.initialTicket) as Ticket);
|
||||
|
||||
@@ -128,15 +40,6 @@ export default defineComponent({
|
||||
() => store.getters.getDistinctAddressesHistory
|
||||
);
|
||||
|
||||
function getSince(createdAt: any) {
|
||||
const today = new Date();
|
||||
const date = new Date(createdAt.date);
|
||||
|
||||
const timeDiff = Math.abs(today.getTime() - date.getTime());
|
||||
const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
|
||||
return daysDiff;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await store.dispatch("fetchMotives");
|
||||
@@ -149,10 +52,8 @@ export default defineComponent({
|
||||
|
||||
return {
|
||||
ticketHistory,
|
||||
headline,
|
||||
motives,
|
||||
ticket,
|
||||
getSince,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<h3>
|
||||
<div class="col-12">
|
||||
<span
|
||||
class="badge m-1"
|
||||
:style="`background-color: ${userGroup.backgroundColor}; color: white;`"
|
||||
v-for="userGroup in userGroupLevels"
|
||||
:key="userGroup.id"
|
||||
>
|
||||
{{ userGroup.label.fr }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<span
|
||||
class="badge m-1"
|
||||
:style="`background-color: ${userGroup.backgroundColor}; color: white;`"
|
||||
v-for="userGroup in userGroups"
|
||||
:key="userGroup.id"
|
||||
>
|
||||
{{ userGroup.label.fr }}
|
||||
</span>
|
||||
</div>
|
||||
</h3>
|
||||
<div class="col-12">
|
||||
<span class="badge bg-primary m-1" v-for="user in users" :key="user.id">
|
||||
{{ user.label }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType, defineComponent, ref } from "vue";
|
||||
|
||||
// Types
|
||||
import {
|
||||
User,
|
||||
UserGroup,
|
||||
UserGroupOrUser,
|
||||
} from "../../../../../../../ChillMainBundle/Resources/public/types";
|
||||
import { Ticket } from "../../../types";
|
||||
|
||||
export default defineComponent({
|
||||
name: "AddresseeComponent",
|
||||
props: {
|
||||
addressees: {
|
||||
type: Array as PropType<UserGroupOrUser[]>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props, ctx) {
|
||||
const userGroups = ref(
|
||||
props.addressees.filter(
|
||||
(addressee) =>
|
||||
addressee.type == "user_group" && addressee.excludeKey == ""
|
||||
) as UserGroup[]
|
||||
);
|
||||
const userGroupLevels = ref(
|
||||
props.addressees.filter(
|
||||
(addressee) =>
|
||||
addressee.type == "user_group" &&
|
||||
addressee.excludeKey == "level"
|
||||
) as UserGroup[]
|
||||
);
|
||||
const users = ref(
|
||||
props.addressees.filter(
|
||||
(addressee) => addressee.type == "user"
|
||||
) as User[]
|
||||
);
|
||||
return { userGroups, users, userGroupLevels };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<Teleport to="#header-ticket-main">
|
||||
<div class="container-xxl text-primary">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-12 ps-md-5 ps-xxl-0">
|
||||
<h2>#{{ ticket.id }}</h2>
|
||||
<h1 v-if="ticket.currentMotive">
|
||||
{{ ticket.currentMotive.label.fr }}
|
||||
</h1>
|
||||
<p class="chill-no-data-statement" v-else>
|
||||
{{ $t("banner.no_motive") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<div class="float-end">
|
||||
<h1>
|
||||
<span class="badge text-bg-chill-green text-white">
|
||||
{{ $t("banner.open") }}
|
||||
</span>
|
||||
</h1>
|
||||
<h3 class="fst-italic" v-if="ticket.createdAt">
|
||||
{{
|
||||
$t("banner.since", {
|
||||
count: getSince(ticket.createdAt),
|
||||
})
|
||||
}}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
<Teleport to="#header-ticket-details">
|
||||
<div class="container-xxl">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-md-6 col-sm-12 ps-md-5 ps-xxl-0">
|
||||
<h3 class="text-primary">{{ $t("banner.caller") }}</h3>
|
||||
|
||||
<person-render-box
|
||||
render="badge"
|
||||
v-for="person in ticket.currentPersons"
|
||||
:key="person.id"
|
||||
:person="person"
|
||||
:options="{
|
||||
addLink: true,
|
||||
addId: false,
|
||||
addAltNames: false,
|
||||
addEntity: true,
|
||||
addInfo: true,
|
||||
hLevel: 3,
|
||||
isMultiline: true,
|
||||
isConfidential: false,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<h3 class="text-primary">{{ $t("banner.speaker") }}</h3>
|
||||
<addressee-component
|
||||
:addressees="ticket.currentAddressees"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType, defineComponent, ref, watch } from "vue";
|
||||
|
||||
// Components
|
||||
import PersonRenderBox from "../../../../../../../ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue";
|
||||
import AddresseeComponent from "./AddresseeComponent.vue";
|
||||
|
||||
// Types
|
||||
import {
|
||||
User,
|
||||
UserGroup,
|
||||
} from "../../../../../../../ChillMainBundle/Resources/public/types";
|
||||
import { Ticket } from "../../../types";
|
||||
|
||||
export default defineComponent({
|
||||
name: "BannerComponent",
|
||||
props: {
|
||||
ticket: {
|
||||
type: Object as PropType<Ticket>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
PersonRenderBox,
|
||||
AddresseeComponent,
|
||||
},
|
||||
setup() {
|
||||
function getSince(createdAt: any) {
|
||||
const today = new Date();
|
||||
const date = new Date(createdAt.date);
|
||||
|
||||
const timeDiff = Math.abs(today.getTime() - date.getTime());
|
||||
const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
|
||||
return daysDiff;
|
||||
}
|
||||
return { getSince };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -1,21 +1,6 @@
|
||||
<template>
|
||||
<div class="col-12">
|
||||
<i class="fa fa-paper-plane"></i>
|
||||
|
||||
<span class="mx-1" v-if="addressee.type == 'user_group'">
|
||||
{{
|
||||
$t(`history.${event_type}_user_group`, {
|
||||
user_group: addressee.label.fr,
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<span class="mx-1" v-else-if="addressee.type == 'user'">
|
||||
{{
|
||||
$t(`history.${event_type}_user`, {
|
||||
user: addressee.username,
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
<addressee-component :addressees="addressees" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -23,25 +8,24 @@
|
||||
import { PropType, defineComponent, ref } from "vue";
|
||||
|
||||
// Types
|
||||
import { AddresseeHistory } from "../../../types";
|
||||
import { UserGroupOrUser } from "../../../../../../../ChillMainBundle/Resources/public/types";
|
||||
|
||||
// Components
|
||||
import AddresseeComponent from "./AddresseeComponent.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "TicketHistoryAddresseeComponent",
|
||||
props: {
|
||||
addresseeHistory: {
|
||||
type: Object as PropType<AddresseeHistory>,
|
||||
required: true,
|
||||
},
|
||||
event_type: {
|
||||
type: String,
|
||||
addressees: {
|
||||
type: Array as PropType<UserGroupOrUser[]>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
AddresseeComponent,
|
||||
},
|
||||
setup(props, ctx) {
|
||||
return {
|
||||
addressee: ref(props.addresseeHistory.addressee as UserGroupOrUser),
|
||||
};
|
||||
return {};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
history_line.by.username
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="card-body row fst-italic">
|
||||
<div class="card-body row">
|
||||
<ticket-history-person-component
|
||||
:personHistory="history_line.data"
|
||||
v-if="history_line.event_type == 'add_person'"
|
||||
@@ -30,21 +30,21 @@
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="card-header">
|
||||
<span class="fw-bold fst-italic">
|
||||
<i class="fa fa-paper-plane me-1"></i>
|
||||
<span class="fw-bold fst-italic mx-1">
|
||||
{{ formatDate(history_line[0].at) }}
|
||||
</span>
|
||||
<span class="badge bg-white text-black mx-1">{{
|
||||
history_line[0].by.username
|
||||
}}</span>
|
||||
<span class="badge bg-white text-black mx-1">
|
||||
{{ history_line[0].by.username }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="card-body row fst-italic"
|
||||
v-for="addressee in history_line"
|
||||
:key="history_line.indexOf(addressee)"
|
||||
>
|
||||
<div class="card-body row">
|
||||
<ticket-history-addressee-component
|
||||
:addresseeHistory="addressee.data"
|
||||
:event_type="addressee.event_type"
|
||||
:addressees="
|
||||
history_line
|
||||
.map((line) => line.data)
|
||||
.map((data) => data.addressee)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -43,7 +43,7 @@ const messages = {
|
||||
banner: {
|
||||
concerned_patient: "Patient concerné",
|
||||
caller: "Appelant",
|
||||
speaker: "Intervenant",
|
||||
speaker: "Destinataire(s)",
|
||||
open: "Ouvert",
|
||||
since: "Aucun jour | Depuis 1 jour | Depuis {count} jours",
|
||||
no_motive: "Pas de motif",
|
||||
|
||||
Reference in New Issue
Block a user