Progress

client/src/components/task-list/task-list.component.jsx

@@ -0,0 +1,133 @@
+import {SyncOutlined} from "@ant-design/icons";
+import {Button, Card, Input, Space, Table, Typography} from "antd";
+import queryString from "query-string";
+import React, {useState} from "react";
+import {useTranslation} from "react-i18next";
+import {useLocation, useNavigate} from "react-router-dom";
+import {pageLimit} from "../../utils/config";
+
+export default function TaskListComponent({
+                                            loading,
+                                            tasks,
+                                            total,
+                                            refetch,
+                                          }) {
+  const search = queryString.parse(useLocation().search);
+  const {
+    page,
+    // sortcolumn, sortorder
+  } = search;
+  const history = useNavigate();
+
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: {text: ""},
+  });
+
+  const {t} = useTranslation();
+
+  const columns = [
+    {
+      title: t("tasks.fields.title"),
+      dataIndex: "title",
+      key: "title",
+    },
+    {
+      title: t("tasks.fields.description"),
+      dataIndex: "description",
+      key: "description",
+    },
+    {
+      title: t("tasks.fields.due_date"),
+      dataIndex: "due_date",
+      key: "due_date",
+    },
+    {
+      title: t("tasks.fields.assigned_to"),
+      dataIndex: "assigned_to",
+      key: "assigned_to",
+    },
+    {
+      title: t("tasks.fields.completed"),
+      dataIndex: "completed",
+      key: "completed",
+    },
+    {
+      title: t("tasks.fields.completed_at"),
+      dataIndex: "completed_at",
+      key: "completed_at",
+    },
+    {
+      title: t("tasks.fields.remind_at"),
+      dataIndex: "remind_at",
+      key: "remind_at",
+    },
+    {
+      title: t("tasks.fields.priority"),
+      dataIndex: "priority",
+      key: "priority",
+    },
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({...state, filteredInfo: filters, sortedInfo: sorter});
+    search.page = pagination.current;
+    search.sortcolumn = sorter.columnKey;
+    search.sortorder = sorter.order;
+    history({search: queryString.stringify(search)});
+  };
+  return (
+    <Card
+      title={t("menus.header.tasks")}
+      extra={
+        <Space wrap>
+          {search.search && (
+            <>
+              <Typography.Title level={4}>
+                {t("general.labels.searchresults", {search: search.search})}
+              </Typography.Title>
+              <Button
+                onClick={() => {
+                  delete search.search;
+                  history({search: queryString.stringify(search)});
+                }}
+              >
+                {t("general.actions.clear")}
+              </Button>
+            </>
+          )}
+          <Button onClick={() => refetch()}>
+            <SyncOutlined/>
+          </Button>
+          <Input.Search
+            placeholder={search.search || t("general.labels.search")}
+            onSearch={(value) => {
+              if (value?.length >= 3) {
+                search.search = value;
+              } else {
+                delete search.search;
+              }
+              history({search: queryString.stringify(search)});
+            }}
+            enterButton
+          />
+        </Space>
+      }
+    >
+      <Table
+        loading={loading}
+        pagination={{
+          position: "top",
+          pageSize: pageLimit,
+          current: parseInt(page || 1),
+          total: total,
+        }}
+        columns={columns}
+        rowKey="id"
+        scroll={{x: true}}
+        dataSource={tasks}
+        onChange={handleTableChange}
+      />
+    </Card>
+  );
+}