feat: add AutoTest form with question editor and data types

client/src/modules/AutoTest/components/AutoTestForm/AutoTestForm.tsx

@@ -0,0 +1,132 @@
+import { Button, Form, InputNumber, Card, Row, Col, Switch, Space } from 'antd';
+import { useMemo } from 'react';
+import { AutoTestTaskDto } from 'api';
+import { QuestionEditor } from './QuestionEditor';
+import { EditAutoTestFormData } from './data/types';
+
+type EditTaskFormProps = {
+  selectedTask: AutoTestTaskDto;
+  onCancel: () => void;
+  onSave: (updatedTask: AutoTestTaskDto) => void;
+};
+
+export default function EditTaskForm({ selectedTask, onCancel, onSave }: EditTaskFormProps) {
+  const [form] = Form.useForm<EditAutoTestFormData>();
+  const initialFormValues = useMemo(() => {
+    const pub = selectedTask.attributes.public;
+    const processedQuestions = pub.questions.map((q, idx) => {
+      if (q.multiple) {
+        return {
+          question: q.question,
+          questionImage: q.questionImage || '',
+          answersType: q.answersType || 'text',
+          multiple: q.multiple,
+          answers: q.answers.map((ans: string, aIdx: number) => ({
+            text: ans,
+            correct: selectedTask.attributes.answers?.[idx]?.includes(aIdx) || false,
+          })),
+        };
+      } else {
+        return {
+          question: q.question,
+          questionImage: q.questionImage || '',
+          answersType: q.answersType || 'text',
+          multiple: q.multiple,
+          answers: q.answers.map((ans: string) => ({ text: ans })),
+          correctIndex: selectedTask.attributes.answers?.[idx]?.[0],
+        };
+      }
+    });
+    return { ...pub, questions: processedQuestions };
+  }, [selectedTask]);
+
+  const handleSave = (values: any) => {
+    const { questions, ...rest } = values;
+    const updatedQuestions = questions.map((q: any) => ({
+      question: q.question,
+      questionImage: q.questionImage,
+      answersType: q.answersType,
+      multiple: q.multiple,
+      answers: q.answers.map((a: any) => a.text),
+    }));
+    const updatedAnswers = questions.map((q: any) => {
+      if (q.multiple) {
+        return q.answers.reduce((acc: number[], a: any, idx: number) => (a.correct ? [...acc, idx] : acc), []);
+      } else {
+        return typeof q.correctIndex === 'number' ? [q.correctIndex] : [];
+      }
+    });
+    onSave({
+      ...selectedTask,
+      attributes: { public: { ...rest, questions: updatedQuestions }, answers: updatedAnswers },
+    });
+  };
+
+  return (
+    <Card className="autoTestForm" size="small" title={`Edit ${selectedTask.name}`}>
+      <Form form={form} initialValues={initialFormValues} onFinish={handleSave} layout="vertical" size="small">
+        <Space direction="vertical" size="small" style={{ width: '100%' }}>
+          <Card type="inner" title="Test Settings">
+            <Row gutter={8}>
+              {[
+                {
+                  label: 'Max Attempts',
+                  name: 'maxAttemptsNumber',
+                  component: <InputNumber min={1} style={{ width: '100%' }} />,
+                },
+                {
+                  label: 'Number of Questions',
+                  name: 'numberOfQuestions',
+                  component: <InputNumber min={1} style={{ width: '100%' }} />,
+                },
+                {
+                  label: 'Threshold (%)',
+                  name: 'tresholdPercentage',
+                  component: <InputNumber min={0} max={100} style={{ width: '100%' }} />,
+                },
+                { label: 'Strict Mode', name: 'strictAttemptsMode', component: <Switch />, valuePropName: 'checked' },
+              ].map(({ label, name, component, valuePropName }) => (
+                <Col key={label} xs={24} sm={12} md={6}>
+                  <Form.Item label={label} name={name} {...(valuePropName ? { valuePropName } : {})}>
+                    {component}
+                  </Form.Item>
+                </Col>
+              ))}
+            </Row>
+          </Card>
+          <Card type="inner" title="Questions" style={{ marginBottom: 10 }}>
+            <Form.List name="questions">
+              {(fields, { add, remove }) => (
+                <>
+                  {fields.map(field => (
+                    <QuestionEditor key={field.key} field={field} form={form} removeQuestion={remove} />
+                  ))}
+                  <Form.Item>
+                    <Button type="dashed" onClick={() => add()} block>
+                      + Add Question
+                    </Button>
+                  </Form.Item>
+                </>
+              )}
+            </Form.List>
+          </Card>
+        </Space>
+        <Row justify="end" gutter={8}>
+          <Col>
+            <Button onClick={onCancel}>Cancel</Button>
+          </Col>
+          <Col>
+            <Button type="primary" htmlType="submit">
+              Save
+            </Button>
+          </Col>
+        </Row>
+      </Form>
+      <style jsx global>{`
+        .autoTestForm .ant-form-item {
+          margin-bottom: 12px !important;
+        }
+      `}</style>
+    </Card>
+  );
+}

