aKdAB2Dk

1
2import React, { useEffect, useState } from "react";
3import { Table, notification, Button, Popover, Spin, Popconfirm } from "antd";
4import { useParams, Link } from "react-router-dom";
5import {
6  DeleteOutlined,
7  PlusCircleFilled,
8} from "@ant-design/icons";
9import API from "../../services/api";
10
11export default function Assesment(props) {
12  let [confirmVisible, setConfirmVisible] = React.useState(false);
13  const [confirmLoading, setConfirmLoading] = React.useState(false);
14  const [loading, setLoading] = React.useState(true);
15  let [listAssesment, setlistAssesment] = React.useState();
16
17  React.useEffect(() => {
18    // rendering to fill listAssesment
19  }, [props]);
20
21  const handleClosed = () => {};
22
23  const showPopconfirm = (id) => {
24    setConfirmVisible(true);
25  };
26
27  const handleOk = (id) => {
28    setConfirmLoading(true);
29    setTimeout(() => {
30      setConfirmVisible(false);
31      setConfirmLoading(false);
32    }, 2000);
33  };
34
35  const handleCancel = () => {
36    console.log("Clicked cancel button");
37    setConfirmVisible(false);
38  };
39
40  const columns = [
41    {
42      title: "Id",
43      dataIndex: "Id",
44      key: "Id",
45    },
46    {
47      title: "Title",
48      dataIndex: "Title",
49      key: "Title",
50    },
51    
52    {
53      title: "Action",
54      key: "action",
55      render: (params) => (
56        <div style={{ display: "flex", alignItems: "center" }}>
57          <Popover content="Delete">
58            <Popconfirm
59              title="Title"
60              visible={confirmVisible}
61              onConfirm={() => handleOk(params.id)}
62              okButtonProps={{ loading: confirmLoading }}
63              onCancel={handleCancel}
64            >
65              <Button
66                type="primary"
67                danger
68                icon={<DeleteOutlined />}
69                onClick={showPopconfirm()}
70              ></Button>
71            </Popconfirm>
72          </Popover>
73        </div>
74      ),
75    },
76  ];
77
78  const topTableComponent = {
79    backgroundColor: "#435D7D",
80    padding: 15,
81    display: "flex",
82    alignItems: "center",
83    justifyContent: "space-between",
84  };
85
86  const topTextComponent = {
87    color: "#FFF",
88    fontSize: 24,
89  };
90
91  const topTableComponentRightPart = {};
92
93  return (
94    <>
95      <div style={{ width: "100%" }}>
96        <div style={topTableComponent}>
97          <h1 style={topTextComponent}>Some Table</h1>
98          <div style={{ topTableComponentRightPart }}>
99            <Link to="/assesment/create">
100              <Button
101                icon={<PlusCircleFilled />}
102                type="primary"
103                style={{ marginLeft: 10 }}
104              >
105                Create
106              </Button>
107            </Link>
108          </div>
109        </div>
110
111        {loading ? (
112          <Spin
113            style={{
114              height: "60vh",
115              display: "flex",
116              justifyContent: "center",
117              alignItems: "center",
118            }}
119            size="large"
120          />
121        ) : (
122          <Table dataSource={listAssesment} columns={columns} />
123        )}
124      </div>
125    </>
126  );
127}
128