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

package/src/components/Accordion/Accordion.css

@@ -1,59 +1,59 @@
-/* The default styles will apply conditionally based on the plain prop */
-
-.outlined-style .v-expansion-panel__shadow {
-  box-shadow:
-    0px -2px 0px 0px var(--Dental-Blue-0),
-    /* Top border-like shadow */ 0px 2px 0px 0px var(--Dental-Blue-0); /* Bottom border-like shadow */
-}
-
-.outlined-style .v-expansion-panel-title {
-  border-radius: 0 !important;
-}
-
-.outlined-style .v-expansion-panel-title:hover {
-  background: var(--Dental-Light-Blue--3) !important;
-}
-
-.outlined-style .v-expansion-panel-text {
-  background: transparent;
-  border-radius: 0px;
-}
-
-.v-expansion-panel-title:hover > .v-expansion-panel-title__overlay {
-  opacity: 0;
-}
-
-.plain-style .v-expansion-panel__shadow {
-  box-shadow: none !important;
-}
-
-.plain-style.v-expansion-panel {
-  background: transparent !important;
-}
-
-.v-expansion-panel-title {
-  background-color: transparent !important;
-}
-
-.plain-style .v-expansion-panel-text {
-  background: transparent;
-  border-radius: 8px;
-}
-
-.plain-style .v-expansion-panel-text__wrapper {
-  padding: 0px !important;
-}
-
-.plain-style
-  .v-expansion-panel--active
-  > .v-expansion-panel-title:not(.v-expansion-panel-title--static) {
-  min-height: none !important;
-}
-
-.plain-style .v-expansion-panel-title {
-  padding: 0px !important;
-}
-
-.wl-accordion .v-icon {
-  color: var(--Dental-Blue-0);
-}
+/* The default styles will apply conditionally based on the plain prop */
+
+.outlined-style .v-expansion-panel__shadow {
+  box-shadow:
+    0px -2px 0px 0px var(--Dental-Blue-0),
+    /* Top border-like shadow */ 0px 2px 0px 0px var(--Dental-Blue-0); /* Bottom border-like shadow */
+}
+
+.outlined-style .v-expansion-panel-title {
+  border-radius: 0 !important;
+}
+
+.outlined-style .v-expansion-panel-title:hover {
+  background: var(--Dental-Light-Blue--3) !important;
+}
+
+.outlined-style .v-expansion-panel-text {
+  background: transparent;
+  border-radius: 0px;
+}
+
+.v-expansion-panel-title:hover > .v-expansion-panel-title__overlay {
+  opacity: 0;
+}
+
+.plain-style .v-expansion-panel__shadow {
+  box-shadow: none !important;
+}
+
+.plain-style.v-expansion-panel {
+  background: transparent !important;
+}
+
+.v-expansion-panel-title {
+  background-color: transparent !important;
+}
+
+.plain-style .v-expansion-panel-text {
+  background: transparent;
+  border-radius: 8px;
+}
+
+.plain-style .v-expansion-panel-text__wrapper {
+  padding: 0px !important;
+}
+
+.plain-style
+  .v-expansion-panel--active
+  > .v-expansion-panel-title:not(.v-expansion-panel-title--static) {
+  min-height: none !important;
+}
+
+.plain-style .v-expansion-panel-title {
+  padding: 0px !important;
+}
+
+.wl-accordion .v-icon {
+  color: var(--Dental-Blue-0);
+}

package/src/components/Accordion/AccordionGroup.vue

