Merge pull request #2928 from the-deep/feature/analytical-entries-arr…

…ow-button Arrow button to sort entries in pillar analysis
the-deep · May 9, 2024 · b5af18c · b5af18c
2 parents 255cae4 + 8d6a18f
commit b5af18c
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 2 deletions.
diff --git a/app/views/PillarAnalysis/AnalyticalStatementInput/AnalyticalEntryInput/index.tsx b/app/views/PillarAnalysis/AnalyticalStatementInput/AnalyticalEntryInput/index.tsx
@@ -6,6 +6,8 @@ import {
     IoOpenOutline,
     IoPencilOutline,
     IoRepeat,
+    IoArrowDownOutline,
+    IoArrowUpOutline,
 } from 'react-icons/io5';
 import {
     DropContainer,
@@ -20,7 +22,10 @@ import {
     Error,
     getErrorObject,
 } from '@togglecorp/toggle-form';
-import { _cs } from '@togglecorp/fujs';
+import {
+    _cs,
+    isDefined,
+} from '@togglecorp/fujs';
 
 import { useModalState } from '#hooks/stateManagement';
 import _ts from '#ts';
@@ -53,7 +58,15 @@ interface AnalyticalEntryInputProps {
         droppedValue: DroppedValue,
         dropOverEntryClientId: string | undefined,
     ) => void;
+    onAnalyticalEntryDown: (
+        dropOverEntryClientId: string,
+    ) => void;
+    onAnalyticalEntryUp: (
+        dropOverEntryClientId: string,
+    ) => void;
     dropDisabled?: boolean;
+    entryUpButtonDisable?: boolean;
+    entryDownButtonDisable?: boolean;
     framework: Framework;
     projectId: string;
     geoAreaOptions: GeoArea[] | undefined | null;
@@ -71,12 +84,16 @@ function AnalyticalEntryInput(props: AnalyticalEntryInputProps) {
         index,
         statementClientId,
         onAnalyticalEntryDrop,
+        onAnalyticalEntryDown,
+        onAnalyticalEntryUp,
         dropDisabled,
         framework,
         projectId,
         geoAreaOptions,
         setGeoAreaOptions,
         onEntryDataChange,
+        entryUpButtonDisable,
+        entryDownButtonDisable,
     } = props;
 
     const error = getErrorObject(riskyError);
@@ -195,6 +212,28 @@ function AnalyticalEntryInput(props: AnalyticalEntryInputProps) {
                 headerActionsContainerClassName={styles.headerActions}
                 headerActions={(
                     <>
+                        {isDefined(value?.clientId) && (
+                            <>
+                                <QuickActionButton
+                                    name={value.clientId}
+                                    title="Move entry up"
+                                    variant="transparent"
+                                    onClick={onAnalyticalEntryUp}
+                                    disabled={entryUpButtonDisable}
+                                >
+                                    <IoArrowUpOutline />
+                                </QuickActionButton>
+                                <QuickActionButton
+                                    name={value.clientId}
+                                    title="Move entry down"
+                                    variant="transparent"
+                                    onClick={onAnalyticalEntryDown}
+                                    disabled={entryDownButtonDisable}
+                                >
+                                    <IoArrowDownOutline />
+                                </QuickActionButton>
+                            </>
+                        )}
                         <QuickActionLink
                             title="Edit entry"
                             to={editEntryLink}

diff --git a/app/views/PillarAnalysis/AnalyticalStatementInput/AnalyticalEntryInput/styles.css b/app/views/PillarAnalysis/AnalyticalStatementInput/AnalyticalEntryInput/styles.css
@@ -32,7 +32,7 @@
 
             .authors {
                 display: inline-block;
-                max-width: 100px;
+                max-width: 80px;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
@@ -47,9 +47,15 @@
                 }
             }
             .header-actions {
+                display: flex;
                 transition: all var(--dui-duration-transition-medium) ease-in-out;
                 opacity: 0;
                 color: var(--dui-color-accent);
+                gap: var(--dui-spacing-super-small);
+                > * {
+                    padding: var(--dui-spacing-extra-small);
+                    font-size: var(--dui-font-size-small);
+                }
             }
         }
 

diff --git a/app/views/PillarAnalysis/AnalyticalStatementInput/index.tsx b/app/views/PillarAnalysis/AnalyticalStatementInput/index.tsx
@@ -320,6 +320,54 @@ function AnalyticalStatementInput(props: AnalyticalStatementInputProps) {
         ],
     );
 
+    const handleAnalyticalEntryUp = useCallback(
+        (dropOverEntryClientId?: string) => (
+            onFieldChange(
+                (oldEntries: AnalyticalEntry) => {
+                    const { entries } = value;
+                    const fromIndex = entries?.findIndex(
+                        (entry) => entry.clientId === dropOverEntryClientId,
+                    );
+                    if (isNotDefined(fromIndex)) {
+                        return oldEntries;
+                    }
+
+                    const modifyingEntries = [...(oldEntries ?? [])];
+                    const element = modifyingEntries[fromIndex];
+                    const toIndex = fromIndex - 1;
+                    modifyingEntries.splice(fromIndex, 1);
+                    modifyingEntries.splice(toIndex, 0, element);
+
+                    return modifyingEntries;
+                },
+                'entries' as const,
+            )), [value, onFieldChange],
+    );
+
+    const handleAnalyticalEntryDown = useCallback(
+        (dropOverEntryClientId?: string) => (
+            onFieldChange(
+                (oldEntries: AnalyticalEntry) => {
+                    const { entries } = value;
+                    const fromIndex = entries?.findIndex(
+                        (entry) => entry.clientId === dropOverEntryClientId,
+                    );
+                    if (isNotDefined(fromIndex)) {
+                        return oldEntries;
+                    }
+
+                    const modifyingEntries = [...(oldEntries ?? [])];
+                    const element = modifyingEntries[fromIndex];
+                    const toIndex = fromIndex + 1;
+                    modifyingEntries.splice(fromIndex, 1);
+                    modifyingEntries.splice(toIndex, 0, element);
+
+                    return reorder(modifyingEntries);
+                },
+                'entries' as const,
+            )), [value, onFieldChange],
+    );
+
     const handleAnalyticalEntryAdd = useCallback(
         (val: Record<string, unknown> | undefined) => {
             if (!val) {
@@ -540,13 +588,17 @@ function AnalyticalStatementInput(props: AnalyticalStatementInputProps) {
                                     statementClientId={value.clientId}
                                     value={analyticalEntry}
                                     projectId={projectId}
+                                    entryUpButtonDisable={myIndex === 0}
+                                    entryDownButtonDisable={value.entries?.length === myIndex + 1}
                                     // onChange={onAnalyticalEntryChange}
                                     onRemove={onAnalyticalEntryRemove}
                                     error={(
                                         analyticalEntry.clientId
                                             ? arrayError?.[analyticalEntry.clientId] : undefined
                                     )}
                                     onAnalyticalEntryDrop={handleAnalyticalEntryDrop}
+                                    onAnalyticalEntryUp={handleAnalyticalEntryUp}
+                                    onAnalyticalEntryDown={handleAnalyticalEntryDown}
                                     framework={framework}
                                     geoAreaOptions={geoAreaOptions}
                                     setGeoAreaOptions={setGeoAreaOptions}