Skip to content

Commit

Permalink
Add questions metadata mutation
Browse files Browse the repository at this point in the history
- Add 'constraint' field
- Add tab wise error
  • Loading branch information
subinasr authored and AdityaKhatri committed Sep 13, 2023
1 parent be8d352 commit 914d5a5
Show file tree
Hide file tree
Showing 29 changed files with 1,640 additions and 712 deletions.
100 changes: 6 additions & 94 deletions src/components/EditQuestionnaireModal/index.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { useCallback, useMemo, useState } from 'react';
import { useCallback, useMemo } from 'react';
import { isDefined, isNotDefined } from '@togglecorp/fujs';
import { gql, useMutation, useQuery } from '@apollo/client';
import {
Modal,
Button,
TextInput,
SelectInput,
NumberInput,
useAlert,
} from '@the-deep/deep-ui';
import {
Expand All @@ -26,20 +24,8 @@ import {
QuestionnaireDetailQuery,
QuestionnaireDetailQueryVariables,
QuestionnaireCreateInput,
QuestionnaireMetadataQuery,
QuestionnaireMetadataQueryVariables,
QuestionnairePriorityLevelTypeEnum,
QuestionnaireEnumeratorSkillTypeEnum,
QuestionnaireDataCollectionMethodTypeEnum,
} from '#generated/types';
import PriorityLevelSelectInput from '#components/PriorityLevelSelectInput';

import {
EnumOptions,
EnumEntity,
enumKeySelector,
enumLabelSelector,
} from '#utils/common';
import MetaDataInputs from '#components/MetaDataInputs';

import styles from './index.module.css';

Expand Down Expand Up @@ -105,29 +91,6 @@ const QUESTIONNAIRE_DETAIL = gql`
}
`;

const QUESTIONNAIRE_METADATA = gql`
query QuestionnaireMetadata {
questionnairePriorityLevelTypeOptions: __type(name: "QuestionnairePriorityLevelTypeEnum") {
enumValues {
name
description
}
}
questionnaireEnumeratorSkillTypeOptions: __type(name: "QuestionnaireEnumeratorSkillTypeEnum") {
enumValues {
name
description
}
}
questionnaireDataCollectionMethodTypeOptions: __type(name: "QuestionnaireDataCollectionMethodTypeEnum") {
enumValues {
name
description
}
}
}
`;

type FormType = PartialForm<QuestionnaireCreateInput>;
type FormSchema = ObjectSchema<FormType>;
type FormSchemaFields = ReturnType<FormSchema['fields']>;
Expand Down Expand Up @@ -164,11 +127,6 @@ function EditQuestionnaireModal(props: Props) {

const editMode = isDefined(questionnaireId);

const [
priorityLevelOptions,
setPriorityLevelOptions,
] = useState<EnumOptions<QuestionnarePriorityLevelTypeEnum> | undefined | null>();

const questionnaireVariables = useMemo(() => {
if (isNotDefined(projectId) || isNotDefined(questionnaireId)) {
return undefined;
Expand Down Expand Up @@ -214,19 +172,6 @@ function EditQuestionnaireModal(props: Props) {
},
);

const {
data: metadataResponse,
} = useQuery<QuestionnaireMetadataQuery, QuestionnaireMetadataQueryVariables>(
QUESTIONNAIRE_METADATA,
);

const priorityLevelOptions = metadataResponse
?.questionnairePriorityLevelTypeOptions?.enumValues;
const enumeratorSkillOptions = metadataResponse
?.questionnaireEnumeratorSkillTypeOptions?.enumValues;
const dataCollectionMethods = metadataResponse
?.questionnaireDataCollectionMethodTypeOptions?.enumValues;

const [
triggerQuestionnaireCreate,
{ loading: questionnaireCreatePending },
Expand Down Expand Up @@ -362,44 +307,11 @@ function EditQuestionnaireModal(props: Props) {
onChange={setFieldValue}
autoFocus
/>
<SelectInput
name="enumeratorSkill"
label="Enumerator Skill"
onChange={setFieldValue}
value={formValue?.enumeratorSkill}
error={fieldError?.enumeratorSkill}
options={
enumeratorSkillOptions as EnumOptions<QuestionnaireEnumeratorSkillTypeEnum>
}
keySelector={enumKeySelector}
labelSelector={enumLabelSelector}
/>
<SelectInput
name="dataCollectionMethod"
label="Data Collection Method"
onChange={setFieldValue}
value={formValue?.dataCollectionMethod}
error={fieldError?.dataCollectionMethod}
options={
dataCollectionMethods as EnumOptions<QuestionnaireDataCollectionMethodTypeEnum>
}
keySelector={enumKeySelector}
labelSelector={enumLabelSelector}
/>
<PriorityLevelSelectInput
name="priorityLevel"
onChange={setFieldValue}
options={priorityLevelOptions}
onOptionsChange={setPriorityLevelOptions}
value={formValue?.priorityLevel}
error={fieldError?.priorityLevel}
/>
<NumberInput
name="requiredDuration"
label="Maximum Duration (in minutes)"

<MetaDataInputs
onChange={setFieldValue}
value={formValue?.requiredDuration}
error={fieldError?.requiredDuration}
value={formValue}
error={fieldError}
/>
</Modal>
);
Expand Down
82 changes: 0 additions & 82 deletions src/components/EnumeratorSkillSelectInput/index.tsx

This file was deleted.

144 changes: 144 additions & 0 deletions src/components/MetaDataInputs/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
import {
SelectInput,
NumberInput,
} from '@the-deep/deep-ui';
import { gql, useQuery } from '@apollo/client';
import {
type Error,
getErrorObject,
type PartialForm,
type EntriesAsList,
} from '@togglecorp/toggle-form';

import {
MetaDataOptionsQuery,
MetaDataOptionsQueryVariables,
QuestionnairePriorityLevelTypeEnum,
QuestionnaireDataCollectionMethodTypeEnum,
QuestionnaireEnumeratorSkillTypeEnum,
} from '#generated/types';
import {
enumKeySelector,
EnumOptions,
enumLabelSelector,
} from '#utils/common';

const METADATA_OPTIONS = gql`
query MetaDataOptions{
questionnairePriorityLevelTypeOptions: __type(name: "QuestionnairePriorityLevelTypeEnum") {
enumValues {
name
description
}
}
questionnaireEnumeratorSkillTypeOptions: __type(name: "QuestionnaireEnumeratorSkillTypeEnum") {
enumValues {
name
description
}
}
questionnaireDataCollectionMethodTypeOptions: __type(name: "QuestionnaireDataCollectionMethodTypeEnum") {
enumValues {
name
description
}
}
}
`;

type Input = {
priorityLevel: QuestionnairePriorityLevelTypeEnum | undefined | null;
enumeratorSkill: QuestionnaireEnumeratorSkillTypeEnum| undefined | null;
dataCollectionMethod: QuestionnaireDataCollectionMethodTypeEnum| undefined | null;
requiredDuration: number | undefined | null;
};

type FormType = PartialForm<Input>;

interface Props {
className?: string;
value: FormType | undefined;
error?: Error<FormType>;
onChange: (...entries: EntriesAsList<FormType>) => void;
}

function MetaDataInputs(props: Props) {
const {
className,
value,
error: riskyError,
onChange,
} = props;

const {
data: metaDataOptions,
loading: metaDataOptionsPending,
} = useQuery<MetaDataOptionsQuery, MetaDataOptionsQueryVariables>(
METADATA_OPTIONS,
);

const error = getErrorObject(riskyError);

const priorityLevelOptions = metaDataOptions
?.questionnairePriorityLevelTypeOptions
?.enumValues as EnumOptions<QuestionnairePriorityLevelTypeEnum>;

const skillOptions = metaDataOptions
?.questionnaireEnumeratorSkillTypeOptions
?.enumValues as EnumOptions<QuestionnaireEnumeratorSkillTypeEnum>;

const collectionMethodOptions = metaDataOptions
?.questionnaireDataCollectionMethodTypeOptions
?.enumValues as EnumOptions<QuestionnaireDataCollectionMethodTypeEnum>;

return (
<>
<SelectInput
className={className}
name="priorityLevel"
value={value?.priorityLevel}
onChange={onChange}
error={error?.priorityLevel}
label="Priority Levels"
options={priorityLevelOptions}
keySelector={enumKeySelector}
labelSelector={enumLabelSelector}
optionsPending={metaDataOptionsPending}
/>
<SelectInput
className={className}
name="dataCollectionMethod"
value={value?.dataCollectionMethod}
onChange={onChange}
error={error?.dataCollectionMethod}
label="Data Collection Method"
options={collectionMethodOptions}
keySelector={enumKeySelector}
labelSelector={enumLabelSelector}
optionsPending={metaDataOptionsPending}
/>
<SelectInput
className={className}
name="enumeratorSkill"
value={value?.enumeratorSkill}
onChange={onChange}
error={error?.enumeratorSkill}
label="Enumerator Skills"
options={skillOptions}
keySelector={enumKeySelector}
labelSelector={enumLabelSelector}
optionsPending={metaDataOptionsPending}
/>
<NumberInput
className={className}
label="Maximum duration (in minutes)"
name="requiredDuration"
value={value?.requiredDuration}
error={error?.requiredDuration}
onChange={onChange}
/>
</>
);
}

export default MetaDataInputs;
Loading

0 comments on commit 914d5a5

Please sign in to comment.