Feat/date range weekstarton (#208)

* add fr translation & use the "week" to fit the weekstartOn * range & fr & reactivity * adding more translation * internal var name * typeHelpers * fix my typo 🙈
techniq · Feb 6, 2024 · a27d27b · a27d27b
1 parent 577eec4
commit a27d27b
Show file tree

Hide file tree

Showing 14 changed files with 454 additions and 485 deletions.
diff --git a/packages/svelte-ux/src/lib/components/DateButton.svelte b/packages/svelte-ux/src/lib/components/DateButton.svelte
@@ -19,7 +19,7 @@
   export let fade: boolean = false;
   export let format = getCustomFormat(periodType);
 
-  const { format: format_ux } = getSettings();
+  const { format: format_ux, localeSettings } = getSettings();
   const settingsClasses = getComponentClasses('DateButton');
 
   function getCustomFormat(periodType: PeriodType) {
@@ -32,7 +32,7 @@
     }
   }
 
-  const { start, end, isSame } = getDateFuncsByPeriodType(periodType);
+  const { start, end, isSame } = getDateFuncsByPeriodType($localeSettings, periodType);
 
   $: isSelected =
     selected instanceof Date

diff --git a/packages/svelte-ux/src/lib/components/DatePickerField.svelte b/packages/svelte-ux/src/lib/components/DatePickerField.svelte
@@ -32,7 +32,7 @@
   export let center = false;
 
   const settingsClasses = getComponentClasses('DatePickerField');
-  const { format } = getSettings();
+  const { format, localeSettings } = getSettings();
   $: dictionary = $format.settings.dictionary;
 
   let open: boolean = false;
