Change PeriodType values (0 = unqualified DoW, 1-7 = Sun-Sat). Fix DateRange bi-week periodType. Add tests for hasDayOfWeek(), getDayOfWeek(), and replaceDayOfWeek() (#217)

techniq · web-flow · commit f685ad7ecc46 · 2024-01-15T11:02:59.000-05:00
diff --git a/.changeset/sour-cougars-beg.md b/.changeset/sour-cougars-beg.md
@@ -0,0 +1,5 @@
+---
+"svelte-ux": minor
+---
+
+Change PeriodType values (0 = unqualified DoW, 1-7 = Sun-Sat)
diff --git a/packages/svelte-ux/src/lib/components/DateRange.svelte b/packages/svelte-ux/src/lib/components/DateRange.svelte
@@ -7,6 +7,7 @@
     getDateFuncsByPeriodType,
     hasDayOfWeek,
     replaceDayOfWeek,
+    missingDayOfWeek,
   } from '../utils/date';
   import { getDateRangePresets } from '../utils/dateRange';
   import type { DateRange } from '../utils/dateRange';
@@ -48,7 +49,7 @@
   $: periodTypeOptions = periodTypes.map((pt) => {
     const value = adjustPeriodType(pt);
     return {
-      label: $format.getPeriodTypeName(adjustPeriodType(pt)),
+      label: $format.getPeriodTypeName(value),
       value,
     };
   });
@@ -150,8 +151,8 @@
   }
 
   function adjustPeriodType(periodType: PeriodType) {
-    // Adjust value for currently selected day of week
-    return hasDayOfWeek(periodType)
+    // Adjust value for currently selected day of week, if needed
+    return missingDayOfWeek(periodType)
       ? replaceDayOfWeek(periodType, selectedDayOfWeek) || periodType
       : periodType;
   }
diff --git a/packages/svelte-ux/src/lib/utils/date.test.ts b/packages/svelte-ux/src/lib/utils/date.test.ts
@@ -8,6 +8,9 @@ import {
   formatDateWithLocale,
   getPeriodTypeByCode,
   getPeriodTypeCode,
+  getDayOfWeek,
+  hasDayOfWeek,
+  replaceDayOfWeek,
 } from './date';
 import { formatWithLocale } from '.';
 import { createLocaleSettings, defaultLocale } from './locale';
@@ -538,3 +541,132 @@ describe('getPeriodTypeCode()', () => {
     expect(val).toBe('BIWEEK1-SAT');
   });
 });
