-
Notifications
You must be signed in to change notification settings - Fork 1
/
Fault_post_modal.tsx
107 lines (94 loc) · 3.5 KB
/
Fault_post_modal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import React, { useState } from 'react';
import { Button, Modal, Form, Input, DatePicker, Checkbox, Select, Upload } from 'antd';
import type { Student, Subject, StudentSubjectEnrolments } from '@/models/types';
import postFault from '@/services/client/fetching/hooks/postFault'
import regex from '@/consts/regex';
const { Option } = Select;
interface DocentPostModalProps {
students: Student[];
subjects: Subject[];
enrolments: StudentSubjectEnrolments[];
}
const DocentPostModal: React.FC<DocentPostModalProps> = ({ students, subjects, enrolments }) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedStudent, setSelectedStudent] = useState<number | null>(null);
const [form] = Form.useForm();
const showModal = () => {
setIsModalOpen(true);
};
const handleOk = () => {
setIsModalOpen(false);
};
const handleCancel = () => {
setIsModalOpen(false);
};
const handleStudentChange = (value: number) => {
setSelectedStudent(value);
};
console.log(enrolments);
const filteredSubjects = selectedStudent
? subjects.filter((subject) =>
enrolments.some(
// @ts-ignore
({ StudentSubjectEnrolments, Subjects }) =>
Number(StudentSubjectEnrolments.student_id) === Number(selectedStudent) &&
Subjects.acronym === subject.acronym
)
)
: [];
const onFinish = (values: any) => {
console.log('Received values of form: ', values);
handleOk();
postFault(values);
};
return (
<>
<Button type="primary" onClick={showModal}>
Crear una falta de asistencia
</Button>
<Modal footer={null} title="Crear una falta de asistencia" visible={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
<Form form={form} onFinish={onFinish}>
<Form.Item required={true} label="ID del estudiante" name="student_id">
<Select placeholder="Selecciona un estudiante" onChange={handleStudentChange}>
{students.map((student: Student) => (
<Option key={student.id} value={student.id}>{student.name + ' ' + student.surname}</Option>
))}
</Select>
</Form.Item>
<Form.Item required={true} label="Acrónimo de la materia" name="subject_acronym">
<Select placeholder="Selecciona una materia">
{filteredSubjects.map((subject) => (
<Option key={subject.acronym} value={subject.acronym}>{subject.name + ' - (' + subject.acronym + ')'}</Option>
))}
</Select>
</Form.Item>
<Form.Item required={true} label="Fecha" name="date">
<DatePicker />
</Form.Item>
<Form.Item required={true} label="Justificado" name="justified" valuePropName="checked">
<Checkbox onChange={e => form.setFieldsValue({ justified: e.target.checked })} />
</Form.Item>
<Form.Item label="Descripción" name="description"
rules={[
{
pattern: regex.description,
message: 'Por favor, introduce una descripción',
},
]}
>
<Input placeholder="Descripción" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Enviar
</Button>
<Button type="default" htmlType="button" onClick={handleCancel}>
Cancelar
</Button>
</Form.Item>
</Form>
</Modal>
</>
);
};
export default DocentPostModal;