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>
+  );
+}

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

@@ -0,0 +1,44 @@
+import queryString from "query-string";
+import {useLocation} from "react-router-dom";
+import {useQuery} from "@apollo/client";
+import {QUERY_ALL_TASKS_PAGINATED} from "../../graphql/tasks.queries.js";
+import {pageLimit} from "../../utils/config.js";
+import AlertComponent from "../alert/alert.component.jsx";
+import React from "react";
+import TaskListComponent from "./task-list.component.jsx";
+
+export default function TaskListContainer() {
+  const searchParams = queryString.parse(useLocation().search);
+  const {page, sortcolumn, sortorder, search} = searchParams;
+  const {loading, error, data, refetch} = useQuery(
+    QUERY_ALL_TASKS_PAGINATED,
+    {
+      fetchPolicy: "network-only",
+      nextFetchPolicy: "network-only",
+      variables: {
+        offset: page ? (page - 1) * pageLimit : 0,
+        limit: pageLimit,
+        order: [
+          {
+            [sortcolumn || "created_at"]: sortorder
+              ? sortorder === "descend"
+                ? "desc"
+                : "asc"
+              : "desc",
+          },
+        ],
+      },
+    }
+  );
+
+  if (error) return <AlertComponent message={error.message} type="error"/>;
+  
+  return (
+    <TaskListComponent
+      loading={loading}
+      tasks={data ? data.tasks : null}
+      total={data ? data.tasks_aggregate.aggregate.count : 0}
+      refetch={refetch}
+    />
+  );
+}