feat: items rendered and draggable

src/sections/collection-featured-items/CollectionFeaturedItems.tsx

@@ -9,6 +9,8 @@ import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
 import { PageNotFound } from '../page-not-found/PageNotFound'
 import { FeaturedItemsForm } from './featured-items-form/FeaturedItemsForm'
+import { FeaturedItemsFormHelper } from './featured-items-form/FeaturedItemsFormHelper'
+import { FeaturedItemsFormData } from './types'
 
 interface CollectionFeaturedItemsProps {
   collectionRepository: CollectionRepository
@@ -36,12 +38,6 @@ export const CollectionFeaturedItems = ({
 
   const isLoadingData = isLoading || isLoadingCollectionFeaturedItems
 
-  console.log({
-    collectionFeaturedItems,
-    isLoadingCollectionFeaturedItems,
-    errorCollectionFeaturedItems
-  })
-
   if (!isLoading && !collection) {
     return <PageNotFound />
   }
@@ -54,6 +50,10 @@ export const CollectionFeaturedItems = ({
     return <Alert variant="danger">{errorCollectionFeaturedItems}</Alert>
   }
 
+  const formDefaultValues: FeaturedItemsFormData = {
+    featuredItems: FeaturedItemsFormHelper.defineDefaultFeaturedItems(collectionFeaturedItems)
+  }
+
   return (
     <section>
       <BreadcrumbsGenerator
@@ -69,7 +69,7 @@ export const CollectionFeaturedItems = ({
 
       <Alert variant="info">{t('infoMessage')}</Alert>
 
-      <FeaturedItemsForm />
+      <FeaturedItemsForm defaultValues={formDefaultValues} />
     </section>
   )
 }

src/sections/collection-featured-items/featured-items-form/FeaturedItemsForm.module.scss

@@ -0,0 +1,16 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-top: 2rem;
+}
+
+.show-data-checkbox-wrapper {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+
+  :global .form-check {
+    margin-bottom: 0;
+  }
+}

src/sections/collection-featured-items/featured-items-form/FeaturedItemsForm.tsx

@@ -1,7 +1,132 @@
-export const FeaturedItemsForm = () => {
+import { FormProvider, useFieldArray, useForm } from 'react-hook-form'
+import { DndContext, DragEndEvent } from '@dnd-kit/core'
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers'
+import { SortableContext } from '@dnd-kit/sortable'
+import {
+  Button
+  // Form,
+  // QuestionMarkTooltip
+} from '@iqss/dataverse-design-system'
+import { FeaturedItem } from './featured-item/FeaturedItem'
+// import { PreviewCarousel } from './PreviewCarousel/PreviewCarousel'
+import { FeaturedItemFieldWithId, FeaturedItemsFormData } from '../types'
+import styles from './FeaturedItemsForm.module.scss'
+
+interface FeaturedItemsFormProps {
+  defaultValues: FeaturedItemsFormData
+}
+
+export const FeaturedItemsForm = ({ defaultValues }: FeaturedItemsFormProps) => {
+  const form = useForm<FeaturedItemsFormData>({
+    mode: 'onChange',
+    defaultValues
+  })
+
+  const {
+    fields: fieldsArray,
+    insert,
+    remove,
+    move
+  } = useFieldArray({
+    name: 'featuredItems',
+    control: form.control
+  })
+
+  const handleOnAddField = (index: number) => {
+    insert(
+      index + 1,
+      { title: '', content: '', image: undefined },
+      {
+        shouldFocus: true,
+        focusName: `featuredItems.${index + 1}.title`
+      }
+    )
+  }
+
+  const handleOnRemoveField = (index: number) => remove(index)
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+
+    if (over && active.id !== over?.id) {
+      const activeIndex = (active.data.current?.sortable as { index: number })?.index
+      const overIndex = (over.data.current?.sortable as { index: number })?.index
+
+      if (activeIndex !== undefined && overIndex !== undefined) {
+        move(activeIndex, overIndex)
+      }
+    }
+  }
+
+  const submitForm = (data: FeaturedItemsFormData) => {
+    console.log(data)
+  }
+
+  //   const formFieldsToFeaturedItems: CollectionFeaturedItem[] = form
+  //     .watch('featuredItems')
+  //     .map((field) => {
+  //       const { title, content, image } = field
+
+  //       if (image?.file) {
+  //         const url = URL.createObjectURL(image.file)
+  //         return { title, content, image: { url, altText: image.altText } }
+  //       }
+
+  //       return { title, content }
+  //     })
+
   return (
-    <div>
-      <p>Formsito</p>
-    </div>
+    <FormProvider {...form}>
+      {/* <PreviewCarousel currentFormFeaturedItems={formFieldsToFeaturedItems} /> */}
+      <form
+        onSubmit={form.handleSubmit(submitForm)}
+        noValidate={true}
+        className={styles.form}
+        data-testid="collection-form">
+        {fieldsArray.length > 3 && (
+          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Button disabled={!form.formState.isDirty}>Save Featured Items</Button>
+          </div>
+        )}
+
+        {/* <Controller
+          name="withShowDataButton"
+          control={form.control}
+          render={({ field: { onChange, ref, value } }) => (
+            <div className={styles['show-data-checkbox-wrapper']}>
+              <Form.Group.Checkbox
+                id="withShowDataButton"
+                onChange={onChange}
+                label="Show data by default"
+                checked={value}
+                ref={ref}
+              />
+              <QuestionMarkTooltip
+                placement="right"
+                message="If this option is unchecked, the collections, datasets, and files list will not appear by default. To display them, the user will need to click a button located below the carousel."
+              />
+            </div>
+          )}
+        /> */}
+
+        <DndContext onDragEnd={handleDragEnd} modifiers={[restrictToVerticalAxis]}>
+          <SortableContext items={fieldsArray}>
+            {(fieldsArray as FeaturedItemFieldWithId[]).map((field, index) => (
+              <FeaturedItem
+                id={field.id}
+                itemIndex={index}
+                disableDragWhenOnlyOneItem={fieldsArray.length === 1}
+                onAddField={handleOnAddField}
+                onRemoveField={handleOnRemoveField}
+                key={field.id}
+              />
+            ))}
+          </SortableContext>
+        </DndContext>
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Button disabled={!form.formState.isDirty}>Save Featured Items</Button>
+        </div>
+      </form>
+    </FormProvider>
   )
 }

src/sections/collection-featured-items/featured-items-form/FeaturedItemsFormHelper.ts

@@ -0,0 +1,29 @@
+import { CollectionFeaturedItem } from '@/collection/domain/models/CollectionFeaturedItem'
+import { FeaturedItemsFormData } from '../types'
+
+export class FeaturedItemsFormHelper {
+  static defineDefaultFeaturedItems(
+    collectionFeaturedItems: CollectionFeaturedItem[]
+  ): FeaturedItemsFormData['featuredItems'] {
+    if (!collectionFeaturedItems.length) {
+      return [
+        {
+          title: '',
+          content: '',
+          image: undefined
+        }
+      ]
+    }
+
+    return collectionFeaturedItems.map((collectionFeaturedItem) => {
+      const { id, title, content, imageUrl } = collectionFeaturedItem
+
+      return {
+        title,
+        content,
+        image: imageUrl,
+        itemId: id
+      }
+    })
+  }
+}

src/sections/collection-featured-items/featured-items-form/featured-item/FeaturedItem.module.scss

@@ -0,0 +1,69 @@
+@use 'sass:color';
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
+
+.featured-item-fields-wrapper {
+  position: relative;
+  padding: 1rem;
+  border: solid 1px $dv-secondary-color;
+  border-radius: 6px;
+
+  &.sorting {
+    background-color: color.adjust($dv-secondary-color, $alpha: -0.4);
+
+    &.active {
+      z-index: 999;
+      background-color: color.adjust($dv-primary-color, $alpha: -0.4);
+    }
+  }
+
+  .drag-handle {
+    width: 38px;
+    height: 38px;
+    margin-bottom: 0.5rem;
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    border: solid 1px $dv-secondary-color;
+    border-radius: 4px;
+    cursor: grab;
+
+    &:hover:not(.disabled) {
+      background-color: $dv-secondary-color;
+    }
+
+    &:active:not(.disabled) {
+      cursor: grabbing;
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    @media (min-width: 768px) {
+      margin-bottom: 0;
+    }
+  }
+
+  .image-dropzone {
+    display: grid;
+    place-items: center;
+    height: 38px;
+    border: dashed 1px #ced4da;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: border-color 0.3s;
+
+    &:hover {
+      border-color: #333;
+    }
+
+    &:focus {
+      border-color: #333;
+    }
+
+    small {
+      margin: 0;
+    }
+  }
+}