@zap-wunschlachen/wl-shared-components 1.0.4 → 1.0.5

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

@@ -1,61 +1,81 @@
-/* Card component styles */
-.appointment-card {
-  display: block;
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
-  overflow: hidden;
-  text-decoration: none;
-}
-
-.card-opacity {
-  opacity: 0.5;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-}
-
-.header-bg-normal {
-  background-color: var(--Dental-Light-Blue-1);
-}
-
-.header-bg-cancelled {
-  background-color: rgb(254 226 226); /* red-100 equivalent */
-}
-
-.header-item {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.header-icon {
-  flex-shrink: 0;
-}
-
-.card-body {
-  background-color: white;
-  padding: 1rem;
-  gap: 1rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.card-footer {
-  background-color: white;
-  padding: 1rem;
-  border-bottom-left-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-
-.appointment-detail {
-  margin: 0;
-  font-weight: 600;
-  font-size: 1.125rem; /* text-lg */
-  line-height: 1.75rem; /* leading-7 */
-  text-align: left;
-}
+/* Card component styles */
+.appointment-card {
+  display: block;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  overflow: hidden;
+  text-decoration: none;
+}
+
+.card-opacity {
+  opacity: 0.5;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+}
+
+.header-bg-normal {
+  background-color: var(--Dental-Light-Blue-1);
+}
+
+.header-bg-cancelled {
+  background-color: rgb(254 226 226); /* red-100 equivalent */
+}
+
+.header-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.header-icon {
+  flex-shrink: 0;
+}
+
+.card-body {
+  background-color: white;
+  padding: 1rem;
+  gap: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-footer {
+  background-color: white;
+  padding: 1rem;
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.appointment-detail {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.125rem; /* text-lg */
+  line-height: 1.75rem; /* leading-7 */
+  text-align: left;
+}
+.card-body .flex {
+  display: flex;
+}
+.card-body .items-center {
+  align-items: center;
+}
+.card-body .gap-3 {
+  gap: 0.75rem;
+}
+.card-body .flex-1 {
+  flex: 1 1 0%;
+}
+.min-w-0{
+  min-width: 0;
+}
+.truncate{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+} 

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

@@ -1,75 +1,89 @@
-<template>
-    <div data-testid="root">
-        <a :href="appointmentLink ?? '#'" rel="noopener noreferrer"
-            class="appointment-card">
-            <div :class="{ 'card-opacity': appointment?.status === 'past' }">
-                <div
-                    :class="['card-header', appointment.status === 'cancelled' ? 'header-bg-cancelled' : 'header-bg-normal']">
-                    <div class="header-item">
-                        <Icon name="heroicons:user-circle" size="20" class="header-icon" />
-                        <p> {{ appointment?.patientName || t('wl.appointment_card.unknown_patient') }} </p>
-                    </div>
-                    <div class="header-item">
-                        <Icon name="heroicons:map-pin" size="20" class="header-icon" />
-                        <p> {{ treatmentDate }} </p>
-                    </div>
-                    <div class="header-item">
-                        <Icon name="heroicons:clock" size="20" class="header-icon" />
-                        <p> {{ treatmentTime }} </p>
-                    </div>
-                </div>
-
-                <div class="card-body">
-                    <h3 class="appointment-detail">{{ Array.isArray(appointment?.template_name) ? appointment?.template_name.join(', ') : appointment?.template_name }}</h3>
-                    <h3 class="appointment-detail" v-if="duplicateTreatmentDatetime">{{ treatmentDate }} | {{ treatmentTime }} {{ t('wl.appointment_card.uhr') }}</h3>
-                    <Details :appointment="appointment" :dentist-image-src="dentistImageSrc" />
-                    <hr />
-                </div>
-            </div>
-        </a>
-        <div class="card-footer">
-            <Actions :disabled="disabled" :appointment="appointment" @confirmed="emit('confirm', appointment?.id)"
-                @cancelled="emit('cancel', appointment?.id)" @rescheduled="emit('reschedule', appointment?.id)" />
-        </div>
-    </div>
-</template>
-
-
-<script setup lang="ts">
-import { format } from 'date-fns'
-import { de } from 'date-fns/locale'
-import type { AppointmentData } from '@/types'
-import Details from './Details.vue'
-import Actions from './Actions.vue'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-const props = defineProps<{
-    appointment: AppointmentData,
-    appointmentLink?: string,
-    dentistImageSrc?: string,
-    disabled?: boolean,
-    duplicateTreatmentDatetime?: boolean
-}>();
-
-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')
-})
-
-console.log('Rendering Card for appointment:', props.appointment);
-console.log('Disabled state:', props.disabled);
-console.log('Appointment Link:', props.appointmentLink);
-console.log('Dentist Image Src:', props.dentistImageSrc);
-console.log('Duplicate Treatment Datetime:', props.duplicateTreatmentDatetime);
-
-// Emit events upward when confirmed or cancelled
-const emit = defineEmits(['confirm', 'cancel', 'reschedule'])
-</script>
-
+<template>
+    <div data-testid="root">
+        <a :href="appointmentLink ?? '#'" rel="noopener noreferrer" class="appointment-card">
+            <div :class="{ 'card-opacity': appointment?.status === 'past' }">
+                <div
+                    :class="['card-header', appointment.status === 'cancelled' ? 'header-bg-cancelled' : 'header-bg-normal']">
+                    <div class="header-item">
+                        <Icon name="heroicons:user-circle" size="20" class="header-icon" />
+                        <p> {{ appointment?.patientName || t('wl.appointment_card.unknown_patient') }} </p>
+                    </div>
+                    <div class="header-item">
+                        <Icon name="heroicons:map-pin" size="20" class="header-icon" />
+                        <p> {{ treatmentDate }} </p>
+                    </div>
+                    <div class="header-item">
+                        <Icon name="heroicons:clock" size="20" 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 />
+                </div>
+            </div>
+        </a>
+        <div class="card-footer">
+            <Actions :disabled="disabled" :appointment="appointment" @confirmed="emit('confirm', appointment?.id)"
+                @cancelled="emit('cancel', appointment?.id)" @rescheduled="emit('reschedule', appointment?.id)" />
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+import IconsAdvanceAppointments from '/src/components/Icons/AdvanceAppointments.vue';
+import { de } from 'date-fns/locale'
+import type { AppointmentData } from '@/types'
+import Details from './Details.vue'
+import Actions from './Actions.vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const props = defineProps<{
+    appointment: AppointmentData,
+    appointmentLink?: string,
+    dentistImageSrc?: string,
+    disabled?: boolean,
+    duplicateTreatmentDatetime?: boolean,
+    appointmentTypes: Array<{ id: number, icon: string, title: string }>
+}>();
+
+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')
+})
+
+console.log('Rendering Card for appointment:', props.appointment);
+console.log('Disabled state:', props.disabled);
+console.log('Appointment Link:', props.appointmentLink);
+console.log('Dentist Image Src:', props.dentistImageSrc);
+console.log('Duplicate Treatment Datetime:', props.duplicateTreatmentDatetime);
+
+
+const getAppointmentType = computed(() => {
+    return props.appointmentTypes.find(item => item.id === props.appointment?.type)
+})
+</script>
+
 <style src="./Card.css" scoped></style>

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

