added history popup

pagevamp · Feb 2, 2024 · 38d9b69 · 38d9b69
1 parent 9460e0a
commit 38d9b69
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 25 deletions.
diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
@@ -90,6 +90,12 @@ export const TableCore = () => {
             field: el,
             flex: 1,
             cellRenderer: HistoryCellRenderer,
+            valueGetter: (params: any) => {
+              return {
+                row: params.data,
+                key: el,
+              };
+            },
           },
         ];
       });

diff --git a/src/components/table/cellRenderers/HistoryCellRenderer.tsx b/src/components/table/cellRenderers/HistoryCellRenderer.tsx
@@ -1,34 +1,58 @@
-import { Box, Popper, Stack, Typography } from '@mui/material';
-import React from 'react';
-
-export const HistoryCellRenderer = ({
-  value,
-}: {
-  value: { name: string; type: string; key: string; value: any; isChanged: boolean };
-}) => {
-  const showDot = value.isChanged;
+import { useAppState } from '@/hooks/useAppState';
+import { Box, CircularProgress, Popper, Stack, Typography } from '@mui/material';
+import React, { useState } from 'react';
+
+export const HistoryCellRenderer = ({ value }: { value: { row: any; key: string } }) => {
+  const appState = useAppState();
+
+  const [loading, setLoading] = useState(false);
+
+  const [updateHistory, setUpdateHistory] = useState<any>([]);
+
+  const data = value.row[value.key];
+
+  const clientId = value.row.client.id;
+  const lastUpdated = value.row.lastUpdated;
+  const token = appState?.token;
+  const key = value.row[value.key].key;
+
+  const showDot = data.isChanged;
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
+  const fetchHistory = async () => {
+    setLoading(true);
+    const res = await fetch(
+      `/api/profile-update-history?token=${token}&clientId=${clientId}&key=${key}&lastUpdated=${lastUpdated}`,
+    );
+    const data = await res.json();
+    setUpdateHistory(data);
+    setLoading(false);
+  };
+
   const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
     if (showDot) {
       setAnchorEl(anchorEl ? null : event.currentTarget);
+      fetchHistory();
     }
   };
 
   const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
     if (showDot && anchorEl === event.currentTarget) {
+      setUpdateHistory([]);
       setAnchorEl(null);
     }
   };
 
   const open = Boolean(anchorEl);
   const id = open ? 'simple-popper' : undefined;
 
-  if (value.value === null) {
+  if (data.value === null) {
     return null;
   }
 
-  if (value.type === 'multiSelect') {
+  console.log(updateHistory);
+
+  if (data.type === 'multiSelect') {
     return (
       <Box position="relative">
         {showDot && (
@@ -67,17 +91,21 @@ export const HistoryCellRenderer = ({
               fontWeight: '600',
               borderRadius: '35px',
               width: 'fit-content',
+              minWidth: '40px',
             }}
           >
             <Typography variant="bodyMd">&#x2022;</Typography>
 
             <Typography variant="bodySm" fontWeight={500}>
-              {value.value ? value.value[0].label : ''}
+              {data.value ? data.value[0].label : ''}
             </Typography>
           </Stack>
 
-          <Typography variant="bodyMd">+{value.value.length - 1}</Typography>
+          <Typography variant="bodyMd">{data.value.length > 1 && `+ ${data.value.length - 1}`}</Typography>
         </Stack>
+        <Popper id={id} open={open} anchorEl={anchorEl}>
+          {loading ? <CircularProgress size={20} color="inherit" /> : <HistoryList updateHistory={updateHistory} />}
+        </Popper>
       </Box>
     );
   }
@@ -100,16 +128,17 @@ export const HistoryCellRenderer = ({
           &#x2022;
         </Typography>
       )}
-      <Typography variant="bodyMd">{value.value}</Typography>
+      <Typography variant="bodyMd">{data.value}</Typography>
 
       <Popper id={id} open={open} anchorEl={anchorEl}>
-        <HistoryList />
+        {loading ? <CircularProgress size={20} color="inherit" /> : <HistoryList updateHistory={updateHistory} />}
       </Popper>
     </Box>
   );
 };
 
-const HistoryList = () => {
+const HistoryList = ({ updateHistory }: { updateHistory: any }) => {
+  console.log(updateHistory);
   return (
     <Box
       sx={(theme) => ({
@@ -122,15 +151,50 @@ const HistoryList = () => {
       })}
     >
       <Typography variant="sm">Update history</Typography>
-      <Typography variant="bodySm">
-        <li>403-33-10-33</li>
-      </Typography>
-      <Typography variant="bodySm">
-        <li>403-33-10-33</li>
-      </Typography>
-      <Typography variant="bodySm">
-        <li>Empty</li>
-      </Typography>
+      <Stack direction="column" rowGap={3}>
+        {updateHistory.map((history: any, key: number) => {
+          if (history.type === 'multiSelect') {
+            return (
+              <Stack key={key} direction="row" alignItems="center" columnGap={3}>
+                <Typography variant="bodySm">&#x2022;</Typography>
+                <Stack direction="row" columnGap={2}>
+                  {history.value.map((el: any, key: number) => {
+                    return (
+                      <Stack
+                        key={key}
+                        direction="row"
+                        alignItems="center"
+                        sx={{
+                          padding: '4px 8px',
+                          border: `1px solid rgba(255, 120, 0, 1)`,
+                          // backgroundColor: value.value[0].color,
+                          backgroundColor: 'rgba(255, 120, 0, 0.3)',
+                          color: 'rgba(255, 120, 0, 1)',
+                          fontWeight: '600',
+                          borderRadius: '35px',
+                          width: 'fit-content',
+                          minWidth: '40px',
+                        }}
+                      >
+                        <Typography variant="bodyMd">&#x2022;</Typography>
+
+                        <Typography variant="bodySm" fontWeight={500}>
+                          {el.label}
+                        </Typography>
+                      </Stack>
+                    );
+                  })}
+                </Stack>
+              </Stack>
+            );
+          }
+          return (
+            <Typography variant="bodySm" key={key}>
+              <li>{history.value}</li>
+            </Typography>
+          );
+        })}
+      </Stack>
     </Box>
   );
 };