fix(date-picker): normalize to date format

apps/admin/src/components/forms/date-picker.vue

@@ -33,62 +33,59 @@
   </v-dialog>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { PropType } from 'vue';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
+import { useDate } from 'vuetify';
 
 import { formatDate } from '@intake24/admin/util';
 
-export default defineComponent({
-  name: 'DatePicker',
+defineOptions({ name: 'DatePicker' });
 
-  props: {
-    clearable: {
-      type: Boolean,
-    },
-    errorMessages: {
-      type: [String, Array] as PropType<string | string[]>,
-    },
-    label: {
-      type: String,
-    },
-    modelValue: {
-      type: [Date, String] as PropType<string | Date | null>,
-    },
+const props = defineProps({
+  clearable: {
+    type: Boolean,
   },
+  errorMessages: {
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  label: {
+    type: String,
+  },
+  modelValue: {
+    type: [Date, String] as PropType<string | Date | null>,
+  },
+});
 
-  emits: ['update:modelValue', 'change'],
-
-  setup(props, { emit }) {
-    const toDate = (val: string | Date | null | undefined): Date | null => {
-      if (val instanceof Date)
-        return val;
+const emit = defineEmits(['update:modelValue', 'change']);
 
-      if (typeof val === 'string')
-        return new Date(val);
+const adapter = useDate();
 
-      return null;
-    };
-    const dialog = ref(false);
-    const internalValue = ref(toDate(props.modelValue));
+function toDate(val: string | Date | null | undefined): Date | null {
+  if (val instanceof Date)
+    return adapter.parseISO(val.toISOString().substring(0, 10)) as Date;
 
-    const formattedValue = computed(() => props.modelValue ? formatDate(props.modelValue, 'dd/MM/yyyy') : '');
+  if (typeof val === 'string')
+    return adapter.parseISO(new Date(val).toISOString().substring(0, 10)) as Date;
 
-    watch(() => props.modelValue, (val) => {
-      if (toDate(val) === internalValue.value)
-        return;
+  return null;
+}
 
-      internalValue.value = toDate(val);
-    });
+const dialog = ref(false);
+const internalValue = ref(toDate(props.modelValue));
+const formattedValue = computed(() => props.modelValue ? formatDate(props.modelValue, 'dd/MM/yyyy') : '');
 
-    function update() {
-      emit('update:modelValue', internalValue.value);
-      dialog.value = false;
-    }
+watch(() => props.modelValue, (val) => {
+  if (toDate(val) === internalValue.value)
+    return;
 
-    return { dialog, formattedValue, internalValue, update };
-  },
+  internalValue.value = toDate(val);
 });
+
+function update() {
+  emit('update:modelValue', internalValue.value ? adapter.toISO(internalValue.value).substring(0, 10) : null);
+  dialog.value = false;
+}
 </script>
 
 <style scoped></style>

apps/admin/src/composables/entry/use-entry-watch.ts

@@ -1,14 +1,15 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { NavigationGuardNext, Route } from 'vue-router';
+import type { NavigationGuardNext, RouteLocationNormalized, RouteLocationNormalizedLoaded } from 'vue-router';
 import { computed, ref } from 'vue';
 import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
 
+import type { RouteLeave } from '@intake24/admin/types';
 import { copy } from '@intake24/common/util';
 
 export function useEntryWatch(originalEntry: Ref<object>, changed?: ComputedRef<boolean>) {
-  const routeLeave = ref({
+  const routeLeave = ref<RouteLeave>({
     dialog: false,
-    to: null as Route | null,
+    to: null,
     confirmed: false,
   });
 
@@ -18,7 +19,7 @@ export function useEntryWatch(originalEntry: Ref<object>, changed?: ComputedRef<
     originalEntry.value = copy(data);
   };
 
-  const beforeRouteCheck = (to: Route, from: Route, next: NavigationGuardNext) => {
+  const beforeRouteCheck = (to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded, next: NavigationGuardNext) => {
     if (routeLeave.value.confirmed) {
       routeLeave.value = { dialog: false, to: null, confirmed: false };
       next();

apps/admin/src/stores/entry.ts

@@ -2,7 +2,7 @@ import axios, { HttpStatusCode } from 'axios';
 import { defineStore } from 'pinia';
 
 import type { Dictionary } from '@intake24/common/types';
-import type { UserSecurableAttributes } from '@intake24/db';
+import type { UserSecurableAttributes } from '@intake24/common/types/http/admin';
 
 import { httpService } from '../services';
 import { useResource } from './resource';

apps/admin/src/types/common.ts

@@ -1,4 +1,4 @@
-import type { RouteLocationRaw } from 'vue-router';
+import type { RouteLocationNormalized } from 'vue-router';
 
 export interface Resource {
   group: string;
@@ -16,7 +16,7 @@ export interface Resource {
 
 export type RouteLeave = {
   dialog: boolean;
-  to: RouteLocationRaw | null;
+  to: RouteLocationNormalized | null;
   confirmed: boolean;
 };
 

apps/admin/src/types/globals.d.ts

@@ -8,7 +8,7 @@ declare module 'vue' {
     can: (permission: string | string[] | Permission) => boolean;
 
     // loadingMixin
-    isAppLoading: () => boolean;
+    isAppLoading: boolean;
 
     // moduleMixin
     module: string;

apps/admin/src/views/surveys/form.vue

@@ -649,20 +649,10 @@ export default defineComponent({
     const infoComponentType = ref(undefined as string | undefined);
     const infoPopupOpen = ref(false);
 
-    const loadCallback = (data: SurveyEntry) => {
-      const { startDate, endDate, ...rest } = data;
-      return {
-        ...rest,
-        startDate: new Date(data.startDate),
-        endDate: new Date(data.endDate),
-      };
-    };
-
     useEntryFetch(props);
     const { clearError, form, routeLeave, submit } = useEntryForm<SurveyForm, SurveyEntry>(props, {
       data: surveyForm,
       editMethod: 'patch',
-      loadCallback,
     });
 
     const showInformationPopup = (type: string) => {

apps/admin/src/views/surveys/tasks/browse.vue

@@ -87,8 +87,8 @@ export default defineComponent({
       SurveyAuthUrlsExport: { surveyId: props.id },
       SurveyDataExport: {
         surveyId: props.id,
-        startDate: new Date(entry.value.startDate),
-        endDate: new Date(entry.value.endDate),
+        startDate: entry.value.startDate,
+        endDate: entry.value.endDate,
       },
       SurveyNutrientsRecalculation: { surveyId: props.id },
       SurveyRatingsExport: { surveyId: props.id },

apps/survey/src/types/globals.d.ts

@@ -5,7 +5,7 @@ declare module 'vue' {
     $http: HttpClient;
 
     // loading mixin
-    isAppLoading: () => boolean;
+    isAppLoading: boolean;
   }
 }
 

packages/ui/src/types/common.ts

@@ -1,4 +1,4 @@
-import type { UserSecurableAttributes } from '@intake24/db';
+import type { UserSecurableAttributes } from '@intake24/common/types/http/admin';
 
 export interface Permission {
   resource?: string;

packages/ui/src/types/globals.d.ts

@@ -8,7 +8,7 @@ declare module 'vue' {
     can: (permission: string | string[] | Permission) => boolean;
 
     // loadingMixin
-    isAppLoading: () => boolean;
+    isAppLoading: boolean;
 
     // moduleMixin
     module: string;