modify style

src/views/desktop/statistics/TransactionPage.vue

@@ -64,9 +64,9 @@
                                                         <v-btn :disabled="loading || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
                                                                v-bind="props">{{ dateRangeName(query) }}</v-btn>
                                                     </template>
-                                                    <v-list>
+                                                    <v-list :selected="[queryDateType]">
                                                         <v-list-item :key="dateRange.type" :value="dateRange.type"
-                                                                     :append-icon="(isDateFilterChecked(dateRange.type) ? icons.check : null)"
+                                                                     :append-icon="(queryDateType === dateRange.type ? icons.check : null)"
                                                                      v-for="dateRange in allDateRangesArray">
                                                             <v-list-item-title
                                                                 class="cursor-pointer"
@@ -402,6 +402,15 @@ export default {
                 this.setSortingType(value);
             }
         },
+        queryDateType() {
+            if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
+                return this.query.categoricalChartDateType;
+            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis) {
+                return this.query.trendChartDateType;
+            } else {
+                return null;
+            }
+        },
         queryStartTime() {
             if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
                 return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.categoricalChartStartTime);
@@ -656,15 +665,6 @@ export default {
 
             this.reload(null);
         },
-        isDateFilterChecked(dateType) {
-            if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis && this.query.categoricalChartDateType === dateType) {
-                return true;
-            } else if (this.analysisType === statisticsConstants.allAnalysisTypes.TrendAnalysis && this.query.trendChartDateType === dateType) {
-                return true;
-            } else {
-                return false;
-            }
-        },
         setDateFilter(dateType) {
             if (this.analysisType === statisticsConstants.allAnalysisTypes.CategoricalAnalysis) {
                 if (dateType === this.allDateRanges.Custom.type) { // Custom

src/views/desktop/transactions/ListPage.vue

@@ -121,7 +121,7 @@
                                                             <v-icon :icon="icons.dropdownMenu" v-show="query.type !== 1" />
                                                         </div>
                                                     </template>
-                                                    <v-list :selected="queryAllFilterCategoryIdsArray">
+                                                    <v-list :selected="[queryAllSelectedFilterCategoryIds]">
                                                         <v-list-item key="" value="" class="text-sm" density="compact"
                                                                      :class="{ 'list-item-selected': !query.categoryIds }"
                                                                      :append-icon="(!query.categoryIds ? icons.check : null)">
@@ -265,7 +265,7 @@
                                                             <v-icon :icon="icons.dropdownMenu" />
                                                         </div>
                                                     </template>
-                                                    <v-list :selected="queryAllFilterAccountIdsArray">
+                                                    <v-list :selected="[queryAllSelectedFilterAccountIds]">
                                                         <v-list-item key="" value="" class="text-sm" density="compact"
                                                                      :class="{ 'list-item-selected': !query.accountIds }"
                                                                      :append-icon="(!query.accountIds ? icons.check : null)">
@@ -591,22 +591,22 @@ export default {
         queryAllFilterAccountIdsCount() {
             return this.transactionsStore.allFilterAccountIdsCount;
         },
-        queryAllFilterCategoryIdsArray() {
+        queryAllSelectedFilterCategoryIds() {
             if (this.queryAllFilterCategoryIdsCount === 0) {
-                return [''];
+                return '';
             } else if (this.queryAllFilterCategoryIdsCount === 1) {
-                return [this.query.categoryIds];
+                return this.query.categoryIds;
             } else { // this.queryAllFilterCategoryIdsCount > 1
-                return ['multiple'];
+                return 'multiple';
             }
         },
-        queryAllFilterAccountIdsArray() {
+        queryAllSelectedFilterAccountIds() {
             if (this.queryAllFilterAccountIdsCount === 0) {
-                return [''];
+                return '';
             } else if (this.queryAllFilterAccountIdsCount === 1) {
-                return [this.query.accountIds];
+                return this.query.accountIds;
             } else { // this.queryAllFilterAccountIdsCount > 1
-                return ['multiple'];
+                return 'multiple';
             }
         },
         queryCategoryName() {