Export to csv from settings

Author: Stigmatoz

src/compositions/toCsv.ts

@@ -1,7 +1,7 @@
 import { DayTabs } from '../dto/tabListSummary';
 import { useTabListByDays } from './tab-list-by-days';
 
-const CSV_HEADER = 'date,website,time(sec),sessions\r\n';
+const CSV_HEADER = 'Date,WebSite,Time(sec),Sessions\r\n';
 
 export async function useImportToCsvWithData(days: DayTabs[] | undefined): Promise<string> {
   return getCsv(days);

src/pages/Settings.vue

@@ -75,6 +75,27 @@
             </div>
             <p class="description">These are any actions with the mouse or keyboard</p>
           </div>
+          <div class="settings-item">
+            <label class="setting-header d-inline-block"
+              >Exporting your web activity data to CSV
+            </label>
+            <p class="description">You can export your web activity for any date range</p>
+            <div class="export-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
+              >
+              <input type="button" value="Export to CSV" @click="exportToCsv()" />
+            </div>
+          </div>
         </div>
       </div>
 
@@ -186,6 +207,9 @@ import { InactivityInterval } from '../storage/storage-params';
 import { isInBlackList } from '../compositions/black-list';
 import { isDomainEquals } from '../utils/common';
 import { extractHostname } from '../compositions/extract-hostname';
+import { ranges, ThisWeekRange } from '../utils/date';
+import { useImportToCsv } from '../compositions/toCsv';
+import { FileType, useFile } from '../compositions/loadFile';
 
 const notification = useNotification();
 
@@ -197,6 +221,10 @@ const allowDeferringBlock = ref<boolean>();
 const whiteList = ref<string[]>();
 const darkMode = ref<boolean>();
 
+const selectedDate = ref<Date[]>();
+
+const presetRanges = ranges();
+
 const newWebsiteForWhiteList = ref<string>();
 
 onMounted(async () => {
@@ -214,6 +242,7 @@ onMounted(async () => {
     BLOCK_DEFERRAL_DEFAULT,
   );
   whiteList.value = Object.values(await settingsStorage.getValue(StorageParams.BLACK_LIST, []));
+  selectedDate.value = ThisWeekRange;
 });
 
 async function save(storageParam: StorageParams, value: any) {
@@ -245,6 +274,28 @@ function deleteFromWhiteList(url: string) {
 function onChange(storageParam: StorageParams, value: any) {
   save(storageParam, value);
 }
+
+async function handleDate(modelData: Date[]) {
+  selectedDate.value = modelData;
+}
+
+async function exportToCsv() {
+  const dateFrom = selectedDate.value?.[0] as Date;
+  const dateTo = selectedDate.value?.[1] as Date;
+  if (dateFrom == undefined || dateTo == undefined) {
+    notification.notify({
+      title: 'No time period selected',
+      type: 'warn',
+    });
+  } else {
+    const csv = await useImportToCsv(dateFrom, dateTo);
+    useFile(
+      csv,
+      FileType.CSV,
+      `websites_${dateFrom.toLocaleDateString()}-${dateTo.toLocaleDateString()}.csv`,
+    );
+  }
+}
 </script>
 
 <style scoped>
@@ -262,4 +313,13 @@ function onChange(storageParam: StorageParams, value: any) {
   margin-right: 10px;
   cursor: pointer;
 }
+.export-block {
+  display: flex;
+  justify-content: start;
+}
+
+.export-block .date-picker {
+  width: 250px;
+  margin-right: 15px;
+}
 </style>

src/settings.ts

@@ -1,7 +1,10 @@
 import Settings from './pages/Settings.vue';
 import Notifications from '@kyvg/vue3-notification';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
 import { createApp } from 'vue';
 
 const app = createApp(Settings);
 app.use(Notifications);
+app.component('VueDatePicker', VueDatePicker);
 app.mount('body');