Fix UI and UX issues in new assessment registry

the-deep · Dec 18, 2023 · 0b26131 · 0b26131
1 parent e88518a
commit 0b26131
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 107 deletions.
diff --git a/app/components/general/AddStakeholderModal/StakeholderList/StakeholderRow/index.tsx b/app/components/general/AddStakeholderModal/StakeholderList/StakeholderRow/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { IoClose } from 'react-icons/io5';
 import {
     QuickActionButton,
@@ -7,7 +7,7 @@ import {
 
 export interface Props {
     className?: string;
-    onRemove: (index: string) => void;
+    onRemove: (value: string) => void;
     value: string;
     displayValue?: string;
 }
@@ -20,18 +20,14 @@ function StakeholderRow(props: Props) {
         displayValue,
     } = props;
 
-    const handleClick = useCallback(() => {
-        onRemove(value);
-    }, [value, onRemove]);
-
     return (
         <div className={className}>
             <ElementFragments
                 actions={(
                     <QuickActionButton
                         title="Remove"
-                        name={undefined}
-                        onClick={handleClick}
+                        name={value}
+                        onClick={onRemove}
                     >
                         <IoClose />
                     </QuickActionButton>

diff --git a/app/components/general/AddStakeholderModal/StakeholderList/index.tsx b/app/components/general/AddStakeholderModal/StakeholderList/index.tsx
@@ -78,7 +78,7 @@ function StakeholderList(props: Props) {
 
     const onRowRemove = useCallback((id: string) => {
         if (value) {
-            onChange(value.filter((v) => v.organization !== id), name);
+            onChange(value.filter((v) => v.clientId !== id), name);
         }
     }, [value, name, onChange]);
 

diff --git a/app/views/EditAry/AssessmentRegistryForm/AdditionalDocument/FileUpload/index.tsx b/app/views/EditAry/AssessmentRegistryForm/AdditionalDocument/FileUpload/index.tsx
@@ -55,6 +55,11 @@ function FileUpload(props: Props) {
         }), [handleFileRemove, uploadedList],
     );
 
+    const handleExternalLinkChange = useCallback((newLink: string | undefined) => {
+        setExternalLink(newLink);
+        setURLError(undefined);
+    }, []);
+
     const handleExternalLinkAdd = useCallback(() => {
         const isUrl = isValidUrl(externalLink ?? '');
         if (!isUrl) {
@@ -68,11 +73,11 @@ function FileUpload(props: Props) {
             documentType: name,
             externalLink,
         });
-        setExternalLink(undefined);
+        handleExternalLinkChange(undefined);
     }, [
         name,
         externalLink,
-        setExternalLink,
+        handleExternalLinkChange,
         onSuccess,
     ]);
 
@@ -100,7 +105,7 @@ function FileUpload(props: Props) {
                                     placeholder="External Link"
                                     name="externalLink"
                                     value={externalLink}
-                                    onChange={setExternalLink}
+                                    onChange={handleExternalLinkChange}
                                     error={urlError}
                                 />
                                 <Button

diff --git a/app/views/EditAry/AssessmentRegistryForm/AdditionalDocument/index.tsx b/app/views/EditAry/AssessmentRegistryForm/AdditionalDocument/index.tsx
@@ -119,7 +119,6 @@ function AdditionalDocument(props: Props) {
                 name="ASSESSMENT_DATABASE"
                 onSuccess={handleFileUploadSuccess}
                 handleFileRemove={handleFileRemove}
-                acceptFileType=".pdf"
                 value={assessmentFiles}
                 uploadedList={uploadedList}
                 supportLinkAddition
@@ -129,7 +128,6 @@ function AdditionalDocument(props: Props) {
                 name="QUESTIONNAIRE"
                 onSuccess={handleFileUploadSuccess}
                 handleFileRemove={handleFileRemove}
-                acceptFileType=".pdf"
                 value={questionnaireFiles}
                 uploadedList={uploadedList}
             />

diff --git a/app/views/EditAry/AssessmentRegistryForm/MetadataForm/styles.css b/app/views/EditAry/AssessmentRegistryForm/MetadataForm/styles.css
@@ -4,7 +4,7 @@
     grid-column: auto;
     grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
     gap: var(--dui-spacing-large);
-    padding: var(--dui-spacing-large);
+    padding: var(--dui-spacing-medium);
     overflow: auto;
 
     .form-element {
@@ -17,12 +17,12 @@
         .inputs {
             display: flex;
             flex-direction: column;
-            gap: var(--dui-spacing-extra-small);
+            gap: var(--dui-spacing-small);
         }
     }
 
     .stakeholder-form {
-        grid-column: 1 /5;
+        grid-column: 1 / 5;
         grid-row: 2;
     }
 }
diff --git a/...views/EditAry/AssessmentRegistryForm/MethodologyForm/MethodologyAttributesInput/index.tsx b/...views/EditAry/AssessmentRegistryForm/MethodologyForm/MethodologyAttributesInput/index.tsx
@@ -73,34 +73,38 @@ function MethodologyAttributesInput(props: Props) {
         defaultMethodologyAttributeValue,
     );
 
+    const disableOtherFields = value.dataCollectionTechnique === 'SECONDARY_DATA_REVIEW';
+
     return (
         <div className={_cs(styles.attributesForm, className)}>
-            <SelectInput
-                className={_cs(styles.attributeInput, itemClassName)}
-                label="Data collection technique"
-                placeholder="Select an option"
-                name="dataCollectionTechnique"
-                options={options?.dataCollectionTechniqueOptions?.enumValues as EnumOptions<
-                    AssessmentRegistryDataCollectionTechniqueTypeEnum
-                >}
-                keySelector={enumKeySelector}
-                labelSelector={enumLabelSelector}
-                onChange={onAttributeChange}
-                value={value.dataCollectionTechnique}
-                error={error?.dataCollectionTechnique}
-                disabled={disabled}
-                readOnly={readOnly}
-            />
+            <div className={itemClassName}>
+                <SelectInput
+                    className={styles.attributeInput}
+                    label="Data collection technique"
+                    placeholder="Select an option"
+                    name="dataCollectionTechnique"
+                    options={options?.dataCollectionTechniqueOptions?.enumValues as EnumOptions<
+                        AssessmentRegistryDataCollectionTechniqueTypeEnum
+                    >}
+                    keySelector={enumKeySelector}
+                    labelSelector={enumLabelSelector}
+                    onChange={onAttributeChange}
+                    value={value.dataCollectionTechnique}
+                    error={error?.dataCollectionTechnique}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                />
+            </div>
             <div className={itemClassName}>
                 <div className={styles.samplingInput}>
                     <NumberInput
                         className={styles.attributeInput}
                         label="Sampling size"
                         name="samplingSize"
                         onChange={onAttributeChange}
-                        value={value.samplingSize}
                         error={error?.samplingSize}
-                        disabled={disabled}
+                        value={!disableOtherFields ? value.samplingSize : undefined}
+                        disabled={disabled || disableOtherFields}
                         readOnly={readOnly}
                     />
                     <SelectInput
@@ -114,61 +118,67 @@ function MethodologyAttributesInput(props: Props) {
                         keySelector={enumKeySelector}
                         labelSelector={enumLabelSelector}
                         onChange={onAttributeChange}
-                        value={value.samplingApproach}
+                        value={!disableOtherFields ? value.samplingApproach : undefined}
                         error={error?.samplingApproach}
-                        disabled={disabled}
+                        disabled={disabled || disableOtherFields}
                         readOnly={readOnly}
                     />
                 </div>
             </div>
-            <SelectInput
-                className={_cs(styles.attributeInput, itemClassName)}
-                label="Proximity"
-                placeholder="Select an option"
-                name="proximity"
-                options={options?.proximity?.enumValues as EnumOptions<
-                    AssessmentRegistryProximityTypeEnum
-                >}
-                keySelector={enumKeySelector}
-                labelSelector={enumLabelSelector}
-                onChange={onAttributeChange}
-                value={value.proximity}
-                error={error?.proximity}
-                disabled={disabled}
-                readOnly={readOnly}
-            />
-            <SelectInput
-                className={_cs(styles.attributeInput, itemClassName)}
-                label="Unit of analysis"
-                placeholder="Select an option"
-                name="unitOfAnalysis"
-                options={options?.unitOfAnanlysis?.enumValues as EnumOptions<
-                    AssessmentRegistryUnitOfAnalysisTypeEnum
-                >}
-                keySelector={enumKeySelector}
-                labelSelector={enumLabelSelector}
-                onChange={onAttributeChange}
-                value={value.unitOfAnalysis}
-                error={error?.unitOfAnalysis}
-                disabled={disabled}
-                readOnly={readOnly}
-            />
-            <SelectInput
-                className={_cs(styles.attributeInput, itemClassName)}
-                label="Unit of reporting"
-                placeholder="Select an option"
-                name="unitOfReporting"
-                options={options?.unitOfReporting?.enumValues as EnumOptions<
-                    AssessmentRegistryUnitOfReportingTypeEnum
-                >}
-                keySelector={enumKeySelector}
-                labelSelector={enumLabelSelector}
-                onChange={onAttributeChange}
-                value={value.unitOfReporting}
-                error={error?.unitOfReporting}
-                disabled={disabled}
-                readOnly={readOnly}
-            />
+            <div className={itemClassName}>
+                <SelectInput
+                    className={styles.attributeInput}
+                    label="Proximity"
+                    placeholder="Select an option"
+                    name="proximity"
+                    options={options?.proximity?.enumValues as EnumOptions<
+                        AssessmentRegistryProximityTypeEnum
+                    >}
+                    keySelector={enumKeySelector}
+                    labelSelector={enumLabelSelector}
+                    onChange={onAttributeChange}
+                    value={!disableOtherFields ? value.proximity : undefined}
+                    error={error?.proximity}
+                    disabled={disabled || disableOtherFields}
+                    readOnly={readOnly}
+                />
+            </div>
+            <div className={itemClassName}>
+                <SelectInput
+                    className={styles.attributeInput}
+                    label="Unit of analysis"
+                    placeholder="Select an option"
+                    name="unitOfAnalysis"
+                    options={options?.unitOfAnanlysis?.enumValues as EnumOptions<
+                        AssessmentRegistryUnitOfAnalysisTypeEnum
+                    >}
+                    keySelector={enumKeySelector}
+                    labelSelector={enumLabelSelector}
+                    onChange={onAttributeChange}
+                    value={!disableOtherFields ? value.unitOfAnalysis : undefined}
+                    error={error?.unitOfAnalysis}
+                    disabled={disabled || disableOtherFields}
+                    readOnly={readOnly}
+                />
+            </div>
+            <div className={itemClassName}>
+                <SelectInput
+                    className={styles.attributeInput}
+                    label="Unit of reporting"
+                    placeholder="Select an option"
+                    name="unitOfReporting"
+                    options={options?.unitOfReporting?.enumValues as EnumOptions<
+                        AssessmentRegistryUnitOfReportingTypeEnum
+                    >}
+                    keySelector={enumKeySelector}
+                    labelSelector={enumLabelSelector}
+                    onChange={onAttributeChange}
+                    value={!disableOtherFields ? value.unitOfReporting : undefined}
+                    error={error?.unitOfReporting}
+                    disabled={disabled || disableOtherFields}
+                    readOnly={readOnly}
+                />
+            </div>
             <QuickActionButton
                 title="Remove Attributes"
                 name={index}

diff --git a/...iews/EditAry/AssessmentRegistryForm/MethodologyForm/MethodologyAttributesInput/styles.css b/...iews/EditAry/AssessmentRegistryForm/MethodologyForm/MethodologyAttributesInput/styles.css
@@ -2,10 +2,6 @@
     display: flex;
     gap: var(--dui-spacing-large);
 
-    .attribute-input {
-        display: block;
-    }
-
     .sampling-input {
         display: flex;
         gap: var(--dui-spacing-extra-small);

diff --git a/app/views/EditAry/AssessmentRegistryForm/formSchema.ts b/app/views/EditAry/AssessmentRegistryForm/formSchema.ts
@@ -2,12 +2,13 @@ import {
     ArraySchema,
     defaultEmptyArrayType,
     ObjectSchema,
+    forceNullType,
     PartialForm,
     defaultUndefinedType,
     PurgeNull,
     requiredCondition,
 } from '@togglecorp/toggle-form';
-import { randomString } from '@togglecorp/fujs';
+import { randomString, isDefined } from '@togglecorp/fujs';
 import {
     AssessmentRegistryCreateInputType,
     ProjectOrganizationGqInputType,
@@ -138,30 +139,55 @@ export const schema: FormSchema = {
             methodologyAttributes: {
                 keySelector: (attribute) => attribute.clientId,
                 member: (): MethodologyAttributesFormSchemaMember => ({
-                    fields: (): MethodologyAttributesSchemaFields => ({
-                        id: [defaultUndefinedType],
-                        clientId: [requiredCondition],
-                        dataCollectionTechnique: [requiredCondition],
-                        samplingApproach: [requiredCondition],
-                        samplingSize: [requiredCondition],
-                        proximity: [requiredCondition],
-                        unitOfAnalysis: [requiredCondition],
-                        unitOfReporting: [requiredCondition],
-                    }),
+                    fields: (methodology): MethodologyAttributesSchemaFields => {
+                        if (methodology?.dataCollectionTechnique === 'SECONDARY_DATA_REVIEW') {
+                            return ({
+                                id: [defaultUndefinedType],
+                                clientId: [requiredCondition],
+                                dataCollectionTechnique: [requiredCondition],
+                                samplingApproach: [forceNullType],
+                                samplingSize: [forceNullType],
+                                proximity: [forceNullType],
+                                unitOfAnalysis: [forceNullType],
+                                unitOfReporting: [forceNullType],
+                            });
+                        }
+                        return ({
+                            id: [defaultUndefinedType],
+                            clientId: [requiredCondition],
+                            dataCollectionTechnique: [requiredCondition],
+                            samplingApproach: [],
+                            samplingSize: [],
+                            proximity: [],
+                            unitOfAnalysis: [],
+                            unitOfReporting: [],
+                        });
+                    },
                 }),
             },
             executiveSummary: [],
             additionalDocuments: [defaultEmptyArrayType],
             scoreRatings: {
                 keySelector: (score) => score.clientId,
                 member: (): ScoreRatingsFormSchemaMember => ({
-                    fields: (): ScoreRatingsSchemaFields => ({
-                        id: [defaultUndefinedType],
-                        clientId: [requiredCondition],
-                        rating: [],
-                        reason: [],
-                        scoreType: [],
-                    }),
+                    fields: (scoreValue): ScoreRatingsSchemaFields => {
+                        if (isDefined(scoreValue?.rating) || isDefined(scoreValue?.reason)) {
+                            return ({
+                                id: [defaultUndefinedType],
+                                clientId: [requiredCondition],
+                                rating: [requiredCondition],
+                                reason: [requiredCondition],
+                                scoreType: [],
+                            });
+                        }
+                        return ({
+                            id: [defaultUndefinedType],
+                            clientId: [requiredCondition],
+                            rating: [],
+                            reason: [],
+                            scoreType: [],
+                        });
+                    },
                 }),
             },
             scoreAnalyticalDensity: {