mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-14 14:24:24 +00:00
Use teleport for banner
This commit is contained in:
Boris Waaub
parent
473765366a
commit
3f9745d8cf
@ -69,6 +69,13 @@ class Ticket implements TrackCreationInterface, TrackUpdateInterface
|
||||
#[ORM\OneToMany(targetEntity: PersonHistory::class, mappedBy: 'ticket')]
|
||||
private Collection $personHistories;
|
||||
|
||||
#[ORM\ManyToOne(targetEntity: User::class)]
|
||||
#[ORM\JoinColumn(nullable: true)]
|
||||
private ?User $updatedBy = null;
|
||||
|
||||
#[ORM\Column(type: \Doctrine\DBAL\Types\Types::DATETIME_IMMUTABLE, nullable: true)]
|
||||
private ?\DateTimeImmutable $createdAt = null;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
$this->addresseeHistory = new ArrayCollection();
|
||||
@ -76,6 +83,7 @@ class Ticket implements TrackCreationInterface, TrackUpdateInterface
|
||||
$this->motiveHistories = new ArrayCollection();
|
||||
$this->personHistories = new ArrayCollection();
|
||||
$this->inputHistories = new ArrayCollection();
|
||||
|
||||
}
|
||||
|
||||
public function getId(): ?int
|
||||
@ -211,4 +219,16 @@ class Ticket implements TrackCreationInterface, TrackUpdateInterface
|
||||
{
|
||||
return $this->addresseeHistory;
|
||||
}
|
||||
|
||||
public function getCreatedAt(): \DateTimeImmutable
|
||||
{
|
||||
return $this->createdAt;
|
||||
}
|
||||
|
||||
public function getUpdatedBy(): ?User
|
||||
{
|
||||
return $this->updatedBy;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -2,7 +2,6 @@ import {
|
||||
DateTime,
|
||||
TranslatableString,
|
||||
User,
|
||||
UserGroup,
|
||||
UserGroupOrUser
|
||||
} from "../../../../ChillMainBundle/Resources/public/types";
|
||||
import { Person } from "../../../../ChillPersonBundle/Resources/public/types";
|
||||
|
||||
@ -1,5 +1,75 @@
|
||||
<template>
|
||||
<div class="container-xxl p-3" style="padding-bottom: 55px;">
|
||||
<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.externalRef }}</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", {
|
||||
days: 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>
|
||||
<span
|
||||
class="badge text-bg-light m-1"
|
||||
v-for="person in ticket.currentPersons"
|
||||
:key="person.id"
|
||||
>
|
||||
{{ person.firstName }}
|
||||
{{ person.lastName }}
|
||||
</span>
|
||||
</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="addressee in ticket.currentAddressees"
|
||||
:key="addressee.id"
|
||||
>
|
||||
{{
|
||||
typeof addressee.label == "string"
|
||||
? addressee.label
|
||||
: addressee.label.fr
|
||||
}}
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
<div class="container-xxl pt-1" style="padding-bottom: 55px">
|
||||
<ticket-selector-component :tickets="[]" />
|
||||
<ticket-history-list-component :history="ticket.history" />
|
||||
</div>
|
||||
@ -7,50 +77,60 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import { computed, defineComponent, inject, onMounted, ref } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
|
||||
import { computed, defineComponent, inject, onMounted, ref } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
|
||||
// Types
|
||||
import { Motive, Ticket } from '../../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 TicketSelectorComponent from "./components/TicketSelectorComponent.vue";
|
||||
import TicketHistoryListComponent from "./components/TicketHistoryListComponent.vue";
|
||||
import ActionToolbarComponent from "./components/ActionToolbarComponent.vue";
|
||||
import UserRenderBoxBadge from "../../../../../../ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue";
|
||||
import { DateTime } from "../../../../../../ChillMainBundle/Resources/public/types";
|
||||
|
||||
export default defineComponent({
|
||||
name: 'App',
|
||||
name: "App",
|
||||
components: {
|
||||
TicketSelectorComponent,
|
||||
TicketHistoryListComponent,
|
||||
ActionToolbarComponent
|
||||
ActionToolbarComponent,
|
||||
UserRenderBoxBadge,
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const toast = inject('toast') as any;
|
||||
const toast = inject("toast") as any;
|
||||
const headline = ref({} as HTMLHeadingElement);
|
||||
|
||||
store.commit('setTicket', JSON.parse(window.initialTicket) as Ticket);
|
||||
store.commit("setTicket", JSON.parse(window.initialTicket) as Ticket);
|
||||
|
||||
const motives = computed(() => store.getters.getMotives as Motive[])
|
||||
const ticket = computed(() => store.getters.getTicket as Ticket)
|
||||
const motives = computed(() => store.getters.getMotives as Motive[]);
|
||||
const ticket = computed(() => store.getters.getTicket as Ticket);
|
||||
|
||||
function getSince(createdAt: DateTime) {
|
||||
const today = new Date();
|
||||
const date = new Date(createdAt.datetime);
|
||||
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')
|
||||
await store.dispatch('fetchUserGroups')
|
||||
await store.dispatch('fetchUsers')
|
||||
await store.dispatch("fetchMotives");
|
||||
await store.dispatch("fetchUserGroups");
|
||||
await store.dispatch("fetchUsers");
|
||||
} catch (error) {
|
||||
toast.error(error)
|
||||
};
|
||||
toast.error(error);
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
headline,
|
||||
motives,
|
||||
ticket,
|
||||
getSince,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div
|
||||
class="card my-2 bg-light"
|
||||
v-for="history_line in history"
|
||||
:key="history_line.data.id"
|
||||
:key="history.indexOf(history_line)"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="fw-bold fst-italic">
|
||||
@ -12,7 +12,6 @@
|
||||
history_line.by.username
|
||||
}}</span>
|
||||
</div>
|
||||
{{history_line.event_type}}
|
||||
<div class="card-body row fst-italic">
|
||||
<ticket-history-person-component
|
||||
:personHistory="history_line.data"
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="btn-group" @click="handleClick">
|
||||
<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{{ $t('ticket.previous_tickets') }}
|
||||
@ -9,6 +10,8 @@
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { multiSelectMessages } from"../../../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
|
||||
import { multiSelectMessages } from "../../../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
|
||||
|
||||
const messages = {
|
||||
fr: {
|
||||
@ -32,7 +32,15 @@ const messages = {
|
||||
save: "Enregistrer",
|
||||
success: "Transfert effectué",
|
||||
},
|
||||
close: "Fermer"
|
||||
close: "Fermer",
|
||||
banner: {
|
||||
concerned_patient: "Patient concerné",
|
||||
caller: "Appelant",
|
||||
speaker: "Intervenant",
|
||||
open: "Ouvert",
|
||||
since: "Depuis 1 jour | Depuis {days} jour(s)",
|
||||
no_motive: "Pas de motif",
|
||||
},
|
||||
},
|
||||
};
|
||||
Object.assign(messages.fr, multiSelectMessages.fr);
|
||||
|
||||
@ -1,65 +1,8 @@
|
||||
<div class="banner banner-ticket ">
|
||||
<div id="header-ticket-main" class="header-name">
|
||||
<div class="container-xxl text-primary">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ps-md-5 ps-xxl-0 ">
|
||||
<h2>
|
||||
#{{ ticket.getExternalRef() }}
|
||||
</h2>
|
||||
<h1>
|
||||
{% if ticket.getMotive() %}
|
||||
{{ ticket.getMotive().label.fr }}
|
||||
{% else %}
|
||||
{{ ticket.getMotive() }}
|
||||
<p class="chill-no-data-statement">
|
||||
{{ "no_motive"|trans }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="float-end">
|
||||
<h1>
|
||||
<span class="badge text-bg-chill-green text-white">{{'open' | trans}}</span>
|
||||
</h1>
|
||||
<h3 class="fst-italic">{{'since' | trans}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="header-ticket-details" class="header-details">
|
||||
<div class="container-xxl">
|
||||
<div class="row justify-content-between">
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<h3 class="text-primary">{{'concerned_patient' | trans}}</h3>
|
||||
<h2>
|
||||
{% for person in ticket.getPersons() %}
|
||||
<span class="badge text-bg-light">
|
||||
{{ person.firstName }}
|
||||
{{ person.lastName }}
|
||||
</span>
|
||||
{% endfor %}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<h3 class="text-primary">{{'caller' | trans}}</h3>
|
||||
<h2></h2>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<h3 class="text-primary">{{'speaker' | trans}}</h3>
|
||||
<h2>
|
||||
{% for addressee in ticket.getCurrentAddressee() %}
|
||||
<span class="badge text-bg-light">
|
||||
|
||||
{{ addressee.label.fr }}
|
||||
|
||||
</span>
|
||||
{% endfor %}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -42,6 +42,8 @@ final class TicketNormalizer implements NormalizerInterface, NormalizerAwareInte
|
||||
'currentInputs' => $this->normalizer->normalize($object->getCurrentInputs(), $format, ['groups' => 'read']),
|
||||
'currentMotive' => $this->normalizer->normalize($object->getMotive(), $format, ['groups' => 'read']),
|
||||
'history' => array_values($this->serializeHistory($object, $format, ['groups' => 'read'])),
|
||||
'createdAt' => $object->getCreatedAt(),
|
||||
'updatedBy' => $object->getUpdatedBy(),
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
concerned_patient: Patient concerné
|
||||
caller: Appelant
|
||||
speaker: Intervenant
|
||||
open: Ouvert
|
||||
since: Depuis
|
||||
no_motive: Pas de motif
|
||||
Loading…
x
Reference in New Issue
Block a user