feat: rework nav code block

srg-kostyrko · May 6, 2024 · 4ebcee7 · 4ebcee7
1 parent e4e154d
commit 4ebcee7
Show file tree

Hide file tree

Showing 13 changed files with 187 additions and 138 deletions.
diff --git a/src/code-blocks/code-block-interval/CodeBlockInterval.vue b/src/code-blocks/code-block-interval/CodeBlockInterval.vue
diff --git a/src/code-blocks/code-block-interval/code-block-interval-processor.ts b/src/code-blocks/code-block-interval/code-block-interval-processor.ts
diff --git a/...s/code-block-nav/CodeBlockCalendarNav.vue → ...de-blocks/code-block-nav/CodeBlockNav.vue b/...s/code-block-nav/CodeBlockCalendarNav.vue → ...de-blocks/code-block-nav/CodeBlockNav.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { ComputedRef, computed } from "vue";
+import { computed } from "vue";
 import { useFileContextRef } from "../../journals/file-context";
-import { CalendarContext } from "../../journals/calendar-context";
 import CodeBlockNav from "../../components/CodeBlockNav.vue";
 import CodeBlockNavDay from "./CodeBlockNavDay.vue";
 import CodeBlockNavWeek from "./CodeBlockNavWeek.vue";
 import CodeBlockNavMonth from "./CodeBlockNavMonth.vue";
 import CodeBlockNavQuarter from "./CodeBlockNavQuarter.vue";
 import CodeBlockNavYear from "./CodeBlockNavYear.vue";
+import CodeBlockNavCustom from "./CodeBlockNavCustom.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -19,21 +19,18 @@ const props = withDefaults(
   },
 );
 
