Skip to content

Commit a27d27b

Browse files
jycouettechniq
jycouet
authored and
techniq
committed
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 🙈
1 parent 577eec4 commit a27d27b

File tree

14 files changed

+454
-485
lines changed

14 files changed

+454
-485
lines changed

‎packages/svelte-ux/src/lib/components/DateButton.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
export let fade: boolean = false;
2020
export let format = getCustomFormat(periodType);
2121
22-
const { format: format_ux } = getSettings();
22+
const { format: format_ux, localeSettings } = getSettings();
2323
const settingsClasses = getComponentClasses('DateButton');
2424
2525
function getCustomFormat(periodType: PeriodType) {
@@ -32,7 +32,7 @@
3232
}
3333
}
3434
35-
const { start, end, isSame } = getDateFuncsByPeriodType(periodType);
35+
const { start, end, isSame } = getDateFuncsByPeriodType($localeSettings, periodType);
3636
3737
$: isSelected =
3838
selected instanceof Date

‎packages/svelte-ux/src/lib/components/DatePickerField.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
export let center = false;
3333
3434
const settingsClasses = getComponentClasses('DatePickerField');
35-
const { format } = getSettings();
35+
const { format, localeSettings } = getSettings();
3636
$: dictionary = $format.settings.dictionary;
3737
3838
let open: boolean = false;
@@ -83,7 +83,7 @@
8383
class="p-2"
8484
on:click={() => {
8585
if (value && periodType) {
86-
const { add } = getDateFuncsByPeriodType(periodType);
86+
const { add } = getDateFuncsByPeriodType($localeSettings, periodType);
8787
value = add(value, -1);
8888
dispatch('change', value);
8989
}
@@ -121,7 +121,7 @@
121121
class="p-2"
122122
on:click={() => {
123123
if (value && periodType) {
124-
const { add } = getDateFuncsByPeriodType(periodType);
124+
const { add } = getDateFuncsByPeriodType($localeSettings, periodType);
125125
value = add(value, 1);
126126
dispatch('change', value);
127127
}

‎packages/svelte-ux/src/lib/components/DateRange.svelte

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
/** Period types to show */
2727
export let periodTypes: PeriodType[] = [
2828
PeriodType.Day,
29-
PeriodType.WeekSun,
30-
PeriodType.BiWeek1Sun,
29+
PeriodType.Week,
30+
PeriodType.BiWeek1,
3131
// PeriodType.BiWeek2Sun,
3232
PeriodType.Month,
3333
PeriodType.Quarter,
@@ -37,7 +37,7 @@
3737
export let getPeriodTypePresets = getDateRangePresets;
3838
3939
const settingsClasses = getComponentClasses('DateRange');
40-
const { format } = getSettings();
40+
const { format, localeSettings } = getSettings();
4141
4242
let selectedPeriodType = selected?.periodType ?? periodTypes[0];
4343
let selectedPreset: string | null = null;
@@ -53,7 +53,7 @@
5353
};
5454
});
5555
56-
$: presetOptions = getPeriodTypePresets(selectedPeriodType).map((preset) => {
56+
$: presetOptions = getPeriodTypePresets($localeSettings, selectedPeriodType).map((preset) => {
5757
return {
5858
label: preset.label,
5959
value: getDateRangeStr(preset.value),
@@ -70,7 +70,7 @@
7070
// Apply date-fns function based on type and from/to.
7171
let newSelected = { ...selected, periodType: selectedPeriodType };
7272
73-
const { start, end } = getDateFuncsByPeriodType(selectedPeriodType);
73+
const { start, end } = getDateFuncsByPeriodType($localeSettings, selectedPeriodType);
7474
7575
let newActiveDate: typeof activeDate = activeDate === 'from' ? 'to' : 'from';
7676
@@ -95,7 +95,7 @@
9595
9696
// Expand selection range to match period type (day => month, etc)
9797
function onPeriodTypeChange(periodType: PeriodType) {
98-
const { start, end } = getDateFuncsByPeriodType(periodType);
98+
const { start, end } = getDateFuncsByPeriodType($localeSettings, periodType);
9999
if (selected!.from) {
100100
selected!.from = start(selected!.from);
101101
}
@@ -121,7 +121,9 @@
121121
122122
// Attempt to maintain selected preset if labels match
123123
if (selected?.from && selected?.to && selected.periodType) {
124-
const prevPeriodTypePreset = [...getPeriodTypePresets(selected.periodType)].find(
124+
const prevPeriodTypePreset = [
125+
...getPeriodTypePresets($localeSettings, selected.periodType),
126+
].find(
125127
(x) =>
126128
x.value.from &&
127129
isSameDay(x.value.from, selected!.from!) &&
@@ -130,9 +132,9 @@
130132
);
131133
132134
if (prevPeriodTypePreset && newPeriodType) {
133-
const newPeriodTypePreset = [...getPeriodTypePresets(newPeriodType)].find(
134-
(x) => x.label === prevPeriodTypePreset.label
135-
);
135+
const newPeriodTypePreset = [
136+
...getPeriodTypePresets($localeSettings, newPeriodType),
137+
].find((x) => x.label === prevPeriodTypePreset.label);
136138
137139
if (newPeriodTypePreset) {
138140
newSelected.from = newPeriodTypePreset.value.from;
@@ -171,11 +173,11 @@
171173
<div class={cls(showSidebar && 'md:col-start-2')}>
172174
<ToggleGroup bind:value={activeDate} variant="outline" inset class="bg-surface-100">
173175
<ToggleOption value="from" class="flex-1">
174-
<div class="text-xs text-surface-content/50">Start</div>
176+
<div class="text-xs text-surface-content/50">{$localeSettings.dictionary.Date.Start}</div>
175177
{#if selected?.from}
176178
<div class="font-medium">{$format(selected.from, PeriodType.Day)}</div>
177179
{:else}
178-
<div class="italic">Empty</div>
180+
<div class="italic">{$localeSettings.dictionary.Date.Empty}</div>
179181
{/if}
180182
<!-- <div class="p-1">
181183
<DateField
@@ -193,11 +195,11 @@
193195
</ToggleOption>
194196

195197
<ToggleOption value="to" class="flex-1">
196-
<div class="text-xs text-surface-content/50">End</div>
198+
<div class="text-xs text-surface-content/50">{$localeSettings.dictionary.Date.End}</div>
197199
{#if selected?.to}
198200
<div class="font-medium">{$format(selected.to, PeriodType.Day)}</div>
199201
{:else}
200-
<div class="italic">Empty</div>
202+
<div class="italic">{$localeSettings.dictionary.Date.Empty}</div>
201203
{/if}
202204
<!-- <div class="p-1">
203205
<DateField

‎packages/svelte-ux/src/lib/components/DateRangeDisplay.svelte

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
66
export let value: DateRange | null | undefined;
77
8-
const { format: format_ux } = getSettings();
8+
const { format: format_ux, localeSettings } = getSettings();
99
1010
let showToValue = false;
1111
$: if (value?.to) {
1212
if (value?.from && value?.periodType) {
13-
const { isSame } = getDateFuncsByPeriodType(value.periodType);
13+
const { isSame } = getDateFuncsByPeriodType($localeSettings, value.periodType);
1414
1515
switch (value.periodType) {
1616
case PeriodType.Day:
@@ -39,6 +39,7 @@
3939
case PeriodType.WeekThu:
4040
case PeriodType.WeekFri:
4141
case PeriodType.WeekSat:
42+
case PeriodType.Week:
4243
4344
case PeriodType.BiWeek1Sun:
4445
case PeriodType.BiWeek1Mon:
@@ -47,6 +48,7 @@
4748
case PeriodType.BiWeek1Thu:
4849
case PeriodType.BiWeek1Fri:
4950
case PeriodType.BiWeek1Sat:
51+
case PeriodType.BiWeek1:
5052
5153
case PeriodType.BiWeek2Sun:
5254
case PeriodType.BiWeek2Mon:
@@ -55,6 +57,7 @@
5557
case PeriodType.BiWeek2Thu:
5658
case PeriodType.BiWeek2Fri:
5759
case PeriodType.BiWeek2Sat:
60+
case PeriodType.BiWeek2:
5861
periodType = PeriodType.Day;
5962
break;
6063

‎packages/svelte-ux/src/lib/components/DateRangeField.svelte

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@
1414
import { getSettings } from './settings';
1515
1616
const dispatch = createEventDispatcher();
17-
const settings = getSettings();
18-
const { format } = settings;
17+
const { format, localeSettings } = getSettings();
1918
2019
const _defaultValue: DateRangeType = {
2120
from: null,
@@ -28,9 +27,9 @@
2827
export let center: boolean = false;
2928
export let periodTypes: PeriodType[] = [
3029
PeriodType.Day,
31-
PeriodType.WeekSun,
32-
PeriodType.BiWeek1Sun,
33-
// PeriodType.BiWeek2Sun,
30+
PeriodType.Week,
31+
PeriodType.BiWeek1,
32+
// PeriodType.BiWeek2,
3433
PeriodType.Month,
3534
PeriodType.Quarter,
3635
PeriodType.CalendarYear,
@@ -83,7 +82,10 @@
8382
class="p-2"
8483
on:click={() => {
8584
if (value && value.from && value.to && value.periodType) {
86-
const { difference, start, end, add } = getDateFuncsByPeriodType(value.periodType);
85+
const { difference, start, end, add } = getDateFuncsByPeriodType(
86+
$localeSettings,
87+
value.periodType
88+
);
8789
const offset = difference(value.from, value.to) - 1;
8890
value = {
8991
from: start(add(value.from, offset)),
@@ -130,7 +132,10 @@
130132
class="p-2"
131133
on:click={() => {
132134
if (value && value.from && value.to && value.periodType) {
133-
const { difference, start, end, add } = getDateFuncsByPeriodType(value.periodType);
135+
const { difference, start, end, add } = getDateFuncsByPeriodType(
136+
$localeSettings,
137+
value.periodType
138+
);
134139
const offset = difference(value.to, value.from) + 1;
135140
value = {
136141
from: start(add(value.from, offset)),
@@ -176,7 +181,7 @@
176181
color="primary"
177182
variant="fill"
178183
>
179-
OK
184+
{$localeSettings.dictionary.Ok}
180185
</Button>
181186

182187
<Button
@@ -185,7 +190,7 @@
185190
currentValue = value;
186191
}}
187192
>
188-
Cancel
193+
{$localeSettings.dictionary.Cancel}
189194
</Button>
190195
</div>
191196
</Dialog>

‎packages/svelte-ux/src/lib/types/typeHelpers.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,3 +122,21 @@ export type EventWithTarget = Partial<Pick<Event, 'currentTarget' | 'target'>>;
122122
export type Prettify<T> = {
123123
[K in keyof T]: T[K];
124124
} & {};
125+
126+
/**
127+
* util to make sure we have handled all enum cases in a switch statement
128+
* Just add at the end of the switch statement a `default` like this:
129+
*
130+
* ```ts
131+
* switch (periodType) {
132+
* case xxx:
133+
* ...
134+
*
135+
* default:
136+
* assertNever(periodType); // This will now report unhandled cases
137+
* }
138+
* ```
139+
*/
140+
export function assertNever(x: never): never {
141+
throw new Error(`Unhandled enum case: ${x}`);
142+
}

‎packages/svelte-ux/src/lib/utils/date.test.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import {
66
utcToLocalDate,
77
formatIntl,
88
formatDateWithLocale,
9+
getPeriodTypeByCode,
10+
getPeriodTypeCode,
911
} from './date';
1012
import { formatWithLocale } from '.';
1113
import { createLocaleSettings, defaultLocale } from './locale';
@@ -518,3 +520,17 @@ describe('getWeekStartsOnFromIntl() tokens', () => {
518520
expect(val).toBe(DayOfWeek.Monday);
519521
});
520522
});
523+
524+
describe('getPeriodTypeByCode()', () => {
525+
it('week', () => {
526+
const val = getPeriodTypeByCode('WEEK');
527+
expect(val).toBe(PeriodType.Week);
528+
});
529+
});
530+
531+
describe('getPeriodTypeCode()', () => {
532+
it('BiWeek1Sat', () => {
533+
const val = getPeriodTypeCode(PeriodType.BiWeek1Sat);
534+
expect(val).toBe('BIWEEK1-SAT');
535+
});
536+
});

0 commit comments

Comments
 (0)