Merge pull request #54 from Life-Pill/dev-test-frontend

Fix Still Image Adding Issue and Enhance Image Handling in Cashier View
Life-Pill · Jun 16, 2024 · 4f15007 · 4f15007
2 parents b046a7a + 79a6cbf
commit 4f15007
Show file tree

Hide file tree

Showing 14 changed files with 376 additions and 201 deletions.
diff --git a/package.json b/package.json
@@ -99,21 +99,6 @@
       "target": "deb"
     }
   },
-  "config": {
-    "forge": {
-      "publishers": [
-        {
-          "name": "@electron-forge/publisher-github",
-          "config": {
-            "repository": {
-              "owner": "thetharz",
-              "name": "pharmacy-pos-frontend"
-            }
-          }
-        }
-      ]
-    }
-  },
   "devDependencies": {
     "@electron-forge/publisher-github": "^7.4.0",
     "@testing-library/jest-dom": "^6.4.5",

diff --git a/src/features/cashier-management/components/add-cashier/CashierDetails.tsx b/src/features/cashier-management/components/add-cashier/CashierDetails.tsx
@@ -5,23 +5,28 @@ import { useCashierContext } from '../../layout/AddCashier';
 import useCashierCRUDService from '../../services/CashierCRUDService';
 
 const CashierDetails = () => {
-  const [previewImage, setPreviewImage] = useState<string | null>(null);
-
   const { cashierDetails, setCashierDetails } = useCashierContext();
+  const { createCashier, loading, profilePicture, setProfilePicture } =
+    useCashierCRUDService();
 
   const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
     const file: File | null = e.target.files ? e.target.files[0] : null;
     if (file) {
       const reader = new FileReader();
       reader.onloadend = () => {
+        // reader.result should now be a string containing the data URL
         if (typeof reader.result === 'string') {
-          setPreviewImage(reader.result);
+          // If you need the File object itself, you can set it directly
+          setProfilePicture(file);
+          setCashierDetails((prev: any) => ({
+            ...prev,
+            profileImageUrl: file.path,
+          }));
         }
       };
       reader.readAsDataURL(file);
     }
   };
-  const { createCashier, loading } = useCashierCRUDService();
 
   const goToBankDetails = () => {
     // console.log(cashierDetails);
@@ -42,10 +47,10 @@ const CashierDetails = () => {
       </p>
       <div className='grid grid-cols-1 md:grid-cols-4 gap-6 items-center justify-center'>
         <div className='flex items-center justify-center gap-4 flex-col'>
-          {previewImage ? (
+          {profilePicture ? (
             <div className='mt-4'>
               <img
-                src={previewImage}
+                src={profilePicture.path}
                 alt='Preview'
                 className='w-64 h-64 rounded-full'
               />
@@ -66,6 +71,7 @@ const CashierDetails = () => {
               type='file'
               className='hidden'
               onChange={handleImageChange}
+              accept='image/*'
             />
           </label>
         </div>
@@ -188,28 +194,6 @@ const CashierDetails = () => {
 
         {/* Second Column */}
         <div>
-          <label
-            htmlFor='branch'
-            className='block text-sm font-medium text-black'
-          >
-            Branch
-          </label>
-          <select
-            id='branch'
-            className='mt-1 p-2 border-gray rounded-md w-64'
-            value={cashierDetails.branchId}
-            onChange={(e) =>
-              setCashierDetails({
-                ...cashierDetails,
-                branchId: parseInt(e.target.value),
-              })
-            }
-          >
-            <option value='0'>Branch 1</option>
-            <option value='1'>Branch 2</option>
-            <option value='2'>Branch 3</option>
-          </select>
-
           <label
             htmlFor='gender'
             className='block text-sm font-medium text-black'
@@ -219,7 +203,7 @@ const CashierDetails = () => {
           <select
             id='gender'
             className='mt-1 p-2 border-gray rounded-md w-64'
-            value={cashierDetails.gender}
+            value={cashierDetails.gender && cashierDetails.gender}
             onChange={(e) =>
               setCashierDetails({
                 ...cashierDetails,
@@ -261,7 +245,7 @@ const CashierDetails = () => {
             type='date'
             id='dateOfBirth'
             className='mt-1 p-2 border-gray rounded-md w-64'
-            value={cashierDetails.dateOfBirth?.slice(0, 10)}
+            value={cashierDetails.dateOfBirth?.toString().slice(0, 10)}
             onChange={(e) =>
               setCashierDetails({
                 ...cashierDetails,
@@ -329,7 +313,7 @@ const CashierDetails = () => {
             }
           />
 
-          <label
+          {/* <label
             htmlFor='confirmPassword'
             className='block text-sm font-medium text-black mt-4'
           >
@@ -346,7 +330,7 @@ const CashierDetails = () => {
                 employerConfirmPassword: e.target.value,
               })
             }
-          />
+          /> */}
 
           <label
             htmlFor='pin'
@@ -355,7 +339,7 @@ const CashierDetails = () => {
             Pin
           </label>
           <input
-            type='text'
+            type='number'
             id='pin'
             className='mt-1 p-2 border-gray rounded-md w-64'
             value={cashierDetails.pin}

diff --git a/src/features/cashier-management/components/add-cashier/CashierDetailsSummary.tsx b/src/features/cashier-management/components/add-cashier/CashierDetailsSummary.tsx
@@ -6,37 +6,46 @@ function CashierDetailsSummary() {
   const { cashierDetails, setCurrentComponent, cashierBankDetails } =
     useCashierContext();
 
-  const goToBack = () => {
+  const goToBankDetails = () => {
     setCurrentComponent(ComponentState.BankDetails);
   };
 
   return (
     <div className='grid grid-cols-2 gap-4'>
       <div className='bg-gray-100 p-4 rounded-lg'>
         <p className='text-lg font-bold mb-2'>Personal Information</p>
-        <p>
-          <span className='font-semibold'>Name:</span>{' '}
-          {cashierDetails.employerFirstName} {cashierDetails.employerLastName}
-        </p>
+
+        {/* Example of including an image */}
+        <div className='flex items-center mb-4'>
+          <img
+            src={cashierDetails.profileImageUrl} // Assuming profileImage is an array of strings (URLs)
+            alt='Profile'
+            className='h-16 w-16 rounded-full object-cover mr-2'
+          />
+          <div>
+            <p className='font-semibold'>
+              {cashierDetails.employerFirstName}{' '}
+              {cashierDetails.employerLastName}
+            </p>
+            <p>{cashierDetails.employerEmail}</p>
+          </div>
+        </div>
+
         <p>
           <span className='font-semibold'>Nickname:</span>{' '}
           {cashierDetails.employerNicName}
         </p>
-        <p>
-          <span className='font-semibold'>Email:</span>{' '}
-          {cashierDetails.employerEmail}
-        </p>
         <p>
           <span className='font-semibold'>Phone Number:</span>{' '}
           {cashierDetails.employerPhone}
         </p>
         <p>
-          <span className='font-semibold'>Address </span>{' '}
+          <span className='font-semibold'>Address:</span>{' '}
           {cashierDetails.employerAddress}
         </p>
         <p>
           <span className='font-semibold'>Date of Birth:</span>{' '}
-          {cashierDetails.dateOfBirth?.slice(0, 10)}
+          {cashierDetails.dateOfBirth.toString().slice(0, 10)}
         </p>
       </div>
       <div className='bg-gray-100 p-4 rounded-lg'>
@@ -81,7 +90,7 @@ function CashierDetailsSummary() {
       <button
         type='button'
         className='text-white bg-blueDarker hover:bg-blue font-medium py-2.5 px-5 me-2 mb-2 rounded-lg'
-        onClick={goToBack}
+        onClick={goToBankDetails}
       >
         Go To Bank Details
       </button>

diff --git a/src/features/cashier-management/components/update-cashier/UpdateCashierDetails.tsx b/src/features/cashier-management/components/update-cashier/UpdateCashierDetails.tsx
@@ -6,18 +6,36 @@ import useCashierCRUDService from '../../services/CashierCRUDService';
 import Loader from '../../../../shared/loader/Loader';
 import { CashierDetailsType } from '../../interfaces/CashierDetailsType';
 import useBankCRUDService from '../../services/BankDetailsCRUDService';
+import { LoaderIcon } from 'lucide-react';
 
 const UpdateCashierDetails = () => {
   const { employerId } = useParams();
-  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [updateImage, setUpdateImage] = useState<boolean>(false);
+
+  const {
+    fetchCashierById,
+    cashierDetails,
+    setCashierDetails,
+    loading,
+    updateCashier,
+    updating,
+    setProfilePicture,
+    fetchImageOfEmployer,
+    fetchProfilePicture,
+    profileImageUrl,
+    profilePicture,
+    updateEmployerImage,
+    updateState,
+  } = useCashierCRUDService();
 
   const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
     const file: File | null = e.target.files ? e.target.files[0] : null;
     if (file) {
       const reader = new FileReader();
       reader.onloadend = () => {
         if (typeof reader.result === 'string') {
-          setPreviewImage(reader.result);
+          setProfilePicture(file);
+          setUpdateImage(true);
         }
       };
       reader.readAsDataURL(file);
@@ -28,17 +46,9 @@ const UpdateCashierDetails = () => {
     updateCashier(employer);
   };
 
-  const {
-    fetchCashierById,
-    cashierDetails,
-    setCashierDetails,
-    loading,
-    updateCashier,
-    updating,
-  } = useCashierCRUDService();
-
   useEffect(() => {
     fetchCashierById(parseInt(employerId as string));
+    fetchImageOfEmployer(parseInt(employerId as string));
   }, []);
 
   return (
@@ -50,23 +60,27 @@ const UpdateCashierDetails = () => {
         ) : (
           <>
             <div className='flex items-center justify-center gap-4 flex-col'>
-              {previewImage ? (
-                <div className='mt-4'>
+              <div className='mt-4'>
+                {updateImage ? (
                   <img
-                    src={previewImage}
+                    src={profilePicture?.path}
                     alt='Preview'
                     className='w-64 h-64 rounded-full'
                   />
-                </div>
-              ) : (
-                <div className='mt-4'>
+                ) : fetchProfilePicture ? (
+                  <Loader />
+                ) : (
                   <img
-                    src='https://randomuser.me/api/portraits/men/1.jpg'
-                    alt='Preview'
+                    src={
+                      profileImageUrl ||
+                      'https://static-00.iconduck.com/assets.00/person-icon-1901x2048-a9h70k71.png'
+                    }
+                    alt='Profile'
                     className='w-64 h-64 rounded-full'
                   />
-                </div>
-              )}
+                )}
+              </div>
+
               <label className='w-64 flex flex-row items-center p-2 justify-center gap-2 bg-white rounded-lg'>
                 <IoCloudUploadOutline size={25} />
                 <span className='text-base leading-normal'>
@@ -76,8 +90,19 @@ const UpdateCashierDetails = () => {
                   type='file'
                   className='hidden'
                   onChange={handleImageChange}
+                  accept='image/*'
                 />
               </label>
+
+              <button
+                type='button'
+                className='text-white bg-blueDarker hover:bg-blue-600 font-medium py-2.5 px-5 me-2 mb-2 rounded-lg'
+                onClick={(e) =>
+                  updateEmployerImage(parseInt(employerId as string))
+                }
+              >
+                {updateState ? 'Updating...' : 'Update Image'}
+              </button>
             </div>
 
             <div>
@@ -197,28 +222,6 @@ const UpdateCashierDetails = () => {
             </div>
 
             <div>
-              <label
-                htmlFor='branch'
-                className='block text-sm font-medium text-black'
-              >
-                Branch
-              </label>
-              <select
-                id='branch'
-                className='mt-1 p-2 border-gray rounded-md w-64'
-                value={cashierDetails.branchId}
-                onChange={(e) =>
-                  setCashierDetails({
-                    ...cashierDetails,
-                    branchId: parseInt(e.target.value),
-                  })
-                }
-              >
-                <option value='0'>Branch 1</option>
-                <option value='1'>Branch 2</option>
-                <option value='2'>Branch 3</option>
-              </select>
-
               <label
                 htmlFor='gender'
                 className='block text-sm font-medium text-black'
@@ -337,33 +340,15 @@ const UpdateCashierDetails = () => {
                 }
               />
 
-              <label
-                htmlFor='confirmPassword'
-                className='block text-sm font-medium text-black mt-4'
-              >
-                Confirm Password
-              </label>
-              <input
-                type='text'
-                id='confirmPassword'
-                className='mt-1 p-2 border-gray rounded-md w-64'
-                value={cashierDetails.employerConfirmPassword}
-                onChange={(e) =>
-                  setCashierDetails({
-                    ...cashierDetails,
-                    employerConfirmPassword: e.target.value,
-                  })
-                }
-              />
-
               <label
                 htmlFor='pin'
                 className='block text-sm font-medium text-black mt-4'
               >
                 Pin
               </label>
               <input
-                type='text'
+                type='number'
+                accept='number'
                 id='pin'
                 className='mt-1 p-2 border-gray rounded-md w-64'
                 value={cashierDetails.pin}