Prepare for sorting by

Author: Stigmatoz

src/assets/css/main.css

@@ -36,6 +36,15 @@ body {
 .mr-10 {
   margin-right: 10px;
 }
+.mr-5 {
+  margin-right: 5px;
+}
+.pr-5{
+  padding-right: 5px;
+}
+.p-5{
+  padding: 5px;
+}
 .text-right {
   text-align: right;
 }

src/components/TabItemHeader.vue

@@ -1,7 +1,16 @@
 <template>
   <div class="header-block">
-    <p>{{ title }} ({{ countOfSites }} sites)</p>
-    <p class="time">{{ summaryTimeString }}</p>
+    <div class="time-block">
+      <p>{{ title }} ({{ countOfSites }} sites)</p>
+      <p class="time">{{ summaryTimeString }}</p>
+    </div>
+    <div class="sorted-block">
+      <span class="mr-5">Sorting by</span>
+      <select class="p-5" @change="sortingBy()">
+        <option>Usage Time</option>
+        <option>Sessions</option>
+      </select>
+    </div>
   </div>
 </template>
 
@@ -14,7 +23,7 @@ export default {
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { convertSummaryTimeToString } from '../utils/converter';
-import { TypeOfList } from '../utils/enums';
+import { SortingBy, TypeOfList } from '../utils/enums';
 
 const props = defineProps<{
   listType: TypeOfList;
@@ -23,19 +32,32 @@ const props = defineProps<{
   firstDay: Date;
 }>();
 
+const emit = defineEmits<{
+  (event: 'sortingBy', sortingBy: SortingBy): void;
+}>();
+
 const title = computed(() => {
   if (props.listType == TypeOfList.Today) return 'Today';
   if (props.listType == TypeOfList.All) return `Aggregate data since ${props.firstDay} `;
 });
 
 const summaryTimeString = computed(() => convertSummaryTimeToString(props.summaryTime));
+
+function sortingBy(value) {
+  emit('sortingBy', value);
+}
 </script>
 
 <style scoped>
 .header-block {
   background-color: var(--popup-header);
   padding: 1px 0;
   text-align: center;
+  display: flex;
+  flex-direction: row;
+}
+.time-block {
+  flex: auto;
 }
 p {
   font-size: 14px;
@@ -45,4 +67,8 @@ p {
   font-size: 16px;
   font-weight: 600;
 }
+.sorted-block {
+  margin: auto;
+  margin-right: 15px;
+}
 </style>

src/components/TabList.vue

@@ -7,6 +7,7 @@
       :summaryTime="summaryTime"
       :countOfSites="countOfSites"
       :firstDay="firstDay"
+      @sortingBy="sorting"
     />
     <TabItem v-for="(tab, i) of tabs" :key="i" :tab="tab" :summaryTime="summaryTime" />
   </div>
@@ -25,10 +26,8 @@ import TabItemHeader from '../components/TabItemHeader.vue';
 import DonutChart from '../components/DonutChart.vue';
 import { injectTabsRepository } from '../repository/inject-tabs-repository';
 import { Tab } from '../entity/tab';
-import { todayLocalDate } from '../utils/today';
 import { SortingBy, TypeOfList } from '../utils/enums';
 import { useTodayTabListSummary } from '../compositions/today-tab-list-summary';
-import { TabListSummary } from '../utils/tabListSummary';
 import { useAllTabListSummary } from '../compositions/all-tab-list-summary';
 
 const props = defineProps<{
@@ -51,8 +50,8 @@ const firstDay = computed(() => {
 async function loadList(sortingBy: SortingBy) {
   const repo = await injectTabsRepository();
   let tabSummary = null;
-  if (props.type == TypeOfList.Today) tabSummary = await useTodayTabListSummary();
-  if (props.type == TypeOfList.Today) tabSummary = await useAllTabListSummary();
+  if (props.type == TypeOfList.Today) tabSummary = await useTodayTabListSummary(sortingBy);
+  if (props.type == TypeOfList.Today) tabSummary = await useAllTabListSummary(sortingBy);
 
   if (tabSummary != null) {
     tabs.value = tabSummary.tabs;
@@ -62,11 +61,7 @@ async function loadList(sortingBy: SortingBy) {
   }
 }
 
-onMounted(async () => {
-  loadList(SortingBy.WebUsage);
-});
-
-function sortingBy(sortingBy: SortingBy) {
+function sorting(sortingBy: SortingBy) {
   switch (sortingBy) {
     case SortingBy.WebUsage:
       loadList(SortingBy.WebUsage);
@@ -76,4 +71,8 @@ function sortingBy(sortingBy: SortingBy) {
       break;
   }
 }
+
+onMounted(async () => {
+  loadList(SortingBy.WebUsage);
+});
 </script>

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

@@ -1,22 +1,26 @@
 import { Tab } from '../entity/tab';
 import { injectTabsRepository } from '../repository/inject-tabs-repository';
+import { SortingBy } from '../utils/enums';
 import { TabListSummary } from '../utils/tabListSummary';
 import { todayLocalDate } from '../utils/today';
 
-export async function useTodayTabListSummary(): Promise<TabListSummary> {
+export async function useTodayTabListSummary(sortingBy: SortingBy): Promise<TabListSummary> {
   const repo = await injectTabsRepository();
   const unSortedTabs = repo.getTodayTabs();
   let tabs: Tab[] = [];
 
   tabs = unSortedTabs.sort(function (a: Tab, b: Tab) {
-    return (
-      b.days.find(s => s.date === todayLocalDate())!.summary -
-      a.days.find(s => s.date === todayLocalDate())!.summary
-    );
+    return sortingBy == SortingBy.UsageTime
+      ? b.days.find(s => s.date === todayLocalDate())!.summary -
+          a.days.find(s => s.date === todayLocalDate())!.summary
+      : b.days.find(s => s.date === todayLocalDate())!.counter -
+          a.days.find(s => s.date === todayLocalDate())!.counter;
   });
 
   const summaryTimeList = tabs?.map(function (tab) {
-    return tab.days.find(day => day.date === todayLocalDate())!.summary;
+    return sortingBy == SortingBy.UsageTime
+      ? tab.days.find(day => day.date === todayLocalDate())!.summary
+      : tab.days.find(day => day.date === todayLocalDate())!.counter;
   });
   const siteList = tabs?.map(function (tab) {
     return tab.url;

src/utils/enums.ts

@@ -3,3 +3,8 @@ export enum TypeOfList {
   All,
   ByDays,
 }
+
+export enum SortingBy {
+  UsageTime,
+  Sessions,
+}