Skip to content

Commit

Permalink
feature : search
Browse files Browse the repository at this point in the history
  • Loading branch information
Safouene1 committed May 7, 2024
1 parent 6351b7a commit f9cefe1
Show file tree
Hide file tree
Showing 11 changed files with 182 additions and 32 deletions.
1 change: 1 addition & 0 deletions .env
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
VITE_BACKEND_PORT=9000
VITE_API_TIMEOUT=5000
VITE_APP_VERSION=0.0.1
1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<title>Sveltos Dashboard</title>
</head>
<body class="min-h-screen">
<div data-tf-live="01HX9Q850M9T9MMPQW2GDCN5SK"></div><script src="//embed.typeform.com/next/embed.js"></script>
<noscript> To use SveltosUI, please enable JavaScript. </noscript>
<div id="root" class="relative flex min-h-screen flex-col"></div>
<script type="module" src="/src/main.tsx"></script>
Expand Down
66 changes: 63 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-separator": "^1.0.3",
Expand All @@ -41,7 +42,8 @@
"react-wrap-balancer": "^1.1.0",
"sonner": "^1.4.41",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7"
"tailwindcss-animate": "^1.0.7",
"zustand": "^4.5.2"
},
"devDependencies": {
"@eslint/eslintrc": "^3.0.2",
Expand Down
9 changes: 8 additions & 1 deletion src/components/layouts/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,24 @@ import {
AccordionTrigger,
} from "@/components/ui/accordion";
import { ModeToggle } from "@/components/mode-toggle";
import { Badge } from "@/components/ui/badge";

export function Header() {
const [open, setOpen] = useState(false);
const location = useLocation();

const version = import.meta.env.VITE_APP_VERSION;
const isPublicPreview = version.split(".")[0] === "0";
return (
<header className="supports-backdrop-blur:bg-background/60 sticky top-0 z-50 w-full border-b bg-background/90 backdrop-blur">
<div className="container px-4 md:px-8 flex h-14 items-center">
<div className="mr-4 hidden md:flex">
<NavLink to="/" className="mr-6 flex items-center space-x-2">
<Logo />
{version && (
<Badge variant="secondary" className="text-xs text-muted-foreground">
{isPublicPreview ? "Public preview" : version}
</Badge>
)}
</NavLink>
<nav className="flex items-center space-x-6 text-sm font-medium">
{mainMenu.map((menu, index) =>
Expand Down
7 changes: 5 additions & 2 deletions src/components/ui/PageHeading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const PageHeading = ({ title, description }: PageHeadingProps) => {
return (
<>
<div className="hidden space-y-8 p-8 flex-col md:flex">
<div className="flex items-center justify-between=">
<div className="flex items-center justify-between">
<div>
<h2 className="text-2xl font-bold tracking-tight">{title}</h2>
<p className="text-muted-foreground w-2/3">
Expand All @@ -21,7 +21,10 @@ export const PageHeading = ({ title, description }: PageHeadingProps) => {
.
</p>
</div>
<CardsFilterToolbar />
<div className="justify-end">
<CardsFilterToolbar />
</div>

</div>
</div>
</>
Expand Down
24 changes: 24 additions & 0 deletions src/components/ui/label.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className,"mx-1")}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,26 @@ export const CardsFilterToolbar = () => {
const [isFiltered, setIsFiltered] = useState(false);
return (
<>
<div className="flex items-center space-x-2">
<div className="flex items-center justify-between">
<div className="flex space-x-2">
<div className="flex items-center ">
<div className="flex flex-1 items-center space-x-2">
<Input
placeholder="Filter... "
className="h-8 w-[150px] lg:w-[250px]"
/>

<CardsFacetedFilter
title={"Labels"}
options={[
{ label: "Active", value: "active" },
{ label: "Inactive", value: "inactive" },
]}
/>
<CardsFacetedFilter
title={"Status"}
options={[
{ label: "All", value: "all" },
{ label: "Active", value: "active" },
{ label: "Inactive", value: "inactive" },
]}
/>
<RefreshButton className={"w-26 h-8"} />
{/*<CardsFacetedFilter*/}
{/* title={"Labels"}*/}
{/* options={[*/}
{/* { label: "Active", value: "active" },*/}
{/* { label: "Inactive", value: "inactive" },*/}
{/* ]}*/}
{/*/>*/}
{/*<CardsFacetedFilter*/}
{/* title={"Status"}*/}
{/* options={[*/}
{/* { label: "All", value: "all" },*/}
{/* { label: "Active", value: "active" },*/}
{/* { label: "Inactive", value: "inactive" },*/}
{/* ]}*/}
{/*/>*/}
<RefreshButton className={"w-26 h-8 "} />
{isFiltered && (
<Button variant="ghost" className="h-8 px-2 lg:px-3">
Reset
Expand Down
6 changes: 4 additions & 2 deletions src/modules/clusters/clusters-list/components/ClusterCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,10 @@ export const ClusterCard = ({
</Tooltip>
</span>
</p>
<p className="text-sm text-muted-foreground">
Namespace: <span className="text-main-500">{namespace}</span>
<p
className="text-sm text-muted-foreground py-1"
>
Namespace: <span className="text-main-500 ">{namespace}</span>
</p>
</div>
<Tooltip>
Expand Down
25 changes: 24 additions & 1 deletion src/modules/clusters/clusters-list/components/ClusterList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,10 @@ import { ClusterListResponse } from "@/types/cluster";
import { EmptyData } from "@/components/ui/emptyData";
import { usePagination } from "@/hooks/usePagination";
import { FC } from "react";

import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { Label } from "@/components/ui/label"
import { ALargeSmall, Blocks, Tags } from "lucide-react";
type ClusterListProps = {
data: ClusterListResponse;
page: number;
Expand All @@ -24,6 +27,26 @@ export const ClusterList: FC<ClusterListProps> = ({
}
return (
<>


<div className="flex h-5 items-center justify-end space-x-4 text-sm">
<div className="search">
<Label className={"flex items-center text-sm"} htmlFor="terms"><ALargeSmall className={"mx-1 w-4 h-4"}/> Name</Label>
<Input placeholder="Search by name... " className="h-8 w-[150px] lg:w-[250px]" />
</div>
<Separator orientation="vertical" />
<div className="search">
<Label className={"flex items-center text-sm"} htmlFor="terms"><Blocks className={"mx-1 w-4 "}/> Namespace</Label>
<Input placeholder="Search by namespace... " className="h-8 w-[150px] lg:w-[250px]" />
</div>

<Separator orientation="vertical" />
<div className="search">
<Label className={"flex items-center text-sm"} htmlFor="terms"><Tags className={"mx-1 w-4 h-4"}/>Labels</Label>
<Input placeholder="Search by labels... " className="h-8 w-[150px] lg:w-[250px]" />
</div>

</div>
<div className="mt-5">
<div className="min-h-[400px] flex flex-col ">
<div className="flex flex-wrap mb-4 py-4">
Expand Down
31 changes: 31 additions & 0 deletions src/modules/clusters/clusters-list/store/ClustersListStore.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { create } from "zustand";

type ClustersListStore = {
name: string;
namespace: string;
labels: { key: string; value: string }[];
setNamespace: (namespace: string) => void;
setName: (name: string) => void;
addLabel: (key: string, value: string) => void;
removeLabel: (key: string) => void;
clearLabels: () => void;
clear: () => void;
};

const useClusterListStore = create<ClustersListStore>()((set) => ({
name: "",
namespace: "",
labels: [],
setNamespace: (namespace) => set({ namespace }),
setName: (name) => set({ name }),
addLabel: (key, value) =>
set((state) => ({
labels: [...state.labels, { key, value }],
})),
removeLabel: (key) =>
set((state) => ({
labels: state.labels.filter((label) => label.key !== key),
})),
clearLabels: () => set({ labels: [] }),
clear: () => set({ name: "", namespace: "", labels: [] }),
}));

0 comments on commit f9cefe1

Please sign in to comment.