Fix initial for empty data

Author: Stigmatoz

src/components/ByDays.vue

@@ -3,7 +3,12 @@
     <img height="55" src="../assets/icons/preloader.gif" />
   </div>
   <div v-else>
-    <div class="no-data" v-if="countOfDays == undefined || countOfDays == 0">No data</div>
+    <div class="no-data" v-if="countOfDays == undefined || (countOfDays == 0 && !noData)">
+      No data
+    </div>
+    <div v-else-if="noData">
+      <div class="no-data">No data for selected period</div>
+    </div>
     <div v-else>
       <div class="stats-block block">
         <div class="header">Average time on selected days</div>
@@ -46,13 +51,18 @@ import { convertSummaryTimeToString } from '../utils/converter';
 
 const tabsByDays = ref<TabListByDays>();
 const isLoading = ref<boolean>();
+const noData = ref<boolean>();
 
 const countOfDays = computed(() =>
   tabsByDays.value != undefined ? tabsByDays.value.days.length : 0,
 );
 
 async function loadList() {
-  tabsByDays.value = await useTabListByDays(new Date('06/03/2023'), new Date('06/14/2023'));
+  const tabList = await useTabListByDays(new Date('06/03/2023'), new Date('06/14/2023'));
+  if (tabList != null) {
+    tabsByDays.value = tabList;
+    if (tabList.days.length == 0 && tabList.summaryTime == 0) noData.value = true;
+  }
   isLoading.value = false;
 }
 

src/components/TabList.vue

