Add table of contents in reporting module

the-deep · Sep 1, 2023 · 4856723 · 4856723
1 parent 5ff9f0a
commit 4856723
Show file tree

Hide file tree

Showing 7 changed files with 251 additions and 106 deletions.
diff --git a/app/views/ReportEdit/ReportBuilder/ReportContainer/index.tsx b/app/views/ReportEdit/ReportBuilder/ReportContainer/index.tsx
@@ -16,6 +16,8 @@ import {
     Kraken,
     Footer,
     Button,
+    SegmentInput,
+    QuickActionDropdownMenu,
     Modal,
     QuickActionButton,
     QuickActionConfirmButton,
@@ -47,12 +49,14 @@ import Content from './Content';
 
 import styles from './styles.css';
 
+const widthSelector = (item: { width: number }) => item.width;
+
 interface Props {
     className?: string;
     row?: number;
     column?: number;
     width?: number;
-    index: number;
+    containerKey?: string;
     allItems: ReportContainerType[] | undefined;
     contentType: AnalysisReportContainerContentTypeEnum | undefined;
     configuration: ContentConfigType | undefined;
@@ -68,14 +72,16 @@ function ReportContainer(props: Props) {
         row = 1,
         column = 1,
         width = 1,
-        index,
         allItems,
         configuration,
+        containerKey,
         setFieldValue,
         readOnly,
         disabled,
     } = props;
 
+    const index = allItems?.findIndex((item) => item.clientId === containerKey);
+
     const {
         setValue: onReportContainerChange,
         removeValue,
@@ -85,7 +91,9 @@ function ReportContainer(props: Props) {
     );
 
     const handleItemRemove = useCallback(() => {
-        removeValue(index);
+        if (isDefined(index)) {
+            removeValue(index);
+        }
     }, [
         index,
         removeValue,
@@ -132,6 +140,10 @@ function ReportContainer(props: Props) {
         sum(rowItems.map((item) => item.width).filter(isDefined))
     ), [rowItems]);
 
+    const widthOptions = useMemo(() => (
+        Array.from({ length: (12 - (totalColSpan - width)) - 2 }, (_, i) => ({ width: i + 3 }))
+    ), [totalColSpan, width]);
+
     const disableAddButtons = totalColSpan >= 12;
 
     const handleAddBeforeClick = useCallback(() => {
@@ -147,10 +159,15 @@ function ReportContainer(props: Props) {
 
         setFieldValue((oldVal: ReportContainerType[] | undefined = []) => {
             const newVal = oldVal.filter((item) => item.row !== row);
-            return [
+            const newItems = [
                 ...newVal,
                 ...orderedItems,
             ];
+            newItems.sort((a, b) => (
+                compareNumber(a.row, b.row) || compareNumber(a.column, b.column)
+            ));
+
+            return newItems;
         }, 'containers');
     }, [
         setFieldValue,
@@ -174,10 +191,15 @@ function ReportContainer(props: Props) {
 
         setFieldValue((oldVal: ReportContainerType[] | undefined = []) => {
             const newVal = oldVal.filter((item) => item.row !== row);
-            return [
+            const newItems = [
                 ...newVal,
                 ...orderedItems,
             ];
+            newItems.sort((a, b) => (
+                compareNumber(a.row, b.row) || compareNumber(a.column, b.column)
+            ));
+
+            return newItems;
         }, 'containers');
     }, [
         setFieldValue,
@@ -197,8 +219,8 @@ function ReportContainer(props: Props) {
                 clientId: randomString(),
                 width: 6,
             };
-            const indexOfCurrentRow = oldVal.findIndex((item) => item.row === row);
-            newItems.splice(indexOfCurrentRow, 0, newItem);
+            const indexOfCurrentRowBefore = oldVal.findIndex((item) => item.row === row);
+            newItems.splice(indexOfCurrentRowBefore, 0, newItem);
             return newItems.map((item) => ({
                 ...item,
                 row: ((item.row ?? 0) >= newItem.row && item.clientId !== newItem.clientId)
@@ -220,8 +242,8 @@ function ReportContainer(props: Props) {
                 clientId: randomString(),
                 width: 6,
             };
-            const indexOfRowAfter = oldVal.findIndex((item) => item.row === row + 1);
-            newItems.splice(indexOfRowAfter, 0, newItem);
+            const indexOfRow = oldVal.findIndex((item) => item.row === row);
+            newItems.splice(indexOfRow + 1, 0, newItem);
             return newItems.map((item) => ({
                 ...item,
                 row: ((item.row ?? 0) >= newItem.row && item.clientId !== newItem.clientId)
@@ -238,9 +260,11 @@ function ReportContainer(props: Props) {
         newContentType: AnalysisReportContainerContentTypeEnum,
     ) => {
         hideContentAddModal();
+        showContentEditModal();
         onFieldChange(newContentType, 'contentType');
     }, [
         onFieldChange,
+        showContentEditModal,
         hideContentAddModal,
     ]);
 
@@ -341,6 +365,21 @@ function ReportContainer(props: Props) {
                     className={styles.footer}
                     actions={(
                         <>
+                            <QuickActionDropdownMenu
+                                label={width}
+                            >
+                                <SegmentInput
+                                    name="width"
+                                    label=""
+                                    spacing="compact"
+                                    value={width}
+                                    onChange={onFieldChange}
+                                    options={widthOptions}
+                                    keySelector={widthSelector}
+                                    labelSelector={widthSelector}
+                                    disabled={disabled}
+                                />
+                            </QuickActionDropdownMenu>
                             <QuickActionButton
                                 name={undefined}
                                 title="Edit Content"

diff --git a/app/views/ReportEdit/ReportBuilder/ReportContainer/styles.css b/app/views/ReportEdit/ReportBuilder/ReportContainer/styles.css
@@ -3,10 +3,9 @@
     position: relative;
     flex-direction: column;
     flex-wrap: wrap;
-    gap: var(--dui-spacing-small);
+    gap: var(--dui-spacing-medium);
     border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
-    padding: var(--dui-spacing-large);
-    min-height: 20rem;
+    padding: var(--dui-spacing-small);
 
     .add-button {
         position: absolute;
@@ -47,10 +46,10 @@
     }
 
     .footer {
-        display: none;
         position: absolute;
         right: var(--dui-spacing-small);
         bottom: var(--dui-spacing-small);
+        visibility: hidden;
     }
 
     .message {
@@ -68,7 +67,7 @@
         }
 
         .footer {
-            display: block;
+            visibility: unset;
         }
     }
 }
diff --git a/app/views/ReportEdit/ReportBuilder/index.tsx b/app/views/ReportEdit/ReportBuilder/index.tsx
@@ -1,14 +1,11 @@
-import React, { useMemo, useCallback } from 'react';
-import {
-    type EntriesAsList,
-} from '@togglecorp/toggle-form';
-import {
-    _cs,
-    compareNumber,
-} from '@togglecorp/fujs';
+import React, { useCallback } from 'react';
+import { _cs } from '@togglecorp/fujs';
 import {
     ListView,
 } from '@the-deep/deep-ui';
+import {
+    type EntriesAsList,
+} from '@togglecorp/toggle-form';
 
 import {
     type PartialFormType,
@@ -19,6 +16,8 @@ import ReportContainer from './ReportContainer';
 
 import styles from './styles.css';
 
+const reportContainerKeySelector = (item: ReportContainerType) => item.clientId;
+
 interface Props {
     className?: string;
     value: PartialFormType;
@@ -40,42 +39,32 @@ function ReportBuilder(props: Props) {
         (
             containerKey: string,
             item: ReportContainerType,
-            index: number,
-            allItems: ReportContainerType[] | undefined,
         ) => ({
             row: item.row,
+            containerKey,
             column: item.column,
             width: item.width,
-            allItems,
-            index,
+            allItems: value?.containers,
             configuration: item.contentConfiguration,
             contentType: item.contentType,
-            containerKey,
             setFieldValue,
             readOnly,
             disabled,
         }),
         [
+            value?.containers,
             setFieldValue,
             readOnly,
             disabled,
         ],
     );
 
-    const orderedContainers = useMemo(() => {
-        const sortedContainers = [...(value?.containers) ?? []];
-        sortedContainers.sort((a, b) => (
-            compareNumber(a.row, b.row) || compareNumber(a.column, b.column)
-        ));
-        return sortedContainers;
-    }, [value?.containers]);
-
     return (
         <div className={_cs(className, styles.reportBuilder)}>
             <ListView
                 className={styles.containers}
-                data={orderedContainers}
-                keySelector={(d) => d.clientId}
+                data={value?.containers}
+                keySelector={reportContainerKeySelector}
                 renderer={ReportContainer}
                 rendererParams={reportContainerRendererParams}
                 errored={false}

diff --git a/app/views/ReportEdit/ReportBuilder/styles.css b/app/views/ReportEdit/ReportBuilder/styles.css
@@ -5,69 +5,11 @@
 
     .containers {
         display: grid;
-        align-items: start;
         margin: 0 auto;
         box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
         padding: var(--dui-spacing-small);
         grid-template-columns: repeat(12, 1fr);
         width: 210mm;
         grid-gap: var(--dui-spacing-small);
-
-        .item {
-            display: flex;
-            position: relative;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: var(--dui-spacing-small);
-            border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
-            padding: var(--dui-spacing-large);
-            min-height: 20rem;
-
-            .add-button {
-                position: absolute;
-                transition: all 0.2s ease-in-out;
-                opacity: 0;
-            }
-
-            .before-button {
-                top: 50%;
-                left: 0;
-                transform: translateY(-50%);
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-
-            .after-button {
-                top: 50%;
-                right: 0;
-                transform: translateY(-50%);
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-
-            .above-button {
-                top: 0;
-                left: 50%;
-                transform: translateX(-50%);
-                border-top-left-radius: 0;
-                border-top-right-radius: 0;
-            }
-
-            .below-button {
-                bottom: 0;
-                left: 50%;
-                transform: translateX(-50%);
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-
-            &:hover {
-                .add-button {
-                    display: block;
-                    opacity: 1;
-                    font-size: var(--dui-font-size-large);
-                }
-            }
-        }
     }
 }