Dear Gitlab users, due to maintenance reasons, Gitlab will not be available on Thursday 30.09.2021 from 5:00 pm to approximately 5:30 pm.

Commit 5b895253 authored by Stefan Probst's avatar Stefan Probst
Browse files

fix: adjust to api changes

parent 34c2975a
Pipeline #196144 passed with stages
in 19 minutes and 58 seconds
......@@ -88,10 +88,11 @@ export function convertToInitialFormValues(
*/
externalIds: item.externalIds?.map((id) => {
const identifierService = { code: id.identifierService?.code }
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const identifier = id.identifier!
const externalId = {
identifier,
serviceIdentifier: identifierService,
identifierService,
}
return externalId
}),
......@@ -109,14 +110,7 @@ export function convertToInitialFormValues(
/**
* Only id needed, but keep additional info around - will be stripped in `sanitizeFormValues` before submit.
*/
media: item.media?.map((m) => ({
caption: m.caption,
mediaId: m.metadata?.mediaId,
filename: m.metadata?.filename,
hasThumbnail: m.metadata?.hasThumbnail,
category: m.metadata?.category,
location: m.metadata?.location,
})),
media: item.media,
}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
......
This diff is collapsed.
......@@ -263,7 +263,7 @@ function CreateActorForm(props: CreateActorFormProps) {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
id != null &&
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
id.serviceIdentifier?.code != null &&
id.identifierService?.code != null &&
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
id.identifier == null
) {
......@@ -285,13 +285,13 @@ function CreateActorForm(props: CreateActorFormProps) {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
id.identifier != null &&
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
id.serviceIdentifier?.code == null
id.identifierService?.code == null
) {
if (errors.externalIds === undefined) {
errors.externalIds = []
}
errors.externalIds[index] = {
serviceIdentifier: { code: 'Please select an ID service.' },
identifierService: { code: 'Please select an ID service.' },
}
}
})
......@@ -332,7 +332,7 @@ function CreateActorForm(props: CreateActorFormProps) {
}
>
<ExternalIdServiceSelect
name={`${name}.serviceIdentifier.code`}
name={`${name}.identifierService.code`}
label="ID Service"
/>
<FormTextField
......
......@@ -17,7 +17,7 @@ interface AddMediaFormValues {
interface AddMediaFormProps {
onDismiss: () => void
onSuccess?: (mediaInfo: MediaDetails, caption?: string) => void
onSuccess?: (info: MediaDetails, caption?: string) => void
accept?: string
}
......@@ -41,8 +41,8 @@ export function AddMediaForm(props: AddMediaFormProps): JSX.Element {
const caption = values.caption
const callbacks = {
onSuccess(mediaInfo: MediaDetails) {
props.onSuccess?.(mediaInfo, caption)
onSuccess(info: MediaDetails) {
props.onSuccess?.(info, caption)
toast.success('Sucessfully added media.')
},
onError(error: unknown) {
......
......@@ -88,7 +88,7 @@ export function MainFormSection(props: MainFormSectionProps): JSX.Element {
}
>
<ExternalIdServiceSelect
name={`${name}.serviceIdentifier.code`}
name={`${name}.identifierService.code`}
label="ID Service"
/>
<FormTextField
......
......@@ -45,7 +45,7 @@ export function MediaFormSection(props: MediaFormSectionProps): JSX.Element {
return (
<Thumbnail
onRemove={() => fields.remove(index)}
media={input.value}
media={input.value.info}
caption={input.value.caption}
/>
)
......@@ -61,9 +61,7 @@ export function MediaFormSection(props: MediaFormSectionProps): JSX.Element {
<AddMediaDialog
isOpen={isDialogOpen}
onDismiss={closeDialog}
onSuccess={(mediaInfo, caption) =>
fields.push({ ...mediaInfo, caption })
}
onSuccess={(info, caption) => fields.push({ info, caption })}
/>
</div>
)
......@@ -76,7 +74,7 @@ export function MediaFormSection(props: MediaFormSectionProps): JSX.Element {
interface AddMediaDialogProps {
isOpen: boolean
onDismiss: () => void
onSuccess?: (mediaInfo: MediaDetails, caption?: string) => void
onSuccess?: (info: MediaDetails, caption?: string) => void
}
/**
......
......@@ -35,10 +35,12 @@ export function ThumbnailFormSection(
return (
<div>
{input.value != null && input.value !== '' ? (
<Thumbnail
onRemove={() => input.onChange(null)}
media={{ ...input.value, hasThumbnail: true }}
/>
<div className="grid grid-cols-3">
<Thumbnail
onRemove={() => input.onChange(null)}
media={{ ...input.value, hasThumbnail: true }}
/>
</div>
) : null}
<div className="flex items-center space-x-8">
<FormFieldAddButton onPress={addThumbnailDialog.open}>
......@@ -47,14 +49,14 @@ export function ThumbnailFormSection(
<AddThumbnailDialog
isOpen={addThumbnailDialog.isOpen}
onDismiss={addThumbnailDialog.close}
onSuccess={(mediaInfo, caption) => {
onSuccess={(info) => {
if (
mediaInfo.category !== 'image' ||
mediaInfo.hasThumbnail !== true
info.category !== 'image' ||
info.hasThumbnail !== true
) {
throw new MediaError('A thumbnail must be an image.')
}
input.onChange({ ...mediaInfo, caption })
input.onChange(info)
}}
/>
<div>or</div>
......@@ -62,8 +64,9 @@ export function ThumbnailFormSection(
{({ input: media }) => {
const images =
media.value?.filter(
(m: MediaDetails) =>
m.category === 'image' && m.hasThumbnail === true,
(m: { info?: MediaDetails }) =>
m.info?.category === 'image' &&
m.info.hasThumbnail === true,
) ?? []
return (
<Fragment>
......@@ -76,8 +79,8 @@ export function ThumbnailFormSection(
<ChooseThumbnailDialog
isOpen={chooseThumbnailDialog.isOpen}
onDismiss={chooseThumbnailDialog.close}
onSuccess={(mediaInfo, caption) => {
input.onChange({ ...mediaInfo, caption })
onSuccess={(info) => {
input.onChange(info)
}}
images={images}
/>
......@@ -108,7 +111,7 @@ function useDialogState(initialState = false) {
interface DialogProps {
isOpen: boolean
onDismiss: () => void
onSuccess?: (mediaInfo: MediaDetails, caption?: string) => void
onSuccess?: (info: MediaDetails, caption?: string) => void
}
type AddThumbnailDialogProps = DialogProps
......@@ -143,7 +146,7 @@ function AddThumbnailDialog(props: AddThumbnailDialogProps) {
}
interface ChooseThumbnailDialogProps extends DialogProps {
images: Array<MediaDetails & { caption?: string }>
images: Array<{ info: MediaDetails; caption?: string }>
}
function ChooseThumbnailDialog(props: ChooseThumbnailDialogProps) {
......@@ -183,8 +186,8 @@ interface ChooseThumbnailFormProps {
}
function ChooseThumbnailForm(props: ChooseThumbnailFormProps) {
function onSubmit(image: MediaDetails & { caption?: string }) {
props.onSuccess?.(image, image.caption)
function onSubmit(image: { info: MediaDetails; caption?: string }) {
props.onSuccess?.(image.info, image.caption)
props.onDismiss()
}
......@@ -193,9 +196,9 @@ function ChooseThumbnailForm(props: ChooseThumbnailFormProps) {
<ul className="grid grid-cols-2">
{props.images.map((image) => {
return (
<li key={image.mediaId}>
<li key={image.info.mediaId}>
<button type="button" onClick={() => onSubmit(image)}>
<Thumbnail media={image} caption={image.caption} />
<Thumbnail media={image.info} caption={image.caption} />
</button>
</li>
)
......
......@@ -37,10 +37,14 @@ export function sanitizeFormValues<
if (Array.isArray(values.media) && values.media.length > 0) {
values.media = values.media.map((m) => ({
mediaId: m.mediaId,
caption: m.caption,
info: { mediaId: m.info?.mediaId },
}))
}
if (values.thumbnail != null && values.thumbnail.mediaId != null) {
values.thumbnail = { mediaId: values.thumbnail.mediaId }
}
return values
}
......@@ -207,7 +207,7 @@ export function validateCommonFormFields<
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
id != null &&
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
id.serviceIdentifier?.code != null &&
id.identifierService?.code != null &&
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
id.identifier == null
) {
......@@ -230,14 +230,14 @@ export function validateCommonFormFields<
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
id.identifier != null &&
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
id.serviceIdentifier?.code == null
id.identifierService?.code == null
) {
if (errors.externalIds === undefined) {
/* @ts-expect-error Untyped empty array. */
errors.externalIds = []
}
errors.externalIds[index] = {
serviceIdentifier: { code: 'Please select an ID service.' },
identifierService: { code: 'Please select an ID service.' },
}
}
})
......
import { useButton } from '@react-aria/button'
import type { AriaButtonProps } from '@react-types/button'
import cx from 'clsx'
import type { ReactNode } from 'react'
import { useRef } from 'react'
......@@ -21,8 +22,12 @@ export function FormFieldAddButton(
const { buttonProps } = useButton(props, ref)
const styles = {
button:
'transition cursor-default inline-flex space-x-1.5 items-center font-body font-normal font-ui-base text-primary-750 hover:text-secondary-600 focus:text-gray-800 focus:outline-none',
button: cx(
'transition cursor-default inline-flex space-x-1.5 items-center font-body font-normal font-ui-base hover:text-secondary-600 focus:text-gray-800 focus:outline-none',
props.isDisabled === true
? 'pointer-events-none text-gray-550'
: 'text-primary-750',
),
icon: 'w-2.5 h-2.5',
}
......
......@@ -277,10 +277,10 @@ function ItemMedia({ media }: { media: Item['media'] }) {
const current = media[index]
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const mediaId = current.metadata!.mediaId!
const mediaId = current.info!.mediaId!
const currentMediaUrl =
current.metadata!.location?.sourceUrl ?? getMediaFileUrl({ mediaId })
const currentMediaCategory = current.metadata!.category
current.info?.location?.sourceUrl ?? getMediaFileUrl({ mediaId })
const currentMediaCategory = current.info?.category
return (
<section>
......@@ -304,8 +304,8 @@ function ItemMedia({ media }: { media: Item['media'] }) {
<div className="grid place-items-center">
<a href={currentMediaUrl} download rel="noopener noreferrer">
Download{' '}
{current.metadata?.filename ??
current.metadata?.location?.sourceUrl ??
{current.info?.filename ??
current.info?.location?.sourceUrl ??
'document'}
</a>
</div>
......@@ -343,11 +343,13 @@ function ItemMedia({ media }: { media: Item['media'] }) {
</button>
<ul className="flex justify-center flex-1 px-6 space-x-1 border-l border-r border-gray-200">
{media.map((m, index) => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const mediaId = m.metadata!.mediaId!
const hasThumbnail = m.metadata!.hasThumbnail
const mediaId = m.info?.mediaId
const hasThumbnail = m.info?.hasThumbnail
if (mediaId == null) return null
return (
<li key={m.metadata?.mediaId}>
<li key={m.info?.mediaId}>
<button onClick={() => setIndex(index)}>
{hasThumbnail === true ? (
<img
......
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