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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<muc-intro
v-if="appointment"
:tagline="t('appointment')"
:title="formatMultilineTitle(appointment)"
>
<div class="appointment-data">
<p tabindex="0">
<b> {{ t("appointmentNumber") }}: </b>
{{ appointment.processId }}
</p>
<muc-link
:label="
formatAppointmentDateTime(appointment.timestamp) +
'' +
t('timeStampSuffix')
"
prepend-icon="calendar"
@click.prevent="focusTime"
/>
<br />
<muc-link
v-if="selectedProvider"
:label="
selectedProvider.address.street +
' ' +
selectedProvider.address.house_number
"
prepend-icon="map-pin"
@click.prevent="focusLocation"
/>
</div>
<div class="m-button-group">
<muc-button
icon="arrow-right"
@click="rescheduleAppointment"
>
<template #default>{{ t("rescheduleAppointment") }}</template>
</muc-button>
<muc-button
icon="trash"
variant="secondary"
@click="cancelAppointment"
>
<template #default>
<span>{{ t("cancelAppointment") }}</span>
</template>
</muc-button>
</div>
</muc-intro>
</template>
<script setup lang="ts">
import { MucButton, MucIntro, MucLink } from "@muenchen/muc-patternlab-vue";
import { AppointmentImpl } from "@/types/AppointmentImpl";
import { OfficeImpl } from "@/types/OfficeImpl";
import { formatAppointmentDateTime } from "@/utils/formatAppointmentDateTime";
import { formatMultilineTitle } from "@/utils/formatMultilineTitle";
defineProps<{
appointment: AppointmentImpl | undefined;
selectedProvider: OfficeImpl | undefined;
t: (key: string) => string;
}>();
const emit =
defineEmits<
(
e:
| "cancelAppointment"
| "focusLocation"
| "focusTime"
| "rescheduleAppointment"
) => void
>();
const cancelAppointment = () => emit("cancelAppointment");
const focusLocation = () => emit("focusLocation");
const focusTime = () => emit("focusTime");
const rescheduleAppointment = () => emit("rescheduleAppointment");
</script>
<style scoped>
.appointment-data {
margin-top: 32px;
margin-bottom: 16px;
}
.appointment-data p,
a {
padding-bottom: 16px;
}
:deep(.m-intro-vertical__title) {
margin-bottom: 0 !important;
white-space: pre-wrap;
}
</style>
|