fix: position delete button

src/api/sshoc/index.ts

@@ -831,8 +831,8 @@ export type VocabularyDto = {
   conceptResults?: PaginatedConcepts
 }
 
-// const defaultBaseUrl = 'http://localhost:8080'
-const defaultBaseUrl = 'https://sshoc-marketplace-api.acdh-dev.oeaw.ac.at'
+const defaultBaseUrl = 'http://localhost:8080'
+// const defaultBaseUrl = 'https://sshoc-marketplace-api.acdh-dev.oeaw.ac.at'
 
 export { defaultBaseUrl as baseUrl }
 

src/components/item/ActorsFormSection/ActorsFormSection.tsx

@@ -27,7 +27,15 @@ export function ActorsFormSection(props: ActorsFormSectionProps): JSX.Element {
             <FormRecords>
               {fields.map((name, index) => {
                 return (
-                  <FormRecord key={name}>
+                  <FormRecord
+                    key={name}
+                    actions={
+                      <FormFieldRemoveButton
+                        onPress={() => fields.remove(index)}
+                        aria-label={'Remove actor'}
+                      />
+                    }
+                  >
                     <ActorRoleSelect
                       name={`${name}.role.code`}
                       label={'Actor role'}
@@ -38,10 +46,6 @@ export function ActorsFormSection(props: ActorsFormSectionProps): JSX.Element {
                       index={index}
                       initialValues={props.initialValues}
                     />
-                    <FormFieldRemoveButton
-                      onPress={() => fields.remove(index)}
-                      aria-label={'Remove actor'}
-                    />
                   </FormRecord>
                 )
               })}
@@ -93,6 +97,12 @@ interface ActorComboBoxProps {
  * Actor.
  */
 function ActorComboBox(props: ActorComboBoxProps): JSX.Element {
+  /**
+   * Populate the input field with the label of the initially selected item (if any),
+   * which triggers a search request. The result set should include the initial item.
+   *
+   * TODO: should the initial value always be included in the combobox options?
+   */
   const initialLabel =
     props.initialValues?.contributors?.[props.index]?.actor.name ?? ''
 

src/components/item/MainFormSection/MainFormSection.tsx

@@ -30,17 +30,21 @@ export function MainFormSection(): JSX.Element {
             <FormRecords>
               {fields.map((name, index) => {
                 return (
-                  <FormRecord key={name}>
+                  <FormRecord
+                    key={name}
+                    actions={
+                      <FormFieldRemoveButton
+                        onPress={() => fields.remove(index)}
+                        aria-label={'Remove URL'}
+                      />
+                    }
+                  >
                     <FormTextField
                       name={name}
                       label={'Accessible at'}
                       variant="form"
                       style={{ flex: 1 }}
                     />
-                    <FormFieldRemoveButton
-                      onPress={() => fields.remove(index)}
-                      aria-label={'Remove URL'}
-                    />
                   </FormRecord>
                 )
               })}

src/components/item/PropertiesFormSection/PropertiesFormSection.tsx

@@ -56,7 +56,15 @@ export function PropertiesFormSection(
             <FormRecords>
               {fields.map((name, index) => {
                 return (
-                  <FormRecord key={name}>
+                  <FormRecord
+                    key={name}
+                    actions={
+                      <FormFieldRemoveButton
+                        onPress={() => fields.remove(index)}
+                        aria-label={'Remove property'}
+                      />
+                    }
+                  >
                     <PropertyTypeSelect
                       name={`${name}.type.code`}
                       label={'Property type'}
@@ -94,10 +102,6 @@ export function PropertiesFormSection(
                         style={{ flex: 1 }}
                       />
                     </FormFieldCondition>
-                    <FormFieldRemoveButton
-                      onPress={() => fields.remove(index)}
-                      aria-label={'Remove property'}
-                    />
                   </FormRecord>
                 )
               })}
@@ -153,9 +157,14 @@ interface PropertyConceptSelectProps {
  * the concept `id` and vocabulary `id`.
  */
 function PropertyConceptSelect(props: PropertyConceptSelectProps): JSX.Element {
+  /**
+   * Populate the input field with the label of the initially selected item (if any),
+   * which triggers a search request. The result set should include the initial item.
+   *
+   * TODO: should the initial value always be included in the combobox options?
+   */
   const initialLabel =
     props.initialValues?.properties?.[props.index]?.concept?.label ?? ''
-  console.log(initialLabel)
 
   const [searchTerm, setSearchTerm] = useState(initialLabel)
   const debouncedSearchTerm = useDebouncedState(searchTerm, 150).trim()

src/components/item/RelatedItemsFormSection/RelatedItemsFormSection.tsx

@@ -29,7 +29,15 @@ export function RelatedItemsFormSection(
             <FormRecords>
               {fields.map((name, index) => {
                 return (
-                  <FormRecord key={name}>
+                  <FormRecord
+                    key={name}
+                    actions={
+                      <FormFieldRemoveButton
+                        onPress={() => fields.remove(index)}
+                        aria-label={'Remove related item'}
+                      />
+                    }
+                  >
                     <RelationTypeSelect
                       name={`${name}.relation.code`}
                       label={'Relation type'}
@@ -40,10 +48,6 @@ export function RelatedItemsFormSection(
                       initialValues={props.initialValues}
                       index={index}
                     />
-                    <FormFieldRemoveButton
-                      onPress={() => fields.remove(index)}
-                      aria-label={'Remove related item'}
-                    />
                   </FormRecord>
                 )
               })}
@@ -95,6 +99,12 @@ interface RelatedItemComboBoxProps {
  * Related item.
  */
 function RelatedItemComboBox(props: RelatedItemComboBoxProps): JSX.Element {
+  /**
+   * Populate the input field with the label of the initially selected item (if any),
+   * which triggers a search request. The result set should include the initial item.
+   *
+   * TODO: should the initial value always be included in the combobox options?
+   */
   const initialLabel =
     props.initialValues?.relatedItems?.[props.index]?.label ?? ''
 

src/modules/form/components/FormFieldRemoveButton/FormFieldRemoveButton.tsx

 import { useButton } from '@react-aria/button'
 import type { AriaButtonProps } from '@react-types/button'
 import cx from 'clsx'
-import type { ReactNode } from 'react'
+// import type { ReactNode } from 'react'
 import { useRef } from 'react'
 
 import { Icon } from '@/elements/Icon/Icon'
@@ -9,7 +9,7 @@ import { Svg as CrossIcon } from '@/elements/icons/small/cross.svg'
 
 export interface FormFieldRemoveButtonProps extends AriaButtonProps {
   onPress: () => void
-  children?: ReactNode
+  // children?: ReactNode
 }
 
 /**
@@ -23,8 +23,8 @@ export function FormFieldRemoveButton(
 
   const styles = {
     button: cx(
-      'py-5' /** Match form field height. */,
-      'px-5 cursor-default flex-grow-0 flex-shrink-0 transition 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',
+      // 'px-5  py-5' /** Match form field height. */,
+      'cursor-default flex-grow-0 flex-shrink-0 transition 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',
     ),
     icon: 'w-2.5 h-2.5',
   }
@@ -32,7 +32,8 @@ export function FormFieldRemoveButton(
   return (
     <button {...buttonProps} className={styles.button}>
       <Icon icon={CrossIcon} className={styles.icon} />
-      <span>{props.children}</span>
+      {/* <span>{props.children}</span> */}
+      <span>Delete</span>
     </button>
   )
 }

src/modules/form/components/FormRecord/FormRecord.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react'
 export interface FormRecordProps {
   className?: string
   children?: ReactNode
+  actions?: ReactNode
 }
 
 /**
@@ -13,6 +14,9 @@ export function FormRecord(props: FormRecordProps): JSX.Element {
   return (
     <div className={cx('flex items-end space-x-4 relative', props.className)}>
       {props.children}
+      {props.actions !== undefined ? (
+        <div className="absolute top-0 right-0">{props.actions}</div>
+      ) : null}
     </div>
   )
 }