@@ -1,51 +1,51 @@
-<template>
-  <v-expansion-panels
-    v-model="internalValue"
-    expand-icon="heroicons:chevron-down"
-    collapse-icon="heroicons:chevron-up"
-    :rounded="false"
-    :multiple="multiple"
-    class="wl-accordion"
-    :variant="variantGroup"
-    data-testid="root"
-  >
-    <slot />
-  </v-expansion-panels>
-</template>
-
-<script setup>
-import './Accordion.css';
-import { defineProps, defineEmits, computed } from 'vue';
-
-const props = defineProps({
-  /**
-   * The modelValue for v-model binding.
-   */
-  modelValue: {
-    type: [String, Number, Array],
-    default: null,
-  },
-  /**
-   * Allows multiple panels to be open simultaneously.
-   */
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  variantGroup: {
-    type: String,
-    default: 'accordion',
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const internalValue = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit('update:modelValue', value);
-  },
-});
-</script>
+<template>
+  <v-expansion-panels
+    v-model="internalValue"
+    expand-icon="heroicons:chevron-down"
+    collapse-icon="heroicons:chevron-up"
+    :rounded="false"
+    :multiple="multiple"
+    class="wl-accordion"
+    :variant="variantGroup"
+    data-testid="root"
+  >
+    <slot />
+  </v-expansion-panels>
+</template>
+
+<script setup>
+import './Accordion.css';
+import { defineProps, defineEmits, computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * The modelValue for v-model binding.
+   */
+  modelValue: {
+    type: [String, Number, Array],
+    default: null,
+  },
+  /**
+   * Allows multiple panels to be open simultaneously.
+   */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  variantGroup: {
+    type: String,
+    default: 'accordion',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const internalValue = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+</script>

package/src/components/Accordion/AccordionItem.vue

@@ -1,66 +1,66 @@
-<template>
-  <v-expansion-panel
-    :value="value"
-    :class="{
-      'plain-style': variant === 'plain',
-      'outlined-style': variant === 'outlined',
-    }"
-    :bg-color="bgColor"
-    data-testid="root"
-  >
-    <!-- Title Slot with Fallback to Prop -->
-    <template #title>
-      <slot name="title">
-        <h3>{{ title }}</h3>
-      </slot>
-    </template>
-
-    <!-- Content Slot with Fallback to Prop -->
-    <template #text>
-      <slot name="content">
-        <p>{{ text }}</p>
-      </slot>
-    </template>
-  </v-expansion-panel>
-</template>
-
-<script setup>
-import { defineProps } from 'vue';
-import './Accordion.css';
-
-const props = defineProps({
-  /**
-   * The variant of the panel ('plain' or 'outlined').
-   */
-  variant: {
-    type: String,
-    default: 'outlined',
-    validator: (value) => ['plain', 'outlined'].includes(value),
-  },
-  /**
-   * The title displayed in the panel header.
-   */
-  title: {
-    type: String,
-    default: 'Default Title',
-  },
-  /**
-   * The text content inside the panel.
-   */
-  text: {
-    type: String,
-    default: 'Default text',
-  },
-  /**
-   * Unique value identifying the panel.
-   */
-  value: {
-    type: [String, Number],
-    required: true,
-  },
-  bgColor: {
-    type: String,
-    default: 'var(--Soft-Concrete-0)',
-  },
-});
-</script>
+<template>
+  <v-expansion-panel
+    :value="value"
+    :class="{
+      'plain-style': variant === 'plain',
+      'outlined-style': variant === 'outlined',
+    }"
+    :bg-color="bgColor"
+    data-testid="root"
+  >
+    <!-- Title Slot with Fallback to Prop -->
+    <template #title>
+      <slot name="title">
+        <h3>{{ title }}</h3>
+      </slot>
+    </template>
+
+    <!-- Content Slot with Fallback to Prop -->
+    <template #text>
+      <slot name="content">
+        <p>{{ text }}</p>
+      </slot>
+    </template>
+  </v-expansion-panel>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+import './Accordion.css';
+
+const props = defineProps({
+  /**
+   * The variant of the panel ('plain' or 'outlined').
+   */
+  variant: {
+    type: String,
+    default: 'outlined',
+    validator: (value) => ['plain', 'outlined'].includes(value),
+  },
+  /**
+   * The title displayed in the panel header.
+   */
+  title: {
+    type: String,
+    default: 'Default Title',
+  },
+  /**
+   * The text content inside the panel.
+   */
+  text: {
+    type: String,
+    default: 'Default text',
+  },
+  /**
+   * Unique value identifying the panel.
+   */
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  bgColor: {
+    type: String,
+    default: 'var(--Soft-Concrete-0)',
+  },
+});
+</script>

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

