Skip to content

Commit

Permalink
Fixes requested by client (#102)
Browse files Browse the repository at this point in the history
* Fixes requested by client

* Fix typo
  • Loading branch information
luccasmmg authored Nov 15, 2023
1 parent 2743c73 commit 5adf7da
Show file tree
Hide file tree
Showing 17 changed files with 417 additions and 163 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,10 @@ dataset_fields:
form_snippet: markdown.html
form_placeholder: eg. A short summary of the dataset

- field_name: open_in
label: Open In
preset: json_object

resource_fields:

- field_name: url
Expand Down
2 changes: 1 addition & 1 deletion deployment/frontend/src/components/_shared/InputGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export function ErrorDisplay({
errors={errors}
name={name}
render={({ message }) => (
<p className="col-span-full text-justify text-xs text-red-600">{message}</p>
<p className="col-span-full text-justify text-sm text-red-600">{message}</p>
)}
/>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import { match } from 'ts-pattern'
import { v4 as uuidv4 } from 'uuid'
import { OpenInForm } from './metadata/OpenIn'

export default function CreateDatasetForm() {
const [errorMessage, setErrorMessage] = useState<string | null>(null)
Expand Down Expand Up @@ -113,6 +114,7 @@ export default function CreateDatasetForm() {
<PointOfContactForm formObj={formObj} />
<MoreDetailsForm formObj={formObj} />
<CustomFieldsForm formObj={formObj} />
<OpenInForm formObj={formObj} />
</Tab.Panel>
<Tab.Panel as="div" className="flex flex-col gap-y-12">
<CreateDataFilesSection formObj={formObj} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,17 @@ function AddDataFile({
})
}

uppy.on('progress', (progress) => {
if (typeof window !== 'undefined') {
const progressBar = document.getElementById(
`${datafile.resourceId}_upload_progress`
)
if (progressBar) {
progressBar.textContent = progress + '%'
}
}
})

uppy.on('upload', (_result) => {
setValue(`resources.${index}.type`, 'upload')
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@ export function UploadForm({
className="absolute inset-0 h-full w-full animate-spin object-cover"
/>
)}
<span
className="absolute left-1.5 top-2 font-acumin text-[0.475rem] font-medium leading-tight text-black"
id={`${datafile.resourceId}_upload_progress`}
></span>
</div>
<button onClick={() => removeFile()}>
<MinusCircleIcon className="h-6 w-6 text-red-500" />
Expand All @@ -67,7 +71,10 @@ export function UploadForm({
type="text"
maxWidth="max-w-[70rem]"
/>
<ErrorDisplay name={`resources.${index}.title`} errors={errors} />
<ErrorDisplay
name={`resources.${index}.title`}
errors={errors}
/>
</InputGroup>
<InputGroup label="Description" className="whitespace-nowrap">
<TextArea
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,17 @@ import { UseFormReturn } from 'react-hook-form'
import { DatasetFormType } from '@/schema/dataset.schema'
import { DefaultTooltip } from '@/components/_shared/Tooltip'
import { Input } from '@/components/_shared/SimpleInput'
import { SimpleEditor } from './RTE/SimpleEditor'

export function MoreDetailsForm({
formObj,
}: {
formObj: UseFormReturn<DatasetFormType>
}) {
const { register, formState: { errors } } = formObj
const {
register,
formState: { errors },
} = formObj
return (
<MetadataAccordion
label={
Expand All @@ -29,62 +33,72 @@ export function MoreDetailsForm({
>
<Disclosure.Panel className="grid grid-cols-1 items-start gap-x-24 py-5">
<div className="flex flex-col justify-start gap-y-4">
<InputGroup label="Learn more" className="items-start">
<InputGroup
label="Learn more"
className="mb-2 flex flex-col items-start whitespace-nowrap sm:flex-col"
>
<Input
placeholder="Please visit our website for more information: LINK TO WEBSITE"
{...register('learn_more')}
type="text"
/>
<ErrorDisplay name="learn_more" errors={errors} />
</InputGroup>
<InputGroup label="Function" className="items-start">
<TextArea
placeholder="This data serves X porpuse"
{...register('function')}
type="text"
className="h-28"
<InputGroup
label="Function"
className="mb-2 flex min-h-[320px] flex-col items-start whitespace-nowrap sm:flex-col"
>
<SimpleEditor
formObj={formObj}
name="function"
className="min-h-[320px]"
defaultValue=""
/>
</InputGroup>
<InputGroup label="Restrictions" className="items-start">
<TextArea
placeholder="Data can only be used without alteration"
{...register('restrictions')}
type="text"
className="h-28"
<InputGroup
label="Restrictions"
className="mb-2 flex min-h-[320px] flex-col items-start whitespace-nowrap sm:flex-col"
>
<SimpleEditor
formObj={formObj}
name="restrictions"
className="min-h-[320px]"
defaultValue=""
/>
</InputGroup>
<InputGroup
label="Reason for adding"
className="items-start"
className="mb-2 flex min-h-[320px] flex-col items-start whitespace-nowrap sm:flex-col"
>
<TextArea
placeholder="Due to new funding for research"
{...register('reason_for_adding')}
type="text"
className="h-28"
<SimpleEditor
formObj={formObj}
name="reason_for_adding"
className="min-h-[320px]"
defaultValue=""
/>
</InputGroup>
<InputGroup
label="Cautions"
className="mb-2 flex min-h-[320px] flex-col items-start whitespace-nowrap sm:flex-col"
>
<SimpleEditor
formObj={formObj}
name="cautions"
className="min-h-[320px]"
defaultValue=""
/>
</InputGroup>
<InputGroup
label="Summary"
className="mb-2 flex min-h-[320px] flex-col items-start whitespace-nowrap sm:flex-col"
>
<SimpleEditor
formObj={formObj}
name="summary"
className="min-h-[320px]"
defaultValue=""
/>
</InputGroup>
<InputGroup label="Cautions" className="items-start">
<TextArea
placeholder=""
{...register('cautions')}
type="text"
className="h-64"
icon={
<DefaultTooltip content="Placeholder">
<InformationCircleIcon className="mb-auto mt-2 h-5 w-5 text-gray-300" />
</DefaultTooltip>
}
/>
</InputGroup>
<InputGroup label="Summary" className="items-start">
<TextArea
placeholder="My short summary of this data"
type="text"
{...register('summary')}
className="h-64"
/>
</InputGroup>
</div>
</Disclosure.Panel>
</MetadataAccordion>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import { ArrowUpRightIcon, MinusCircleIcon } from '@heroicons/react/24/outline'
import { Disclosure } from '@headlessui/react'
import { Input } from '@/components/_shared/SimpleInput'
import { ErrorDisplay, InputGroup } from '@/components/_shared/InputGroup'
import { PlusCircleIcon } from '@heroicons/react/20/solid'
import { MetadataAccordion } from './MetadataAccordion'
import { DatasetFormType } from '@/schema/dataset.schema'
import {
FieldErrors,
UseFieldArrayRemove,
UseFormRegister,
UseFormReturn,
useFieldArray,
} from 'react-hook-form'
import { DefaultTooltip } from '@/components/_shared/Tooltip'

function OpenIn({
register,
index,
remove,
errors,
}: {
register: UseFormRegister<DatasetFormType>
errors: FieldErrors<DatasetFormType>
index: number
remove: UseFieldArrayRemove
}) {
return (
<div className="flex items-center gap-x-2">
<div className="grid grow grid-cols-1 items-start gap-x-24 md:grid-cols-2">
<InputGroup label="Title">
<Input
placeholder=""
{...register(`open_in.${index}.title`)}
type="text"
/>
<ErrorDisplay
name={`open_in.${index}.title`}
errors={errors}
/>
</InputGroup>
<InputGroup label="Url">
<Input
placeholder=""
{...register(`open_in.${index}.url`)}
type="text"
/>
<ErrorDisplay
name={`open_in.${index}.url`}
errors={errors}
/>
</InputGroup>
</div>
<DefaultTooltip content="Remove open in item">
<MinusCircleIcon
onClick={() => remove(index)}
className="h-5 w-5 text-red-600"
/>
</DefaultTooltip>
</div>
)
}

export function OpenInForm({
formObj,
}: {
formObj: UseFormReturn<DatasetFormType>
}) {
const {
control,
register,
formState: { errors },
} = formObj
const { fields, append, remove } = useFieldArray({
control,
name: 'open_in',
})
return (
<MetadataAccordion
label={
<>
<ArrowUpRightIcon className="h-7 w-7" />
Open In
</>
}
>
<Disclosure.Panel className="py-5 flex flex-col gap-y-4">
{fields.map((field, index) => (
<OpenIn
key={field.id}
errors={errors}
index={index}
remove={remove}
register={register}
/>
))}
<div className="w-full flex justify-end">
<DefaultTooltip content="This allows you to link your dataset to an external application, you could for example add a link to the same dataset in the Global Forest Wath website">
<button
type="button"
onClick={() =>
append({
title: '',
url: '',
})
}
className="pt-5 flex items-center justify-end gap-x-1"
>
<PlusCircleIcon className="h-5 w-5 text-amber-400" />
<div className="font-['Acumin Pro SemiCondensed'] text-xl font-normal leading-tight text-black">
Add a open-in field
</div>
</button>
</DefaultTooltip>
</div>
</Disclosure.Panel>
</MetadataAccordion>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function LinkModal(props: IProps) {
...rest
} = props
return (
<Modal open={isOpen} setOpen={closeModal}>
<Modal open={isOpen} setOpen={closeModal} className='max-w-lg'>
<div className="p-6">
<div className="border-b border-zinc-100 pb-5">
<div className="font-acumin text-3xl font-normal text-black">
Expand Down
Loading

0 comments on commit 5adf7da

Please sign in to comment.