Merge pull request #2920 from nocodb/refactor/gui-v2-time-picker

vue3: Added TimePicker

packages/nc-gui-v2/components.d.ts

@@ -54,6 +54,7 @@ declare module '@vue/runtime-core' {
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
+    ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']

packages/nc-gui-v2/components/cell/Time.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { inject } from 'vue'
-
-interface Props {
-  modelValue: any
-}
-
-const props = defineProps<Props>()
-
-const emits = defineEmits(['update:modelValue', 'save'])
-
-const vModel = useVModel(props, 'modelValue', emits)
-
-const editEnabled = inject<boolean>('editEnabled')
-</script>
-
-<template>
-  <v-menu>
-    <template #activator="{ props: menuProps }">
-      <input v-model="vModel" class="value" v-bind="menuProps.onClick" />
-    </template>
-    <div class="d-flex flex-column justify-center" @click.stop>
-      <v-time-picker v-model="vModel" />
-      <v-btn small color="primary" @click="emits('save')">
-        <!-- Save -->
-        {{ $t('general.save') }}
-      </v-btn>
-    </div>
-  </v-menu>
-</template>
-
-<style scoped>
-.value {
-  width: 100%;
-  min-height: 20px;
-}
-</style>
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
--->

packages/nc-gui-v2/components/cell/TimePicker.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import { ReadonlyInj } from '~/context'
+
+const { modelValue } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+interface Props {
+  modelValue: string
+}
+
+const { isMysql } = useProject()
+
+const readOnlyMode = inject(ReadonlyInj, false)
+
+let isTimeInvalid = $ref(false)
+const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
+
+const localState = $computed({
+  get() {
+    if (!modelValue) {
+      return undefined
+    }
+
+    if (!dayjs(modelValue).isValid()) {
+      isTimeInvalid = true
+      return undefined
+    }
+
+    return dayjs(modelValue)
+  },
+  set(val?: dayjs.Dayjs) {
+    if (!val) {
+      emit('update:modelValue', null)
+      return
+    }
+
+    if (val.isValid()) {
+      const time = val.format('HH:mm')
+      const date = dayjs(`1999-01-01 ${time}:00`)
+      emit('update:modelValue', date.format(dateFormat))
+    }
+  },
+})
+</script>
+
+<template>
+  <a-time-picker
+    v-model:value="localState"
+    autofocus
+    :show-time="true"
+    :bordered="false"
+    use12-hours
+    format="HH:mm"
+    class="!w-full px-1"
+    :placeholder="isTimeInvalid ? 'Invalid time' : !readOnlyMode ? 'Select time' : ''"
+    :allow-clear="!readOnlyMode"
+    :input-read-only="true"
+    :open="readOnlyMode ? false : undefined"
+  >
+    <template #suffixIcon></template>
+  </a-time-picker>
+</template>
+
+<style scoped></style>

packages/nc-gui-v2/components/smartsheet/Cell.vue

@@ -177,7 +177,7 @@ todo :
     <CellDatePicker v-else-if="isDate" v-model="localState" />
     <CellYearPicker v-else-if="isYear" v-model="localState" />
     <CellDateTimePicker v-else-if="isDateTime" v-model="localState" />
-    <CellDateTimePicker v-else-if="isTime" v-model="localState" />
+    <CellTimePicker v-else-if="isTime" v-model="localState" />
     <CellRating v-else-if="isRating" v-model="localState" />
     <!--      v-model="localState"
           :active="active"