Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 1x | <template>
<muc-card
class="multiline-text"
:tagline="t('appointment')"
:title="formatMultilineTitle(appointment)"
@click="goToAppointmentLink(appointment.processId!)"
>
<template #headerPrefix>
<calendar-icon
:timestamp="appointment.timestamp"
aria-hidden="true"
/>
</template>
<template #content>
<p class="m-teaser-contained-contact__detail">
<muc-icon icon="calendar" />
{{ formatAppointmentDateTime(appointment.timestamp) }}
{{ t("timeStampSuffix") }} <br />
</p>
<p class="m-teaser-contained-contact__detail">
<muc-icon icon="map-pin" />
{{ selectedProvider?.address.street }}
{{ selectedProvider?.address.house_number }} <br />
</p>
<b>{{ t("appointmentNumber") }}:</b>
{{ appointment.processId }}
</template>
</muc-card>
</template>
<script setup lang="ts">
import { MucCard, MucIcon } from "@muenchen/muc-patternlab-vue";
import { onMounted, ref } from "vue";
import { AppointmentDTO } from "@/api/models/AppointmentDTO";
import { Office } from "@/api/models/Office";
import CalendarIcon from "@/components/Common/CalendarIcon.vue";
import { QUERY_PARAM_APPOINTMENT_ID } from "@/utils/Constants";
import { formatAppointmentDateTime } from "@/utils/formatAppointmentDateTime";
import { formatMultilineTitle } from "@/utils/formatMultilineTitle";
const props = defineProps<{
appointment: AppointmentDTO;
appointmentDetailUrl: string;
offices: Office[];
t: (key: string) => string;
}>();
const selectedProvider = ref<Office>();
const goToAppointmentLink = (appointmentNumber: string) => {
location.href = `${props.appointmentDetailUrl}?${QUERY_PARAM_APPOINTMENT_ID}=${appointmentNumber}`;
};
onMounted(() => {
const foundOffice = props.offices.find(
(office) => office.id == props.appointment.officeId
);
if (foundOffice) {
selectedProvider.value = foundOffice;
}
});
</script>
<style scoped>
.multiline-text {
white-space: pre-wrap;
}
</style>
|