From b24eda61c7552ca5867eb046a1e1a202799be260 Mon Sep 17 00:00:00 2001 From: George Helman Date: Sun, 14 Apr 2024 18:42:01 -0400 Subject: [PATCH] Make combining batches into a modal --- dear_petition/petition/api/viewsets.py | 2 +- .../GenerationInput/AddressInput.jsx | 2 +- src/features/ExistingPetitions.jsx | 199 +++++++++--------- 3 files changed, 105 insertions(+), 98 deletions(-) diff --git a/dear_petition/petition/api/viewsets.py b/dear_petition/petition/api/viewsets.py index 2ca6bdb7..11dbc801 100644 --- 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 index dff8b00b..2bbcb860 100644 --- 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 index 6cb2d1ab..79aab8cd 100644 --- 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 ( +
+

+ + Warning:This action will PERMANENTLY delete the petition group: + + {batch.label} +

+
+ + +
+
+ ); +}; + +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 ( ); - } else if (batchId != combineWithBatchId) { - let alreadyIncluded = batchIdsToCombine.includes(batchId); - if (alreadyIncluded) { - return ( - - ); - } else { - return ( - - ); - } } else { return ( ); } }; -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 ( -
-

- - Warning:This action will PERMANENTLY delete the petition group: - - {batch.label} -

-
- - +
+ + + Label + Action + + + {rowData?.map((batch) => ( + + {batch.label} + + + + + ))} + +
+
+
+ setNewLabel(e.target.value)} /> + +
+ + +
); @@ -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 (
+ + +

Recent Petitions

Petitions you have recently worked on will show up here

@@ -216,15 +232,6 @@ export const ExistingPetitions = () => { - ))}