Fix portfolio list sorting UX and add name/category filters.
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
co-authored by
Cursor
Cursor
parent
2477936bce
commit
1e9f6481b0
@@ -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}>
|
||||
|
||||
Reference in New Issue
Block a user