Add rank question preview

- Add edit functionality for SelectOne and SelectMultiple question types
the-deep · Aug 23, 2023 · e572424 · e572424
1 parent 4b98279
commit e572424
Show file tree

Hide file tree

Showing 29 changed files with 520 additions and 69 deletions.
diff --git a/src/components/questionPreviews/DateQuestionPreview/index.module.css b/src/components/questionPreviews/DateQuestionPreview/index.module.css
@@ -1,6 +1,5 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
 }
diff --git a/src/components/questionPreviews/FileQuestionPreview/index.module.css b/src/components/questionPreviews/FileQuestionPreview/index.module.css
@@ -1,7 +1,6 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
 
     .upload-preview-wrapper {

diff --git a/src/components/questionPreviews/ImageQuestionPreview/index.module.css b/src/components/questionPreviews/ImageQuestionPreview/index.module.css
@@ -1,7 +1,6 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
 
     .upload-preview-wrapper {

diff --git a/src/components/questionPreviews/IntegerQuestionPreview/index.module.css b/src/components/questionPreviews/IntegerQuestionPreview/index.module.css
@@ -1,6 +1,5 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
 }
diff --git a/src/components/questionPreviews/NoteQuestionPreview/index.module.css b/src/components/questionPreviews/NoteQuestionPreview/index.module.css
@@ -1,6 +1,5 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
 }
diff --git a/src/components/questionPreviews/RankQuestionPreview/RankQuestionItem/index.module.css b/src/components/questionPreviews/RankQuestionPreview/RankQuestionItem/index.module.css
@@ -0,0 +1,13 @@
+.item-wrapper {
+    display: flex;
+    border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
+    border-radius: var(--dui-border-radius-card);
+
+    .icon {
+        background-color: var(--color-gray2);
+        padding: var(--dui-spacing-small);
+    }
+    .item {
+        padding: var(--dui-spacing-small);
+    }
+}
diff --git a/src/components/questionPreviews/RankQuestionPreview/RankQuestionItem/index.tsx b/src/components/questionPreviews/RankQuestionPreview/RankQuestionItem/index.tsx
@@ -0,0 +1,31 @@
+import {
+    GrDrag,
+} from 'react-icons/gr';
+import {
+    Element,
+} from '@the-deep/deep-ui';
+
+import styles from './index.module.css';
+
+interface Props {
+    title: string;
+}
+
+function RankQuestionItem(props: Props) {
+    const {
+        title,
+    } = props;
+
+    return (
+        <Element
+            className={styles.itemWrapper}
+            icons={<GrDrag />}
+            iconsContainerClassName={styles.icon}
+            childrenContainerClassName={styles.item}
+        >
+            {title}
+        </Element>
+    );
+}
+
+export default RankQuestionItem;
diff --git a/src/components/questionPreviews/RankQuestionPreview/index.module.css b/src/components/questionPreviews/RankQuestionPreview/index.module.css
@@ -1,6 +1,22 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
+
+    .choices-preview {
+        align-items: flex-start;
+        gap: var(--dui-spacing-large);
+
+        .icon {
+            color: var(--dui-color-primary);
+            font-size: var(--dui-font-size-extra-large);
+        }
+
+        .choices {
+            display: flex;
+            flex-grow: 1;
+            flex-direction: column;
+            gap: var(--dui-spacing-small);
+        }
+    }
 }
diff --git a/src/components/questionPreviews/RankQuestionPreview/index.tsx b/src/components/questionPreviews/RankQuestionPreview/index.tsx
@@ -1,25 +1,100 @@
+import { useMemo, useCallback } from 'react';
+import {
+    IoSwapVertical,
+} from 'react-icons/io5';
 import {
     _cs,
+    isNotDefined,
 } from '@togglecorp/fujs';
 import {
+    gql,
+    useQuery,
+} from '@apollo/client';
+import {
+    Element,
+    ListView,
     TextOutput,
 } from '@the-deep/deep-ui';
 
+import {
+    RankChoicesQuery,
+    RankChoicesQueryVariables,
+} from '#generated/types';
+
+import RankQuestionItem from './RankQuestionItem';
 import styles from './index.module.css';
 
