1 files changed, 14 insertions(+), 7 deletions(-)

M src/App.vue

@@ 12,9 12,9 @@
         <AppNavigationItem title="Overdue" :pinned="false"
         icon="icon-error" :open="false" :allow-collapse="true"
         to="/overdue" >
-          <AppNavigationCounter slot="counter" :highlighted="true">
-            5
-          </AppNavigationCounter>
+          <CounterBubble slot="counter" :highlighted="true" v-show="overdueChoresCount > 0">
+            {{overdueChoresCount}}
+          </CounterBubble>
         </AppNavigationItem>
         <AppNavigationItem title="Upcoming" :pinned="false"
         icon="icon-calendar-dark" :open="false" :allow-collapse="true"


@@ 37,9 37,9 @@
       <template #list>
         <AppNavigationNew text="Create new team" button-class="icon-add" />
         <AppNavigationItem title="Invitations" class="active">
-          <AppNavigationCounter slot="counter" :highlighted="false">
+          <CounterBubble slot="counter" :highlighted="false">
             {{store.invites.length}}
-          </AppNavigationCounter>
+          </CounterBubble>
         </AppNavigationItem>
       </template>
       <template #footer>


@@ 105,22 105,25 @@
 <script>
 import { Content } from '@nextcloud/vue'
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import { AppNavigation, AppNavigationCounter, AppNavigationItem, AppNavigationNew } from '@nextcloud/vue'
+import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble'
+import { AppNavigation, AppNavigationItem, AppNavigationNew } from '@nextcloud/vue'
+import { isOverdue } from './logic';
 
 export default {
   name: 'App',
   components: {
     AppContent,
     AppNavigation,
-    AppNavigationCounter,
     AppNavigationItem,
     AppNavigationNew,
     Content,
+    CounterBubble,
   },
   data() {
     return {
       store: this.$root.$data.globalStore,
       newTeamName: "",
+      now: new Date(),
     }
   },
   methods: {


@@ 142,11 145,15 @@ export default {
   },
   mounted: async function() {
     await this.store.loadTeamData();
+    await this.store.loadChoresData();
   },
   computed: {
     userHasTeam() {
       return this.store.team !== null;
     },
+    overdueChoresCount() {
+      return this.store.chores.filter(c => isOverdue(c, this.now)).length;
+    },
   },
 }
 </script>