@zap-wunschlachen/wl-shared-components 1.0.0

package/src/components/Laboratory/ChatMessage/ChatMessage.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="d-flex flex-row ga-2 align-end" data-testid="root">
+    <!-- Conditional Rendering: Display the badge before the message if it's an 'income' type -->
+    <template v-if="type === 'income'">
+      <div style="width: 40px; margin-bottom: 20px">
+        <ChatMessageBadge :fabText="fabText" />
+      </div>
+    </template>
+
+    <!-- Message Content -->
+    <v-alert rounded="lg" :color="messageColor">
+      <!-- Title Slot with Username and Time -->
+      <template #title>
+        <div class="d-flex flex-row w-100 align-center mb-1">
+          <slot name="title">
+            <!-- Default Title Content (Username and Time) -->
+            <h5 :style="{ color: textColor }" style="margin-right: auto">
+              {{ username }}
+            </h5>
+            <p class="p-regular" :style="{ color: textColor }">{{ time }}</p>
+          </slot>
+        </div>
+      </template>
+
+      <!-- Text Slot for Message -->
+      <template #text>
+        <slot name="text">
+          <!-- Default Message Content -->
+          <p class="p-regular" :style="{ color: textColor }">
+            {{ message }}
+          </p>
+        </slot>
+      </template>
+    </v-alert>
+
+    <!-- Conditional Rendering: Display the badge after the message if it's an 'outcome' type -->
+    <template v-if="type === 'outcome'">
+      <div style="width: 50px; margin-bottom: 20px">
+        <ChatMessageBadge :fabText="fabText" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+import ChatMessageBadge from './ChatMessageBadge.vue';
+
+// Define props to control the type, username, time, and message
+const props = defineProps({
+  /**
+   * The type of the message, either 'income' (received) or 'outcome' (sent).
+   * This prop is required and validated to only accept 'income' or 'outcome'.
+   */
+  type: {
+    type: String,
+    required: true,
+    validator: (value) => ['income', 'outcome'].includes(value), // Only allow 'income' or 'outcome'
+  },
+
+  /**
+   * The username of the person sending or receiving the message.
+   * Default is 'Martin Paetz'.
+   */
+  username: {
+    type: String,
+    default: 'Martin Paetz',
+  },
+
+  /**
+   * The time when the message was sent or received.
+   * Default is '11:24'.
+   */
+  time: {
+    type: String,
+    default: '11:24',
+  },
+
+  /**
+   * The text content of the message.
+   * Default is 'Lorem ipsum dolor sit amet...'.
+   */
+  message: {
+    type: String,
+    default: 'Lorem ipsum dolor sit amet...',
+  },
+});
+
+// Compute the background color of the message bubble based on the type
+const messageColor = computed(() =>
+  props.type === 'income' ? 'var(--Dental-Light-Blue--2)' : 'white',
+);
+
+/**
+ * Compute the text color of the message based on the type.
+ * Income messages will use '--Dental-Blue-0', outcome messages will use 'var(--Dental-Blue-0)'.
+ */
+const textColor = computed(() =>
+  props.type === 'income' ? '--Dental-Blue-0' : 'var(--Dental-Blue-0)',
+);
+
+/**
+ * Compute the FAB text based on the username by taking the first letter
+ * of the first name and the first letter of the last name, and combining them.
+ * If the name is not provided or incomplete, default values will be used.
+ */
+const fabText = computed(() => {
+  const nameParts = props.username.split(' ');
+  const firstLetter = nameParts[0]?.charAt(0) || ''; // First letter of the first name
+  const lastLetter = nameParts[nameParts.length - 1]?.charAt(0) || ''; // First letter of the last name
+  return `${firstLetter}${lastLetter}`.toUpperCase(); // Combine and convert to uppercase
+});
+</script>

package/src/components/Laboratory/ChatMessage/ChatMessageBadge.css

@@ -0,0 +1,4 @@
+.v-badge__badge {
+  bottom: calc(100% - 25px) !important;
+  left: calc(100% + 20px) !important;
+}

