[WIP] Fix Upload Document from Hospital Portal

Modules/HospitalPortal/Http/Controllers/Api/ClaimRequestController.php

@@ -62,7 +62,15 @@ class ClaimRequestController extends Controller
             'status' => 'requested'
         ]);
 
-        return Helper::responseJson(data: $newClaimRequest, message: 'Claim Request berhasil ajukan!');
+        if ($request->hasFile('result_files')) {
+            foreach ($request->result_files as $file) {
+                // $newClaimRequest->files()->create()
+            }
+        }
+        return ($request->files_result[0]->getClientOriginalName());
+        die('asdasd');
+
+        return Helper::responseJson(data: $request->toArray(), message: 'Claim Request berhasil ajukan!');
     }
 
     /**

app/Models/ClaimRequest.php

@@ -45,6 +45,11 @@ class ClaimRequest extends Model
         'status'
     ];
 
+    public function files()
+    {
+        return $this->morphMany(File::class, 'fileable');
+    }
+
     public function member()
     {
         return $this->belongsTo(Member::class, 'member_id', 'id');

app/Models/File.php

@@ -27,7 +27,8 @@ class File extends Model
     public static $file_directories = [
         'import-temp' => 'import-temp/',
         'avatar' => 'user-avatar/',
-        'dataDiri' => 'data-diri/'
+        'dataDiri' => 'data-diri/',
+        ''
     ];
 
     public function fileable()

frontend/hospital-portal/package.json

@@ -38,6 +38,7 @@
     ]
   },
   "dependencies": {
+    "@ajoelp/json-to-formdata": "^1.4.0",
     "@date-io/date-fns": "^2.16.0",
     "@emotion/cache": "^11.10.5",
     "@emotion/react": "^11.10.5",

frontend/hospital-portal/pnpm-lock.yaml

@@ -1,6 +1,7 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@ajoelp/json-to-formdata': ^1.4.0
   '@babel/core': ^7.20.12
   '@babel/eslint-parser': ^7.19.1
   '@babel/plugin-syntax-flow': ^7.18.6
@@ -47,6 +48,7 @@ specifiers:
   framer-motion: ^6.5.1
   highlight.js: ^11.7.0
   history: ^5.3.0
+  json2formdata: ^1.0.4
   jsx-runtime: ^1.2.0
   lodash: ^4.17.21
   notistack: 3.0.0-alpha.11
@@ -75,6 +77,7 @@ specifiers:
   yup: ^0.32.11
 
 dependencies:
+  '@ajoelp/json-to-formdata': 1.4.0
   '@date-io/date-fns': 2.16.0_date-fns@2.29.3
   '@emotion/cache': 11.10.5
   '@emotion/react': 11.10.5_mk6db2egckiugg7v365a42dwcm
@@ -97,6 +100,7 @@ dependencies:
   framer-motion: 6.5.1_sfoxds7t5ydpegc3knd667wn6m
   highlight.js: 11.7.0
   history: 5.3.0
+  json2formdata: 1.0.4
   jsx-runtime: 1.2.0
   lodash: 4.17.21
   notistack: 3.0.0-alpha.11_pwge5r66yg44rq5pj4ruhckhdm
@@ -152,6 +156,12 @@ devDependencies:
 
 packages:
 
+  /@ajoelp/json-to-formdata/1.4.0:
+    resolution: {integrity: sha512-6JRpLFke2OiJrbKzbjv4n6VHAJnHefXL/EKLYb3DZEa6DIlNY9EJ4HBTimKlfz0tehzFBeVO091pzHMCTv7pUQ==}
+    dependencies:
+      lodash: 4.17.21
+    dev: false
+
   /@ampproject/remapping/2.2.0:
     resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
     engines: {node: '>=6.0.0'}
@@ -4643,6 +4653,10 @@ packages:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
 
+  /json2formdata/1.0.4:
+    resolution: {integrity: sha512-caobS2W+raW3Fg3mt2ANGTPryLOUANxukjdfwkWKHY2pam9G1Ns3tifnaVzctMaqKevxhf7NIycFnTEXWYggdg==}
+    dev: false
+
   /json5/1.0.2:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true

frontend/hospital-portal/src/sections/dashboard/CardSearchMember.tsx

@@ -48,8 +48,8 @@ const ItemNotificationStyle = styled(Card)(({ theme }) => ({
 export default function CardSearchMember() {
   const {enqueueSnackbar} = useSnackbar();
 
-  const [noPolis, setNoPolis] = useState('');
+  const [noPolis, setNoPolis] = useState('AW001-01');
-  const [tanggalLahir, setTanggalLahir] = useState('');
+  const [tanggalLahir, setTanggalLahir] = useState('1991-01-10');
   const [loadingBenefit, setLoadingBenefit] = useState(false);
   const [loadingClaim, setLoadingClaim] = useState(false);
   const [openDialogBenefit, setOpenDialogBenefit] = useState(false);

frontend/hospital-portal/src/sections/dashboard/FormRequestClaim.tsx

@@ -9,13 +9,10 @@ import { fPostFormat } from '@/utils/formatTime';
 import axios from '@/utils/axios';
 import { enqueueSnackbar } from 'notistack';
 import { useRef, useState } from 'react';
+import { makeFormData } from '@/utils/jsonToFormData';
 
 // TODO Fix any
 export default function FormRequestClaim({ member, handleSubmitSuccess }) {
-    const [submitLoading, setSubmitLoading] = useState(false)
-    const fileResultInput = useRef<HTMLInputElement>(null);
-    const [filesResult, setFilesResult] = useState([]);
-    
   const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
     height: 10,
     borderRadius: 6,
@@ -27,55 +24,55 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
       background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
     },
   }));
-    // ----------------------------------------------------------------------
 
-    
+  // ----------------------------------------------------------------------
+  // Files Result Hasil Penunjang
+
+  const fileHasilPenunjangInput = useRef<HTMLInputElement>(null);
+  const [fileHasilPenunjangs, setFileHasilPenunjangs] = useState([]);
 
-  const handleImportButton = () => {
-    if (fileResultInput?.current) {
-      fileResultInput.current ? fileResultInput.current.click() : console.log('No File selected');
-    } else {
-      alert('No file selected');
-    }
-  };
-  
   const handleResultInputChange = (event) => {
     if (event.target.files[0]) {
-        // console.log('pushing', event.target.files[0])
+      setFileHasilPenunjangs([...fileHasilPenunjangs, ...event.target.files]);
-        // let currentFiles = filesResult;
-        // currentFiles.push(event.target.files[0])
-        setFilesResult([...filesResult, ...event.target.files])
     } else {
-        console.log('NO FILE')
+      console.log('NO FILE');
     }
-  }
+  };
   const removeFiles = (filesState, index) => {
-    setFilesResult(filesState.filter((file, fileIndex) => {
+    setFileHasilPenunjangs(
-        console.log('looing through', fileIndex)
+      filesState.filter((file, fileIndex) => {
         return fileIndex != index;
-    }))
+      })
+    );
+  };
+
+  // --------------------------------------------------------------
+  // Submit Form
+
+  const [submitLoading, setSubmitLoading] = useState(false);
+  function submitRequest() {
+    setSubmitLoading(true);
+    const formData = makeFormData({
+      'member_id' : member.id,
+      'result_files' : fileHasilPenunjangs
+    })
+    axios
+      .post('/claim-requests', formData)
+      .then((response) => {
+        enqueueSnackbar(response.data.message ?? 'Berhasil membuat data', { variant: 'success' });
+        // handleSubmitSuccess();
+      })
+      .catch(({ response }) => {
+        enqueueSnackbar(response.data.message ?? 'Something Went Wrong', { variant: 'error' });
+      })
+      .then(() => {
+        setSubmitLoading(false);
+      });
   }
-  
-    function submitRequest() {
-        setSubmitLoading(true)
-        axios.post('/claim-requests', {
-            'member_id' : member.id,
-        })
-        .then((response) => {
-            enqueueSnackbar(response.data.message ?? 'Berhasil membuat data', {variant: 'success'})
-            handleSubmitSuccess()
-        })
-        .catch(({response}) => {
-            enqueueSnackbar(response.data.message ?? 'Something Went Wrong', {variant: 'error'});
-        })
-        .then(() => {
-            setSubmitLoading(false)
-        })
-    }
 
   return (
     <Stack>
-      <Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2}}>
+      <Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2 }}>
         <Typography textAlign={'right'}>
           Submission Date : <br /> {fPostFormat(new Date(), 'dd/MM/yyyy')}
         </Typography>
@@ -123,11 +120,18 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
           spacing={1}
           sx={{ marginY: 2 }}
         >
-            {filesResult && filesResult.map((file, index) => (
+          {filesResult &&
-                <Stack direction="row" justifyContent={'space-between'} key={index}>
+            filesResult.map((file, index) => (
-                    <Typography>{file.name}</Typography>
+              <Stack direction="row" justifyContent={'space-between'} key={index}>
-                    <Iconify icon="eva:trash-2-outline" color={'darkred'} onClick={() => {removeFiles(filesResult, index)}}></Iconify>
+                <Typography>{file.name}</Typography>
-                </Stack>
+                <Iconify
+                  icon="eva:trash-2-outline"
+                  color={'darkred'}
+                  onClick={() => {
+                    removeFiles(filesResult, index);
+                  }}
+                ></Iconify>
+              </Stack>
             ))}
           {/* <Stack direction="row" justifyContent={'space-between'}>
                                     <Typography>Nama File .pdf</Typography>
@@ -138,19 +142,31 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
         <input
           type="file"
           id="file"
-          ref={fileResultInput}
+          ref={fileHasilPenunjangInput}
           style={{ display: 'none' }}
           multiple
           onChange={handleResultInputChange}
           accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
         />
-        <LoadingButton variant="outlined" onClick={() => {fileResultInput.current.click()}}>
+        <LoadingButton
+          variant="outlined"
+          onClick={() => {
+            fileHasilPenunjangInput.current.click();
+          }}
+        >
           <Iconify icon="eva:plus-fill" />
           Add Result
         </LoadingButton>
       </Stack>
 
-      <LoadingButton variant="contained" sx={{ marginTop: 2, p: 2 }} onClick={() => {submitRequest()}} loading={submitLoading}>
+      <LoadingButton
+        variant="contained"
+        sx={{ marginTop: 2, p: 2 }}
+        onClick={() => {
+          submitRequest();
+        }}
+        loading={submitLoading}
+      >
         LOG Request
       </LoadingButton>
     </Stack>

frontend/hospital-portal/src/utils/jsonToFormData.ts

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