Skip to content

Commit

Permalink
filters fe revamp
Browse files Browse the repository at this point in the history
  • Loading branch information
@chitalian
chitalian committed Oct 4, 2024
1 parent af44528 commit 539719e
Show file tree
Hide file tree
Showing 11 changed files with 679 additions and 219 deletions.
28 changes: 15 additions & 13 deletions web/components/shared/themed/FilterTreeEditor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { PlusIcon } from "@heroicons/react/24/outline";
import { Button } from "@tremor/react";

import { Result } from "../../../lib/result";
import { SingleFilterDef } from "../../../services/lib/filters/frontendFilterDefs";
import { AdvancedFilterRow, UIFilterRow } from "./themedAdvancedFilters";
Expand All @@ -10,6 +10,7 @@ import {
} from "../../../services/lib/filters/uiFilterRowTree";
import SaveFilterButton from "../../templates/dashboard/saveFilterButton";
import { OrganizationFilter } from "../../../services/lib/organization_layout/organization_layout";
import { Button } from "@/components/ui/button";

interface FilterTreeEditorProps {
uiFilterRowTree: UIFilterRowTree;
Expand Down Expand Up @@ -134,39 +135,40 @@ const FilterTreeEditor: React.FC<FilterTreeEditorProps> = ({
<>
{node.rows.length > 1 && (
<div
className={`flex items-center mb-4 ${
className={`flex items-center mb-1 ${
path.length === 1 && "ml-4"
}`}
>
<Button
onClick={() => handleOperatorToggle(node)}
variant="secondary"
size="xs"
className="mr-2 uppercase bg-[#E5F3F9] border-[#6BB9EF]"
variant="outline"
size="sm_sleek"
>
{node.operator}
</Button>
</div>
)}
{node.rows.map((childNode: UIFilterRowTree, childIndex: number) => (
<div key={childIndex} className="mb-2">
<div key={childIndex} className="mb-1">
{renderNode(childNode, [...path, childIndex], false)}
</div>
))}
{isRoot && (
<div className="flex flex-row w-full items-center justify-between my-4">
<button
<div className="flex flex-row w-full items-center justify-between mt-2">
<Button
variant={"default"}
size="md_sleek"
onClick={() => handleAddFilter(node)}
className="bg-gray-100 dark:bg-[#17191d] border border-gray-300 dark:border-gray-700 rounded-lg px-2.5 py-1.5 hover:bg-sky-50 dark:hover:bg-sky-900 flex flex-row items-center gap-2"
>
<PlusIcon
className="mr-1 h-3.5 flex-none text-black dark:text-white hover:bg-sky-100 hover:text-sky-900 dark:hover:bg-sky-900 dark:hover:text-sky-100"
aria-hidden="true"
/>
<p className="text-sm font-medium text-gray-900 dark:text-gray-100 hidden sm:block">
<p className="font-medium text-gray-900 dark:text-gray-100 hidden sm:block">
Add Filter
</p>
</button>
</Button>
{onSaveFilterCallback && (
<SaveFilterButton
filters={filters}
Expand All @@ -184,7 +186,7 @@ const FilterTreeEditor: React.FC<FilterTreeEditorProps> = ({
return isRoot ? (
<div className="mb-4">{content}</div>
) : (
<div className="mb-4 flex flex-col bg-gray-100 dark:bg-black py-4 rounded-lg border border-gray-300 dark:border-gray-700">
<div className="mb-1 flex flex-col dark:bg-black py-4 ml-4 border border-gray-300 dark:border-gray-700 rounded-sm">
{content}
</div>
);
Expand Down Expand Up @@ -230,7 +232,7 @@ const FilterTreeEditor: React.FC<FilterTreeEditorProps> = ({
);

return path.length === 1 ? (
<div className="flex flex-col bg-gray-100 dark:bg-[#17191d] py-4 rounded-lg border border-gray-300 dark:border-gray-700 ">
<div className="flex flex-col dark:bg-[#17191d] py-1 rounded-sm">
{filterRow}
</div>
) : (
Expand Down Expand Up @@ -267,7 +269,7 @@ const FilterTreeEditor: React.FC<FilterTreeEditorProps> = ({
};

return (
<div className="-mb-4 mt-4">{renderNode(uiFilterRowTree, [], true)}</div>
<div className="-mb-4 text-xs">{renderNode(uiFilterRowTree, [], true)}</div>
);
};

Expand Down
118 changes: 96 additions & 22 deletions web/components/shared/themed/table/themedTableHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { CircleStackIcon, FunnelIcon } from "@heroicons/react/24/outline";
import { Column } from "@tanstack/react-table";
import { useEffect, useState } from "react";
import { useEffect, useState, useRef } from "react";
import { Result } from "../../../../lib/result";
import { TimeInterval } from "../../../../lib/timeCalculations/time";
import { SingleFilterDef } from "../../../../services/lib/filters/frontendFilterDefs";
Expand All @@ -17,6 +17,12 @@ import FiltersButton from "./filtersButton";
import { DragColumnItem } from "./columns/DragList";
import { UIFilterRowTree } from "../../../../services/lib/filters/uiFilterRowTree";
import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { PinIcon } from "lucide-react";

interface ThemedTableHeaderProps<T> {
rows?: T[];
Expand Down Expand Up @@ -78,6 +84,11 @@ export default function ThemedTableHeader<T>(props: ThemedTableHeaderProps<T>) {

const [showFilters, setShowFilters] = useState(false);

// Add state variables to manage the popover's open state and pin status
const [isFiltersPopoverOpen, setIsFiltersPopoverOpen] = useState(false);
const [isFiltersPinned, setIsFiltersPinned] = useState(false);
const popoverContentRef = useRef<HTMLDivElement>(null);

useEffect(() => {
const displayFilters = window.sessionStorage.getItem("showFilters") || null;
setShowFilters(displayFilters ? JSON.parse(displayFilters) : false);
Expand All @@ -98,6 +109,10 @@ export default function ThemedTableHeader<T>(props: ThemedTableHeaderProps<T>) {
}
};

const handlePopoverInteraction = (e: React.MouseEvent) => {
e.stopPropagation();
};

return (
<div className="flex flex-col">
<div className="flex flex-col gap-3 lg:flex-row justify-between ">
Expand All @@ -118,17 +133,65 @@ export default function ThemedTableHeader<T>(props: ThemedTableHeaderProps<T>) {
)}
<div className="flex flex-row">
{advancedFilters && (
<Button
onClick={showFilterHandler}
variant="ghostLinear"
className="gap-2"
size="sm_sleek"
>
<FunnelIcon className="h-[13px] w-[13px] " />
<span className="hidden sm:inline font-normal text-[13px]">
{showFilters ? "Hide" : ""} Filters
</span>
</Button>
<Popover open={isFiltersPopoverOpen} onOpenChange={() => {}}>
<PopoverTrigger asChild>
<Button
variant="ghostLinear"
className="gap-2"
size="sm_sleek"
onClick={() => {
if (isFiltersPinned) {
setShowFilters(!showFilters);
} else {
setIsFiltersPopoverOpen(!isFiltersPopoverOpen);
}
}}
>
<FunnelIcon className="h-[13px] w-[13px]" />
<span className="hidden sm:inline font-normal text-[13px]">
{isFiltersPinned
? showFilters
? "Hide Filters"
: "Show Filters"
: "Filters"}
</span>
</Button>
</PopoverTrigger>
<PopoverContent
className="min-w-[50rem] w-[50vw] flex items-start"
ref={popoverContentRef}
onInteractOutside={(e) => {}}
onClick={handlePopoverInteraction}
>
<AdvancedFilters
filterMap={advancedFilters.filterMap}
filters={advancedFilters.filters}
setAdvancedFilters={advancedFilters.setAdvancedFilters}
searchPropertyFilters={
advancedFilters.searchPropertyFilters
}
savedFilters={savedFilters?.filters}
onSaveFilterCallback={savedFilters?.onSaveFilterCallback}
layoutPage={savedFilters?.layoutPage ?? "requests"}
/>
<div className="flex justify-end">
<Button
variant="ghostLinear"
onClick={() => {
setIsFiltersPinned(!isFiltersPinned);
setIsFiltersPopoverOpen(false);
}}
className="text-gray-500 hover:text-gray-700"
>
{isFiltersPinned ? (
<PinIcon className="h-5 w-5 text-primary" />
) : (
<PinIcon className="h-5 w-5 text-muted-foreground" />
)}
</Button>
</div>
</PopoverContent>
</Popover>
)}

{savedFilters && (
Expand Down Expand Up @@ -186,16 +249,27 @@ export default function ThemedTableHeader<T>(props: ThemedTableHeaderProps<T>) {
</div>
</div>

{advancedFilters && showFilters && (
<AdvancedFilters
filterMap={advancedFilters.filterMap}
filters={advancedFilters.filters}
setAdvancedFilters={advancedFilters.setAdvancedFilters}
searchPropertyFilters={advancedFilters.searchPropertyFilters}
savedFilters={savedFilters?.filters}
onSaveFilterCallback={savedFilters?.onSaveFilterCallback}
layoutPage={savedFilters?.layoutPage ?? "requests"}
/>
{advancedFilters && showFilters && isFiltersPinned && (
<div className="flex justify-start min-w-[50rem] w-full">
<div>
<AdvancedFilters
filterMap={advancedFilters.filterMap}
filters={advancedFilters.filters}
setAdvancedFilters={advancedFilters.setAdvancedFilters}
searchPropertyFilters={advancedFilters.searchPropertyFilters}
savedFilters={savedFilters?.filters}
onSaveFilterCallback={savedFilters?.onSaveFilterCallback}
layoutPage={savedFilters?.layoutPage ?? "requests"}
/>
</div>
<Button
variant="ghost"
onClick={() => setIsFiltersPinned(false)}
className="text-gray-500 hover:text-gray-700"
>
<PinIcon className="h-5 w-5 text-primary rotate-45 fill-gray-500" />
</Button>
</div>
)}
</div>
);
Expand Down
Loading

0 comments on commit 539719e

Please sign in to comment.