@@ -83,9 +83,12 @@ async function loadList(sortingBy: SortingBy) {
   if (props.type == TypeOfList.Today) tabSummary = await useTodayTabListSummary(sortingBy);
   if (props.type == TypeOfList.All) {
     tabSummary = await useAllTabListSummary(sortingBy);
-    firstDay.value = tabSummary.firstDay;
-    countOfActiveDays.value = tabSummary.activeDaysTotal;
-    dataForOvarallStats.value = tabSummary;
+
+    if (tabSummary != null) {
+      firstDay.value = tabSummary.firstDay;
+      countOfActiveDays.value = tabSummary.activeDaysTotal;
+      dataForOvarallStats.value = tabSummary;
+    }
   }
 
   if (tabSummary != null) {

src/compositions/all-tab-list-summary.ts

@@ -5,12 +5,13 @@ import { SortingBy } from '../utils/enums';
 import { daysBetween } from '../utils/time';
 import { todayLocalDate } from '../utils/today';
 
-export async function useAllTabListSummary(sortingBy: SortingBy): Promise<OverallStats> {
+export async function useAllTabListSummary(sortingBy: SortingBy): Promise<OverallStats | null> {
   const repo = await injectTabsRepository();
   const unSortedTabs = repo.getTabs();
   let tabs: Tab[] = [];
 
-  const todayTabs = unSortedTabs.filter(x => x.days.find(s => s.date === todayLocalDate()));
+  if (unSortedTabs.length == 0) return null;
+  const todayTabs = unSortedTabs?.filter(x => x.days.find(s => s.date === todayLocalDate()));
 
   const summaryTimeListForToday = todayTabs.map(function (tab) {
     return tab.days.find(day => day.date === todayLocalDate())!.summary;
@@ -82,8 +83,10 @@ export async function useAllTabListSummary(sortingBy: SortingBy): Promise<Overal
     averageTimeByActiveDays: averageTimeByActiveDays,
     mostActiveDay: mostDay.mostActiveDayObj,
     mostInactiveDay: mostDay.mostInactiveDayObj,
-    mostActiveDayExceptToday: mostDayExceptToday.mostActiveDayObjExceptToday,
-    mostInactiveDayExceptToday: mostDayExceptToday.mostInactiveDayObjExceptToday,
+    mostActiveDayExceptToday:
+      mostDayExceptToday != null ? mostDayExceptToday.mostActiveDayObjExceptToday : null,
+    mostInactiveDayExceptToday:
+      mostDayExceptToday != null ? mostDayExceptToday.mostInactiveDayObjExceptToday : null,
     tabs: tabs,
     summaryTime: summaryTime,
     chart: {
@@ -111,6 +114,7 @@ function fillMostListWithoutToday(days: TabDay[]) {
     return a.summary - b.summary;
   });
 
+  if (sortedByTimeDaysWithoutToday.length == 0) return null;
   const mostActiveDayExceptToday = sortedByTimeDaysWithoutToday[0];
   const mostActiveDayObjExceptToday = fillMostDay(mostActiveDayExceptToday);
 

src/compositions/tab-list-by-days.ts

@@ -2,15 +2,27 @@ import { CurrentTabItem } from '../dto/currentTabItem';
 import { DayTabs, TabListByDays } from '../dto/tabListSummary';
 import { injectTabsRepository } from '../repository/inject-tabs-repository';
 
-export async function useTabListByDays(dateFrom: Date, dateTo: Date): Promise<TabListByDays> {
+export async function useTabListByDays(
+  dateFrom: Date,
+  dateTo: Date,
+): Promise<TabListByDays | null> {
   const repo = await injectTabsRepository();
   const unSortedTabs = repo.getTabs();
   let daysTabs: DayTabs[] = [];
 
+  if (unSortedTabs.length == 0) return null;
+
   const unSortedTabsByDays = unSortedTabs.filter(
     x => x.days.find(s => new Date(s.date) >= dateFrom && new Date(s.date) <= dateTo) != undefined,
   );
 
+  if (unSortedTabsByDays.length == 0)
+    return {
+      days: [],
+      averageTime: 0,
+      summaryTime: 0,
+    };
+
   unSortedTabsByDays.forEach(tab => {
     tab.days.forEach(day => {
       if (new Date(day.date) >= dateFrom && new Date(day.date) <= dateTo) {

src/compositions/today-tab-list-summary.ts

@@ -4,11 +4,13 @@ import { injectTabsRepository } from '../repository/inject-tabs-repository';
 import { SortingBy } from '../utils/enums';
 import { todayLocalDate } from '../utils/today';
 
-export async function useTodayTabListSummary(sortingBy: SortingBy): Promise<TabListSummary> {
+export async function useTodayTabListSummary(sortingBy: SortingBy): Promise<TabListSummary | null> {
   const repo = await injectTabsRepository();
   const unSortedTabs = repo.getTodayTabs();
   let tabs: Tab[] = [];
 
+  if (unSortedTabs.length == 0) return null;
+
   tabs = unSortedTabs.sort(function (a: Tab, b: Tab) {
     return sortingBy == SortingBy.UsageTime
       ? b.days.find(s => s.date === todayLocalDate())!.summary -

src/dto/tabListSummary.ts

@@ -9,8 +9,8 @@ export interface OverallStats extends TabListSummary {
   averageTimeByActiveDays: number;
   mostActiveDay: ActiveDay;
   mostInactiveDay: ActiveDay;
-  mostActiveDayExceptToday: ActiveDay;
-  mostInactiveDayExceptToday: ActiveDay;
+  mostActiveDayExceptToday: ActiveDay | null;
+  mostInactiveDayExceptToday: ActiveDay | null;
 }
 
 export interface ActiveDay {

src/pages/Settings.vue

@@ -173,7 +173,13 @@
 
 <script lang="ts" setup>
 import { watchEffect, onMounted, ref } from 'vue';
-import { StorageParams } from '../storage/storage-params';
+import {
+  BLOCK_DEFERRAL_DEFAULT,
+  DARK_MODE_DEFAULT,
+  INTERVAL_INACTIVITY_DEFAULT,
+  StorageParams,
+  VIEW_TIME_IN_BADGE_DEFAULT,
+} from '../storage/storage-params';
 import { injecStorage } from '../storage/inject-storage';
 import { InactivityInterval } from '../storage/storage-params';
 
@@ -185,10 +191,19 @@ const allowDeferringBlock = ref<boolean>();
 const darkMode = ref<boolean>();
 
 onMounted(async () => {
-  viewTimeInBadge.value = await settingsStorage.getValue(StorageParams.VIEW_TIME_IN_BADGE);
-  intervalInactivity.value = await settingsStorage.getValue(StorageParams.INTERVAL_INACTIVITY);
-  darkMode.value = await settingsStorage.getValue(StorageParams.DARK_MODE);
-  allowDeferringBlock.value = await settingsStorage.getValue(StorageParams.BLOCK_DEFERRAL);
+  viewTimeInBadge.value = await settingsStorage.getValue(
+    StorageParams.VIEW_TIME_IN_BADGE,
+    VIEW_TIME_IN_BADGE_DEFAULT,
+  );
+  intervalInactivity.value = await settingsStorage.getValue(
+    StorageParams.INTERVAL_INACTIVITY,
+    INTERVAL_INACTIVITY_DEFAULT,
+  );
+  darkMode.value = await settingsStorage.getValue(StorageParams.DARK_MODE, DARK_MODE_DEFAULT);
+  allowDeferringBlock.value = await settingsStorage.getValue(
+    StorageParams.BLOCK_DEFERRAL,
+    BLOCK_DEFERRAL_DEFAULT,
+  );
 });
 
 watchEffect(() => save(StorageParams.VIEW_TIME_IN_BADGE, viewTimeInBadge.value));