<template>
  <widget-page disable :is-loading="isLoading">
    <categories :groups-counting="groupsCounting" />
  </widget-page>
</template>

<script lang="ts">
import { Component, Inject, Vue } from 'vue-property-decorator'
import WidgetPage from '@/widgets/base/components/widget-page/WidgetPage.vue'
import Categories from '@/widgets/tasks/components/categories/Categories.vue'
import { CategoryModule } from '@/widgets/tasks/modules/CategoryModule'
import { CategoryGroupCounting } from '@/widgets/tasks/types/Category'

@Component({
  components: { Categories, WidgetPage },
})
export default class CategoriesPage extends Vue {
  @Inject('CategoryModule')
  categoryModule!: CategoryModule

  isLoading = false

  get groupsCounting(): CategoryGroupCounting {
    return this.categoryModule.counting as CategoryGroupCounting
  }

  async activated() {
    this.isLoading = true

    await this.categoryModule.loadCounting()

    this.isLoading = false
  }
}
</script>
