Add 'sge-frontend/' from commit '5fa787e054b25ac53edc7ff0275ea7960a709401'

git-subtree-dir: sge-frontend
git-subtree-mainline: 876c278ac4
git-subtree-split: 5fa787e054

sge-frontend/src/views/UserActivity.js

@@ -0,0 +1,172 @@
+import React, { useEffect, useState } from "react";
+import { ChevronDown } from "react-feather";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Row,
+  Col,
+} from "reactstrap";
+import DataTable from "react-data-table-component";
+import ReactPaginate from "react-paginate";
+import { useTranslation } from "react-i18next";
+import { useSelector, useDispatch } from "react-redux";
+import { getUserHistory } from "../redux/actions/userHistory";
+
+const UserActivity = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+
+  const serverSideColumns = [
+    {
+      name: t("Activities.type"),
+      selector: (row) => row.logType,
+      sortable: true,
+      maxWidth: "500px",
+    },
+    {
+      name: t("Activities.message"),
+      selector: (row) => row.logMessage,
+      sortable: true,
+      maxWidth: "500px",
+    },
+    {
+      name: t("Time"),
+      selector: (row) => row.createdDateTime,
+      sortable: false,
+      minWidth: "350px",
+      cell: (row) => (
+        <span>
+          {row.createdDateTime
+            ? new Date(row.createdDateTime).toLocaleString("tr-TR")
+            : "-"}
+        </span>
+      ),
+    },
+  ];
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+
+  const userHistoriesStore = useSelector((state) => state.userHistory);
+  const [userHistories, setUserHistories] = useState([]);
+
+  useEffect(() => {
+    dispatch(getUserHistory({ currentPage, rowsPerPage }));
+  }, [currentPage, rowsPerPage]);
+  useEffect(() => {
+    if (userHistoriesStore.userHistories?.content) {
+      setUserHistories(userHistoriesStore.userHistories?.content);
+    }
+  }, [
+    userHistoriesStore?.userHistories?.content?.length,
+    userHistoriesStore?.userHistories,
+  ]);
+
+  const handlePagination = (page) => {
+    setCurrentPage(page.selected + 1);
+    setUserHistories(userHistoriesStore.userHistories?.content);
+  };
+
+  const handlePerPage = (e) => {
+    setCurrentPage(1);
+    setRowsPerPage(parseInt(e.target.value));
+    setUserHistories(userHistoriesStore.userHistories?.content);
+  };
+
+  const CustomPagination = () => {
+    const count = Number(
+      (
+        userHistoriesStore?.userHistories?.pageInfo?.totalElements / rowsPerPage
+      ).toFixed(1)
+    );
+
+    return (
+      <ReactPaginate
+        previousLabel={""}
+        nextLabel={""}
+        breakLabel="..."
+        pageCount={count || 1}
+        marginPagesDisplayed={2}
+        pageRangeDisplayed={2}
+        activeClassName="active"
+        forcePage={currentPage !== 0 ? currentPage - 1 : 0}
+        onPageChange={(page) => handlePagination(page)}
+        pageClassName={"page-item"}
+        nextLinkClassName={"page-link"}
+        nextClassName={"page-item next"}
+        previousClassName={"page-item prev"}
+        previousLinkClassName={"page-link"}
+        pageLinkClassName={"page-link"}
+        breakClassName="page-item"
+        breakLinkClassName="page-link"
+        containerClassName={
+          "pagination react-paginate separated-pagination pagination-sm justify-content-end pr-1 mt-1"
+        }
+      />
+    );
+  };
+
+  const ExpandableTable = ({ data }) => {
+    return (
+      <div className="expandable-content p-2">
+        <p className="font-weight-bold">{data?.logType}</p>
+        <p className="font-small-3 mt-2">{data.logMessage}</p>
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ marginTop: "2%" }}>
+      <Card>
+        <CardHeader className="border-bottom">
+          <CardTitle tag="h4">Kullanıcı Aktiviteleri</CardTitle>
+        </CardHeader>
+        <Row className="mx-0 mt-1 mb-50">
+          <Col sm="6" md="2">
+            <div className="d-flex align-items-center">
+              <Label for="sort-select">{t("Show")}</Label>
+              <Input
+                className="ml-1 dataTable-select"
+                type="select"
+                id="sort-select"
+                value={rowsPerPage}
+                onChange={(e) => handlePerPage(e)}
+              >
+                <option value={5}>5</option>
+                <option value={10}>10</option>
+                <option value={25}>25</option>
+                <option value={50}>50</option>
+                <option value={75}>75</option>
+                <option value={100}>100</option>
+              </Input>
+            </div>
+          </Col>
+        </Row>
+        <DataTable
+          noHeader
+          pagination
+          paginationServer
+          className="react-dataTable"
+          columns={serverSideColumns}
+          sortIcon={<ChevronDown size={10} />}
+          paginationComponent={CustomPagination}
+          expandableRows
+          expandOnRowClicked
+          expandableRowsComponent={ExpandableTable}
+          data={[...userHistories]}
+          noDataComponent={
+            <p className="p-2">
+              {t("Activities.activity")}
+              {t("Warnings.notFound")}
+            </p>
+          }
+        />
+      </Card>
+    </div>
+  );
+};
+
+export default UserActivity;