Commit 0de01416 authored by Stefan Probst's avatar Stefan Probst
Browse files

feat: add rudimentary version history screen

parent 3cb55694
import ProtectedScreen from '@/modules/auth/ProtectedScreen'
import DatasetHistoryScreen from '@/screens/item/dataset/DatasetHistoryScreen'
/**
* Edit dataset page.
*/
export default function DatasetEditPage(): JSX.Element {
return (
<ProtectedScreen>
<DatasetHistoryScreen />
</ProtectedScreen>
)
}
import ProtectedScreen from '@/modules/auth/ProtectedScreen'
import PublicationHistoryScreen from '@/screens/item/publication/PublicationHistoryScreen'
/**
* Edit publication page.
*/
export default function PublicationEditPage(): JSX.Element {
return (
<ProtectedScreen>
<PublicationHistoryScreen />
</ProtectedScreen>
)
}
import ProtectedScreen from '@/modules/auth/ProtectedScreen'
import ToolHistoryScreen from '@/screens/item/tool/ToolHistoryScreen'
/**
* Edit tool page.
*/
export default function ToolEditPage(): JSX.Element {
return (
<ProtectedScreen>
<ToolHistoryScreen />
</ProtectedScreen>
)
}
import ProtectedScreen from '@/modules/auth/ProtectedScreen'
import TrainingMaterialHistoryScreen from '@/screens/item/training-material/TrainingMaterialHistoryScreen'
/**
* Edit training material page.
*/
export default function TrainingMaterialEditPage(): JSX.Element {
return (
<ProtectedScreen>
<TrainingMaterialHistoryScreen />
</ProtectedScreen>
)
}
import ProtectedScreen from '@/modules/auth/ProtectedScreen'
import WorkflowHistoryScreen from '@/screens/item/workflow/WorkflowHistoryScreen'
/**
* Edit workflow page.
*/
export default function WorkflowEditPage(): JSX.Element {
return (
<ProtectedScreen>
<WorkflowHistoryScreen />
</ProtectedScreen>
)
}
import { Fragment } from 'react'
import type {
DatasetDto,
PublicationDto,
ToolDto,
TrainingMaterialDto,
WorkflowDto,
} from '@/api/sshoc'
export interface ItemHistoryProps {
item:
| DatasetDto
| PublicationDto
| ToolDto
| TrainingMaterialDto
| WorkflowDto
}
export function ItemHistory(props: ItemHistoryProps): JSX.Element {
return (
<div>
{props.item.newerVersions != null &&
props.item.newerVersions.length > 0 ? (
<Fragment>
<h2 className="sr-only">Newer versions</h2>
<ul className="flex flex-col space-y-2">
{props.item.newerVersions.map((version) => (
<ItemVersion key={version.id} version={version} />
))}
</ul>
</Fragment>
) : null}
<div className="my-2">
<h2 className="sr-only">Current version</h2>
<ItemVersion version={props.item} />
</div>
{props.item.olderVersions != null &&
props.item.olderVersions.length > 0 ? (
<Fragment>
<h2 className="sr-only">Older versions</h2>
<ul className="flex flex-col space-y-2">
{props.item.olderVersions.map((version) => (
<ItemVersion key={version.id} version={version} />
))}
</ul>
</Fragment>
) : null}
</div>
)
}
interface ItemVersionProps {
version:
| Exclude<ItemHistoryProps['item']['newerVersions'], undefined>[number]
| Exclude<ItemHistoryProps['item']['olderVersions'], undefined>[number]
}
function ItemVersion(props: ItemVersionProps) {
const { version } = props
return (
<article className="px-4 py-4 border border-gray-200 rounded bg-gray-75">
<h3 className="font-bold text-primary-750">
{version.label}
{version.version != null ? ` ${`${version.version}`}` : null}
</h3>
</article>
)
}
......@@ -99,15 +99,26 @@ export default function ItemLayout({
<Title>{item.label}</Title>
</div>
<ProtectedView>
<Link
href={{
pathname: `/${item.category}/${item.persistentId}/edit`,
}}
>
<a className="px-16 py-4 text-xl text-white transition rounded bg-primary-750 hover:bg-secondary-600">
Edit
</a>
</Link>
<div className="flex flex-col space-y-2 xl:flex-row xl:space-y-0 xl:space-x-4">
<Link
href={{
pathname: `/${item.category}/${item.persistentId}/history`,
}}
>
<a className="w-32 px-6 py-3 text-lg text-center text-white transition rounded lg:text-xl lg:w-48 lg:px-10 lg:py-4 bg-primary-750 hover:bg-secondary-600">
History
</a>
</Link>
<Link
href={{
pathname: `/${item.category}/${item.persistentId}/edit`,
}}
>
<a className="w-32 px-6 py-3 text-lg text-center text-white transition rounded lg:text-xl lg:w-48 lg:px-10 lg:py-4 bg-primary-750 hover:bg-secondary-600">
Edit
</a>
</Link>
</div>
</ProtectedView>
</HStack>
<ItemDescription description={item.description} />
......
import { useRouter } from 'next/router'
import { Fragment } from 'react'
import { ItemHistory } from '../ItemHistory'
import { useGetDataset } from '@/api/sshoc'
import { ProgressSpinner } from '@/elements/ProgressSpinner/ProgressSpinner'
import ContentColumn from '@/modules/layout/ContentColumn'
import GridLayout from '@/modules/layout/GridLayout'
import Metadata from '@/modules/metadata/Metadata'
import Breadcrumbs from '@/modules/ui/Breadcrumbs'
import Header from '@/modules/ui/Header'
import { Title } from '@/modules/ui/typography/Title'
/**
* Dataset history screen.
*/
export default function DatasetHistoryScreen(): JSX.Element {
const router = useRouter()
const id = router.query.id as string | undefined
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const dataset = useGetDataset({ id: id! }, {}, { enabled: id != null })
return (
<Fragment>
<Metadata noindex title="Dataset version history" />
<GridLayout>
<Header image={'/assets/images/search/clouds@2x.png'}>
<Breadcrumbs
links={[
{ pathname: '/', label: 'Home' },
{
pathname: '/search',
query: {
categories: ['dataset'],
order: 'label',
},
label: 'Datasets',
},
{
pathname: `/dataset/${id}`,
label: dataset.data?.label ?? 'Dataset',
},
{
pathname: `/dataset/${id}/history`,
label: 'History',
},
]}
/>
</Header>
<ContentColumn
className="px-6 py-12 space-y-12"
style={{ gridColumn: '4 / span 8' }}
>
<Title>Dataset version history</Title>
{dataset.data === undefined || id == undefined ? (
<div className="flex flex-col items-center justify-center">
<ProgressSpinner />
</div>
) : (
<ItemHistory item={dataset.data} />
)}
</ContentColumn>
</GridLayout>
</Fragment>
)
}
import { useRouter } from 'next/router'
import { Fragment } from 'react'
import { ItemHistory } from '../ItemHistory'
import { useGetPublication } from '@/api/sshoc'
import { ProgressSpinner } from '@/elements/ProgressSpinner/ProgressSpinner'
import ContentColumn from '@/modules/layout/ContentColumn'
import GridLayout from '@/modules/layout/GridLayout'
import Metadata from '@/modules/metadata/Metadata'
import Breadcrumbs from '@/modules/ui/Breadcrumbs'
import Header from '@/modules/ui/Header'
import { Title } from '@/modules/ui/typography/Title'
/**
* Publication history screen.
*/
export default function PublicationHistoryScreen(): JSX.Element {
const router = useRouter()
const id = router.query.id as string | undefined
const publication = useGetPublication(
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
{ id: id! },
{},
{ enabled: id != null },
)
return (
<Fragment>
<Metadata noindex title="Publication version history" />
<GridLayout>
<Header image={'/assets/images/search/clouds@2x.png'}>
<Breadcrumbs
links={[
{ pathname: '/', label: 'Home' },
{
pathname: '/search',
query: {
categories: ['publication'],
order: 'label',
},
label: 'Publications',
},
{
pathname: `/publication/${id}`,
label: publication.data?.label ?? 'Dataset',
},
{
pathname: `/publication/${id}/history`,
label: 'History',
},
]}
/>
</Header>
<ContentColumn
className="px-6 py-12 space-y-12"
style={{ gridColumn: '4 / span 8' }}
>
<Title>Publication version history</Title>
{publication.data === undefined || id == undefined ? (
<div className="flex flex-col items-center justify-center">
<ProgressSpinner />
</div>
) : (
<ItemHistory item={publication.data} />
)}
</ContentColumn>
</GridLayout>
</Fragment>
)
}
import { useRouter } from 'next/router'
import { Fragment } from 'react'
import { ItemHistory } from '../ItemHistory'
import { useGetTool } from '@/api/sshoc'
import { ProgressSpinner } from '@/elements/ProgressSpinner/ProgressSpinner'
import ContentColumn from '@/modules/layout/ContentColumn'
import GridLayout from '@/modules/layout/GridLayout'
import Metadata from '@/modules/metadata/Metadata'
import Breadcrumbs from '@/modules/ui/Breadcrumbs'
import Header from '@/modules/ui/Header'
import { Title } from '@/modules/ui/typography/Title'
/**
* Tool history screen.
*/
export default function ToolHistoryScreen(): JSX.Element {
const router = useRouter()
const id = router.query.id as string | undefined
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const tool = useGetTool({ id: id! }, {}, { enabled: id != null })
return (
<Fragment>
<Metadata noindex title="Tool version history" />
<GridLayout>
<Header image={'/assets/images/search/clouds@2x.png'}>
<Breadcrumbs
links={[
{ pathname: '/', label: 'Home' },
{
pathname: '/search',
query: {
categories: ['tool-or-service'],
order: 'label',
},
label: 'Tools & Services',
},
{
pathname: `/tool-or-service/${id}`,
label: tool.data?.label ?? 'Tools & Services',
},
{
pathname: `/tool-or-service/${id}/history`,
label: 'History',
},
]}
/>
</Header>
<ContentColumn
className="px-6 py-12 space-y-12"
style={{ gridColumn: '4 / span 8' }}
>
<Title>Tool version history</Title>
{tool.data === undefined || id == undefined ? (
<div className="flex flex-col items-center justify-center">
<ProgressSpinner />
</div>
) : (
<ItemHistory item={tool.data} />
)}
</ContentColumn>
</GridLayout>
</Fragment>
)
}
import { useRouter } from 'next/router'
import { Fragment } from 'react'
import { ItemHistory } from '../ItemHistory'
import { useGetTrainingMaterial } from '@/api/sshoc'
import { ProgressSpinner } from '@/elements/ProgressSpinner/ProgressSpinner'
import ContentColumn from '@/modules/layout/ContentColumn'
import GridLayout from '@/modules/layout/GridLayout'
import Metadata from '@/modules/metadata/Metadata'
import Breadcrumbs from '@/modules/ui/Breadcrumbs'
import Header from '@/modules/ui/Header'
import { Title } from '@/modules/ui/typography/Title'
/**
* Training material history screen.
*/
export default function TrainingMaterialHistoryScreen(): JSX.Element {
const router = useRouter()
const id = router.query.id as string | undefined
const trainingMaterial = useGetTrainingMaterial(
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
{ id: id! },
{},
{ enabled: id != null },
)
return (
<Fragment>
<Metadata noindex title="Training material version history" />
<GridLayout>
<Header image={'/assets/images/search/clouds@2x.png'}>
<Breadcrumbs
links={[
{ pathname: '/', label: 'Home' },
{
pathname: '/search',
query: {
categories: ['training-material'],
order: 'label',
},
label: 'Training Materials',
},
{
pathname: `/training-material/${id}`,
label: trainingMaterial.data?.label ?? 'Dataset',
},
{
pathname: `/training-material/${id}/history`,
label: 'History',
},
]}
/>
</Header>
<ContentColumn
className="px-6 py-12 space-y-12"
style={{ gridColumn: '4 / span 8' }}
>
<Title>Training material version history</Title>
{trainingMaterial.data === undefined || id == undefined ? (
<div className="flex flex-col items-center justify-center">
<ProgressSpinner />
</div>
) : (
<ItemHistory item={trainingMaterial.data} />
)}
</ContentColumn>
</GridLayout>
</Fragment>
)
}
import { useRouter } from 'next/router'
import { Fragment } from 'react'
import { ItemHistory } from '../ItemHistory'
import { useGetWorkflow } from '@/api/sshoc'
import { ProgressSpinner } from '@/elements/ProgressSpinner/ProgressSpinner'
import ContentColumn from '@/modules/layout/ContentColumn'
import GridLayout from '@/modules/layout/GridLayout'
import Metadata from '@/modules/metadata/Metadata'
import Breadcrumbs from '@/modules/ui/Breadcrumbs'
import Header from '@/modules/ui/Header'
import { Title } from '@/modules/ui/typography/Title'
/**
* Workflow history screen.
*/
export default function WorkflowHistoryScreen(): JSX.Element {
const router = useRouter()
const id = router.query.id as string | undefined
const workflow = useGetWorkflow(
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
{ workflowId: id! },
{},
{ enabled: id != null },
)
return (
<Fragment>
<Metadata noindex title="Workflow version history" />
<GridLayout>
<Header image={'/assets/images/search/clouds@2x.png'}>
<Breadcrumbs
links={[
{ pathname: '/', label: 'Home' },
{
pathname: '/search',
query: {
categories: ['workflow'],
order: 'label',
},
label: 'Workflows',
},
{
pathname: `/workflow/${id}`,
label: workflow.data?.label ?? 'Workflows',
},
{
pathname: `/workflow/${id}/history`,
label: 'History',
},
]}
/>
</Header>
<ContentColumn
className="px-6 py-12 space-y-12"
style={{ gridColumn: '4 / span 8' }}
>
<Title>Workflow version history</Title>
{workflow.data === undefined || id == undefined ? (
<div className="flex flex-col items-center justify-center">
<ProgressSpinner />
</div>
) : (
<ItemHistory item={workflow.data} />
)}
</ContentColumn>
</GridLayout>
</Fragment>
)
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment