Load data by days

- add datepicker

Author: Stigmatoz

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@kyvg/vue3-notification": "^2.9.1",
+    "@vuepic/vue-datepicker": "^5.3.0",
     "chart.js": "^4.3.0",
     "date-fns": "^2.30.0",
     "vue": "^3.2.47",

pnpm-lock.yaml

@@ -10,6 +10,20 @@
       <div class="no-data">No data for the selected period</div>
     </div>
     <div v-else>
+      <div class="date-block">
+        <VueDatePicker
+          range
+          :enable-time-picker="false"
+          class="date-picker"
+          v-model="selectedDate"
+          :preset-ranges="presetRanges"
+          @update:model-value="handleDate"
+        >
+          <template #yearly="{ label, range, presetDateRange }">
+            <span @click="presetDateRange(range)">{{ label }}</span>
+          </template></VueDatePicker
+        >
+      </div>
       <div class="stats-block block">
         <div class="header">Average time on selected days</div>
         <p>{{ convertSummaryTimeToString(tabsByDays.averageTime) }}</p>
@@ -48,27 +62,41 @@ import Expander from '../components/Expander.vue';
 import { TabListByDays } from '../dto/tabListSummary';
 import { useTabListByDays } from '../compositions/tab-list-by-days';
 import { convertSummaryTimeToString } from '../utils/converter';
+import { ranges, ThisWeekRange } from '../utils/date';
 
 const tabsByDays = ref<TabListByDays>();
 const isLoading = ref<boolean>();
 const noData = ref<boolean>();
+const selectedDate = ref<Date[]>();
+
+const presetRanges = ranges();
 
 const countOfDays = computed(() =>
   tabsByDays.value != undefined ? tabsByDays.value.days.length : 0,
 );
 
-async function loadList() {
-  const tabList = await useTabListByDays(new Date('06/03/2023'), new Date('06/14/2023'));
+async function loadList(dateFrom: Date, dateTo: Date) {
+  const tabList = await useTabListByDays(dateFrom, dateTo);
   if (tabList != null) {
     tabsByDays.value = tabList;
     if (tabList.days.length == 0 && tabList.summaryTime == 0) noData.value = true;
   }
   isLoading.value = false;
 }
 
+async function handleDate(modelData: Date[]) {
+  selectedDate.value = modelData;
+  const dateFrom = selectedDate.value?.[0] as Date;
+  const dateTo = selectedDate.value?.[1] as Date;
+  await loadList(dateFrom, dateTo);
+}
+
 onMounted(async () => {
   isLoading.value = true;
-  await loadList();
+  selectedDate.value = ThisWeekRange;
+  const dateFrom = selectedDate.value?.[0] as Date;
+  const dateTo = selectedDate.value?.[1] as Date;
+  await loadList(dateFrom, dateTo);
 });
 </script>
 
@@ -95,4 +123,10 @@ onMounted(async () => {
   font-size: 13px;
   color: rgb(59, 59, 59);
 }
+.date-block {
+  margin: 0 20px 0 20px;
+}
+.date-picker {
+  width: 250px;
+}
 </style>

src/components/ByDays.vue

@@ -47,7 +47,7 @@ import { SortingBy, TypeOfList } from '../utils/enums';
 import { useTodayTabListSummary } from '../compositions/today-tab-list-summary';
 import { useAllTabListSummary } from '../compositions/all-tab-list-summary';
 import { CurrentTabItem } from '../dto/currentTabItem';
-import { todayLocalDate } from '../utils/today';
+import { todayLocalDate } from '../utils/date';
 import { OverallStats } from '../dto/tabListSummary';
 
 const props = defineProps<{

src/components/TabList.vue

@@ -3,7 +3,7 @@ import { Tab, TabDay } from '../entity/tab';
 import { injectTabsRepository } from '../repository/inject-tabs-repository';
 import { SortingBy } from '../utils/enums';
 import { daysBetween } from '../utils/time';
-import { todayLocalDate } from '../utils/today';
+import { todayLocalDate } from '../utils/date';
 
 export async function useAllTabListSummary(sortingBy: SortingBy): Promise<OverallStats | null> {
   const repo = await injectTabsRepository();

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

@@ -1,7 +1,7 @@
 import { TimeInterval } from '../entity/time-interval';
 import { injecStorage } from '../storage/inject-storage';
 import { StorageDeserializeParam, StorageParams } from '../storage/storage-params';
-import { todayLocalDate } from '../utils/today';
+import { todayLocalDate } from '../utils/date';
 
 export async function closeInterval(domain: string | null): Promise<void> {
   if (domain == null) return;

src/compositions/daily-intervals.ts

@@ -1,7 +1,7 @@
 import { Restriction } from '../entity/restriction';
 import { Tab } from '../entity/tab';
 import { StorageParams } from '../storage/storage-params';
-import { todayLocalDate } from '../utils/today';
+import { todayLocalDate } from '../utils/date';
 import { Settings } from './settings';
 
 export async function isLimitExceeded(url: string, tab: Tab): Promise<boolean> {

src/compositions/limit-list.ts

@@ -2,7 +2,7 @@ import { TabListSummary } from '../dto/tabListSummary';
 import { Tab } from '../entity/tab';
 import { injectTabsRepository } from '../repository/inject-tabs-repository';
 import { SortingBy } from '../utils/enums';
-import { todayLocalDate } from '../utils/today';
+import { todayLocalDate } from '../utils/date';
 
 export async function useTodayTabListSummary(sortingBy: SortingBy): Promise<TabListSummary | null> {
   const repo = await injectTabsRepository();

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

@@ -1,4 +1,4 @@
-import { todayLocalDate } from '../utils/today';
+import { todayLocalDate } from '../utils/date';
 import { logger } from '../compositions/logger';
 
 export class Tab implements ISerializable<Tab> {

src/entity/tab.ts

@@ -1,4 +1,8 @@
 import Popup from './pages/Popup.vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
 import { createApp } from 'vue';
 
-createApp(Popup).mount('body');
+const app = createApp(Popup);
+app.component('VueDatePicker', VueDatePicker);
+app.mount('body');