#306

2026-06-26 00:21:33 +09:00
@@ -14,6 +14,7 @@ import { apiPost, isApiError } from '@/lib/api'
 import DeerjikistDetailPage from '@/pages/deerjikists/DeerjikistDetailPage'
 import MaterialBasePage from '@/pages/materials/MaterialBasePage'
 import MaterialDetailPage from '@/pages/materials/MaterialDetailPage'
+import MaterialHistoryPage from '@/pages/materials/MaterialHistoryPage'
 import MaterialListPage from '@/pages/materials/MaterialListPage'
 import MaterialNewPage from '@/pages/materials/MaterialNewPage'
 import MaterialSyncSuppressionsPage from '@/pages/materials/MaterialSyncSuppressionsPage'
@@ -69,6 +70,7 @@ const RouteTransitionWrapper = ({ user, setUser }: {
 	  <Route path="/theatres/:id" element={<TheatreDetailPage user={user}/>}/>
 	  <Route path="/materials" element={<MaterialBasePage/>}>
 	    <Route index element={<MaterialListPage/>}/>
+	    <Route path="changes" element={<MaterialHistoryPage/>}/>
 	    <Route path="new" element={<MaterialNewPage/>}/>
 	    <Route path="suppressions" element={<MaterialSyncSuppressionsPage/>}/>
 	    <Route path=":id" element ={<MaterialDetailPage/>}/>
@@ -7,6 +7,7 @@ import {

 import type {
    Material,
+    MaterialVersion,
    FetchMaterialsParams,
    MaterialFilter,
    MaterialSyncSuppression,
@@ -28,6 +29,11 @@ export type MaterialSyncSuppressionResponse = {
    suppressions: MaterialSyncSuppression[]
 }

+export type MaterialChangesResponse = {
+    versions: MaterialVersion[]
+    count:    number
+}
+
 const MATERIAL_FILTERS: MaterialFilter[] = ['present', 'missing', 'any']


@@ -71,6 +77,22 @@ export const fetchMaterial = async (id: string): Promise<Material | null> => {
 }


+export const fetchMaterialChanges = async (
+    { materialId, tag, eventType, page, limit }: {
+	materialId?: string
+	tag?:        string
+	eventType?:  string
+	page:        number
+	limit:       number
+    }): Promise<MaterialChangesResponse> =>
+    await apiGet ('/materials/versions', { params: {
+	...(materialId && { material_id: materialId }),
+	...(tag && { tag }),
+	...(eventType && { event_type: eventType }),
+	page,
+	limit} })
+
+
 export const fetchMaterialTagTree = async (
    { parentId, materialFilter }: FetchMaterialTreeParams): Promise<MaterialSidebarTag[]> =>
    await apiGet ('/tags/with-depth', { params: {
@@ -34,6 +34,13 @@ export const tagsKeys = {
 export const materialsKeys = {
    root:         ['materials'] as const,
    index:        (p: FetchMaterialsParams) => ['materials', 'index', p] as const,
+    changes:      (p: {
+	materialId?: string
+	tag?:        string
+	eventType?:  string
+	page:        number
+	limit:       number
+    }) => ['materials', 'changes', p] as const,
    byTagName:     (name: string, materialFilter: MaterialFilter) =>
 		      ['materials', 'tag', name, materialFilter] as const,
    show:         (id: string) => ['materials', id] as const,
@@ -8,6 +8,7 @@ import WikiBody from '@/components/WikiBody'
 import FieldError from '@/components/common/FieldError'
 import FormField from '@/components/common/FormField'
 import PageTitle from '@/components/common/PageTitle'
+import PrefetchLink from '@/components/PrefetchLink'
 import TabGroup, { Tab } from '@/components/common/TabGroup'
 import TagInput from '@/components/common/TagInput'
 import MainArea from '@/components/layout/MainArea'
@@ -118,6 +119,12 @@ const MaterialDetailPage: FC = () => {
 		 : materialTitle}
 	      </PageTitle>

+	      <PrefetchLink
+		  to={`/materials/changes?material_id=${ material.id }`}
+		  className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
+		この素材の履歴
+	      </PrefetchLink>
+
 	      {(material.file && material.contentType) && (
 		  (/image\/.*/.test (material.contentType) && (
 		      <img src={material.file} alt={material.tag?.name || undefined}/>))
@@ -0,0 +1,213 @@
+import { useQuery } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import PrefetchLink from '@/components/PrefetchLink'
+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 { SITE_TITLE } from '@/config'
+import { fetchMaterialChanges } from '@/lib/materials'
+import { materialsKeys } from '@/lib/queryKeys'
+import { dateString, inputClass } from '@/lib/utils'
+
+import type { FC, FormEvent } from 'react'
+
+
+const MaterialHistoryPage: FC = () => {
+  const location = useLocation ()
+  const navigate = useNavigate ()
+  const query = new URLSearchParams (location.search)
+
+  const materialId = query.get ('material_id') ?? ''
+  const tag = query.get ('tag') ?? ''
+  const eventType = query.get ('event_type') ?? ''
+  const page = Number (query.get ('page') ?? 1)
+  const limit = Number (query.get ('limit') ?? 20)
+
+  const [materialIdInput, setMaterialIdInput] = useState (materialId)
+  const [tagInput, setTagInput] = useState (tag)
+  const [eventTypeInput, setEventTypeInput] = useState (eventType)
+
+  useEffect (() => {
+    setMaterialIdInput (materialId)
+    setTagInput (tag)
+    setEventTypeInput (eventType)
+  }, [eventType, materialId, tag])
+
+  const { data, isLoading, isError } = useQuery ({
+      queryKey: materialsKeys.changes ({
+	  ...(materialId && { materialId }),
+	  ...(tag && { tag }),
+	  ...(eventType && { eventType }),
+	  page,
+	  limit }),
+      queryFn: () => fetchMaterialChanges ({
+	  ...(materialId && { materialId }),
+	  ...(tag && { tag }),
+	  ...(eventType && { eventType }),
+	  page,
+	  limit }) })
+
+  const versions = data?.versions ?? []
+  const totalPages = data ? Math.ceil (data.count / limit) : 0
+
+  useEffect (() => {
+    document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
+  }, [location.search])
+
+  const handleSearch = (event: FormEvent) => {
+    event.preventDefault ()
+
+    const qs = new URLSearchParams ()
+    if (materialIdInput.trim ())
+      qs.set ('material_id', materialIdInput.trim ())
+    if (tagInput.trim ())
+      qs.set ('tag', tagInput.trim ())
+    if (eventTypeInput.trim ())
+      qs.set ('event_type', eventTypeInput.trim ())
+    qs.set ('page', '1')
+    qs.set ('limit', String (limit))
+    navigate (`/materials/changes?${ qs.toString () }`)
+  }
+
+  return (
+      <MainArea>
+	<Helmet>
+	  <title>{`素材履歴 | ${ SITE_TITLE }`}</title>
+	</Helmet>
+
+	<div className="space-y-5">
+	  <div className="flex flex-wrap items-center justify-between gap-3">
+	    <PageTitle>素材履歴</PageTitle>
+	    <PrefetchLink
+		to="/materials"
+		className="text-sm text-sky-700 underline underline-offset-2 dark:text-sky-300">
+	      素材一覧へ戻る
+	    </PrefetchLink>
+	  </div>
+
+	  <form
+	      onSubmit={handleSearch}
+	      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="素材 ID">
+		{({ invalid }) => (
+		    <input
+			type="text"
+			value={materialIdInput}
+			onChange={e => setMaterialIdInput (e.target.value)}
+			className={inputClass (invalid)}/>)}
+	      </FormField>
+
+	      <FormField label="タグ名">
+		{({ invalid }) => (
+		    <input
+			type="text"
+			value={tagInput}
+			onChange={e => setTagInput (e.target.value)}
+			className={inputClass (invalid)}/>)}
+	      </FormField>
+
+	      <FormField label="イベント">
+		{({ invalid }) => (
+		    <select
+			value={eventTypeInput}
+			onChange={e => setEventTypeInput (e.target.value)}
+			className={inputClass (invalid)}>
+		      <option value="">すべて</option>
+		      <option value="create">create</option>
+		      <option value="update">update</option>
+		      <option value="discard">discard</option>
+		      <option value="restore">restore</option>
+		    </select>)}
+	      </FormField>
+	    </div>
+
+	    <button
+		type="submit"
+		className="mt-4 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">
+	      絞り込む
+	    </button>
+	  </form>
+
+	  {isLoading
+	   ? 'Loading...'
+	   : isError
+	   ? (
+	      <p className="text-red-600 dark:text-red-300">
+		素材履歴の取得に失敗しました．
+	      </p>)
+	   : (
+	      <>
+		<div className="overflow-x-auto">
+		  <table className="w-full min-w-[1200px] table-fixed border-collapse">
+		    <colgroup>
+		      <col className="w-48"/>
+		      <col className="w-32"/>
+		      <col className="w-28"/>
+		      <col className="w-24"/>
+		      <col className="w-64"/>
+		      <col className="w-64"/>
+		      <col className="w-80"/>
+		      <col className="w-80"/>
+		      <col className="w-48"/>
+		    </colgroup>
+
+		    <thead className="border-b-2 border-black dark:border-white">
+		      <tr>
+			<th className="p-2 text-left">日時</th>
+			<th className="p-2 text-left">event_type</th>
+			<th className="p-2 text-left">素材 ID</th>
+			<th className="p-2 text-left">版</th>
+			<th className="p-2 text-left">タグ名</th>
+			<th className="p-2 text-left">ファイル名</th>
+			<th className="p-2 text-left">URL</th>
+			<th className="p-2 text-left">export_path</th>
+			<th className="p-2 text-left">操作者</th>
+		      </tr>
+		    </thead>
+
+		    <tbody>
+		      {versions.map (version => (
+			  <tr
+			      key={version.id}
+			      className="even:bg-gray-100 dark:even:bg-gray-700">
+			    <td className="p-2">{dateString (version.createdAt)}</td>
+			    <td className="p-2">{version.eventType}</td>
+			    <td className="p-2">
+			      <PrefetchLink to={`/materials/${ version.materialId }`}>
+				#{version.materialId}
+			      </PrefetchLink>
+			    </td>
+			    <td className="p-2">{version.versionNo}</td>
+			    <td className="p-2 break-all">{version.tagName}</td>
+			    <td className="p-2 break-all">{version.fileFilename}</td>
+			    <td className="p-2 break-all">{version.url}</td>
+			    <td className="p-2 break-all">
+			      {version.exportPathsJson.legacy_drive}
+			    </td>
+			    <td className="p-2">
+			      {version.createdByUser
+			       ? version.createdByUser.name || `#${ version.createdByUser.id }`
+			       : 'bot 操作'}
+			    </td>
+			  </tr>))}
+		    </tbody>
+		  </table>
+		</div>
+
+		<Pagination page={page} totalPages={totalPages}/>
+	      </>)}
+	</div>
+      </MainArea>)
+}
+
+
+export default MaterialHistoryPage
@@ -284,6 +284,13 @@ const MaterialListPage: FC = () => {
 			     dark:bg-stone-900 dark:text-stone-100 dark:hover:bg-stone-800">
 		同期元抑止
 	      </PrefetchLink>
+	      <PrefetchLink
+		  to="/materials/changes"
+		  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"
@@ -23,8 +23,10 @@ import type { MaterialSyncSuppressionSourceKind } from '@/types'
 const SOURCE_KIND_LABELS: Record<MaterialSyncSuppressionSourceKind, string> = {
    uri:               'URI',
    google_drive_path: 'Google Drive path',
+    google_drive_path_prefix: 'Google Drive path prefix',
    google_drive_file: 'Google Drive file ID',
-    legacy_drive_path: 'Legacy Drive path'}
+    legacy_drive_path: 'Legacy Drive path',
+    legacy_drive_path_prefix: 'Legacy Drive path prefix'}

 const REASONS = [
    'copyright_high_risk',
@@ -132,8 +132,10 @@ export type Material = {
 export type MaterialSyncSuppressionSourceKind =
    | 'uri'
    | 'google_drive_path'
+    | 'google_drive_path_prefix'
    | 'google_drive_file'
    | 'legacy_drive_path'
+    | 'legacy_drive_path_prefix'

 export type MaterialSyncSuppression = {
    id:                  number
@@ -168,6 +170,25 @@ export type MaterialExportItem = {
    exportPath:  string
    enabled:     boolean }

+export type MaterialVersion = {
+    id:               number
+    materialId:       number
+    versionNo:        number
+    eventType:        'create' | 'update' | 'discard' | 'restore'
+    tagId:            number | null
+    tagName:          string | null
+    tagCategory:      Category | null
+    url:              string | null
+    fileBlobId:       number | null
+    fileFilename:     string | null
+    fileContentType:  string | null
+    fileByteSize:     number | null
+    fileSha256:       string | null
+    exportPathsJson:  Record<string, string>
+    discardedAt:      string | null
+    createdByUser:    { id: number; name: string | null } | null
+    createdAt:        string }
+
 export type Menu = MenuItem[]

 export type MenuInvisibleItem = {