From f682c61a149b2ac88a3ade8bd5fcf2a43a36ef56 Mon Sep 17 00:00:00 2001
From: paulmwatson <github.com@paulmwatson.com>
Date: Wed, 3 Apr 2024 11:23:36 +0200
Subject: [PATCH 1/2] Clean up

---
 app/src/components/legalCase/caseFileTab.tsx | 22 --------------------
 1 file changed, 22 deletions(-)

diff --git a/app/src/components/legalCase/caseFileTab.tsx b/app/src/components/legalCase/caseFileTab.tsx
index e789428..054e088 100644
--- a/app/src/components/legalCase/caseFileTab.tsx
+++ b/app/src/components/legalCase/caseFileTab.tsx
@@ -256,28 +256,6 @@ export default function CaseFileTab(props: Props) {
           />
         </Grid>
       </Grid>
-      <Grid
-        xs={12}
-        className={classes.containerMarginBottom}
-        style={{ display: "none" }}
-      >
-        <Input
-          id="table_search"
-          fullWidth
-          placeholder={i18n.t("Enter a meeting location, type, or note...")}
-          startAdornment={
-            <InputAdornment position="start">
-              <IconButton>
-                <SearchIcon color="primary" />
-              </IconButton>
-            </InputAdornment>
-          }
-          disableUnderline={true}
-          className={classes.textField}
-          aria-describedby="my-helper-text"
-          value={"Enter a meeting location, type, or note..."}
-        />
-      </Grid>
       <InputLabel
         className={classes.caseFileLabel}
         style={{ paddingTop: "20px" }}

From f6581b9d8dd7ae8bbe9f730513a7dbd76f7737f0 Mon Sep 17 00:00:00 2001
From: paulmwatson <github.com@paulmwatson.com>
Date: Wed, 3 Apr 2024 17:15:46 +0200
Subject: [PATCH 2/2] Better file dialog replacing rename dialog

---
 app/src/api.ts                               |   4 +-
 app/src/components/client/clientFileTab.tsx  |   4 +-
 app/src/components/legalCase/caseFileTab.tsx | 126 ++++------------
 app/src/components/legalCaseFile/edit.tsx    | 150 +++++++++++++++++++
 app/src/components/legalCaseFile/form.tsx    |  90 +++++++++++
 app/src/utils.ts                             |   4 +
 6 files changed, 280 insertions(+), 98 deletions(-)
 create mode 100644 app/src/components/legalCaseFile/edit.tsx
 create mode 100644 app/src/components/legalCaseFile/form.tsx

diff --git a/app/src/api.ts b/app/src/api.ts
index c7fb51c..e8957ef 100644
--- a/app/src/api.ts
+++ b/app/src/api.ts
@@ -395,12 +395,14 @@ export const deleteLegalCaseFile = async (id: number) => {
   return await httpDelete<ILegalCaseFile>(`/files/${id}/`);
 };
 
-export const renameLegalCaseFile = async (legalCaseFile: any) => {
+export const updateLegalCaseFile = async (legalCaseFile: any) => {
   const userInfo = UserInfo.getInstance();
   const token = userInfo.getAccessToken();
   const formData = new FormData();
   formData.append("legal_case", legalCaseFile.legal_case);
   formData.append("description", legalCaseFile.description);
+  // NOTE: Turns out it is trick to change the file name of the Django FileField so won't do it for now
+  //formData.append("upload_file_name", legalCaseFile.upload_file_name);
 
   const renameOptions: renameOptionsType = {
     method: "PATCH",
diff --git a/app/src/components/client/clientFileTab.tsx b/app/src/components/client/clientFileTab.tsx
index d2c5646..90d2682 100644
--- a/app/src/components/client/clientFileTab.tsx
+++ b/app/src/components/client/clientFileTab.tsx
@@ -33,7 +33,7 @@ import {
   deleteClientFile,
   deleteLegalCaseFile,
   renameClientFile,
-  renameLegalCaseFile,
+  updateLegalCaseFile,
   createClientFile,
   getLegalCases,
   getLegalCaseFiles,
@@ -215,7 +215,7 @@ export default function ClientFileTab(props: Props) {
   };
 
   const legalCaseFileRename = async (file: ILegalCaseFile) => {
-    renameLegalCaseFile(file)
+    updateLegalCaseFile(file)
       .then((res: any) => {
         if (res.id) {
           setShowSnackbar({
diff --git a/app/src/components/legalCase/caseFileTab.tsx b/app/src/components/legalCase/caseFileTab.tsx
index 054e088..346e6ae 100644
--- a/app/src/components/legalCase/caseFileTab.tsx
+++ b/app/src/components/legalCase/caseFileTab.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import { useStyles, VisuallyHiddenInput } from "../../utils";
-import SearchIcon from "@material-ui/icons/Search";
 import UploadIcon from "@mui/icons-material/Upload";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 
@@ -13,19 +12,16 @@ import { format } from "date-fns";
 import { ILegalCase, ILegalCaseFile, ILog, SnackbarState } from "../../types";
 import UpdateDialog from "./updateDialog";
 
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
 import DeleteIcon from "@material-ui/icons/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import CircularProgress from "@mui/material/CircularProgress";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 
+import LegalCaseFileEdit from "../../components/legalCaseFile/edit";
+
 import {
   getLegalCaseFiles,
   deleteLegalCaseFile,
-  renameLegalCaseFile,
   createLegalCaseFile,
   getCaseUpdates,
 } from "../../api";
@@ -39,6 +35,8 @@ import {
   Typography,
   ListItemIcon,
   ListItemText,
+  Select,
+  MenuItem,
 } from "@material-ui/core";
 import i18n from "../../i18n";
 import SnackbarAlert from "../general/snackBar";
@@ -57,9 +55,15 @@ export default function CaseFileTab(props: Props) {
   const classes = useStyles();
   const [open, setOpen] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState<boolean>(false);
+  const [legalCaseFileEditOpen, setLegalCaseFileEditOpen] =
+    React.useState(false);
+  const [legalCaseFile, setLegalCaseFile] = React.useState<ILegalCaseFile>();
+
   const [renameDialog, setRenameDialog] = React.useState<boolean>(false);
   const [renameDialogInput, setRenameDialogInput] = React.useState<any>({
+    file_name: "",
     description: "",
+    document_type: "",
     id: 0,
     legal_case: 0,
   });
@@ -75,6 +79,7 @@ export default function CaseFileTab(props: Props) {
   });
 
   const refreshUpdates = async () => {
+    console.log("2");
     const dataLegalCaseFiles = await getLegalCaseFiles(
       props.legalCase.id as number
     );
@@ -83,6 +88,10 @@ export default function CaseFileTab(props: Props) {
     props.setCaseUpdates(updates);
   };
 
+  const legalCaseFileDialogEditClose = () => {
+    setLegalCaseFileEditOpen(false);
+  };
+
   useEffect(() => {
     const resetState = async () => {
       setTimeout(() => {
@@ -96,47 +105,6 @@ export default function CaseFileTab(props: Props) {
     resetState();
   }, [showSnackbar.open]);
 
-  const renameFile = async (file: ILegalCaseFile) => {
-    renameLegalCaseFile(file)
-      .then((res: any) => {
-        if (res.id) {
-          setShowSnackbar({
-            open: true,
-            message: "File renamed successfully",
-            severity: "success",
-          });
-          setTriggerClick({ show: false, val: 0 });
-          setIsLoading(true);
-          getLegalCaseFiles(res.legal_case)
-            .then((res) => {
-              setIsLoading(false);
-              props.setLegalCaseFiles(res);
-            })
-            .catch((e) => {
-              setIsLoading(false);
-              setShowSnackbar({
-                open: true,
-                message: e.message,
-                severity: "error",
-              });
-            });
-        } else {
-          setShowSnackbar({
-            open: true,
-            message: "File rename failed",
-            severity: "error",
-          });
-        }
-      })
-      .catch(() => {
-        setShowSnackbar({
-          open: true,
-          message: "File rename failed",
-          severity: "error",
-        });
-      });
-  };
-
   const deleteFile = async (id: number) => {
     if (window.confirm("Are you sure you want to delete this file?")) {
       setDeleteLoader(true);
@@ -335,60 +303,18 @@ export default function CaseFileTab(props: Props) {
                             }}
                             disabled={false}
                             onClick={() => {
-                              setRenameDialogInput({
-                                description: legalCaseFile!.description!,
-                                id: legalCaseFile!.id!,
-                                legal_case: legalCaseFile!.legal_case!,
-                              });
-                              setRenameDialog(true);
+                              setLegalCaseFile(legalCaseFile);
+                              setLegalCaseFileEditOpen(true);
                             }}
                           >
                             <ListItemIcon>
                               <EditIcon fontSize="small" />
                             </ListItemIcon>
-                            <ListItemText>{i18n.t("Rename file")}</ListItemText>
+                            <ListItemText>
+                              {i18n.t("Edit file details")}
+                            </ListItemText>
                           </Button>
-                          <Dialog
-                            open={renameDialog}
-                            onClose={() => setRenameDialog(false)}
-                            fullWidth
-                            maxWidth="sm"
-                          >
-                            <DialogTitle>Rename file</DialogTitle>
-                            <DialogContent>
-                              <Input
-                                id="table_search"
-                                fullWidth
-                                disableUnderline={true}
-                                className={classes.textField}
-                                aria-describedby="Rename file"
-                                value={renameDialogInput.description}
-                                onChange={(
-                                  e: React.ChangeEvent<{ value: any }>
-                                ) => {
-                                  setRenameDialogInput({
-                                    ...renameDialogInput,
-                                    description: e.target.value,
-                                  });
-                                }}
-                              />
-                            </DialogContent>
-                            <DialogActions>
-                              <Button onClick={() => setRenameDialog(false)}>
-                                Cancel
-                              </Button>
-                              <Button
-                                color="primary"
-                                variant="contained"
-                                onClick={() => {
-                                  renameFile(renameDialogInput);
-                                  setRenameDialog(false);
-                                }}
-                              >
-                                {i18n.t("Submit")}
-                              </Button>
-                            </DialogActions>
-                          </Dialog>
+
                           <Button
                             style={{
                               position: "relative",
@@ -448,6 +374,16 @@ export default function CaseFileTab(props: Props) {
           severity={showSnackbar.severity}
         />
       )}
+
+      {legalCaseFile && (
+        <LegalCaseFileEdit
+          open={legalCaseFileEditOpen}
+          dialogClose={legalCaseFileDialogEditClose}
+          legalCaseFile={legalCaseFile}
+          setLegalCaseFile={setLegalCaseFile}
+          updateListHandler={refreshUpdates}
+        ></LegalCaseFileEdit>
+      )}
     </>
   );
 }
diff --git a/app/src/components/legalCaseFile/edit.tsx b/app/src/components/legalCaseFile/edit.tsx
new file mode 100644
index 0000000..0a5a0f9
--- /dev/null
+++ b/app/src/components/legalCaseFile/edit.tsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from "react";
+import {
+  IconButton,
+  Button,
+} from "@material-ui/core";
+import Box from "@mui/material/Box";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import CloseIcon from "@mui/icons-material/Close";
+import Divider from "@mui/material/Divider";
+
+import { useStyles } from "../../utils";
+import { updateLegalCaseFile } from "../../api";
+import { SnackbarState, ILegalCaseFile } from "../../types";
+import SnackbarAlert from "../general/snackBar";
+import LegalCaseFileForm from "./form";
+
+type Props = {
+  open: boolean;
+  dialogClose: () => void;
+  legalCaseFile: ILegalCaseFile;
+  setLegalCaseFile: (legalCaseFile: ILegalCaseFile) => void;
+  updateListHandler: () => void;
+};
+
+const UpdateDialog = (props: Props) => {
+  const classes = useStyles();
+
+  const [showSnackbar, setShowSnackbar] = useState<SnackbarState>({
+    open: false,
+    message: "",
+    severity: undefined,
+  });
+
+  const [isLoading, setIsLoading] = React.useState<boolean>(false);
+
+  useEffect(() => {
+    const resetState = async () => {
+      setTimeout(() => {
+        setShowSnackbar({
+          open: false,
+          message: "",
+          severity: undefined,
+        });
+      }, 6000);
+    };
+    resetState();
+  }, [showSnackbar.open]);
+
+  const submitHandler = () => {
+    props.dialogClose();
+  };
+
+  const updateExisting = () => {
+    setIsLoading(true);
+    updateLegalCaseFile(props.legalCaseFile)
+      .then((res: any) => {
+        if (res.id) {
+          setShowSnackbar({
+            open: true,
+            message: "File updated successfully",
+            severity: "success",
+          });
+          props.dialogClose();
+          console.log("1");
+          props.updateListHandler();
+        } else {
+          setShowSnackbar({
+            open: true,
+            message: "File update failed",
+            severity: "error",
+          });
+        }
+      })
+      .catch(() => {
+        setShowSnackbar({
+          open: true,
+          message: "File rename failed",
+          severity: "error",
+        });
+      });
+  };
+
+  return (
+    <>
+      <Dialog
+        open={props.open}
+        onClose={props.dialogClose}
+        fullWidth
+        maxWidth="sm"
+      >
+        <DialogTitle className={classes.dialogTitle}>
+          <Box display="flex" alignItems="center">
+            <Box flexGrow={1}>Edit file details</Box>
+            <Box>
+              <IconButton
+                size={"medium"}
+                onClick={props.dialogClose}
+                className={classes.closeButton}
+              >
+                <CloseIcon className={classes.closeButtonIcon} />
+              </IconButton>
+            </Box>
+          </Box>
+        </DialogTitle>
+        <DialogContent>
+          <Divider />
+          <LegalCaseFileForm
+            legalCaseFile={props.legalCaseFile}
+            setLegalCaseFile={props.setLegalCaseFile}
+          ></LegalCaseFileForm>
+        </DialogContent>
+
+        <DialogActions className={classes.dialogActions}>
+          <Button
+            disableElevation={true}
+            onClick={props.dialogClose}
+            fullWidth
+            variant="contained"
+            className={classes.dialogSubmit}
+          >
+            Cancel
+          </Button>
+
+          <Button
+            disableElevation={true}
+            fullWidth
+            color="primary"
+            variant="contained"
+            className={classes.dialogSubmit}
+            onClick={updateExisting}
+          >
+            Save{" "}
+          </Button>
+        </DialogActions>
+      </Dialog>
+      {showSnackbar.open && (
+        <SnackbarAlert
+          open={showSnackbar.open}
+          message={showSnackbar.message ? showSnackbar.message : ""}
+          severity={showSnackbar.severity}
+        />
+      )}
+    </>
+  );
+};
+
+export default UpdateDialog;
diff --git a/app/src/components/legalCaseFile/form.tsx b/app/src/components/legalCaseFile/form.tsx
new file mode 100644
index 0000000..fe9c9eb
--- /dev/null
+++ b/app/src/components/legalCaseFile/form.tsx
@@ -0,0 +1,90 @@
+import { Grid, InputAdornment } from "@material-ui/core";
+
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+import i18n from "../../i18n";
+import { ILegalCaseFile } from "../../types";
+import { useStyles } from "../../utils";
+
+type Props = {
+  legalCaseFile: ILegalCaseFile;
+  setLegalCaseFile: (legalCaseFile: ILegalCaseFile) => void;
+};
+
+const Component = (props: Props) => {
+  const classes = useStyles();
+
+  return (
+    <div>
+      <Grid
+        className={classes.pageBar}
+        container
+        direction="row"
+        spacing={2}
+        alignItems="center"
+      >
+        <Grid item xs={12} md={12}>
+          <FormControl fullWidth size="small">
+            <InputLabel
+              className={classes.inputLabel}
+              htmlFor="upload_file_name"
+              shrink={true}
+            >
+              {i18n.t("File name")}:
+            </InputLabel>
+            <Input
+              disabled
+              id="upload_file_name"
+              autoFocus
+              disableUnderline={true}
+              className={classes.textField}
+              aria-describedby="Input file name"
+              value={props.legalCaseFile.upload_file_name}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                props.setLegalCaseFile({
+                  ...props.legalCaseFile,
+                  upload_file_name: e.target.value,
+                });
+              }}
+            />
+            <small className={classes.hugUp}>
+              {i18n.t("*File name cannot be changed")}
+            </small>
+          </FormControl>
+        </Grid>
+        <Grid item xs={12} md={12}>
+          <FormControl fullWidth size="small">
+            <InputLabel
+              className={classes.inputLabel}
+              htmlFor="description"
+              shrink={true}
+            >
+              {i18n.t("Description")}:
+            </InputLabel>
+            <Input
+              id="description"
+              multiline
+              rows={5}
+              autoFocus
+              disableUnderline={true}
+              className={classes.textField}
+              aria-describedby="Input description"
+              value={props.legalCaseFile.description}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                props.setLegalCaseFile({
+                  ...props.legalCaseFile,
+                  description: e.target.value,
+                });
+              }}
+            />
+          </FormControl>
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+Component.defaultProps = {};
+
+export default Component;
diff --git a/app/src/utils.ts b/app/src/utils.ts
index b167042..7a0d09f 100644
--- a/app/src/utils.ts
+++ b/app/src/utils.ts
@@ -38,6 +38,10 @@ export const useStyles = makeStyles((theme: Theme) =>
       color: "#990000",
       textAlign: "center",
     },
+    hugUp: 
+    { 
+      marginTop: "-1.6em",
+    },
     body: {
       paddingBottom: "10em",
       marginTop: "60px!important" as any,