feat: change my today show list

tonylu110 · Apr 17, 2024 · 80b2a13 · 80b2a13
1 parent 2f2d470
commit 80b2a13
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 5 deletions.
diff --git a/src/components/ListMenu/TitleMenuItem/index.tsx b/src/components/ListMenu/TitleMenuItem/index.tsx
@@ -27,7 +27,19 @@ const TitleMenuItem: SetupFC = () => {
 
   const listData = ref(LocalStorage('get'))
 
-  const TodayNum = computed(() => listData.value!.filter(listData => new Date(listData.id).toDateString() === new Date().toDateString()).length)
+  const todayShow = ref(localStorage.getItem('todayShow'))
+  emitter.on('todayShow', (show) => {
+    todayShow.value = show as string
+  })
+
+  const TodayNum = computed(() => {
+    if (todayShow.value === 'todayRemind')
+      return listData.value!.filter(listData => new Date(listData.time!).toDateString() === new Date().toDateString()).length
+    else if (todayShow.value === 'allAboutToday')
+      return listData.value!.filter(listData => new Date(listData.id).toDateString() === new Date().toDateString() || new Date(listData.time!).toDateString() === new Date().toDateString()).length
+    else
+      return listData.value!.filter(listData => new Date(listData.id).toDateString() === new Date().toDateString()).length
+  })
   const starNum = computed(() => listData.value!.filter(listData => listData.star === true).length)
   const doNum = computed(() => listData.value!.filter(listData => listData.ok).length)
   const notDoNum = computed(() => listData.value!.filter(listData => !listData.ok).length)

diff --git a/src/components/TabBar/TodayShow/TodayShow.vue b/src/components/TabBar/TodayShow/TodayShow.vue
@@ -2,10 +2,20 @@
 import { Dropdown as VDropdown } from 'floating-vue'
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import emitter from '../../../util/bus';
 
 const { t } = useI18n()
 
 const showToday = ref(false)
+
+const todayShow = ref(localStorage.getItem('todayShow'))
+
+function changeTodayshow(show: string) {
+  todayShow.value = show
+  localStorage.setItem('todayShow', todayShow.value!)
+  emitter.emit('todayShow', todayShow.value)
+  showToday.value = false
+}
 </script>
 
 <template>
@@ -28,25 +38,37 @@ const showToday = ref(false)
           flex items-center p-3
           border-b="1px solid #ddd dark:#333"
           bg="hover:black/5 active:primary-d"
+          @click="changeTodayshow('null')"
         >
-          <div i-ph:check-bold c-primary-d mr-3/>
+          <div
+            i-ph:check-bold c-primary-d mr-3
+            :opacity="todayShow === null || todayShow === 'null' ? '100' : '0'"
+          />
           <span select-none group-active:c-white>{{ t('todayShow.creatTime') }}</span>
         </div>
         <div
           class="group"
           flex items-center p-3 
           border-b="1px solid #ddd dark:#333"
           bg="hover:black/5 active:primary-d"
+          @click="changeTodayshow('todayRemind')"
         >
-          <div i-ph:check-bold c-primary-d mr-3/>
+          <div
+            i-ph:check-bold c-primary-d mr-3
+            :opacity="todayShow === 'todayRemind' ? '100' : '0'"
+          />
           <span select-none group-active:c-white>{{ t('todayShow.remindTime') }}</span>
         </div>
         <div
           class="group"
           flex items-center p-3
           bg="hover:black/5 active:primary-d"
+          @click="changeTodayshow('allAboutToday')"
         >
-          <div i-ph:check-bold c-primary-d mr-3/>
+          <div
+            i-ph:check-bold c-primary-d mr-3
+            :opacity="todayShow === 'allAboutToday' ? '100' : '0'"
+          />
           <span select-none group-active:c-white>{{ t('todayShow.allTime') }}</span>
         </div>
       </div>

diff --git a/src/pages/Other.tsx b/src/pages/Other.tsx
@@ -7,6 +7,7 @@ import List from '../components/List/List.vue'
 import LocalStorage from '../util/localStorage'
 import type ITodoList from '../interface/ITodoListArray'
 import type { cateItem } from '../components/ListMenu/ICateItem'
+import emitter from '../util/bus'
 
 const Other: SetupFC = () => {
   const { t } = useI18n()
@@ -21,6 +22,8 @@ const Other: SetupFC = () => {
 
   const showAddItem = ref(false)
 
+  const todayShow = ref(localStorage.getItem('todayShow'))
+
   watchEffect(() => {
     if (route.query.listName === 'allNotDo') {
       listData.value = list.value!.filter(listData => listData.ok === false)
@@ -31,7 +34,12 @@ const Other: SetupFC = () => {
       title.value = t('listMenu.completed')
     }
     else if (route.query.listName === 'today') {
-      listData.value = list.value!.filter(listData => new Date(listData.id).toDateString() === new Date().toDateString())
+      if (todayShow.value === 'todayRemind')
+        listData.value = list.value!.filter(listData => new Date(listData.time!).toDateString() === new Date().toDateString())
+      else if (todayShow.value === 'allAboutToday')
+        listData.value = list.value!.filter(listData => new Date(listData.id).toDateString() === new Date().toDateString() || new Date(listData.time!).toDateString() === new Date().toDateString())
+      else
+        listData.value = list.value!.filter(listData => new Date(listData.id).toDateString() === new Date().toDateString())
       title.value = t('startPage.today')
     }
     else if (route.query.listName === 'star') {
@@ -46,6 +54,10 @@ const Other: SetupFC = () => {
     }
   })
 
+  emitter.on('todayShow', (show) => {
+    todayShow.value = show as string
+  })
+
   const simpleMode = localStorage.getItem('simpleMode') === 'true'
 
   return () => (