+
+describe('hasDayOfWeek()', () => {
+  const data = [
+    // Week
+    [PeriodType.Week, false],
+    [PeriodType.WeekSun, true],
+    [PeriodType.WeekMon, true],
+    [PeriodType.WeekTue, true],
+    [PeriodType.WeekWed, true],
+    [PeriodType.WeekThu, true],
+    [PeriodType.WeekFri, true],
+    [PeriodType.WeekSat, true],
+    // BiWeek1
+    [PeriodType.BiWeek1, false],
+    [PeriodType.BiWeek1Sun, true],
+    [PeriodType.BiWeek1Mon, true],
+    [PeriodType.BiWeek1Tue, true],
+    [PeriodType.BiWeek1Wed, true],
+    [PeriodType.BiWeek1Thu, true],
+    [PeriodType.BiWeek1Fri, true],
+    [PeriodType.BiWeek1Sat, true],
+    // BiWeek2
+    [PeriodType.BiWeek2, false],
+    [PeriodType.BiWeek2Sun, true],
+    [PeriodType.BiWeek2Mon, true],
+    [PeriodType.BiWeek2Tue, true],
+    [PeriodType.BiWeek2Wed, true],
+    [PeriodType.BiWeek2Thu, true],
+    [PeriodType.BiWeek2Fri, true],
+    [PeriodType.BiWeek2Sat, true],
+    // Other
+    [PeriodType.Day, false],
+    [PeriodType.Month, false],
+    [PeriodType.CalendarYear, false],
+  ] as const;
+
+  data.forEach(([periodType, dayOfWeek]) => {
+    it(PeriodType[periodType], () => {
+      const val = hasDayOfWeek(periodType);
+      expect(val).toBe(dayOfWeek);
+    });
+  });
+});
+
+describe('getDayOfWeek()', () => {
+  const data = [
+    // Week
+    [PeriodType.Week, null],
+    [PeriodType.WeekSun, DayOfWeek.Sunday],
+    [PeriodType.WeekMon, DayOfWeek.Monday],
+    [PeriodType.WeekTue, DayOfWeek.Tuesday],
+    [PeriodType.WeekWed, DayOfWeek.Wednesday],
+    [PeriodType.WeekThu, DayOfWeek.Thursday],
+    [PeriodType.WeekFri, DayOfWeek.Friday],
+    [PeriodType.WeekSat, DayOfWeek.Saturday],
+    // BiWeek1
+    [PeriodType.BiWeek1, null],
+    [PeriodType.BiWeek1Sun, DayOfWeek.Sunday],
+    [PeriodType.BiWeek1Mon, DayOfWeek.Monday],
+    [PeriodType.BiWeek1Tue, DayOfWeek.Tuesday],
+    [PeriodType.BiWeek1Wed, DayOfWeek.Wednesday],
+    [PeriodType.BiWeek1Thu, DayOfWeek.Thursday],
+    [PeriodType.BiWeek1Fri, DayOfWeek.Friday],
+    [PeriodType.BiWeek1Sat, DayOfWeek.Saturday],
+    // BiWeek2
+    [PeriodType.BiWeek2, null],
+    [PeriodType.BiWeek2Sun, DayOfWeek.Sunday],
+    [PeriodType.BiWeek2Mon, DayOfWeek.Monday],
+    [PeriodType.BiWeek2Tue, DayOfWeek.Tuesday],
+    [PeriodType.BiWeek2Wed, DayOfWeek.Wednesday],
+    [PeriodType.BiWeek2Thu, DayOfWeek.Thursday],
+    [PeriodType.BiWeek2Fri, DayOfWeek.Friday],
+    [PeriodType.BiWeek2Sat, DayOfWeek.Saturday],
+    // Other
+    [PeriodType.Day, null],
+    [PeriodType.Month, null],
+    [PeriodType.CalendarYear, null],
+  ] as const;
+
+  data.forEach(([periodType, dayOfWeek]) => {
+    it(PeriodType[periodType], () => {
+      const val = getDayOfWeek(periodType);
+      expect(val).toBe(dayOfWeek);
+    });
+  });
+});
+
+describe('replaceDayOfWeek()', () => {
+  const data = [
+    // Week
+    [PeriodType.Week, DayOfWeek.Sunday, PeriodType.WeekSun],
+    [PeriodType.WeekSun, DayOfWeek.Sunday, PeriodType.WeekSun],
+    [PeriodType.WeekSun, DayOfWeek.Monday, PeriodType.WeekMon],
+    [PeriodType.WeekSun, DayOfWeek.Tuesday, PeriodType.WeekTue],
+    [PeriodType.WeekSun, DayOfWeek.Wednesday, PeriodType.WeekWed],
+    [PeriodType.WeekWed, DayOfWeek.Thursday, PeriodType.WeekThu],
+    [PeriodType.WeekWed, DayOfWeek.Friday, PeriodType.WeekFri],
+    [PeriodType.WeekSat, DayOfWeek.Saturday, PeriodType.WeekSat],
+    // BiWeek1
+    [PeriodType.BiWeek1, DayOfWeek.Sunday, PeriodType.BiWeek1Sun],
+    [PeriodType.BiWeek1Sun, DayOfWeek.Sunday, PeriodType.BiWeek1Sun],
+    [PeriodType.BiWeek1Sun, DayOfWeek.Monday, PeriodType.BiWeek1Mon],
+    [PeriodType.BiWeek1Sun, DayOfWeek.Tuesday, PeriodType.BiWeek1Tue],
+    [PeriodType.BiWeek1Sun, DayOfWeek.Wednesday, PeriodType.BiWeek1Wed],
+    [PeriodType.BiWeek1Wed, DayOfWeek.Thursday, PeriodType.BiWeek1Thu],
+    [PeriodType.BiWeek1Wed, DayOfWeek.Friday, PeriodType.BiWeek1Fri],
+    [PeriodType.BiWeek1Sat, DayOfWeek.Saturday, PeriodType.BiWeek1Sat],
+    // BiWeek2
+    [PeriodType.BiWeek2, DayOfWeek.Sunday, PeriodType.BiWeek2Sun],
+    [PeriodType.BiWeek2Sun, DayOfWeek.Sunday, PeriodType.BiWeek2Sun],
+    [PeriodType.BiWeek2Sun, DayOfWeek.Monday, PeriodType.BiWeek2Mon],
+    [PeriodType.BiWeek2Sun, DayOfWeek.Tuesday, PeriodType.BiWeek2Tue],
+    [PeriodType.BiWeek2Sun, DayOfWeek.Wednesday, PeriodType.BiWeek2Wed],
+    [PeriodType.BiWeek2Wed, DayOfWeek.Thursday, PeriodType.BiWeek2Thu],
+    [PeriodType.BiWeek2Wed, DayOfWeek.Friday, PeriodType.BiWeek2Fri],
+    [PeriodType.BiWeek2Sat, DayOfWeek.Saturday, PeriodType.BiWeek2Sat],
+    // Other
+    [PeriodType.Day, DayOfWeek.Sunday, PeriodType.Day],
+    [PeriodType.Month, DayOfWeek.Sunday, PeriodType.Month],
+    [PeriodType.CalendarYear, DayOfWeek.Sunday, PeriodType.CalendarYear],
+  ] as const;
+
+  data.forEach(([periodType, dayOfWeek, expected]) => {
+    it(`${PeriodType[periodType]} / ${DayOfWeek[dayOfWeek]}`, () => {
+      const val = replaceDayOfWeek(periodType, dayOfWeek);
+      expect(val).toBe(expected);
+    });
+  });
+});
diff --git a/packages/svelte-ux/src/lib/utils/date.ts b/packages/svelte-ux/src/lib/utils/date.ts
@@ -192,42 +192,49 @@ export function getPeriodTypeByCode(code: string): PeriodType {
   return parseInt(element?.[0] ?? '1');
 }
 
