cerc-io/snowballtools-base-old
16
0
Fork 0
mirror of https://github.com/snowball-tools/snowballtools-base synced 2024-11-18 12:36:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement filtering deployments on search (#13)

Browse Source
This commit is contained in:
Nabarun Gogoi 2023-12-20 14:08:34 +05:30 committed by GitHub
parent d04517d9bb
commit 237bd01159
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/frontend/src/components/SearchBar.tsx
View File

@ -3,7 +3,7 @@ import React, { ChangeEventHandler, forwardRef } from 'react';
import { Input } from '@material-tailwind/react';
interface SearchBarProps {
onChange: ChangeEventHandler<HTMLInputElement>;
onChange?: ChangeEventHandler<HTMLInputElement>;
value?: string;
placeholder?: string;
}
@ -15,7 +15,6 @@ const SearchBar: React.ForwardRefRenderFunction<
return (
<div className="relative flex w-full gap-2">
<Input
variant="standard"
onChange={onChange}
value={value}
type="search"
@ -23,7 +22,7 @@ const SearchBar: React.ForwardRefRenderFunction<
containerProps={{
className: 'min-w-[288px]',
}}
className="pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"
className="!border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"
labelProps={{
className: 'before:content-none after:content-none',
}}

51
packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx
View File

@ -1,8 +1,11 @@
import React from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import deploymentDetails from '../../../assets/deployments.json';
import { Button } from '@material-tailwind/react';
import deploymentData from '../../../assets/deployments.json';
import DeployDetailsCard from './DeploymentDetailsCard';
import Dropdown from '../../Dropdown';
import SearchBar from '../../SearchBar';
const STATUS_OPTIONS = [
{ value: 'building', label: 'Building' },
@ -11,14 +14,30 @@ const STATUS_OPTIONS = [
];
const DeploymentsTabPanel = () => {
const [searchedBranch, setSearchedBranch] = useState('');
const filteredDeployments = useMemo(() => {
if (searchedBranch) {
return deploymentData.filter((deployment) =>
deployment.branch.toLowerCase().includes(searchedBranch.toLowerCase()),
);
}
return deploymentData;
}, [searchedBranch]);
const handleResetFilters = useCallback(() => {
setSearchedBranch('');
}, []);
return (
<div className="p-4">
<div className="grid grid-cols-4 gap-2 text-sm text-gray-600">
<div className="col-span-2">
<input
type="text"
className="border border-gray-300 rounded p-2 w-full focus:border-blue-300 focus:outline-none focus:shadow-outline-blue"
<SearchBar
placeholder="Search branches"
value={searchedBranch}
onChange={(event) => setSearchedBranch(event.target.value)}
/>
</div>
<div className="col-span-1">
@ -37,9 +56,25 @@ const DeploymentsTabPanel = () => {
</div>
</div>
<div className="mt-2">
{deploymentDetails.map((deployment, key) => {
return <DeployDetailsCard deployment={deployment} key={key} />;
})}
{Boolean(filteredDeployments.length) ? (
filteredDeployments.map((deployment, key) => {
return <DeployDetailsCard deployment={deployment} key={key} />;
})
) : (
<div className="h-[50vh] bg-gray-100 flex rounded items-center justify-center">
<div className="text-center">
<h5 className="text-lg font-bold">No deployments found</h5>
<p>Please change your search query or filters</p>
<Button
className="rounded-full mt-5"
color="white"
onClick={handleResetFilters}
>
^ Reset filters
</Button>
</div>
</div>
)}
</div>
</div>
);