Merge pull request #1300 from AkashJana18/table-redsign

Feature: Table redesign
arc53 · Oct 23, 2024 · 13c890b · 13c890b
2 parents 741ab6e + d18cb37
commit 13c890b
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 12 deletions.
diff --git a/frontend/src/assets/caret-sort.svg b/frontend/src/assets/caret-sort.svg
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -53,22 +53,24 @@ body.dark {
   }
 
   .table-default th {
-    @apply border-r border-silver dark:border-silver/40 p-4 w-[244px];
+    @apply p-4 w-[244px] font-normal text-gray-400; /* Remove border-r */
   }
 
   .table-default th:last-child {
-    @apply w-[auto] border-r-0;
+    @apply w-[auto];
   }
 
   .table-default td {
-    @apply border-r border-t border-silver dark:border-silver/40 px-4 py-2;
+    @apply border-t border-silver dark:border-silver/40 px-4 py-2; /* Remove border-r */
   }
 
   .table-default td:last-child {
-    @apply border-r-0;
+    @apply border-r-0; /* Ensure no right border on the last column */
   }
+
 }
 
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document

diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
@@ -6,11 +6,14 @@ import { useDispatch } from 'react-redux';
 import userService from '../api/services/userService';
 import SyncIcon from '../assets/sync.svg';
 import Trash from '../assets/trash.svg';
+import caretSort from '../assets/caret-sort.svg';
 import DropdownMenu from '../components/DropdownMenu';
+import { Doc, DocumentsProps, ActiveState } from '../models/misc'; // Ensure ActiveState type is imported
 import SkeletonLoader from '../components/SkeletonLoader';
-import { Doc, DocumentsProps } from '../models/misc';
 import { getDocs } from '../preferences/preferenceApi';
 import { setSourceDocs } from '../preferences/preferenceSlice';
+import Input from '../components/Input';
+import Upload from '../upload/Upload'; // Import the Upload component
 
 // Utility function to format numbers
 const formatTokens = (tokens: number): string => {
@@ -35,7 +38,14 @@ const Documents: React.FC<DocumentsProps> = ({
 }) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
+
+  // State for search input
+  const [searchTerm, setSearchTerm] = useState('');
+  // State for modal: active/inactive
+  const [modalState, setModalState] = useState<ActiveState>('INACTIVE'); // Initialize with inactive state
+  const [isOnboarding, setIsOnboarding] = useState(false); // State for onboarding flag
   const [loading, setLoading] = useState(false);
+
   const syncOptions = [
     { label: 'Never', value: 'never' },
     { label: 'Daily', value: 'daily' },
@@ -59,33 +69,75 @@ const Documents: React.FC<DocumentsProps> = ({
       });
   };
 
+  // Filter documents based on the search term
+  const filteredDocuments = documents?.filter((document) =>
+    document.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
   return (
     <div className="mt-8">
       <div className="flex flex-col relative">
         <div className="z-10 w-full overflow-x-auto">
+          <div className="my-3 flex justify-between items-center">
+            <div className="p-1">
+              <Input
+                maxLength={256}
+                placeholder="Search..."
+                name="Document-search-input"
+                type="text"
+                id="document-search-input"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)} // Handle search input change
+              />
+            </div>
+            <button
+              className="rounded-full w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
+              onClick={() => {
+                setIsOnboarding(false); // Set onboarding flag if needed
+                setModalState('ACTIVE'); // Open the upload modal
+              }}
+            >
+              Add New
+            </button>
+          </div>
           {loading ? (
             <SkeletonLoader count={1} />
           ) : (
             <table className="table-default">
               <thead>
                 <tr>
                   <th>{t('settings.documents.name')}</th>
-                  <th>{t('settings.documents.date')}</th>
-                  <th>{t('settings.documents.tokenUsage')}</th>
-                  <th>{t('settings.documents.type')}</th>
+                  <th>
+                    <div className="flex justify-center items-center">
+                      {t('settings.documents.date')}
+                      <img src={caretSort} alt="" />
+                    </div>
+                  </th>
+                  <th>
+                    <div className="flex justify-center items-center">
+                      {t('settings.documents.tokenUsage')}
+                      <img src={caretSort} alt="" />
+                    </div>
+                  </th>
+                  <th>
+                    <div className="flex justify-center items-center">
+                      {t('settings.documents.type')}
+                      <img src={caretSort} alt="" />
+                    </div>
+                  </th>
                   <th></th>
                 </tr>
               </thead>
               <tbody>
-                {!documents?.length && (
+                {!filteredDocuments?.length && (
                   <tr>
                     <td colSpan={5} className="!p-4">
                       {t('settings.documents.noData')}
                     </td>
                   </tr>
                 )}
-                {documents &&
-                  documents.map((document, index) => (
+                {filteredDocuments &&
+                  filteredDocuments.map((document, index) => (
                     <tr key={index}>
                       <td>{document.name}</td>
                       <td>{document.date}</td>
@@ -101,7 +153,7 @@ const Documents: React.FC<DocumentsProps> = ({
                             <img
                               src={Trash}
                               alt="Delete"
-                              className="h-4 w-4 cursor-pointer hover:opacity-50"
+                              className="h-4 w-4 cursor-pointer opacity-60 hover:opacity-100"
                               id={`img-${index}`}
                               onClick={(event) => {
                                 event.stopPropagation();
@@ -130,6 +182,19 @@ const Documents: React.FC<DocumentsProps> = ({
             </table>
           )}
         </div>
+        {/* Conditionally render the Upload modal based on modalState */}
+        {modalState === 'ACTIVE' && (
+          <div className="fixed top-0 left-0 w-screen h-screen z-50 flex items-center justify-center bg-transparent">
+            <div className="w-full h-full bg-transparent flex flex-col items-center justify-center p-8">
+              {/* Your Upload component */}
+              <Upload
+                modalState={modalState}
+                setModalState={setModalState}
+                isOnboarding={isOnboarding}
+              />
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );