Skip to content

Commit

Permalink
Reorganise settings (#100)
Browse files Browse the repository at this point in the history
- Reorganise settings
  • Loading branch information
cioraneanu authored Sep 21, 2024
1 parent ba58886 commit 23e84b9
Show file tree
Hide file tree
Showing 12 changed files with 156 additions and 220 deletions.
14 changes: 14 additions & 0 deletions front/constants/RouteConstants.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,21 @@ export default {
ROUTE_SETTINGS_NEW_TRANSACTION_DEFAULTS: '/settings/user-preferences-new-transaction-defaults',
ROUTE_SETTINGS_USER_PREFERENCES_UI: '/settings/user-preferences-ui',
ROUTE_SETTINGS_USER_PREFERENCES_DASHBOARD: '/settings/user-preferences-dashboard',


ROUTE_SETTINGS_SETUP: '/settings/setup',
ROUTE_SETTINGS_UI: '/settings/ui',
ROUTE_SETTINGS_FORMATTING: '/settings/formatting',
ROUTE_SETTINGS_DASHBOARD: '/settings/dashboard',
ROUTE_SETTINGS_TRANSACTION: '/settings/transactions',
ROUTE_SETTINGS_TRANSACTION_FIELDS_ORDER: '/settings/transactions/fields',
ROUTE_SETTINGS_TRANSACTION_DEFAULT_VALUES: '/settings/transactions/defaults',
ROUTE_SETTINGS_TRANSACTION_QUICK_AMOUNTS: '/settings/transactions/quick-amounts',
ROUTE_SETTINGS_ABOUT: '/settings/about',




ROUTE_EXCHANGE_RATES: '/exchange-rates',

ROUTE_TRANSACTION_TEMPLATE_LIST: '/transaction-templates/list',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,13 @@
<app-top-toolbar />

<van-form @submit="onSave" class="">

<van-cell-group inset>
<div class="van-cell-group-title mb-0">Config:</div>
<app-field-link label="Dashboard cards order" @click="onGoToDashboardCardsOrder" />
</van-cell-group>

<van-cell-group inset>
<div class="van-cell-group-title mb-0">Config:</div>
<app-boolean label="Show accounts with 0 amount:" v-model="areEmptyAccountsVisible" />
<app-boolean label="Show decimal places:" v-model="showDecimal" />
</van-cell-group>
Expand Down Expand Up @@ -57,7 +61,7 @@ const onSave = async () => {
const toolbar = useToolbar()
toolbar.init({
title: 'Dashboard preferences',
title: 'Dashboard settings',
backRoute: RouteConstants.ROUTE_SETTINGS,
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@

<van-form @submit="onSave" class="">
<van-cell-group inset>
<app-boolean label="Dark theme:" v-model="darkTheme">
<template #icon="{ value }">
<app-icon :size="23" :stroke-width="2.0" :icon="value ? TablerIconConstants.darkTheme : TablerIconConstants.whiteTheme" />
</template>
</app-boolean>
<div class="van-cell-group-title">General:</div>

<app-select
label="Numbers formatting:"
Expand All @@ -22,17 +18,36 @@
required
:clearable="false"
/>

<app-select
label="Date format"
popupTitle="Select a date format"
v-model="dateFormat"
v-model:showDropdown="isDropdownDateFormatVisible"
:list="dateFormatList"
:columns="1"
:has-search="false"
/>

<app-select
label="First day of month"
popupTitle="Select the first day of month"
v-model="firstDayOfMonth"
v-model:showDropdown="isDropdownFirstDayVisible"
:list="firstDayOfMonthList"
:columns="4"
:has-search="false"
/>
</van-cell-group>

<van-cell-group inset>
<!-- <div class="van-cell-group-title">Date settings:</div>-->
<div class="van-cell-group-title">Casing:</div>

<app-boolean label="Force transaction description lowercase:" v-model="lowerCaseTransactionDescription" />
<app-boolean label="Force account name lowercase:" v-model="lowerCaseAccountName" />
<app-boolean label="Force category name lowercase:" v-model="lowerCaseCategoryName" />
<app-boolean label="Force tag name lowercase:" v-model="lowerCaseTagName" />
<app-boolean label="Strip accents:" v-model="stripAccents" />

</van-cell-group>

<app-button-form-save />
Expand All @@ -57,16 +72,27 @@ const dataStore = useDataStore()
const numberFormatList = [NUMBER_FORMAT.eu, NUMBER_FORMAT.international]
const isDropdownNumberFormatVisible = ref(false)
const darkTheme = ref(false)
const dateFormat = ref(null)
const dateFormatList = [DateUtils.FORMAT_ROMANIAN_DATE, DateUtils.FORMAT_ENGLISH_DATE]
const isDropdownDateFormatVisible = ref(false)
const firstDayOfMonth = ref(null)
const firstDayOfMonthList = [...Array(27).keys()].map((item) => item + 1)
const isDropdownFirstDayVisible = ref(false)
const numberFormat = ref(null)
const stripAccents = ref(false)
const lowerCaseTransactionDescription = ref(false)
const lowerCaseAccountName = ref(false)
const lowerCaseCategoryName = ref(false)
const lowerCaseTagName = ref(false)
const syncedSettings = [
{ store: profileStore, path: 'darkTheme', ref: darkTheme },
{ store: profileStore, path: 'dateFormat', ref: dateFormat },
{ store: profileStore, path: 'dashboard.firstDayOfMonth', ref: firstDayOfMonth },
{ store: profileStore, path: 'numberFormat', ref: numberFormat },
{ store: profileStore, path: 'stripAccents', ref: stripAccents },
{ store: profileStore, path: 'lowerCaseTransactionDescription', ref: lowerCaseTransactionDescription },
Expand All @@ -77,17 +103,15 @@ const syncedSettings = [
watchSettingsStore(syncedSettings)
const onSave = async () => {
saveSettingsToStore(syncedSettings)
await profileStore.writeProfile()
UIUtils.showToastSuccess('User preferences saved')
UIUtils.showToastSuccess('Formatting')
}
const toolbar = useToolbar()
toolbar.init({
title: 'UI preferences',
title: 'Formatting settings',
backRoute: RouteConstants.ROUTE_SETTINGS,
})
Expand Down
17 changes: 5 additions & 12 deletions front/pages/settings/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,11 @@
<app-top-toolbar />

<van-cell-group inset style="overflow: auto">
<app-field-link label="App config" :icon="TablerIconConstants.settings" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_APP_CONFIG)" />

<app-field-link label="UI preferences" :icon="TablerIconConstants.settingsUI" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_USER_PREFERENCES_UI)" />

<app-field-link label="Dashboard preferences" :icon="TablerIconConstants.dashboard" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_USER_PREFERENCES_DASHBOARD)" />

<app-field-link label="Date preferences" :icon="TablerIconConstants.settingsUserPreferencesDate" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_USER_PREFERENCES_DATE)" />

<app-field-link label="New transaction defaults" :icon="TablerIconConstants.settingsNewTransactionDefaults" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_NEW_TRANSACTION_DEFAULTS)" />

<app-field-link label="Transaction config" :icon="TablerIconConstants.settingsUserPreferences" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_USER_PREFERENCES_TRANSACTIONS)" />

<app-field-link label="Setup" :icon="TablerIconConstants.settings" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_SETUP)" />
<app-field-link label="User interface" :icon="TablerIconConstants.settingsUI" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_UI)" />
<app-field-link label="Formatting" :icon="TablerIconConstants.settingsUserPreferences" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_FORMATTING)" />
<app-field-link label="Dashboard" :icon="TablerIconConstants.dashboard" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_DASHBOARD)" />
<app-field-link label="Transactions" :icon="TablerIconConstants.transaction" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_TRANSACTION)" />
<app-field-link label="About" :icon="TablerIconConstants.settingsAbout" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_ABOUT)" />
</van-cell-group>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const onSave = async () => {
const toolbar = useToolbar()
toolbar.init({
title: 'App settings',
title: 'Setup',
backRoute: RouteConstants.ROUTE_SETTINGS,
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const onSave = async () => {
const toolbar = useToolbar()
toolbar.init({
title: 'New transaction defaults',
backRoute: RouteConstants.ROUTE_SETTINGS,
backRoute: RouteConstants.ROUTE_SETTINGS_TRANSACTION,
})
onMounted(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const init = () => {
const toolbar = useToolbar()
toolbar.init({
title: 'Transaction fields order',
backRoute: RouteConstants.ROUTE_SETTINGS_USER_PREFERENCES_TRANSACTIONS,
backRoute: RouteConstants.ROUTE_SETTINGS_TRANSACTION,
})
onMounted(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@

<van-form @submit="onSave" class="">
<van-cell-group inset>
<div class="van-cell-group-title mb-0">Config:</div>
<app-field-link label="Amount increment buttons" @click="onGoToQuickTransactionAmounts" />
<app-field-link label="Transaction fields order" @click="onGoToTransactionFieldsOrder" />
<!-- <div class="van-cell-group-title mb-0">Config:</div>-->
<app-field-link label="Default form values" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_TRANSACTION_DEFAULT_VALUES)" />
<app-field-link label="Amount increment buttons" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_TRANSACTION_QUICK_AMOUNTS)" />
<app-field-link label="Transaction fields order" @click="navigateTo(RouteConstants.ROUTE_SETTINGS_TRANSACTION_FIELDS_ORDER)" />
</van-cell-group>

<van-cell-group inset>
Expand All @@ -17,27 +18,6 @@
<app-boolean v-model="copyCategoryToDescription" label="When I select a Category copy it into Description" />
</van-cell-group>

<van-cell-group inset>
<div class="van-cell-group-title mb-0">List view:</div>

<app-select
popupTitle="Select what Hero Icons to show"
v-model="heroIcons"
v-model:showDropdown="isHeroIconsDropdownVisible"
:list="heroIconsList"
:is-multi-select="true"
:columns="1"
:has-search="false"
>
<template #label>
<div class="flex-center-vertical">
<div class="">Hero Icons</div>
<span class="info ml-5">(Right side card in the list)</span>
</div>
</template>
</app-select>
</van-cell-group>

<app-button-form-save />
</van-form>
</div>
Expand All @@ -55,16 +35,11 @@ import { saveSettingsToStore, watchSettingsStore } from '~/utils/SettingUtils.js
const profileStore = useProfileStore()
const heroIconsList = HERO_ICONS_LIST
const isHeroIconsDropdownVisible = ref(false)
const heroIcons = ref([])
const copyCategoryToDescription = ref(false)
const copyTagToDescription = ref(false)
const copyTagToCategory = ref(false)
const syncedSettings = [
{ store: profileStore, path: 'heroIcons', ref: heroIcons },
{ store: profileStore, path: 'copyCategoryToDescription', ref: copyCategoryToDescription },
{ store: profileStore, path: 'copyTagToDescription', ref: copyTagToDescription },
{ store: profileStore, path: 'copyTagToCategory', ref: copyTagToCategory },
Expand All @@ -78,12 +53,10 @@ const onSave = async () => {
UIUtils.showToastSuccess('User preferences saved')
}
const onGoToQuickTransactionAmounts = async () => await navigateTo(RouteConstants.ROUTE_SETTINGS_USER_PREFERENCES_QUICK_AMOUNTS)
const onGoToTransactionFieldsOrder = async () => await navigateTo(RouteConstants.ROUTE_SETTINGS_USER_PREFERENCES_TRANSACTION_FIELDS_ORDER)
const toolbar = useToolbar()
toolbar.init({
title: 'Transaction config',
title: 'Transaction settings',
backRoute: RouteConstants.ROUTE_SETTINGS,
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const init = () => {
const toolbar = useToolbar()
toolbar.init({
title: 'Quick transaction amounts',
backRoute: RouteConstants.ROUTE_SETTINGS_USER_PREFERENCES_TRANSACTIONS,
backRoute: RouteConstants.ROUTE_SETTINGS_TRANSACTION,
})
onMounted(() => {
Expand Down
85 changes: 85 additions & 0 deletions front/pages/settings/ui.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<template>
<div class="app-form">
<app-top-toolbar />

<van-form @submit="onSave" class="">
<van-cell-group inset>
<div class="van-cell-group-title mb-0">Theme:</div>

<app-boolean :label="themeText" v-model="darkTheme">
<template #icon="{ value }">
<app-icon :size="23" :stroke-width="2.0" :icon="value ? TablerIconConstants.darkTheme : TablerIconConstants.whiteTheme" />
</template>
</app-boolean>
</van-cell-group>

<van-cell-group inset>
<div class="van-cell-group-title mb-0">Transaction list:</div>

<app-select
popupTitle="Select what Hero Icons to show"
v-model="heroIcons"
v-model:showDropdown="isHeroIconsDropdownVisible"
:list="heroIconsList"
:is-multi-select="true"
:columns="1"
:has-search="false"
>
<template #label>
<div class="flex-center-vertical">
<div class="">Hero Icons</div>
<span class="info ml-5">(Right side card in the list)</span>
</div>
</template>
</app-select>
</van-cell-group>

<app-button-form-save />
</van-form>
</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useProfileStore } from '~/stores/profileStore'
import { useDataStore } from '~/stores/dataStore'
import UIUtils from '~/utils/UIUtils'
import { useToolbar } from '~/composables/useToolbar'
import RouteConstants from '~/constants/RouteConstants'
import TablerIconConstants from '~/constants/TablerIconConstants.js'
import { saveSettingsToStore, watchSettingsStore } from '~/utils/SettingUtils.js'
import { HERO_ICONS_LIST } from '~/constants/TransactionConstants.js'
const profileStore = useProfileStore()
const dataStore = useDataStore()
const themeText = computed(() => (darkTheme.value ? 'Dark' : 'Light'))
const darkTheme = ref(false)
const heroIconsList = HERO_ICONS_LIST
const isHeroIconsDropdownVisible = ref(false)
const heroIcons = ref([])
const syncedSettings = [
{ store: profileStore, path: 'darkTheme', ref: darkTheme },
{ store: profileStore, path: 'heroIcons', ref: heroIcons },
]
watchSettingsStore(syncedSettings)
const onSave = async () => {
saveSettingsToStore(syncedSettings)
await profileStore.writeProfile()
UIUtils.showToastSuccess('User preferences saved')
}
const toolbar = useToolbar()
toolbar.init({
title: 'UI settings',
backRoute: RouteConstants.ROUTE_SETTINGS,
})
onMounted(() => {
animateSettings()
})
</script>
Loading

0 comments on commit 23e84b9

Please sign in to comment.