package/src/components/Laboratory/ChatMessage/ChatMessageBadge.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-badge :color="badgeColor">
+    <!-- Badge Slot for Icon -->
+    <template v-slot:badge>
+      <v-icon :color="iconColor" :icon="icon"></v-icon>
+    </template>
+
+    <!-- Floating Action Button (FAB) with Custom Text and Icon -->
+    <v-fab
+      :base-color="fabBaseColor"
+      :color="fabColor"
+      readonly
+      :icon="fabIcon"
+      size="x-small"
+    >
+      <span :style="{ color: textColor }">{{ fabText }}</span>
+    </v-fab>
+  </v-badge>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+import './ChatMessageBadge.css';
+
+// Define props for the ChatMessageBadge component
+const props = defineProps({
+  /**
+   * The background color of the badge.
+   * Default is a CSS variable 'var(--Power-Red-0)'.
+   */
+  badgeColor: {
+    type: String,
+    default: 'var(--Power-Red-0)', // Default badge color
+  },
+
+  /**
+   * The name of the icon displayed on the badge.
+   * Default is 'mdi-mail' from the Material Design Icons.
+   */
+  icon: {
+    type: String,
+    default: 'mdi-mail', // Default icon name
+  },
+
+  /**
+   * The color of the icon on the badge.
+   * Default is 'white'.
+   */
+  iconColor: {
+    type: String,
+    default: 'white', // Default icon color
+  },
+
+  /**
+   * The base color of the Floating Action Button (FAB).
+   * Default is 'white'.
+   */
+  fabBaseColor: {
+    type: String,
+    default: 'white', // Default FAB base color
+  },
+
+  /**
+   * The color of the Floating Action Button (FAB).
+   * Default is a CSS variable 'var(--Dental-Blue-0)'.
+   */
+  fabColor: {
+    type: String,
+    default: 'var(--Dental-Blue-0)', // Default FAB color
+  },
+
+  /**
+   * The icon to display on the Floating Action Button (FAB).
+   * Default is '$vuetify', which is Vuetify's default FAB icon.
+   */
+  fabIcon: {
+    type: String,
+    default: '$vuetify', // Default FAB icon
+  },
+
+  /**
+   * The text displayed on the Floating Action Button (FAB).
+   * Default is 'Mj'.
+   */
+  fabText: {
+    type: String,
+    default: 'Mj', // Default FAB text
+  },
+
+  /**
+   * The color of the text inside the Floating Action Button (FAB).
+   * Default is 'white'.
+   */
+  textColor: {
+    type: String,
+    default: 'white', // Default color for the text inside the FAB
+  },
+});
+</script>

package/src/components/Laboratory/ChatNotification/ChatNotification.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="w-100 d-flex flex-column align-center ga-4" data-testid="root">
+    <p class="p-small" style="color: var(--Soft-Concrete-2)">
+      <!-- Display CTA, Date, or Tag Content based on the "type" prop -->
+      <span v-if="type === 'cta'"
+        >Hier klicken um nächsten Arbeitsschritt zu starten</span
+      >
+      <span v-if="type === 'date'">{{ date }}</span>
+      <span v-if="type === 'tag'">{{ date }}</span>
+    </p>
+
+    <div class="w-100 d-flex flex-row align-center ga-4">
+      <!-- Conditionally styled line based on "type" prop -->
+      <div :style="{ backgroundColor: lineColor }" class="line"></div>
+
+      <!-- CTA Section -->
+      <div v-if="type === 'cta'" class="d-flex flex-row ga-2 align-center">
+        <h5>Nachster Schritt</h5>
+        <TagLabel :status="status" />
+      </div>
+
+      <!-- Date Section -->
+      <div v-if="type === 'date'" class="d-flex flex-row ga-2 align-center">
+        <h6 style="color: var(--Soft-Concrete-2)">
+          Es gibt neue Update Notifications
+        </h6>
+      </div>
+
+      <!-- Tag Section -->
+      <div v-if="type === 'tag'" class="d-flex flex-row ga-2 align-center">
+        <h6 style="color: var(--Soft-Concrete-2)">
+          {{ patient }} wurde zurück nach
+        </h6>
+        <TagLabel :status="status" />
+        <h6 style="color: var(--Soft-Concrete-2)">verschoben</h6>
+        <v-icon
+          style="margin-left: -5px"
+          color="var(--Soft-Concrete-2)"
+          icon="heroicons:information-circle"
+        ></v-icon>
+      </div>
+
+      <!-- Default Notification Section -->
+      <div v-if="type === ''" class="d-flex flex-row ga-2 align-center">
+        <h6 style="color: var(--Soft-Concrete-2)">
+          Es gibt neue Update Notifications
+        </h6>
+      </div>
+
+      <!-- Another line with conditional styling -->
+      <div :style="{ backgroundColor: lineColor }" class="line"></div>
+    </div>
+
+    <!-- Button Section for Different Actions -->
+
+    <!-- Start Button for CTA: Emits "click:start" when clicked -->
+    <Button
+      v-if="
+        type === 'cta' &&
+        status !== 'Treatment Done' &&
+        status !== 'Follow-up Case Created'
+      "
+      label="Starten"
+      @click="$emit('click:start')"
+    />
+
+    <!-- Weiter (Further) Button for Follow-up Case Created: Emits "click:further" when clicked -->
+    <Button
+      v-if="type === 'cta' && status === 'Follow-up Case Created'"
+      label="Weiter"
+      @click="$emit('click:further')"
+    />
+
+    <!-- Dual Buttons for TreatmentDone: "Zurücklegen" and "Abschließen" -->
+    <div
+      v-if="type === 'cta' && status === 'Treatment Done'"
+      class="d-flex flex-row align-center justify-between ga-4"
+    >
+      <!-- Cancel Button: Emits "click:cancel" when clicked -->
+      <Button
+        variant="outlined"
+        style="width: 120px"
+        label="Zurücklegen"
+        @click="$emit('click:cancel')"
+      />
+
+      <!-- Finish Button: Emits "click:finish" when clicked -->
+      <Button
+        style="width: 120px"
+        label="Abschließen"
+        @click="$emit('click:finish')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+import TagLabel from '../TagLabel/TagLabel.vue';
+import Button from '@components/Button/Button.vue';
+
+// Define event emitters with the specific format like "click:start", "click:cancel", etc.
+const emit = defineEmits([
+  'click:start',
+  'click:further',
+  'click:cancel',
+  'click:finish',
+]);
+
+const props = defineProps({
+  type: { type: String, default: '' },
+  date: { type: String, default: '' },
+  patient: { type: String, default: 'Patient' },
+  status: { type: String, default: 'Done' },
+});
+
+// Computed property for line color based on "type" prop
+const lineColor = computed(() => {
+  return props.type === 'cta'
+    ? 'var(--Dental-Blue-0)'
+    : 'var(--Soft-Concrete-2)';
+});
+</script>
+
+<style scoped>
+.line {
+  height: 2px;
+  flex-grow: 1;
+}
+</style>