-export function getDayOfWeek(periodType: PeriodType) {
-  const periodTypeCode = getPeriodTypeCode(periodType);
-  const matches = periodTypeCode.match(/\-(SUN|MON|TUE|WED|THU|FRI|SAT)/);
-  if (matches) {
-    return DayOfWeek[matches[1] as keyof typeof DayOfWeek];
+export function getDayOfWeek(periodType: PeriodType): DayOfWeek | null {
+  if (
+    (periodType >= PeriodType.WeekSun && periodType <= PeriodType.WeekSat) ||
+    (periodType >= PeriodType.BiWeek1Sun && periodType <= PeriodType.BiWeek1Sat) ||
+    (periodType >= PeriodType.BiWeek2Sun && periodType <= PeriodType.BiWeek2Sat)
+  ) {
+    return (periodType % 10) - 1;
   } else {
     return null;
   }
 }
 
-export function replaceDayOfWeek(periodType: PeriodType, dayOfWeek: DayOfWeek) {
-  const periodTypeCode = getPeriodTypeCode(periodType);
-  const dayOfWeekName = DayOfWeek[dayOfWeek];
-  // Replace everything after `-` with new dayOfWeek
-  const newPeriodTypeCode = periodTypeCode.replace(/\-(.*)/, `-${dayOfWeekName}`);
-  return getPeriodTypeByCode(newPeriodTypeCode);
+/** Replace day of week for `periodType`, if applicable */
+export function replaceDayOfWeek(periodType: PeriodType, dayOfWeek: DayOfWeek): PeriodType {
+  if (hasDayOfWeek(periodType)) {
+    return periodType - (getDayOfWeek(periodType) ?? 0) + dayOfWeek;
+  } else if (missingDayOfWeek(periodType)) {
+    return periodType + dayOfWeek + 1;
+  } else {
+    return periodType;
+  }
 }
 
+/** Check if `periodType` has day of week (Sun-Sat) */
 export function hasDayOfWeek(periodType: PeriodType) {
-  // It's more: is it week related and .Week, .BiWeek1 or .BiWeek2 don't contain a day...
-  // const periodTypeCode = getPeriodTypeCode(periodType);
-  // return /\-(SUN|MON|TUE|WED|THU|FRI|SAT)/.test(periodTypeCode);
-
-  if (periodType >= PeriodType.WeekSun && periodType <= PeriodType.Week) {
+  if (periodType >= PeriodType.WeekSun && periodType <= PeriodType.WeekSat) {
     return true;
   }
-  if (periodType >= PeriodType.BiWeek1Sun && periodType <= PeriodType.BiWeek1) {
+  if (periodType >= PeriodType.BiWeek1Sun && periodType <= PeriodType.BiWeek1Sat) {
     return true;
   }
-  if (periodType >= PeriodType.BiWeek2Sun && periodType <= PeriodType.BiWeek2) {
+  if (periodType >= PeriodType.BiWeek2Sun && periodType <= PeriodType.BiWeek2Sat) {
     return true;
   }
 
   return false;
 }
 
+/** Is `periodType` missing day of week (Sun-Sat) */
+export function missingDayOfWeek(periodType: PeriodType) {
+  return [PeriodType.Week, PeriodType.BiWeek1, PeriodType.BiWeek2].includes(periodType);
+}
+
 export function getMonths(year = new Date().getFullYear()) {
   return Array.from({ length: 12 }, (_, i) => new Date(year, i, 1));
 }
diff --git a/packages/svelte-ux/src/lib/utils/date_types.ts b/packages/svelte-ux/src/lib/utils/date_types.ts
@@ -15,38 +15,38 @@ export enum PeriodType {
   DayTime = 11,
   TimeOnly = 15,
 
-  WeekSun = 20,
-  WeekMon = 21,
-  WeekTue = 22,
-  WeekWed = 23,
-  WeekThu = 24,
-  WeekFri = 25,
-  WeekSat = 26,
-  Week = 27, // will be replaced by WeekSun, WeekMon, etc depending on weekStartsOn
+  Week = 20, // will be replaced by WeekSun, WeekMon, etc depending on locale `weekStartsOn`
+  WeekSun = 21,
+  WeekMon = 22,
+  WeekTue = 23,
+  WeekWed = 24,
+  WeekThu = 25,
+  WeekFri = 26,
+  WeekSat = 27,
 
   Month = 30,
   MonthYear = 31,
   Quarter = 40,
   CalendarYear = 50,
   FiscalYearOctober = 60,
 
-  BiWeek1Sun = 70,
-  BiWeek1Mon = 71,
-  BiWeek1Tue = 72,
-  BiWeek1Wed = 73,
-  BiWeek1Thu = 74,
-  BiWeek1Fri = 75,
-  BiWeek1Sat = 76,
-  BiWeek1 = 77, // will be replaced by BiWeek1Sun, BiWeek1Mon, etc depending on weekStartsOn
-
-  BiWeek2Sun = 80,
-  BiWeek2Mon = 81,
-  BiWeek2Tue = 82,
-  BiWeek2Wed = 83,
-  BiWeek2Thu = 84,
-  BiWeek2Fri = 85,
-  BiWeek2Sat = 86,
-  BiWeek2 = 87, // will be replaced by BiWeek2Sun, BiWeek2Mon, etc depending on weekStartsOn
+  BiWeek1 = 70, // will be replaced by BiWeek1Sun, BiWeek1Mon, etc depending on locale `weekStartsOn`
+  BiWeek1Sun = 71,
+  BiWeek1Mon = 72,
+  BiWeek1Tue = 73,
+  BiWeek1Wed = 74,
+  BiWeek1Thu = 75,
+  BiWeek1Fri = 76,
+  BiWeek1Sat = 77,
+
+  BiWeek2 = 80, // will be replaced by BiWeek2Sun, BiWeek2Mon, etc depending on locale `weekStartsOn`
+  BiWeek2Sun = 81,
+  BiWeek2Mon = 82,
+  BiWeek2Tue = 83,
+  BiWeek2Wed = 84,
+  BiWeek2Thu = 85,
+  BiWeek2Fri = 86,
+  BiWeek2Sat = 87,
 }
 
 export enum DayOfWeek {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"svelte-ux": minor
 +---
++
 +Change PeriodType values (0 = unqualified DoW, 1-7 = Sun-Sat)