@zap-wunschlachen/wl-shared-components 1.0.17 → 1.0.18

package/package.json

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

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

@@ -0,0 +1,16 @@
+.main-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #FEEAF2;
+  border-radius: 8px;
+  padding: 15px 10px;
+  margin-top: 10px;
+}
+
+.text-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}

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

@@ -0,0 +1,24 @@
+<template>
+  <div class="main-container">
+    <div class="text-container">
+      <p>{{ t('wl.appointment_card.fill_form_title') }}</p>
+      <p class="p-small">{{ t('wl.appointment_card.fill_form_description') }}</p>
+    </div>
+
+    <Button variant="outlined" :label="t('wl.appointment_card.anamnese_form')" @click="emit('fillAnamnese')"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from '../../Button/Button.vue';
+import { useI18n } from 'vue-i18n';
+
+const emit = defineEmits<{
+    (e: 'fillAnamnese'): void
+}>()
+
+const { t } = useI18n();
+
+</script>
+
+<style src="./AnamneseNotification.css" scoped></style>

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

@@ -40,6 +40,9 @@
         <div class="card-footer">
             <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>
@@ -55,11 +58,13 @@ import Details from './Details.vue'
 import Actions from './Actions.vue'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n';
+import AnamneseNotification from './AnamneseNotification.vue';
 
 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();
@@ -70,6 +75,7 @@ const props = defineProps<{
     dentistImageSrc?: string,
     disabled?: boolean,
     duplicateTreatmentDatetime?: boolean,
+    showAnamneseNotification?: boolean,
 }>();
 
 const treatmentDate = computed(() => {

package/src/components/index.ts

@@ -21,3 +21,4 @@ export { default as Modal } from './Modal/Modal.vue';
 export { default as AppointmentCard } from './Appointment/Card/Card.vue';
 export { default as AdvanceAppointmentIcons } from './Icons/AdvanceAppointments.vue';
 export { default as Loader } from './Loader/Loader.vue';
+export { default as AnamneseNotification } from './Appointment/Card/AnamneseNotification.vue';

package/src/i18n/locales/de.json

@@ -22,7 +22,10 @@
       "cancel": "Termin stornieren",
       "reschedule": "Termin verschieben",
       "reschedule_after_cancellation": "Diesen Termin nochmal buchen",
-      "cancelled": "Termin storniert"
+      "cancelled": "Termin storniert",
+      "fill_form_title": "Anamnesebogen benötigt!",
+      "fill_form_description": "Bitte füllen Sie diesen vor ihren Termin aus",
+      "anamnese_form": "Anamnesebogen"
     }
   }
 }

package/src/i18n/locales/en.json

@@ -22,7 +22,10 @@
       "cancel": "Cancel appointment",
       "reschedule": "Reschedule appointment",
       "reschedule_after_cancellation": "Book this appointment again",
-      "cancelled": "Appointment cancelled"
+      "cancelled": "Appointment cancelled",
+      "fill_form_title": "Medical history form required!",
+      "fill_form_description": "Please fill this out before your appointment",
+      "anamnese_form": "Medical history form"
     }
   }
 }