feat: ui-improvements - enhance usability in forms

au-research · Feb 10, 2025 · 8552b02 · 8552b02
1 parent e14891e
commit 8552b02
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 40 deletions.
diff --git a/api-svc/raid-api/src/main/resources/application-dev.yaml b/api-svc/raid-api/src/main/resources/application-dev.yaml
@@ -7,7 +7,7 @@ raid:
     host: localhost
     port: 7432
     name: raido
-#    encryption-key: pB7MB3iuYmmjWMTOCK6HS0JetzWhCtBtKoNl39pBr3Q=
+    encryption-key: pB7MB3iuYmmjWMTOCK6HS0JetzWhCtBtKoNl39pBr3Q=
   iam:
     realm-uri: http://localhost:8001/realms/raid
 spring:

diff --git a/raid-agency-app/src/components/anchor-buttons/component/AnchorButton.tsx b/raid-agency-app/src/components/anchor-buttons/component/AnchorButton.tsx
@@ -12,11 +12,15 @@ interface AnchorButtonProps {
 export const AnchorButton = memo(
   ({ itemKey, label, count, hasError }: AnchorButtonProps) => {
     const handleClick = useCallback(() => {
-      document.getElementById(itemKey)?.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-        inline: "nearest",
-      });
+      const element = document.getElementById(itemKey);
+      if (element) {
+        const elementPosition =
+          element.getBoundingClientRect().top + window.scrollY - 60;
+        window.scrollTo({
+          top: elementPosition,
+          behavior: "smooth",
+        });
+      }
     }, [itemKey]);
 
     return (

diff --git a/raid-agency-app/src/components/dynamic-form/DynamicForm.tsx b/raid-agency-app/src/components/dynamic-form/DynamicForm.tsx
@@ -69,6 +69,7 @@ export const DynamicForm = memo(
       <Card
         sx={getErrorCardStyles(errors && errors[entityKey as keyof RaidDto])}
         data-testid={`dynamic-form-${entityKey}`}
+        id={entityKey}
       >
         <CardHeader title={labelPlural} />
         <CardContent>

diff --git a/raid-agency-app/src/components/raid-form/RaidForm.tsx b/raid-agency-app/src/components/raid-form/RaidForm.tsx
@@ -102,11 +102,13 @@ export const FlatFormComponent = memo(
   ({
     DetailsFormComponent,
     labelPlural,
+    id,
   }: {
     DetailsFormComponent: React.ComponentType<{}>;
     labelPlural: string;
+    id: string;
   }) => (
-    <Card data-testid={`dynamic-form-${labelPlural.toLowerCase()}`}>
+    <Card id={id} data-testid={`dynamic-form-${labelPlural.toLowerCase()}`}>
       <CardHeader title={labelPlural} />
       <CardContent>
         <DetailsFormComponent />
@@ -401,6 +403,7 @@ export const RaidForm = memo(
                       key={config.id}
                       labelPlural={config.labelPlural}
                       DetailsFormComponent={config.DetailsFormComponent}
+                      id={config.id}
                     />
                   );
                 }

diff --git a/raid-agency-app/src/entities/access/AccessDisplay.tsx b/raid-agency-app/src/entities/access/AccessDisplay.tsx
@@ -28,25 +28,31 @@ const AccessDisplay = memo(({ data }: { data: Access }) => {
       labelPlural="Access"
       children={
         <Grid container spacing={2}>
-          <DisplayItem
-            label="Statement"
-            value={data?.statement?.text}
-            width={6}
-          />
-          <DisplayItem label="Language" value={languageMappedValue} width={6} />
           <DisplayItem
             label="Access Type"
             value={accessTypeMappedValue}
-            width={3}
+            width={6}
           />
           {hasEmbargoedAccess && (
-            <DisplayItem
-              label="Embargo Expiry Date"
-              value={dateDisplayFormatter(
-                dayjs(data?.embargoExpiry).format("YYYY-MM-DD")
-              )}
-              width={3}
-            />
+            <>
+              <DisplayItem
+                label="Statement"
+                value={data?.statement?.text}
+                width={12}
+              />
+              <DisplayItem
+                label="Language"
+                value={languageMappedValue}
+                width={6}
+              />
+              <DisplayItem
+                label="Embargo Expiry Date"
+                value={dateDisplayFormatter(
+                  dayjs(data?.embargoExpiry).format("YYYY-MM-DD")
+                )}
+                width={6}
+              />
+            </>
           )}
         </Grid>
       }

diff --git a/raid-agency-app/src/entities/access/AccessForm.tsx b/raid-agency-app/src/entities/access/AccessForm.tsx
@@ -26,28 +26,31 @@ const AccessForm = memo(({ errors }: { errors: FieldErrors<RaidDto> }) => {
 
   return (
     <Grid container spacing={2}>
-      <TextInputField
-        name={`access.statement.text`}
-        label="Access Statement"
-        required={true}
-        width={6}
-      />
-      <LanguageSelector name={`access.statement.language.id`} width={6} />
       <TextSelectField
         options={accessTypeOptions}
         name={`access.type.id`}
         label="Access Type"
         required={true}
-        width={3}
+        width={6}
       />
-      {/* Show embargo expiry date if access type is c_f1cf */}
+      {/* Show embargo related fields only if access type is c_f1cf (embargoed) */}
       {accessTypeId?.includes("c_f1cf/") && (
-        <DateInputField
-          name="access.embargoExpiry"
-          label="Embargo Expiry Date"
-          required={true}
-          width={3}
-        />
+        <>
+          <TextInputField
+            name={`access.statement.text`}
+            label="Access Statement"
+            required={true}
+            width={12}
+          />
+          <LanguageSelector name={`access.statement.language.id`} width={6} />
+
+          <DateInputField
+            name="access.embargoExpiry"
+            label="Embargo Expiry Date"
+            required={true}
+            width={6}
+          />
+        </>
       )}
     </Grid>
   );

diff --git a/raid-agency-app/src/entities/title/data-components/title-validation-schema.ts b/raid-agency-app/src/entities/title/data-components/title-validation-schema.ts
@@ -14,15 +14,15 @@ const titleTypeValidationSchema = z.object({
 });
 
 const titleLanguageValidationSchema = z.object({
-  id: z.string().min(1),
+  id: z.string(),
   schemaUri: z.literal(languageSchema[0].uri),
 });
 
 export const singleTitleValidationSchema = z
   .object({
     text: z.string().min(1),
     type: titleTypeValidationSchema,
-    language: titleLanguageValidationSchema,
+    language: titleLanguageValidationSchema.optional(),
     startDate: dateStringSchema,
     endDate: dateStringSchema.optional(),
   })

diff --git a/raid-agency-app/src/fields/LanguageSelector.tsx b/raid-agency-app/src/fields/LanguageSelector.tsx
@@ -14,7 +14,7 @@ export default function LanguageSelector({
   name,
   helperText,
   errorText,
-  required,
+  required = false,
   width = 12,
 }: FormFieldProps) {
   const {
@@ -63,7 +63,7 @@ export default function LanguageSelector({
               variant="filled"
               size="small"
               label="Language"
-              required
+              required={required}
             />
           );
         }}