Editing locations

cornell-dti · Nov 17, 2024 · c36ad8c · c36ad8c
1 parent 37dc450
commit c36ad8c
Show file tree

Hide file tree

Showing 6 changed files with 310 additions and 304 deletions.
diff --git a/frontend/src/components/Locations/AddLocationModal.tsx b/frontend/src/components/Locations/AddLocationModal.tsx
diff --git a/frontend/src/components/Locations/LocationDialog.tsx b/frontend/src/components/Locations/LocationDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Modal,
   Paper,
@@ -9,6 +9,8 @@ import {
   Box,
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
+import EditIcon from '@mui/icons-material/Edit';
+import { LocationFormModal } from './LocationFormModal';
 import styles from './locations.module.css';
 
 interface Location {
@@ -24,75 +26,106 @@ interface Location {
 interface LocationDialogProps {
   location: Location | null;
   onClose: () => void;
+  onSave: (location: Location) => void;
 }
 
 const LocationDialog: React.FC<LocationDialogProps> = ({
   location,
   onClose,
+  onSave,
 }) => {
-  if (!location) return null;
+  const [isEditMode, setIsEditMode] = useState<boolean>(false);
+  const [currentLocation, setCurrentLocation] = useState<Location | null>(null);
+
+  // Update currentLocation when location prop changes
+  useEffect(() => {
+    setCurrentLocation(location);
+  }, [location]);
+
+  if (!location || !currentLocation) return null;
+
+  const handleEditSubmit = (updatedLocation: Location) => {
+    onSave(updatedLocation);
+    setCurrentLocation(updatedLocation);
+    setIsEditMode(false);
+  };
 
   return (
-    <Modal
-      open={!!location}
-      onClose={onClose}
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 9999,
-      }}
-    >
-      <Paper
+    <>
+      <Modal
+        open={!!location}
+        onClose={onClose}
         sx={{
-          position: 'relative',
-          width: '100%',
-          maxWidth: 600,
-          maxHeight: '90vh',
-          overflow: 'auto',
-          p: 3,
-          m: 2,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: 1300,
         }}
       >
-        {/* Close button */}
-        <IconButton
-          onClick={onClose}
+        <Paper
           sx={{
-            position: 'absolute',
-            right: 8,
-            top: 8,
+            position: 'relative',
+            width: '100%',
+            maxWidth: 600,
+            maxHeight: '90vh',
+            overflow: 'auto',
+            p: 3,
+            m: 2,
           }}
+          onClick={(e) => e.stopPropagation()} // Prevent closing when clicking inside
         >
-          <CloseIcon />
-        </IconButton>
+          <IconButton
+            onClick={onClose}
+            sx={{
+              position: 'absolute',
+              right: 8,
+              top: 8,
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+
+          <Box sx={{ mb: 3, pr: 4 }}>
+            <Typography variant="h5" component="h2">
+              {currentLocation.name}
+            </Typography>
+            <Chip label={currentLocation.tag} size="small" sx={{ mt: 1 }} />
+          </Box>
 
-        {/* Title and tag */}
-        <Box sx={{ mb: 3, pr: 4 }}>
-          <Typography variant="h5" component="h2">
-            {location.name}
-          </Typography>
-          <Chip label={location.tag} size="small" sx={{ mt: 1 }} />
-        </Box>
+          <div className={styles.dialogContent}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+              Address
+            </Typography>
+            <Typography sx={{ mb: 2 }}>{currentLocation.address}</Typography>
 
-        {/* Content */}
-        <div className={styles.dialogContent}>
-          <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
-            Address
-          </Typography>
-          <Typography sx={{ mb: 2 }}>{location.address}</Typography>
+            <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+              Information
+            </Typography>
+            <Typography>{currentLocation.info}</Typography>
+          </div>
 
-          <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
-            Information
-          </Typography>
-          <Typography>{location.info}</Typography>
-        </div>
+          <Box sx={{ mt: 3, textAlign: 'right' }}>
+            <Button
+              startIcon={<EditIcon />}
+              onClick={() => setIsEditMode(true)}
+              variant="outlined"
+              sx={{ mr: 1 }}
+            >
+              Edit
+            </Button>
+            <Button onClick={onClose}>Close</Button>
+          </Box>
+        </Paper>
+      </Modal>
 
-        {/* Actions */}
-        <Box sx={{ mt: 3, textAlign: 'right' }}>
-          <Button onClick={onClose}>Close</Button>
-        </Box>
-      </Paper>
-    </Modal>
+      <LocationFormModal
+        open={isEditMode}
+        onClose={() => setIsEditMode(false)}
+        onSubmit={handleEditSubmit}
+        initialData={currentLocation}
+        mode="edit"
+      />
+    </>
   );
 };