package/src/components/Laboratory/DocumentCard/DocumentCard.css

@@ -0,0 +1,3 @@
+.document-card .v-card-item {
+  padding: 26px 16px !important;
+}

package/src/components/Laboratory/DocumentCard/DocumentCard.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-card elevation="0" class="document-card" rounded="lg" data-testid="root">
+    <template #title>
+      <div class="d-flex flex-row align-center">
+        <h4 class="mr-auto">{{ title }}</h4>
+        <Button
+          color="var(--Power-Red-0)"
+          @click="handleDownloadAll"
+          label="Download all"
+          variant="text"
+        >
+        </Button>
+      </div>
+    </template>
+
+    <template #text>
+      <div class="d-flex flex-column ga-4">
+        <slot />
+      </div>
+    </template>
+  </v-card>
+</template>
+
+<script setup>
+import './DocumentCard.css';
+import { defineProps, defineEmits } from 'vue';
+import Button from '@components/Button/Button.vue';
+
+// Define props for the DocumentCard component
+const props = defineProps({
+  /**
+   * The title displayed at the top of the document card.
+   * Default is 'Attachments'.
+   */
+  title: {
+    type: String,
+    default: 'Attachments',
+  },
+});
+
+// Define the custom event for downloading all attachments
+const emit = defineEmits(['download:all']);
+
+/**
+ * Function to emit the 'download-all' event when the "Download all" button is clicked.
+ */
+function handleDownloadAll() {
+  emit('download:all');
+}
+</script>

package/src/components/Laboratory/DocumentCard/DocumentCardItem.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="d-flex flex-column">
+    <div class="d-flex flex-row align-center">
+      <h5 class="flex-grow-1">{{ header }}</h5>
+
+      <NotificationBubble
+        @click="handleIconClick"
+        iconSize="16"
+        color="transparent"
+        icon="heroicons:arrow-down-tray"
+      />
+    </div>
+
+    <!-- Display the subheader passed as a prop -->
+    <p>{{ subheader }}</p>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import NotificationBubble from '@components/NotificationBubble/NotificationBubble.vue';
+
+// Define props for the component
+const props = defineProps({
+  /**
+   * The main header text for the component.
+   * This prop is required.
+   */
+  header: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * The subheader text that appears below the main header.
+   * This prop is required.
+   */
+  subheader: {
+    type: String,
+    required: true,
+  },
+});
+
+// Define the custom event for when the icon is clicked
+const emit = defineEmits(['click:icon']);
+
+/**
+ * Function to emit the 'click:icon' event when the icon is clicked.
+ */
+function handleIconClick() {
+  emit('click:icon');
+}
+</script>

