· 4 years ago · Sep 08, 2021, 11:00 AM
1import React, { useState } from "react";
2import {
3 Row,
4 Col,
5 Typography,
6 Form,
7 Input,
8 Button,
9 notification,
10 DatePicker,
11 Select,
12} from "antd";
13import API from "../../services/api";
14import moment from "moment";
15
16export default function CreateAssesment(props) {
17 //let [data, setData] = React.useState();
18 let [listSelectOrganization, setListSelectOrganization] = React.useState([]);
19 let newObjArray = [];
20
21 const { Title } = Typography;
22 const { Option } = Select;
23 const dateFormat = "DD-MM-YYYY kk:mm:ss";
24
25 React.useEffect(() => {
26 API.GetOrganization().then((result) => {
27 console.log(result);
28 newObjArray = result;
29
30
31 // for (var org in result) {
32 // var obj = result[org];
33 // var id = obj.id;
34 // var org_title = obj.title;
35 // let newObject = { org_id, org_title };
36 // newObjArray.push(newObject);
37 // }
38 // });
39
40 // setListSelectOrganization((prevArray) => {
41 // return [prevArray, newObjArray];
42 // });
43
44 //setListSelectOrganization(newObjArray);
45
46 //console.log("HASIL OLAH : ", newObjArray);
47 }, [props]);
48
49 const handleClosed = () => {};
50
51 function handleSelectChange(value) {
52 console.log(`selected ${value}`);
53 }
54
55 const CreateSuccessNotification = () => {
56 notification.success({
57 message: "New Assesment Successfully Created",
58 });
59 };
60
61 const handleCreate = (values) => {
62 console.log("Received values of form: ", values);
63
64 const mydate = new Date(values.schedule);
65 const newDate = moment(mydate).format("YYYY-MM-DD kk:mm:ss");
66
67 var api_body = {
68 title: values.title,
69 description: values.description,
70 periodically: values.periodically,
71 typeOfAssement: values.typeofassesment,
72 minimumResult: values.minimumresult,
73 schedule: String(newDate),
74 notify: "0",
75 duration: values.duration,
76 Organization_id: values.organization_id,
77 };
78
79 console.log("API BODY: ", api_body);
80
81 // API.CreateAssesment(api_body)
82 // .then((result) => {
83 // console.log(result);
84 // CreateSuccessNotification();
85 // props.history.push("/assesment");
86 // })
87 // .catch((error) => {
88 // console.log("Creating Failed : " + error);
89 // });
90 };
91
92 function onChange(value, dateString) {
93 console.log("Selected Time: ", value);
94 console.log("Formatted Selected Time: ", dateString);
95 }
96
97 function onOk(value) {
98 console.log("onOk: ", value);
99 }
100
101 return (
102 <>
103 <Row justify="center">
104 <Col span={24} style={{ textAlign: "center" }}>
105 <Title>Create New Assesment</Title>
106 </Col>
107 <Col span={12}>
108 <Form
109 name="currentform"
110 labelCol={{
111 span: 8,
112 }}
113 wrapperCol={{
114 span: 16,
115 }}
116 className="register-form"
117 onFinish={handleCreate}
118 >
119 <Form.Item
120 name="title"
121 label="Title"
122 rules={[
123 {
124 required: true,
125 message: "Please input Title!",
126 whitespace: true,
127 },
128 ]}
129 >
130 <Input />
131 </Form.Item>
132 <Form.Item
133 name="description"
134 label="Description"
135 rules={[
136 {
137 required: true,
138 message: "Please input Description!",
139 whitespace: true,
140 },
141 ]}
142 >
143 <Input />
144 </Form.Item>
145 <Form.Item
146 name="periodically"
147 label="Periodically"
148 rules={[
149 {
150 required: true,
151 message: "Please input Periodically!",
152 whitespace: true,
153 },
154 ]}
155 >
156 <Select
157 defaultValue="Monthly"
158 style={{ width: 120 }}
159 onChange={handleSelectChange}
160 >
161 <Option key="1" value="1">
162 Monthly
163 </Option>
164 <Option key="2" value="2">
165 Yearly
166 </Option>
167 <Option key="3" value="3">
168 Weekly
169 </Option>
170 <Option key="4" value="4">
171 Once
172 </Option>
173 <Option key="5" value="5">
174 After Lesson
175 </Option>
176 </Select>
177 </Form.Item>
178 <Form.Item
179 name="typeofassesment"
180 label="Type Of Assesment"
181 rules={[
182 {
183 required: true,
184 message: "Please input Assesment Type!",
185 whitespace: true,
186 },
187 ]}
188 >
189 <Select
190 defaultValue="Score"
191 style={{ width: 120 }}
192 onChange={handleSelectChange}
193 >
194 <Option key="1" value="1">
195 Score
196 </Option>
197 <Option key="2" value="2">
198 Benar Salah
199 </Option>
200 </Select>
201 </Form.Item>
202 <Form.Item
203 name="minimumresult"
204 label="Minimum Result"
205 rules={[
206 {
207 required: true,
208 message: "Please input Minimum Result!",
209 whitespace: true,
210 },
211 ]}
212 >
213 <Input />
214 </Form.Item>
215 <Form.Item
216 name="schedule"
217 label="Schedule"
218 rules={[
219 {
220 required: true,
221 message: "Please input Schedule!",
222 },
223 ]}
224 >
225 <DatePicker
226 showTime={{ format: "HH:mm" }}
227 format={dateFormat}
228 onChange={onChange}
229 onOk={onOk}
230 />
231 </Form.Item>
232 <Form.Item
233 name="duration"
234 label="Duration"
235 rules={[
236 {
237 required: true,
238 message: "Please input Duration!",
239 whitespace: true,
240 },
241 ]}
242 >
243 <Input />
244 </Form.Item>
245 <Form.Item
246 name="organization_id"
247 label="Organization ID"
248 rules={[
249 {
250 required: true,
251 message: "Please input Organization",
252 whitespace: true,
253 },
254 ]}
255 >
256 <Select
257 defaultValue="Score"
258 style={{ width: 120 }}
259 onChange={handleSelectChange}
260 >
261 {newObjArray.map(
262 (obj) => (
263 console.log("SELECT OPTION: ", obj),
264 (
265 <Option key={obj.id} value={obj.id}>
266 {obj.title}
267 </Option>
268 )
269 )
270 )}
271 {/* <Option value="1">Score</Option> */}
272 </Select>
273 </Form.Item>
274
275 <Form.Item
276 wrapperCol={{
277 offset: 8,
278 span: 16,
279 }}
280 >
281 <Button type="primary" htmlType="submit">
282 Submit
283 </Button>
284 </Form.Item>
285 </Form>
286 </Col>
287 </Row>
288 </>
289 );
290}
291