refactor: rework calendar components

srg-kostyrko · Dec 12, 2024 · 9ccfc70 · 9ccfc70
1 parent 886c508
commit 9ccfc70
Show file tree

Hide file tree

Showing 50 changed files with 550 additions and 788 deletions.
diff --git a/src/calendar-view/CalendarView.vue b/src/calendar-view/CalendarView.vue
@@ -2,18 +2,16 @@
 import { computed, ref } from "vue";
 import ObsidianIconButton from "../components/obsidian/ObsidianIconButton.vue";
 import ObsidianButton from "../components/obsidian/ObsidianButton.vue";
-import CalendarMonth from "../components/calendar/CalendarMonth.vue";
 import DatePickerModal from "../components/modals/DatePicker.modal.vue";
 import { VueModal } from "../components/modals/vue-modal";
 import { today, date_from_string } from "../calendar";
 import { openDate } from "@/journals/open-date";
-import CalendarMonthButton from "@/components/calendar/CalendarMonthButton.vue";
-import CalendarYearButton from "@/components/calendar/CalendarYearButton.vue";
-import CalendarQuarterButton from "@/components/calendar/CalendarQuarterButton.vue";
 import { ShelfSuggestModal } from "@/components/suggests/shelf-suggest";
 import { useShelfProvider } from "@/composables/use-shelf";
 import { useApp } from "@/composables/use-app";
 import { usePlugin } from "@/composables/use-plugin";
+import NotesMonthView from "@/components/notes-calendar/NotesMonthView.vue";
+import NotesCalendarButton from "@/components/notes-calendar/NotesCalendarButton.vue";
 
 const app = useApp();
 const plugin = usePlugin();
