Merge pull request #418 from AntlerVC/add-forced-update-listener-derivatives

add force refresh derivatives/sparks to table header

www/src/components/Table/TableHeader/ForceRefresh.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+
+import TableHeaderButton from "./TableHeaderButton";
+import LoopIcon from "@material-ui/icons/Loop";
+
+import { useFiretableContext } from "contexts/FiretableContext";
+import { db } from "../../../firebase";
+import { isCollectionGroup } from "utils/fns";
+import CircularProgress from "@material-ui/core/CircularProgress";
+
+import _camelCase from "lodash/camelCase";
+import _get from "lodash/get";
+import _find from "lodash/find";
+import _sortBy from "lodash/sortBy";
+
+import { makeStyles, createStyles, DialogContentText } from "@material-ui/core";
+
+import Modal from "components/Modal";
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    paper: {
+      [theme.breakpoints.up("sm")]: {
+        maxWidth: 500,
+      },
+    },
+    spinner: { marginRight: theme.spacing(1) },
+  })
+);
+
+export default function TableSettings() {
+  const classes = useStyles();
+  const [open, setOpen] = useState(false);
+  const [updating, setUpdating] = useState(false);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const { tableState } = useFiretableContext();
+
+  const query: any = isCollectionGroup()
+    ? db.collectionGroup(tableState?.tablePath!)
+    : db.collection(tableState?.tablePath!);
+
+  const handleConfirm = async () => {
+    setUpdating(true);
+    const _ft_forcedUpdateAt = new Date();
+
+    const batch = db.batch();
+    const querySnapshot = await query.get();
+    querySnapshot.docs.forEach((doc) => {
+      batch.update(doc.ref, { _ft_forcedUpdateAt });
+    });
+    await batch.commit();
+    setUpdating(false);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <TableHeaderButton
+        title="Force Refresh"
+        onClick={() => setOpen(true)}
+        icon={<LoopIcon />}
+      />
+
+      {open && (
+        <Modal
+          onClose={handleClose}
+          classes={{ paper: classes.paper }}
+          title={"Confirm Force Refresh"}
+          header={
+            <>
+              <DialogContentText>
+                Are you sure you want to force a refresh of all Sparks and
+                Derivatives?
+              </DialogContentText>
+            </>
+          }
+          actions={{
+            primary: {
+              children: "Confirm",
+              onClick: handleConfirm,
+              startIcon: updating && (
+                <CircularProgress className={classes.spinner} size={16} />
+              ),
+              disabled: updating,
+            },
+            secondary: {
+              children: "Cancel",
+              onClick: handleClose,
+            },
+          }}
+        ></Modal>
+      )}
+    </>
+  );
+}

www/src/components/Table/TableHeader/index.tsx

@@ -20,9 +20,11 @@ import Export from "./Export";
 import TableSettings from "./TableSettings";
 import HiddenFields from "../HiddenFields";
 import Sparks from "./Sparks";
+import ForceRefresh from "./ForceRefresh";
 
 import { useAppContext } from "contexts/AppContext";
 import { useFiretableContext, firetableUser } from "contexts/FiretableContext";
+import { FieldType } from "constants/fields";
 
 export const TABLE_HEADER_HEIGHT = 56;
 
@@ -84,6 +86,14 @@ export default function TableHeader({
   const { currentUser } = useAppContext();
   const { tableActions, tableState, userClaims } = useFiretableContext();
 
+  const hasDerivatives =
+    tableState &&
+    Object.values(tableState.columns)?.filter(
+      (column) => column.type === FieldType.derivative
+    ).length > 0;
+  const hasSparks =
+    tableState && tableState.config?.sparks?.replace(/\W/g, "")?.length > 0;
+
   if (!tableState || !tableState.columns) return null;
   const { columns } = tableState;
   return (
@@ -98,9 +108,13 @@ export default function TableHeader({
         <Grid item>
           <Button
             onClick={() => {
-              const requiredFields = Object.values(columns).map(column =>{if(column.config.required){
-                return column.key
-              }}).filter(c=>c)
+              const requiredFields = Object.values(columns)
+                .map((column) => {
+                  if (column.config.required) {
+                    return column.key;
+                  }
+                })
+                .filter((c) => c);
               const initialVal = Object.values(columns).reduce(
                 (acc, column) => {
                   if (column.config?.defaultValue?.type === "static") {
@@ -114,11 +128,14 @@ export default function TableHeader({
                 },
                 {}
               );
-              tableActions?.row.add({
-                ...initialVal,
-                _ft_updatedBy: firetableUser(currentUser),
-                _ft_createdBy: firetableUser(currentUser),
-              },requiredFields);
+              tableActions?.row.add(
+                {
+                  ...initialVal,
+                  _ft_updatedBy: firetableUser(currentUser),
+                  _ft_createdBy: firetableUser(currentUser),
+                },
+                requiredFields
+              );
             }}
             variant="contained"
             color="primary"
@@ -196,6 +213,12 @@ export default function TableHeader({
         </Grid>
       )}
 
+      {userClaims?.roles?.includes("ADMIN") && (hasDerivatives || hasSparks) && (
+        <Grid item>
+          <ForceRefresh />
+        </Grid>
+      )}
+
       <Grid item>
         <TableSettings />
       </Grid>