package/src/components/Laboratory/InfoCard/InfoCard.vue

@@ -0,0 +1,162 @@
+<template>
+  <v-card elevation="0" class="info-card" rounded="lg" data-testid="root">
+    <template #title>
+      <div class="d-flex flex-row">
+        <div class="mr-auto"><slot name="tagLabel"></slot></div>
+        <div class="d-flex flex-row ga-2 align-center">
+          <v-icon
+            @click="handlePencilClick"
+            class="cursor-pointer"
+            size="20"
+            color="var(--Dental-Blue-0)"
+            icon="heroicons:pencil"
+          ></v-icon>
+          <v-icon
+            @click="handlePrinterClick"
+            class="cursor-pointer"
+            size="20"
+            color="var(--Dental-Blue-0)"
+            icon="heroicons:printer"
+          ></v-icon>
+        </div>
+      </div>
+    </template>
+    <template #text>
+      <div class="d-flex flex-column w-100 ga-6">
+        <div class="d-flex flex-row ga-2 w-100">
+          <div class="mr-auto d-flex flex-column ga-2 w-100">
+            <h4>{{ patientName }}</h4>
+            <p>#{{ patientNumber }}</p>
+          </div>
+          <div><slot name="progress"></slot></div>
+        </div>
+        <v-divider thickness="2"></v-divider>
+        <div class="mr-auto d-flex flex-column ga-2 w-100">
+          <h4>{{ header }}</h4>
+          <p>{{ subHeader }}</p>
+          <div class="d-flex flex-row ga-2 align-center w-100">
+            <div class="d-flex flex-row align-center ga-2">
+              <h4>Color</h4>
+              <p>{{ color }}</p>
+            </div>
+            <div class="d-flex flex-row align-center ga-2 mr-auto">
+              <h4>Material</h4>
+              <p>{{ material }}</p>
+            </div>
+            <div class="d-flex flex-row align-center ga-2">
+              <v-icon
+                color="var(--Dental-Blue-0)"
+                icon="heroicons:user-circle"
+              ></v-icon>
+              <p>{{ dentist }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </v-card>
+</template>
+
+<script setup>
+import { defineEmits, defineProps } from 'vue';
+
+// Correct defineEmits function usage to emit events for printer and pencil icon clicks
+const emit = defineEmits(['click:printer', 'click:pencil']);
+
+// Define props for the component
+const props = defineProps({
+  /**
+   * The name of the dentist associated with the task.
+   * Default is 'Martin Paetz'.
+   */
+  dentist: {
+    type: String,
+    default: 'Martin Paetz',
+  },
+
+  /**
+   * The material associated with the task (e.g., the type of material used).
+   * Default is 'color'.
+   */
+  material: {
+    type: String,
+    default: 'color',
+  },
+
+  /**
+   * The color associated with the material or task.
+   * Default is 'material'.
+   */
+  color: {
+    type: String,
+    default: 'material',
+  },
+
+  /**
+   * The name of the patient related to the task or case.
+   * Default is 'Rainer Zufall'.
+   */
+  patientName: {
+    type: String,
+    default: 'Rainer Zufall',
+  },
+
+  /**
+   * The unique patient number associated with the task.
+   * Default is 'numbeer'.
+   */
+  patientNumber: {
+    type: String,
+    default: 'numbeer',
+  },
+
+  /**
+   * The header text for the task or case.
+   * Default is 'header'.
+   */
+  header: {
+    type: String,
+    default: 'header',
+  },
+
+  /**
+   * The sub-header text for the task or case.
+   * Default is 'subHeader'.
+   */
+  subHeader: {
+    type: String,
+    default: 'subHeader',
+  },
+});
+
+// Emit functions to handle button clicks
+
+/**
+ * Emit 'click:printer' when the printer icon is clicked.
+ */
+const handlePrinterClick = () => {
+  emit('click:printer');
+};
+
+/**
+ * Emit 'click:pencil' when the pencil icon is clicked.
+ */
+const handlePencilClick = () => {
+  emit('click:pencil');
+};
+</script>
+
+<style>
+.info-card .v-card-item {
+  padding: 16px 16px !important;
+}
+
+.info-card .v-card-text {
+  margin-top: -10px;
+  padding: 16px 20px !important;
+}
+
+.info-card .v-icon {
+  color: var(--Dental-Blue-0);
+}
+</style>