Dashboard better navigation (#125)

- show bottom prompt for deciding if you want to navigate to the form or to the filtered transactions list
cioraneanu · Oct 18, 2024 · 20e3136 · 20e3136
1 parent a42598a
commit 20e3136
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 13 deletions.
diff --git a/front/components/dashboard/dashboard-accounts/dashboard-accounts.vue b/front/components/dashboard/dashboard-accounts/dashboard-accounts.vue
@@ -19,7 +19,7 @@
     </div>
 
     <van-grid :column-num="2">
-      <van-grid-item v-for="account in visibleDashboardAccounts" :key="account.id" @click="onGoToTransactions(account)" icon="photo-o">
+      <van-grid-item v-for="account in visibleDashboardAccounts" :key="account.id" @click="onShowActionSheet(account)">
         <template #icon>
           <app-icon :icon="Account.getIcon(account) ?? TablerIconConstants.account" :size="24" />
         </template>
@@ -62,6 +62,7 @@ import Account from '~/models/Account.js'
 import RouteConstants from '~/constants/RouteConstants.js'
 import { IconCash } from '@tabler/icons-vue'
 import { getFormattedValue } from '~/utils/MathUtils.js'
+import { useActionSheet } from '~/composables/useActionSheet.js'
 
 const profileStore = useProfileStore()
 const dataStore = useDataStore()
@@ -101,10 +102,23 @@ const onToggleTotalCurrency = () => {
   dataStore.dashboardCurrency = dataStore.dashboardAccountsCurrencyList[newIndex]
 }
 
+const actionSheet = useActionSheet()
+const onShowActionSheet = (account) => {
+  actionSheet.show([
+    { name: 'Edit account', callback: () => onGoToAccount(account) },
+    { name: 'Show transactions', callback: () => onGoToTransactions(account) },
+  ])
+}
+
 const onGoToTransactions = async (account) => {
-  if (!account) {
-    return
+  if (account) {
+    await navigateTo(`${RouteConstants.ROUTE_TRANSACTION_LIST}?account_id=${account.id}`)
+  }
+}
+
+const onGoToAccount = async (account) => {
+  if (account) {
+    await navigateTo(`${RouteConstants.ROUTE_ACCOUNT_ID}/${account.id}`)
   }
-  await navigateTo(`${RouteConstants.ROUTE_TRANSACTION_LIST}?account_id=${account.id}`)
 }
 </script>
diff --git a/front/components/dashboard/dashboard-category-totals/dashboard-category-totals.vue b/front/components/dashboard/dashboard-category-totals/dashboard-category-totals.vue
@@ -3,7 +3,7 @@
     <div class="van-cell-group-title">Expenses by categories:</div>
     <div class="display-flex flex-column ml-15 mr-15">
       <table>
-        <tr v-for="bar in barsList" @click="onClick(bar)">
+        <tr v-for="bar in barsList" @click="onShowActionSheet(bar)">
           <td style="width: 1%">
             <div class="flex-center-vertical gap-1 my-1">
               <app-icon :icon="Category.getIcon(bar.category) ?? TablerIconConstants.category" :size="20" />
@@ -32,6 +32,7 @@ import Transaction from '~/models/Transaction.js'
 import TablerIconConstants from '~/constants/TablerIconConstants.js'
 import Category from '~/models/Category.js'
 import { getExcludedTransactionUrl } from '~/utils/DashboardUtils.js'
+import { useActionSheet } from '~/composables/useActionSheet.js'
 
 const dataStore = useDataStore()
 
@@ -58,17 +59,30 @@ const getBarColor = (bar) => {
   return '#F06292'
 }
 
-const onClick = async (bar) => {
+
+const actionSheet = useActionSheet()
+const onShowActionSheet = ({ category }) => {
+  actionSheet.show([
+    { name: 'Edit category', callback: () => onGoToCategory(category) },
+    { name: 'Show transactions', callback: () => onGoToTransactions(category) },
+  ])
+}
+
+const onGoToCategory = async (category) => {
+  if (category) {
+    await navigateTo(`${RouteConstants.ROUTE_CATEGORY_ID}/${category.id}`)
+  }
+}
+const onGoToTransactions = async (category) => {
   const startDate = DateUtils.dateToString(dataStore.dashboardDateStart)
   const endDate = DateUtils.dateToString(dataStore.dashboardDateEnd)
-  let categoryId = get(bar, 'category.id')
   let excludedUrl = getExcludedTransactionUrl()
 
-  if (!categoryId) {
+  if (!category) {
     await navigateTo(`${RouteConstants.ROUTE_TRANSACTION_LIST}?without_category=true&date_start=${startDate}&date_end=${endDate}&type=${Transaction.types.expense.code}${excludedUrl}`)
     return
   }
 
-  await navigateTo(`${RouteConstants.ROUTE_TRANSACTION_LIST}?category_id=${categoryId}&date_start=${startDate}&date_end=${endDate}&type=${Transaction.types.expense.code}${excludedUrl}`)
+  await navigateTo(`${RouteConstants.ROUTE_TRANSACTION_LIST}?category_id=${category.id}&date_start=${startDate}&date_end=${endDate}&type=${Transaction.types.expense.code}${excludedUrl}`)
 }
 </script>
diff --git a/front/components/dashboard/dashboard-tag-totals/dashboard-tag-totals.vue b/front/components/dashboard/dashboard-tag-totals/dashboard-tag-totals.vue
@@ -3,7 +3,7 @@
     <div class="van-cell-group-title">Expenses by tags:</div>
     <div class="display-flex flex-column ml-15 mr-15">
       <table>
-        <tr v-for="bar in barsList" @click="onClick(bar)">
+        <tr v-for="bar in barsList" @click="onShowActionSheet(bar)">
           <td style="width: 1%">
             <div class="flex-center-vertical gap-1 my-1">
               <app-icon :icon="Tag.getIcon(bar.tag) ?? TablerIconConstants.tag" :size="20" />
@@ -32,6 +32,7 @@ import Transaction from '~/models/Transaction.js'
 import Tag from '~/models/Tag.js'
 import TablerIconConstants from '~/constants/TablerIconConstants.js'
 import { getExcludedTransactionUrl } from '~/utils/DashboardUtils.js'
+import { useActionSheet } from '~/composables/useActionSheet.js'
 
 const dataStore = useDataStore()
 
@@ -55,17 +56,30 @@ const barsList = computed(() => {
   return bars.sort((a, b) => b.percent - a.percent).slice(0, 15)
 })
 
-const onClick = async ({tag_id, tag}) => {
+const actionSheet = useActionSheet()
+const onShowActionSheet = ({ tag }) => {
+  actionSheet.show([
+    { name: 'Edit tag', callback: () => onGoToTag(tag) },
+    { name: 'Show transactions', callback: () => onGoToTransactions(tag) },
+  ])
+}
+
+const onGoToTag = async (tag) => {
+  if (tag) {
+    await navigateTo(`${RouteConstants.ROUTE_TAG_ID}/${tag.id}`)
+  }
+}
+
+const onGoToTransactions = async (tag) => {
   const startDate = DateUtils.dateToString(dataStore.dashboardDateStart)
   const endDate = DateUtils.dateToString(dataStore.dashboardDateEnd)
   let excludedUrl = getExcludedTransactionUrl()
 
-
   if (!tag) {
     await navigateTo(`${RouteConstants.ROUTE_TRANSACTION_LIST}?without_tag=true&date_start=${startDate}&date_end=${endDate}&type=${Transaction.types.expense.code}${excludedUrl}`)
     return
   }
 
-  await navigateTo(`${RouteConstants.ROUTE_TRANSACTION_LIST}?tag_id=${tag_id}&date_start=${startDate}&date_end=${endDate}&type=${Transaction.types.expense.code}${excludedUrl}`)
+  await navigateTo(`${RouteConstants.ROUTE_TRANSACTION_LIST}?tag_id=${tag.id}&date_start=${startDate}&date_end=${endDate}&type=${Transaction.types.expense.code}${excludedUrl}`)
 }
 </script>
diff --git a/front/components/ui-kit/app-action-sheet.vue b/front/components/ui-kit/app-action-sheet.vue
@@ -0,0 +1,27 @@
+<template>
+  <van-action-sheet v-model:show="show" :actions="actions" :close-on-click-overlay="true" :close-on-click-action="true" title="Select an option">
+<!--    <template #description>-->
+<!--      &lt;!&ndash;      TODO: Find solution. Sadly using this component with h() render function doesnt work for app-icon because of dynamic component usage.... &ndash;&gt;-->
+<!--      <app-icon :icon="TablerIconConstants.account" :size="20" />-->
+<!--      Debug-->
+<!--    </template>-->
+    <template #action="{ action, index }">
+      <div class="flex-center">
+        <div>{{ action.name }}</div>
+      </div>
+    </template>
+  </van-action-sheet>
+</template>
+
+<script setup>
+import TablerIconConstants from '~/constants/TablerIconConstants.js'
+import AppIcon from '~/components/ui-kit/app-icon.vue'
+
+const show = defineModel('show')
+
+const props = defineProps({
+  actions: {},
+})
+</script>
+
+<style></style>
diff --git a/front/composables/useActionSheet.js b/front/composables/useActionSheet.js
@@ -0,0 +1,50 @@
+import { ref, h, render } from 'vue'
+// import { ActionSheet } from 'vant'
+import AppActionSheet from '~/components/ui-kit/app-action-sheet.vue'
+import 'vant/lib/action-sheet/index.css'
+
+export function useActionSheet() {
+  const isVisible = ref(false)
+  const actions = ref([])
+  let container = null
+  let actionSheet = null
+
+  const show = (newActions) => {
+    actions.value = newActions
+
+    if (!actionSheet) {
+      initContainer()
+      renderActionSheet()
+    }
+
+    isVisible.value = true
+  }
+
+  const initContainer = () => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  }
+
+  const renderActionSheet = () => {
+    actionSheet = h(AppActionSheet, {
+      show: isVisible.value,
+      'onUpdate:show': (newValue) => {
+        isVisible.value = newValue
+      },
+      cancelText: 'Cancel',
+      actions: actions.value,
+    }, {
+      action: ({ action, index }) => h('div', `${action.name}`)
+    })
+
+    render(actionSheet, container)
+  }
+
+  watch(isVisible, (newValue) => {
+    renderActionSheet()
+  })
+
+  return {
+    show,
+  }
+}
diff --git a/front/pages/extras.vue b/front/pages/extras.vue
@@ -20,6 +20,7 @@
       <app-field-link label="Exchange rates" :icon="TablerIconConstants.exchangeRates" @click="navigateTo(RouteConstants.ROUTE_EXCHANGE_RATES)" />
       <app-field-link label="Currencies" :icon="TablerIconConstants.currency" @click="onGoToCurrenciesList" />
     </van-cell-group>
+
   </div>
 </template>
 
@@ -29,6 +30,7 @@ import RouteConstants from '~/constants/RouteConstants'
 import { useToolbar } from '~/composables/useToolbar'
 import TablerIconConstants from '~/constants/TablerIconConstants'
 import { onMounted } from 'vue'
+import { useActionSheet } from '~/composables/useActionSheet.js'
 
 const onNavigateToCalendar = async () => await navigateTo(RouteConstants.ROUTE_CALENDAR)
 const onNavigateToTransactionTemplate = async () => await navigateTo(RouteConstants.ROUTE_TRANSACTION_TEMPLATE_LIST)
@@ -40,6 +42,7 @@ const onGoToTransactionTemplatesList = async () => await navigateTo(RouteConstan
 
 const onGoToBudgetsList = async () => await navigateTo(RouteConstants.ROUTE_BUDGET_LIST)
 
+
 const toolbar = useToolbar()
 toolbar.init({ title: 'Extra' })