feat: database search (querymx#91)

thormengkheang · Aug 3, 2023 · a16af04 · a16af04
1 parent 148c8e6
commit a16af04
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 15 deletions.
diff --git a/src/renderer/components/DatabaseTable/DatabaseSelection.tsx b/src/renderer/components/DatabaseTable/DatabaseSelection.tsx
@@ -7,6 +7,7 @@ import Modal from '../Modal';
 import ListView from '../ListView';
 import Button from '../Button';
 import { useSqlExecute } from 'renderer/contexts/SqlExecuteProvider';
+import TextField from '../TextField';
 
 interface DatabaseSelectionModalProps {
   open: boolean;
@@ -31,9 +32,16 @@ function DatabaseSelectionModal({
   const [selectedDatabase, setSelectedDatabase] = useState<string | undefined>(
     currentDatabase || undefined
   );
+  const [searchTerm, setSearchTerm] = useState<string>('');
 
   const { common } = useSqlExecute();
 
+  const filteredDatabaseList = useMemo(() => {
+    return databaseList.filter(database =>
+      database.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [databaseList, searchTerm]);
+
   const openDatabase = useCallback(
     (databaseName: string) => {
       if (databaseName !== currentDatabase && databaseName) {
@@ -59,23 +67,34 @@ function DatabaseSelectionModal({
   return (
     <Modal open={open} title="Database Selection" onClose={onClose}>
       <Modal.Body>
+        <div className={styles.searchContainer}>
+          <TextField
+            placeholder="Search for a database..."
+            value={searchTerm}
+            onChange={(value) => setSearchTerm(value)}
+          />
+        </div>
         <div
-          style={{ maxHeight: '50vh', overflowY: 'auto' }}
+          style={{ minHeight: '15vh', maxHeight: '50vh', overflowY: 'auto' }}
           className={'scroll'}
         >
-          <ListView
-            selectedItem={selectedDatabase}
-            onSelectChange={(item) => setSelectedDatabase(item)}
-            items={databaseList}
-            onDoubleClick={(item) => {
-              openDatabase(item);
-            }}
-            extractMeta={(database) => ({
-              text: database,
-              key: database,
-              icon: <FontAwesomeIcon icon={faDatabase} />,
-            })}
-          />
+          {filteredDatabaseList.length === 0 ? (
+            <p className={styles.noResultsText}>No matching databases found.</p>
+          ) : (
+            <ListView
+              selectedItem={selectedDatabase}
+              onSelectChange={(item) => setSelectedDatabase(item)}
+              items={filteredDatabaseList}
+              onDoubleClick={(item) => {
+                openDatabase(item);
+              }}
+              extractMeta={(database) => ({
+                text: database,
+                key: database,
+                icon: <FontAwesomeIcon icon={faDatabase} />,
+              })}
+            />
+          )}
         </div>
       </Modal.Body>
       <Modal.Footer>

diff --git a/src/renderer/components/DatabaseTable/styles.module.scss b/src/renderer/components/DatabaseTable/styles.module.scss
@@ -46,3 +46,12 @@
   border-radius: 50%;
   animation: ping 1s ease-out infinite;
 }
+
+.searchContainer {
+  margin-bottom: 10px;
+}
+
+.noResultsText {
+  margin: 10px 10px 0;
+  opacity: 0.75;
+}
diff --git a/src/renderer/components/TextField/index.tsx b/src/renderer/components/TextField/index.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
 import styles from './styles.module.scss';
 
 interface TextFieldProps {
-  label: string;
+  label?: string;
   value?: string;
   autoFocus?: boolean;
   placeholder?: string;