@zap-wunschlachen/wl-shared-components 1.0.0

package/src/components/Accordion/Accordion.css

@@ -0,0 +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);
+}

package/src/components/Accordion/AccordionGroup.vue

@@ -0,0 +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>

package/src/components/Accordion/AccordionItem.vue

@@ -0,0 +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>

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

@@ -0,0 +1,30 @@
+/* Actions component styles */
+.actions-grid {
+  margin-bottom: 1.25rem;
+  display: flex;
+  gap: 0;
+  color: var(--Dental-Blue-0);
+}
+
+.action-button {
+  font-weight: bold;
+  flex: 1;
+}
+
+.action-button:first-child {
+  border-right: 1px solid #e5e7eb;
+  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

@@ -0,0 +1,66 @@
+<template>
+    <template v-if="appointment.status === 'upcoming'">
+        <div class="actions-grid">
+            <Button class="action-button" variant="text" prependIcon="heroicons:x-circle"
+                label='Termin stornieren' size="small" @click="handleCancel" />
+
+            <Button class="action-button" variant="text" prependIcon="heroicons:arrows-up-down"
+                label='Termin verschieben' size="small" @click="handleReschedule" />
+        </div>
+
+
+        <Button v-if="confirmable" class="full-width-button" label="Termin bestätigen"
+            @click="confirmAppointment" />
+    </template>
+
+    <template v-else-if="appointment.status === 'past'">
+        <Button class="full-width-button-opacity" variant="outlined" prependIcon="heroicons:arrow-path"
+            label='Diesen Termin nochmal buchen' @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='Termin storniert' :disabled="false" />
+    </template>
+</template>
+
+
+<script setup lang="ts">
+import { AppointmentData } from '@/types';
+import { computed } from 'vue';
+import Button from '../../Button/Button.vue';
+
+const { appointment } = defineProps<{
+    appointment: AppointmentData
+}>();
+
+// Emit events upward when actions occur
+const emit = defineEmits<{
+    (e: 'confirm', id: string): void
+    (e: 'cancel', id: string): void
+    (e: 'reschedule', 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('confirm', appointment.id)
+}
+
+const handleCancel = async () => {
+    emit('cancel', appointment.id)
+}
+
+const handleReschedule = async () => {
+    emit('reschedule', appointment.id)
+}
+
+</script>
+
+<style src="./Actions.css" scoped></style>

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

@@ -0,0 +1,49 @@
+/* Card component styles */
+.appointment-card {
+  display: block;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.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;
+}
+
+.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);
+}

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

@@ -0,0 +1,55 @@
+<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 || 'Unbekannter 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>
+                    </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>
+                    </div>
+                </div>
+
+                <div class="card-body">
+                    <h2>{{ Array.isArray(appointment?.template_name) ? appointment?.template_name.join(', ') :
+                        appointment?.template_name }}</h2>
+                    <Details :appointment="appointment" :dentist-image-src="dentistImageSrc" />
+                    <hr />
+                </div>
+            </div>
+        </a>
+        <div class="card-footer">
+            <Actions :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'
+
+defineProps<{
+    appointment: AppointmentData,
+    appointmentLink?: string,
+    dentistImageSrc?: string
+}>()
+
+// Emit events upward when confirmed or cancelled
+const emit = defineEmits(['confirm', 'cancel', 'reschedule'])
+</script>
+
+<style src="./Card.css" scoped></style>

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

@@ -0,0 +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;
+}

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

@@ -0,0 +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>
+
+<style src="./Details.css" scoped></style>

package/src/components/Audio/Audio.vue

