Skip to content

Commit

Permalink
add new date search filter (#3065)
Browse files Browse the repository at this point in the history
* add new complicated filters

* clarity updates

* update date range filter
  • Loading branch information
pablodanswer authored Nov 19, 2024
1 parent e69303e commit 9b7cc83
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 13 deletions.
101 changes: 89 additions & 12 deletions web/src/components/search/filtering/Filters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ import { FilterDropdown } from "./FilterDropdown";
import { listSourceMetadata } from "@/lib/sources";
import { SourceIcon } from "@/components/SourceIcon";
import { TagFilter } from "./TagFilter";
import { Calendar } from "@/components/ui/calendar";
import { Popover, PopoverTrigger } from "@/components/ui/popover";
import { PopoverContent } from "@radix-ui/react-popover";
import { CalendarIcon } from "lucide-react";
import { buildDateString, getTimeAgoString } from "@/lib/dateUtils";

const SectionTitle = ({ children }: { children: string }) => (
<div className="font-bold text-xs mt-2 flex">{children}</div>
Expand Down Expand Up @@ -106,10 +111,39 @@ export function SourceSelector({
<FiFilter className="my-auto ml-2" size="16" />
</div>

<SectionTitle>Time Range</SectionTitle>
<div className="mt-2">
<DateRangeSelector value={timeRange} onValueChange={setTimeRange} />
</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer">
<SectionTitle>Time Range</SectionTitle>
<p className="text-sm text-default mt-2">
{getTimeAgoString(timeRange?.from!) || "Select a time range"}
</p>
</div>
</PopoverTrigger>
<PopoverContent
className="bg-background border-border border rounded-md z-[200] p-0"
align="start"
>
<Calendar
mode="range"
selected={
timeRange
? { from: new Date(timeRange.from), to: new Date(timeRange.to) }
: undefined
}
onSelect={(daterange) => {
const initialDate = daterange?.from || new Date();
const endDate = daterange?.to || new Date();
setTimeRange({
from: initialDate,
to: endDate,
selectValue: timeRange?.selectValue || "",
});
}}
className="rounded-md "
/>
</PopoverContent>
</Popover>

{availableTags.length > 0 && (
<>
Expand Down Expand Up @@ -424,14 +458,57 @@ export function HorizontalSourceSelector({

return (
<div className="flex flex-nowrap space-x-2">
<div className="max-w-24">
<DateRangeSelector
isHorizontal
value={timeRange}
onValueChange={setTimeRange}
className="bg-background-search-filter"
/>
</div>
<Popover>
<PopoverTrigger asChild>
<div
className={`
border
max-w-36
border-border
rounded-lg
bg-background
max-h-96
overflow-y-scroll
overscroll-contain
px-3
text-sm
py-1.5
select-none
cursor-pointer
w-fit
gap-x-1
hover:bg-hover
bg-hover-light
flex
items-center
bg-background-search-filter
`}
>
<CalendarIcon className="h-4 w-4" />

{timeRange?.from ? getTimeAgoString(timeRange.from) : "Since"}
</div>
</PopoverTrigger>
<PopoverContent
className="bg-background border-border border rounded-md z-[200] p-0"
align="start"
>
<Calendar
mode="single"
selected={timeRange ? new Date(timeRange.from) : undefined}
onSelect={(date) => {
const selectedDate = date || new Date();
const today = new Date();
setTimeRange({
from: selectedDate > today ? today : selectedDate,
to: today,
selectValue: timeRange?.selectValue || "",
});
}}
className="rounded-md "
/>
</PopoverContent>
</Popover>

{existingSources.length > 0 && (
<FilterDropdown
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/ui/calendar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function Calendar({
buttonVariants({ variant: "ghost" }),
"h-9 w-9 p-0 font-normal aria-selected:opacity-100"
),
day_range_end: "day-range-end",
day_range_end: "day-range-end !text-neutral-200",
day_selected:
"bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
day_today:
Expand Down
24 changes: 24 additions & 0 deletions web/src/lib/dateUtils.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { DateRangePickerValue } from "@/app/ee/admin/performance/DateRangeSelector";

export function getXDaysAgo(daysAgo: number) {
const today = new Date();
const daysAgoDate = new Date(today);
Expand Down Expand Up @@ -46,3 +48,25 @@ export const timestampToReadableDate = (timestamp: string) => {
date.toLocaleTimeString(undefined, timeOptions)
);
};

export const buildDateString = (date: Date | null) => {
return date
? `${Math.round(
(new Date().getTime() - date.getTime()) / (1000 * 60 * 60 * 24)
)} days ago`
: "Select a time range";
};
export const getTimeAgoString = (date: Date | null) => {
if (!date) return null;

const diffMs = new Date().getTime() - date.getTime();
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
const diffWeeks = Math.floor(diffDays / 7);
const diffMonths = Math.floor(diffDays / 30);

if (buildDateString(date).includes("Today")) return "Today";
if (diffDays === 1) return "Yesterday";
if (diffDays < 7) return `${diffDays}d ago`;
if (diffDays < 30) return `${diffWeeks}w ago`;
return `${diffMonths}mo ago`;
};

0 comments on commit 9b7cc83

Please sign in to comment.