From a064ffd76f963996560b09464bacb671d07dde61 Mon Sep 17 00:00:00 2001 From: Subina Date: Mon, 4 Sep 2023 10:27:36 +0545 Subject: [PATCH] Add table of contents - Make recursive file structure - Recursively show the table of contents --- backend | 2 +- src/components/PillarSelectInput/index.tsx | 19 +- src/components/TocList/index.tsx | 107 ++++++----- src/utils/common.ts | 18 ++ .../DateQuestionForm/index.tsx | 13 +- .../FileQuestionForm/index.tsx | 13 +- .../ImageQuestionForm/index.tsx | 13 +- .../IntegerQuestionForm/index.tsx | 13 +- .../NoteQuestionForm/index.tsx | 13 +- .../QuestionPreview/index.tsx | 4 +- .../RankQuestionForm/index.tsx | 13 +- .../SelectMultipleQuestionForm/index.tsx | 8 +- .../SelectOneQuestionForm/index.tsx | 8 +- .../TextQuestionForm/index.tsx | 13 +- .../TimeQuestionForm/index.tsx | 13 +- src/views/QuestionnaireEdit/index.tsx | 172 +++++++++++++++--- src/views/QuestionnaireEdit/queries.ts | 4 +- 17 files changed, 302 insertions(+), 144 deletions(-) create mode 100644 src/utils/common.ts diff --git a/backend b/backend index b74c7f5..d431247 160000 --- a/backend +++ b/backend @@ -1 +1 @@ -Subproject commit b74c7f5c063596f8897e7e6ed1729617cab655a0 +Subproject commit d43124740acee56dca9db19fef452dbc76c7ae40 diff --git a/src/components/PillarSelectInput/index.tsx b/src/components/PillarSelectInput/index.tsx index 8b5d1c5..9f9649a 100644 --- a/src/components/PillarSelectInput/index.tsx +++ b/src/components/PillarSelectInput/index.tsx @@ -12,13 +12,16 @@ const PILLARS = gql` ) { private { projectScope(pk: $projectId) { - groups (filters: {questionnaire: {pk: $questionnaireId}}){ - items { + questionnaire(pk: $questionnaireId) { + leafGroups { id name - label - parentId - questionnaireId + type + category1 + category2 + category3 + category4 + order } } } @@ -26,10 +29,10 @@ const PILLARS = gql` } `; -type Pillar = NonNullable['groups']['items'][number]; +type Pillar = NonNullable['projectScope']>['questionnaire']>['leafGroups'][number]; const pillarKeySelector = (data: Pillar) => data.id; -const pillarLabelSelector = (data: Pillar) => data.label; +const pillarLabelSelector = (data: Pillar) => data.name; interface PillarProps{ projectId: string; @@ -74,7 +77,7 @@ function PillarSelectInput(props: PillarProps) { }, ); - const pillarsOptions = pillarsResponse?.private?.projectScope?.groups.items ?? []; + const pillarsOptions = pillarsResponse?.private?.projectScope?.questionnaire?.leafGroups ?? []; return ( ['projectScope']>['groups']>['items']>[number]; +type QuestionGroup = { + key: string; + parentKeys: string[]; + label: string; + nodes: QuestionGroup[]; +}; interface TocProps { - id: string; + key: string; + mainIndex: number; item: QuestionGroup; attributes?: Attributes; listeners?: Listeners; selectedGroups: string[]; - orderedOptions: QuestionGroup[] | undefined; - onOrderedOptionsChange: React.Dispatch>; + onOrderedOptionsChange: (newVal: QuestionGroup[] | undefined, index: number) => void; onSelectedGroupsChange: React.Dispatch>; onActiveTabChange: React.Dispatch>; } function TocRenderer(props: TocProps) { const { - id, + key, + mainIndex, item, - orderedOptions, selectedGroups, onOrderedOptionsChange, onSelectedGroupsChange, @@ -50,18 +51,18 @@ function TocRenderer(props: TocProps) { const handleGroupSelect = useCallback((val: boolean) => { onSelectedGroupsChange((oldVal) => { if (val) { - return ([...oldVal, id]); + return ([...oldVal, key]); } const newVal = [...oldVal]; - newVal.splice(oldVal.indexOf(id), 1); + newVal.splice(oldVal.indexOf(key), 1); return newVal; }); onActiveTabChange((oldActiveTab) => { if (isNotDefined(oldActiveTab) && val) { - return id; + return key; } - if (!val && oldActiveTab === id) { + if (!val && oldActiveTab === key) { return undefined; } return oldActiveTab; @@ -69,10 +70,17 @@ function TocRenderer(props: TocProps) { }, [ onActiveTabChange, onSelectedGroupsChange, - id, + key, ]); - const filteredOptions = orderedOptions?.filter((group) => id === group.parentId); + const nodeList = item.nodes; + + const handleListChange = useCallback((newVal: QuestionGroup[] | undefined) => { + onOrderedOptionsChange(newVal, mainIndex); + }, [ + mainIndex, + onOrderedOptionsChange, + ]); return ( @@ -104,13 +112,12 @@ function TocRenderer(props: TocProps) { headingSize="extraSmall" spacing="none" > - {isDefined(filteredOptions) && filteredOptions.length > 0 && ( + {isDefined(nodeList) && nodeList.length > 0 && ( // eslint-disable-next-line @typescript-eslint/no-use-before-define g.id; +const keySelector = (g: QuestionGroup) => g.key; interface Props { className?: string; - parentId: string | null; orderedOptions: QuestionGroup[] | undefined; - onOrderedOptionsChange: React.Dispatch> + onOrderedOptionsChange: (newVal: QuestionGroup[] | undefined) => void; selectedGroups: string[]; onSelectedGroupsChange: React.Dispatch>; onActiveTabChange: React.Dispatch>; @@ -135,7 +141,6 @@ interface Props { function TocList(props: Props) { const { className, - parentId, orderedOptions, onOrderedOptionsChange, selectedGroups, @@ -143,44 +148,50 @@ function TocList(props: Props) { onActiveTabChange, } = props; - const filteredOptions = orderedOptions?.filter( - (group: QuestionGroup) => group.parentId === parentId, - ); - - const tocRendererParams = useCallback((key: string, datum: QuestionGroup): TocProps => ({ + const handleChildrenOrderChange = useCallback(( + newValue: QuestionGroup[] | undefined, + parentIndex: number, + ) => { + if (!newValue) { + return; + } + const newList = [...orderedOptions ?? []]; + newList[parentIndex] = { + ...newList[parentIndex], + nodes: newValue, + }; + onOrderedOptionsChange(newList); + }, [ orderedOptions, onOrderedOptionsChange, + ]); + + const tocRendererParams = useCallback(( + key: string, + datum: QuestionGroup, + mainIndex: number, + ): TocProps => ({ + onOrderedOptionsChange: handleChildrenOrderChange, onSelectedGroupsChange, onActiveTabChange, selectedGroups, - id: key, + key, + mainIndex, item: datum, }), [ - orderedOptions, + handleChildrenOrderChange, selectedGroups, onSelectedGroupsChange, - onOrderedOptionsChange, onActiveTabChange, ]); - const handleGroupOrderChange = useCallback((oldValue: QuestionGroup[]) => { - const nonParentOptions = orderedOptions?.filter((group) => !oldValue.includes(group)) ?? []; - onOrderedOptionsChange([ - ...nonParentOptions, - ...oldValue, - ]); - }, [ - onOrderedOptionsChange, - orderedOptions, - ]); - return ( ( + lst: A[], + valueSelector: (item: A) => K, + childSelector: (item: A) => A[] | undefined, +): K[] { + if (lst.length <= 0) { + return []; + } + const itemsByParent = lst.map(valueSelector); + const itemsByChildren = lst.map(childSelector).filter(isDefined).flat(); + return [ + ...itemsByParent, + ...flatten(itemsByChildren, valueSelector, childSelector), + ]; +} diff --git a/src/views/QuestionnaireEdit/DateQuestionForm/index.tsx b/src/views/QuestionnaireEdit/DateQuestionForm/index.tsx index 8050e96..cfb6596 100644 --- a/src/views/QuestionnaireEdit/DateQuestionForm/index.tsx +++ b/src/views/QuestionnaireEdit/DateQuestionForm/index.tsx @@ -15,6 +15,7 @@ import { } from '@apollo/client'; import { ObjectSchema, + removeNull, createSubmitHandler, requiredStringCondition, getErrorObject, @@ -109,7 +110,7 @@ const schema: FormSchema = { required: true, requiredValidation: requiredStringCondition, }, - group: { + leafGroup: { required: true, requiredValidation: requiredStringCondition, }, @@ -170,13 +171,13 @@ function DateQuestionForm(props: Props) { skip: isNotDefined(questionInfoVariables), variables: questionInfoVariables, onCompleted: (response) => { - const questionResponse = response.private.projectScope?.question; + const questionResponse = removeNull(response.private.projectScope?.question); setValue({ name: questionResponse?.name, type: questionResponse?.type, questionnaire: questionResponse?.questionnaireId, label: questionResponse?.label, - group: questionResponse?.groupId, + leafGroup: questionResponse?.leafGroupId, hint: questionResponse?.hint, }); }, @@ -313,11 +314,11 @@ function DateQuestionForm(props: Props) { onChange={setFieldValue} /> diff --git a/src/views/QuestionnaireEdit/FileQuestionForm/index.tsx b/src/views/QuestionnaireEdit/FileQuestionForm/index.tsx index 26828d2..d8469e2 100644 --- a/src/views/QuestionnaireEdit/FileQuestionForm/index.tsx +++ b/src/views/QuestionnaireEdit/FileQuestionForm/index.tsx @@ -16,6 +16,7 @@ import { import { ObjectSchema, createSubmitHandler, + removeNull, requiredStringCondition, getErrorObject, useForm, @@ -109,7 +110,7 @@ const schema: FormSchema = { required: true, requiredValidation: requiredStringCondition, }, - group: { + leafGroup: { required: true, requiredValidation: requiredStringCondition, }, @@ -170,13 +171,13 @@ function FileQuestionForm(props: Props) { skip: isNotDefined(questionInfoVariables), variables: questionInfoVariables, onCompleted: (response) => { - const questionResponse = response.private.projectScope?.question; + const questionResponse = removeNull(response.private.projectScope?.question); setValue({ name: questionResponse?.name, type: questionResponse?.type, questionnaire: questionResponse?.questionnaireId, label: questionResponse?.label, - group: questionResponse?.groupId, + leafGroup: questionResponse?.leafGroupId, hint: questionResponse?.hint, }); }, @@ -312,11 +313,11 @@ function FileQuestionForm(props: Props) { onChange={setFieldValue} /> diff --git a/src/views/QuestionnaireEdit/ImageQuestionForm/index.tsx b/src/views/QuestionnaireEdit/ImageQuestionForm/index.tsx index 9f44a19..dc16fa2 100644 --- a/src/views/QuestionnaireEdit/ImageQuestionForm/index.tsx +++ b/src/views/QuestionnaireEdit/ImageQuestionForm/index.tsx @@ -16,6 +16,7 @@ import { import { ObjectSchema, createSubmitHandler, + removeNull, requiredStringCondition, getErrorObject, useForm, @@ -109,7 +110,7 @@ const schema: FormSchema = { required: true, requiredValidation: requiredStringCondition, }, - group: { + leafGroup: { required: true, requiredValidation: requiredStringCondition, }, @@ -170,13 +171,13 @@ function ImageQuestionForm(props: Props) { skip: isNotDefined(questionInfoVariables), variables: questionInfoVariables, onCompleted: (response) => { - const questionResponse = response.private.projectScope?.question; + const questionResponse = removeNull(response.private.projectScope?.question); setValue({ name: questionResponse?.name, type: questionResponse?.type, questionnaire: questionResponse?.questionnaireId, label: questionResponse?.label, - group: questionResponse?.groupId, + leafGroup: questionResponse?.leafGroupId, hint: questionResponse?.hint, }); }, @@ -311,11 +312,11 @@ function ImageQuestionForm(props: Props) { onChange={setFieldValue} /> diff --git a/src/views/QuestionnaireEdit/IntegerQuestionForm/index.tsx b/src/views/QuestionnaireEdit/IntegerQuestionForm/index.tsx index 8b0fc72..14e4647 100644 --- a/src/views/QuestionnaireEdit/IntegerQuestionForm/index.tsx +++ b/src/views/QuestionnaireEdit/IntegerQuestionForm/index.tsx @@ -12,6 +12,7 @@ import { gql, useMutation, useQuery } from '@apollo/client'; import { ObjectSchema, createSubmitHandler, + removeNull, requiredStringCondition, getErrorObject, useForm, @@ -105,7 +106,7 @@ const schema: FormSchema = { required: true, requiredValidation: requiredStringCondition, }, - group: { + leafGroup: { required: true, requiredValidation: requiredStringCondition, }, @@ -166,13 +167,13 @@ function IntegerQuestionForm(props: Props) { skip: isNotDefined(questionInfoVariables), variables: questionInfoVariables, onCompleted: (response) => { - const questionResponse = response.private.projectScope?.question; + const questionResponse = removeNull(response.private.projectScope?.question); setValue({ name: questionResponse?.name, type: questionResponse?.type, questionnaire: questionResponse?.questionnaireId, label: questionResponse?.label, - group: questionResponse?.groupId, + leafGroup: questionResponse?.leafGroupId, hint: questionResponse?.hint, }); }, @@ -309,11 +310,11 @@ function IntegerQuestionForm(props: Props) { onChange={setFieldValue} /> diff --git a/src/views/QuestionnaireEdit/NoteQuestionForm/index.tsx b/src/views/QuestionnaireEdit/NoteQuestionForm/index.tsx index 12f3fe5..a0583d4 100644 --- a/src/views/QuestionnaireEdit/NoteQuestionForm/index.tsx +++ b/src/views/QuestionnaireEdit/NoteQuestionForm/index.tsx @@ -16,6 +16,7 @@ import { import { ObjectSchema, createSubmitHandler, + removeNull, requiredStringCondition, getErrorObject, useForm, @@ -110,7 +111,7 @@ const schema: FormSchema = { required: true, requiredValidation: requiredStringCondition, }, - group: { + leafGroup: { required: true, requiredValidation: requiredStringCondition, }, @@ -170,13 +171,13 @@ function NoteQuestionForm(props: Props) { skip: isNotDefined(questionInfoVariables), variables: questionInfoVariables, onCompleted: (response) => { - const questionResponse = response.private.projectScope?.question; + const questionResponse = removeNull(response.private.projectScope?.question); setValue({ name: questionResponse?.name, type: questionResponse?.type, questionnaire: questionResponse?.questionnaireId, label: questionResponse?.label, - group: questionResponse?.groupId, + leafGroup: questionResponse?.leafGroupId, hint: questionResponse?.hint, }); }, @@ -304,11 +305,11 @@ function NoteQuestionForm(props: Props) { onChange={setFieldValue} /> diff --git a/src/views/QuestionnaireEdit/QuestionPreview/index.tsx b/src/views/QuestionnaireEdit/QuestionPreview/index.tsx index 8f78eb7..cd77937 100644 --- a/src/views/QuestionnaireEdit/QuestionPreview/index.tsx +++ b/src/views/QuestionnaireEdit/QuestionPreview/index.tsx @@ -59,13 +59,13 @@ function QuestionPreview(props: QuestionProps) { setActiveQuestionId, ]); - if (isNotDefined(question.groupId)) { + if (isNotDefined(question.leafGroupId)) { return null; } return ( { - const questionResponse = response.private.projectScope?.question; + const questionResponse = removeNull(response.private.projectScope?.question); setValue({ name: questionResponse?.name, type: questionResponse?.type, questionnaire: questionResponse?.questionnaireId, label: questionResponse?.label, - group: questionResponse?.groupId, + leafGroup: questionResponse?.leafGroupId, hint: questionResponse?.hint, }); }, @@ -312,11 +313,11 @@ function RankQuestionForm(props: Props) { onChange={setFieldValue} /> diff --git a/src/views/QuestionnaireEdit/SelectMultipleQuestionForm/index.tsx b/src/views/QuestionnaireEdit/SelectMultipleQuestionForm/index.tsx index ba0643d..3280ad5 100644 --- a/src/views/QuestionnaireEdit/SelectMultipleQuestionForm/index.tsx +++ b/src/views/QuestionnaireEdit/SelectMultipleQuestionForm/index.tsx @@ -82,7 +82,7 @@ const schema: FormSchema = { required: true, requiredValidation: requiredStringCondition, }, - group: { + leafGroup: { required: true, requiredValidation: requiredStringCondition, }, @@ -212,11 +212,11 @@ function SelectMultipleQuestionForm(props: Props) { error={fieldError?.choiceCollection} /> diff --git a/src/views/QuestionnaireEdit/SelectOneQuestionForm/index.tsx b/src/views/QuestionnaireEdit/SelectOneQuestionForm/index.tsx index 4eea940..3ea61d0 100644 --- a/src/views/QuestionnaireEdit/SelectOneQuestionForm/index.tsx +++ b/src/views/QuestionnaireEdit/SelectOneQuestionForm/index.tsx @@ -83,7 +83,7 @@ const schema: FormSchema = { required: true, requiredValidation: requiredStringCondition, }, - group: { + leafGroup: { required: true, requiredValidation: requiredStringCondition, }, @@ -212,11 +212,11 @@ function SelectOneQuestionForm(props: Props) { error={fieldError?.choiceCollection} /> diff --git a/src/views/QuestionnaireEdit/TextQuestionForm/index.tsx b/src/views/QuestionnaireEdit/TextQuestionForm/index.tsx index 76d4cd3..98112a8 100644 --- a/src/views/QuestionnaireEdit/TextQuestionForm/index.tsx +++ b/src/views/QuestionnaireEdit/TextQuestionForm/index.tsx @@ -12,6 +12,7 @@ import { gql, useMutation, useQuery } from '@apollo/client'; import { ObjectSchema, createSubmitHandler, + removeNull, requiredStringCondition, getErrorObject, useForm, @@ -106,7 +107,7 @@ const schema: FormSchema = { required: true, requiredValidation: requiredStringCondition, }, - group: { + leafGroup: { required: true, requiredValidation: requiredStringCondition, }, @@ -167,13 +168,13 @@ function TextQuestionForm(props: Props) { skip: isNotDefined(questionInfoVariables), variables: questionInfoVariables, onCompleted: (response) => { - const questionResponse = response.private.projectScope?.question; + const questionResponse = removeNull(response.private.projectScope?.question); setValue({ name: questionResponse?.name, type: questionResponse?.type, questionnaire: questionResponse?.questionnaireId, label: questionResponse?.label, - group: questionResponse?.groupId, + leafGroup: questionResponse?.leafGroupId, hint: questionResponse?.hint, }); }, @@ -309,11 +310,11 @@ function TextQuestionForm(props: Props) { onChange={setFieldValue} /> diff --git a/src/views/QuestionnaireEdit/TimeQuestionForm/index.tsx b/src/views/QuestionnaireEdit/TimeQuestionForm/index.tsx index 80b624e..8c6dbb2 100644 --- a/src/views/QuestionnaireEdit/TimeQuestionForm/index.tsx +++ b/src/views/QuestionnaireEdit/TimeQuestionForm/index.tsx @@ -15,6 +15,7 @@ import { } from '@apollo/client'; import { ObjectSchema, + removeNull, createSubmitHandler, requiredStringCondition, getErrorObject, @@ -110,7 +111,7 @@ const schema: FormSchema = { required: true, requiredValidation: requiredStringCondition, }, - group: { + leafGroup: { required: true, requiredValidation: requiredStringCondition, }, @@ -171,13 +172,13 @@ function TimeQuestionForm(props: Props) { skip: isNotDefined(questionInfoVariables), variables: questionInfoVariables, onCompleted: (response) => { - const questionResponse = response.private.projectScope?.question; + const questionResponse = removeNull(response.private.projectScope?.question); setValue({ name: questionResponse?.name, type: questionResponse?.type, questionnaire: questionResponse?.questionnaireId, label: questionResponse?.label, - group: questionResponse?.groupId, + leafGroup: questionResponse?.leafGroupId, hint: questionResponse?.hint, }); }, @@ -314,11 +315,11 @@ function TimeQuestionForm(props: Props) { onChange={setFieldValue} /> diff --git a/src/views/QuestionnaireEdit/index.tsx b/src/views/QuestionnaireEdit/index.tsx index eb678f6..bab5ebf 100644 --- a/src/views/QuestionnaireEdit/index.tsx +++ b/src/views/QuestionnaireEdit/index.tsx @@ -20,6 +20,8 @@ import { import { isNotDefined, isDefined, + listToGroupList, + mapToList, } from '@togglecorp/fujs'; import { gql, @@ -39,11 +41,17 @@ import { import SubNavbar from '#components/SubNavbar'; import TocList from '#components/TocList'; +import { flatten } from '#utils/common'; import { QuestionnaireQuery, QuestionnaireQueryVariables, QuestionsByGroupQuery, QuestionsByGroupQueryVariables, + QuestionLeafGroupCategory1TypeEnum, + QuestionLeafGroupCategory2TypeEnum, + QuestionLeafGroupCategory3TypeEnum, + QuestionLeafGroupCategory4TypeEnum, + QuestionLeafGroupTypeEnum, } from '#generated/types'; import TextQuestionForm from './TextQuestionForm'; @@ -80,19 +88,20 @@ const QUESTIONNAIRE = gql` questionnaire(pk: $questionnaireId) { id title - } - groups(filters: { - questionnaire: { - pk: $questionnaireId - } - }) { - items { + leafGroups { id - parentId - relevant - questionnaireId - label name + order + category1 + category1Display + category2 + category2Display + category3 + category3Display + category4 + category4Display + type + typeDisplay } } } @@ -105,7 +114,7 @@ const QUESTIONS_BY_GROUP = gql` query QuestionsByGroup( $projectId: ID!, $questionnaireId: ID!, - $groupId: ID!, + $leafGroupId: ID!, ) { private { projectScope(pk: $projectId) { @@ -115,10 +124,9 @@ const QUESTIONS_BY_GROUP = gql` questionnaire: { pk: $questionnaireId, }, - group: { - pk: $groupId, + leafGroup: { + pk: $leafGroupId, }, - includeChildGroup: true, } order: { createdAt: ASC @@ -137,7 +145,7 @@ const QUESTIONS_BY_GROUP = gql` `; type Question = NonNullable['projectScope']>['questions']>['items']>[number]; -type QuestionGroup = NonNullable['projectScope']>['groups']>['items']>[number]; +type QuestionGroup = NonNullable['projectScope']>['questionnaire']>['leafGroups']>[number]; const questionKeySelector = (q: Question) => q.id; const groupTabKeySelector = (g: QuestionGroup) => g.id; @@ -194,6 +202,58 @@ const questionTypes: QuestionType[] = [ }, ]; +interface Node { + category: { + key: string; + label: string; + }[]; + type?: string; +} + +type TocItem = { + key: string; + parentKeys: string[]; + label: string; + nodes: TocItem[]; +}; + +function getNodes(input: Node[], parentKeys: string[]): TocItem[] { + if (input.length <= 1) { + return []; + } + const grouped = listToGroupList( + input, + (groupItem) => groupItem.category[0].key, + (groupItem) => ({ + category: groupItem.category.slice(1), + parentLabel: groupItem.category[0].label, + parentKey: groupItem.category[0].key, + type: groupItem.type, + }), + ); + + return mapToList( + grouped, + (item, key) => ({ + key, + label: item[0].parentLabel, + parentKeys: [...parentKeys, item[0].parentKey], + nodes: getNodes(item, [...parentKeys, item[0].parentKey]), + }), + ); +} + +interface TransformedGroupType { + category: { + key: QuestionLeafGroupCategory1TypeEnum + | QuestionLeafGroupCategory2TypeEnum + | QuestionLeafGroupCategory3TypeEnum + | QuestionLeafGroupCategory4TypeEnum; + label: string; + }[]; + type: QuestionLeafGroupTypeEnum; +} + const questionTypeKeySelector = (q: QuestionType) => q.key; const PAGE_SIZE = 15; @@ -261,7 +321,7 @@ export function Component() { skip: isNotDefined(questionnaireVariables), variables: questionnaireVariables, onCompleted: (response) => { - const questionGroups = response?.private.projectScope?.groups?.items; + const questionGroups = response?.private.projectScope?.questionnaire?.leafGroups; setOrderedOptions(questionGroups ?? []); }, }, @@ -270,14 +330,73 @@ export function Component() { const questionnaireTitle = questionnaireResponse?.private.projectScope?.questionnaire?.title; const projectTitle = questionnaireResponse?.private.projectScope?.project.title; - const parentQuestionGroups = orderedOptions?.filter( - (item) => item.parentId === null, - ); - - const selectedParentQuestionGroups = parentQuestionGroups?.filter( + const selectedParentQuestionGroups = orderedOptions?.filter( (group) => selectedGroups.includes(group.id), ); + const transformedGroups: TransformedGroupType[] = useMemo(() => ( + orderedOptions.map((g) => { + if (isDefined(g.category3) && isDefined(g.category4)) { + return ({ + category: [ + { + key: g.category1, + label: String(g.category1Display), + }, + { + key: g.category2, + label: String(g.category2Display), + }, + { + key: g.category3, + label: String(g.category3Display), + }, + { + key: g.category4, + label: String(g.category4Display), + }, + ], + type: g.type, + }); + } + return ({ + category: [ + { + key: g.category1, + label: String(g.category1Display), + }, + { + key: g.category2, + label: String(g.category2Display), + }, + ], + type: g.type, + }); + }) + ), [ + orderedOptions, + ]); + + const groupOptionsSafe = getNodes(transformedGroups, []); + + const flatList = useMemo(() => { + const a = flatten( + groupOptionsSafe, + (item) => ({ + key: item.parentKeys.join('-'), + }), + (item) => item.nodes, + ); + return a; + }, [groupOptionsSafe]); + + const handleGroupOptionsChange = useCallback((newVal: TocItem[] | undefined) => { + // FIXME: Add handler + console.log('aditya', newVal, flatList); + }, [ + flatList, + ]); + const [activeGroupTab, setActiveGroupTab] = useState( selectedParentQuestionGroups?.[0]?.name, ); @@ -295,7 +414,7 @@ export function Component() { return ({ projectId, questionnaireId, - groupId: finalSelectedTab, + leafGroupId: finalSelectedTab, }); }, [ projectId, @@ -341,7 +460,7 @@ export function Component() { ]); const groupTabRenderParams = useCallback((_: string, datum: QuestionGroup) => ({ - children: datum.label, + children: datum.name, name: datum.id, }), []); @@ -372,9 +491,8 @@ export function Component() { contentClassName={styles.leftContent} >