@@ -83,7 +83,7 @@
           class="p-2"
           on:click={() => {
             if (value && periodType) {
-              const { add } = getDateFuncsByPeriodType(periodType);
+              const { add } = getDateFuncsByPeriodType($localeSettings, periodType);
               value = add(value, -1);
               dispatch('change', value);
             }
@@ -121,7 +121,7 @@
           class="p-2"
           on:click={() => {
             if (value && periodType) {
-              const { add } = getDateFuncsByPeriodType(periodType);
+              const { add } = getDateFuncsByPeriodType($localeSettings, periodType);
               value = add(value, 1);
               dispatch('change', value);
             }

diff --git a/packages/svelte-ux/src/lib/components/DateRange.svelte b/packages/svelte-ux/src/lib/components/DateRange.svelte
@@ -26,8 +26,8 @@
   /** Period types to show */
   export let periodTypes: PeriodType[] = [
     PeriodType.Day,
-    PeriodType.WeekSun,
-    PeriodType.BiWeek1Sun,
+    PeriodType.Week,
+    PeriodType.BiWeek1,
     // PeriodType.BiWeek2Sun,
     PeriodType.Month,
     PeriodType.Quarter,
@@ -37,7 +37,7 @@
   export let getPeriodTypePresets = getDateRangePresets;
 
   const settingsClasses = getComponentClasses('DateRange');
-  const { format } = getSettings();
+  const { format, localeSettings } = getSettings();
 
   let selectedPeriodType = selected?.periodType ?? periodTypes[0];
   let selectedPreset: string | null = null;
@@ -53,7 +53,7 @@
     };
   });
 
-  $: presetOptions = getPeriodTypePresets(selectedPeriodType).map((preset) => {
+  $: presetOptions = getPeriodTypePresets($localeSettings, selectedPeriodType).map((preset) => {
     return {
       label: preset.label,
       value: getDateRangeStr(preset.value),
@@ -70,7 +70,7 @@
     // Apply date-fns function based on type and from/to.
     let newSelected = { ...selected, periodType: selectedPeriodType };
 
-    const { start, end } = getDateFuncsByPeriodType(selectedPeriodType);
+    const { start, end } = getDateFuncsByPeriodType($localeSettings, selectedPeriodType);
 
     let newActiveDate: typeof activeDate = activeDate === 'from' ? 'to' : 'from';
 
@@ -95,7 +95,7 @@
 
   // Expand selection range to match period type (day => month, etc)
   function onPeriodTypeChange(periodType: PeriodType) {
-    const { start, end } = getDateFuncsByPeriodType(periodType);
+    const { start, end } = getDateFuncsByPeriodType($localeSettings, periodType);
     if (selected!.from) {
       selected!.from = start(selected!.from);
     }
@@ -121,7 +121,9 @@
 
       // Attempt to maintain selected preset if labels match
       if (selected?.from && selected?.to && selected.periodType) {
-        const prevPeriodTypePreset = [...getPeriodTypePresets(selected.periodType)].find(
+        const prevPeriodTypePreset = [
+          ...getPeriodTypePresets($localeSettings, selected.periodType),
+        ].find(
           (x) =>
             x.value.from &&
             isSameDay(x.value.from, selected!.from!) &&
@@ -130,9 +132,9 @@
         );
 
         if (prevPeriodTypePreset && newPeriodType) {
-          const newPeriodTypePreset = [...getPeriodTypePresets(newPeriodType)].find(
-            (x) => x.label === prevPeriodTypePreset.label
-          );
+          const newPeriodTypePreset = [
+            ...getPeriodTypePresets($localeSettings, newPeriodType),
+          ].find((x) => x.label === prevPeriodTypePreset.label);
 
           if (newPeriodTypePreset) {
             newSelected.from = newPeriodTypePreset.value.from;
@@ -171,11 +173,11 @@
   <div class={cls(showSidebar && 'md:col-start-2')}>
     <ToggleGroup bind:value={activeDate} variant="outline" inset class="bg-surface-100">
       <ToggleOption value="from" class="flex-1">
-        <div class="text-xs text-surface-content/50">Start</div>
+        <div class="text-xs text-surface-content/50">{$localeSettings.dictionary.Date.Start}</div>
         {#if selected?.from}
           <div class="font-medium">{$format(selected.from, PeriodType.Day)}</div>
         {:else}
-          <div class="italic">Empty</div>
+          <div class="italic">{$localeSettings.dictionary.Date.Empty}</div>
         {/if}
         <!-- <div class="p-1">
             <DateField
@@ -193,11 +195,11 @@
       </ToggleOption>
 
       <ToggleOption value="to" class="flex-1">
-        <div class="text-xs text-surface-content/50">End</div>
+        <div class="text-xs text-surface-content/50">{$localeSettings.dictionary.Date.End}</div>
         {#if selected?.to}
           <div class="font-medium">{$format(selected.to, PeriodType.Day)}</div>
         {:else}
-          <div class="italic">Empty</div>
+          <div class="italic">{$localeSettings.dictionary.Date.Empty}</div>
         {/if}
         <!-- <div class="p-1">
             <DateField

diff --git a/packages/svelte-ux/src/lib/components/DateRangeDisplay.svelte b/packages/svelte-ux/src/lib/components/DateRangeDisplay.svelte
@@ -5,12 +5,12 @@
 
   export let value: DateRange | null | undefined;
 
-  const { format: format_ux } = getSettings();
+  const { format: format_ux, localeSettings } = getSettings();
 
   let showToValue = false;
   $: if (value?.to) {
     if (value?.from && value?.periodType) {
-      const { isSame } = getDateFuncsByPeriodType(value.periodType);
+      const { isSame } = getDateFuncsByPeriodType($localeSettings, value.periodType);
 
       switch (value.periodType) {
         case PeriodType.Day:
@@ -39,6 +39,7 @@
       case PeriodType.WeekThu:
       case PeriodType.WeekFri:
       case PeriodType.WeekSat:
+      case PeriodType.Week:
 
       case PeriodType.BiWeek1Sun:
       case PeriodType.BiWeek1Mon:
@@ -47,6 +48,7 @@
       case PeriodType.BiWeek1Thu:
       case PeriodType.BiWeek1Fri:
       case PeriodType.BiWeek1Sat:
+      case PeriodType.BiWeek1:
 
       case PeriodType.BiWeek2Sun:
       case PeriodType.BiWeek2Mon:
@@ -55,6 +57,7 @@
       case PeriodType.BiWeek2Thu:
       case PeriodType.BiWeek2Fri:
       case PeriodType.BiWeek2Sat:
+      case PeriodType.BiWeek2:
         periodType = PeriodType.Day;
         break;
 

diff --git a/packages/svelte-ux/src/lib/components/DateRangeField.svelte b/packages/svelte-ux/src/lib/components/DateRangeField.svelte
@@ -14,8 +14,7 @@
   import { getSettings } from './settings';
 
   const dispatch = createEventDispatcher();
-  const settings = getSettings();
-  const { format } = settings;
+  const { format, localeSettings } = getSettings();
 
   const _defaultValue: DateRangeType = {
     from: null,
@@ -28,9 +27,9 @@
   export let center: boolean = false;
   export let periodTypes: PeriodType[] = [
     PeriodType.Day,
-    PeriodType.WeekSun,
-    PeriodType.BiWeek1Sun,
-    // PeriodType.BiWeek2Sun,
+    PeriodType.Week,
+    PeriodType.BiWeek1,
+    // PeriodType.BiWeek2,
     PeriodType.Month,
     PeriodType.Quarter,
     PeriodType.CalendarYear,
@@ -83,7 +82,10 @@
         class="p-2"
         on:click={() => {
           if (value && value.from && value.to && value.periodType) {
-            const { difference, start, end, add } = getDateFuncsByPeriodType(value.periodType);
+            const { difference, start, end, add } = getDateFuncsByPeriodType(
+              $localeSettings,
+              value.periodType
+            );
             const offset = difference(value.from, value.to) - 1;
             value = {
               from: start(add(value.from, offset)),
@@ -130,7 +132,10 @@
         class="p-2"
         on:click={() => {
           if (value && value.from && value.to && value.periodType) {
-            const { difference, start, end, add } = getDateFuncsByPeriodType(value.periodType);
+            const { difference, start, end, add } = getDateFuncsByPeriodType(
+              $localeSettings,
+              value.periodType
+            );
             const offset = difference(value.to, value.from) + 1;
             value = {
               from: start(add(value.from, offset)),
@@ -176,7 +181,7 @@
       color="primary"
       variant="fill"
     >
-      OK
+      {$localeSettings.dictionary.Ok}
     </Button>
 
     <Button
@@ -185,7 +190,7 @@
         currentValue = value;
       }}
     >
-      Cancel
+      {$localeSettings.dictionary.Cancel}
     </Button>
   </div>
 </Dialog>
diff --git a/packages/svelte-ux/src/lib/types/typeHelpers.ts b/packages/svelte-ux/src/lib/types/typeHelpers.ts
@@ -122,3 +122,21 @@ export type EventWithTarget = Partial<Pick<Event, 'currentTarget' | 'target'>>;
 export type Prettify<T> = {
   [K in keyof T]: T[K];
 } & {};
+
+/**
+ * util to make sure we have handled all enum cases in a switch statement
+ * Just add at the end of the switch statement a `default` like this:
+ *
+ * ```ts
+ * switch (periodType) {
+ *   case xxx:
+ *     ...
+ *
+ *   default:
+ *     assertNever(periodType); // This will now report unhandled cases
+ * }
+ * ```
+ */
+export function assertNever(x: never): never {
+  throw new Error(`Unhandled enum case: ${x}`);
+}
diff --git a/packages/svelte-ux/src/lib/utils/date.test.ts b/packages/svelte-ux/src/lib/utils/date.test.ts
@@ -6,6 +6,8 @@ import {
   utcToLocalDate,
   formatIntl,
   formatDateWithLocale,
+  getPeriodTypeByCode,
+  getPeriodTypeCode,
 } from './date';
 import { formatWithLocale } from '.';
 import { createLocaleSettings, defaultLocale } from './locale';
@@ -518,3 +520,17 @@ describe('getWeekStartsOnFromIntl() tokens', () => {
     expect(val).toBe(DayOfWeek.Monday);
   });
 });
+
+describe('getPeriodTypeByCode()', () => {
+  it('week', () => {
+    const val = getPeriodTypeByCode('WEEK');
+    expect(val).toBe(PeriodType.Week);
+  });
+});
+
+describe('getPeriodTypeCode()', () => {
+  it('BiWeek1Sat', () => {
+    const val = getPeriodTypeCode(PeriodType.BiWeek1Sat);
+    expect(val).toBe('BIWEEK1-SAT');
+  });
+});