diff --git a/website/public/locales/de/tasks.json b/website/public/locales/de/tasks.json index c56466664d..ec4e90bf5c 100644 --- a/website/public/locales/de/tasks.json +++ b/website/public/locales/de/tasks.json @@ -1,5 +1,6 @@ { "available_task_count": "{{count}} Aufgaben verfügbar", + "skip_confirmation": "Sind Sie sicher das sie überspringen wollen?", "classify_assistant_reply": { "label": "Antwort des Assistenten klassifizieren", "desc": "Labeln Sie die Antwort.", diff --git a/website/public/locales/en/tasks.json b/website/public/locales/en/tasks.json index 00ccbb91e7..ea19bc062d 100644 --- a/website/public/locales/en/tasks.json +++ b/website/public/locales/en/tasks.json @@ -1,6 +1,7 @@ { "any_feedback_on_this_task": "Any feedback on this task?", "available_task_count": "{{count}} tasks available", + "skip_confirmation": "Are you sure you want to skip?", "default": { "unchanged_title": "No changes", "unchanged_message": "Are you sure you would like to continue?", diff --git a/website/src/components/Buttons/Skip.tsx b/website/src/components/Buttons/Skip.tsx new file mode 100644 index 0000000000..cbcc6b0a27 --- /dev/null +++ b/website/src/components/Buttons/Skip.tsx @@ -0,0 +1,62 @@ +import { + Button, + ButtonProps, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + useDisclosure, +} from "@chakra-ui/react"; +import { useTranslation } from "next-i18next"; + +interface SkipButtonProps extends ButtonProps { + onSkip: () => void; + confirmSkip: boolean; +} + +export const SkipButton = ({ ...props }: SkipButtonProps) => { + const { t } = useTranslation(); + const { isOpen, onOpen: showModal, onClose: closeModal } = useDisclosure(); + + const onClick = () => { + if (props.confirmSkip) { + showModal(); + } else { + props.onSkip(); + } + }; + + const onConfirmedSkip = () => { + closeModal(); + props.onSkip(); + }; + + return ( + <> + + + + + + {t("skip")} + +
{t("tasks:skip_confirmation")}
+
+ + + + +
+
+ + ); +}; diff --git a/website/src/components/Survey/TaskControls.tsx b/website/src/components/Survey/TaskControls.tsx index 2d4ee69831..44ce424121 100644 --- a/website/src/components/Survey/TaskControls.tsx +++ b/website/src/components/Survey/TaskControls.tsx @@ -1,4 +1,4 @@ -import { Button, Card, Flex, IconButton, Progress, Tooltip } from "@chakra-ui/react"; +import { Card, Flex, IconButton, Progress, Tooltip } from "@chakra-ui/react"; import { Edit2 } from "lucide-react"; import { useTranslation } from "next-i18next"; import { SubmitButton } from "src/components/Buttons/Submit"; @@ -6,6 +6,8 @@ import { TaskInfo } from "src/components/TaskInfo/TaskInfo"; import { TaskStatus } from "src/components/Tasks/Task"; import { BaseTask } from "src/types/Task"; +import { SkipButton } from "../Buttons/Skip"; + export interface TaskControlsProps { task: BaseTask; taskStatus: TaskStatus; @@ -39,9 +41,11 @@ export const TaskControls = ({ {taskStatus.mode === "EDIT" ? ( <> - +