gbs-add-block 0.0.13 → 0.0.15-rc1100-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.13",
+  "version": "0.0.15rc1100-beta",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/grid/Grid.tsx

@@ -53,7 +53,11 @@ export const Grid = forwardRef((props: GridProps, ref) => {
     gridContainerClass = "flex flex-col min-w-screen border rounded-md overflow-hidden dark:bg-black",
     gridColumnStyleSelectAll = "border-b px-4 text-sm dark:text-white",
     gridColumnStyle = "border-b p-2 text-sm dark:text-white",
+    rowChange = () => {},
+    pageStatus = () => {},
   } = props;
+
+  // States Handling Grid
   const [workingDataSource, setWorkingDataSource] = useState<any>([]);
   const [fallbackSourceData, setFallbackSourceData] = useState([]);
   const [workingColumns, setWorkingColumns] = useState<any>([]);
@@ -65,6 +69,14 @@ export const Grid = forwardRef((props: GridProps, ref) => {
   const [activeFilterArray, setActiveFilterArray] = useState<any>([]);
   const [selectedRows, setSelectedRows] = useState<any[]>([]);
 
+  // This will returns the Page Navigation Status of Grid
+  // Such as totalPages in the grid, currentpage, etc..
+  useEffect(() => {
+    if (pageStatus) {
+      pageStatus({ currentPage: currentPage, totalPages: totalPages });
+    }
+  }, [pageStatus, currentPage, totalPages]);
+
   // Function to handle API datasource
   const getGridData = useCallback(async () => {
     try {
@@ -225,6 +237,9 @@ export const Grid = forwardRef((props: GridProps, ref) => {
         <column.template
           rowData={rowData}
           rowIndex={rowIndex + currentPage * pageSettings.pageNumber}
+          rowChange={(changes: any) => {
+            if (rowChange) rowChange(changes);
+          }}
         />
       );
     }
@@ -330,19 +345,24 @@ export const Grid = forwardRef((props: GridProps, ref) => {
   // RowSelection Handling Logic Ends Here ***
 
   // Making Grid Functions Accessible in Parent
-  useImperativeHandle(ref, () => ({
-    goToPage,
-    nextPage,
-    prevPage,
-    goToFirstPage,
-    goToEndPage,
-    handleSearch,
-    handleApplyFilter,
-    clearFilter,
-    workingDataSource,
-    dataSource,
-  }));
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        goToPage,
+        nextPage,
+        prevPage,
+        goToFirstPage,
+        goToEndPage,
+        handleSearch,
+        handleApplyFilter,
+        clearFilter,
+      };
+    },
+    []
+  );
 
+  // JSX Rendering
   return (
     <div className={gridContainerClass}>
       <React.Fragment>

package/source/components/grid/type.ts

@@ -25,4 +25,6 @@ export type GridProps = {
   tableHeaderStyle?: string;
   gridColumnStyleSelectAll?: string;
   gridColumnStyle?: string;
+  rowChange?: any;
+  pageStatus?: any;
 };

package/source/components/input/index.tsx

@@ -74,6 +74,7 @@ export const Input = ({
           {/* If Type is password, this will show a password visible toggle button */}
           {props.type && props.type === "password" && (
             <button
+              type="button"
               className="absolute inset-y-0 right-0 flex items-center pr-2"
               onClick={toggleTypeForPassword}
             >
@@ -98,7 +99,9 @@ export const Input = ({
                 value={otpValues[index]}
                 onChange={(e) => updateOtpValue(index, e)}
                 onKeyDown={(e) => handleKeydown(index, e)}
-                // ref={(ref) => (inputRefs.current[index] = ref)}
+                ref={(ref) => {
+                  inputRefs.current[index] = ref;
+                }}
                 className={OTPClass}
               />
             ))}

package/source/components/multiselect/index.tsx

@@ -8,6 +8,7 @@
 import React, {
   forwardRef,
   memo,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useRef,
@@ -50,10 +51,6 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
     handleDataSource();
   }, [items]);
 
-  useEffect(() => {
-    if (onSelect) onSelect(selected);
-  }, [selected, onSelect]);
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -87,13 +84,16 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
     setShowPopover(!showPopover);
   };
 
-  const handleSelect = (value: string) => {
-    setSelected((prev) =>
-      prev.includes(value)
-        ? prev.filter((item) => item !== value)
-        : [...prev, value]
-    );
-  };
+  const handleSelect = useCallback(
+    (value: string) => {
+      const newSelected = selected.includes(value)
+        ? selected.filter((item) => item !== value)
+        : [...selected, value];
+      setSelected(newSelected);
+      onSelect?.(newSelected);
+    },
+    [selected, onSelect]
+  );
 
   const getSelectedDisplay = () => {
     if (selected.length === 0) return placeholder;
@@ -127,6 +127,7 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
   const clearSelected = () => {
     setSelected([]);
     setShowPopover(false);
+    if (onSelect) onSelect([]);
   };
 
   useImperativeHandle(ref, () => ({
@@ -142,19 +143,27 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
   return (
     <div className="relative w-[200px]" ref={selectRef}>
       <div className="relative border w-[200px] flex items-center px-4 py-2 rounded-lg">
-        <button onClick={togglePopover} className="flex-grow text-sm text-left">
+        <button
+          onClick={togglePopover}
+          className="flex-grow text-sm text-left"
+          type="button"
+        >
           {getSelectedDisplay()}
         </button>
         <div className="flex items-center space-x-2">
           {selected.length > 0 && (
-            <button className="flex items-center px-2" onClick={clearSelected}>
+            <button
+              className="flex items-center px-2"
+              onClick={clearSelected}
+              type="button"
+            >
               <Icon
                 elements={x}
                 svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
               />
             </button>
           )}
-          <button onClick={togglePopover}>
+          <button onClick={togglePopover} type="button">
             <Icon
               elements={upDown}
               svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
@@ -187,6 +196,7 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
           {filteredItems.length > 0 ? (
             filteredItems.map(({ value, label }) => (
               <button
+                type="button"
                 key={value}
                 className="flex items-center w-full px-2 py-1 text-left hover:bg-blue-100 gap-2 rounded-lg mt-1 text-sm dark:hover:bg-blue-600"
                 onClick={() => handleSelect(value)}

package/source/components/uploader/Uploader.tsx

@@ -1,4 +1,7 @@
 /**
+ * Important!!!!
+ * Work In Progress Code
+ *
  * Copyright (c) Grampro Business Services and affiliates.
  *
  * This source code is licensed under the MIT license found in the
@@ -6,30 +9,68 @@
  */
 
 import React, { useState, useRef, useEffect } from "react";
-import { upload, x } from "@/src/component-lib/icon/iconPaths";
-import Icon from "@/src/component-lib/icon/Icon";
+import { upload, x, circleCheck } from "../icon/iconPaths";
+import Icon from "../icon/Icon";
 import { GetFileIcon } from "./uploaderIcon";
 import AestheticProcessingAnimationWithStyles from "./ProgressAnimation";
+import { sendFiles } from "./uploaderService";
+import { cloudDownload } from "../../icon/iconPaths";
 
 export const FileUploader = ({
   showImagePreview = false,
-  multiple = true,
+  multiple = false,
   onChange,
-  startsUpload = false,
   selectedFiles = [],
   accept,
   fileCount,
   disabled = false,
   inputFileSize, // Max file size in MB
+  startUpload = false,
+  apiURL = "",
+  chunk_size = "",
+  uploadedFileIdArray = () => {},
+  fileData = [],
 }: any) => {
   const [files, setFiles] = useState<any[]>([]);
   const [previewUrls, setPreviewUrls] = useState<{ [key: string]: string }>({});
   const [isDragging, setIsDragging] = useState(false);
   const [fileCountError, setFileCountError] = useState(false);
   const [fileSizeErrors, setFileSizeErrors] = useState<string[]>([]); // Array for file size errors
+  const [isUploading, setIsUploading] = useState(false);
+  const [fileUploadStatus, setFileUploadStatus] = useState<string | undefined>(
+    undefined
+  );
+  const [progress, setProgress] = useState(0);
   const fileInputRef = useRef<any>(null);
   const dropZoneRef = useRef<any>(null);
 
+  // Starts uploads to server
+  useEffect(() => {
+    if (startUpload) {
+      // Upload Handler
+      const handleUpload = async () => {
+        if (files.length > 0) {
+          setFileUploadStatus(undefined);
+          await sendFiles(
+            files,
+            chunk_size,
+            apiURL,
+            ({ uploading, progress, uploadedFileIds }) => {
+              setIsUploading(uploading);
+              if (progress !== undefined) setProgress(progress);
+              // Returns Uploaded File ID's
+              if (uploadedFileIds) uploadedFileIdArray(uploadedFileIds);
+            }
+          );
+          setFileUploadStatus("Upload completed");
+        } else {
+          setFileUploadStatus("No files selected");
+        }
+      };
+      handleUpload();
+    }
+  }, [startUpload]);
+
   // For Binding values on edit
   useEffect(() => {
     if (selectedFiles && selectedFiles.length > 0) {
@@ -128,6 +169,22 @@ export const FileUploader = ({
     handleFileChange(multiple ? droppedFiles : [droppedFiles[0]]);
   };
 
+  const handleDownload = (fileId: any, fileName: any) => {
+    const downloadUrl = constructDownloadUrl(fileId);
+    window.open(downloadUrl, "_blank");
+  };
+
+  const constructDownloadUrl = (fileId: any) => {
+    const url = new URL("download", apiURL);
+    url.searchParams.append("id", fileId);
+    return url.href;
+  };
+
+  const isImageFile = (fileName: any) => {
+    const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"];
+    return imageExtensions.some((ext) => fileName.toLowerCase().endsWith(ext));
+  };
+
   return (
     <div className="w-full max-w-md mx-auto">
       <div
@@ -157,6 +214,18 @@ export const FileUploader = ({
             : "Single file upload only"}
         </p>
 
+        {/* Shows FileUpload Status Here */}
+        {fileUploadStatus && (
+          <p className="text-xs mt-2 text-green-500 flex gap-1">
+            <Icon
+              dimensions={{ width: "16", height: "16" }}
+              elements={circleCheck}
+              svgClass={"stroke-green-500 fill-none dark:stroke-white"}
+            />
+            {fileUploadStatus}
+          </p>
+        )}
+
         {/* Display file size errors */}
         {fileSizeErrors.length > 0 && (
           <div className="mt-2 space-y-1">
@@ -186,7 +255,10 @@ export const FileUploader = ({
         </span>
       )}
 
-      {startsUpload && <AestheticProcessingAnimationWithStyles />}
+      {/* Loading Animation */}
+      {isUploading && (
+        <AestheticProcessingAnimationWithStyles progressPercentage={progress} />
+      )}
 
       {files.length > 0 && (
         <div className="mt-4 space-y-2">
@@ -225,6 +297,44 @@ export const FileUploader = ({
           ))}
         </div>
       )}
+
+      {fileData.length > 0 &&
+        fileData.map((item: any, index: any) => (
+          <div
+            key={index}
+            className="flex items-center justify-between bg-gray-50 p-2 rounded-md mt-2"
+          >
+            <div className="flex items-center space-x-2">
+              {/* <GetFileIcon
+                file={item.FileName}
+                showImagePreview={showImagePreview}
+                previewUrls={previewUrls}
+              /> */}
+              {isImageFile(item.FileName) && (
+                <img
+                  src={constructDownloadUrl(item.FileID)}
+                  alt={item.FileName}
+                  className="mt-2 w-8 h-8 object-cover rounded-lg"
+                />
+              )}
+              <div>
+                <p className="text-sm font-medium text-gray-700">
+                  {item.FileName}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {(item.FileSize / 1024 / 1024).toFixed(2)} MB
+                </p>
+              </div>
+            </div>
+            <button onClick={() => handleDownload(item.FileID, item.FileName)}>
+              <Icon
+                dimensions={{ width: "18", height: "18" }}
+                elements={cloudDownload}
+                svgClass={"stroke-red-500 fill-none dark:stroke-white"}
+              />
+            </button>
+          </div>
+        ))}
     </div>
   );
 };

package/source/components/uploader/uploaderService.ts

@@ -20,7 +20,13 @@ function processFiles(files: File[], chunkSize: number) {
 export async function sendFiles(
   files: File[],
   chunkSize: number,
-  apiUrl = "http://localhost:8080/upload"
+  apiUrl = "http://localhost:8080/upload",
+  isUploading = (status: {
+    uploading: boolean;
+    progress?: number;
+    file?: string;
+    uploadedFileIds?: string[];
+  }) => {}
 ) {
   const processedFiles = processFiles(files, chunkSize);
 
@@ -33,6 +39,10 @@ export async function sendFiles(
   // To track chunk index per file
   const chunkIndexTracker: { [key: string]: number } = {};
 
+  let totalChunks = processedFiles.length;
+  let uploadedChunks = 0;
+  const uploadedFileIds: string[] = [];
+
   for (let i = 0; i < processedFiles.length; i++) {
     const { file, originalFile } = processedFiles[i];
     const formData = new FormData();
@@ -59,13 +69,12 @@ export async function sendFiles(
       chunkIndexTracker[originalFile.name]++;
     }
 
-    // Don't Remove the following console
-    // console.log("FormData contents:");
-    // formData.forEach((value, key) => {
-    //   console.log(`${key}: ${value}`);
-    // });
-
     try {
+      isUploading({
+        uploading: true,
+        progress: (uploadedChunks / totalChunks) * 100,
+        file: originalFile.name,
+      });
       const response = await fetch(apiUrl, {
         method: "POST",
         body: formData,
@@ -76,18 +85,40 @@ export async function sendFiles(
       }
 
       const data = await response.json();
+      if (data.documentId) uploadedFileIds.push(data.documentId);
 
-      if (data.documentId) {
-        console.log(
-          `File uploaded successfully. Document ID: ${data.documentId}`
-        );
-      } else {
-        console.log(
-          `Chunk ${chunkIndexTracker[originalFile.name]}/${chunkCount} uploaded`
-        );
-      }
+      uploadedChunks++;
+      isUploading({
+        uploading: true,
+        progress: (uploadedChunks / totalChunks) * 100,
+        file: originalFile.name,
+      });
     } catch (error) {
       console.error("Error uploading file chunk:", error);
+      isUploading({
+        uploading: false,
+        progress: (uploadedChunks / totalChunks) * 100,
+        file: originalFile.name,
+      });
     }
   }
+
+  // Indicate that the upload is complete
+  isUploading({
+    uploading: false,
+    progress: 100,
+    uploadedFileIds: uploadedFileIds,
+  });
+}
+
+// returns all files
+export async function getAllFiles(apiUrl: string) {
+  let files: any[] = [];
+  return files;
+}
+
+// returns files by ID
+export async function getFilesById(apiUrl: string, documentId: string) {
+  let files: any[] = [];
+  return files;
 }

package/source/icon/iconPaths.ts

@@ -166,3 +166,14 @@ export const filespreadsheet: any = [
   { type: "path", d: "M8 17h2", key: "2yhykz" },
   { type: "path", d: "M14 17h2", key: "10kma7" },
 ];
+
+export const cloudDownload: any = [
+  { type: "path", d: "m12 21 4-4", key: "1lfcce" },
+  { type: "path", d: "M12 13v8l-4-4", key: "1f5nwf" },
+  {
+    type: "path",
+
+    d: "M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284",
+    key: "ui1hmy",
+  },
+];