From e8522a09af9a91a3dd8207f4adf7758a71475a16 Mon Sep 17 00:00:00 2001 From: Cioraneanu Mihai Date: Thu, 12 Dec 2024 16:18:56 +0200 Subject: [PATCH] - make transaction-form read-only for split transactions - better UI in transactions-list for split-transactions - in transactions-list show all tags and categories for split-transactions - fix app-icon height not respecting size prop - start transition from lodash array functions to Array.prototype defined ones --- front/assets/styles/theme-dark.css | 4 ++ front/assets/styles/theme.css | 13 +++++ .../list-items/transaction-list-item.vue | 50 +++++++++---------- .../transaction/transaction-amount-field.vue | 6 ++- .../transaction/transaction-split-badge.vue | 10 ++++ front/components/ui-kit/app-icon.vue | 3 +- front/constants/TablerIconConstants.js | 1 + front/global.d.ts | 3 ++ front/pages/transactions/[[id]].vue | 34 ++++++------- front/plugins/array-extension.js | 5 ++ front/plugins/language.js | 10 +--- front/plugins/register-tabler-icons.js | 4 +- 12 files changed, 85 insertions(+), 58 deletions(-) create mode 100644 front/components/transaction/transaction-split-badge.vue create mode 100644 front/global.d.ts create mode 100644 front/plugins/array-extension.js diff --git a/front/assets/styles/theme-dark.css b/front/assets/styles/theme-dark.css index 88702b1..e6613da 100644 --- a/front/assets/styles/theme-dark.css +++ b/front/assets/styles/theme-dark.css @@ -363,3 +363,7 @@ border: 1px dashed #666; } + +.van-theme-dark .split-transaction-badge { + background: #B71C1C; +} \ No newline at end of file diff --git a/front/assets/styles/theme.css b/front/assets/styles/theme.css index 6cf15bc..9774c87 100644 --- a/front/assets/styles/theme.css +++ b/front/assets/styles/theme.css @@ -998,4 +998,17 @@ img, svg { .app-card-info { border: 1px dashed #777; +} + +.split-transaction-badge { + background: #FF7043; + color: #fff; + border-radius: 8px; + padding: 2px 6px; + display: flex; + align-items: center; + justify-content: center; + font-size: 13px; + font-weight: 400; + line-height: 16px; } \ No newline at end of file diff --git a/front/components/list-items/transaction-list-item.vue b/front/components/list-items/transaction-list-item.vue index 8823443..440dc93 100644 --- a/front/components/list-items/transaction-list-item.vue +++ b/front/components/list-items/transaction-list-item.vue @@ -12,6 +12,10 @@
+
+ +
+
{{ description }}
@@ -24,9 +28,11 @@
-
- - {{ Category.getDisplayName(category) }} +
+
+ + {{ Category.getDisplayName(category) }} +
@@ -40,33 +46,16 @@
{{ Tag.getDisplayNameEllipsized(tag, 10) }}
- -
- Split payment -
- -
{{ transactionAmount }} {{ transactionCurrency }}
- - - - - - - - -
{{ dateFormatted }}
- -
@@ -89,6 +78,8 @@ import TablerIconConstants from '~/constants/TablerIconConstants' import Tag from '../../models/Tag.js' import Account from '~/models/Account.js' import TransactionListItemHeroIcon from '~/components/list-items/transaction-list-item-hero-icon.vue' +import { uniqBy } from 'lodash/array.js' +import TransactionSplitBadge from '~/components/transaction/transaction-split-badge.vue' const props = defineProps({ value: Object, @@ -118,15 +109,22 @@ const displayedAccounts = computed(() => { }) const description = computed(() => _.get(firstTransaction.value, 'description', ' - ')) -const category = computed(() => _.get(firstTransaction.value, 'category')) +// const category = computed(() => _.get(firstTransaction.value, 'category')) +const categories = computed(() => { + return transactions.value + .map((item) => item.category) + .flat() + .filter(Boolean) + .uniqBy('id') +}) const notes = computed(() => _.get(firstTransaction.value, 'notes', ' - ')) -// const tags = computed(() => { -// let list = firstTransaction.value.tags ?? [] -// return list.map(item => `${get(item, 'attributes.tag')}`) -// }) const tags = computed(() => { - return firstTransaction.value.tags ?? [] + return transactions.value + .map((item) => item.tags) + .flat() + .filter(Boolean) + .uniqBy('id') }) const isTodo = computed(() => tags.value.some((tag) => get(tag, 'attributes.is_todo'))) diff --git a/front/components/transaction/transaction-amount-field.vue b/front/components/transaction/transaction-amount-field.vue index f0ec7be..a0641e6 100644 --- a/front/components/transaction/transaction-amount-field.vue +++ b/front/components/transaction/transaction-amount-field.vue @@ -92,7 +92,7 @@ - +
@@ -146,6 +146,10 @@ const props = defineProps({ type: Boolean, default: false, }, + disabled: { + type: Boolean, + default: false + } }) const transactionInputClass = computed(() => { diff --git a/front/components/transaction/transaction-split-badge.vue b/front/components/transaction/transaction-split-badge.vue new file mode 100644 index 0000000..a7acb68 --- /dev/null +++ b/front/components/transaction/transaction-split-badge.vue @@ -0,0 +1,10 @@ + + + diff --git a/front/components/ui-kit/app-icon.vue b/front/components/ui-kit/app-icon.vue index 4e106d6..5dac02f 100644 --- a/front/components/ui-kit/app-icon.vue +++ b/front/components/ui-kit/app-icon.vue @@ -19,7 +19,7 @@ const props = defineProps({ }, }) -const style = computed(() => `width: ${props.size}px`) +const style = computed(() => `width: ${props.size}px; height: ${props.size}px`) const isColorInvertable = computed(() => { if (Icon.isTypeTabler(props.icon) || Icon.isTypeAvatar(props.icon)) { @@ -29,4 +29,3 @@ const isColorInvertable = computed(() => { }) - diff --git a/front/constants/TablerIconConstants.js b/front/constants/TablerIconConstants.js index fa62f5f..2573d19 100644 --- a/front/constants/TablerIconConstants.js +++ b/front/constants/TablerIconConstants.js @@ -65,6 +65,7 @@ export const icons = { eyeHidden: 'IconEyeX', eyeVisible: 'IconEye', + lock: 'IconLock', // ------ Icon Select ----- diff --git a/front/global.d.ts b/front/global.d.ts new file mode 100644 index 0000000..c0c765d --- /dev/null +++ b/front/global.d.ts @@ -0,0 +1,3 @@ +interface Array { + uniqBy(field): T[]; +} \ No newline at end of file diff --git a/front/pages/transactions/[[id]].vue b/front/pages/transactions/[[id]].vue index 914f733..af70655 100644 --- a/front/pages/transactions/[[id]].vue +++ b/front/pages/transactions/[[id]].vue @@ -12,13 +12,12 @@ - + - + +
+ +
- - -
+ + +
-1 day Today +1 day @@ -106,22 +101,22 @@
- +
- + Clone - + Make template
- + @@ -154,6 +149,7 @@ import tag from '~/models/Tag' import { addDays, endOfMonth, startOfMonth } from 'date-fns' import TransactionRepository from '~/repository/TransactionRepository.js' import TransactionTransformer from '~/transformers/TransactionTransformer.js' +import TransactionSplitBadge from '~/components/transaction/transaction-split-badge.vue' const refAmount = ref(null) @@ -195,7 +191,7 @@ const { amount, amountForeign, date, tags, description, notes, budget, accountSo const transactions = computed(() => _.get(item.value, 'attributes.transactions', [])) const firstTransaction = computed(() => _.head(transactions.value)) -const isSplitPayment = computed(() => transactions.value.length > 1) +const isSplitTransaction = computed(() => transactions.value.length > 1) const accountSourceAllowedTypes = computed(() => Account.getAccountTypesForTransactionTypeSource(type.value)) const accountDestinationAllowedTypes = computed(() => Account.getAccountTypesForTransactionTypeDestination(type.value)) // const accountSourceAllowedTypes = computed(() => []) diff --git a/front/plugins/array-extension.js b/front/plugins/array-extension.js new file mode 100644 index 0000000..e73cd9b --- /dev/null +++ b/front/plugins/array-extension.js @@ -0,0 +1,5 @@ +export default defineNuxtPlugin((nuxtApp) => { + Array.prototype.uniqBy = function (field) { + return [...new Map(this.map((item) => [item[field], item])).values()] + } +}) diff --git a/front/plugins/language.js b/front/plugins/language.js index 4621aed..26c5600 100644 --- a/front/plugins/language.js +++ b/front/plugins/language.js @@ -5,12 +5,4 @@ Locale.use('en-US', enUS) import '@vant/touch-emulator' -export default defineNuxtPlugin((nuxtApp) => { - // const vuetify = createVuetify({ - // ssr: true, - // components, - // directives, - // }) - // - // nuxtApp.vueApp.use(vuetify) -}) +export default defineNuxtPlugin((nuxtApp) => {}) diff --git a/front/plugins/register-tabler-icons.js b/front/plugins/register-tabler-icons.js index bc1a4f7..053ccb0 100644 --- a/front/plugins/register-tabler-icons.js +++ b/front/plugins/register-tabler-icons.js @@ -52,7 +52,8 @@ import { IconPercentage30, IconMoneybag, IconBasket, - IconCopy + IconCopy, + IconLock } from '@tabler/icons-vue' export default defineNuxtPlugin((nuxtApp) => { @@ -109,6 +110,7 @@ export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.component('IconCoin', IconCoin) nuxtApp.vueApp.component('IconBasket', IconBasket) nuxtApp.vueApp.component('IconCopy', IconCopy) + nuxtApp.vueApp.component('IconLock', IconLock) // for (let iconName in tablerIcons) { // nuxtApp.vueApp.component(iconName, tablerIcons[iconName])