temp

the-deep · Aug 16, 2023 · 921e663 · 921e663
1 parent 81fc5d5
commit 921e663
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 21 deletions.
diff --git a/src/components/TocList/index.module.css b/src/components/TocList/index.module.css
diff --git a/src/components/TocList/index.tsx b/src/components/TocList/index.tsx
@@ -0,0 +1,70 @@
+import { useState, useCallback } from 'react';
+import SortableList, { Attributes, Listeners } from '#components/SortableList';
+
+import styles from './index.module.css';
+
+interface QuestionGroup {
+    id: string;
+    label: string;
+    name: string;
+    parentId: string;
+    questionnaireId: string;
+    relevant?: string;
+}
+
+function reorder<T extends { order?: number }>(data: T[]) {
+    return data.map((v, i) => ({ ...v, order: i + 1 }));
+}
+
+const keySelector = (g: QuestionGroup) => g.id;
+
+interface Props<P> {
+    parentId: string | null;
+    options: QuestionGroup[];
+    renderer: (props: P & {
+        listeners?: Listeners;
+        attributes?: Attributes;
+    }) => JSX.Element;
+    rendererParams: P;
+}
+
+function TocList<P>(props: Props<P>) {
+    const {
+        parentId,
+        options,
+        renderer,
+        rendererParams,
+    } = props;
+
+    const filteredOptions = options?.filter(
+        (group: QuestionGroup) => group.parentId === parentId,
+    );
+
+    const [
+        orderedFilteredOptions,
+        setFilteredOrderedOptions,
+    ] = useState<QuestionGroup[] | undefined>(filteredOptions);
+
+    const handleGroupOrderChange = useCallback((...args: QuestionGroup[]) => {
+        setFilteredOrderedOptions(args);
+    }, []);
+
+    return (
+        <SortableList
+            className={styles.sortableList}
+            name="toc"
+            onChange={handleGroupOrderChange}
+            data={orderedFilteredOptions}
+            keySelector={keySelector}
+            renderer={renderer}
+            rendererParams={rendererParams}
+            direction="vertical"
+            emptyMessage="No groups found"
+            messageShown
+            messageIconShown
+            compactEmptyMessage
+        />
+    );
+}
+
+export default TocList;
diff --git a/src/views/QuestionnaireEdit/index.tsx b/src/views/QuestionnaireEdit/index.tsx
@@ -33,6 +33,7 @@ import {
 
 import SubNavbar from '#components/SubNavbar';
 import SortableList, { Attributes, Listeners } from '#components/SortableList';
+import TocList from '#components/TocList';
 import {
     QuestionnaireQuery,
     QuestionnaireQueryVariables,
@@ -119,6 +120,7 @@ interface QuestionGroupProps {
     item: QuestionGroup;
     attributes?: Attributes;
     listeners?: Listeners;
+    options: QuestionGroup[];
 }
 
 function QuestionGroupItem(props: QuestionGroupProps) {
@@ -127,8 +129,15 @@ function QuestionGroupItem(props: QuestionGroupProps) {
         item,
         attributes,
         listeners,
+        options,
     } = props;
 
+    const rendererParams = useCallback((key: string, datum: QuestionGroup) => ({
+        id: key,
+        item: datum,
+        options,
+    }), [options]);
+
     return (
         <Container
             headerIcons={(
@@ -147,7 +156,14 @@ function QuestionGroupItem(props: QuestionGroupProps) {
             className={styles.groupItem}
             heading={item.label}
             headingSize="extraSmall"
-        />
+        >
+            <TocList
+                parentId={item.id}
+                options={options}
+                renderer={QuestionGroupItem}
+                rendererParams={rendererParams}
+            />
+        </Container>
     );
 }
 
@@ -182,10 +198,6 @@ const questionTypes: QuestionType[] = [
 const questionTypeKeySelector = (q: QuestionType) => q.key;
 const PAGE_SIZE = 15;
 
-function reorder<T extends { order?: number }>(data: T[]) {
-    return data.map((v, i) => ({ ...v, order: i + 1 }));
-}
-
 // FIXME: The type is not right
 interface QuestionnaireParams {
     projectId: string | undefined;
@@ -247,7 +259,6 @@ export function Component() {
     const questionsData = questionnaireResponse?.private.projectScope?.questions?.items;
 
     const questionGroups = questionnaireResponse?.private.projectScope?.groups.items;
-    const filteredParentGroups = questionGroups?.filter((group) => group.parentId === null);
 
     const questionTypeRendererParams = useCallback((key: string, data: QuestionType) => ({
         questionType: data,
@@ -265,10 +276,6 @@ export function Component() {
         item: data,
     }), []);
 
-    const handleGroupOrderChange = useCallback((...args) => {
-            console.warn('here', args);
-    }, []);
-
     if (isNotDefined(projectId) || isNotDefined(questionnaireId)) {
         return undefined;
     }
@@ -295,19 +302,11 @@ export function Component() {
                     heading="Select Questions"
                     contentClassName={styles.leftContent}
                 >
-                    <SortableList
-                        className={styles.sortableList}
-                        name="toc"
-                        onChange={handleGroupOrderChange}
-                        data={filteredParentGroups}
-                        keySelector={questionGroupKeySelector}
+                    <TocList
+                        options={questionGroups}
                         renderer={QuestionGroupItem}
                         rendererParams={tocRendererParams}
-                        direction="vertical"
-                        emptyMessage="No groups found"
-                        messageShown
-                        messageIconShown
-                        compactEmptyMessage
+                        parentId={null}
                     />
                 </Container>
                 <div className={styles.content}>