~cypheon/nextcloud-chores-app

d19a6603c01e63c7545582e5ff313ef4aec0bf9f — Johann Rudloff 2 months ago 0ca1f3b main
Make overdue sidebar badge dynamic, switch badges to `CounterBubble` component
1 files changed, 14 insertions(+), 7 deletions(-)

M src/App.vue
M src/App.vue => src/App.vue +14 -7
@@ 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>