From 23186473cd721a9d7d2f2dc121222e028e65c103 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 31 Jan 2021 21:13:57 +0800
Subject: [PATCH] optimize date range display name

---
 src/lib/utils.js                            | 22 ++++++++++++++++++++
 src/locales/en.js                           |  6 ++++--
 src/locales/zh_Hans.js                      |  6 ++++--
 src/views/mobile/statistics/Transaction.vue | 23 ++++++++++++++++++++-
 4 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/src/lib/utils.js b/src/lib/utils.js
index c74b2b77..44c42e49 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -222,6 +222,26 @@ function getDateRangeByDateType(dateType, firstDayOfWeek) {
     };
 }
 
+function isDateRangeMatchFullYears(minTime, maxTime) {
+    const minDateTime = parseDateFromUnixTime(minTime).set({ second: 0, millisecond: 0 });
+    const maxDateTime = parseDateFromUnixTime(maxTime).set({ second: 59, millisecond: 999 });
+
+    const firstDayOfYear = minDateTime.clone().startOf('year');
+    const lastDayOfYear = maxDateTime.clone().endOf('year');
+
+    return firstDayOfYear.unix() === minDateTime.unix() && lastDayOfYear.unix() === maxDateTime.unix();
+}
+
+function isDateRangeMatchFullMonths(minTime, maxTime) {
+    const minDateTime = parseDateFromUnixTime(minTime).set({ second: 0, millisecond: 0 });
+    const maxDateTime = parseDateFromUnixTime(maxTime).set({ second: 59, millisecond: 999 });
+
+    const firstDayOfMonth = minDateTime.clone().startOf('month');
+    const lastDayOfMonth = maxDateTime.clone().endOf('month');
+
+    return firstDayOfMonth.unix() === minDateTime.unix() && lastDayOfMonth.unix() === maxDateTime.unix();
+}
+
 function copyObjectTo(fromObject, toObject) {
     if (!isObject(fromObject)) {
         return toObject;
@@ -563,6 +583,8 @@ export default {
     getThisYearLastUnixTime,
     getShiftedDateRange,
     getDateRangeByDateType,
+    isDateRangeMatchFullYears,
+    isDateRangeMatchFullMonths,
     copyObjectTo,
     copyArrayTo,
     appendThousandsSeparator,
diff --git a/src/locales/en.js b/src/locales/en.js
index ecf3c759..89d8787f 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -18,10 +18,12 @@ export default {
             'long-without-second': 'M/D/YYYY HH:mm',
         },
         'year': {
-            'long': 'YYYY'
+            'long': 'YYYY',
+            'short': 'YYYY'
         },
         'yearMonth': {
-            'long': 'YYYY-M'
+            'long': 'YYYY-M',
+            'short': 'YYYY-M'
         },
         'monthDay': {
             'long': 'M/D',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index 8784c332..aaa2ae07 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -18,10 +18,12 @@ export default {
             'long-without-second': 'YYYY年M月D日 HH:mm',
         },
         'year': {
-            'long': 'YYYY年'
+            'long': 'YYYY年',
+            'short': 'YYYY'
         },
         'yearMonth': {
-            'long': 'YYYY年M月'
+            'long': 'YYYY年M月',
+            'short': 'YYYY-M'
         },
         'monthDay': {
             'long': 'M月D日',
diff --git a/src/views/mobile/statistics/Transaction.vue b/src/views/mobile/statistics/Transaction.vue
index c7048e69..20e1ce4f 100644
--- a/src/views/mobile/statistics/Transaction.vue
+++ b/src/views/mobile/statistics/Transaction.vue
@@ -543,11 +543,32 @@ export default {
                 }
             }
 
+            if (this.$utilities.isDateRangeMatchFullYears(query.startTime, query.endTime)) {
+                const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$t('format.year.short'));
+                const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.year.short'));
+
+                return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
+            }
+
+            if (this.$utilities.isDateRangeMatchFullMonths(query.startTime, query.endTime)) {
+                const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$t('format.yearMonth.short'));
+                const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.yearMonth.short'));
+
+                return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
+            }
+
             const startTimeYear = this.$utilities.getYear(this.$utilities.parseDateFromUnixTime(query.startTime));
             const endTimeYear = this.$utilities.getYear(this.$utilities.parseDateFromUnixTime(query.endTime));
 
             const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$t('format.date.short'));
-            const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t(startTimeYear !== endTimeYear ? 'format.date.short' : 'format.monthDay.short'));
+            const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.date.short'));
+
+            if (displayStartTime === displayEndTime) {
+                return displayStartTime;
+            } else if (startTimeYear === endTimeYear) {
+                const displayShortEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.monthDay.short'));
+                return `${displayStartTime} ~ ${displayShortEndTime}`;
+            }
 
             return `${displayStartTime} ~ ${displayEndTime}`;
         }