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