feat: allow empty range picker

agileplanning-io · Jan 12, 2025 · e2f3fa0 · e2f3fa0
1 parent b7aa676
commit e2f3fa0
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 19 deletions.
diff --git a/apps/client/src/app/projects/reports/forecast/forecast-page.tsx b/apps/client/src/app/projects/reports/forecast/forecast-page.tsx
@@ -47,7 +47,7 @@ import {
   Tooltip,
   Typography,
 } from "antd";
-import { isNonNullish, splice } from "remeda";
+import { isNonNullish, isNullish, splice } from "remeda";
 import { RedoOutlined } from "@ant-design/icons";
 import { IssueDetailsDrawer } from "../components/issue-details-drawer";
 
@@ -155,9 +155,7 @@ const ChartParamsForm: FC<ChartParamsFormProps> = ({
   chartParams,
   setChartParams,
 }) => {
-  const [newExclusion, setNewExclusion] = useState<AbsoluteInterval>(() =>
-    asAbsolute(defaultDateRange()),
-  );
+  const [newExclusion, setNewExclusion] = useState<AbsoluteInterval>();
 
   return (
     <>
@@ -270,7 +268,7 @@ const ChartParamsForm: FC<ChartParamsFormProps> = ({
             title="Exclude intervals"
             value={chartParams}
             onValueChanged={setChartParams}
-            onClose={() => {}}
+            onClose={() => setNewExclusion(undefined)}
             renderLabel={() => {
               if (!chartParams.exclusions) {
                 return <Typography.Text type="secondary">None</Typography.Text>;
@@ -314,12 +312,15 @@ const ChartParamsForm: FC<ChartParamsFormProps> = ({
                     onChange={setNewExclusion}
                   />
                   <Button
+                    disabled={isNullish(newExclusion)}
                     onClick={() => {
-                      const exclusions = [
-                        ...(value.exclusions ?? []),
-                        newExclusion,
-                      ];
-                      setValue({ ...value, exclusions });
+                      const currentExclusions = value.exclusions ?? [];
+
+                      if (newExclusion) {
+                        const exclusions = [...currentExclusions, newExclusion];
+                        setValue({ ...value, exclusions });
+                        setNewExclusion(undefined);
+                      }
                     }}
                   >
                     Add

diff --git a/packages/components/src/date-selector/absolute-range-picker.tsx b/packages/components/src/date-selector/absolute-range-picker.tsx
@@ -4,17 +4,25 @@ import { endOfDay } from "date-fns";
 import { FC } from "react";
 import { DatePicker } from "./date-picker";
 
-export const AbsoluteRangePicker: FC<{
-  dates: AbsoluteInterval;
+type AbsoluteRangePickerProps = {
+  dates?: AbsoluteInterval;
   onChange: (interval: AbsoluteInterval) => void;
   size?: SizeType;
-}> = ({ dates, onChange, size }) => (
+  allowClear?: boolean;
+};
+
+export const AbsoluteRangePicker: FC<AbsoluteRangePickerProps> = ({
+  dates,
+  onChange,
+  size,
+  allowClear,
+}) => (
   <DatePicker.RangePicker
     size={size}
     suffixIcon={false}
     style={{ width: "100%", zIndex: 10000 }}
-    allowClear={false}
-    value={[dates.start, dates.end]}
+    allowClear={allowClear}
+    value={[dates?.start, dates?.end]}
     onChange={(range) => {
       if (range) {
         const [start, end] = range;

diff --git a/packages/lib/src/format.spec.ts b/packages/lib/src/format.spec.ts
@@ -1,4 +1,10 @@
-import { formatDate, formatInterval, formatNumber, formatTime } from "./format";
+import {
+  ellipsize,
+  formatDate,
+  formatInterval,
+  formatNumber,
+  formatTime,
+} from "./format";
 
 describe("format", () => {
   const now = new Date("2025-01-01");
@@ -57,8 +63,12 @@ describe("format", () => {
   });
 
   describe("ellipsize", () => {
-    it("returns short text verbatim", () => {});
+    it("returns short text verbatim", () => {
+      expect(ellipsize("foo bar", 8)).toEqual("foo bar");
+    });
 
-    it("truncates long text", () => {});
+    it("truncates long text, trimming white space", () => {
+      expect(ellipsize("foo bar baz", 8)).toEqual("foo bar…");
+    });
   });
 });
diff --git a/packages/lib/src/format.ts b/packages/lib/src/format.ts
@@ -35,7 +35,7 @@ export const formatTime = (date?: Date): string | undefined => {
 };
 
 export const ellipsize = (text: string, maxLength = 32) =>
-  text.length > maxLength ? `${text.slice(0, maxLength)}…` : text;
+  text.length > maxLength ? `${text.slice(0, maxLength).trim()}…` : text;
 
 const isSameYear = (date1: Date, date2: Date) =>
   date1.getFullYear() === date2.getFullYear();
diff --git a/packages/lib/src/intervals.ts b/packages/lib/src/intervals.ts
@@ -28,11 +28,20 @@ export type AbsoluteInterval = {
   end: Date;
 };
 
+// export type PartialAbsoluteInterval = Partial<AbsoluteInterval>;
+
+// export const isCompleteAbsoluteInterval = (
+//   interval: PartialAbsoluteInterval,
+// ): interval is AbsoluteInterval =>
+//   isNonNullish(interval.start) && isNonNullish(interval.end);
+
 export type RelativeInterval = {
   unit: TimeUnit;
   unitCount: number;
 };
 
+export type PartialRelativeInterval = Partial<RelativeInterval>;
+
 export type Interval = AbsoluteInterval | RelativeInterval;
 
 export const isAbsolute = (interval: Interval): interval is AbsoluteInterval =>