From eb5d3eb56ee6175ce26c76a752962caa3bd13326 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 1 Aug 2022 14:16:46 +0530
Subject: [PATCH] refactor/gui-v2-added-Time-Picker

---
 packages/nc-gui-v2/components.d.ts            |  1 +
 packages/nc-gui-v2/components/cell/Time.vue   | 61 -----------------
 .../nc-gui-v2/components/cell/TimePicker.vue  | 66 +++++++++++++++++++
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  2 +-
 4 files changed, 68 insertions(+), 62 deletions(-)
 delete mode 100644 packages/nc-gui-v2/components/cell/Time.vue
 create mode 100644 packages/nc-gui-v2/components/cell/TimePicker.vue

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 72c980072e..52996769a3 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -52,6 +52,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']
diff --git a/packages/nc-gui-v2/components/cell/Time.vue b/packages/nc-gui-v2/components/cell/Time.vue
deleted file mode 100644
index 40954b39dd..0000000000
--- a/packages/nc-gui-v2/components/cell/Time.vue
+++ /dev/null
@@ -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/>.
- *
- */
--->
diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
new file mode 100644
index 0000000000..23b7d493fd
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 78550bdf39..1d71242759 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -178,7 +178,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"