Skip to content

Commit

Permalink
Fix task and topic details UI
Browse files Browse the repository at this point in the history
  • Loading branch information
akmatoff committed May 26, 2024
1 parent 6f48fdc commit 669d551
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 106 deletions.
22 changes: 0 additions & 22 deletions src/pages/tasks/TaskDetails.module.scss

This file was deleted.

132 changes: 64 additions & 68 deletions src/pages/tasks/TaskDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { useEffect, useMemo, useState } from "react";
import { Controller, SubmitHandler, useForm } from "react-hook-form";
import { useNavigate, useParams } from "react-router-dom";

import styles from "./TaskDetails.module.scss";
import CustomSelect from "@/components/shared/CustomSelect/CustomSelect";

const initialValues: ITaskCreate = {
Expand All @@ -39,8 +38,6 @@ function TaskDetails() {

const navigate = useNavigate();

// const [search, setSearch] = useState("");

const [answer, setAnswer] = useState<ICreateAnswer>({
text: "",
isCorrectAnswer: false,
Expand All @@ -54,11 +51,7 @@ function TaskDetails() {
{ enabled: !!id }
);

const {
data: topics,
isLoading: isTopicsLoading,
// refetch,
} = useTopicsQuery({});
const { data: topics, isLoading: isTopicsLoading } = useTopicsQuery({});

const [activeValue, setActiveValue] = useState<IOption>({
label: topics?.[0].title,
Expand Down Expand Up @@ -143,6 +136,7 @@ function TaskDetails() {
answers: existingTask.answers,
tip: existingTask.tip,
image: existingTask.image,
isUserAnswer: existingTask.isUserAnswer,
});
setActiveValue({
label: existingTask.topic.title,
Expand Down Expand Up @@ -224,6 +218,18 @@ function TaskDetails() {
}}
/>

<Controller
control={taskForm.control}
name="correctAnswerExplanation"
render={({ field }) => (
<CustomInput
{...field}
label="Объяснение правильного ответа"
placeholder="Введите объяснение правильного ответа..."
/>
)}
/>

<Checkbox
isSelected={taskForm.watch("isUserAnswer")}
onValueChange={(value) =>
Expand All @@ -234,65 +240,55 @@ function TaskDetails() {
</Checkbox>

{!taskForm.watch("isUserAnswer") && (
<Controller
control={taskForm.control}
name="correctAnswerExplanation"
render={({ field }) => (
<CustomInput
{...field}
label="Объяснение правильного ответа"
placeholder="Введите объяснение правильного ответа..."
/>
)}
/>
)}

{!taskForm.watch("isUserAnswer") && (
<>
<h3>Варианты ответов</h3>

<div className={styles["answers-wrapper"]}>
{answers.map((answer, index) => (
<div className={styles["answer"]} key={index}>
<div className={styles["answer-inputs"]}>
<CustomInput
label={`Ответ ${index + 1}`}
placeholder="Введите вариант ответа..."
name="answers"
value={answer.text}
onChange={(e) => {
setAnswers((prevAnswers) =>
prevAnswers.map((answer, prevAnswerIndex) =>
prevAnswerIndex === index
? { ...answer, text: e.target.value }
: answer
)
);
}}
/>

<CustomCheckbox
label="Правильный ответ"
value={answer.isCorrectAnswer}
onClick={() => {
setAnswers((prevAnswers) =>
prevAnswers.map((answer, prevAnswerIndex) =>
prevAnswerIndex === index
? {
...answer,
isCorrectAnswer: !answer.isCorrectAnswer,
}
: { ...answer, isCorrectAnswer: false }
)
);
}}
/>
</div>
<div className="flex flex-col gap-2">
{!!answers.length && (
<div>
<h3 className="mb-3">Варианты ответов</h3>

<div className="grid grid-cols-2 place-content-center gap-4 mb-4">
{answers.map((answer, index) => (
<div className="flex flex-col" key={index}>
<div className="flex items-center gap-3">
<CustomInput
label={`Ответ ${index + 1}`}
placeholder="Введите вариант ответа..."
name="answers"
value={answer.text}
onChange={(e) => {
setAnswers((prevAnswers) =>
prevAnswers.map((answer, prevAnswerIndex) =>
prevAnswerIndex === index
? { ...answer, text: e.target.value }
: answer
)
);
}}
/>

<CustomCheckbox
label="Правильный ответ"
value={answer.isCorrectAnswer}
onClick={() => {
setAnswers((prevAnswers) =>
prevAnswers.map((answer, prevAnswerIndex) =>
prevAnswerIndex === index
? {
...answer,
isCorrectAnswer: !answer.isCorrectAnswer,
}
: { ...answer, isCorrectAnswer: false }
)
);
}}
/>
</div>
</div>
))}
</div>
))}
</div>
</div>
)}

<div className={styles["input-container"]}>
<div className="flex flex-col gap-3">
<CustomInput
label="Ответ"
placeholder="Введите вариант ответа..."
Expand All @@ -306,16 +302,16 @@ function TaskDetails() {
onClick={handleNewAnswerToggle}
/>
</div>
<div className={styles["button-container"]}>
<div className="mt-8">
<Button
color="primary"
onClick={handleAddAnswer}
disabled={answer.text.trim().length === 0}
isDisabled={answer.text.trim().length === 0}
>
Добавить вариант ответа
</Button>
</div>
</>
</div>
)}
</Resource>
);
Expand Down
17 changes: 2 additions & 15 deletions src/pages/topics/TopicDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,6 @@ function TopicDetails() {

const navigate = useNavigate();

// const [search, setSearch] = useState("");

const { showSuccessNotification, showErrorNotification } = useNotification();

const {
Expand All @@ -54,11 +52,7 @@ function TopicDetails() {
isSuccess,
} = useTopicDetailsQuery(+id!, { enabled: !!id });

const {
data: sections,
isPending: isSectionsLoading,
// refetch,
} = useSectionsQuery({});
const { data: sections, isPending: isSectionsLoading } = useSectionsQuery({});

const { data: topicContent, isLoading: isTopicContentLoading } =
useTopicContent(+id!, { enabled: !!id });
Expand Down Expand Up @@ -255,14 +249,7 @@ function TopicDetails() {
>
<SortableContext items={topicContentDisplay}>
{!isTopicContentLoading && (
<div
style={{
marginTop: "16px",
display: "grid",
gridTemplateColumns: "1fr 1fr 1fr",
gap: "16px",
}}
>
<div className="grid grid-cols-3 gap-3">
{topicContentDisplay.map((content) => (
<ContentCard topicContent={content} key={content.id} />
))}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/topics/components/ContentCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function ContentCard({ topicContent }: Props) {
{...listeners}
ref={setNodeRef}
>
<RiDraggable style={{ fontSize: "20px" }} />
<RiDraggable className="flex-shrink-0 text-2xl" />
<Typography variant="h1" weight="600">
{topicContent.orderNumber}
</Typography>
Expand Down

0 comments on commit 669d551

Please sign in to comment.