feat: display pair

src/components/molecules/Pair.tsx

@@ -0,0 +1,181 @@
+import React, { FC, useState } from 'react';
+import { Stack, Button, IconButton, Tooltip, Chip, Badge } from "@mui/material";
+import { AddPair, deletePair, UpdatePair } from "../../api/workflow";
+import { WorkflowFile } from "@wbr-project/wbr-interpret";
+import { ClearButton } from "../atoms/buttons/ClearButton";
+import { GenericModal } from "../atoms/GenericModal";
+import { PairEditForm } from "./PairEditForm";
+import { PairDisplayDiv } from "../atoms/PairDisplayDiv";
+import { EditButton } from "../atoms/buttons/EditButton";
+import { BreakpointButton } from "../atoms/buttons/BreakpointButton";
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import styled from "styled-components";
+import { LoadingButton } from "@mui/lab";
+
+type WhereWhatPair = WorkflowFile["workflow"][number];
+
+
+interface PairProps {
+  handleBreakpoint: () => void;
+  isActive: boolean;
+  index: number;
+  pair: WhereWhatPair;
+  updateWorkflow: (workflow: WorkflowFile) => void;
+  numberOfPairs: number;
+  handleSelectPairForEdit: (pair: WhereWhatPair, index: number) => void;
+}
+
+
+export const Pair: FC<PairProps> = (
+  {
+    handleBreakpoint, isActive, index,
+    pair, updateWorkflow, numberOfPairs,
+    handleSelectPairForEdit
+  }) => {
+  const [open, setOpen] = useState(false);
+  const [edit, setEdit] = useState(false);
+  const [breakpoint, setBreakpoint] = useState(false);
+
+  const enableEdit = () => setEdit(true);
+  const disableEdit = () => setEdit(false);
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => {
+    setOpen(false);
+    disableEdit();
+  }
+
+  const handleDelete = () => {
+    deletePair(index - 1).then((updatedWorkflow) => {
+      updateWorkflow(updatedWorkflow);
+    }).catch((error) => {
+      console.error(error);
+    });
+  };
+
+  const handleEdit = (pair: WhereWhatPair, newIndex: number) => {
+  if (newIndex !== index){
+    AddPair((newIndex - 1), pair).then((updatedWorkflow) => {
+      updateWorkflow(updatedWorkflow);
+    }).catch((error) => {
+      console.error(error);
+    });
+  } else {
+    UpdatePair((index - 1), pair).then((updatedWorkflow) => {
+      updateWorkflow(updatedWorkflow);
+    }).catch((error) => {
+      console.error(error);
+    });
+  }
+    handleClose();
+  };
+
+  const handleBreakpointClick = () => {
+    setBreakpoint(!breakpoint);
+    handleBreakpoint();
+  };
+
+  return (
+    <PairWrapper isActive={isActive}>
+      <Stack direction="row">
+        <div style={{display: 'flex', maxWidth:'20px', alignItems:'center', justifyContent: 'center', }}>
+          {isActive ? <LoadingButton loading variant="text"/>
+            : breakpoint ? <BreakpointButton changeColor={true} handleClick={handleBreakpointClick}/>
+              : <BreakpointButton handleClick={handleBreakpointClick}/>
+          }
+        </div>
+        <Badge badgeContent={pair.what.length} color="primary">
+          <Button sx={{
+            position: 'relative',
+            color: 'black',
+            padding: '5px 20px',
+            fontSize: '1rem',
+            textTransform: 'none',
+          }} variant='text' key={`pair-${index}`}
+          onClick={() => handleSelectPairForEdit(pair, index)}>
+            index: {index}
+          </Button>
+        </Badge>
+        <Stack direction="row" spacing={0}
+        sx={{
+          color: 'inherit',
+          "&:hover": {
+            color: 'inherit',
+          }
+        }}>
+          <Tooltip title="View" placement='right' arrow>
+          <div>
+          <ViewButton
+            handleClick={handleOpen}
+          />
+          </div>
+          </Tooltip>
+
+          <Tooltip title="Raw edit" placement='right' arrow>
+            <div>
+          <EditButton
+            handleClick={() => {
+              enableEdit();
+              handleOpen();
+            }}
+          />
+            </div>
+            </Tooltip>
+          <Tooltip title="Delete" placement='right' arrow>
+            <div>
+              <ClearButton handleClick={handleDelete}/>
+            </div>
+          </Tooltip>
+        </Stack>
+      </Stack>
+      <GenericModal isOpen={open} onClose={handleClose}>
+        { edit
+          ?
+            <PairEditForm
+              onSubmitOfPair={handleEdit}
+              numberOfPairs={numberOfPairs}
+              index={index.toString()}
+              where={pair.where ? JSON.stringify(pair.where) : undefined}
+              what={pair.what ? JSON.stringify(pair.what) : undefined}
+              id={pair.id}
+            />
+          :
+          <div>
+            <PairDisplayDiv
+              index={index.toString()}
+              pair={pair}
+            />
+          </div>
+        }
+      </GenericModal>
+    </PairWrapper>
+    );
+};
+
+interface ViewButtonProps {
+  handleClick: () => void;
+}
+
+const ViewButton = ({handleClick}: ViewButtonProps) => {
+  return (
+    <IconButton aria-label="add" size={"small"} onClick={handleClick}
+                sx={{color: 'inherit', '&:hover': { color: '#1976d2', backgroundColor: 'transparent' }}}>
+      <VisibilityIcon/>
+    </IconButton>
+  );
+}
+
+
+const PairWrapper = styled.div<{ isActive: boolean }>`
+  background-color: ${({ isActive }) => isActive ? 'rgba(255, 0, 0, 0.1)' : 'transparent' };
+  border: ${({ isActive }) => isActive ? 'solid 2px red' : 'none' };
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  width: 98%;
+  color: gray;
+  &:hover { 
+    color: dimgray; 
+    background: ${({ isActive }) => isActive ? 'rgba(255, 0, 0, 0.1)' : 'transparent' };
+  }
+`;