QuestionsPage: add qualification select

src/features/QuestionsPage/components/FormDialog/FormDialog.tsx

@@ -1,5 +1,6 @@
 import { useForm, Controller } from 'react-hook-form';
 import { pick } from 'lodash';
+import useQualifications from './FormDialog.useQualifications';
 import { QuestionInput, Question, Maybe, Answer } from 'libs/graphql/types';
 
 import { makeStyles } from '@material-ui/core/styles';
@@ -14,7 +15,7 @@ import {
   TextField,
 } from '@material-ui/core';
 
-const ANSWERS = Object.keys(Answer);
+const ANSWERS = Object.values(Answer);
 
 export interface FormDialogProps extends Pick<DialogProps, 'open'> {
   question?: Maybe<Question>;
@@ -31,6 +32,10 @@ const FormDialog = ({ open, onClose, question, onSubmit }: FormDialogProps) => {
     control,
     formState: { isSubmitting },
   } = useForm<QuestionInput>({});
+  const {
+    qualifications,
+    loading: loadingQualifications,
+  } = useQualifications();
   const classes = useStyles();
 
   const _onSubmit = async (data: QuestionInput) => {
@@ -108,7 +113,6 @@ const FormDialog = ({ open, onClose, question, onSubmit }: FormDialogProps) => {
           {ANSWERS.map(answer => {
             const upper = answer.toUpperCase();
             return (
-              //(question as any)[`answer${upper}`]
               <TextField
                 fullWidth
                 key={upper}
@@ -128,6 +132,28 @@ const FormDialog = ({ open, onClose, question, onSubmit }: FormDialogProps) => {
               />
             );
           })}
+          {!loadingQualifications && (
+            <Controller
+              name="qualificationID"
+              defaultValue={
+                question?.qualification?.id ?? qualifications[0]?.id
+              }
+              control={control}
+              rules={{
+                valueAsNumber: true,
+                required: 'Musisz wybrać kwalifikację.',
+              }}
+              as={
+                <TextField select fullWidth label="Kwalifikacja">
+                  {qualifications.map(qualification => (
+                    <MenuItem key={qualification.id} value={qualification.id}>
+                      {qualification.name} ({qualification.code})
+                    </MenuItem>
+                  ))}
+                </TextField>
+              }
+            />
+          )}
         </DialogContent>
         <DialogActions>
           <Button

src/features/QuestionsPage/components/FormDialog/FormDialog.useQualifications.ts

@@ -0,0 +1,26 @@
+import { useQuery } from '@apollo/client';
+import { QUERY_QUALIFICATIONS } from './queries';
+import { Query, QueryQualificationsArgs } from 'libs/graphql/types';
+
+const useQualifications = () => {
+  const { data, loading, refetch } = useQuery<
+    Pick<Query, 'qualifications'>,
+    QueryQualificationsArgs
+  >(QUERY_QUALIFICATIONS, {
+    fetchPolicy: 'cache-and-network',
+    variables: {
+      sort: ['id ASC'],
+    },
+  });
+
+  return {
+    qualifications: data?.qualifications.items ?? [],
+    get loading() {
+      return this.qualifications.length === 0 && loading;
+    },
+    total: data?.qualifications.total ?? 0,
+    refetch,
+  };
+};
+
+export default useQualifications;

src/features/QuestionsPage/components/FormDialog/queries.ts

@@ -0,0 +1,24 @@
+import { gql } from '@apollo/client';
+
+export const QUERY_QUALIFICATIONS = gql`
+  query qualifications(
+    $offset: Int
+    $limit: Int
+    $filter: QualificationFilter
+    $sort: [String!]
+  ) {
+    qualifications(
+      offset: $offset
+      limit: $limit
+      filter: $filter
+      sort: $sort
+    ) {
+      total
+      items {
+        id
+        name
+        code
+      }
+    }
+  }
+`;