@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/src/components/Appointment/Card/Card.vue

@@ -1,98 +1,98 @@
-<template>
-    <div data-testid="root">
-        <a :href="appointmentLink ?? '#'" rel="noopener noreferrer" class="appointment-card">
-            <div :class="{ 'card-opacity': appointment?.status === 'done' || appointment?.status === 'cancelled' || appointment?.status === 'missed' }">
-                <div
-                    :class="['card-header', appointment.status === 'cancelled' ? 'card-header--cancelled' : 'card-header--default']">
-                    <div class="header-item" v-if="showPatientName">
-                        <UserIcon class="header-icon" />
-                        <p> {{ appointment?.patientName || t('wl.appointment_card.unknown_patient') }} </p>
-                    </div>
-                    <div class="header-item">
-                        <CalendarIcon class="header-icon" />
-                        <p> {{ treatmentDate }} </p>
-                    </div>
-                    <div class="header-item">
-                        <ClockIcon class="header-icon" />
-                        <p> {{ treatmentTime }} </p>
-                    </div>
-                </div>
-
-                <div class="card-body">
-                    <div class="flex items-center gap-3 ">
-                        <div class="min-w-[40]" v-if="getAppointmentType?.id">
-                            <IconsAdvanceAppointments width="40" height="40" :iconType="getAppointmentType.icon" />
-                        </div>
-                        <h3 class="flex-1 min-w-0 truncate">
-                            <span v-if="getAppointmentType?.id">
-                                {{ getAppointmentType.title }}
-                                <br />
-                            </span>
-                            {{ Array.isArray(appointment?.template_name) ? appointment?.template_name.join(', ') :
-                                appointment?.template_name }}
-                        </h3>
-                    </div>
-                    <Details :appointment="appointment" :dentist-image-src="dentistImageSrc" />
-                    <hr v-if="showActions" />
-                </div>
-            </div>
-        </a>
-        <div class="card-footer" v-if="showActions">
-            <Actions :disabled="disabled" :appointment="appointment" @confirmed="emit('confirm', appointment?.id)"
-                @cancelled="emit('cancel', appointment?.id)" @rescheduled="emit('reschedule', appointment?.id)" />
-            <template v-if="showAnamneseNotification">
-                <AnamneseNotification @fill-anamnese="emit('fill-anamnese')"/>
-            </template>
-        </div>
-    </div>
-</template>
-
-
-<script setup lang="ts">
-import { format } from 'date-fns'
-import IconsAdvanceAppointments from '../../../components/Icons/AdvanceAppointments.vue';
-import { de } from 'date-fns/locale'
-import type { AppointmentData } from '@/types'
-import { appointmentTypes } from '../../../utils/index';
-import Details from './Details.vue'
-import Actions from './Actions.vue'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n';
-import AnamneseNotification from './AnamneseNotification.vue';
-import { UserIcon, ClockIcon, CalendarIcon } from '@heroicons/vue/24/outline';
-
-const emit = defineEmits<{
-    (e: 'confirm', id: string): void
-    (e: 'cancel', id: string): void
-    (e: 'reschedule', id: string): void
-    (e: 'fill-anamnese'): void
-}>()
-
-const { t } = useI18n();
-
-const props = withDefaults(defineProps<{
-    appointment: AppointmentData,
-    appointmentLink?: string,
-    dentistImageSrc?: string,
-    disabled?: boolean,
-    duplicateTreatmentDatetime?: boolean,
-    showAnamneseNotification?: boolean,
-    showActions?: boolean,
-    showPatientName?: boolean,
-}>(), {
-    showPatientName: true,
-})
-const treatmentDate = computed(() => {
-    return format(props.appointment ? new Date(props.appointment.start) : new Date(), 'EEE, d MMM yyyy', { locale: de })
-})
-
-const treatmentTime = computed(() => {
-    return format(props.appointment ? new Date(props.appointment.start) : new Date(), 'HH:mm')
-})
-
-const getAppointmentType = computed(() => {
-    return appointmentTypes.find(item => item.id === props.appointment?.type)
-})
-</script>
-
+<template>
+    <div data-testid="root">
+        <a :href="appointmentLink ?? '#'" rel="noopener noreferrer" class="appointment-card">
+            <div :class="{ 'card-opacity': appointment?.status === 'done' || appointment?.status === 'cancelled' || appointment?.status === 'missed' }">
+                <div
+                    :class="['card-header', appointment.status === 'cancelled' ? 'card-header--cancelled' : 'card-header--default']">
+                    <div class="header-item" v-if="showPatientName">
+                        <UserIcon class="header-icon" />
+                        <p> {{ appointment?.patientName || t('wl.appointment_card.unknown_patient') }} </p>
+                    </div>
+                    <div class="header-item">
+                        <CalendarIcon class="header-icon" />
+                        <p> {{ treatmentDate }} </p>
+                    </div>
+                    <div class="header-item">
+                        <ClockIcon class="header-icon" />
+                        <p> {{ treatmentTime }} </p>
+                    </div>
+                </div>
+
+                <div class="card-body">
+                    <div class="flex items-center gap-3 ">
+                        <div class="min-w-[40]" v-if="getAppointmentType?.id">
+                            <IconsAdvanceAppointments width="40" height="40" :iconType="getAppointmentType.icon" />
+                        </div>
+                        <h3 class="flex-1 min-w-0 truncate">
+                            <span v-if="getAppointmentType?.id">
+                                {{ getAppointmentType.title }}
+                                <br />
+                            </span>
+                            {{ Array.isArray(appointment?.template_name) ? appointment?.template_name.join(', ') :
+                                appointment?.template_name }}
+                        </h3>
+                    </div>
+                    <Details :appointment="appointment" :dentist-image-src="dentistImageSrc" />
+                    <hr v-if="showActions" />
+                </div>
+            </div>
+        </a>
+        <div class="card-footer" v-if="showActions">
+            <Actions :disabled="disabled" :appointment="appointment" @confirmed="emit('confirm', appointment?.id)"
+                @cancelled="emit('cancel', appointment?.id)" @rescheduled="emit('reschedule', appointment?.id)" />
+            <template v-if="showAnamneseNotification">
+                <AnamneseNotification @fill-anamnese="emit('fill-anamnese')"/>
+            </template>
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+import IconsAdvanceAppointments from '../../../components/Icons/AdvanceAppointments.vue';
+import { de } from 'date-fns/locale'
+import type { AppointmentData } from '@/types'
+import { appointmentTypes } from '../../../utils/index';
+import Details from './Details.vue'
+import Actions from './Actions.vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n';
+import AnamneseNotification from './AnamneseNotification.vue';
+import { UserIcon, ClockIcon, CalendarIcon } from '@heroicons/vue/24/outline';
+
+const emit = defineEmits<{
+    (e: 'confirm', id: string): void
+    (e: 'cancel', id: string): void
+    (e: 'reschedule', id: string): void
+    (e: 'fill-anamnese'): void
+}>()
+
+const { t } = useI18n();
+
+const props = withDefaults(defineProps<{
+    appointment: AppointmentData,
+    appointmentLink?: string,
+    dentistImageSrc?: string,
+    disabled?: boolean,
+    duplicateTreatmentDatetime?: boolean,
+    showAnamneseNotification?: boolean,
+    showActions?: boolean,
+    showPatientName?: boolean,
+}>(), {
+    showPatientName: true,
+})
+const treatmentDate = computed(() => {
+    return format(props.appointment ? new Date(props.appointment.start) : new Date(), 'EEE, d MMM yyyy', { locale: de })
+})
+
+const treatmentTime = computed(() => {
+    return format(props.appointment ? new Date(props.appointment.start) : new Date(), 'HH:mm')
+})
+
+const getAppointmentType = computed(() => {
+    return appointmentTypes.find(item => item.id === props.appointment?.type)
+})
+</script>
+
 <style src="./Card.css" scoped></style>

