Skip to content

Commit

Permalink
feat: improve list views
Browse files Browse the repository at this point in the history
  • Loading branch information
@malfynnction
malfynnction committed Jan 27, 2024
1 parent 9dc4143 commit e618fd6
Show file tree
Hide file tree
Showing 5 changed files with 166 additions and 97 deletions.
7 changes: 6 additions & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,12 @@ const App = () => {
>
<Route
path="budgets"
element={<BudgetSwitch selectBudget={selectBudget} />}
element={
<BudgetSwitch
selectBudget={selectBudget}
currentBudget={budget}
/>
}
/>
<Route
path="budgets/:budgetId"
Expand Down
2 changes: 1 addition & 1 deletion src/components/BudgetForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ const BudgetForm = ({ selectBudget, selectedBudget }: BudgetFormProps) => {
})
}
}}
className="btn-secondary"
className="btn-secondary-red"
>
{t('budgets.delete')}
</button>
Expand Down
109 changes: 68 additions & 41 deletions src/components/BudgetSwitch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,13 @@ import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { Translation, Budget } from '../types'
import { ChevronRightIcon } from '@heroicons/react/20/solid'
import { PencilIcon } from '@heroicons/react/24/solid'
import { PlusCircleIcon, PlusIcon } from '@heroicons/react/24/outline'
import {
ArrowsRightLeftIcon,
EyeIcon,
PlusCircleIcon,
PlusIcon,
} from '@heroicons/react/24/outline'
import connectBudgetApi from '../lib/api/budgets'
import LoadingSpinner from './LoadingSpinner'
import { safeName } from '../lib/name-helper'
Expand All @@ -13,6 +17,7 @@ import FlyoutMenu from './FlyoutMenu'

type BudgetSwitchProps = {
selectBudget: (budget?: Budget) => void
currentBudget?: Budget
}

