LMSN-36

Request - Fitur attachment MCU di Prime Center

frontend/dashboard/src/pages/Corporates/Member/List.tsx

@@ -28,7 +28,9 @@ import {
   ButtonGroup,
   Grid,
   Tooltip,
+  Divider,
 } from '@mui/material';
+import Iconify from '@/components/Iconify';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import AddIcon from '@mui/icons-material/Add';
@@ -49,8 +51,34 @@ import { enqueueSnackbar } from 'notistack';
 import { LoadingButton } from '@mui/lab';
 import DialogLog from './sections/DialogLog';
 import HistoryIcon from '@mui/icons-material/History';
+import { makeFormData } from '@/utils/jsonToFormData';
 
-export default function CorporatePlanList() {
+export default function CorporatePlanList({handleSubmitSuccess}) {
+  // Files MCU
+  const fileMcuInput = useRef<HTMLInputElement>(null);
+  const [fileMcus, setFileMcus] = useState([]);
+
+  const handleMcuInputChange = (id, member_id) => (event) => {
+    if (event.target.files[0]) {
+      const updatedFiles = Array.from(event.target.files).map((file) => ({
+        file,
+        id
+      }));
+      setFileMcus((prevFileMcus) => {
+        const newFileMcus = [...prevFileMcus, ...updatedFiles];
+        submitRequest(id, newFileMcus, member_id);
+        return newFileMcus;
+      });
+    } else {
+      console.log('Tidak ada file');
+    }
+  };
+  const removeMcuFiles = (id, index) => {
+    setFileMcus((filesState) =>
+      filesState.filter((file, fileIndex) => fileIndex !== index || file.id !== id)
+    );
+  };
+  const [submitLoading, setSubmitLoading] = useState(false);
   const { themeStretch } = useSettings();
   const { corporate_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -149,6 +177,44 @@ export default function CorporatePlanList() {
       </form>
     );
   }
+  function submitRequest(id, newFileMcus, member_id) {
+    setSubmitLoading(true);
+    if (newFileMcus && newFileMcus.length > 0) {
+      const fileWithId = newFileMcus.find((file) => file.id === id);
+      if (fileWithId) {
+        const formData = makeFormData({
+          id: id,
+          member_id: member_id,
+          result_files: fileWithId.file,
+        });
+        axios
+        .post('/files-mcu', formData)
+        .then((response) => {
+          const responseData = response?.data;
+          if(responseData)
+          {
+            enqueueSnackbar(responseData.message ?? 'Berhasil tambah file member '+member_id+', silahkan lihat dilaporan', { variant: 'success' });
+            handleSubmitSuccess();
+          }
+          
+        })
+        .catch(({ response }) => {
+          const responseData = response?.data;
+         if(responseData)
+         {
+           enqueueSnackbar(responseData.message ?? 'Something Went Wrong', { variant: 'error' });
+         }
+        })
+        .then(() => {
+          setSubmitLoading(false);
+        });
+
+      } else {
+        console.log(`File dengan ID ${id} tidak ditemukan`);
+      }
+    }
+  }
+  // End Files MCU
 
   function ImportForm(props: any) {
     // IMPORT
@@ -178,9 +244,7 @@ export default function CorporatePlanList() {
 
     const handleMemberList = async (appliedFilter = null) => {
         axios.get('corporates/' + corporate_id +  '/members/list').then((response) => {
-          console.log(response);
           const link = document.createElement('a');
-          console.log(response.data.data.file_name);
           link.href = response.data.data.file_url;
           link.setAttribute('download', response.data.data.file_name);
           document.body.appendChild(link);
@@ -578,20 +642,66 @@ export default function CorporatePlanList() {
                   </Grid>
                 </Grid>
 
-                <Grid>
-                  <LoadingButton
-                    id="upload-button"
-                    variant="outlined"
-                    startIcon={<InsertDriveFileIcon />}
-                    // sx={{ p: 1.8 }}
-                    // onClick={() => {handleDownloadLog(row)}}
-                    onClick={() => {
-                      setDialogLogOpen(true);
-                    }}
-                    loading={loadingLog}
-                  >
-                    Download LOG
-                  </LoadingButton>
+                <Grid spacing={1}>
+                    <Stack sx={{ marginTop: 1}}>
+                      <LoadingButton
+                        id="upload-button"
+                        variant="outlined"
+                        startIcon={<InsertDriveFileIcon />}
+                        // sx={{ p: 1.8 }}
+                        // onClick={() => {handleDownloadLog(row)}}
+                        onClick={() => {
+                          setDialogLogOpen(true);
+                        }}
+                        loading={loadingLog}
+                      >
+                        Download LOG
+                      </LoadingButton>
+                    </Stack>
+                    {/* -------------------------------Upload Dokumen MCU------------------------------- */}
+                    <Stack sx={{ marginTop: 1}}>
+                      {/*<Stack
+                        divider={<Divider orientation="horizontal" flexItem />}
+                        spacing={1}
+                        sx={{ marginY: 2}}
+                      >
+                        {fileMcus &&
+                          fileMcus
+                          .filter((datas) => datas.id === row.id)
+                          .map((datas, index) => (
+                            <Stack direction="row" justifyContent={'space-between'} key={index}>
+                              <Typography sx={{ color: "text.secondary" }}>{datas.file.name}</Typography>
+                              <Iconify
+                                icon="eva:trash-2-outline"
+                                color={'darkred'}
+                                onClick={() => {
+                                  removeMcuFiles(datas.id, index);
+                                }}
+                                sx={{ cursor: 'pointer' }}
+                              ></Iconify>
+                            </Stack>
+                          ))}
+                      </Stack>*/}
+                      <input
+                        type="file"
+                        id={`file-${row.id}`}
+                        ref={fileMcuInput}
+                        style={{ display: 'none' }}
+                        onChange={(event) => {
+                          handleMcuInputChange(row.id, row.member_id)(event);
+                        }}
+                        accept="application/pdf"
+                      />
+                      <LoadingButton
+                        variant="outlined"
+                        onClick={() => {
+                          fileMcuInput.current.click();
+                        }}
+                      >
+                        <Iconify icon="eva:plus-fill" />
+                        Add Result
+                      </LoadingButton>
+                    </Stack>
                 </Grid>
 
                 <DialogLog

frontend/dashboard/src/utils/jsonToFormData.ts

@@ -0,0 +1,6 @@
+import jsonToFormData from '@ajoelp/json-to-formdata';
+
+export function makeFormData(object: any) {
+    return jsonToFormData(object)
+}
+