Feature/55 manage data

frontend/src/components/filters/FormDropdown.js

@@ -30,9 +30,17 @@ const FormDropdown = ({ loading: parentLoading = false, ...props }) => {
     if (!e) {
       return;
     }
-    store.update((s) => {
-      s.selectedForm = e;
-    });
+    api
+      .get(`/form/${e}/`)
+      .then((res) => {
+        store.update((s) => {
+          s.questionGroups = res.data.question_group;
+          s.selectedForm = e;
+        });
+      })
+      .catch(() => {
+        message.error("Could not load form data");
+      });
   };
 
   if (forms) {

frontend/src/components/filters/style.scss

@@ -7,5 +7,10 @@
     font-weight: 600;
     width: auto;
     margin-left: 0.4rem;
+    border: 0 none;
+  }
+  button.button:hover {
+    background-color: #969799;
+    border: 0 none;
   }
 }

frontend/src/pages/manage-data/DataDetail.jsx

@@ -0,0 +1,58 @@
+import { Row, Col, Table, Button, Divider } from "antd";
+
+const DataDetail = ({ questionGroups, record }) => {
+  const { answer } = record;
+  const columns = [
+    {
+      title: "Field",
+      dataIndex: "field",
+      key: "field",
+      width: "50%",
+    },
+    {
+      title: "Value",
+      dataIndex: "value",
+      key: "value",
+    },
+  ];
+  const dataset = questionGroups
+    .map((qg, qgi) => {
+      const question = qg.question.map((q) => {
+        return {
+          key: `question-${q.id}`,
+          field: q.name,
+          value: answer?.find((r) => r.question === q.id)?.value,
+        };
+      });
+      return [
+        {
+          key: `question-group-${qgi}`,
+          field: qg.name,
+          render: (value) => <h1>{value}</h1>,
+        },
+        ...question,
+      ];
+    })
+    .flatMap((x) => x);
+  return (
+    <Row justify="center">
+      <Col span={20}>
+        <Table
+          columns={columns}
+          dataSource={dataset}
+          pagination={false}
+          scroll={{ y: 300 }}
+        />
+      </Col>
+      <Divider />
+      <Col span={10} align="left">
+        <Button>Delete</Button>
+      </Col>
+      <Col span={10} align="right">
+        <Button>Upload CSV</Button>
+      </Col>
+    </Row>
+  );
+};
+
+export default DataDetail;

frontend/src/pages/manage-data/ManageData.jsx

