Skip to content

Commit

Permalink
Add search select input props types in Choice collection select input
Browse files Browse the repository at this point in the history
  • Loading branch information
@subinasr
subinasr committed Sep 4, 2023
1 parent 01566d2 commit f10ffc0
Show file tree
Hide file tree
Showing 8 changed files with 76 additions and 39 deletions.
23 changes: 5 additions & 18 deletions src/components/ChoiceCollectionSelectInput/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ const choiceCollectionLabelSelector = (d: ChoiceCollection) => d.label;

type Def = { containerClassName?: string };
type ChoiceCollectionSelectInputProps<
T,
K extends string,
GK extends string
> = SearchSelectInputProps<
Expand All @@ -61,26 +60,17 @@ type ChoiceCollectionSelectInputProps<
> & {
projectId: string;
questionnaireId: string | null;
name: T;
label: string;
onChange: (value: string | undefined, name: T) => void;
value: string | null | undefined;
error: string | undefined;
};

const PAGE_SIZE = 20;

function ChoiceCollectionSelectInput<
T extends string,
K extends string,
GK extends string
>(props: ChoiceCollectionSelectInputProps<T, K, GK>) {
>(props: ChoiceCollectionSelectInputProps<K, GK>) {
const {
projectId,
questionnaireId,
name,
value,
label,
onChange,
error,
...otherProps
} = props;

Expand All @@ -96,6 +86,8 @@ function ChoiceCollectionSelectInput<
projectId,
questionnaireId,
search: searchText,
limit: PAGE_SIZE,
offset: 0,
});
}, [
projectId,
Expand All @@ -120,15 +112,10 @@ function ChoiceCollectionSelectInput<
<SearchSelectInput
// eslint-disable-next-line react/jsx-props-no-spreading
{...otherProps}
name={name}
value={value}
searchOptions={options}
error={error}
label={label}
keySelector={choiceCollectionKeySelector}
labelSelector={choiceCollectionLabelSelector}
onSearchValueChange={setSearchText}
onChange={onChange}
onShowDropdownChange={setOpened}
optionsPending={choiceCollectionLoading}
/>
Expand Down
6 changes: 5 additions & 1 deletion src/components/UserSelectInput/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,14 @@ export type User = Omit<NonNullable<NonNullable<NonNullable<NonNullable<UsersQue

const keySelector = (u: User) => u.id;
const labelSelector = (u: User) => u.displayName;

const PAGE_SIZE = 20;

type Def = { containerClassName?: string };
type UserSelectInputProps<K extends string, GK extends string> = SearchSelectInputProps<
type UserSelectInputProps<
K extends string,
GK extends string
> = SearchSelectInputProps<
string,
K,
GK,
Expand Down
6 changes: 5 additions & 1 deletion src/views/QuestionnaireEdit/QuestionPreview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,11 @@ function QuestionPreview(props: QuestionProps) {
]);

if (isNotDefined(question.leafGroupId)) {
return null;
return (
<div>
Could not find leaf group id.
</div>
);
}

