Skip to content

Commit 040b103

Browse files
densumeshskeptrunedev
densumesh
authored and
skeptrunedev
committed
feature: date range filters
1 parent daa5b15 commit 040b103

File tree

5 files changed

+204
-60
lines changed

5 files changed

+204
-60
lines changed

‎search/src/components/EditChunkPageForm.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export const EditChunkPageForm = (props: SingleChunkPageProps) => {
9090
setTopLevelError("This chunk could not be found.");
9191
}
9292

93-
const updateEvidence = () => {
93+
const updateChunk = () => {
9494
const currentDataset = $dataset?.();
9595
if (!currentDataset) return;
9696

@@ -108,6 +108,13 @@ export const EditChunkPageForm = (props: SingleChunkPageProps) => {
108108
return;
109109
}
110110

111+
let body_timestamp = timestamp();
112+
113+
if (timestamp()) {
114+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
115+
body_timestamp = timestamp() + " 00:00:00";
116+
}
117+
111118
setFormErrorFields([]);
112119
setIsUpdating(true);
113120

@@ -131,7 +138,7 @@ export const EditChunkPageForm = (props: SingleChunkPageProps) => {
131138
lat: locationLat(),
132139
lon: locationLon(),
133140
},
134-
time_stamp: timestamp(),
141+
time_stamp: body_timestamp,
135142
}),
136143
}).then((response) => {
137144
if (response.ok) {
@@ -193,6 +200,7 @@ export const EditChunkPageForm = (props: SingleChunkPageProps) => {
193200
setTagSet(data.tag_set ?? "");
194201
setMetadata(data.metadata);
195202
setTrackingId(data.tracking_id ?? "");
203+
setTimestamp(data.time_stamp?.split("T")[0] ?? null);
196204
setChunkHtml(data.chunk_html ?? "");
197205
setWeight(data.weight ?? 0);
198206
setTopLevelError("");
@@ -352,7 +360,7 @@ export const EditChunkPageForm = (props: SingleChunkPageProps) => {
352360
class="my-8 flex h-full w-full flex-col space-y-4 text-neutral-800 dark:text-white"
353361
onSubmit={(e) => {
354362
e.preventDefault();
355-
updateEvidence();
363+
updateChunk();
356364
}}
357365
>
358366
<div class="text-center text-red-500">{formErrorText()}</div>

‎search/src/components/FilterModal.tsx

Lines changed: 140 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ export interface Filter {
2727
gt?: number | null;
2828
lt?: number | null;
2929
} | null;
30+
date_range?: {
31+
gte?: string | null;
32+
lte?: string | null;
33+
gt?: string | null;
34+
lt?: string | null;
35+
} | null;
3036
}
3137

3238
export interface Filters {
@@ -259,33 +265,35 @@ export const FilterItem = (props: FilterItemProps) => {
259265
? "geo_radius"
260266
: props.initialFilter?.range
261267
? "range"
262-
: "match",
268+
: props.initialFilter?.date_range
269+
? "date_range"
270+
: props.initialFilter?.match
271+
? "match"
272+
: "match",
263273
);
264274
const [tempFilterField, setTempFilterField] = createSignal<string>(
265275
props.initialFilter?.field ?? "",
266276
);
267-
const [latitude, setLatitude] = createSignal<number | null>(
268-
props.initialFilter?.geo_radius?.center?.lat ?? null,
269-
);
270-
const [longitude, setLongitude] = createSignal<number | null>(
271-
props.initialFilter?.geo_radius?.center?.lon ?? null,
272-
);
273-
const [radius, setRadius] = createSignal<number | null>(
274-
props.initialFilter?.geo_radius?.radius ?? null,
275-
);
276-
const [greaterThan, setGreaterThan] = createSignal<number | null>(
277-
props.initialFilter?.range?.gt ?? null,
278-
);
279-
const [lessThan, setLessThan] = createSignal<number | null>(
280-
props.initialFilter?.range?.lt ?? null,
281-
);
282-
const [greaterThanOrEqual, setGreaterThanOrEqual] = createSignal<
283-
number | null
284-
>(props.initialFilter?.range?.gte ?? null);
277+
const [location, setLocation] = createSignal({
278+
lat: props.initialFilter?.geo_radius?.center?.lat ?? null,
279+
lon: props.initialFilter?.geo_radius?.center?.lon ?? null,
280+
radius: props.initialFilter?.geo_radius?.radius ?? null,
281+
});
282+
283+
const [range, setRange] = createSignal({
284+
gt: props.initialFilter?.range?.gt ?? null,
285+
lt: props.initialFilter?.range?.lt ?? null,
286+
gte: props.initialFilter?.range?.gte ?? null,
287+
lte: props.initialFilter?.range?.lte ?? null,
288+
});
289+
290+
const [dateRange, setDateRange] = createSignal({
291+
gt: props.initialFilter?.date_range?.gt ?? null,
292+
lt: props.initialFilter?.date_range?.lt ?? null,
293+
gte: props.initialFilter?.date_range?.gte ?? null,
294+
lte: props.initialFilter?.date_range?.lte ?? null,
295+
});
285296

286-
const [lessThanOrEqual, setLessThanOrEqual] = createSignal<number | null>(
287-
props.initialFilter?.range?.lte ?? null,
288-
);
289297
const [match, setMatch] = createSignal<(string | number)[] | null>(
290298
props.initialFilter?.match ?? null,
291299
);
@@ -305,10 +313,10 @@ export const FilterItem = (props: FilterItemProps) => {
305313
field: tempFilterField(),
306314
geo_radius: {
307315
center: {
308-
lat: latitude(),
309-
lon: longitude(),
316+
lat: location().lat,
317+
lon: location().lon,
310318
},
311-
radius: radius(),
319+
radius: location().radius,
312320
},
313321
});
314322
}
@@ -317,10 +325,10 @@ export const FilterItem = (props: FilterItemProps) => {
317325
setCurFilter({
318326
field: tempFilterField(),
319327
range: {
320-
gt: greaterThan(),
321-
lt: lessThan(),
322-
gte: greaterThanOrEqual(),
323-
lte: lessThanOrEqual(),
328+
gt: range().gt,
329+
lt: range().lt,
330+
gte: range().gte,
331+
lte: range().lte,
324332
},
325333
});
326334
}
@@ -331,6 +339,18 @@ export const FilterItem = (props: FilterItemProps) => {
331339
match: match(),
332340
});
333341
}
342+
343+
if (changedMode === "date_range") {
344+
setCurFilter({
345+
field: tempFilterField(),
346+
date_range: {
347+
gt: dateRange().gt,
348+
lt: dateRange().lt,
349+
gte: dateRange().gte,
350+
lte: dateRange().lte,
351+
},
352+
});
353+
}
334354
});
335355