@@ -4,7 +4,6 @@ import {
   Row,
   Col,
   Card,
-  Button,
   Breadcrumb,
   Divider,
   Typography,
@@ -20,6 +19,7 @@ import {
   ExclamationCircleOutlined,
 } from "@ant-design/icons";
 import { api, store } from "../../lib";
+import DataDetail from "./DataDetail";
 import { DataFilters } from "../../components";
 
 const { Title } = Typography;
@@ -28,6 +28,8 @@ const ManageData = () => {
   const [loading, setLoading] = useState(false);
   const [dataset, setDataset] = useState([]);
   const [query, setQuery] = useState("");
+  const [totalCount, setTotalCount] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
 
   const { administration, selectedForm, questionGroups } = store.useState(
     (state) => state
@@ -39,12 +41,6 @@ const ManageData = () => {
       : null;
 
   const columns = [
-    {
-      title: "",
-      dataIndex: "id",
-      key: "id",
-      render: () => <ExclamationCircleOutlined />,
-    },
     {
       title: "Name",
       dataIndex: "name",
@@ -53,6 +49,12 @@ const ManageData = () => {
       filteredValue: query.trim() === "" ? [] : [query],
       onFilter: (value, filters) =>
         filters.name.toLowerCase().includes(value.toLowerCase()),
+      render: (value) => (
+        <span className="with-icon">
+          <ExclamationCircleOutlined />
+          {value}
+        </span>
+      ),
     },
     {
       title: "Last Updated",
@@ -70,75 +72,30 @@ const ManageData = () => {
     Table.EXPAND_COLUMN,
   ];
 
-  const handleChange = () => {
-    // setCurrentPage(e.current);
-  };
-
-  const renderDetails = (record) => {
-    return (
-      <div>
-        <div className="expand-wrap">
-          <table>
-            <thead>
-              <tr>
-                <th>Field</th>
-                <th>Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              {record.answer.map((answer, answerIdx) => (
-                <tr key={answerIdx}>
-                  <td>
-                    {
-                      questionGroups.find((group) =>
-                        group.question.some(
-                          (item) => item.id === answer.question
-                        )
-                      )?.name
-                    }
-                  </td>
-                  <td>{answer.value}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-        <div className="expand-footer">
-          <div>
-            <Button danger>Delete</Button>
-          </div>
-          <div>
-            <Button danger>Upload CSV</Button>
-          </div>
-        </div>
-      </div>
-    );
+  const handleChange = (e) => {
+    setCurrentPage(e.current);
   };
 
   useEffect(() => {
     if (selectedForm) {
       setLoading(true);
-      let url = `list/form-data/${selectedForm}/?page=1`;
+      let url = `list/form-data/${selectedForm}/?page=${currentPage}`;
       if (selectedAdministration?.id) {
         url += `&administration=${selectedAdministration.id}`;
       }
-      try {
-        api.get(url).then((res) => {
+      api
+        .get(url)
+        .then((res) => {
           setDataset(res.data.data);
-          api.get(`web/form/${selectedForm}`).then((res) => {
-            store.update((s) => {
-              s.questionGroups = res.data.question_group;
-            });
-            setLoading(false);
-          });
+          setTotalCount(res.data.total);
+          setLoading(false);
+        })
+        .catch(() => {
+          message.error("Could not load data");
+          setLoading(false);
         });
-      } catch (err) {
-        message.error("Could not load forms");
-        setLoading(false);
-        console.error(err);
-      }
     }
-  }, [selectedForm, selectedAdministration]);
+  }, [selectedForm, selectedAdministration, currentPage]);
 
   return (
     <div id="manageData">
@@ -185,13 +142,16 @@ const ManageData = () => {
             dataSource={dataset}
             loading={loading}
             onChange={handleChange}
-            // pagination={{
-            //   total: totalCount,
-            //   pageSize: 10,
-            // }}
+            pagination={{
+              total: totalCount,
+              pageSize: 10,
+              showSizeChanger: false,
+            }}
             rowKey="id"
             expandable={{
-              expandedRowRender: renderDetails,
+              expandedRowRender: (record) => (
+                <DataDetail questionGroups={questionGroups} record={record} />
+              ),
               expandIcon: ({ expanded, onExpand, record }) =>
                 expanded ? (
                   <CloseSquareOutlined

frontend/src/pages/manage-data/style.scss

@@ -5,23 +5,32 @@
     .ant-breadcrumb {
       .ant-breadcrumb-separator {
         margin: 0 16px;
+
         h2 {
           font-weight: 300;
           color: #8388a8;
         }
       }
+
       h2 {
         font-size: 1.6rem;
       }
+
       span:last-child span h2 {
         color: #0058ff;
       }
     }
 
+    .ant-table-cell {
+      .with-icon {
+        .anticon {
+          margin-right: 10px;
+        }
+      }
+    }
+
     .ant-table-expanded-row {
       .ant-table-cell {
-        padding: 12px 0 20px;
-
         .expand-wrap {
           width: 70%;
           margin: 0 auto;
@@ -62,5 +71,34 @@
         }
       }
     }
+
+    .ant-pagination {
+      li,
+      button {
+        border: none;
+
+        a {
+          color: #898eab;
+        }
+
+        a:hover {
+          // border: none;
+          color: #595e7b;
+        }
+      }
+
+      .ant-pagination-item-active {
+        border: none;
+        background-color: #0057ff;
+
+        a {
+          color: #fff;
+        }
+
+        a:hover {
+          // color: #fff;
+        }
+      }
+    }
   }
 }