migrate date range selection sheet / dialog to composition API and typescript

src/views/desktop/statistics/TransactionPage.vue

@@ -287,7 +287,8 @@
                                   :min-time="query.categoricalChartStartTime"
                                   :max-time="query.categoricalChartEndTime"
                                   v-model:show="showCustomDateRangeDialog"
-                                  @dateRange:change="setCustomDateFilter" />
+                                  @dateRange:change="setCustomDateFilter"
+                                  @error="showError" />
 
     <month-range-selection-dialog :title="$t('Custom Date Range')"
                                   :min-time="query.trendChartStartYearMonth"
@@ -1042,6 +1043,9 @@ export default {
         clickTrendChartItem(item) {
             this.$router.push(this.getTransactionItemLinkUrl(item.itemId, item.dateRange));
         },
+        showError(message) {
+            this.$refs.snackbar.showError(message);
+        },
         getDisplayAmount(amount, currency, textLimit) {
             amount = this.getDisplayCurrency(amount, currency);
 

src/views/desktop/transactions/ListPage.vue

@@ -554,7 +554,8 @@
                                  :min-time="customMinDatetime"
                                  :max-time="customMaxDatetime"
                                  v-model:show="showCustomDateRangeDialog"
-                                 @dateRange:change="changeCustomDateFilter" />
+                                 @dateRange:change="changeCustomDateFilter"
+                                 @error="showError" />
     <edit-dialog ref="editDialog" type="transaction" :persistent="true" />
     <import-dialog ref="importDialog" :persistent="true" />
 
@@ -1611,6 +1612,9 @@ export default {
                 scrollToSelectedItem(menu.contentEl, 'div.v-list', 'div.v-list-item.list-item-selected');
             });
         },
+        showError(message) {
+            this.$refs.snackbar.showError(message);
+        },
         getDisplayTime(transaction) {
             return this.$locale.formatUnixTimeToShortTime(this.userStore, transaction.time, transaction.utcOffset, this.currentTimezoneOffsetMinutes);
         },

src/views/desktop/transactions/list/dialogs/ImportDialog.vue

@@ -585,7 +585,8 @@
                                  :min-time="filters.minDatetime"
                                  :max-time="filters.maxDatetime"
                                  v-model:show="showCustomDateRangeDialog"
-                                 @dateRange:change="changeCustomDateFilter" />
+                                 @dateRange:change="changeCustomDateFilter"
+                                 @error="showError" />
     <batch-replace-dialog ref="batchReplaceDialog" />
     <confirm-dialog ref="confirmDialog"/>
     <snack-bar ref="snackbar" />
@@ -1568,6 +1569,9 @@ export default {
                 }
             });
         },
+        showError(message) {
+            this.$refs.snackbar.showError(message);
+        },
         getAllUsedCategoryNames() {
             const categoryNames = {};