Initial commit

ramkumarsync · ramkumarsync · commit 5043fca62a3f · 2025-05-28T19:36:08.000+05:30
diff --git a/Client-side/src/DocumentEditor.js b/Client-side/src/DocumentEditor.js
@@ -6,41 +6,38 @@ import FileManager from './FileManager';
 DocumentEditorContainerComponent.Inject(DocumentEditorToolbar);
 
 const DocumentEditor = () => {
-  const [maxDocId, setMaxDocId] = useState(null);
-  const containerRef = useRef(null);
-  const [selectedDocId, setSelectedDocId] = useState(null);
-  const [selectedDocName, setSelectedDocName] = useState(null);
-  const [showDialog, setShowDialog] = useState(false);
-  const [showFileManager, setShowFileManager] = React.useState(true);
-  const fileManagerRef = useRef(null);
-  const inputRef = useRef(null);
-  const contentChanged = useRef(false);
-  const [errorMessage, setErrorMessage] = useState('');
-  const randomDefaultName = 'New Document'
-
-  const newToolItem = {
-    prefixIcon: "e-de-ctnr-new",
-    tooltipText: "New",
-    text: "New",
-    id: "CreateNewDoc"
-  };
-  const openToolItem = {
-    prefixIcon: "e-de-ctnr-open",
-    tooltipText: "Open file manager",
-    text: "Open",
-    id: "OpenFileManager"
-  };
-  const downloadToolItem = {
-    prefixIcon: "e-de-ctnr-download",
-    tooltipText: "Download",
-    text: "Download",
-    id: "DownloadToLocal"
-  };
+  // State and refs
+  const [maxDocId, setMaxDocId] = useState(null);  // Track maximum doc ID for new document creation
+  const containerRef = useRef(null);               // Reference to DocumentEditor container
+  const [selectedDocId, setSelectedDocId] = useState(null); // Selected document ID
+  const [selectedDocName, setSelectedDocName] = useState(null); // Selected document name
+  const [showDialog, setShowDialog] = useState(false); // Controls "New Document" dialog
+  const [showFileManager, setShowFileManager] = useState(true); // Controls FileManager dialog visibility
+  const fileManagerRef = useRef(null);             // Reference to FileManager
+  const inputRef = useRef(null);                   // Input reference for new document name
+  const contentChanged = useRef(false);            // Flag to track content changes
+  const [errorMessage, setErrorMessage] = useState(''); // Error message for name validation
+  const randomDefaultName = 'New_Document';        // Default document name
+
+  // Toolbar custom items
+  const newToolItem = { prefixIcon: "e-de-ctnr-new", tooltipText: "New", text: "New", id: "CreateNewDoc" };
+  const openToolItem = { prefixIcon: "e-de-ctnr-open", tooltipText: "Open file manager", text: "Open", id: "OpenFileManager" };
+  const downloadToolItem = { prefixIcon: "e-de-ctnr-download", tooltipText: "Download", text: "Download", id: "DownloadToLocal" };
 
   const hostUrl = "https://localhost:44305/";
-  const toolbarItems = [newToolItem, openToolItem, downloadToolItem, 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields', 'ContentControl'];
 
-  const SaveDocument = () => {
+  // Complete toolbar items list
+  const toolbarItems = [
+    newToolItem, openToolItem, downloadToolItem, 'Separator',
+    'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark',
+    'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 
+    'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator',
+    'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing',
+    'Separator', 'FormFields', 'UpdateFields', 'ContentControl'
+  ];
+
+  // Save document to the server as base64
+  const autoSaveDocument  = () => {
     const editor = containerRef.current?.documentEditor;
     editor.saveAsBlob('Docx').then((blob) => {
       const reader = new FileReader();
@@ -52,13 +49,8 @@ const DocumentEditor = () => {
         try {
           await fetch(hostUrl + `api/documents/${selectedDocId}/saveDocumentAsync`, {
             method: 'POST',
-            headers: {
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-              Base64Content: base64Data,
-              FileName: fileName
-            })
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ Base64Content: base64Data, FileName: fileName })
           });
         } catch (err) {
           console.error('Auto-save error:', err);
@@ -68,7 +60,8 @@ const DocumentEditor = () => {
     });
   };
 
-  const handleDialogSave = async () => {
+  // Create new document logic from dialog
+  const handleFileNamePromptOk  = async () => {
     const documentName = inputRef.current?.value?.trim();
     if (!documentName) {
       setErrorMessage("Document name cannot be empty.");
@@ -86,7 +79,7 @@ const DocumentEditor = () => {
       return;
     }
 
-    // Proceed to save
+    // Proceed with creation
     setErrorMessage("");
     setShowDialog(false);
     const newId = maxDocId + 1;
@@ -97,7 +90,7 @@ const DocumentEditor = () => {
     containerRef.current.documentEditor.openBlank();
   };
 
-  //  Check if a document with a given name already exists on the Azure storage
+  //  Check if a document with a given name already exists on database
   const checkDocumentExistence = async (fileName) => {
     try {
       const response = await fetch(hostUrl + 'api/documents/CheckDocumentExistence', {
@@ -116,9 +109,11 @@ const DocumentEditor = () => {
     }
   };
 
+  // Handle toolbar item clicks
   const handleToolbarItemClick = (args) => {
     let documentName = containerRef.current.documentEditor.documentName;
     const baseDocName = documentName.replace(/\.[^/.]+$/, '');
+
     switch (args.item.id) {
       case 'CreateNewDoc':
         setSelectedDocId(0);
@@ -146,26 +141,31 @@ const DocumentEditor = () => {
     }
   };
 
+  // Auto-save effect runs every second
   React.useEffect(() => {
     const intervalId = setInterval(() => {
       if (contentChanged.current) {
-        SaveDocument();
+        autoSaveDocument();
         contentChanged.current = false;
       }
     }, 1000);
     return () => clearInterval(intervalId);
   });
 
+  // Auto-focus on dialog input
   React.useEffect(() => {
-    if (showDialog  && inputRef.current) {
+    if (showDialog && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
     }
-  }, [showDialog ]);
+  }, [showDialog]);
 
+  // Handle content changes
   const handleContentChange = () => {
     contentChanged.current = true;
   };
+
+  // Load document from FileManager selection
   const loadFileFromFileManager = (fileId, fileName) => {
     setSelectedDocId(fileId);
     containerRef.current.documentEditor.documentName = fileName;
@@ -174,6 +174,7 @@ const DocumentEditor = () => {
 
   return (
     <div>
+      {/* FileManager dialog for opening files */}
       <FileManager
         onFileSelect={loadFileFromFileManager}
         onFileManagerLoaded={(id) => setMaxDocId(id)}
@@ -182,9 +183,13 @@ const DocumentEditor = () => {
         visible={showFileManager}
         setVisible={setShowFileManager}
       />
+
+      {/* Document name display */}
       <div id="document-header">
         {selectedDocName || (inputRef?.current?.value ? inputRef.current.value + '.docx' : '')}
       </div>
+
+      {/* Main document editor container */}
       <DocumentEditorContainerComponent
         ref={containerRef}
         height="calc(100vh - 65px)"
@@ -194,6 +199,8 @@ const DocumentEditor = () => {
         toolbarClick={handleToolbarItemClick}
         contentChange={handleContentChange}
       />
+
+      {/* Dialog for creating new documents */}
       <DialogComponent
         visible={showDialog}
         header='New Document'
@@ -203,8 +210,8 @@ const DocumentEditor = () => {
         close={() => setShowDialog(false)}
         buttons={[
           {
-            click: handleDialogSave,
-            buttonModel: { content: 'Save', isPrimary: true }
+            click: handleFileNamePromptOk ,
+            buttonModel: { content: 'Ok', isPrimary: true }
           },
           {
             click: () => setShowDialog(false),
diff --git a/Client-side/src/FileManager.js b/Client-side/src/FileManager.js
@@ -1,34 +1,47 @@
 import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar as FileManagerToolbar} from '@syncfusion/ej2-react-filemanager';
 import { DialogComponent } from '@syncfusion/ej2-react-popups';
 
+// FileManager component props:
+// - onFileSelect: callback when a file is selected
+// - onFileManagerLoaded: callback on initial load with document count
+// - editorRef: reference to the Syncfusion DocumentEditor
+// - fileManagerRef: reference to this FileManager component
+// - visible: controls visibility of the dialog
+// - setVisible: function to toggle dialog visibility
 const FileManager = ({ onFileSelect, onFileManagerLoaded, editorRef, fileManagerRef, visible, setVisible }) => {
+
+    // Called after FileManager successfully loads
     const onSuccess = (args) => {
-        const maxId = args.result.docCount;
-        if (onFileManagerLoaded) onFileManagerLoaded(maxId);
+        const maxId = args.result.docCount; // Retrieve document count
+        if (onFileManagerLoaded) onFileManagerLoaded(maxId); // Call parent callback
     };
+
+    // Base API URL
     const hostUrl = 'https://localhost:44305/';
 
+    // Loads a document by its ID into the DocumentEditor
     const loadDocument = async (docId) => {
         try {
             const response = await fetch(hostUrl + `api/documents/${docId}/getDocumentAsync`);
             const data = await response.text();
             if (editorRef?.current?.documentEditor) {
-                editorRef.current.documentEditor.open(data);
+                editorRef.current.documentEditor.open(data); // Load content into the editor
             }
         } catch (err) {
             console.error('Error loading document', err);
         }
     };
 
+    // Triggered when a file is opened via double-click or context menu
     const handleFileOpen = (args) => {
         if (args.fileDetails.isFile) {
             const fileId = args.fileDetails.id;
             const fileName = args.fileDetails.name;
             if (typeof onFileSelect === 'function') {
-                onFileSelect(fileId, fileName);
+                onFileSelect(fileId, fileName); // Call parent callback with file info
             }
-            loadDocument(fileId);
-            setVisible(false); // Close dialog
+            loadDocument(fileId); // Load the selected document
+            setVisible(false); // Close the dialog
         }
     };
 
@@ -42,27 +55,28 @@ const FileManager = ({ onFileSelect, onFileManagerLoaded, editorRef, fileManager
             showCloseIcon={true}
             closeOnEscape={true}
             target="body"
-            beforeClose={() => setVisible(false)}
-            onClose={() => setVisible(false)}
+            beforeClose={() => setVisible(false)} // Set dialog visibility to false before closing
+            onClose={() => setVisible(false)} // Ensure dialog state is updated on close
         >
             <FileManagerComponent
                 id="azure-file-manager"
                 ref={fileManagerRef}
                 ajaxSettings={{
-                    url: hostUrl + 'api/documents',
-                    downloadUrl: hostUrl + 'api/documents/downloadAsync',
+                    url: hostUrl + 'api/documents', // API for file management
+                    downloadUrl: hostUrl + 'api/documents/downloadAsync', // API for file download
                 }}
                 toolbarSettings={{
                     items: ['SortBy', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Selection', 'View', 'Details'],
                 }}
                 contextMenuSettings={{
-                    file: ['Open', 'Copy', '|', 'Delete', 'Download', '|', 'Details'],
-                    layout: ['SortBy', 'View', 'Refresh', '|', 'Paste', '|', '|', 'Details', '|', 'SelectAll'],
+                    file: ['Open', 'Copy', '|', 'Delete', 'Download', '|', 'Details'], // Context menu options for files
+                    layout: ['SortBy', 'View', 'Refresh', '|', 'Paste', '|', '|', 'Details', '|', 'SelectAll'], // Layout menu options
                     visible: true,
                 }}
-                fileOpen={handleFileOpen}
-                success={onSuccess}
+                fileOpen={handleFileOpen} // Callback for opening a file
+                success={onSuccess} // Callback for successful data load
             >
+                {/* Inject necessary services for FileManager */}
                 <Inject services={[NavigationPane, DetailsView, FileManagerToolbar]} />
             </FileManagerComponent>
         </DialogComponent>
diff --git a/Client-side/src/index.css b/Client-side/src/index.css
@@ -21,11 +21,13 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* Code elements font - uses monospaced fonts for code readability */
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
 
+/* Header styling for the document editor section */
 #document-header {
   height: 40px;
   padding: 8px;
@@ -40,13 +42,15 @@ code {
   align-items: center;
 }
 
+/* Centering dialog component with fixed positioning */
 #dialog-component-sample {
   max-height: max-content !important;
   top: 50% !important;
   left: 50% !important;
   transform: translate(-50%, -50%) !important;
 }
 
-#postgres-file{
+/* Fixed height for file manager container */
+#postgres-file {
   height: 800px !important;
 }

Original file line number	Diff line number	Diff line change
`@@ -21,11 +21,13 @@ body {`
`21`	`21`	`-moz-osx-font-smoothing: grayscale;`
`22`	`22`	`}`
`23`	`23`
	`24`	`+/* Code elements font - uses monospaced fonts for code readability */`
`24`	`25`	`code {`
`25`	`26`	`font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',`
`26`	`27`	`monospace;`
`27`	`28`	`}`
`28`	`29`
	`30`	`+/* Header styling for the document editor section */`
`29`	`31`	`#document-header {`
`30`	`32`	`height: 40px;`
`31`	`33`	`padding: 8px;`
`@@ -40,13 +42,15 @@ code {`
`40`	`42`	`align-items: center;`
`41`	`43`	`}`
`42`	`44`
	`45`	`+/* Centering dialog component with fixed positioning */`
`43`	`46`	`#dialog-component-sample {`
`44`	`47`	`max-height: max-content !important;`
`45`	`48`	`top: 50% !important;`
`46`	`49`	`left: 50% !important;`
`47`	`50`	`transform: translate(-50%, -50%) !important;`
`48`	`51`	`}`
`49`	`52`
`50`		`-#postgres-file{`
	`53`	`+/* Fixed height for file manager container */`
	`54`	`+#postgres-file {`
`51`	`55`	`height: 800px !important;`
`52`	`56`	`}`