@@ -1,51 +1,51 @@
-/* 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;
-  gap: 0.5rem;
-}
-
-.icon-text-dental {
-  color: var(--dental-0);
-}
-
-.text-dental-blue-3 {
-  color: var(--Dental-Blue--3) !important;
+/* 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;
+  gap: 0.5rem;
+}
+
+.icon-text-dental {
+  color: var(--dental-0);
+}
+
+.text-dental-blue-3 {
+  color: var(--Dental-Blue--3) !important;
 }

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

@@ -1,44 +1,44 @@
-<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">
-
-                    <template v-if="dentist.imageSrc">
-                        <img :src="dentist.imageSrc" alt="Dentist photo"
-                            class="dentist-image" />
-                    </template>
-
-                    <div class="dentist-info">
-                        <p class="p-small">{{ dentist.name }}</p>
-                        <p class="p-small text-dental-blue-3">{{ dentist.gender }}</p>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-        <div class="location-section">
-            <div>
-                <Icon class="icon-text-dental" name="heroicons:map-pin" size="24" />
-            </div>
-            <div>
-                <p class="p-small"> {{ appointment.address || 'Unbekannter Ort' }}</p>
-                <p class="p-small text-dental-blue-3"> {{ appointment?.district || 'Unbekannter Stadtteil' }}
-                </p>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import type { AppointmentData } from '@/types';
-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">
+
+                    <template v-if="dentist.imageSrc">
+                        <img :src="dentist.imageSrc" alt="Dentist photo"
+                            class="dentist-image" />
+                    </template>
+
+                    <div class="dentist-info">
+                        <p class="p-small">{{ dentist.name }}</p>
+                        <p class="p-small text-dental-blue-3">{{ dentist.gender }}</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <div class="location-section">
+            <div>
+                <Icon class="icon-text-dental" name="heroicons:map-pin" size="24" />
+            </div>
+            <div>
+                <p class="p-small"> {{ appointment.address || 'Unbekannter Ort' }}</p>
+                <p class="p-small text-dental-blue-3"> {{ appointment?.district || 'Unbekannter Stadtteil' }}
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { AppointmentData } from '@/types';
+defineProps<{
+    appointment: AppointmentData,
+    dentistImageSrc?: string
+}>()
+</script>
+
 <style src="./Details.css" scoped></style>