-const context = useFileContextRef(props.path) as ComputedRef<CalendarContext | null>;
-const prevContext = computed(() => context.value?.prevContext as CalendarContext);
-const nextContext = computed(() => context.value?.nextContext as CalendarContext);
+const context = useFileContextRef(props.path);
+const prevContext = computed(() => context.value?.getPrevContext());
+const nextContext = computed(() => context.value?.getNextContext());
 
 const error_message = computed(() => {
   if (!context.value) {
     return "Note is not connected to existing journal.";
   }
-  if (context.value.type !== "calendar") {
-    return "Note is connected to a non-calendar journal.";
-  }
   return "";
 });
 const component = computed(() => {
-  switch (context.value?.granularity) {
+  switch (context.value?.journal$.value?.repeats.type) {
     case "day":
       return CodeBlockNavDay;
     case "week":
@@ -44,6 +41,8 @@ const component = computed(() => {
       return CodeBlockNavQuarter;
     case "year":
       return CodeBlockNavYear;
+    case "custom":
+      return CodeBlockNavCustom;
   }
   return CodeBlockNavDay;
 });

diff --git a/...-block-interval/CodeBlockIntervalItem.vue → ...cks/code-block-nav/CodeBlockNavCustom.vue b/...-block-interval/CodeBlockIntervalItem.vue → ...cks/code-block-nav/CodeBlockNavCustom.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { IntervalContext } from "../../journals/interval-context";
+import { JournalContext } from "../../journals/journal-context";
 
 const props = withDefaults(
   defineProps<{
-    context: IntervalContext;
+    context: JournalContext;
     interactive: boolean;
   }>(),
   {
@@ -20,10 +20,10 @@ function onClick() {
 <template>
   <div :class="{ interactive }" @click.stop="onClick">
     <div class="interval-name">
-      {{ context.noteNavTitle$ }}
+      {{ context.navBlockName$ }}
     </div>
-    <div class="interval-dates">
-      {{ context.noteNavDates$ }}
+    <div v-if="context.showNavBlockPeriod$" class="interval-dates">
+      {{ context.navBlockPeriod$ }}
     </div>
   </div>
 </template>

diff --git a/src/code-blocks/code-block-nav/CodeBlockNavDay.vue b/src/code-blocks/code-block-nav/CodeBlockNavDay.vue
@@ -1,21 +1,24 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { CalendarContext } from "../../journals/calendar-context";
 import { today } from "../../utils/calendar";
 import CodeBlockNavWeek from "./CodeBlockNavWeek.vue";
 import CodeBlockNavMonth from "./CodeBlockNavMonth.vue";
-import CodeBlockNavYear from "./CodeBlockNavYear.vue";
+import { JournalContext } from "../../journals/journal-context";
 
 const props = withDefaults(
   defineProps<{
-    context: CalendarContext;
+    context: JournalContext;
     interactive?: boolean;
   }>(),
   {
     interactive: true,
   },
 );
 
+const hasWeekGroup = computed(() => {
+  return props.context.groupContexts$.value.week.length > 0;
+});
+
 const relative = computed(() => {
   const todayDate = today();
 
@@ -35,9 +38,6 @@ function open() {
   if (!props.interactive) return;
   props.context.open();
 }
-const weekContext = props.context.as("week");
-const monthContext = props.context.as("month");
-const yearContext = props.context.as("year");
 </script>
 
 <template>
@@ -46,9 +46,14 @@ const yearContext = props.context.as("year");
     <div class="nav-day">{{ context.date.format("D") }}</div>
     <div class="nav-relative">{{ relative }}</div>
   </div>
-  <CodeBlockNavWeek v-if="weekContext" :context="weekContext" :interactive="interactive" :with-relative="false" />
-  <CodeBlockNavMonth v-if="monthContext" :context="monthContext" :interactive="interactive" :with-relative="false" />
-  <CodeBlockNavYear v-if="yearContext" :context="yearContext" :interactive="interactive" :with-relative="false" />
+  <CodeBlockNavWeek
+    v-if="hasWeekGroup"
+    :context="context"
+    :interactive="interactive"
+    group-open
+    :with-relative="false"
+  />
+  <CodeBlockNavMonth v-else :context="context" :interactive="interactive" group-open :with-relative="false" />
 </template>
 
 <style scoped>

diff --git a/src/code-blocks/code-block-nav/CodeBlockNavMonth.vue b/src/code-blocks/code-block-nav/CodeBlockNavMonth.vue
@@ -1,21 +1,29 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { CalendarContext } from "../../journals/calendar-context";
 import { today } from "../../utils/calendar";
 import CodeBlockNavYear from "./CodeBlockNavYear.vue";
+import { JournalContext } from "../../journals/journal-context";
+import { Menu } from "obsidian";
 
 const props = withDefaults(
   defineProps<{
-    context: CalendarContext;
+    context: JournalContext;
     interactive?: boolean;
     withRelative?: boolean;
+    groupOpen?: boolean;
   }>(),
   {
     interactive: true,
     withRelative: true,
   },
 );
 
+const interactive$ = computed(() => {
+  if (!props.interactive) return false;
+  if (!props.groupOpen) return false;
+  return props.context.groupContexts$.value.month.length > 0;
+});
+
 const relative = computed(() => {
   const thisMonth = today().startOf("month");
   const fromNow = props.context.date.diff(thisMonth, "month");
@@ -32,19 +40,36 @@ const relative = computed(() => {
   return `${fromNow} months from now`;
 });
 
-function open() {
-  if (!props.interactive) return;
-  props.context.open();
+function open(event: MouseEvent) {
+  if (!interactive$.value) return;
+  if (props.groupOpen) {
+    const groupContexts = props.context.groupContexts$.value.month;
+    if (!groupContexts.length) return;
+    if (groupContexts.length === 1) {
+      groupContexts[0].open();
+    } else {
+      const menu = new Menu();
+      for (const context of groupContexts) {
+        menu.addItem((item) => {
+          item.setTitle(context.journal$.value?.name || "").onClick(() => {
+            context.open();
+          });
+        });
+      }
+      menu.showAtMouseEvent(event);
+    }
+  } else {
+    props.context.open();
+  }
 }
-const yearContext = props.context.as("year");
 </script>
 
 <template>
-  <div :class="{ interactive }" @click="open">
+  <div :class="{ interactive: interactive$ }" @click="open">
     <div class="nav-month">{{ context.date.format("MMMM") }}</div>
     <div v-if="withRelative" class="nav-relative">{{ relative }}</div>
   </div>
-  <CodeBlockNavYear v-if="yearContext" :context="yearContext" :interactive="interactive" :with-relative="false" />
+  <CodeBlockNavYear :context="context" :interactive="interactive" :group-open="groupOpen" :with-relative="false" />
 </template>
 
 <style scoped></style>
diff --git a/src/code-blocks/code-block-nav/CodeBlockNavQuarter.vue b/src/code-blocks/code-block-nav/CodeBlockNavQuarter.vue
@@ -1,21 +1,29 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { CalendarContext } from "../../journals/calendar-context";
 import { today } from "../../utils/calendar";
 import CodeBlockNavYear from "./CodeBlockNavYear.vue";
+import { JournalContext } from "../../journals/journal-context";
+import { Menu } from "obsidian";
 
 const props = withDefaults(
   defineProps<{
-    context: CalendarContext;
+    context: JournalContext;
     interactive?: boolean;
     withRelative?: boolean;
+    groupOpen?: boolean;
   }>(),
   {
     interactive: true,
     withRelative: true,
   },
 );
 
+const interactive$ = computed(() => {
+  if (!props.interactive) return false;
+  if (!props.groupOpen) return false;
+  return props.context.groupContexts$.value.quarter.length > 0;
+});
+
 const relative = computed(() => {
   const thisQuarter = today().startOf("quarter");
   const fromNow = props.context.date.diff(thisQuarter, "quarter");
@@ -32,19 +40,34 @@ const relative = computed(() => {
   return `${fromNow} quarters from now`;
 });
 
-function open() {
-  if (!props.interactive) return;
-  props.context.open();
+function open(event: MouseEvent) {
+  if (!interactive$.value) return;
+  if (props.groupOpen) {
+    const groupContexts = props.context.groupContexts$.value.quarter;
+    if (!groupContexts.length) return;
+    if (groupContexts.length === 1) {
+      groupContexts[0].open();
+    } else {
+      const menu = new Menu();
+      for (const context of groupContexts) {
+        menu.addItem((item) => {
+          item.setTitle(context.journal$.value?.name || "").onClick(() => {
+            context.open();
+          });
+        });
+      }
+      menu.showAtMouseEvent(event);
+    }
+  } else {
+    props.context.open();
+  }
 }
-const yearContext = props.context.as("year");
 </script>
 
 <template>
-  <div :class="{ interactive }" @click="open">
+  <div :class="{ interactive: interactive$ }" @click="open">
     <div class="nav-quarter">{{ context.date.format("[Q]Q") }}</div>
     <div v-if="withRelative" class="nav-relative">{{ relative }}</div>
   </div>
-  <CodeBlockNavYear v-if="yearContext" :context="yearContext" :interactive="interactive" :with-relative="false" />
+  <CodeBlockNavYear :context="context" :interactive="interactive" :group-open="true" :with-relative="false" />
 </template>
-
-<style scoped></style>