@zap-wunschlachen/wl-shared-components 1.0.2 → 1.0.3

package/App.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="app">
     <div class="element-container">
-      <div style="width: 100%; display: flex; flex-direction: column; gap: 20px;">
+      <div style="height:100%; width: 100%; display: flex; flex-direction: column; gap: 20px;">
         <Card :appointment="value0" :dentist-image-src="value0.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
         <Card disabled :appointment="value1" :dentist-image-src="value1.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
         <Card :appointment="value2" :dentist-image-src="value2.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
         <Card :appointment="value3" :dentist-image-src="value3.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
-        <Card disabled :appointment="value4" :dentist-image-src="value4.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
+        <Card duplicate-treatment-datetime disabled :appointment="value4" :dentist-image-src="value4.dentist.imageSrc" @confirm="onConfirmed" @cancel="onCancelled" @reschedule="onRescheduled" />
       </div>
      </div>
   </div>
@@ -36,7 +36,7 @@ const value0 = ref<AppointmentData>({
   end: "2025-09-23T16:30:00Z",
   status: "upcoming", // Change to 'past' or 'cancelled' to test other states
   is_confirmed: true,
-  template_name: ["Routine Checkup", "Cleaning"],
+  template_name: ["Cleaning"],
   description: "ABCD-1234",
   dentist: {
     name: "Dr. Erika Mustermann",
@@ -55,7 +55,7 @@ const value1 = ref<AppointmentData>({
   end: "2025-09-23T16:30:00Z",
   status: "upcoming", // Change to 'past' or 'cancelled' to test other states
   is_confirmed: false,
-  template_name: ["Routine Checkup", "Cleaning"],
+  template_name: ["Cleaning"],
   description: "ABCD-1234",
   dentist: {
     name: "Dr. Erika Mustermann",
@@ -74,7 +74,7 @@ const value2 = ref<AppointmentData>({
   end: "2025-09-23T16:30:00Z",
   status: "cancelled", // Change to 'past' or 'cancelled' to test other states
   is_confirmed: false,
-  template_name: ["Routine Checkup", "Cleaning"],
+  template_name: ["Cleaning"],
   description: "ABCD-1234",
   dentist: {
     name: "Dr. Erika Mustermann",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

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

@@ -31,7 +31,7 @@ import Button from '../../Button/Button.vue';
 
 const { appointment, disabled } = defineProps<{
     appointment: AppointmentData,
-    disabled?: Boolean,
+    disabled?: boolean,
 }>();
 
 console.log('Actions component - appointment:', appointment);

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

@@ -4,6 +4,7 @@
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
   overflow: hidden;
+  text-decoration: none;
 }
 
 .card-opacity {
@@ -38,6 +39,9 @@
 .card-body {
   background-color: white;
   padding: 1rem;
+  gap: 1rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .card-footer {
@@ -46,4 +50,12 @@
   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;
 }

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

@@ -7,21 +7,21 @@
                     :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 || 'Unbekannter Patient' }} </p>
+                        <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> {{ format(appointment ? new Date(appointment.start) : new Date(), 'EEE, d MMM yyyy', { locale: de }) }} </p>
+                        <p> {{ treatmentDate }} </p>
                     </div>
                     <div class="header-item">
                         <Icon name="heroicons:clock" size="20" class="header-icon" />
-                        <p> {{ format(appointment ? new Date(appointment.start) : new Date(), 'HH:mm') }} </p>
+                        <p> {{ treatmentTime }} </p>
                     </div>
                 </div>
 
                 <div class="card-body">
-                    <h2>{{ Array.isArray(appointment?.template_name) ? appointment?.template_name.join(', ') :
-                        appointment?.template_name }}</h2>
+                    <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>
@@ -38,20 +38,35 @@
 <script setup lang="ts">
 import { format } from 'date-fns'
 import { de } from 'date-fns/locale'
-import type { AppointmentData } from '@/types';
+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,
+    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'])

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

@@ -37,7 +37,7 @@
 import type { AppointmentData } from '@/types';
 defineProps<{
     appointment: AppointmentData,
-    dentistImageSrc?: String
+    dentistImageSrc?: string
 }>()
 </script>
 

package/src/i18n/locales/de.json

@@ -14,6 +14,15 @@
       "code_was_sent": "Code an Nummer {phoneNumber} gesendet",
       "confirm": "Bestätigen",
       "resend": "Code erneut senden"
+    },
+    "appointment_card": {
+      "uhr": "Uhr",
+      "unknown_patient": "Unbekannter Patient",
+      "confirm": "Termin bestätigen",
+      "cancel": "Termin stornieren",
+      "reschedule": "Termin verschieben",
+      "reschedule_after_cancellation": "Diesen Termin nochmal buchen",
+      "cancelled": "Termin storniert"
     }
   }
 }

package/src/i18n/locales/en.json

@@ -14,6 +14,15 @@
       "code_was_sent": "Code sent to number {phoneNumber}",
       "confirm": "Confirm",
       "resend": "Resend code"
+    },
+    "appointment_card": {
+      "uhr": "o'clock",
+      "unknown_patient": "Unknown patient",
+      "confirm": "Confirm appointment",
+      "cancel": "Cancel appointment",
+      "reschedule": "Reschedule appointment",
+      "reschedule_after_cancellation": "Book this appointment again",
+      "cancelled": "Appointment cancelled"
     }
   }
 }