const BudgetSwitch = (props: BudgetSwitchProps) => {
Expand Down Expand Up @@ -66,54 +71,76 @@ const BudgetSwitch = (props: BudgetSwitchProps) => {
) : (
<div className="mt-3">
{budgets.length ? (
<ul className="grid grid-cols-1 gap-5 sm:gap-6">
{budgets.map(budget => (
<li
key={budget.id}
className="card col-span-1 relative hover:bg-gray-50 dark:hover:bg-slate-700 p-4 md:hover:-translate-y-0.5 hover:shadow-md cursor-pointer"
>
<Link
to="/"
className="w-full text-center"
onClick={() => {
props.selectBudget(budget)
}}
<>
<ul className="grid grid-cols-1 gap-10 lg:gap-6 lg:grid-cols-2">
{budgets.map(budget => (
<li
key={budget.id}
className={`card p-0 col-span-1 divide-y divide-gray-200 dark:divide-gray-600 flex flex-col justify-between ${
budget.id === props.currentBudget?.id
? 'border-2 border-red-800 dark:border-red-600'
: ''
}`}
>
<div className="flex justify-center">
<h3
className={
typeof budget.name === 'undefined' ? 'italic' : ''
}
>
{safeName(budget, 'budget')}
</h3>
<div className="flex w-full items-center justify-between space-x-6 p-6">
<div className="flex-1 truncate">
<div className="flex items-center space-x-3">
<h3
className={`truncate text-sm ${
budget.name === '' ? 'italic' : ''
}`}
>
{safeName(budget, 'budget')}
</h3>
</div>
{budget.note && (
<p className="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">
{budget.note}
</p>
)}
</div>
<Link
className="flex-shrink-0"
to={`/budgets/${budget.id}`}
title={t('edit')}
className="pl-2"
>
<PencilIcon className="icon-red icon-sm" />
</Link>
</div>
{budget.note ? (
<p className="text-sm text-gray-500 dark:text-gray-400 whitespace-pre-line">
{budget.note}
</p>
) : null}
<div className="flex justify-end">
<Link
to="/transactions/new"
onClick={() => props.selectBudget(budget)}
className="text-sky-600 hover:text-sky-700 dark:text-sky-400"
>
{t('transactions.add')}
<ChevronRightIcon className="inline h-6" />
</Link>
<div className="-mt-px flex divide-x divide-gray-200 dark:divide-gray-600">
<div className="flex w-0 flex-1">
<Link
to="/"
onClick={() => {
props.selectBudget(budget)
}}
className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900 dark:text-gray-100"
>
<EyeIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
{t('open')}
</Link>
</div>
<div className="-ml-px flex w-0 flex-1">
<Link
to="/transactions/new"
onClick={() => props.selectBudget(budget)}
className="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-gray-900 dark:text-gray-100"
>
<ArrowsRightLeftIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
{t('transactions.add')}
</Link>
</div>
</div>
</Link>
</li>
))}
</ul>
</li>
))}
</ul>
</>
) : (
<>
<div>{t('budgets.emptyList')}</div>
Expand Down
139 changes: 87 additions & 52 deletions src/components/OwnAccountsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { useTranslation } from 'react-i18next'
import { Link, useSearchParams } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { Translation, Budget, Account } from '../types'
import { PencilIcon } from '@heroicons/react/24/solid'
import {
ArchiveBoxIcon,
PlusCircleIcon,
Expand All @@ -14,7 +13,12 @@ import { safeName } from '../lib/name-helper'
import LoadingSpinner from './LoadingSpinner'
import AccountListSwitch from './AccountListSwitch'
import Error from './Error'
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'
import {
ArrowsRightLeftIcon,
ChevronLeftIcon,
ChevronRightIcon,
PencilIcon,
} from '@heroicons/react/20/solid'

type Props = {
budget: Budget
Expand Down Expand Up @@ -111,59 +115,90 @@ const OwnAccountsList = ({ budget }: Props) => {
</div>
)}
{accounts.length ? (
<ul className="grid grid-cols-1 gap-5 sm:gap-6">
{accounts.map(account => (
<li
key={account.id}
className="card col-span-1 relative hover:bg-gray-50 dark:hover:bg-slate-700 p-4 hover:-translate-y-0.5 hover:shadow-md cursor-pointer"
>
<Link to={`${account.id}`} className="w-full text-center">
<div title={t('edit')} className="absolute right-4">
<PencilIcon className="icon-red" />
<>
<ul className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
{accounts.map(account => (
<li
key={account.id}
className="col-span-1 card p-0 flex flex-col justify-between divide-y divide-gray-200 dark:divide-gray-600"
>
<div className="flex w-full items-center justify-between space-x-6 p-6">
<div className="flex-1 truncate">
<div className="md:flex items-start justify-between md:space-x-3">
<div className="flex justify-between md:block">
<h3
className={`truncate text-base font-bold ${
account.name === '' ? 'italic' : ''
}`}
>
{safeName(account, 'account')}
{account.archived ? (
<ArchiveBoxIcon
className="icon-sm inline link-blue ml-2 stroke-2"
title={t('archived')}
/>
) : null}
</h3>
{account.computedData ? (
<div
className={`${
Number(account.computedData.balance) >= 0
? 'text-lime-600'
: 'text-red-600'
} md:mt-2 text-lg text-right md:text-left`}
>
<strong>
{formatMoney(
account.computedData.balance,
budget.currency,
{ signDisplay: 'auto' }
)}
</strong>
</div>
) : null}
</div>
{!account.onBudget && (
<span className="inline-flex flex-shrink-0 items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-800">
{t('accounts.offBudget')}
</span>
)}
</div>

<p className="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">
{account.note}
</p>
</div>
</div>
<h3
className={`full-centered ${
typeof account.name === 'undefined' ? 'italic' : ''
}`}
>
{safeName(account, 'account')}
{account.archived ? (
<ArchiveBoxIcon
className="icon-sm inline link-blue ml-2 stroke-2"
title={t('archived')}
/>
) : null}
</h3>
{account.onBudget ? null : (
<div className="text-gray-700 dark:text-gray-300">
{t('accounts.offBudget')}
<div className="-mt-px flex divide-x divide-gray-200 dark:divide-gray-600">
<div className="flex w-0 flex-1">
<Link
to={`/transactions?account=${account.id}`}
className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900 dark:text-gray-100"
>
<ArrowsRightLeftIcon
className="icon-sm text-gray-400"
aria-hidden="true"
/>
{t('accounts.showTransactions')}
</Link>
</div>
)}
{account.note ? (
<p className="text-sm text-gray-500 dark:text-gray-400 whitespace-pre-line">
{account.note}
</p>
) : null}
{account.computedData ? (
<div
className={`${
Number(account.computedData.balance) >= 0
? 'text-lime-600'
: 'text-red-600'
} mt-2 text-lg`}
>
<strong>
{formatMoney(
account.computedData.balance,
budget.currency
)}
</strong>
<div className="-ml-px flex w-0 flex-1">
<Link
to={`${account.id}`}
className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-800 dark:text-gray-200"
>
<PencilIcon
className="icon-sm text-gray-400"
aria-hidden="true"
/>
{t('editObject', { object: t('accounts.account') })}
</Link>
</div>
) : null}
</Link>
</li>
))}
</ul>
</div>
</li>
))}
</ul>
</>
) : (
<>
<div className="text-gray-700 dark:text-gray-300 text-center">
Expand Down
6 changes: 4 additions & 2 deletions src/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"import": "Import",
"select": "Select...",
"close": "Close",
"open": "Open",
"untitled": "Untitled",
"version": "Version",
"seeAll": "See All",
Expand Down Expand Up @@ -86,7 +87,8 @@
"initialBalance": "Initial Balance",
"initialBalanceDate": "Date of Initial Balance",
"onBudgetExplanation": "You can assign money from this account to your envelopes",
"offBudgetExplanation": "Money in this account is tracked, but can not be assigned to envelopes"
"offBudgetExplanation": "Money in this account is tracked, but can not be assigned to envelopes",
"showTransactions": "Show Transactions"
},
"transactions": {
"transactions": "Transactions",
Expand Down Expand Up @@ -117,7 +119,7 @@
"unlockBeforeEditingError": "This transaction has been reconciled and needs to be unlocked before updating it.",
"create": "Create Transaction",
"delete": "Delete Transaction",
"add": "Add transaction",
"add": "Add Transaction",
"repeat": "Repeat Transaction",
"confirmDelete": "Are you sure you want to delete this transaction?",
"amount": "Amount",
Expand Down

0 comments on commit e618fd6

Please sign in to comment.