Make combining batches into a modal

deardurham · Apr 14, 2024 · b24eda6 · b24eda6
1 parent 511184c
commit b24eda6
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 98 deletions.
diff --git a/dear_petition/petition/api/viewsets.py b/dear_petition/petition/api/viewsets.py
@@ -341,7 +341,7 @@ def generate_summary(self, request, pk):
     def combine_batches(self, request):
         batch_ids = request.data['batchIds']
         label = request.data['label']
-        user_id = request.data['user_id']
+        user_id = request.user.id
 
         new_batch = combine_batches(batch_ids, label, user_id)
         return Response(self.get_serializer(new_batch).data)

diff --git a/src/components/pages/GenerationPage/GenerationInput/AddressInput.jsx b/src/components/pages/GenerationPage/GenerationInput/AddressInput.jsx
@@ -13,7 +13,7 @@ const Row = styled.div`
   }
 `;
 
-const TextInput = styled(Input)`
+export const TextInput = styled(Input)`
   input {
     padding: 0.9rem;
     width: 100%;

diff --git a/src/features/ExistingPetitions.jsx b/src/features/ExistingPetitions.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import styled from 'styled-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { formatDistance } from 'date-fns';
@@ -14,121 +15,135 @@ import { hasValidationsErrors } from '../util/errors';
 import { downloadFile } from '../util/downloadFile';
 import { POSITIVE, CAUTION, NEUTRAL } from '../components/elements/Button/Button';
 import { useModalContext } from '../components/elements/Button/ModalButton';
+import Input from '../components/elements/Input/Input';
 
-const finishCombineModal = (
-  batch,
-  batchIds,
-  setCombineWithBatchId,
-  setBatchIdsToCombine,
-  triggerCombine,
-  rowData,
-  setRowData,
-) => {
+const TextInput = styled(Input)`
+  input {
+    padding: 0.9rem;
+    width: 100%;
+    background-color: ${(props) => props.disabled && 'hsl(0, 0%, 95%)'};
+  }
+  &:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+`;
+
+const DeleteBatchModal = ({ batch }) => {
+  const [triggerDelete] = useDeleteBatchMutation();
+  const { closeModal } = useModalContext();
+  return (
+    <div className="flex flex-col gap-10 justify-center w-[450px] h-[200px]">
+      <p className="text-[1.6rem] flex flex-wrap gap-x-2 gap-y-4 px-16">
+        <span>
+          <span className="text-red">Warning:</span>This action will PERMANENTLY delete the petition group:
+        </span>
+        <span className="font-semibold">{batch.label}</span>
+      </p>
+      <div className="flex gap-8 justify-center">
+        <Button colorClass={CAUTION} className="w-[100px]" onClick={() => triggerDelete({ id: batch.pk })}>
+          Delete
+        </Button>
+        <Button colorClass={NEUTRAL} className="w-[100px]" onClick={() => closeModal()}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const finishCombineModal = ({ batchIds, setBatchIdsToCombine, triggerCombine, setRowData, newLabel }) => {
   let postData = {
     batchIds: batchIds,
-    label: batch.label,
-    user_id: batch.user,
+    label: newLabel,
   };
 
   triggerCombine(postData).then((newBatch) => {
-    console.log(newBatch.data);
     setRowData((prevList) => [newBatch.data, ...prevList]);
 
-    setCombineWithBatchId(null);
     setBatchIdsToCombine([]);
   });
 };
 
-const CombineBatchModal = ({
-  batch,
-  combineWithBatchId,
-  setCombineWithBatchId,
-  batchIdsToCombine,
-  setBatchIdsToCombine,
-  rowData,
-  setRowData,
-}) => {
-  const [triggerCombine] = useCombineBatchesMutation();
-  let batchId = batch.pk;
-  if (!combineWithBatchId) {
+const CombineBatchModalButton = ({ batchId, batchIdsToCombine, setBatchIdsToCombine }) => {
+  if (batchIdsToCombine.includes(batchId)) {
     return (
       <Button
-        title="Combine"
+        title="Subtract"
+        colorClass={NEUTRAL}
         onClick={() => {
-          setCombineWithBatchId(batchId);
-          setBatchIdsToCombine([batchId]);
+          setBatchIdsToCombine((prevList) => prevList.filter((item) => item != batchId));
         }}
       >
-        Combine
+        Subtract
       </Button>
     );
-  } else if (batchId != combineWithBatchId) {
-    let alreadyIncluded = batchIdsToCombine.includes(batchId);
-    if (alreadyIncluded) {
-      return (
-        <Button
-          title="Subtract"
-          colorClass={NEUTRAL}
-          onClick={() => {
-            setBatchIdsToCombine((prevList) => prevList.filter((item) => item != batchId));
-          }}
-        >
-          Subtract
-        </Button>
-      );
-    } else {
-      return (
-        <Button
-          title="Add"
-          colorClass={POSITIVE}
-          onClick={() => {
-            setBatchIdsToCombine((prevList) => [...prevList, batchId]);
-          }}
-        >
-          Add
-        </Button>
-      );
-    }
   } else {
     return (
       <Button
-        title="Finish"
+        title="Add"
+        colorClass={POSITIVE}
         onClick={() => {
-          finishCombineModal(
-            batch,
-            batchIdsToCombine,
-            setCombineWithBatchId,
-            setBatchIdsToCombine,
-            triggerCombine,
-            rowData,
-            setRowData,
-          );
+          setBatchIdsToCombine((prevList) => [...prevList, batchId]);
         }}
       >
-        Finish
+        Add
       </Button>
     );
   }
 };
 
-const DeleteBatchModal = ({ batch }) => {
-  const [triggerDelete] = useDeleteBatchMutation();
+const CombineBatchModal = ({ rowData, setRowData }) => {
+  const [newLabel, setNewLabel] = useState();
   const { closeModal } = useModalContext();
+  const [batchIdsToCombine, setBatchIdsToCombine] = useState([]);
+  const [triggerCombine] = useCombineBatchesMutation();
+
   return (
-    <div className="flex flex-col gap-10 justify-center w-[450px] h-[200px]">
-      <p className="text-[1.6rem] flex flex-wrap gap-x-2 gap-y-4 px-16">
-        <span>
-          <span className="text-red">Warning:</span>This action will PERMANENTLY delete the petition group:
-        </span>
-        <span className="font-semibold">{batch.label}</span>
-      </p>
-      <div className="flex gap-8 justify-center">
-        <Button colorClass={CAUTION} className="w-[100px]" onClick={() => triggerDelete({ id: batch.pk })}>
-          Delete
-        </Button>
-        <Button colorClass={NEUTRAL} className="w-[100px]" onClick={() => closeModal()}>
-          Cancel
-        </Button>
+    <div className="flex flex-col gap-10 justify-center w-[450px] h-[200px] m-20 mb-40 mt-40">
+      <Table className="text-[1.7rem]" columnSizes="4fr 2fr">
+        <TableHeader>
+          <TableCell header>Label</TableCell>
+          <TableCell header>Action</TableCell>
+        </TableHeader>
+        <TableBody>
+          {rowData?.map((batch) => (
+            <TableRow key={batch.pk}>
+              <TableCell>{batch.label}</TableCell>
+              <TableCell>
+                <CombineBatchModalButton
+                  batchId={batch.pk}
+                  batchIdsToCombine={batchIdsToCombine}
+                  setBatchIdsToCombine={setBatchIdsToCombine}
+                ></CombineBatchModalButton>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <div className="flex flex-col gap-10 justify-center w-[450px] h-[200px]">
+        <form>
+          <TextInput label="New Label" onChange={(e) => setNewLabel(e.target.value)} />
+        </form>
+        <div className="flex gap-8 justify-center">
+          <Button
+            colorClass={POSITIVE}
+            className="w-[100px]"
+            onClick={() =>
+              finishCombineModal({
+                batchIds: batchIdsToCombine,
+                setBatchIdsToCombine: setBatchIdsToCombine,
+                triggerCombine: triggerCombine,
+                setRowData: setRowData,
+                newLabel: newLabel,
+              })
+            }
+          >
+            Finish
+          </Button>
+          <Button colorClass={CAUTION} className="w-[100px]" onClick={() => closeModal()}>
+            Cancel
+          </Button>
+        </div>
       </div>
     </div>
   );
@@ -137,14 +152,15 @@ const DeleteBatchModal = ({ batch }) => {
 // TODO: Rename batches to "Petition Groups"
 export const ExistingPetitions = () => {
   const { user } = useAuth();
-  const data = useGetUserBatchesQuery({ user: user.pk });
+  const { data } = useGetUserBatchesQuery({ user: user.pk });
   const [downloadDocumentBatch, setDownloadDocumentBatch] = useState(null);
-  const [combineWithBatchId, setCombineWithBatchId] = useState(null);
-  const [batchIdsToCombine, setBatchIdsToCombine] = useState([]);
-  const [rowData, setRowData] = useState(data?.data?.results);
+  const [rowData, setRowData] = useState(data?.results);
 
   return (
     <div className="flex flex-col">
+      <ModalButton title="Combine Petitions" colorClass={POSITIVE} className="w-[150px] h-[32px] mb-5">
+        <CombineBatchModal rowData={rowData} setRowData={setRowData} />
+      </ModalButton>
       <h3 className="mb-2">Recent Petitions</h3>
       <p>Petitions you have recently worked on will show up here </p>
       <div className="w-full">
@@ -216,15 +232,6 @@ export const ExistingPetitions = () => {
                   <ModalButton title="Delete" colorClass={CAUTION}>
                     <DeleteBatchModal batch={batch} />
                   </ModalButton>
-                  <CombineBatchModal
-                    batch={batch}
-                    combineWithBatchId={combineWithBatchId}
-                    setCombineWithBatchId={setCombineWithBatchId}
-                    batchIdsToCombine={batchIdsToCombine}
-                    setBatchIdsToCombine={setBatchIdsToCombine}
-                    rowData={rowData}
-                    setRowData={setRowData}
-                  ></CombineBatchModal>
                 </TableCell>
               </TableRow>
             ))}