meshkee-app/dashboards
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix portfolio list sorting UX and add name/category filters.

Browse Source 
Newest portfolios show first with corrected move-up, category no longer mixes into the date, and website link generation can filter by tags.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-23 15:01:53 +03:30
co-authored by Cursor
parent 2477936bce
commit 1e9f6481b0
8 changed files with 324 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/business/src/pages/PortfolioListPage.tsx
+165 -16
View File
@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Briefcase, Plus } from 'lucide-react'
import { useEffect, useMemo, useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Briefcase, Plus, RotateCcw, Search } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { Breadcrumbs } from '../components/Breadcrumbs'
import { ListEmptyState } from '../components/EmptyState'
import { PageTitle } from '../components/PageTitle'
@@ -17,17 +18,47 @@ import {
listPortfolios,
updatePortfolio,
} from '../services/portfolioService'
import {
listPortfolioCategories,
mapPortfolioCategoryToUi,
} from '../services/portfolioCategoryService'
import type { FlatCategory } from '../types/category'
import type { Portfolio } from '../types/portfolio'
import { flattenCategories } from '../utils/categories'
import pageStyles from '../components/PageContent.module.css'
import filterStyles from '../components/ListFiltersPanel.module.css'
import styles from './BlogPage.module.css'
function readListQuery(searchParams: URLSearchParams) {
const name = searchParams.get('q')?.trim() ?? ''
const categoryId = searchParams.get('categoryId')?.trim() ?? ''
const pageRaw = Number(searchParams.get('page'))
const page = Number.isFinite(pageRaw) && pageRaw >= 1 ? Math.floor(pageRaw) : 1
return { name, categoryId, page }
}
function categoryFilterLabel(category: FlatCategory, isFa: boolean) {
const name = isFa
? category.nameFa || category.nameEn
: category.nameEn || category.nameFa
return category.depth > 0 ? `${'\u2014 '.repeat(category.depth)}${name}` : name
}
export function PortfolioListPage() {
const navigate = useNavigate()
const [searchParams, setSearchParams] = useSearchParams()
const { showToast } = useToast()
const t = useT()
const { locale } = useLocale()
const isFa = locale === 'fa'
const {
name: appliedName,
categoryId: appliedCategoryId,
page: currentPage,
} = readListQuery(searchParams)
const [portfolios, setPortfolios] = useState<Portfolio[]>([])
const [totalPortfolios, setTotalPortfolios] = useState(0)
const [currentPage, setCurrentPage] = useState(1)
const [isLoading, setIsLoading] = useState(true)
const [isDeleting, setIsDeleting] = useState(false)
const [movingUpId, setMovingUpId] = useState<string | null>(null)
@@ -37,21 +68,64 @@ export function PortfolioListPage() {
const [commentsTarget, setCommentsTarget] = useState<{ id: string; title: string } | null>(
null,
)
const [draftName, setDraftName] = useState(appliedName)
const [draftCategoryId, setDraftCategoryId] = useState(appliedCategoryId)
const [categoryOptions, setCategoryOptions] = useState<FlatCategory[]>([])
const totalPages = Math.max(1, Math.ceil(totalPortfolios / PORTFOLIOS_PER_PAGE))
const hasFilters = Boolean(appliedName || appliedCategoryId)
const categorySelectOptions = useMemo(
() =>
categoryOptions.map((category) => ({
id: category.id,
label: categoryFilterLabel(category, isFa),
})),
[categoryOptions, isFa],
)
useEffect(() => {
setDraftName(appliedName)
setDraftCategoryId(appliedCategoryId)
}, [appliedName, appliedCategoryId])
useEffect(() => {
const controller = new AbortController()
void loadPortfolios(currentPage, controller.signal)
return () => controller.abort()
}, [currentPage])
}, [currentPage, appliedName, appliedCategoryId])
useEffect(() => {
const controller = new AbortController()
void loadCategories(controller.signal)
return () => controller.abort()
}, [])
function writeListQuery(name: string, categoryId: string, page: number) {
const next = new URLSearchParams()
if (name) next.set('q', name)
if (categoryId) next.set('categoryId', categoryId)
if (page > 1) next.set('page', String(page))
setSearchParams(next, { replace: true })
}
async function loadCategories(signal?: AbortSignal) {
try {
const items = await listPortfolioCategories(signal)
setCategoryOptions(flattenCategories(items.map(mapPortfolioCategoryToUi)))
} catch (err) {
if (err instanceof DOMException && err.name === 'AbortError') return
}
}
async function loadPortfolios(page: number, signal?: AbortSignal) {
setIsLoading(true)
setError('')
try {
const data = await listPortfolios(page, PORTFOLIOS_PER_PAGE, signal)
const data = await listPortfolios(page, PORTFOLIOS_PER_PAGE, signal, {
...(appliedName ? { title: appliedName } : {}),
...(appliedCategoryId ? { categoryId: appliedCategoryId } : {}),
})
setPortfolios(data.items)
setTotalPortfolios(data.total)
setCommentCounts(
@@ -69,6 +143,16 @@ export function PortfolioListPage() {
}
}
function applyFilters() {
writeListQuery(draftName.trim(), draftCategoryId, 1)
}
function clearFilters() {
setDraftName('')
setDraftCategoryId('')
writeListQuery('', '', 1)
}
function handleEdit(id: string) {
navigate(`/portfolios/edit/${id}`)
}
@@ -98,11 +182,11 @@ export function PortfolioListPage() {
try {
if (index === 0) {
await updatePortfolio(current.id, { sortOrder: current.sortOrder - 1 })
await updatePortfolio(current.id, { sortOrder: current.sortOrder + 1 })
} else {
const previous = portfolios[index - 1]
if (current.sortOrder === previous.sortOrder) {
await updatePortfolio(current.id, { sortOrder: previous.sortOrder - 1 })
await updatePortfolio(current.id, { sortOrder: previous.sortOrder + 1 })
} else {
await Promise.all([
updatePortfolio(current.id, { sortOrder: previous.sortOrder }),
@@ -136,7 +220,7 @@ export function PortfolioListPage() {
const nextTotalPages = Math.max(1, Math.ceil(nextTotal / PORTFOLIOS_PER_PAGE))
const nextPage = currentPage > nextTotalPages ? nextTotalPages : currentPage
setDeleteTarget(null)
setCurrentPage(nextPage)
writeListQuery(appliedName, appliedCategoryId, nextPage)
await loadPortfolios(nextPage)
} catch (err) {
if (err instanceof ApiError) {
@@ -150,7 +234,7 @@ export function PortfolioListPage() {
}
function handlePageChange(page: number) {
setCurrentPage(page)
writeListQuery(appliedName, appliedCategoryId, page)
window.scrollTo({ top: 0, behavior: 'smooth' })
}
@@ -181,6 +265,67 @@ export function PortfolioListPage() {
</div>
</div>
<div className={filterStyles.filtersPanel}>
<div className={filterStyles.filtersTitle}>{t('portfolio.list.filters')}</div>
<form
className={filterStyles.filtersGrid}
onSubmit={(e) => {
e.preventDefault()
applyFilters()
}}
>
<div className={filterStyles.filtersInputs}>
<div className={`${filterStyles.field} ${filterStyles.fieldCol4}`}>
<input
id="filter-portfolio-name"
value={draftName}
onChange={(e) => setDraftName(e.target.value)}
placeholder={t('portfolio.list.filterNamePlaceholder')}
aria-label={t('portfolio.list.filterName')}
disabled={isLoading}
/>
</div>
<div className={`${filterStyles.field} ${filterStyles.fieldCol3}`}>
<select
id="filter-portfolio-category"
value={draftCategoryId}
onChange={(e) => setDraftCategoryId(e.target.value)}
aria-label={t('portfolio.list.filterCategory')}
disabled={isLoading}
>
<option value="">{t('portfolio.list.filterCategoryAll')}</option>
{categorySelectOptions.map((option) => (
<option key={option.id} value={option.id}>
{option.label}
</option>
))}
</select>
</div>
</div>
<div className={filterStyles.filterActions}>
<button
type="submit"
className={`${filterStyles.iconActionBtn} ${filterStyles.iconActionBtnPrimary}`}
disabled={isLoading}
aria-label={t('portfolio.list.search')}
title={t('portfolio.list.search')}
>
<Search size={18} />
</button>
<button
type="button"
className={`${filterStyles.iconActionBtn} ${filterStyles.iconActionBtnGhost}`}
onClick={clearFilters}
disabled={isLoading}
aria-label={t('portfolio.list.clearFilters')}
title={t('portfolio.list.clearFilters')}
>
<RotateCcw size={18} />
</button>
</div>
</form>
</div>
{error && (
<div className={styles.error} role="alert">
{error}
@@ -190,12 +335,16 @@ export function PortfolioListPage() {
{isLoading ? (
<p className={styles.empty}>{t('portfolio.list.loading')}</p>
) : portfolios.length === 0 ? (
<ListEmptyState
entity="portfolio"
icon={Briefcase}
actionLabel={t('portfolio.list.emptyCta')}
actionTo="/portfolios/new"
/>
hasFilters ? (
<p className={styles.empty}>{t('portfolio.list.emptyFiltered')}</p>
) : (
<ListEmptyState
entity="portfolio"
icon={Briefcase}
actionLabel={t('portfolio.list.emptyCta')}
actionTo="/portfolios/new"
/>
)
) : (
<>
<div className={pageStyles.gridCols4}>