621 行
20 KiB
TypeScript
621 行
20 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
||
import { useEffect, useMemo, useState } from 'react'
|
||
import { Helmet } from 'react-helmet-async'
|
||
import { useLocation, useNavigate } from 'react-router-dom'
|
||
|
||
import nikumaru from '@/assets/fonts/nikumaru.otf'
|
||
import PrefetchLink from '@/components/PrefetchLink'
|
||
import DateTimeField from '@/components/common/DateTimeField'
|
||
import FormField from '@/components/common/FormField'
|
||
import PageTitle from '@/components/common/PageTitle'
|
||
import Pagination from '@/components/common/Pagination'
|
||
import MainArea from '@/components/layout/MainArea'
|
||
import { API_BASE_URL, SITE_TITLE } from '@/config'
|
||
import { fetchMaterials, parseMaterialFilter } from '@/lib/materials'
|
||
import { materialsKeys } from '@/lib/queryKeys'
|
||
import { dateString, inputClass } from '@/lib/utils'
|
||
|
||
import type { FC, FormEvent } from 'react'
|
||
|
||
import type { FetchMaterialsParams,
|
||
Material,
|
||
MaterialFilter,
|
||
MaterialIndexGroup,
|
||
MaterialIndexGroupBy,
|
||
MaterialIndexDirection,
|
||
MaterialIndexMediaKind,
|
||
MaterialIndexSort,
|
||
MaterialIndexTagState,
|
||
MaterialIndexView } from '@/types'
|
||
|
||
const MEDIA_KIND_LABELS: Record<Material['mediaKind'], string> = {
|
||
image: '画像',
|
||
video: '動画',
|
||
audio: '音声',
|
||
file_other: 'その他ファイル',
|
||
url_only: 'URL のみ'}
|
||
|
||
const MEDIA_FILTER_LABELS: Record<MaterialIndexMediaKind, string> = {
|
||
all: 'すべて',
|
||
image: '画像',
|
||
video: '動画',
|
||
audio: '音声',
|
||
file_other: 'その他ファイル',
|
||
url_only: 'URL のみ'}
|
||
|
||
const SORT_LABELS: Record<MaterialIndexSort, string> = {
|
||
created_at: '作成日時',
|
||
updated_at: '更新日時',
|
||
tag_name: 'タグ名',
|
||
media_kind: '種類',
|
||
file_byte_size: 'ファイルサイズ',
|
||
version_no: 'バージョン',
|
||
id: 'ID'}
|
||
|
||
|
||
const setIf = (qs: URLSearchParams, key: string, value: string | null) => {
|
||
const next = value?.trim ()
|
||
if (next)
|
||
qs.set (key, next)
|
||
}
|
||
|
||
|
||
const parseOption = <T extends string> (
|
||
value: string | null,
|
||
allowed: readonly T[],
|
||
fallback: T): T => allowed.includes (value as T) ? value as T : fallback
|
||
|
||
|
||
const fileSizeText = (bytes: number | null): string => {
|
||
if (bytes == null)
|
||
return ''
|
||
if (bytes < 1024)
|
||
return `${ bytes } B`
|
||
if (bytes < 1024 * 1024)
|
||
return `${ (bytes / 1024).toFixed (1) } KB`
|
||
return `${ (bytes / 1024 / 1024).toFixed (1) } MB`
|
||
}
|
||
|
||
|
||
const materialTitle = (material: Material): string =>
|
||
material.tag?.name ?? `素材 #${ material.id }`
|
||
|
||
|
||
const groupedTagPath = (
|
||
tagId: number,
|
||
materialFilter: MaterialFilter,
|
||
): string =>
|
||
`/materials?tag_id=${ tagId }&include_descendants=1&group_by=parent_tag`
|
||
+ `&material_filter=${ materialFilter }`
|
||
|
||
|
||
const materialNewPath = (
|
||
tagName: string,
|
||
returnTo: string,
|
||
): string =>
|
||
`/materials/new?tag=${ encodeURIComponent (tagName) }`
|
||
+ `&return_to=${ encodeURIComponent (returnTo) }`
|
||
|
||
|
||
const clearedTagSelectionPath = (
|
||
locationSearch: string,
|
||
materialFilter: MaterialFilter,
|
||
): string => {
|
||
const qs = new URLSearchParams (locationSearch)
|
||
qs.delete ('tag_id')
|
||
qs.delete ('include_descendants')
|
||
qs.delete ('group_by')
|
||
qs.delete ('page')
|
||
qs.set ('material_filter', materialFilter)
|
||
return `/materials?${ qs.toString () }`
|
||
}
|
||
|
||
|
||
const MaterialThumb: FC<{ material: Material }> = ({ material }) => (
|
||
<div
|
||
className={`flex aspect-square h-[180px] w-[180px] items-center justify-center
|
||
overflow-hidden rounded-lg border border-stone-200 bg-white text-center
|
||
text-stone-900 shadow-sm dark:border-stone-700 dark:bg-stone-900
|
||
dark:text-stone-100`}>
|
||
{material.thumbnail
|
||
? <img src={material.thumbnail} alt="" className="h-full w-full object-contain"/>
|
||
: (
|
||
<span
|
||
className="px-2 text-2xl leading-tight"
|
||
style={{ fontFamily: material.thumbnailFallbackKind === 'tag_name'
|
||
? 'Nikumaru'
|
||
: undefined }}>
|
||
{material.thumbnailFallbackText}
|
||
</span>)}
|
||
</div>)
|
||
|
||
|
||
const MaterialCard: FC<{ material: Material }> = ({ material }) => (
|
||
<article className="w-[180px] justify-self-center">
|
||
<PrefetchLink to={`/materials/${ material.id }`} className="block">
|
||
<MaterialThumb material={material}/>
|
||
<div className="mt-2 w-[180px]">
|
||
<p className="truncate text-sm font-medium text-stone-900 dark:text-stone-100">
|
||
{materialTitle (material)}
|
||
</p>
|
||
<p className="truncate text-xs text-stone-600 dark:text-stone-300">
|
||
{MEDIA_KIND_LABELS[material.mediaKind]} / {dateString (material.createdAt)}
|
||
</p>
|
||
</div>
|
||
</PrefetchLink>
|
||
</article>)
|
||
|
||
|
||
const MaterialListItem: FC<{ material: Material }> = ({ material }) => (
|
||
<article
|
||
className="rounded-lg border border-stone-200 bg-white p-3 text-stone-900
|
||
shadow-sm dark:border-stone-700 dark:bg-stone-900 dark:text-stone-100">
|
||
<div className="flex gap-3">
|
||
<MaterialThumb material={material}/>
|
||
<div className="min-w-0 flex-1 space-y-2">
|
||
<div>
|
||
<PrefetchLink
|
||
to={`/materials/${ material.id }`}
|
||
className="font-medium text-sky-700 underline underline-offset-2
|
||
dark:text-sky-300">
|
||
{materialTitle (material)}
|
||
</PrefetchLink>
|
||
</div>
|
||
<dl className="space-y-1 text-sm text-stone-600 dark:text-stone-300">
|
||
<div>
|
||
<dt className="inline">種類: </dt>
|
||
<dd className="inline">{MEDIA_KIND_LABELS[material.mediaKind]}</dd>
|
||
</div>
|
||
{material.fileByteSize != null && (
|
||
<div>
|
||
<dt className="inline">サイズ: </dt>
|
||
<dd className="inline">{fileSizeText (material.fileByteSize)}</dd>
|
||
</div>)}
|
||
{material.url && (
|
||
<div>
|
||
<dt className="inline">URL: </dt>
|
||
<dd className="inline break-all">{material.url}</dd>
|
||
</div>)}
|
||
<div>
|
||
<dt className="inline">作成: </dt>
|
||
<dd className="inline">{dateString (material.createdAt)}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
</article>)
|
||
|
||
|
||
const GroupHeading: FC<{
|
||
count: number
|
||
materialFilter: MaterialFilter
|
||
title: string
|
||
tagId: number
|
||
}> = ({ count, materialFilter, title, tagId }) => (
|
||
<div className="flex items-center gap-2 border-b border-stone-200 pb-2
|
||
dark:border-stone-700">
|
||
<PrefetchLink
|
||
to={groupedTagPath (tagId, materialFilter)}
|
||
className="font-medium text-sky-700 underline underline-offset-2
|
||
dark:text-sky-300 w-full">
|
||
{title}
|
||
</PrefetchLink>
|
||
<div className="text-right w-auto">
|
||
<span className="text-nowrap text-sm text-stone-600 dark:text-stone-300">
|
||
{count} 件
|
||
</span>
|
||
</div>
|
||
</div>)
|
||
|
||
|
||
const MaterialListPage: FC = () => {
|
||
const location = useLocation ()
|
||
const navigate = useNavigate ()
|
||
const query = useMemo (() => new URLSearchParams (location.search), [location.search])
|
||
const materialFilter = parseMaterialFilter (query.get ('material_filter'), 'present')
|
||
|
||
const page = Number (query.get ('page') ?? 1)
|
||
const limit = Number (query.get ('limit') ?? 20)
|
||
const qQuery = query.get ('q') ?? ''
|
||
const tagIdQuery = Number (query.get ('tag_id') ?? 0)
|
||
const tagId = tagIdQuery > 0 ? tagIdQuery : null
|
||
const includeDescendants = query.get ('include_descendants') === '1'
|
||
const tagState = query.get ('unclassified') === '1'
|
||
? 'untagged'
|
||
: parseOption<MaterialIndexTagState> (
|
||
query.get ('tag_state'),
|
||
['all', 'tagged', 'untagged'],
|
||
'all')
|
||
const mediaKind = parseOption<MaterialIndexMediaKind> (
|
||
query.get ('media_kind'),
|
||
['all', 'image', 'video', 'audio', 'file_other', 'url_only'],
|
||
'all')
|
||
const sort = parseOption<MaterialIndexSort> (
|
||
query.get ('sort'),
|
||
['created_at', 'updated_at', 'tag_name', 'media_kind', 'file_byte_size',
|
||
'version_no', 'id'],
|
||
'created_at')
|
||
const direction = parseOption<MaterialIndexDirection> (
|
||
query.get ('direction'),
|
||
['asc', 'desc'],
|
||
'desc')
|
||
const groupByQuery = parseOption<MaterialIndexGroupBy> (
|
||
query.get ('group_by'),
|
||
['none', 'parent_tag'],
|
||
'none')
|
||
const groupBy = tagId == null ? 'none' : groupByQuery
|
||
const view = parseOption<MaterialIndexView> (query.get ('view'), ['card', 'list'], 'card')
|
||
const createdFromQuery = query.get ('created_from') ?? ''
|
||
const createdToQuery = query.get ('created_to') ?? ''
|
||
const updatedFromQuery = query.get ('updated_from') ?? ''
|
||
const updatedToQuery = query.get ('updated_to') ?? ''
|
||
|
||
const [q, setQ] = useState ('')
|
||
const [tagStateInput, setTagStateInput] = useState<MaterialIndexTagState> ('all')
|
||
const [mediaKindInput, setMediaKindInput] = useState<MaterialIndexMediaKind> ('all')
|
||
const [groupByInput, setGroupByInput] = useState<MaterialIndexGroupBy> ('none')
|
||
const [createdFrom, setCreatedFrom] = useState<string | null> (null)
|
||
const [createdTo, setCreatedTo] = useState<string | null> (null)
|
||
const [updatedFrom, setUpdatedFrom] = useState<string | null> (null)
|
||
const [updatedTo, setUpdatedTo] = useState<string | null> (null)
|
||
|
||
const keys: FetchMaterialsParams = {
|
||
q: qQuery,
|
||
tagState,
|
||
mediaKind,
|
||
tagId,
|
||
includeDescendants,
|
||
groupBy,
|
||
createdFrom: createdFromQuery,
|
||
createdTo: createdToQuery,
|
||
updatedFrom: updatedFromQuery,
|
||
updatedTo: updatedToQuery,
|
||
sort,
|
||
direction,
|
||
view,
|
||
page,
|
||
limit}
|
||
const { data, isLoading, isError } = useQuery ({
|
||
queryKey: materialsKeys.index (keys),
|
||
queryFn: () => fetchMaterials (keys)})
|
||
const tagScope = data?.tagScope ?? null
|
||
const materials = data?.materials ?? []
|
||
const groups = data?.groups ?? []
|
||
const totalPages = data ? Math.ceil (data.count / limit) : 0
|
||
const materialsById = useMemo (
|
||
() => new Map (materials.map (material => [material.id, material])),
|
||
[materials],
|
||
)
|
||
const groupedMaterialIds = useMemo (
|
||
() => new Set (groups.flatMap (group => group.materialIds)),
|
||
[groups],
|
||
)
|
||
const ungroupedMaterials = useMemo (
|
||
() => materials.filter (material => !groupedMaterialIds.has (material.id)),
|
||
[groupedMaterialIds, materials],
|
||
)
|
||
|
||
useEffect (() => {
|
||
setQ (qQuery)
|
||
setTagStateInput (tagState)
|
||
setMediaKindInput (mediaKind)
|
||
setGroupByInput (groupBy)
|
||
setCreatedFrom (createdFromQuery)
|
||
setCreatedTo (createdToQuery)
|
||
setUpdatedFrom (updatedFromQuery)
|
||
setUpdatedTo (updatedToQuery)
|
||
}, [createdFromQuery, createdToQuery, groupBy, mediaKind, qQuery, tagState,
|
||
updatedFromQuery, updatedToQuery])
|
||
|
||
const search = (e: FormEvent) => {
|
||
e.preventDefault ()
|
||
|
||
const qs = new URLSearchParams ()
|
||
setIf (qs, 'q', q)
|
||
qs.set ('tag_state', tagStateInput)
|
||
qs.set ('media_kind', mediaKindInput)
|
||
setIf (qs, 'created_from', createdFrom)
|
||
setIf (qs, 'created_to', createdTo)
|
||
setIf (qs, 'updated_from', updatedFrom)
|
||
setIf (qs, 'updated_to', updatedTo)
|
||
qs.set ('sort', sort)
|
||
qs.set ('direction', direction)
|
||
qs.set ('group_by', tagId == null ? 'none' : groupByInput)
|
||
qs.set ('view', view)
|
||
qs.set ('page', '1')
|
||
qs.set ('limit', String (limit))
|
||
qs.set ('material_filter', materialFilter)
|
||
if (tagId != null)
|
||
qs.set ('tag_id', String (tagId))
|
||
|
||
if (includeDescendants)
|
||
qs.set ('include_descendants', '1')
|
||
|
||
navigate (`/materials?${ qs.toString () }`)
|
||
}
|
||
|
||
const updateQuery = (changes: Record<string, string>) => {
|
||
const qs = new URLSearchParams (location.search)
|
||
Object.entries (changes).forEach (([key, value]) => {
|
||
if (value === '')
|
||
qs.delete (key)
|
||
else
|
||
qs.set (key, value)
|
||
})
|
||
navigate (`/materials?${ qs.toString () }`)
|
||
}
|
||
|
||
const renderMaterialCollection = (rows: Material[]) =>
|
||
view === 'card'
|
||
? (
|
||
<div className="grid grid-cols-[repeat(auto-fill,minmax(196px,1fr))]
|
||
justify-items-center gap-4">
|
||
{rows.map (material => (
|
||
<MaterialCard key={material.id} material={material}/>))}
|
||
</div>)
|
||
: (
|
||
<div className="space-y-3">
|
||
{rows.map (material => (
|
||
<MaterialListItem key={material.id} material={material}/>))}
|
||
</div>)
|
||
|
||
const renderGroupedMaterials = (materialGroups: MaterialIndexGroup[]) => (
|
||
<div className="space-y-6">
|
||
{materialGroups.map (group => {
|
||
const groupMaterials =
|
||
group.materialIds
|
||
.map (materialId => materialsById.get (materialId))
|
||
.filter ((material): material is Material => material != null)
|
||
|
||
if (groupMaterials.length === 0)
|
||
return null
|
||
|
||
return (
|
||
<section key={group.key} className="space-y-3">
|
||
<GroupHeading
|
||
tagId={group.tag.id}
|
||
title={group.tag.name}
|
||
count={group.count}
|
||
materialFilter={materialFilter}/>
|
||
{renderMaterialCollection (groupMaterials)}
|
||
</section>)
|
||
})}
|
||
{ungroupedMaterials.length > 0 && (
|
||
<section className="space-y-3">
|
||
<div className="border-b border-stone-200 pb-2 dark:border-stone-700">
|
||
<span className="font-medium text-stone-900 dark:text-stone-100">
|
||
その他
|
||
</span>
|
||
</div>
|
||
{renderMaterialCollection (ungroupedMaterials)}
|
||
</section>)}
|
||
</div>)
|
||
|
||
return (
|
||
<MainArea>
|
||
<Helmet>
|
||
<style>
|
||
{`
|
||
@font-face
|
||
{
|
||
font-family: 'Nikumaru';
|
||
src: url(${ nikumaru }) format('opentype');
|
||
}`}
|
||
</style>
|
||
<title>{`素材管理 | ${ SITE_TITLE }`}</title>
|
||
</Helmet>
|
||
|
||
<div className="space-y-5">
|
||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||
<PageTitle className="my-auto">素材管理</PageTitle>
|
||
<div className="flex flex-wrap gap-2">
|
||
<PrefetchLink
|
||
to="/materials/new"
|
||
className="rounded-full border border-stone-300 bg-white px-4 py-2 text-sm
|
||
text-stone-900 hover:bg-stone-100 dark:border-stone-700
|
||
dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
|
||
新規素材を追加
|
||
</PrefetchLink>
|
||
<PrefetchLink
|
||
to="/materials/suppressions"
|
||
className="rounded-full border border-stone-300 bg-white px-4 py-2 text-sm
|
||
text-stone-900 hover:bg-stone-100 dark:border-stone-700
|
||
dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
|
||
同期元抑止
|
||
</PrefetchLink>
|
||
<a
|
||
href={`${ API_BASE_URL }/materials/download.zip?profile=legacy_drive`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="rounded-full border border-stone-300 bg-white px-4 py-2 text-sm
|
||
text-stone-900 hover:bg-stone-100 dark:border-stone-700
|
||
dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
|
||
ZIP をダウンロード
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{tagScope && (
|
||
<div className="flex flex-wrap items-center gap-3 rounded-lg border
|
||
border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-900
|
||
dark:border-sky-800 dark:bg-sky-950 dark:text-sky-100">
|
||
<span>
|
||
{tagScope.tag.name}
|
||
{tagScope.includeDescendants ? ' 配下の素材を表示中' : ' の素材を表示中'}
|
||
</span>
|
||
<PrefetchLink
|
||
to={clearedTagSelectionPath (location.search, materialFilter)}
|
||
className="font-medium underline underline-offset-2
|
||
text-sky-700 dark:text-sky-300">
|
||
タグ選択を解除
|
||
</PrefetchLink>
|
||
</div>)}
|
||
{(tagId != null && tagScope == null) && (
|
||
<div className="flex flex-wrap items-center gap-3 rounded-lg border
|
||
border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900
|
||
dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100">
|
||
<span>選択中タグが見つかりません．</span>
|
||
<PrefetchLink
|
||
to={clearedTagSelectionPath (location.search, materialFilter)}
|
||
className="font-medium underline underline-offset-2
|
||
text-amber-800 dark:text-amber-200">
|
||
タグ選択を解除
|
||
</PrefetchLink>
|
||
</div>)}
|
||
|
||
{tagState === 'untagged' && (
|
||
<PrefetchLink
|
||
to={`/materials?material_filter=${ materialFilter }`}
|
||
className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
|
||
素材検索トップへ戻る
|
||
</PrefetchLink>)}
|
||
|
||
<form
|
||
onSubmit={search}
|
||
className="max-w-3xl rounded-lg border border-stone-200 bg-white p-4
|
||
text-stone-900 dark:border-stone-700 dark:bg-stone-900
|
||
dark:text-stone-100">
|
||
<div className="space-y-3">
|
||
<FormField label="検索">
|
||
{({ invalid }) => (
|
||
<input
|
||
type="search"
|
||
value={q}
|
||
onChange={e => setQ (e.target.value)}
|
||
placeholder="タグ名 / URL / ファイル名"
|
||
className={inputClass (invalid)}/>)}
|
||
</FormField>
|
||
|
||
<FormField label="タグ状態">
|
||
{({ invalid }) => (
|
||
<select
|
||
value={tagStateInput}
|
||
onChange={e => setTagStateInput (
|
||
e.target.value as MaterialIndexTagState)}
|
||
className={inputClass (invalid)}>
|
||
<option value="all">すべて</option>
|
||
<option value="tagged">タグあり</option>
|
||
<option value="untagged">タグなし</option>
|
||
</select>)}
|
||
</FormField>
|
||
|
||
<FormField label="メディア">
|
||
{({ invalid }) => (
|
||
<select
|
||
value={mediaKindInput}
|
||
onChange={e => setMediaKindInput (
|
||
e.target.value as MaterialIndexMediaKind)}
|
||
className={inputClass (invalid)}>
|
||
{Object.entries (MEDIA_FILTER_LABELS).map (([value, label]) => (
|
||
<option key={value} value={value}>
|
||
{label}
|
||
</option>))}
|
||
</select>)}
|
||
</FormField>
|
||
|
||
<FormField label="作成日時">
|
||
{() => (
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<DateTimeField value={createdFrom ?? undefined} onChange={setCreatedFrom}/>
|
||
<span>〜</span>
|
||
<DateTimeField value={createdTo ?? undefined} onChange={setCreatedTo}/>
|
||
</div>)}
|
||
</FormField>
|
||
|
||
<FormField label="更新日時">
|
||
{() => (
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<DateTimeField value={updatedFrom ?? undefined} onChange={setUpdatedFrom}/>
|
||
<span>〜</span>
|
||
<DateTimeField value={updatedTo ?? undefined} onChange={setUpdatedTo}/>
|
||
</div>)}
|
||
</FormField>
|
||
</div>
|
||
|
||
<div className="mt-4 flex flex-wrap gap-3">
|
||
<button
|
||
type="submit"
|
||
className="rounded bg-sky-600 px-4 py-2 text-white hover:bg-sky-700
|
||
dark:bg-sky-500 dark:text-stone-950 dark:hover:bg-sky-400">
|
||
検索
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => updateQuery ({ view: 'card' })}
|
||
className={`rounded-full border px-4 py-2 text-sm ${
|
||
view === 'card'
|
||
? [
|
||
'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
|
||
'dark:bg-sky-950 dark:text-sky-100'].join (' ')
|
||
: [
|
||
'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
|
||
'dark:bg-stone-900 dark:text-stone-100'].join (' ') }`}>
|
||
アイコン
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => updateQuery ({ view: 'list' })}
|
||
className={`rounded-full border px-4 py-2 text-sm ${
|
||
view === 'list'
|
||
? [
|
||
'border-sky-500 bg-sky-50 text-sky-700 dark:border-sky-400',
|
||
'dark:bg-sky-950 dark:text-sky-100'].join (' ')
|
||
: [
|
||
'border-stone-300 bg-white text-stone-900 dark:border-stone-700',
|
||
'dark:bg-stone-900 dark:text-stone-100'].join (' ') }`}>
|
||
詳細
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap items-center gap-2 text-sm">
|
||
<select
|
||
value={sort}
|
||
onChange={e => updateQuery ({ sort: e.target.value, page: '1' })}
|
||
className={inputClass (false, 'w-auto')}>
|
||
{Object.entries (SORT_LABELS).map (([value, label]) => (
|
||
<option key={value} value={value}>
|
||
{label}
|
||
</option>))}
|
||
</select>
|
||
<select
|
||
value={direction}
|
||
onChange={e => updateQuery ({ direction: e.target.value, page: '1' })}
|
||
className={inputClass (false, 'w-auto')}>
|
||
<option value="desc">降順</option>
|
||
<option value="asc">昇順</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
{isLoading && <p>Loading...</p>}
|
||
{isError && (
|
||
<p className="text-red-600 dark:text-red-300">素材一覧の取得に失敗しました．</p>)}
|
||
{(!isLoading && !isError && materials.length === 0) && (
|
||
<p>
|
||
素材はありません。
|
||
{(tagScope && ['character', 'material'].includes (tagScope.tag.category)) && (
|
||
<>
|
||
<PrefetchLink
|
||
to={materialNewPath (tagScope.tag.name, location.pathname + location.search)}
|
||
className="font-medium underline underline-offset-2
|
||
text-sky-700 dark:text-sky-300">
|
||
追加してください
|
||
</PrefetchLink>。
|
||
</>)}
|
||
</p>)}
|
||
{materials.length > 0 && (
|
||
groupBy === 'parent_tag' && groups.length > 0
|
||
? renderGroupedMaterials (groups)
|
||
: renderMaterialCollection (materials))}
|
||
<Pagination page={page} totalPages={totalPages}/>
|
||
</div>
|
||
</MainArea>)
|
||
}
|
||
|
||
export default MaterialListPage
|