Refactor DiaryEditor and Home components:

- Add loading icon to DiaryEditor. - Remove unnecessary interval and styles from DiaryEditor. - Update navigation links in NavBar and Home. - Improve date navigation in Home. - Scope styles to components.
swuecho · Sep 21, 2024 · abe5c8f · abe5c8f
1 parent 9d1ba5a
commit abe5c8f
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 52 deletions.
diff --git a/web/src/components/DiaryEditor.vue b/web/src/components/DiaryEditor.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="content">
     <div class="editor">
-      <el-tiptap :content="content" :extensions="extensions" @onUpdate="debouncedOnUpdate" @onInit="onInit"></el-tiptap>
+      <el-tiptap :key="'editor-' + date" :content="content" :extensions="extensions" @onUpdate="debouncedOnUpdate" @onInit="onInit"></el-tiptap>
     </div>
+    <Icon v-if="loading" icon="line-md:loading-alt-loop" />
   </div>
 </template>
 
@@ -38,10 +39,6 @@ const content = ref(null);
 const extensions = createExtensions();
 const json = ref(null);
 
-onMounted(() => {
-  // eslint-disable-next-line no-unused-vars
-  const interval = setInterval(() => now.value = moment(), 1000);
-});
 
 const mutation = useMutation({
   mutationFn: async () => {
@@ -111,26 +108,10 @@ const onInit = async ({ editor }) => {
 };
 </script>
 
-<style>
+<style scoped>
 pre code {
   font-family: "Fira Code", Courier, Monaco, monospace;
 }
 
-.nav {
-  margin: 1em 1em 1rem 1em;
-  display: flex;
-  justify-content: space-between;
-}
 
-.nav a {
-  display: inline-block;
-  text-decoration: none;
-  border-radius: 5%;
-}
-
-/* Change the link color on hover */
-.nav a:hover {
-  background-color: rgb(223, 214, 214);
-  color: white;
-}
 </style>
diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
@@ -1,6 +1,6 @@
 <template>
         <div class="nav">
-                <a v-if="date != today" :href="'/view?date=' + today">Diary</a>
+                <a v-if="date != today" href="/">Diary</a>
                 <a href="content">
                         <Icon :icon="icons.tableOfContents" />
                         <Icon v-if="loading" icon="line-md:loading-alt-loop" />

diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
@@ -1,25 +1,27 @@
 <template>
-  <div>
+  <div class="content">
     <div class="nav">
       {{ time }}
-      <div>
-        <a @click="navigateDate(-1)">
-          <Icon icon="grommet-icons:form-previous" width="1.2rem" height="1.2rem" />
-        </a>
-        <a href="#">{{ date }}</a>
-        <a @click="navigateDate(1)">
-          <Icon icon="grommet-icons:form-next" width="1.2rem" height="1.2rem" />
-        </a>
+      <div class="date-nav">
+        <div @click="navigateDate(-1)" class="icon-container">
+          <Icon icon="grommet-icons:form-previous" width="1.2rem" />
+        </div>
+        <div>
+          {{ displayDate }}
+        </div>
+        <div v-if="date < today" @click="navigateDate(1)" class="icon-container">
+          <Icon icon="grommet-icons:form-next" width="1.2rem" />
+        </div>
+        <div v-if="date != today" @click="navigateDateToToday" class="icon-container">
+          <Icon icon="fluent:arrow-next-16-regular" width="1.2rem" />
+        </div>
       </div>
-      <a v-if="date != today" :href="'/view?date=' + today">Today</a>
-      <a v-if="date == today" href="/todo">Todo</a>
+      <a href="/todo">Todo</a>
       <a href="content">
-        <Icon :icon="icons.tableOfContents" />
+        <Icon :icon="tableOfContents" />
       </a>
     </div>
-    <div class="content">
-      <DiaryEditor :date="date"></DiaryEditor>
-    </div>
+    <DiaryEditor :date="date"></DiaryEditor>
   </div>
 </template>
 
@@ -30,12 +32,9 @@ import { Icon } from '@iconify/vue2';
 import tableOfContents from '@iconify/icons-mdi/table-of-contents';
 import DiaryEditor from "@/components/DiaryEditor";
 
+
 const now = ref(moment());
 const date = ref(moment().format('YYYYMMDD'))
-const timeFormat = 'h:mm:ss a';
-const icons = {
-  tableOfContents,
-};
 
 onMounted(() => {
   // eslint-disable-next-line no-unused-vars
@@ -47,26 +46,53 @@ const today = computed(() => {
   return now.value.format('YYYYMMDD');
 });
 
+const time = computed(() => {
+  const timeFormat = 'h:mm:ss a';
+  return now.value.format(timeFormat);
+});
+
+const displayDate = computed(() => {
+  if (date.value == today.value) {
+    return 'Today'
+  } else {
+    return date.value
+  }
+})
 
 function navigateDate(offset) {
-  const newDate = moment(now.value).add(offset, 'days');
-  if (newDate > today) {
-    alert("can not be in the future")
-    return
+  const newDate = moment(date.value).add(offset, 'days').format("YYYYMMDD");
+  if (newDate > today.value) {
+    alert("can not into future")
   }
-  router.push(`/view?date=${newDate.format('YYYYMMDD')}`);
+  date.value = newDate
 }
 
-const time = computed(() => {
-  return now.value.format(timeFormat);
-});
-
+function navigateDateToToday() {
+  date.value = today.value
+}
 
 </script>
 
-<style>
+<style scoped>
 .content {
   max-width: 65rem;
   margin: auto;
 }
+
+.nav {
+  margin: 1em 1em 1rem 1em;
+  display: flex;
+  justify-content: space-between;
+}
+
+.nav .date-nav {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+}
 </style>