LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 16:43:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

added search funtionality

Browse Source
This commit is contained in:
AkashJana18
2024-10-17 00:40:44 +05:30
parent 3e20934e20
commit f7063d03f1
2 changed files with 54 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/settings/APIKeys.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import userService from '../api/services/userService';
@@ -10,10 +10,12 @@ import Input from '../components/Input';
export default function APIKeys() {
const { t } = useTranslation();
const [isCreateModalOpen, setCreateModal] = React.useState(false);
const [isSaveKeyModalOpen, setSaveKeyModal] = React.useState(false);
const [newKey, setNewKey] = React.useState('');
const [apiKeys, setApiKeys] = React.useState<APIKeyData[]>([]);
const [isCreateModalOpen, setCreateModal] = useState(false);
const [isSaveKeyModalOpen, setSaveKeyModal] = useState(false);
const [newKey, setNewKey] = useState('');
const [apiKeys, setApiKeys] = useState<APIKeyData[]>([]);
const [searchTerm, setSearchTerm] = useState(''); // Added state for search term
const [filteredKeys, setFilteredKeys] = useState<APIKeyData[]>([]); // State for filtered API keys
const handleFetchKeys = async () => {
try {
@@ -23,6 +25,7 @@ export default function APIKeys() {
}
const apiKeys = await response.json();
setApiKeys(apiKeys);
setFilteredKeys(apiKeys); // Initialize the filtered keys as the fetched ones
} catch (error) {
console.log(error);
}
@@ -38,8 +41,12 @@ export default function APIKeys() {
return response.json();
})
.then((data) => {
data.status === 'ok' &&
if (data.status === 'ok') {
setApiKeys((previous) => previous.filter((elem) => elem.id !== id));
setFilteredKeys((previous) =>
previous.filter((elem) => elem.id !== id),
);
}
})
.catch((error) => {
console.error(error);
@@ -63,6 +70,7 @@ export default function APIKeys() {
})
.then((data) => {
setApiKeys([...apiKeys, data]);
setFilteredKeys([...apiKeys, data]); // Update filtered keys too
setCreateModal(false);
setNewKey(data.key);
setSaveKeyModal(true);
@@ -73,9 +81,22 @@ export default function APIKeys() {
});
};
React.useEffect(() => {
useEffect(() => {
handleFetchKeys();
}, []);
// Filter API keys when the search term changes
useEffect(() => {
setFilteredKeys(
apiKeys.filter(
(key) =>
key.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
key.source?.toLowerCase().includes(searchTerm.toLowerCase()) ||
key.key.toLowerCase().includes(searchTerm.toLowerCase()),
),
);
}, [searchTerm, apiKeys]);
return (
<div className="mt-8">
<div className="flex flex-col max-w-[876px]">
@@ -84,9 +105,11 @@ export default function APIKeys() {
<Input
maxLength={256}
placeholder="Search..."
name="Document-search-input"
name="APIkey-search-input"
type="text"
id="document-search-input"
id="apikey-search-input"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} // Update search term
/>
</div>
<button
@@ -120,14 +143,14 @@ export default function APIKeys() {
</tr>
</thead>
<tbody>
{!apiKeys?.length && (
{!filteredKeys.length && (
<tr>
<td colSpan={4} className="!p-4">
{t('settings.apiKeys.noData')}
</td>
</tr>
)}
{apiKeys?.map((element, index) => (
{filteredKeys.map((element, index) => (
<tr key={index}>
<td>{element.name}</td>
<td>{element.source}</td>

26
frontend/src/settings/Documents.tsx
View File

@@ -1,3 +1,4 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
@@ -34,6 +35,10 @@ const Documents: React.FC<DocumentsProps> = ({
}) => {
const { t } = useTranslation();
const dispatch = useDispatch();
// State for search input
const [searchTerm, setSearchTerm] = useState('');
const syncOptions = [
{ label: 'Never', value: 'never' },
{ label: 'Daily', value: 'daily' },
@@ -52,6 +57,12 @@ const Documents: React.FC<DocumentsProps> = ({
})
.catch((error) => console.error(error));
};
// 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">
@@ -64,9 +75,11 @@ const Documents: React.FC<DocumentsProps> = ({
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]">
<button className="rounded-full w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]">
Add New
</button>
</div>
@@ -81,15 +94,15 @@ const Documents: React.FC<DocumentsProps> = ({
</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>
@@ -105,8 +118,7 @@ const Documents: React.FC<DocumentsProps> = ({
<img
src={Trash}
alt="Delete"
className="h-4 w-4 cursor-pointer opacity-60
hover:opacity-100"
className="h-4 w-4 cursor-pointer opacity-60 hover:opacity-100"
id={`img-${index}`}
onClick={(event) => {
event.stopPropagation();
@@ -138,8 +150,10 @@ const Documents: React.FC<DocumentsProps> = ({
</div>
);
};
Documents.propTypes = {
documents: PropTypes.array.isRequired,
handleDeleteDocument: PropTypes.func.isRequired,
};
export default Documents;