-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
enhance: add possibility to change live quiz name and displayname ind…
…ependent of status (#4131)
- Loading branch information
1 parent
2d787c3
commit 525661c
Showing
13 changed files
with
339 additions
and
5 deletions.
There are no files selected for viewing
162 changes: 162 additions & 0 deletions
162
apps/frontend-manage/src/components/sessions/LiveQuizNameChangeModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| import { useMutation } from '@apollo/client' | ||
| import { ChangeLiveQuizNameDocument } from '@klicker-uzh/graphql/dist/ops' | ||
| import { Button, FormikTextField, Modal, Toast } from '@uzh-bf/design-system' | ||
| import { Formik } from 'formik' | ||
| import { useTranslations } from 'next-intl' | ||
| import { useState } from 'react' | ||
| import { twMerge } from 'tailwind-merge' | ||
| import * as Yup from 'yup' | ||
|
|
||
| interface LiveQuizNameChangeModalProps { | ||
| quizId: string | ||
| name: string | ||
| displayName: string | ||
| open: boolean | ||
| setOpen: (value: boolean) => void | ||
| } | ||
|
|
||
| function LiveQuizNameChangeModal({ | ||
| quizId, | ||
| name, | ||
| displayName, | ||
| open, | ||
| setOpen, | ||
| }: LiveQuizNameChangeModalProps) { | ||
| const t = useTranslations() | ||
| const [changeLiveQuizName] = useMutation(ChangeLiveQuizNameDocument) | ||
| const [successToast, setSuccessToast] = useState(false) | ||
| const [errorToast, setErrorToast] = useState(false) | ||
|
|
||
| const schema = Yup.object().shape({ | ||
| name: Yup.string().required(t('manage.sessionForms.sessionName')), | ||
| displayName: Yup.string().required( | ||
| t('manage.sessionForms.sessionDisplayName') | ||
| ), | ||
| }) | ||
|
|
||
| return ( | ||
| <> | ||
| <Modal | ||
| hideCloseButton | ||
| escapeDisabled | ||
| open={open} | ||
| onClose={(): void => setOpen(false)} | ||
| title={t('manage.sessions.changeLiveQuizName')} | ||
| className={{ | ||
| content: 'w-[30rem] min-h-max h-max self-center pt-0', | ||
| title: 'text-xl', | ||
| }} | ||
| > | ||
| <Formik | ||
| initialValues={{ | ||
| name: name, | ||
| displayName: displayName, | ||
| }} | ||
| onSubmit={async (values, { setSubmitting }) => { | ||
| setSubmitting(true) | ||
| const result = await changeLiveQuizName({ | ||
| variables: { | ||
| id: quizId, | ||
| name: values.name, | ||
| displayName: values.displayName, | ||
| }, | ||
| optimisticResponse: { | ||
| __typename: 'Mutation', | ||
| changeLiveQuizName: { | ||
| id: quizId, | ||
| name: values.name, | ||
| displayName: values.displayName, | ||
| }, | ||
| }, | ||
| }) | ||
|
|
||
| if (result.data?.changeLiveQuizName?.id) { | ||
| setSuccessToast(true) | ||
| setSubmitting(false) | ||
| setOpen(false) | ||
| } else { | ||
| setErrorToast(true) | ||
| setSubmitting(false) | ||
| } | ||
| }} | ||
| validationSchema={schema} | ||
| isInitialValid={true} | ||
| > | ||
| {({ isValid, isSubmitting, submitForm }) => ( | ||
| <> | ||
| <FormikTextField | ||
| required | ||
| labelType="small" | ||
| autoComplete="off" | ||
| name="name" | ||
| label={t('manage.sessionForms.name')} | ||
| tooltip={t('manage.sessionForms.liveQuizName')} | ||
| className={{ | ||
| root: 'mb-2 -mt-2 w-full', | ||
| tooltip: 'z-20 w-80', | ||
| label: 'w-36', | ||
| }} | ||
| data-cy="insert-live-quiz-name" | ||
| shouldValidate={() => true} | ||
| /> | ||
| <FormikTextField | ||
| required | ||
| labelType="small" | ||
| autoComplete="off" | ||
| name="displayName" | ||
| label={t('manage.sessionForms.displayName')} | ||
| tooltip={t('manage.sessionForms.displayNameTooltip')} | ||
| className={{ | ||
| root: 'w-full', | ||
| tooltip: 'z-20 w-80', | ||
| label: 'w-36', | ||
| }} | ||
| data-cy="insert-live-quiz-display-name" | ||
| /> | ||
| <div className="flex flex-row justify-between mt-3 -mb-4"> | ||
| <Button | ||
| type="button" | ||
| onClick={(): void => setOpen(false)} | ||
| data={{ cy: 'live-quiz-name-change-cancel' }} | ||
| > | ||
| {t('shared.generic.cancel')} | ||
| </Button> | ||
| <Button | ||
| type="submit" | ||
| disabled={isSubmitting || !isValid} | ||
| loading={isSubmitting} | ||
| onClick={submitForm} | ||
| className={{ | ||
| root: twMerge( | ||
| 'bg-primary-80 font-bold text-white', | ||
| !isValid && 'bg-primary-60 cursor-not-allowed' | ||
| ), | ||
| }} | ||
| data={{ cy: 'live-quiz-name-change-confirm' }} | ||
| > | ||
| {t('shared.generic.confirm')} | ||
| </Button> | ||
| </div> | ||
| </> | ||
| )} | ||
| </Formik> | ||
| </Modal> | ||
| <Toast | ||
| openExternal={successToast} | ||
| setOpenExternal={setSuccessToast} | ||
| type="success" | ||
| > | ||
| {t('manage.sessions.liveQuizNameChangeSuccess')} | ||
| </Toast> | ||
| <Toast | ||
| openExternal={errorToast} | ||
| setOpenExternal={setErrorToast} | ||
| type="error" | ||
| > | ||
| {t('manage.sessions.liveQuizNameChangeError')} | ||
| </Toast> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default LiveQuizNameChangeModal |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
packages/graphql/src/graphql/ops/MChangeLiveQuizName.graphql
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| mutation ChangeLiveQuizName( | ||
| $id: String! | ||
| $name: String! | ||
| $displayName: String! | ||
| ) { | ||
| changeLiveQuizName(id: $id, name: $name, displayName: $displayName) { | ||
| id | ||
| name | ||
| displayName | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.