Simplify calendar layout's first day options (#16617)

* Simplify calendar layout's first day options

* use type that is more technically accurate
This commit is contained in:
Azri Kahar
2023-01-10 06:19:49 +08:00
committed by GitHub
parent c249d58a8c
commit 986984e113
2 changed files with 44 additions and 12 deletions

View File

@@ -0,0 +1,38 @@
import { mount } from '@vue/test-utils';
import { GlobalMountOptions } from '@vue/test-utils/dist/types';
import { beforeAll, expect, test, vi } from 'vitest';
import { createI18n, I18n } from 'vue-i18n';
import Options from './options.vue';
let i18n: I18n;
let global: GlobalMountOptions;
beforeAll(() => {
i18n = createI18n({
legacy: false,
});
// silences locale message not found warnings
vi.spyOn(i18n.global, 't').mockImplementation((key: string) => key);
global = {
stubs: ['v-field-template', 'v-select'],
plugins: [i18n],
};
});
test('should have days array in firstDayOptions variable', async () => {
const wrapper = mount(Options, {
props: {
collection: 'test',
dateFields: ['test'],
},
shallow: true,
global,
});
const expected = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
expect(wrapper.vm.firstDayOptions.map((option: { text: string; value: number }) => option.text)).toEqual(expected);
});

View File

@@ -29,7 +29,7 @@
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { defineComponent, PropType, ref, onMounted } from 'vue';
import { defineComponent, PropType } from 'vue';
import { Field } from '@directus/shared/types';
import { useSync } from '@directus/shared/composables';
import { localizedFormat } from '@/utils/localized-format';
@@ -72,17 +72,11 @@ export default defineComponent({
const endDateFieldWritable = useSync(props, 'endDateField', emit);
const firstDayWritable = useSync(props, 'firstDay', emit);
const firstDayOptions = ref<Record<string, any>[]>([]);
onMounted(async () => {
const firstDayOfWeekForDate = startOfWeek(new Date());
firstDayOptions.value = await Promise.all(
[...Array(7).keys()].map(async (_, i) => ({
text: localizedFormat(add(firstDayOfWeekForDate, { days: i }), 'EEEE'),
value: i,
}))
);
});
const firstDayOfWeekForDate = startOfWeek(new Date());
const firstDayOptions: { text: string; value: number }[] = [...Array(7).keys()].map((_, i) => ({
text: localizedFormat(add(firstDayOfWeekForDate, { days: i }), 'EEEE'),
value: i,
}));
return { t, templateWritable, startDateFieldWritable, endDateFieldWritable, firstDayWritable, firstDayOptions };
},