+const RANK_CHOICES = gql`
+    query RankChoices (
+        $projectId: ID!,
+        $choiceCollectionId: ID!,
+        ) {
+        private {
+            projectScope(pk: $projectId) {
+                choiceCollection(pk: $choiceCollectionId) {
+                    id
+                    name
+                    label
+                    choices {
+                        id
+                        label
+                        name
+                    }
+                }
+            }
+        }
+    }
+`;
+
+type ChoiceType = NonNullable<NonNullable<NonNullable<NonNullable<RankChoicesQuery['private']>['projectScope']>['choiceCollection']>['choices']>[number];
+const rankChoiceKeySelector = (c: ChoiceType) => c.id;
+
 interface Props {
     className?: string;
     label?: string;
     hint?: string | null;
+    choiceCollectionId: string | undefined | null;
+    projectId: string;
 }
 
 function RankQuestionPreview(props: Props) {
     const {
         className,
         label,
         hint,
+        choiceCollectionId,
+        projectId,
     } = props;
 
+    const rankChoicesVariables = useMemo(() => {
+        if (isNotDefined(projectId) || isNotDefined(choiceCollectionId)) {
+            return undefined;
+        }
+        return ({
+            projectId,
+            choiceCollectionId,
+        });
+    }, [
+        projectId,
+        choiceCollectionId,
+    ]);
+
+    const {
+        data: optionsListResponse,
+    } = useQuery<RankChoicesQuery, RankChoicesQueryVariables>(
+        RANK_CHOICES,
+        {
+            skip: isNotDefined(rankChoicesVariables),
+            variables: rankChoicesVariables,
+        },
+    );
+
+    const choices = optionsListResponse?.private?.projectScope?.choiceCollection?.choices ?? [];
+
+    const rankChoiceRendererParams = useCallback((_: string, datum: ChoiceType) => ({
+        title: datum.label,
+    }), []);
+
     return (
         <div className={_cs(styles.preview, className)}>
             <TextOutput
@@ -28,6 +103,22 @@ function RankQuestionPreview(props: Props) {
                 spacing="none"
                 block
             />
+            <Element
+                className={styles.choicesPreview}
+                icons={<IoSwapVertical />}
+                iconsContainerClassName={styles.icon}
+            >
+                <ListView
+                    className={styles.choices}
+                    data={choices}
+                    keySelector={rankChoiceKeySelector}
+                    renderer={RankQuestionItem}
+                    rendererParams={rankChoiceRendererParams}
+                    filtered={false}
+                    errored={false}
+                    pending={false}
+                />
+            </Element>
         </div>
     );
 }

diff --git a/src/components/questionPreviews/SelectMultipleQuestionPreview/index.module.css b/src/components/questionPreviews/SelectMultipleQuestionPreview/index.module.css
@@ -1,7 +1,6 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
 
     .checkbox-list {

diff --git a/src/components/questionPreviews/SelectOneQuestionPreview/index.module.css b/src/components/questionPreviews/SelectOneQuestionPreview/index.module.css
@@ -1,7 +1,6 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
 
     .question-list {

diff --git a/src/components/questionPreviews/TextQuestionPreview/index.module.css b/src/components/questionPreviews/TextQuestionPreview/index.module.css
@@ -1,6 +1,5 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
 }
diff --git a/src/components/questionPreviews/TimeQuestionPreview/index.module.css b/src/components/questionPreviews/TimeQuestionPreview/index.module.css
@@ -1,6 +1,5 @@
 .preview {
     display: flex;
     flex-direction: column;
-    padding: var(--dui-spacing-extra-large) var(--dui-spacing-large);
     gap: var(--dui-spacing-medium);
 }
diff --git a/src/views/QuestionnaireEdit/DateQuestionForm/index.module.css b/src/views/QuestionnaireEdit/DateQuestionForm/index.module.css
@@ -6,6 +6,7 @@
     .preview {
         border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
         border-radius: var(--dui-border-radius-card);
+        padding: var(--dui-spacing-extra-large);
     }
     .edit-section {
         display: flex;

diff --git a/src/views/QuestionnaireEdit/FileQuestionForm/index.module.css b/src/views/QuestionnaireEdit/FileQuestionForm/index.module.css
@@ -6,6 +6,7 @@
     .preview {
         border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
         border-radius: var(--dui-border-radius-card);
+        padding: var(--dui-spacing-extra-large);
     }
 
     .edit-section {

diff --git a/src/views/QuestionnaireEdit/ImageQuestionForm/index.module.css b/src/views/QuestionnaireEdit/ImageQuestionForm/index.module.css
@@ -6,6 +6,7 @@
     .preview {
         border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
         border-radius: var(--dui-border-radius-card);
+        padding: var(--dui-spacing-extra-large);
     }
 
     .edit-section {

diff --git a/src/views/QuestionnaireEdit/IntegerQuestionForm/index.module.css b/src/views/QuestionnaireEdit/IntegerQuestionForm/index.module.css
@@ -6,6 +6,7 @@
     .preview {
         border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
         border-radius: var(--dui-border-radius-card);
+        padding: var(--dui-spacing-extra-large);
     }
     .edit-section {
         display: flex;

diff --git a/src/views/QuestionnaireEdit/NoteQuestionForm/index.module.css b/src/views/QuestionnaireEdit/NoteQuestionForm/index.module.css
@@ -6,6 +6,7 @@
     .preview {
         border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
         border-radius: var(--dui-border-radius-card);
+        padding: var(--dui-spacing-extra-large);
     }
 
     .edit-section {

diff --git a/src/views/QuestionnaireEdit/QuestionPreview/index.module.css b/src/views/QuestionnaireEdit/QuestionPreview/index.module.css
@@ -1,15 +1,18 @@
 .preview {
+    --input-width: 35rem;
     border: none !important;
     background-color: var(--dui-color-background);
     overflow-y: auto;
     gap: var(--dui-spacing-large);
 
     .question-wrapper {
-        padding: var(--dui-spacing-medium);
+        align-items: flex-start;
+        padding: var(--dui-spacing-extra-large);
+        gap: var(--dui-spacing-extra-large);
     }
 
     .question-item {
         flex-grow: 1;
-        padding: var(--dui-spacing-extra-large);
+        max-width: var(--input-width);
     }
 }
diff --git a/src/views/QuestionnaireEdit/QuestionPreview/index.tsx b/src/views/QuestionnaireEdit/QuestionPreview/index.tsx
@@ -5,10 +5,12 @@ import {
 import {
     isNotDefined,
     isDefined,
+    noOp,
 } from '@togglecorp/fujs';
 import {
     TabPanel,
     Element,
+    Checkbox,
     QuickActionDropdownMenu,
     DropdownMenuItem,
 } from '@the-deep/deep-ui';
@@ -70,6 +72,14 @@ function QuestionPreview(props: QuestionProps) {
         >
             <Element
                 className={styles.questionWrapper}
+                icons={(
+                    // TODO: Fix the selection behavior
+                    <Checkbox
+                        name={undefined}
+                        value={false}
+                        onChange={noOp}
+                    />
+                )}
                 actions={(
                     <QuickActionDropdownMenu
                         label={<IoEllipsisVertical />}
@@ -98,11 +108,13 @@ function QuestionPreview(props: QuestionProps) {
                         hint={question.hint}
                     />
                 )}
-                {(question.type === 'RANK') && (
+                {(question.type === 'RANK') && isDefined(projectId) && (
                     <RankQuestionPreview
                         className={styles.questionItem}
                         label={question.label}
                         hint={question.hint}
+                        projectId={projectId}
+                        choiceCollectionId={question.choiceCollection?.id}
                     />
                 )}
                 {(question.type === 'DATE') && (

diff --git a/src/views/QuestionnaireEdit/RankQuestionForm/index.module.css b/src/views/QuestionnaireEdit/RankQuestionForm/index.module.css
@@ -6,6 +6,7 @@
     .preview {
         border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
         border-radius: var(--dui-border-radius-card);
+        padding: var(--dui-spacing-extra-large);
     }
 
     .edit-section {