@@ -1,29 +1,35 @@
-/* Actions component styles */
-.actions-grid {
-  margin-bottom: 1.25rem;
-  display: flex;
-  gap: 20px;
-  color: var(--Dental-Blue-0);
-}
-
-.action-button {
-  font-weight: bold;
-  flex: 1;
-}
-
-.action-button:first-child {
-  padding-right: 0.5rem;
-}
-
-.action-button:last-child {
-  padding-left: 0.5rem;
-}
-
-.full-width-button {
-  width: 100%;
-}
-
-.full-width-button-opacity {
-  width: 100%;
-  opacity: 1;
+/* Actions component styles */
+.actions-grid {
+  margin-bottom: 1.25rem;
+  display: flex;
+  gap: 20px;
+  color: var(--Dental-Blue-0);
+}
+
+.actions-column {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.action-button {
+  font-weight: bold;
+  flex: 1;
+}
+
+.action-button:first-child {
+  padding-right: 0.5rem;
+}
+
+.action-button:last-child {
+  padding-left: 0.5rem;
+}
+
+.full-width-button {
+  width: 100%;
+}
+
+.full-width-button-opacity {
+  width: 100%;
+  opacity: 1;
 }

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

@@ -1,73 +1,74 @@
-<template>
-    <template v-if="appointment.status === 'upcoming'">
-        <div class="actions-grid">
-            <Button class="action-button" variant="outlined" prependIcon="heroicons:x-circle" :disabled="disabled"
-                :label="t('wl.appointment_card.cancel')" size="small" @click="handleCancel" />
-
-            <Button class="action-button" :variant="confirmable ? 'outlined' : 'flat'" prependIcon="heroicons:arrows-up-down" :disabled="disabled"
-                :label="t('wl.appointment_card.reschedule')" size="small" @click="handleReschedule" />
-        </div>
-
-
-        <Button v-if="confirmable" class="full-width-button" :label="t('wl.appointment_card.confirm')" :disabled="disabled"
-            @click="confirmAppointment" />
-    </template>
-
-    <template v-else-if="appointment.status === 'past'">
-        <Button class="full-width-button-opacity" variant="outlined" prependIcon="heroicons:arrow-path" :disabled="disabled"
-            :label="t('wl.appointment_card.reschedule_after_cancellation')" @click="handleReschedule" />
-    </template>
-    <template v-else-if="appointment.status === 'cancelled'">
-        <Button class="full-width-button-opacity" color="var(--error-red-0)" variant="text" prependIcon="heroicons:x-circle"
-            readonly :label="t('wl.appointment_card.cancelled')" :disabled="disabled" />
-    </template>
-</template>
-
-
-<script setup lang="ts">
-import { AppointmentData } from '@/types';
-import { computed } from 'vue';
-import Button from '../../Button/Button.vue';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-const { appointment, disabled } = defineProps<{
-    appointment: AppointmentData,
-    disabled?: boolean,
-}>();
-
-console.log('Actions component - appointment:', appointment);
-console.log('Actions component - disabled:', disabled);
-
-// Emit events upward when actions occur
-const emit = defineEmits<{
-    (e: 'confirmed', id: string): void
-    (e: 'cancelled', id: string): void
-    (e: 'rescheduled', id: string): void
-}>()
-
-// Determine visibility: only show confirm button when unconfirmed and appointment is within next 48h
-const confirmable = computed(() => {
-    const now = Date.now()
-    const startTime = new Date(appointment.start).getTime()
-    const diff = startTime - now
-    return !appointment.is_confirmed && diff > 0 && diff <= 48 * 3600 * 1000
-})
-
-// Log confirmation when the button is clicked
-const confirmAppointment = async () => {
-    emit('confirmed', appointment.id)
-}
-
-const handleCancel = async () => {
-    emit('cancelled', appointment.id)
-}
-
-const handleReschedule = async () => {
-    emit('rescheduled', appointment.id)
-}
-
-</script>
-
+<template>
+    <template v-if="appointment.status === 'upcoming'">
+        <div class="actions-grid">
+            <Button class="action-button" variant="outlined" prependIcon="heroicons:x-circle" :disabled="disabled"
+                :label="t('wl.appointment_card.cancel')" size="small" @click="handleCancel" />
+
+            <Button class="action-button" :variant="confirmable ? 'outlined' : 'flat'" prependIcon="heroicons:arrows-up-down" :disabled="disabled"
+                :label="t('wl.appointment_card.reschedule')" size="small" @click="handleReschedule" />
+        </div>
+
+
+        <Button v-if="confirmable" class="full-width-button" :label="t('wl.appointment_card.confirm')" :disabled="disabled"
+            @click="confirmAppointment" />
+    </template>
+
+    <template v-else-if="appointment.status === 'cancelled' || (appointment.status === 'past' && appointment.for_patient)">
+        <div class="actions-column">
+            <Button v-if="appointment.status === 'cancelled'" class="full-width-button-opacity" color="var(--error-red-0)" variant="text" prependIcon="heroicons:x-circle"
+                readonly :label="t('wl.appointment_card.cancelled')" :disabled="disabled" />
+
+            <Button v-if="appointment.for_patient" class="full-width-button-opacity" variant="outlined" prependIcon="heroicons:arrow-path" :disabled="disabled"
+                :label="t('wl.appointment_card.reschedule_after_cancellation')" @click="handleReschedule" />
+        </div>
+    </template>
+</template>
+
+
+<script setup lang="ts">
+import { AppointmentData } from '@/types';
+import { computed } from 'vue';
+import Button from '../../Button/Button.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const { appointment, disabled } = defineProps<{
+    appointment: AppointmentData,
+    disabled?: boolean,
+}>();
+
+console.log('Actions component - appointment:', appointment);
+console.log('Actions component - disabled:', disabled);
+
+// Emit events upward when actions occur
+const emit = defineEmits<{
+    (e: 'confirmed', id: string): void
+    (e: 'cancelled', id: string): void
+    (e: 'rescheduled', id: string): void
+}>()
+
+// Determine visibility: only show confirm button when unconfirmed and appointment is within next 48h
+const confirmable = computed(() => {
+    const now = Date.now()
+    const startTime = new Date(appointment.start).getTime()
+    const diff = startTime - now
+    return !appointment.is_confirmed && diff > 0 && diff <= 48 * 3600 * 1000
+})
+
+// Log confirmation when the button is clicked
+const confirmAppointment = async () => {
+    emit('confirmed', appointment.id)
+}
+
+const handleCancel = async () => {
+    emit('cancelled', appointment.id)
+}
+
+const handleReschedule = async () => {
+    emit('rescheduled', appointment.id)
+}
+
+</script>
+
 <style src="./Actions.css" scoped></style>

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>