Improve secondary workflows dialog

src/assets/JsonFormsConfig.json

@@ -5,7 +5,8 @@
       "variant": "outlined"
     },
     "v-container": {
-      "class": "pa-0"
+      "class": "pa-0",
+      "density": "compact"
     }
   }
 }

src/components/general/DateTimeField.vue

@@ -1,40 +1,30 @@
 <template>
-  <div class="d-flex flex-row gc-2">
-    <v-menu :close-on-content-click="false">
-      <template #activator="{ props }">
-        <v-text-field
-          v-bind="props"
-          :model-value="dateString"
-          :label="dateLabel"
-          readonly
-        />
-      </template>
-      <v-date-picker v-model="internalDate" />
-    </v-menu>
-    <v-menu :close-on-content-click="false">
-      <template #activator="{ props }">
-        <v-text-field
-          v-bind="props"
-          :model-value="timeString"
-          :label="timeLabel"
-          readonly
-        />
-      </template>
-      <v-time-picker
-        v-model="internalTime"
-        format="24hr"
-        :use-seconds="false"
-        @update:hour="updateHours"
-        @update:minute="updateMinutes"
+  <v-row>
+    <v-col>
+      <v-date-input
+        prepend-icon=""
+        v-model="internalDate"
+        :label="dateLabel"
+        variant="outlined"
+        density="compact"
       />
-    </v-menu>
-  </div>
+    </v-col>
+    <v-col>
+      <v-text-field
+        v-model="timeString"
+        type="time"
+        variant="outlined"
+        density="compact"
+        :label="timeLabel"
+        cleatable
+      />
+    </v-col>
+  </v-row>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-
-import { VTimePicker } from 'vuetify/labs/components'
+import { computed, ref, watch } from 'vue'
+import { VDateInput } from 'vuetify/labs/components'
 
 interface Props {
   dateLabel?: string
@@ -54,47 +44,32 @@ const internalDate = computed<Date>({
     date.value = newDate
   },
 })
-const internalTime = computed<string>({
-  get: () => timeString.value,
-  set: (newValue) => {
-    const [hours, minutes] = newValue.split(':').map(parseFloat)
-
-    const newDate = new Date(date.value)
-    newDate.setHours(hours)
-    newDate.setMinutes(minutes)
-    date.value = newDate
-  },
-})
 
-// Get date and time from the text fields.
-const dateString = computed<string>(() => {
-  const year = date.value.getFullYear()
-  const month = date.value.getMonth()
-  const day = date.value.getDate()
+const timeString = ref('')
+// Update time string when the time was set from the picker.
+watch(
+  date,
+  () => {
+    const hours = date.value.getHours()
+    const minutes = date.value.getMinutes()
 
-  const monthString = (month + 1).toString().padStart(2, '0')
-  const dayString = day.toString().padStart(2, '0')
-  return `${year}-${monthString}-${dayString}`
-})
-
-const timeString = computed<string>(() => {
-  const hours = date.value.getHours()
-  const minutes = date.value.getMinutes()
-
-  const hoursString = hours.toString().padStart(2, '0')
-  const minutesString = minutes.toString().padStart(2, '0')
-  return `${hoursString}:${minutesString}`
-})
+    const hoursString = hours.toString().padStart(2, '0')
+    const minutesString = minutes.toString().padStart(2, '0')
+    timeString.value = `${hoursString}:${minutesString}`
+  },
+  { immediate: true },
+)
+</script>
 
-function updateHours(hours: number): void {
-  const newDate = new Date(date.value)
-  newDate.setHours(hours)
-  date.value = newDate
+<style>
+/* Hide the clock icon in Chrome, Edge, and other WebKit-based browsers */
+input[type='time']::-webkit-inner-spin-button,
+input[type='time']::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
 }
 
-function updateMinutes(minutes: number): void {
-  const newDate = new Date(date.value)
-  newDate.setMinutes(minutes)
-  date.value = newDate
+input[type='time']::-moz-selection {
+  background-color: tomato;
 }
-</script>
+</style>