From b2a7c2e282fb842d6cb7ca786398c7c6c852cdeb Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Thu, 29 Jun 2023 13:48:27 +0200
Subject: [PATCH] Add DateEmbedding component

---
 client/src/components/dueDates/DateEmbedding.vue | 16 ++++++++++++++++
 client/src/components/dueDates/dueDatesUtils.ts  |  4 ++--
 client/src/pages/StyleGuidePage.vue              |  9 +++++++++
 .../assignment/AssignmentIntroductionView.vue    |  9 +++------
 .../static/icons/icon-calendar-light.svg         |  5 +++++
 5 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/dueDates/DateEmbedding.vue
 create mode 100644 server/vbv_lernwelt/static/icons/icon-calendar-light.svg

diff --git a/client/src/components/dueDates/DateEmbedding.vue b/client/src/components/dueDates/DateEmbedding.vue
new file mode 100644
index 00000000..b98c3faf
--- /dev/null
+++ b/client/src/components/dueDates/DateEmbedding.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { getDateString, getTimeString } from "@/components/dueDates/dueDatesUtils";
+import type { Dayjs } from "dayjs";
+import { defineProps } from "vue";
+
+const props = defineProps<{
+  singleDate: Dayjs;
+}>();
+</script>
+
+<template>
+  <span>
+    <it-icon-calendar-light class="it-icon h-5 w-5" />
+    {{ getDateString(props.singleDate) }}, {{ getTimeString(props.singleDate) }}
+  </span>
+</template>
diff --git a/client/src/components/dueDates/dueDatesUtils.ts b/client/src/components/dueDates/dueDatesUtils.ts
index 7f3f9adf..0c28c3af 100644
--- a/client/src/components/dueDates/dueDatesUtils.ts
+++ b/client/src/components/dueDates/dueDatesUtils.ts
@@ -28,11 +28,11 @@ export const formatDate = (start: Dayjs, end: Dayjs) => {
   )}`;
 };
 
-const getTimeString = (date: Dayjs) => {
+export const getTimeString = (date: Dayjs) => {
   return `${date.format("H:mm")}`;
 };
 
-const getDateString = (date: Dayjs) => {
+export const getDateString = (date: Dayjs) => {
   return `${date.format("D. MMMM YYYY")}`;
 };
 
diff --git a/client/src/pages/StyleGuidePage.vue b/client/src/pages/StyleGuidePage.vue
index ebe903f9..1cb4a1e3 100644
--- a/client/src/pages/StyleGuidePage.vue
+++ b/client/src/pages/StyleGuidePage.vue
@@ -216,6 +216,15 @@ function log(data: any) {
         ls-end
         <it-icon-ls-end />
       </div>
+
+      <div class="inline-flex flex-col">
+        calendar
+        <it-icon-calendar />
+      </div>
+      <div class="inline-flex flex-col">
+        calendar-light
+        <it-icon-calenda-light />
+      </div>
     </div>
 
     <div class="mb-8 mt-8 flex flex-col flex-wrap gap-4 lg:flex-row">
diff --git a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
index 835ede28..78978912 100644
--- a/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
+++ b/client/src/pages/learningPath/learningContentPage/assignment/AssignmentIntroductionView.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import DateEmbedding from "@/components/dueDates/DateEmbedding.vue";
 import type { Assignment } from "@/types";
 import { useRouteQuery } from "@vueuse/router";
 import type { Dayjs } from "dayjs";
@@ -37,12 +38,8 @@ const step = useRouteQuery("step");
 
   <h3 class="mb-4 mt-8">{{ $t("assignment.dueDateTitle") }}</h3>
   <p v-if="props.dueDate" class="text-large">
-    {{
-      $t("assignment.dueDateIntroduction", {
-        date: dueDate!.format("DD.MM.YYYY"),
-        time: dueDate!.format("HH:mm"),
-      })
-    }}
+    {{ $t("assignment.dueDateIntroduction") }}
+    <DateEmbedding :single-date="dueDate"></DateEmbedding>
   </p>
   <p v-else class="text-large">
     {{ $t("assignment.dueDateNotSet") }}
diff --git a/server/vbv_lernwelt/static/icons/icon-calendar-light.svg b/server/vbv_lernwelt/static/icons/icon-calendar-light.svg
new file mode 100644
index 00000000..dd5db179
--- /dev/null
+++ b/server/vbv_lernwelt/static/icons/icon-calendar-light.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Outline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+    <path
+        d="m23.71,4.86h-2.86v-1.53c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.53h-8.71v-1.53c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.53h-2.86c-1.24,0-2.25,1.01-2.25,2.25v15.77c0,1.24,1.01,2.25,2.25,2.25h17.43c1.24,0,2.25-1.01,2.25-2.25V7.11c0-1.24-1.01-2.25-2.25-2.25Zm-17.43,1.5h17.43c.41,0,.75.34.75.75v2.21H5.54v-2.21c0-.41.34-.75.75-.75Zm17.43,17.27H6.29c-.41,0-.75-.34-.75-.75v-12.06h18.93v12.06c0,.41-.34.75-.75.75Z"/>
+</svg>