return (
Expand Down
15 changes: 14 additions & 1 deletion src/views/QuestionnaireEdit/RankQuestionForm/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useCallback, useMemo } from 'react';
import { useCallback, useMemo, useState } from 'react';
import {
isDefined,
isNotDefined,
Expand Down Expand Up @@ -41,6 +41,7 @@ import ChoiceCollectionSelectInput from '#components/ChoiceCollectionSelectInput
import {
QUESTION_FRAGMENT,
QUESTION_INFO,
ChoiceCollectionType,
} from '../queries.ts';
import styles from './index.module.css';

Expand Down Expand Up @@ -156,6 +157,11 @@ function RankQuestionForm(props: Props) {
setError,
} = useForm(schema, { value: initialFormValue });

const [
choiceCollectionOption,
setChoiceCollectionOption,
] = useState<ChoiceCollectionType[] | null | undefined>();

const fieldError = getErrorObject(formError);

const questionInfoVariables = useMemo(() => {
Expand Down Expand Up @@ -187,6 +193,11 @@ function RankQuestionForm(props: Props) {
hint: questionResponse?.hint,
choiceCollection: questionResponse?.choiceCollection?.id,
});
const choiceCollection = questionResponse?.choiceCollection;
const choiceCollectionOptions = isDefined(choiceCollection)
? [choiceCollection]
: [];
setChoiceCollectionOption(choiceCollectionOptions);
},
},
);
Expand Down Expand Up @@ -324,6 +335,8 @@ function RankQuestionForm(props: Props) {
name="choiceCollection"
value={formValue.choiceCollection}
label="Options"
options={choiceCollectionOption}
onOptionsChange={setChoiceCollectionOption}
onChange={setFieldValue}
projectId={projectId}
questionnaireId={questionnaireId}
Expand Down
20 changes: 17 additions & 3 deletions src/views/QuestionnaireEdit/SelectMultipleQuestionForm/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useCallback, useMemo } from 'react';
import { useCallback, useMemo, useState } from 'react';
import {
isDefined,
isNotDefined,
Expand All @@ -15,6 +15,7 @@ import {
} from '@the-deep/deep-ui';
import {
ObjectSchema,
removeNull,
createSubmitHandler,
requiredStringCondition,
getErrorObject,
Expand All @@ -39,6 +40,7 @@ import ChoiceCollectionSelectInput from '#components/ChoiceCollectionSelectInput
import {
QUESTION_FRAGMENT,
QUESTION_INFO,
ChoiceCollectionType,
} from '../queries.ts';
import styles from './index.module.css';

Expand Down Expand Up @@ -154,6 +156,11 @@ function SelectMultipleQuestionForm(props: Props) {
setError,
} = useForm(schema, { value: initialFormValue });

const [
choiceCollectionOption,
setChoiceCollectionOption,
] = useState<ChoiceCollectionType[] | null | undefined>();

const fieldError = getErrorObject(formError);

const questionInfoVariables = useMemo(() => {
Expand All @@ -175,16 +182,21 @@ function SelectMultipleQuestionForm(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,
choiceCollection: questionResponse?.choiceCollection?.id,
});
const choiceCollection = questionResponse?.choiceCollection;
const choiceCollectionOptions = isDefined(choiceCollection)
? [choiceCollection]
: [];
setChoiceCollectionOption(choiceCollectionOptions);
},
},
);
Expand Down Expand Up @@ -329,6 +341,8 @@ function SelectMultipleQuestionForm(props: Props) {
name="choiceCollection"
value={formValue.choiceCollection}
label="Options"
options={choiceCollectionOption}
onOptionsChange={setChoiceCollectionOption}
onChange={setFieldValue}
projectId={projectId}
questionnaireId={questionnaireId}
Expand Down
20 changes: 17 additions & 3 deletions src/views/QuestionnaireEdit/SelectOneQuestionForm/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useCallback, useMemo } from 'react';
import { useCallback, useMemo, useState } from 'react';
import {
isDefined,
isNotDefined,
Expand All @@ -15,6 +15,7 @@ import {
} from '@the-deep/deep-ui';
import {
ObjectSchema,
removeNull,
createSubmitHandler,
requiredStringCondition,
getErrorObject,
Expand All @@ -40,6 +41,7 @@ import ChoiceCollectionSelectInput from '#components/ChoiceCollectionSelectInput
import {
QUESTION_FRAGMENT,
QUESTION_INFO,
ChoiceCollectionType,
} from '../queries.ts';
import styles from './index.module.css';

Expand Down Expand Up @@ -155,6 +157,11 @@ function SelectOneQuestionForm(props: Props) {
setError,
} = useForm(schema, { value: initialFormValue });

const [
choiceCollectionOption,
setChoiceCollectionOption,
] = useState<ChoiceCollectionType[] | null | undefined>();

const fieldError = getErrorObject(formError);

const questionInfoVariables = useMemo(() => {
Expand All @@ -176,16 +183,21 @@ function SelectOneQuestionForm(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,
choiceCollection: questionResponse?.choiceCollection?.id,
});
const choiceCollection = questionResponse?.choiceCollection;
const choiceCollectionOptions = isDefined(choiceCollection)
? [choiceCollection]
: [];
setChoiceCollectionOption(choiceCollectionOptions);
},
},
);
Expand Down Expand Up @@ -330,6 +342,8 @@ function SelectOneQuestionForm(props: Props) {
name="choiceCollection"
value={formValue.choiceCollection}
label="Options"
options={choiceCollectionOption}
onOptionsChange={setChoiceCollectionOption}
onChange={setFieldValue}
projectId={projectId}
questionnaireId={questionnaireId}
Expand Down
1 change: 1 addition & 0 deletions src/views/QuestionnaireEdit/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -547,6 +547,7 @@ export function Component() {
pending={false}
/>
<SortableList
name="questions"
className={styles.questionList}
data={orderedQuestions}
direction="vertical"
Expand Down
24 changes: 12 additions & 12 deletions src/views/QuestionnaireEdit/queries.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { gql } from '@apollo/client';

import {
QuestionInfoQuery,
} from '#generated/types';

export type ChoiceCollectionType = NonNullable<NonNullable<NonNullable<NonNullable<QuestionInfoQuery['private']>['projectScope']>['question']>['choiceCollection']>;

export const QUESTION_FRAGMENT = gql`
fragment QuestionResponse on QuestionType {
id
Expand All @@ -11,12 +17,9 @@ export const QUESTION_FRAGMENT = gql`
questionnaireId
choiceCollection {
id
choices {
collectionId
id
label
name
}
name
label
questionnaireId
}
}
`;
Expand All @@ -38,12 +41,9 @@ export const QUESTION_INFO = gql`
questionnaireId
choiceCollection {
id
choices {
collectionId
id
label
name
}
label
name
questionnaireId
}
}
}
Expand Down

0 comments on commit f10ffc0

Please sign in to comment.