[#79] Datapoint status, datapoint callback function

akvo · Feb 2, 2023 · d40dd75 · d40dd75
1 parent 495f949
commit d40dd75
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 6 deletions.
diff --git a/src/components/SavedSubmissionList.jsx b/src/components/SavedSubmissionList.jsx
@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Row, Col, Space, Button, Spin } from 'antd';
+import { FaCheckCircle } from 'react-icons/fa';
+import { MdPendingActions } from 'react-icons/md';
 import ds from '../lib/db';
 
 const SavedSubmissionList = ({ formId }) => {
@@ -51,20 +53,33 @@ const SavedSubmissionList = ({ formId }) => {
   }
 
   return (
-    <Row gutter={[16, 16]}>
+    <Row>
       {dataPoints.map((x, xi) => (
         <Col
           key={xi}
-          className="arf-draft-list"
+          className={
+            x.current ? 'arf-draft-list arf-current' : 'arf-draft-list'
+          }
           span={24}
         >
           <Row>
             <Col
-              span={24}
+              span={20}
               className="arf-draft-title"
             >
               {xi + 1}. {x.name}
             </Col>
+            <Col
+              span={4}
+              align="right"
+              className="arf-draft-status"
+            >
+              {x.submitted ? (
+                <FaCheckCircle color="green" />
+              ) : (
+                <MdPendingActions color="#ff6000" />
+              )}
+            </Col>
           </Row>
           <Row>
             <Col
@@ -73,12 +88,14 @@ const SavedSubmissionList = ({ formId }) => {
             >
               <Space>
                 <Button
+                  disabled={x.submitted}
                   size="small"
                   onClick={() => x.load()}
                 >
                   Load
                 </Button>
                 <Button
+                  disabled={x.submitted}
                   size="small"
                   onClick={() => onDeleteDataPoint(x.remove)}
                   type="danger"

diff --git a/src/index.js b/src/index.js
@@ -186,7 +186,20 @@ export const Webform = ({
   const onComplete = (values) => {
     if (onFinish) {
       const { dpName, dpGeo } = generateDataPointName(dataPointName);
-      onFinish({ ...values, datapoint: { name: dpName, geo: dpGeo } });
+      const refreshForm = () => {
+        if (autoSave?.name) {
+          ds.getId(autoSave.name).then((d) => {
+            form.resetFields();
+            ds.status(d.id, 1);
+          });
+        } else {
+          form.resetFields();
+        }
+      };
+      onFinish(
+        { ...values, datapoint: { name: dpName, geo: dpGeo } },
+        refreshForm
+      );
     }
   };
 

diff --git a/src/lib/db.js b/src/lib/db.js
@@ -4,7 +4,7 @@ import GlobalStore from './store';
 const db = new Dexie('arf');
 
 db.version(1).stores({
-  data: 'id++, name, formId, current, created',
+  data: 'id++, name, formId, current, submitted, created',
   values: 'id++, [dataId+questionId+repeat], value',
 });
 
@@ -41,6 +41,7 @@ const newData = (formId, name) => {
         name,
         formId,
         current: 1,
+        submitted: 0,
         created: Date.now(),
       });
       GlobalStore.update((s) => {
@@ -220,6 +221,8 @@ const ds = {
   get: (id) => getValue({ dataId: id }),
   remove: deleteData,
   disable: () => db.data.where({ current: 1 }).modify({ current: 0 }),
+  status: (id, submitted) =>
+    db.data.where({ id: id }).modify({ submitted: submitted }),
   value: {
     get: ({ dataId, questionId }) =>
       getValue({ dataId: dataId, questionId: questionId }),

diff --git a/src/styles.module.css b/src/styles.module.css
@@ -319,7 +319,11 @@ button.repeat-delete-btn .icon {
 /* Submission List Drawer */
 .draft-list {
   border-bottom: 1px solid rgba(5, 5, 5, 0.06);
-  padding-bottom: 20px;
+  padding: 10px;
+}
+.draft-list.current {
+  border-top: 1px solid #d0d0d0;
+  background-color: #e3e3e3;
 }
 .draft-list .draft-title {
   padding-bottom: 10px;

diff --git a/src/support/LeftDrawer.jsx b/src/support/LeftDrawer.jsx
@@ -36,6 +36,7 @@ const LeftDrawer = ({ title, content }) => {
       <DrawerToggle />
       <Drawer
         className="arf-submissions-drawer-container"
+        bodyStyle={{ padding: '0px', borderTop: '1px solid #d0d0d0' }}
         title={title || 'Submissions'}
         placement="left"
         width={windowWidth > 700 ? '450' : '75%'}