Header for lists

Author: Stigmatoz

src/components/TabItem.vue

@@ -87,7 +87,7 @@ const styleForProgressBar = computed(() => `width: ${percent}%`);
 }
 .tab-item .progress-bar div {
   height: 6px;
-  background-color: var(--main-color);
+  background-color: var(--progress-bar);
 }
 .flex-grow-2 {
   flex-grow: 2;

src/components/TabItemHeader.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="header-block">
+    <p>{{ title }} ({{ countOfSites }} sites)</p>
+    <p class="time">{{ summaryTimeString }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'TabItemHeader',
+};
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { convertSummaryTimeToString } from '../utils/converter';
+import { TypeOfList } from '../utils/enums';
+
+const props = defineProps<{
+  listType: TypeOfList;
+  summaryTime: number;
+  countOfSites: number;
+  firstDay: Date;
+}>();
+
+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));
+</script>
+
+<style scoped>
+.header-block {
+  background-color: var(--popup-header);
+  padding: 1px 0;
+  text-align: center;
+}
+p {
+  font-size: 14px;
+  margin: 5px;
+}
+.time {
+  font-size: 16px;
+  font-weight: 600;
+}
+</style>

src/components/TabList.vue

@@ -1,10 +1,11 @@
 <template>
-  <TabItem
-    v-for="(tab, i) of tabs"
-    :key="i"
-    :tab="tab"
+  <TabItemHeader
+    :listType="type"
     :summaryTime="summaryTime"
+    :countOfSites="countOfSites"
+    :firstDay="firstDay"
   />
+  <TabItem v-for="(tab, i) of tabs" :key="i" :tab="tab" :summaryTime="summaryTime" />
 </template>
 
 <script lang="ts">
@@ -16,9 +17,15 @@ export default {
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue';
 import TabItem from '../components/TabItem.vue';
+import TabItemHeader from '../components/TabItemHeader.vue';
 import { injectTabsRepository } from '../repository/inject-tabs-repository';
 import { Tab } from '../entity/tab';
 import { todayLocalDate } from '../utils/today';
+import { TypeOfList } from '../utils/enums';
+
+const props = defineProps<{
+  type: TypeOfList;
+}>();
 
 const tabs = ref<Tab[]>();
 const summaryTime = computed(() => {
@@ -32,6 +39,11 @@ const summaryTime = computed(() => {
     : 0;
 });
 
+const countOfSites = computed(() => tabs.value?.length);
+const firstDay = computed(() => {
+  if (props.type == TypeOfList.All) return;
+});
+
 onMounted(async () => {
   const repo = await injectTabsRepository();
   let unSortedTabs = repo.getTodayTabs();

src/utils/enums.ts

@@ -0,0 +1,5 @@
+export enum TypeOfList {
+  Today,
+  All,
+  ByDays,
+}