@@ -0,0 +1,188 @@
+<template>
+    <div class="audio-container" data-testid="root">
+        <div class="audio-controls">
+            <template v-if="useWaveformComponent">
+                <div class="playback-button">
+                    <IconPauseAudio v-if="isPlaying" @click="togglePlay" />
+                    <IconPlayAudio v-else @click="togglePlay" />
+                </div>
+
+                <div class="time">{{ currentTimeText }}</div>
+
+                <div v-if="useWaveformComponent" class="waveform-container">
+                    <WLWaveform ref="audioFile" :src="props.src" :blob="props.blob" @timeupdate="updateTime" @finish="onFinish"
+                        @ready="onLoaded" />
+                </div>
+            </template>
+            <audio v-else controls ref="audioFile" :src="props.src" @timeupdate="updateTime"
+                @loadedmetadata="onLoaded"></audio>
+
+            <template v-if="props.showCloudStatus">
+                <div class="cloud-status">
+                    <IconCloudSaved v-if=" props.cloudStatus" />
+                    <IconCloudFailed v-else />
+                </div>
+            </template>
+        </div>
+        <template v-if="props.showDeleteButton">
+            <div class="delete-button">
+                    <IconDeleteAudio @click="deleteAudio" />
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import type { PropType } from 'vue'
+import IconPlayAudio from '../Icons/Audio/Play.vue'
+import IconCloudSaved from '../Icons/Audio/CloudSaved.vue'
+import IconCloudFailed from '../Icons/Audio/CloudFailed.vue'
+import IconPauseAudio from '../Icons/Audio/Pause.vue'
+import IconDeleteAudio from '../Icons/Audio/Delete.vue'
+import WLWaveform from '../Audio/Waveform.vue'
+
+enum ViewType {
+    OVERVIEW = "OVERVIEW",
+    RECORDER = "RECORDER"
+}
+
+const props = defineProps({
+    id: {
+        type: Number,
+        required: true
+    },
+    src: {
+        type: String,
+    },
+    blob: {
+        type: Blob,
+    },
+    cloudStatus: {
+        type: Boolean,
+        default: false
+    },
+    viewType: {
+        type: String as PropType<ViewType>,
+        default: ViewType.OVERVIEW
+    },
+    showDeleteButton: {
+        type: Boolean,
+        default: true
+    },
+    showCloudStatus: {
+        type: Boolean,
+        default: true
+    },
+});
+const emit = defineEmits<{ (e: 'remove', id: number): void }>();
+
+const currentTimeText = ref('00:00');
+const totalDuration = ref('00:00');
+const isPlaying = ref<boolean>(false);
+const audioFile = ref(null);
+const useWaveformComponent = ref(true);
+
+const formatTime = (seconds: number): string =>
+    [seconds / 60, seconds % 60]
+        .map((v) => `0${Math.floor(v)}`.slice(-2))
+        .join(':');
+
+function togglePlay() {
+    if (audioFile.value) {
+        isPlaying.value ? audioFile.value.pause() : audioFile.value.play();
+        isPlaying.value = !isPlaying.value;
+    }
+}
+
+function deleteAudio() {
+    ;
+    emit('remove', props.id);
+}
+
+function updateTime(currentTime: number) {
+    currentTimeText.value = formatTime(currentTime);
+}
+
+function onLoaded(duration: number) {
+    totalDuration.value = formatTime(duration);
+    currentTimeText.value = totalDuration.value;
+}
+
+function onFinish() {
+    isPlaying.value = false;
+}
+
+onMounted(() => {
+});
+</script>
+
+<style scoped>
+.audio-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    flex: 1 1 0%;
+    gap: 10px;
+}
+
+.audio-controls {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--Dental-Light-Blue-2);
+    border-radius: 8px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    gap: 10px;
+    background: var(--Dental-Light-Blue--3);
+    width: 100%;
+}
+
+.cloud-status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+}
+
+.delete-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+}
+
+.playback-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+}
+
+.time {
+    color: var(--Dental-Light-Blue-2);
+    font-family: outfit;
+    font-weight: 300;
+    font-size: 13px;
+    text-align: left;
+    min-width: 5ch;
+}
+
+.waveform-container {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+</style>