Merge pull request #229 from lukashornych/dev

Release

package.json

@@ -21,7 +21,6 @@
     "@lukashornych/codemirror-lang-evitaql": "1.2.5",
     "@mdi/font": "7.0.96",
     "@types/dompurify": "^3.0.4",
-    "@types/js-cookie": "^3.0.3",
     "@types/keymaster": "^1.6.33",
     "@types/markdown-it": "^13.0.2",
     "@types/markdown-it-emoji": "^2.0.2",
@@ -34,7 +33,6 @@
     "graphql": "^16.7.1",
     "highlight.js": "^11.9.0",
     "immutable": "^4.3.6",
-    "js-cookie": "^3.0.5",
     "keymaster": "^1.6.2",
     "ky": "^0.33.3",
     "luxon": "^3.4.4",
@@ -47,7 +45,7 @@
     "splitpanes": "^3.1.5",
     "store2": "^2.14.2",
     "uuid": "^9.0.0",
-    "vue": "^3.2.0",
+    "vue": "^3.4.38",
     "vue-codemirror": "^6.1.1",
     "vue-histogram-slider": "^0.3.8",
     "vue-i18n": "9",

src/ModuleContextBuilder.ts

@@ -5,8 +5,7 @@ import { InitializationError } from '@/modules/base/exception/InitializationErro
 
 export class ModuleContextBuilder {
 
-    private readonly app: App
-
+    readonly app: App
     private readonly resourceIndex: Map<string, any> = new Map()
 
     constructor(app: App) {

src/ModuleRegistrar.ts

@@ -1,4 +1,3 @@
-import { App } from 'vue'
 import { ModuleContextBuilder } from '@/ModuleContextBuilder'
 
 // todo docs

src/modules/backup-viewer/components/BackupCatalogDialog.vue

@@ -40,7 +40,7 @@ const minDate = ref<DateTime | undefined>()
 const minDateLoaded = ref<boolean>(false)
 const maxDate = ref<DateTime | undefined>()
 const maxDateLoaded = ref<boolean>(false)
-const defaultTimeOffset = ref<string>('+00:00')
+const defaultTimeOffset = ref<string>()
 const defaultTimeOffsetLoaded = ref<boolean>(false)
 
 const catalogName = ref<string | undefined>(undefined)
@@ -53,7 +53,7 @@ watch(catalogName, async () => {
         minDate.value = undefined
     }
 })
-const pastMoment = ref<DateTime | undefined>()
+const pastMoment = ref<DateTime | undefined>(undefined)
 const includeWal = ref<boolean>(false)
 
 const changed = computed<boolean>(() =>

src/modules/base/component/VDateTimeInput.vue

@@ -5,6 +5,7 @@ import { computed, ref, watch } from 'vue'
 import { DateTime } from 'luxon'
 import VTimeOffsetPicker from '@/modules/base/component/VTimeOffsetPicker.vue'
 import { Toaster, useToaster } from '@/modules/notification/service/Toaster'
+import { timeOffsetFrom } from '@/utils/dateTime'
 
 enum Step {
     Date = 0,
@@ -17,27 +18,26 @@ const { t } = useI18n()
 
 const props = withDefaults(
     defineProps<{
-        modelValue?: DateTime,
         label?: string,
         disabled?: boolean,
         defaultTimeOffset?: string,
         min?: DateTime,
         max?: DateTime
     }>(),
     {
-        modelValue: undefined,
         label: undefined,
         disabled: false,
-        defaultTimeOffset: '+00:00'
+        defaultTimeOffset: () => timeOffsetFrom(DateTime.now())
     }
 )
-const emit = defineEmits<{
-    (e: 'update:modelValue', value: DateTime): void
-}>()
+
+/**
+ * Wizard
+ */
 
 const showMenu = ref<boolean>(false)
 watch(showMenu, (newValue) => {
-    if (!newValue) {
+    if (newValue) {
         currentStep.value = Step.Date
     }
 })
@@ -63,21 +63,30 @@ function goToNextStep(): void {
     }
 }
 
-const timeOffset = ref<string>(props.defaultTimeOffset)
+/**
+ * Raw data
+ */
+
+const timeOffset = ref<string>()
+const timeOffsetOverriddenByModel = ref<boolean>(false)
 watch(
     () => props.defaultTimeOffset,
-    () => timeOffset.value = props.defaultTimeOffset,
+    (newDefaultTimeOffset) => {
+        if (!timeOffsetOverriddenByModel.value) {
+            timeOffset.value = newDefaultTimeOffset
+        }
+    },
     { immediate: true }
 )
 
-const date = ref<Date>()
+const date = ref<Date | undefined>(undefined)
 const isoDate = computed<string | undefined>(() => {
     if (date.value == undefined) {
         return undefined
     }
     return `${date.value.getFullYear()}-${String(date.value.getMonth() + 1).padStart(2, '0')}-${String(date.value.getDate()).padStart(2, '0')}`
 })
-watch(date, (newValue) => {
+watch(date, (newValue, oldValue) => {
     if (newValue != undefined) {
         currentStep.value = Step.Time
     }
@@ -140,6 +149,10 @@ const maxTime = computed<string | undefined>(() => {
         })!
 })
 
+/**
+ * Computed data
+ */
+
 const computedOffsetDateTime = computed<DateTime | undefined>(() => {
     if (isoDate.value == undefined) {
         return undefined
@@ -159,29 +172,67 @@ const computedOffsetDateTime = computed<DateTime | undefined>(() => {
     return DateTime.fromISO(rawOffsetDateTime)
         .setZone(timeOffset.value) // a little bit of hack to not use default device locale
 })
-const displayedOffsetDateTime = ref<string>('')
 
-function confirm(): void {
+const model = defineModel<DateTime>({ required: false })
+watch(
+    model,
+    (newModel) => {
+        if (newModel == undefined) {
+            return
+        }
+        // We need to specify the date this way without specific time offset so
+        // that it thinks that the actual offset is the local offset.
+        // This makes sure that the picker displays correct date according to the
+        // actual offset not according to local offset of the device.
+        date.value = new Date(
+            newModel.year,
+            newModel.month - 1,
+            newModel.day,
+            newModel.hour,
+            newModel.minute,
+            newModel.second
+        )
+        time.value = newModel
+            .set({ millisecond: 0 })
+            .toISOTime({ includeOffset: false, suppressMilliseconds: true })!
+        timeOffset.value = timeOffsetFrom(newModel)
+        timeOffsetOverriddenByModel.value = true
+    },
+    { immediate: true }
+)
+
+const error = computed<string | undefined>(() => {
     if (computedOffsetDateTime.value == undefined) {
-        throw new Error('Missing offset date time.')
+        return undefined
     }
 
-    const offsetDateTime: DateTime = computedOffsetDateTime.value
-    if (props.min != undefined && offsetDateTime < props.min) {
-        toaster.error(t('common.input.dateTime.error.olderThanMin'))
-        currentStep.value = Step.Date
-        return
+    if (props.min != undefined && computedOffsetDateTime.value < props.min) {
+        return t('common.input.dateTime.error.olderThanMin')
     }
-    if (props.max != undefined && offsetDateTime > props.max) {
-        toaster.error(t('common.input.dateTime.error.newerThanMax'))
-        currentStep.value = Step.Date
+    if (props.max != undefined && computedOffsetDateTime.value > props.max) {
+        return t('common.input.dateTime.error.newerThanMax')
+    }
+
+    return undefined
+})
+
+const displayedOffsetDateTime = computed<string>(() => {
+    if (model.value == undefined) {
+        return ''
+    }
+    return model.value.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)
+})
+
+function confirm(): void {
+    if (computedOffsetDateTime.value == undefined) {
+        throw new Error('Missing offset date time.')
+    }
+    if (error.value != undefined) {
         return
     }
 
-    displayedOffsetDateTime.value = computedOffsetDateTime.value
-        .toLocaleString(DateTime.DATETIME_FULL)
     showMenu.value = false
-    emit('update:modelValue', offsetDateTime)
+    model.value = computedOffsetDateTime.value
 }
 </script>
 
@@ -200,7 +251,7 @@ function confirm(): void {
             activator="parent"
             min-width="0"
         >
-            <VSheet v-if="showMenu" elevation="6">
+            <VSheet v-if="showMenu" elevation="6" class="wizard">
                 <VWindow v-if="showMenu" v-model="currentStep">
                     <VWindowItem>
                         <VDatePicker
@@ -224,11 +275,21 @@ function confirm(): void {
                     </VWindowItem>
                 </VWindow>
 
-                <div v-if="currentStep < Step.TimeOffset" class="time-offset-info text-disabled">
+                <div v-if="currentStep < Step.TimeOffset" class="wizard__time-offset-info text-disabled">
                     {{ t('common.input.dateTime.help.timeOffset', { offset: timeOffset }) }}
                 </div>
 
-                <footer class="actions">
+                <VScrollXTransition v-show="error != undefined">
+                    <VAlert
+                        type="error"
+                        icon="mdi-alert-circle-outline"
+                        class="wizard__error-alert"
+                    >
+                        {{ error }}
+                    </VAlert>
+                </VScrollXTransition>
+
+                <footer class="wizard__actions">
                     <VBtn
                         v-if="currentStep > Step.Date"
                         variant="tonal"
@@ -251,6 +312,7 @@ function confirm(): void {
                     <VBtn
                         v-else-if="currentStep === Step.TimeOffset"
                         prepend-icon="mdi-check"
+                        :disabled="error != undefined"
                         @click="confirm"
                     >
                         {{ t('common.button.confirm') }}
@@ -262,14 +324,22 @@ function confirm(): void {
 </template>
 
 <style lang="scss" scoped>
-.time-offset-info {
-    text-align: center;
-    margin: 0 1rem 1rem;
-}
+.wizard {
+    width: min-content;
+
+    &__time-offset-info {
+        text-align: center;
+        margin: 0 1rem 1rem;
+    }
+
+    &__error-alert {
+        margin: 0 1rem 1rem;
+    }
 
-.actions {
-    display: flex;
-    padding: 0 1rem 1rem;
-    gap: 0.5rem;
+    &__actions {
+        display: flex;
+        padding: 0 1rem 1rem;
+        gap: 0.5rem;
+    }
 }
 </style>

src/modules/config/ConfigModuleRegistrar.ts

@@ -1,11 +1,13 @@
 import { ModuleRegistrar } from '@/ModuleRegistrar'
 import { EvitaLabConfig, evitaLabConfigInjectionKey } from '@/modules/config/EvitaLabConfig'
 import { ModuleContextBuilder } from '@/ModuleContextBuilder'
+import { Router } from 'vue-router'
 
 // todo docs
 export class ConfigModuleRegistrar implements ModuleRegistrar {
 
     register(builder: ModuleContextBuilder): void {
-        builder.provide(evitaLabConfigInjectionKey, EvitaLabConfig.load())
+        const router: Router = builder.app.config.globalProperties.$router
+        builder.provide(evitaLabConfigInjectionKey, EvitaLabConfig.load(router))
     }
 }