From 3299be7e36bdc13ae5b6a345218b89d7afeb3e42 Mon Sep 17 00:00:00 2001
From: 01111010t <60557051+01111010t@users.noreply.github.com>
Date: Mon, 10 Jul 2023 18:23:14 -0400
Subject: [PATCH] Dashboard Page: Add YTD Option

Adding the ability to select YTD (Year to Date) slicer on the Dashboard page.
---
 src/pages/Dashboard/BaseDashboardChart.vue | 2 +-
 src/pages/Dashboard/Cashflow.vue           | 2 +-
 src/pages/Dashboard/Dashboard.vue          | 2 +-
 src/pages/Dashboard/PeriodSelector.vue     | 3 ++-
 src/pages/Dashboard/ProfitAndLoss.vue      | 2 +-
 src/utils/misc.ts                          | 6 ++++++
 src/utils/types.ts                         | 2 +-
 7 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/pages/Dashboard/BaseDashboardChart.vue b/src/pages/Dashboard/BaseDashboardChart.vue
index 50cb663a..e3387b6a 100644
--- a/src/pages/Dashboard/BaseDashboardChart.vue
+++ b/src/pages/Dashboard/BaseDashboardChart.vue
@@ -11,7 +11,7 @@ export default defineComponent({
   data() {
     return {
       period: 'This Year' as PeriodKey,
-      periodOptions: ['This Year', 'This Quarter', 'This Month'] as PeriodKey[],
+      periodOptions: ['This Year', 'YTD', 'This Quarter', 'This Month'] as PeriodKey[],
     };
   },
   watch: {
diff --git a/src/pages/Dashboard/Cashflow.vue b/src/pages/Dashboard/Cashflow.vue
index 5d6a428e..935e4298 100644
--- a/src/pages/Dashboard/Cashflow.vue
+++ b/src/pages/Dashboard/Cashflow.vue
@@ -72,7 +72,7 @@ export default defineComponent({
   data: () => ({
     data: [] as { inflow: number; outflow: number; yearmonth: string }[],
     periodList: [],
-    periodOptions: ['This Year', 'This Quarter'],
+    periodOptions: ['This Year', 'YTD', 'This Quarter'],
     hasData: false,
   }),
   computed: {
diff --git a/src/pages/Dashboard/Dashboard.vue b/src/pages/Dashboard/Dashboard.vue
index a0dfc0a6..3d5bffa1 100644
--- a/src/pages/Dashboard/Dashboard.vue
+++ b/src/pages/Dashboard/Dashboard.vue
@@ -14,7 +14,7 @@
         <PeriodSelector
           class="px-3"
           :value="period"
-          :options="['This Year', 'This Quarter', 'This Month']"
+          :options="['This Year', 'YTD', 'This Quarter', 'This Month']"
           @change="(value) => (period = value)"
         />
       </div>
diff --git a/src/pages/Dashboard/PeriodSelector.vue b/src/pages/Dashboard/PeriodSelector.vue
index db9f7237..8714544e 100644
--- a/src/pages/Dashboard/PeriodSelector.vue
+++ b/src/pages/Dashboard/PeriodSelector.vue
@@ -51,7 +51,7 @@ export default defineComponent({
     value: { type: String as PropType<PeriodKey>, default: 'This Year' },
     options: {
       type: Array as PropType<PeriodKey[]>,
-      default: () => ['This Year', 'This Quarter', 'This Month'],
+      default: () => ['This Year', 'YTD', 'This Quarter', 'This Month'],
     },
   },
   emits: ['change'],
@@ -65,6 +65,7 @@ export default defineComponent({
     this.periodSelectorMap = {
       '': t`Set Period`,
       'This Year': t`This Year`,
+      'YTD': t`YTD`,
       'This Quarter': t`This Quarter`,
       'This Month': t`This Month`,
     };
diff --git a/src/pages/Dashboard/ProfitAndLoss.vue b/src/pages/Dashboard/ProfitAndLoss.vue
index 73c2a2a5..25d623b6 100644
--- a/src/pages/Dashboard/ProfitAndLoss.vue
+++ b/src/pages/Dashboard/ProfitAndLoss.vue
@@ -57,7 +57,7 @@ export default defineComponent({
   data: () => ({
     data: [] as { yearmonth: string; balance: number }[],
     hasData: false,
-    periodOptions: ['This Year', 'This Quarter'],
+    periodOptions: ['This Year', 'YTD', 'This Quarter'],
   }),
   computed: {
     chartData() {
diff --git a/src/utils/misc.ts b/src/utils/misc.ts
index 11434093..7a69b3b0 100644
--- a/src/utils/misc.ts
+++ b/src/utils/misc.ts
@@ -24,6 +24,8 @@ export function getDatesAndPeriodList(period: PeriodKey): {
 
   if (period === 'This Year') {
     fromDate = toDate.minus({ months: 12 });
+  } else if (period === 'YTD') {
+    fromDate = DateTime.now().startOf('Year');
   } else if (period === 'This Quarter') {
     fromDate = toDate.minus({ months: 3 });
   } else if (period === 'This Month') {
@@ -39,6 +41,10 @@ export function getDatesAndPeriodList(period: PeriodKey): {
   while (true) {
     const nextDate = periodList.at(0)!.minus({ months: 1 });
     if (nextDate.toMillis() < fromDate.toMillis()) {
+      if (period === 'YTD'){
+        periodList.unshift(nextDate);
+        break;
+      }
       break;
     }
 
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 9a5fce44..50267863 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -98,7 +98,7 @@ export type DropdownItem = {
 
 export type UIGroupedFields = Map<string, Map<string, Field[]>>;
 export type ExportFormat = 'csv' | 'json';
-export type PeriodKey = 'This Year' | 'This Quarter' | 'This Month';
+export type PeriodKey = 'This Year'| 'YTD' | 'This Quarter' | 'This Month';
 
 export type PrintValues = {
   print: Record<string, unknown>;