package/src/components/Appointment/Card/Details.css

@@ -1,63 +1,63 @@
-/* Details component styles */
-.details-grid {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  padding: 0.5rem 0;
-}
-
-.dentist-section {
-  grid-column: span 7;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.dentist-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.dentist-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.dentist-image {
-  height: 2rem;
-  width: 2rem;
-  border-radius: 50%;
-}
-
-.dentist-info {
-  display: flex;
-  flex-direction: column;
-}
-
-.location-section {
-  grid-column: span 5;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  text-align: left;
-  gap: 0.5rem;
-}
-
-.location-icon {
-  flex-shrink: 0;
-  color: var(--appointment_card_title);
-  width: 16px;
-  height: 16px;
-}
-
-/* Primary text in details section */
-.dentist-info p,
-.location-section p {
-  color: var(--appointment_card_title);
-}
-
-/* Secondary text in details section */
-.detail-secondary {
-  color: var(--appointment_card_text);
+/* Details component styles */
+.details-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  padding: 0.5rem 0;
+}
+
+.dentist-section {
+  grid-column: span 7;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dentist-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.dentist-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dentist-image {
+  height: 2rem;
+  width: 2rem;
+  border-radius: 50%;
+}
+
+.dentist-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.location-section {
+  grid-column: span 5;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: left;
+  gap: 0.5rem;
+}
+
+.location-icon {
+  flex-shrink: 0;
+  color: var(--appointment_card_title);
+  width: 16px;
+  height: 16px;
+}
+
+/* Primary text in details section */
+.dentist-info p,
+.location-section p {
+  color: var(--appointment_card_title);
+}
+
+/* Secondary text in details section */
+.detail-secondary {
+  color: var(--appointment_card_text);
 }

package/src/components/Appointment/Card/Details.vue

@@ -1,45 +1,45 @@
-<template>
-    <div v-if="appointment?.dentist" class="details-grid">
-        <div class="dentist-section">
-
-            <!-- render one or many dentists -->
-            <div class="dentist-list">
-                <div v-for="dentist in (Array.isArray(appointment?.dentist) ? appointment?.dentist : [appointment?.dentist])"
-                    :key="dentist.name + dentist.gender" class="dentist-item">
-
-                    <img :src="dentist.imageSrc || dentistImageSrc || avatarPlaceholder" alt="Dentist photo"
-                        class="dentist-image" />
-
-                    <div class="dentist-info">
-                        <p class="p-small">{{ dentist.name }}</p>
-                        <p class="p-small detail-secondary">{{ dentist.gender }}</p>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-        <div class="location-section">
-            <div>
-                <MapPinIcon class="location-icon" />
-            </div>
-            <div>
-                <p class="p-small"> {{ appointment.address || 'Unbekannter Ort' }}</p>
-                <p class="p-small detail-secondary"> {{ appointment?.district || 'Unbekannter Stadtteil' }}
-                </p>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import type { AppointmentData } from '@/types';
-import { MapPinIcon } from '@heroicons/vue/24/outline';
-import avatarPlaceholder from '../../../assets/images/avatar-placeholder.jpg';
-
-defineProps<{
-    appointment: AppointmentData,
-    dentistImageSrc?: string
-}>()
-</script>
-
+<template>
+    <div v-if="appointment?.dentist" class="details-grid">
+        <div class="dentist-section">
+
+            <!-- render one or many dentists -->
+            <div class="dentist-list">
+                <div v-for="dentist in (Array.isArray(appointment?.dentist) ? appointment?.dentist : [appointment?.dentist])"
+                    :key="dentist.name + dentist.gender" class="dentist-item">
+
+                    <img :src="dentist.imageSrc || dentistImageSrc || avatarPlaceholder" alt="Dentist photo"
+                        class="dentist-image" />
+
+                    <div class="dentist-info">
+                        <p class="p-small">{{ dentist.name }}</p>
+                        <p class="p-small detail-secondary">{{ dentist.gender }}</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="location-section">
+            <div>
+                <MapPinIcon class="location-icon" />
+            </div>
+            <div>
+                <p class="p-small"> {{ appointment.address || 'Unbekannter Ort' }}</p>
+                <p class="p-small detail-secondary"> {{ appointment?.district || 'Unbekannter Stadtteil' }}
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { AppointmentData } from '@/types';
+import { MapPinIcon } from '@heroicons/vue/24/outline';
+import avatarPlaceholder from '../../../assets/images/avatar-placeholder.jpg';
+
+defineProps<{
+    appointment: AppointmentData,
+    dentistImageSrc?: string
+}>()
+</script>
+
 <style src="./Details.css" scoped></style>