From 211d1d2b2f53878b81e98dd9193fc91f4f79a03e Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Sun, 18 Jun 2023 18:18:26 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Make=20date=20selector=20modular?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                      | 19 +++++++++++++++++--
 src/components/date-selector.vue | 17 +++++++++++------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e11cf99..40ac463 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,16 @@ import TitleBar from "@/components/titlebar-element.vue";
 import BottomNavbar from "@/components/bottom-navbar.vue";
 import DateSelector from "@/components/date-selector.vue";
 import LoadingElement from "@/components/loading-element.vue";
-import { loading, loadingProgress, loadingFailed, theme } from "@/store";
+import {
+  loading,
+  loadingProgress,
+  loadingFailed,
+  theme,
+  selectedDate,
+  selectedDay,
+  changeDay,
+  changeDate,
+} from "@/store";
 import { computed, ref } from "vue";
 
 const autoThemes = { true: "dark", false: "light" };
@@ -33,7 +42,13 @@ const isDataView = computed(() => route.meta.dataView || false);
     />
     <div class="center">
       <main>
-        <DateSelector v-show="isDataView" />
+        <DateSelector
+          :selectedDate="selectedDate"
+          :selectedDay="selectedDay"
+          @changeDay="(inc) => (changeDay += inc)"
+          @changeDate="(date) => (changeDate = date)"
+          v-show="isDataView"
+        />
         <div class="wrapper">
           <RouterView />
         </div>
diff --git a/src/components/date-selector.vue b/src/components/date-selector.vue
index 8918b87..a23080b 100644
--- a/src/components/date-selector.vue
+++ b/src/components/date-selector.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { selectedDate, selectedDay, changeDay, changeDate } from "@/store";
+defineProps(["selectedDate", "selectedDay"]);
+defineEmits(["changeDay", "changeDate"]);
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-vue-next";
 import dayjs from "dayjs";
 import { getDateSkippingWeekend } from "@/util";
@@ -17,15 +18,19 @@ const dayNames = [
 
 <template>
   <div class="selector">
-    <ArrowLeftIcon @click="changeDay--" />
+    <ArrowLeftIcon @click="$emit('changeDay', -1)" />
     <span
       class="day"
-      @click="changeDate = getDateSkippingWeekend(dayjs().toDate(), true)"
+      @click="
+        $emit('changeDate', getDateSkippingWeekend(dayjs().toDate(), true))
+      "
     >
-      {{ $t(dayNames[selectedDay + 1]) }},
-      {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
+      {{ $t(dayNames[selectedDay + 1])
+      }}{{
+        selectedDate ? ", " + dayjs(selectedDate).format("DD.MM.YYYY") : ""
+      }}
     </span>
-    <ArrowRightIcon @click="changeDay++" />
+    <ArrowRightIcon @click="$emit('changeDay', +1)" />
   </div>
 </template>