336356
createEffect(() => {
@@ -397,7 +417,7 @@ export const FilterItem = (props: FilterItemProps) => {
397417
}}
398418
value={tempFilterMode()}
399419
>
400-
<For each={["match", "geo_radius", "range"]}>
420+
<For each={["match", "geo_radius", "range", "date_range"]}>
401421
{(filter_mode) => {
402422
return (
403423
<option
@@ -424,9 +444,12 @@ export const FilterItem = (props: FilterItemProps) => {
424444
placeholder="Latitude"
425445
class="rounded-md border border-neutral-400 bg-neutral-100 p-1 dark:border-neutral-900 dark:bg-neutral-800"
426446
onChange={(e) => {
427-
setLatitude(parseFloat(e.currentTarget.value));
447+
setLocation({
448+
...location(),
449+
lat: parseFloat(e.currentTarget.value),
450+
});
428451
}}
429-
value={latitude() ?? ""}
452+
value={location().lat ?? ""}
430453
/>
431454
</div>
432455
<div class="grid w-full grid-cols-2 items-center gap-y-1">
@@ -436,9 +459,12 @@ export const FilterItem = (props: FilterItemProps) => {
436459
placeholder="Longitude"
437460
class="rounded-md border border-neutral-400 bg-neutral-100 p-1 dark:border-neutral-900 dark:bg-neutral-800"
438461
onChange={(e) => {
439-
setLongitude(parseFloat(e.currentTarget.value));
462+
setLocation({
463+
...location(),
464+
lon: parseFloat(e.currentTarget.value),
465+
});
440466
}}
441-
value={longitude() ?? ""}
467+
value={location().lon ?? ""}
442468
/>
443469
</div>
444470
<div class="grid w-full grid-cols-2 items-center gap-y-1">
@@ -448,9 +474,12 @@ export const FilterItem = (props: FilterItemProps) => {
448474
placeholder="Radius"
449475
class="rounded-md border border-neutral-400 bg-neutral-100 p-1 dark:border-neutral-900 dark:bg-neutral-800"
450476
onChange={(e) => {
451-
setRadius(parseFloat(e.currentTarget.value));
477+
setLocation({
478+
...location(),
479+
radius: parseFloat(e.currentTarget.value),
480+
});
452481
}}
453-
value={radius() ?? ""}
482+
value={location().radius ?? ""}
454483
/>
455484
</div>
456485
</div>
@@ -464,19 +493,19 @@ export const FilterItem = (props: FilterItemProps) => {
464493
placeholder="Greater Than"
465494
class="rounded-md border border-neutral-400 bg-neutral-100 p-1 dark:border-neutral-900 dark:bg-neutral-800"
466495
onChange={(e) => {
467-
setGreaterThan(parseFloat(e.currentTarget.value));
496+
setRange({ ...range(), gt: parseFloat(e.currentTarget.value) });
468497
}}
469-
value={greaterThan() ?? ""}
498+
value={range().gt ?? ""}
470499
/>
471500
<label aria-label="Less Than">Less Than:</label>
472501
<input
473502
type="number"
474503
placeholder="Less Than"
475504
class="rounded-md border border-neutral-400 bg-neutral-100 p-1 dark:border-neutral-900 dark:bg-neutral-800"
476505
onChange={(e) => {
477-
setLessThan(parseFloat(e.currentTarget.value));
506+
setRange({ ...range(), lt: parseFloat(e.currentTarget.value) });
478507
}}
479-
value={lessThan() ?? ""}
508+
value={range().lt ?? ""}
480509
/>
481510
</div>
482511
<div class="grid w-full grid-cols-2 items-center gap-y-1">
@@ -488,19 +517,86 @@ export const FilterItem = (props: FilterItemProps) => {
488517
placeholder="Greater Than or Equal"
489518
class="rounded-md border border-neutral-400 bg-neutral-100 p-1 dark:border-neutral-900 dark:bg-neutral-800"
490519
onChange={(e) => {
491-
setGreaterThanOrEqual(parseFloat(e.currentTarget.value));
520+
setRange({
521+
...range(),
522+
gte: parseFloat(e.currentTarget.value),
523+
});
492524
}}
493-
value={greaterThanOrEqual() ?? ""}
525+
value={range().gte ?? ""}
494526
/>
495527
<label aria-label="Less Than or Equal">Less Than or Equal:</label>
496528
<input
497529
type="number"
498530
placeholder="Less Than or Equal"
499531
class="rounded-md border border-neutral-400 bg-neutral-100 p-1 dark:border-neutral-900 dark:bg-neutral-800"
500532
onChange={(e) => {
501-
setLessThanOrEqual(parseFloat(e.currentTarget.value));
533+
setRange({
534+
...range(),
535+
lte: parseFloat(e.currentTarget.value),
536+
});
537+
}}
538+
value={range().lte ?? ""}
539+
/>
540+
</div>
541+
</div>
542+
</Show>
543+
<Show when={tempFilterMode() === "date_range"}>
544+
<div class="flex w-full flex-col gap-y-1 pl-2">
545+
<div class="grid w-full grid-cols-2 items-center gap-y-1">
546+
<label aria-label="Greater Than">Greater Than:</label>
547+
<input
548+
type="date"
549+
class="rounded-md border border-neutral-400 bg-neutral-100 p-1 dark:border-neutral-900 dark:bg-neutral-800"
550+
onChange={(e) => {
551+
setDateRange({
552+
...dateRange(),
553+
gt: e.currentTarget.value + " 00:00:00",
554+
});
555+
}}
556+
value={dateRange().gt?.replace(" 00:00:00", "") ?? ""}
557+
/>
558+
<label aria-label="Less Than">Less Than:</label>
559+
<input
560+
type="date"
561+
placeholder="Less Than"
562+
class="rounded-md border border-neutral-400 bg-neutral-100 p-1 dark:border-neutral-900 dark:bg-neutral-800"
563+
onChange={(e) => {
564+
setDateRange({
565+
...dateRange(),
566+
lt: e.currentTarget.value + " 00:00:00",
567+
});
568+
}}
569+
value={dateRange().lt?.replace(" 00:00:00", "") ?? ""}
570+
/>
571+
</div>
572+
<div class="grid w-full grid-cols-2 items-center gap-y-1">
573+
<label aria-label="Greater Than or Equal">
574+
Greater Than or Equal:
575+
</label>
576+
<input
577+
type="date"
578+
placeholder="Greater Than or Equal"
579+
class="rounded-md border border-neutral-400 bg-neutral-100 p-1 dark:border-neutral-900 dark:bg-neutral-800"
580+
onChange={(e) => {
581+
setDateRange({
582+
...dateRange(),
583+
gte: e.currentTarget.value + " 00:00:00",
584+
});
585+
}}
586+
value={dateRange().gte?.replace(" 00:00:00", "") ?? ""}
587+
/>
588+
<label aria-label="Less Than or Equal">Less Than or Equal:</label>
589+
<input
590+
type="date"
591+
placeholder="Less Than or Equal"
592+
class="rounded-md border border-neutral-400 bg-neutral-100 p-1 dark:border-neutral-900 dark:bg-neutral-800"
593+
onChange={(e) => {
594+
setDateRange({
595+
...dateRange(),
596+
lte: e.currentTarget.value + " 00:00:00",
597+
});
502598
}}
503-
value={lessThanOrEqual() ?? ""}
599+
value={dateRange().lte?.replace(" 00:00:00", "") ?? ""}
504600
/>
505601
</div>
506602
</div>

0 commit comments

Comments
 (0)