@@ -38,13 +36,6 @@ const shouldShowShelf = computed(() => {
 
 const { journals } = useShelfProvider(selectedShelf);
 
-const daysClickable = computed(() => {
-  return journals.day.value.length > 0;
-});
-const weeksClickable = computed(() => {
-  return journals.week.value.length > 0;
-});
-
 function selectShelf() {
   new ShelfSuggestModal(
     app,
@@ -97,38 +88,6 @@ function openDay(date: string, event: MouseEvent) {
     event,
   ).catch(console.error);
 }
-function openWeek(date: string, event: MouseEvent) {
-  openDate(
-    plugin,
-    date,
-    journals.week.value.map((journal) => journal.name),
-    event,
-  ).catch(console.error);
-}
-function openMonth(event: MouseEvent) {
-  openDate(
-    plugin,
-    refDate.value,
-    journals.month.value.map((journal) => journal.name),
-    event,
-  ).catch(console.error);
-}
-function openQuarter(event: MouseEvent) {
-  openDate(
-    plugin,
-    refDate.value,
-    journals.quarter.value.map((journal) => journal.name),
-    event,
-  ).catch(console.error);
-}
-function openYear(event: MouseEvent) {
-  openDate(
-    plugin,
-    refDate.value,
-    journals.year.value.map((journal) => journal.name),
-    event,
-  ).catch(console.error);
-}
 // TODO slim header to avoid scroll
 </script>
 
@@ -141,44 +100,35 @@ function openYear(event: MouseEvent) {
       <ObsidianIconButton icon="crosshair" tooltip="Select a date to be displayed" @click="pickDate" />
       <ObsidianButton @click="goToday">Today</ObsidianButton>
     </div>
-    <CalendarMonth
-      :ref-date="refDate"
-      :select-days="daysClickable"
-      :select-weeks="weeksClickable"
-      @select="openDay"
-      @select-week="openWeek"
-    >
+    <NotesMonthView :ref-date="refDate">
       <template #header>
         <ObsidianIconButton icon="chevrons-left" tooltip="Previous year" @click="navigate(-1, 'year')" />
         <ObsidianIconButton icon="chevron-left" tooltip="Previous month" @click="navigate(-1, 'month')" />
-        <div class="calendar-month-header">
-          <CalendarMonthButton :date="refDateMoment" @select="openMonth" />
-          <CalendarQuarterButton v-if="journals.quarter.value.length > 0" :date="refDateMoment" @select="openQuarter" />
-          <CalendarYearButton :date="refDateMoment" @select="openYear" />
+        <div class="month-header">
+          <NotesCalendarButton :date="refDate" type="month" />
+          <NotesCalendarButton v-if="journals.quarter.value.length > 0" :date="refDate" type="quarter" />
+          <NotesCalendarButton :date="refDate" type="year" />
         </div>
 
         <ObsidianIconButton icon="chevron-right" tooltip="Next month" @click="navigate(1, 'month')" />
         <ObsidianIconButton icon="chevrons-right" tooltip="Next year" @click="navigate(1, 'year')" />
       </template>
-    </CalendarMonth>
+    </NotesMonthView>
   </div>
 </template>
 
 <style scoped>
 .calendar-view-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding-bottom: 12px;
+  justify-content: space-between;
+  gap: var(--size-2-2);
 }
-.calendar-month-header {
+.month-header {
+  flex: 1;
   display: flex;
+  gap: var(--size-2-2);
   align-items: center;
-  gap: 2px;
-}
-.header-non-interactive {
-  color: var(--icon-color);
-  opacity: var(--icon-opacity);
-  font-size: var(--font-ui-small);
+  justify-content: center;
 }
 </style>
diff --git a/src/calendar.ts b/src/calendar.ts
@@ -1,7 +1,6 @@
 import { moment } from "obsidian";
 import { extractCurrentlocaleData } from "./utils/moment";
 import type { MomentDate } from "./types/date.types";
-import { computed } from "vue";
 
 const CUSTOM_LOCALE = "custom-journal-locale";
 let initialWeekSettings: { dow: number; doy: number } | undefined;
@@ -47,18 +46,15 @@ export function today(): MomentDate {
   return md.startOf("day");
 }
 
-export const weekdayNames = computed(() => {
-  const weekdayNames: string[] = [];
-  const week = today().startOf("week");
-  const weekEnd = today().endOf("week");
-
-  while (week.isSameOrBefore(weekEnd)) {
-    weekdayNames.push(week.format("ddd"));
-    week.add(1, "day");
-  }
-
-  return weekdayNames;
-});
+export function isSamePeriod(
+  period: moment.unitOfTime.StartOf,
+  a: string | MomentDate,
+  b: string | MomentDate,
+): boolean {
+  const date1 = typeof a === "string" ? date_from_string(a) : a;
+  const date2 = typeof b === "string" ? date_from_string(b) : b;
+  return date1.isSame(date2, period);
+}
 
 export function dateDistance(fromDate: string, toDate: string): number {
   const from = date_from_string(fromDate);

diff --git a/src/code-blocks/timeline/TimelineCalendar.vue b/src/code-blocks/timeline/TimelineCalendar.vue
@@ -3,10 +3,7 @@ import { date_from_string, today } from "@/calendar";
 import type { JournalNoteData } from "@/types/journal.types";
 import { computed } from "vue";
 
-import CalendarMonth from "@/components/calendar/CalendarMonth.vue";
-import CalendarMonthButton from "@/components/calendar/CalendarMonthButton.vue";
-import CalendarQuarterButton from "@/components/calendar/CalendarQuarterButton.vue";
-import CalendarYearButton from "@/components/calendar/CalendarYearButton.vue";
+import NotesMonthView from "@/components/notes-calendar/NotesMonthView.vue";
 
 const props = defineProps<{
   noteData: JournalNoteData | null;
@@ -29,13 +26,7 @@ const list = computed(() => {
 
 <template>
   <div>
-    <CalendarMonth v-for="date in list" :key="date.format('YYYY-MM-DD')" :ref-date="date.format('YYYY-MM-DD')">
-      <template #header>
-        <CalendarMonthButton :date="date" />
-        <CalendarQuarterButton :date="date" />
-        <CalendarYearButton :date="date" />
-      </template>
-    </CalendarMonth>
+    <NotesMonthView v-for="date in list" :key="date.format('YYYY-MM-DD')" :ref-date="date.format('YYYY-MM-DD')" />
   </div>
 </template>
 

diff --git a/src/code-blocks/timeline/TimelineMonth.vue b/src/code-blocks/timeline/TimelineMonth.vue
@@ -1,34 +1,21 @@
 <script setup lang="ts">
 import type { JournalNoteData } from "@/types/journal.types";
-import CalendarMonth from "@/components/calendar/CalendarMonth.vue";
-import CalendarMonthButton from "@/components/calendar/CalendarMonthButton.vue";
-import CalendarQuarterButton from "@/components/calendar/CalendarQuarterButton.vue";
-import CalendarYearButton from "@/components/calendar/CalendarYearButton.vue";
-import { date_from_string, today } from "@/calendar";
+import { today } from "@/calendar";
 import { computed } from "vue";
+import NotesMonthView from "@/components/notes-calendar/NotesMonthView.vue";
 
-const props = defineProps<{
+const { noteData } = defineProps<{
   noteData: JournalNoteData | null;
 }>();
 
 const refDate = computed(() => {
-  if (!props.noteData) return today().format("YYYY-MM-DD");
-  return props.noteData.date;
-});
-
-const refDateMoment = computed(() => {
-  return date_from_string(refDate.value);
+  if (!noteData) return today().format("YYYY-MM-DD");
+  return noteData.date;
 });
 </script>
 
 <template>
-  <CalendarMonth :ref-date="refDate">
-    <template #header>
-      <CalendarMonthButton :date="refDateMoment" />
-      <CalendarQuarterButton :date="refDateMoment" />
-      <CalendarYearButton :date="refDateMoment" />
-    </template>
-  </CalendarMonth>
+  <NotesMonthView :ref-date="refDate" :selected-date="refDate" />
 </template>
 
 <style scoped></style>
diff --git a/src/code-blocks/timeline/TimelineQuarter.vue b/src/code-blocks/timeline/TimelineQuarter.vue
@@ -3,11 +3,7 @@ import { date_from_string, today } from "@/calendar";
 import type { JournalNoteData } from "@/types/journal.types";
 import { computed } from "vue";
 
-import CalendarMonth from "@/components/calendar/CalendarMonth.vue";
-import CalendarMonthButton from "@/components/calendar/CalendarMonthButton.vue";
-import CalendarQuarterButton from "@/components/calendar/CalendarQuarterButton.vue";
-import CalendarYearButton from "@/components/calendar/CalendarYearButton.vue";
-
+import NotesMonthView from "@/components/notes-calendar/NotesMonthView.vue";
 const props = defineProps<{
   noteData: JournalNoteData | null;
 }>();
@@ -29,13 +25,7 @@ const list = computed(() => {
 
 <template>
   <div>
-    <CalendarMonth v-for="date in list" :key="date.format('YYYY-MM-DD')" :ref-date="date.format('YYYY-MM-DD')">
-      <template #header>
-        <CalendarMonthButton :date="date" />
-        <CalendarQuarterButton :date="date" />
-        <CalendarYearButton :date="date" />
-      </template>
-    </CalendarMonth>
+    <NotesMonthView v-for="date in list" :key="date.format('YYYY-MM-DD')" :ref-date="date.format('YYYY-MM-DD')" />
   </div>
 </template>
 

diff --git a/src/code-blocks/timeline/TimelineWeek.vue b/src/code-blocks/timeline/TimelineWeek.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { today } from "@/calendar";
-import CalendarWeek from "@/components/calendar/CalendarWeek.vue";
 import type { JournalNoteData } from "@/types/journal.types";
 import { computed } from "vue";
+import NotesWeekView from "@/components/notes-calendar/NotesWeekView.vue";
 
 const props = defineProps<{
   noteData: JournalNoteData | null;
@@ -15,9 +15,7 @@ const refDate = computed(() => {
 </script>
 
 <template>
-  <div>
-    <CalendarWeek :ref-date="refDate" />
-  </div>
+  <NotesWeekView :ref-date="refDate" :selected-date="refDate" />
 </template>
 
 <style scoped></style>
diff --git a/src/components/CollapsibleBlock.vue b/src/components/CollapsibleBlock.vue
@@ -16,7 +16,7 @@ function toggle() {
 </script>
 
 <template>
-  <div class="collapsible-root" :data-open="expanded ? true : undefined">
+  <div class="collapsible-root" :data-open="expanded || null">
     <div class="collapsible-trigger">
       <ObsidianIcon :name="icon" @click="toggle" />
       <span class="collapsible-trigger-text" @click="toggle">

diff --git a/src/components/calendar/CalendarButton.vue b/src/components/calendar/CalendarButton.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{ disabled?: boolean; clickable?: boolean }>();
+</script>
+
+<template>
+  <button :disabled :class="{ clickable }">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+button {
+  background-color: transparent;
+  box-shadow: none;
+}
+.clickable {
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/calendar/CalendarDay.vue b/src/components/calendar/CalendarDay.vue