素材管理（#99） (#303)
#99 #99 #99 #99 #99 #99 #99 #99 #99 #99 Co-authored-by: miteruzo <miteruzo@naver.com> Reviewed-on: #303
このコミットはPull リクエスト #303 でマージされました．
このコミットが含まれているのは:
@@ -0,0 +1,12 @@
|
||||
import { Outlet } from 'react-router-dom'
|
||||
|
||||
import MaterialSidebar from '@/components/MaterialSidebar'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
|
||||
export default (() => (
|
||||
<div className="md:flex md:flex-1 md:h-[calc(100dvh-88px)]">
|
||||
<MaterialSidebar/>
|
||||
<Outlet/>
|
||||
</div>)) satisfies FC
|
||||
@@ -0,0 +1,182 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { useParams } from 'react-router-dom'
|
||||
|
||||
import TagLink from '@/components/TagLink'
|
||||
import WikiBody from '@/components/WikiBody'
|
||||
import Label from '@/components/common/Label'
|
||||
import PageTitle from '@/components/common/PageTitle'
|
||||
import TabGroup, { Tab } from '@/components/common/TabGroup'
|
||||
import TagInput from '@/components/common/TagInput'
|
||||
import MainArea from '@/components/layout/MainArea'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { toast } from '@/components/ui/use-toast'
|
||||
import { SITE_TITLE } from '@/config'
|
||||
import { apiGet, apiPut } from '@/lib/api'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
import type { Material, Tag } from '@/types'
|
||||
|
||||
type MaterialWithTag = Material & { tag: Tag }
|
||||
|
||||
|
||||
export default (() => {
|
||||
const { id } = useParams ()
|
||||
|
||||
const [file, setFile] = useState<File | null> (null)
|
||||
const [filePreview, setFilePreview] = useState ('')
|
||||
const [loading, setLoading] = useState (false)
|
||||
const [material, setMaterial] = useState<MaterialWithTag | null> (null)
|
||||
const [sending, setSending] = useState (false)
|
||||
const [tag, setTag] = useState ('')
|
||||
const [url, setURL] = useState ('')
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const formData = new FormData
|
||||
if (tag.trim ())
|
||||
formData.append ('tag', tag)
|
||||
if (file)
|
||||
formData.append ('file', file)
|
||||
if (url.trim ())
|
||||
formData.append ('url', url)
|
||||
|
||||
try
|
||||
{
|
||||
setSending (true)
|
||||
const data = await apiPut<Material> (`/materials/${ id }`, formData)
|
||||
setMaterial (data)
|
||||
toast ({ title: '更新成功!' })
|
||||
}
|
||||
catch
|
||||
{
|
||||
toast ({ title: '更新失敗……', description: '入力を見直してください．' })
|
||||
}
|
||||
finally
|
||||
{
|
||||
setSending (false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect (() => {
|
||||
if (!(id))
|
||||
return
|
||||
|
||||
void (async () => {
|
||||
try
|
||||
{
|
||||
setLoading (true)
|
||||
const data = await apiGet<MaterialWithTag> (`/materials/${ id }`)
|
||||
setMaterial (data)
|
||||
setTag (data.tag.name)
|
||||
if (data.file && data.contentType)
|
||||
{
|
||||
setFilePreview (data.file)
|
||||
setFile (new File ([await (await fetch (data.file)).blob ()],
|
||||
data.file,
|
||||
{ type: data.contentType }))
|
||||
}
|
||||
setURL (data.url ?? '')
|
||||
}
|
||||
finally
|
||||
{
|
||||
setLoading (false)
|
||||
}
|
||||
}) ()
|
||||
}, [id])
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
{material && (
|
||||
<Helmet>
|
||||
<title>{`${ material.tag.name } 素材照会 | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>)}
|
||||
|
||||
{loading ? 'Loading...' : (material && (
|
||||
<>
|
||||
<PageTitle>
|
||||
<TagLink
|
||||
tag={material.tag}
|
||||
withWiki={false}
|
||||
withCount={false}/>
|
||||
</PageTitle>
|
||||
|
||||
{(material.file && material.contentType) && (
|
||||
(/image\/.*/.test (material.contentType) && (
|
||||
<img src={material.file} alt={material.tag.name || undefined}/>))
|
||||
|| (/video\/.*/.test (material.contentType) && (
|
||||
<video src={material.file} controls/>))
|
||||
|| (/audio\/.*/.test (material.contentType) && (
|
||||
<audio src={material.file} controls/>)))}
|
||||
|
||||
<TabGroup>
|
||||
<Tab name="Wiki">
|
||||
<WikiBody
|
||||
title={material.tag.name}
|
||||
body={material.wikiPageBody ?? undefined}/>
|
||||
</Tab>
|
||||
|
||||
<Tab name="編輯">
|
||||
<div className="max-w-wl pt-2 space-y-4">
|
||||
{/* タグ */}
|
||||
<div>
|
||||
<Label>タグ</Label>
|
||||
<TagInput value={tag} setValue={setTag}/>
|
||||
</div>
|
||||
|
||||
{/* ファイル */}
|
||||
<div>
|
||||
<Label>ファイル</Label>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*,video/*,audio/*"
|
||||
onChange={e => {
|
||||
const f = e.target.files?.[0]
|
||||
setFile (f ?? null)
|
||||
setFilePreview (f ? URL.createObjectURL (f) : '')
|
||||
}}/>
|
||||
{(file && filePreview) && (
|
||||
(/image\/.*/.test (file.type) && (
|
||||
<img
|
||||
src={filePreview}
|
||||
alt="preview"
|
||||
className="mt-2 max-h-48 rounded border"/>))
|
||||
|| (/video\/.*/.test (file.type) && (
|
||||
<video
|
||||
src={filePreview}
|
||||
controls
|
||||
className="mt-2 max-h-48 rounded border"/>))
|
||||
|| (/audio\/.*/.test (file.type) && (
|
||||
<audio
|
||||
src={filePreview}
|
||||
controls
|
||||
className="mt-2 max-h-48"/>))
|
||||
|| (
|
||||
<p className="text-red-600 dark:text-red-400">
|
||||
その形式のファイルには対応していません．
|
||||
</p>))}
|
||||
</div>
|
||||
|
||||
{/* 参考 URL */}
|
||||
<div>
|
||||
<Label>参考 URL</Label>
|
||||
<input
|
||||
type="url"
|
||||
value={url}
|
||||
onChange={e => setURL (e.target.value)}
|
||||
className="w-full border p-2 rounded"/>
|
||||
</div>
|
||||
|
||||
{/* 送信 */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
|
||||
disabled={sending}>
|
||||
更新
|
||||
</Button>
|
||||
</div>
|
||||
</Tab>
|
||||
</TabGroup>
|
||||
</>))}
|
||||
</MainArea>)
|
||||
}) satisfies FC
|
||||
@@ -0,0 +1,166 @@
|
||||
import { Fragment, useEffect, useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
|
||||
import nikumaru from '@/assets/fonts/nikumaru.otf'
|
||||
import PrefetchLink from '@/components/PrefetchLink'
|
||||
import TagLink from '@/components/TagLink'
|
||||
import PageTitle from '@/components/common/PageTitle'
|
||||
import SectionTitle from '@/components/common/SectionTitle'
|
||||
import SubsectionTitle from '@/components/common/SubsectionTitle'
|
||||
import MainArea from '@/components/layout/MainArea'
|
||||
import { SITE_TITLE } from '@/config'
|
||||
import { apiGet } from '@/lib/api'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
import type { Material, Tag } from '@/types'
|
||||
|
||||
type TagWithMaterial = Omit<Tag, 'children'> & {
|
||||
children: TagWithMaterial[]
|
||||
material: Material | null }
|
||||
|
||||
|
||||
const MaterialCard = ({ tag }: { tag: TagWithMaterial }) => {
|
||||
if (!(tag.material))
|
||||
return
|
||||
|
||||
return (
|
||||
<PrefetchLink
|
||||
to={`/materials/${ tag.material.id }`}
|
||||
className="block w-40 h-40">
|
||||
<div
|
||||
className="w-full h-full overflow-hidden rounded-xl shadow
|
||||
text-center content-center text-4xl"
|
||||
style={{ fontFamily: 'Nikumaru' }}>
|
||||
{(tag.material.contentType && /image\/.*/.test (tag.material.contentType))
|
||||
? <img src={tag.material.file || undefined}/>
|
||||
: <span>照会</span>}
|
||||
</div>
|
||||
</PrefetchLink>)
|
||||
}
|
||||
|
||||
|
||||
export default (() => {
|
||||
const [loading, setLoading] = useState (false)
|
||||
const [tag, setTag] = useState<TagWithMaterial | null> (null)
|
||||
|
||||
const location = useLocation ()
|
||||
const query = new URLSearchParams (location.search)
|
||||
const tagQuery = query.get ('tag') ?? ''
|
||||
|
||||
useEffect (() => {
|
||||
if (!(tagQuery))
|
||||
{
|
||||
setTag (null)
|
||||
return
|
||||
}
|
||||
|
||||
void (async () => {
|
||||
try
|
||||
{
|
||||
setLoading (true)
|
||||
setTag (
|
||||
await apiGet<TagWithMaterial> (
|
||||
`/tags/name/${ encodeURIComponent (tagQuery) }/materials`))
|
||||
}
|
||||
finally
|
||||
{
|
||||
setLoading (false)
|
||||
}
|
||||
}) ()
|
||||
}, [location.search])
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
<Helmet>
|
||||
<style>
|
||||
{`
|
||||
@font-face
|
||||
{
|
||||
font-family: 'Nikumaru';
|
||||
src: url(${ nikumaru }) format('opentype');
|
||||
}`}
|
||||
</style>
|
||||
<title>{`${ tag ? `${ tag.name } 素材集` : '素材集' } | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>
|
||||
|
||||
{loading ? 'Loading...' : (
|
||||
tag
|
||||
? (
|
||||
<>
|
||||
<PageTitle>
|
||||
<TagLink
|
||||
tag={tag}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={tag.material
|
||||
? `/materials/${ tag.material.id }`
|
||||
: `/materials?tag=${ encodeURIComponent (tag.name) }`}/>
|
||||
</PageTitle>
|
||||
{(!(tag.material) && tag.category !== 'meme') && (
|
||||
<div className="-mt-2">
|
||||
<PrefetchLink
|
||||
to={`/materials/new?tag=${ encodeURIComponent (tag.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={tag}/>
|
||||
|
||||
<div className="ml-2">
|
||||
{tag.children.map (c2 => (
|
||||
<Fragment key={c2.id}>
|
||||
<SectionTitle>
|
||||
<TagLink
|
||||
tag={c2}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={`/materials?tag=${ encodeURIComponent (c2.name) }`}/>
|
||||
</SectionTitle>
|
||||
{(!(c2.material) && c2.category !== 'meme') && (
|
||||
<div className="-mt-4">
|
||||
<PrefetchLink
|
||||
to={`/materials/new?tag=${ encodeURIComponent (c2.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={c2}/>
|
||||
|
||||
<div className="ml-2">
|
||||
{c2.children.map (c3 => (
|
||||
<Fragment key={c3.id}>
|
||||
<SubsectionTitle>
|
||||
<TagLink
|
||||
tag={c3}
|
||||
withWiki={false}
|
||||
withCount={false}
|
||||
to={`/materials?tag=${ encodeURIComponent (c3.name) }`}/>
|
||||
</SubsectionTitle>
|
||||
{(!(c3.material) && c3.category !== 'meme') && (
|
||||
<div className="-mt-2">
|
||||
<PrefetchLink
|
||||
to={`/materials/new?tag=${
|
||||
encodeURIComponent (c3.name) }`}>
|
||||
追加
|
||||
</PrefetchLink>
|
||||
</div>)}
|
||||
|
||||
<MaterialCard tag={c3}/>
|
||||
</Fragment>))}
|
||||
</div>
|
||||
</Fragment>))}
|
||||
</div>
|
||||
</>)
|
||||
: (
|
||||
<>
|
||||
<p>左のリストから照会したいタグを選択してください。</p>
|
||||
<p>もしくは……</p>
|
||||
<ul>
|
||||
<li><PrefetchLink to="/materials/new">素材を新規追加する</PrefetchLink></li>
|
||||
{/* <li><a href="#">すべての素材をダウンロードする</a></li> */}
|
||||
</ul>
|
||||
</>))}
|
||||
</MainArea>)
|
||||
}) satisfies FC
|
||||
@@ -0,0 +1,124 @@
|
||||
import { useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
|
||||
import Form from '@/components/common/Form'
|
||||
import Label from '@/components/common/Label'
|
||||
import PageTitle from '@/components/common/PageTitle'
|
||||
import TagInput from '@/components/common/TagInput'
|
||||
import MainArea from '@/components/layout/MainArea'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { toast } from '@/components/ui/use-toast'
|
||||
import { SITE_TITLE } from '@/config'
|
||||
import { apiPost } from '@/lib/api'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
|
||||
export default (() => {
|
||||
const location = useLocation ()
|
||||
const query = new URLSearchParams (location.search)
|
||||
const tagQuery = query.get ('tag') ?? ''
|
||||
|
||||
const navigate = useNavigate ()
|
||||
|
||||
const [file, setFile] = useState<File | null> (null)
|
||||
const [filePreview, setFilePreview] = useState ('')
|
||||
const [sending, setSending] = useState (false)
|
||||
const [tag, setTag] = useState (tagQuery)
|
||||
const [url, setURL] = useState ('')
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const formData = new FormData
|
||||
if (tag)
|
||||
formData.append ('tag', tag)
|
||||
if (file)
|
||||
formData.append ('file', file)
|
||||
if (url)
|
||||
formData.append ('url', url)
|
||||
|
||||
try
|
||||
{
|
||||
setSending (true)
|
||||
await apiPost ('/materials', formData)
|
||||
toast ({ title: '送信成功!' })
|
||||
navigate (`/materials?tag=${ encodeURIComponent (tag) }`)
|
||||
}
|
||||
catch
|
||||
{
|
||||
toast ({ title: '送信失敗……', description: '入力を見直してください．' })
|
||||
}
|
||||
finally
|
||||
{
|
||||
setSending (false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
<Helmet>
|
||||
<title>{`素材追加 | ${ SITE_TITLE }`}</title>
|
||||
</Helmet>
|
||||
|
||||
<Form>
|
||||
<PageTitle>素材追加</PageTitle>
|
||||
|
||||
{/* タグ */}
|
||||
<div>
|
||||
<Label>タグ</Label>
|
||||
<TagInput value={tag} setValue={setTag}/>
|
||||
</div>
|
||||
|
||||
{/* ファイル */}
|
||||
<div>
|
||||
<Label>ファイル</Label>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*,video/*,audio/*"
|
||||
onChange={e => {
|
||||
const f = e.target.files?.[0]
|
||||
setFile (f ?? null)
|
||||
setFilePreview (f ? URL.createObjectURL (f) : '')
|
||||
}}/>
|
||||
{(file && filePreview) && (
|
||||
(/image\/.*/.test (file.type) && (
|
||||
<img
|
||||
src={filePreview}
|
||||
alt="preview"
|
||||
className="mt-2 max-h-48 rounded border"/>))
|
||||
|| (/video\/.*/.test (file.type) && (
|
||||
<video
|
||||
src={filePreview}
|
||||
controls
|
||||
className="mt-2 max-h-48 rounded border"/>))
|
||||
|| (/audio\/.*/.test (file.type) && (
|
||||
<audio
|
||||
src={filePreview}
|
||||
controls
|
||||
className="mt-2 max-h-48"/>))
|
||||
|| (
|
||||
<p className="text-red-600 dark:text-red-400">
|
||||
その形式のファイルには対応していません．
|
||||
</p>))}
|
||||
</div>
|
||||
|
||||
{/* 参考 URL */}
|
||||
<div>
|
||||
<Label>参考 URL</Label>
|
||||
<input
|
||||
type="url"
|
||||
value={url}
|
||||
onChange={e => setURL (e.target.value)}
|
||||
className="w-full border p-2 rounded"/>
|
||||
</div>
|
||||
|
||||
{/* 送信 */}
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
|
||||
disabled={sending}>
|
||||
追加
|
||||
</Button>
|
||||
</Form>
|
||||
</MainArea>)
|
||||
}) satisfies FC
|
||||
@@ -0,0 +1,49 @@
|
||||
import { useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
|
||||
import Label from '@/components/common/Label'
|
||||
import PageTitle from '@/components/common/PageTitle'
|
||||
import TagInput from '@/components/common/TagInput'
|
||||
import MainArea from '@/components/layout/MainArea'
|
||||
import { SITE_TITLE } from '@/config'
|
||||
|
||||
import type { FC, FormEvent } from 'react'
|
||||
|
||||
|
||||
export default (() => {
|
||||
const [tagName, setTagName] = useState ('')
|
||||
const [parentTagName, setParentTagName] = useState ('')
|
||||
|
||||
const handleSearch = (e: FormEvent) => {
|
||||
e.preventDefault ()
|
||||
}
|
||||
|
||||
return (
|
||||
<MainArea>
|
||||
<Helmet>
|
||||
<title>素材集 | {SITE_TITLE}</title>
|
||||
</Helmet>
|
||||
|
||||
<div className="max-w-xl">
|
||||
<PageTitle>素材集</PageTitle>
|
||||
|
||||
<form onSubmit={handleSearch} className="space-y-2">
|
||||
{/* タグ */}
|
||||
<div>
|
||||
<Label>タグ</Label>
|
||||
<TagInput
|
||||
value={tagName}
|
||||
setValue={setTagName}/>
|
||||
</div>
|
||||
|
||||
{/* 親タグ */}
|
||||
<div>
|
||||
<Label>親タグ</Label>
|
||||
<TagInput
|
||||
value={parentTagName}
|
||||
setValue={setParentTagName}/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</MainArea>)
|
||||
}) satisfies FC
|
||||
@@ -93,7 +93,7 @@ export default (({ user }: Props) => {
|
||||
: 'bg-gray-500 hover:bg-gray-600')
|
||||
|
||||
return (
|
||||
<div className="md:flex md:flex-1">
|
||||
<div className="md:flex md:flex-1 md:h-[calc(100dvh-88px)]">
|
||||
<Helmet>
|
||||
{(post?.thumbnail || post?.thumbnailBase) && (
|
||||
<meta name="thumbnail" content={post.thumbnail || post.thumbnailBase}/>)}
|
||||
|
||||
@@ -69,7 +69,7 @@ export default (() => {
|
||||
}, [location.search])
|
||||
|
||||
return (
|
||||
<div className="md:flex md:flex-1" ref={containerRef}>
|
||||
<div className="md:flex md:flex-1 md:h-[calc(100dvh-88px)]" ref={containerRef}>
|
||||
<Helmet>
|
||||
<title>
|
||||
{tags.length
|
||||
|
||||
@@ -7,24 +7,22 @@ import { useLocation, useNavigate } from 'react-router-dom'
|
||||
import PrefetchLink from '@/components/PrefetchLink'
|
||||
import SortHeader from '@/components/SortHeader'
|
||||
import TagLink from '@/components/TagLink'
|
||||
import TagSearchBox from '@/components/TagSearchBox'
|
||||
import DateTimeField from '@/components/common/DateTimeField'
|
||||
import Label from '@/components/common/Label'
|
||||
import PageTitle from '@/components/common/PageTitle'
|
||||
import Pagination from '@/components/common/Pagination'
|
||||
import TagInput from '@/components/common/TagInput'
|
||||
import MainArea from '@/components/layout/MainArea'
|
||||
import { SITE_TITLE } from '@/config'
|
||||
import { apiGet } from '@/lib/api'
|
||||
import { fetchPosts } from '@/lib/posts'
|
||||
import { postsKeys } from '@/lib/queryKeys'
|
||||
import { dateString, originalCreatedAtString } from '@/lib/utils'
|
||||
|
||||
import type { FC, ChangeEvent, FormEvent, KeyboardEvent } from 'react'
|
||||
import type { FC, FormEvent } from 'react'
|
||||
|
||||
import type { FetchPostsOrder,
|
||||
FetchPostsOrderField,
|
||||
FetchPostsParams,
|
||||
Tag } from '@/types'
|
||||
FetchPostsParams } from '@/types'
|
||||
|
||||
|
||||
const setIf = (qs: URLSearchParams, k: string, v: string | null) => {
|
||||
@@ -57,14 +55,11 @@ export default (() => {
|
||||
const qUpdatedTo = query.get ('updated_to') ?? ''
|
||||
const order = (query.get ('order') || 'original_created_at:desc') as FetchPostsOrder
|
||||
|
||||
const [activeIndex, setActiveIndex] = useState (-1)
|
||||
const [createdFrom, setCreatedFrom] = useState<string | null> (null)
|
||||
const [createdTo, setCreatedTo] = useState<string | null> (null)
|
||||
const [matchType, setMatchType] = useState<'all' | 'any'> ('all')
|
||||
const [originalCreatedFrom, setOriginalCreatedFrom] = useState<string | null> (null)
|
||||
const [originalCreatedTo, setOriginalCreatedTo] = useState<string | null> (null)
|
||||
const [suggestions, setSuggestions] = useState<Tag[]> ([])
|
||||
const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
|
||||
const [tagsStr, setTagsStr] = useState ('')
|
||||
const [title, setTitle] = useState ('')
|
||||
const [updatedFrom, setUpdatedFrom] = useState<string | null> (null)
|
||||
@@ -103,58 +98,6 @@ export default (() => {
|
||||
document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
|
||||
}, [location.search])
|
||||
|
||||
// TODO: TagSearch からのコピペのため，共通化を考へる．
|
||||
const whenChanged = async (ev: ChangeEvent<HTMLInputElement>) => {
|
||||
setTagsStr (ev.target.value)
|
||||
|
||||
const q = ev.target.value.trim ().split (' ').at (-1)
|
||||
if (!(q))
|
||||
{
|
||||
setSuggestions ([])
|
||||
return
|
||||
}
|
||||
|
||||
const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q } })
|
||||
setSuggestions (data.filter (t => t.postCount > 0))
|
||||
if (suggestions.length > 0)
|
||||
setSuggestionsVsbl (true)
|
||||
}
|
||||
|
||||
// TODO: TagSearch からのコピペのため，共通化を考へる．
|
||||
const handleKeyDown = (ev: KeyboardEvent<HTMLInputElement>) => {
|
||||
switch (ev.key)
|
||||
{
|
||||
case 'ArrowDown':
|
||||
ev.preventDefault ()
|
||||
setActiveIndex (i => Math.min (i + 1, suggestions.length - 1))
|
||||
setSuggestionsVsbl (true)
|
||||
break
|
||||
|
||||
case 'ArrowUp':
|
||||
ev.preventDefault ()
|
||||
setActiveIndex (i => Math.max (i - 1, -1))
|
||||
setSuggestionsVsbl (true)
|
||||
break
|
||||
|
||||
case 'Enter':
|
||||
if (activeIndex < 0)
|
||||
break
|
||||
ev.preventDefault ()
|
||||
const selected = suggestions[activeIndex]
|
||||
selected && handleTagSelect (selected)
|
||||
break
|
||||
|
||||
case 'Escape':
|
||||
ev.preventDefault ()
|
||||
setSuggestionsVsbl (false)
|
||||
break
|
||||
}
|
||||
if (ev.key === 'Enter' && (!(suggestionsVsbl) || activeIndex < 0))
|
||||
{
|
||||
setSuggestionsVsbl (false)
|
||||
}
|
||||
}
|
||||
|
||||
const search = async () => {
|
||||
const qs = new URLSearchParams ()
|
||||
setIf (qs, 'tags', tagsStr)
|
||||
@@ -172,15 +115,6 @@ export default (() => {
|
||||
navigate (`${ location.pathname }?${ qs.toString () }`)
|
||||
}
|
||||
|
||||
// TODO: TagSearch からのコピペのため，共通化を考へる．
|
||||
const handleTagSelect = (tag: Tag) => {
|
||||
const parts = tagsStr.split (' ')
|
||||
parts[parts.length - 1] = tag.name
|
||||
setTagsStr (parts.join (' ') + ' ')
|
||||
setSuggestions ([])
|
||||
setActiveIndex (-1)
|
||||
}
|
||||
|
||||
const handleSearch = (e: FormEvent) => {
|
||||
e.preventDefault ()
|
||||
search ()
|
||||
@@ -223,21 +157,11 @@ export default (() => {
|
||||
</div>
|
||||
|
||||
{/* タグ */}
|
||||
<div className="relative">
|
||||
<div>
|
||||
<Label>タグ</Label>
|
||||
<input
|
||||
type="text"
|
||||
<TagInput
|
||||
value={tagsStr}
|
||||
onChange={whenChanged}
|
||||
onFocus={() => setSuggestionsVsbl (true)}
|
||||
onBlur={() => setSuggestionsVsbl (false)}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="w-full border p-2 rounded"/>
|
||||
<TagSearchBox
|
||||
suggestions={
|
||||
suggestionsVsbl && suggestions.length > 0 ? suggestions : [] as Tag[]}
|
||||
activeIndex={activeIndex}
|
||||
onSelect={handleTagSelect}/>
|
||||
setValue={setTagsStr}/>
|
||||
<fieldset className="w-full my-2">
|
||||
<label>検索区分：</label>
|
||||
<label className="mx-2">
|
||||
|
||||
新しい課題から参照
ユーザをブロックする