Fix filter tab list by days (and export)

Author: Stigmatoz

src/components/ByDaysChart.vue

@@ -23,55 +23,74 @@ import {
 } from 'chart.js';
 import { convertSummaryTimeToString } from '../utils/converter';
 import { TabListByDays } from '../dto/tabListSummary';
+import { ref, watch } from 'vue';
+import { log } from '../compositions/logger';
 
 const props = defineProps<{
   data: TabListByDays;
 }>();
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-const labelsForChart = props.data.days.map(x => x.day);
-const dataForChart = props.data.days.map(x => x.time);
-const tickStep = Math.round(dataForChart[0] / 5 / 600) * 600;
 
-const data = {
-  labels: labelsForChart,
-  datasets: [
-    {
-      backgroundColor: ['#5668e2'],
-      data: dataForChart,
-    },
-  ],
-};
+const labelsForChart = ref<string[]>();
+const dataForChart = ref<number[]>();
+const data = ref<any>();
+const options = ref<any>();
 
-const options = {
-  responsive: true,
-  maintainAspectRatio: false,
-  plugins: {
-    legend: {
-      position: 'none',
-    },
-    legendDistance: {
-      padding: 50,
-    },
-    tooltip: {
-      callbacks: {
-        label: function (context: any) {
-          return convertSummaryTimeToString(context.raw);
+watch(
+  () => props.data,
+  () => {
+    refreshChart();
+  },
+);
+
+refreshChart();
+
+function refreshChart() {
+  labelsForChart.value = props.data.days.map(x => x.day);
+  dataForChart.value = props.data.days.map(x => x.time);
+  const tickStep = Math.round(dataForChart.value[0] / 5 / 600) * 600;
+
+  data.value = {
+    labels: labelsForChart.value,
+    datasets: [
+      {
+        backgroundColor: ['#5668e2'],
+        data: dataForChart.value,
+      },
+    ],
+  };
+
+  options.value = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: 'none',
+      },
+      legendDistance: {
+        padding: 50,
+      },
+      tooltip: {
+        callbacks: {
+          label: function (context: any) {
+            return convertSummaryTimeToString(context.raw);
+          },
         },
       },
     },
-  },
-  scales: {
-    y: {
-      ticks: {
-        stepSize: tickStep,
-        callback: function (value: any, index: number, ticks: number) {
-          return convertSummaryTimeToString(value);
+    scales: {
+      y: {
+        ticks: {
+          stepSize: tickStep,
+          callback: function (value: any, index: number, ticks: number) {
+            return convertSummaryTimeToString(value);
+          },
         },
       },
     },
-  },
-};
+  };
+}
 </script>
 
 <style scoped>

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

@@ -1,6 +1,7 @@
 import { CurrentTabItem } from '../dto/currentTabItem';
 import { DayTabs, TabListByDays } from '../dto/tabListSummary';
 import { injectTabsRepository } from '../repository/inject-tabs-repository';
+import { isSameDay } from 'date-fns';
 
 export async function useTabListByDays(
   dateFrom: Date,
@@ -12,8 +13,12 @@ export async function useTabListByDays(
 
   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,
+  const isTheSameDay = isSameDay(dateFrom, dateTo);
+
+  const unSortedTabsByDays = unSortedTabs.filter(x =>
+    isTheSameDay
+      ? x.days.find(s => isSameDay(new Date(s.date), dateFrom)) != undefined
+      : x.days.find(s => new Date(s.date) >= dateFrom && new Date(s.date) <= dateTo) != undefined,
   );
 
   if (unSortedTabsByDays.length == 0)
@@ -25,7 +30,10 @@ export async function useTabListByDays(
 
   unSortedTabsByDays.forEach(tab => {
     tab.days.forEach(day => {
-      if (new Date(day.date) >= dateFrom && new Date(day.date) <= dateTo) {
+      if (
+        (new Date(day.date) >= dateFrom && new Date(day.date) <= dateTo) ||
+        (isTheSameDay && isSameDay(new Date(day.date), dateFrom))
+      ) {
         let dayTab = daysTabs.find(x => x.day == day.date);
         if (dayTab == undefined) {
           dayTab = {