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 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 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 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>
<div>
<div
v-if="providersWithAppointments && providersWithAppointments.length > 1"
>
<div class="m-component slider-no-margin">
<div class="m-content">
<h2
tabindex="0"
style="margin-bottom: 0"
>
{{ t("location") }}
</h2>
</div>
<div class="m-content">
<MucCheckboxGroup :errorMsg="providerSelectionError">
<template #checkboxes>
<MucCheckbox
v-for="provider in selectableProviders"
:key="provider.id"
:id="'checkbox-' + provider.id"
:label="provider.name"
:hint="
provider.address.street + ' ' + provider.address.house_number
"
:model-value="!!selectedProvidersMap[provider.id]"
@update:model-value="
(val: boolean) => onToggle(provider.id, val)
"
/>
</template>
</MucCheckboxGroup>
</div>
</div>
</div>
<div
v-if="
selectedProvider &&
selectableProviders &&
selectableProviders.length === 1
"
>
<div class="m-component">
<div class="m-content">
<h2 tabindex="0">{{ t("location") }}</h2>
</div>
<div class="m-teaser-contained m-teaser-contained-contact">
<div class="m-teaser-contained-contact__body">
<div class="m-teaser-contained-contact__body__inner">
<div class="m-teaser-contained-contact__icon">
<svg
aria-hidden="true"
class="icon"
>
<use xlink:href="#icon-place"></use>
</svg>
</div>
<h3 class="m-teaser-contained-contact__headline">
{{ selectedProvider.name }}
</h3>
<div class="m-teaser-contained-contact__details">
<p class="m-teaser-contained-contact__detail">
<svg
aria-hidden="true"
class="icon icon--before"
>
<use xlink:href="#icon-map-pin"></use>
</svg>
<span>
{{ selectedProvider.address.street }}
{{ selectedProvider.address.house_number }}
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { OfficeImpl } from "@/types/OfficeImpl";
import { MucCheckbox, MucCheckboxGroup } from "@muenchen/muc-patternlab-vue";
import { computed } from "vue";
const props = defineProps<{
t: (key: string) => string;
selectableProviders: OfficeImpl[] | undefined;
providersWithAppointments: OfficeImpl[] | undefined;
selectedProvider: OfficeImpl | null | undefined;
selectedProviders: { [id: string]: boolean };
providerSelectionError: string | undefined;
}>();
const emit = defineEmits<{
(e: "update:selectedProviders", value: { [id: string]: boolean }): void;
}>();
const selectableProviders = computed(() => props.selectableProviders || []);
const selectedProvidersMap = computed(() => props.selectedProviders || {});
const onToggle = (id: string | number, val: boolean) => {
const idStr = String(id);
const next: { [id: string]: boolean } = { ...selectedProvidersMap.value };
next[idStr] = val;
emit("update:selectedProviders", next);
};
</script>
|