client/src/modules/AutoTest/components/AutoTestForm/QuestionEditor.tsx

@@ -0,0 +1,100 @@
+import { Button, Card, Checkbox, Col, Form, FormInstance, Input, Radio, Row, Select } from 'antd';
+import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
+import { FormListFieldData } from 'antd/lib';
+import { EditAutoTestFormData } from './data/types';
+
+type QuestionEditorProps = {
+  field: FormListFieldData;
+  form: FormInstance<EditAutoTestFormData>;
+  removeQuestion: (name: number) => void;
+};
+
+const { Option } = Select;
+
+export function QuestionEditor({ field, form, removeQuestion }: QuestionEditorProps) {
+  const { key, name, ...restField } = field;
+  const isMultiple = Form.useWatch(['questions', name, 'multiple'], form);
+  const answersList = Form.useWatch(['questions', name, 'answers'], form) || [];
+  return (
+    <Card key={key} size="small">
+      <Row gutter={8} align="bottom">
+        <Col xs={24} sm={16}>
+          <Form.Item
+            {...restField}
+            label={`Question ${name + 1}`}
+            name={[name, 'question']}
+            rules={[{ required: true, message: 'Enter question' }]}
+          >
+            <Input placeholder="Question" />
+          </Form.Item>
+        </Col>
+        <Col xs={24} sm={8}>
+          <Form.Item name={[name, 'multiple']} valuePropName="checked">
+            <Checkbox>Multiple Choice</Checkbox>
+          </Form.Item>
+        </Col>
+      </Row>
+      <Row gutter={8}>
+        <Col xs={24} sm={12}>
+          <Form.Item label="Question Image URL" name={[name, 'questionImage']}>
+            <Input placeholder="Optional image URL" />
+          </Form.Item>
+        </Col>
+        <Col xs={24} sm={12}>
+          <Form.Item label="Answers Type" name={[name, 'answersType']}>
+            <Select>
+              <Option value="text">Text</Option>
+              <Option value="image">Image</Option>
+            </Select>
+          </Form.Item>
+        </Col>
+      </Row>
+      <Form.List name={[name, 'answers']}>
+        {(subFields, { add: addAnswer, remove: removeAnswer }) => (
+          <>
+            {subFields.map(({ key: subKey, name: subName, ...subRestField }) => (
+              <Row key={subKey} gutter={4} align="top" style={{ marginBottom: 4 }}>
+                {isMultiple && (
+                  <Col flex="none">
+                    <Form.Item {...subRestField} name={[subName, 'correct']} valuePropName="checked">
+                      <Checkbox />
+                    </Form.Item>
+                  </Col>
+                )}
+                <Col flex="auto">
+                  <Form.Item name={[subName, 'text']} rules={[{ required: true, message: 'Enter answer' }]}>
+                    <Input placeholder="Answer" />
+                  </Form.Item>
+                </Col>
+                <Col flex="none">
+                  <Button icon={<DeleteOutlined />} danger onClick={() => removeAnswer(subName)} />
+                </Col>
+              </Row>
+            ))}
+            <Form.Item>
+              <Button type="dashed" onClick={() => addAnswer()} block>
+                + Add Answer
+              </Button>
+            </Form.Item>
+          </>
+        )}
+      </Form.List>
+      {!isMultiple && (
+        <Form.Item
+          label="Select Correct Answer"
+          name={[name, 'correctIndex']}
+          rules={[{ required: true, message: 'Select correct answer' }]}
+        >
+          <Radio.Group>
+            {answersList.map((_: any, index: number) => (
+              <Radio key={index} value={index}>{`Answer ${index + 1}`}</Radio>
+            ))}
+          </Radio.Group>
+        </Form.Item>
+      )}
+      <Button danger onClick={() => removeQuestion(name)} style={{ marginTop: 4 }}>
+        Remove Question
+      </Button>
+    </Card>
+  );
+}

client/src/modules/AutoTest/components/AutoTestForm/data/types.ts

@@ -0,0 +1,21 @@
+export interface AnswerFormData {
+  text: string;
+  correct?: boolean;
+}
+
+export interface QuestionFormData {
+  question: string;
+  questionImage: string;
+  answersType: 'text' | 'image';
+  multiple: boolean;
+  answers: AnswerFormData[];
+  correctIndex?: number;
+}
+
+export interface EditAutoTestFormData {
+  maxAttemptsNumber: number;
+  numberOfQuestions: number;
+  tresholdPercentage: number;
+  strictAttemptsMode: boolean;
+  questions: QuestionFormData[];
+}