feat: default date/datetime value as current date

3 months ago · f4e68271e2
16 changed files with 153 additions and 26 deletions
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@ -9,7 +9,7 @@ interface Props {

 const { modelValue, isPk } = defineProps<Props>()

-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'currentDate'])

 const { t } = useI18n()

@ -287,6 +287,11 @@ function handleSelectDate(value?: dayjs.Dayjs) {
  localState.value = value
  open.value = false
 }
+
+const currentDate = ($event) => {
+  emit('currentDate', $event)
+  open.value = false
+}
 </script>

 <template>
@ -336,6 +341,8 @@ function handleSelectDate(value?: dayjs.Dayjs) {
          :is-open="isOpen"
          type="month"
          size="medium"
+          :show-current-date-option="isEditColumn"
+          @currentDate="currentDate"
        />
        <NcDatePicker
          v-else
@ -344,7 +351,9 @@ function handleSelectDate(value?: dayjs.Dayjs) {
          :selected-date="localState"
          type="date"
          size="medium"
+          :show-current-date-option="isEditColumn"
          @update:selected-date="handleSelectDate"
+          @currentDate="currentDate"
        />
      </div>
    </template>
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@ -10,7 +10,7 @@ interface Props {

 const { modelValue, isPk, isUpdatedFromCopyNPaste } = defineProps<Props>()

-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'currentDate'])

 const timeFormatsObj = {
  [timeFormats[0]]: 'hh:mm A',
@ -425,6 +425,11 @@ const cellValue = computed(
    localState.value?.format(parseProp(column.value.meta).is12hrFormat ? timeFormatsObj[timeFormat.value] : timeFormat.value) ??
    '',
 )
+
+const currentDate = ($event) => {
+  open.value = false
+  emit('currentDate', $event)
+}
 </script>

 <template>
@ -510,7 +515,9 @@ const cellValue = computed(
            :is-open="isOpen"
            type="date"
            size="medium"
+            :show-current-date-option="isEditColumn"
            @update:selected-date="handleSelectDate"
+            @current-date="currentDate"
          />

          <template v-else>
@ -520,7 +527,9 @@ const cellValue = computed(
              is-min-granularity-picker
              :is12hr-format="!!parseProp(column.meta).is12hrFormat"
              :is-open="isOpen"
+              :show-current-date-option="isEditColumn"
              @update:selected-date="handleSelectTime"
+              @current-date="currentDate"
            />
          </template>
        </div>
--- a/packages/nc-gui/components/nc/DatePicker.vue
+++ b/packages/nc-gui/components/nc/DatePicker.vue
@ -8,6 +8,7 @@ interface Props {
  isCellInputField?: boolean
  type: 'date' | 'time' | 'year' | 'month'
  isOpen: boolean
+  showCurrentDateOption?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
@ -18,7 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
  type: 'date',
  isOpen: false,
 })
-const emit = defineEmits(['update:selectedDate', 'update:pageDate', 'update:selectedWeek'])
+const emit = defineEmits(['update:selectedDate', 'update:pageDate', 'update:selectedWeek', 'currentDate'])
 // Page date is the date we use to manage which month/date that is currently being displayed
 const pageDate = useVModel(props, 'pageDate', emit)

@ -133,7 +134,9 @@ onMounted(() => {
    :is-monday-first="false"
    is-cell-input-field
    size="medium"
+    :show-current-date-option="showCurrentDateOption"
    @update:picker-type="handleUpdatePickerType"
+    @current-date="emit('currentDate', $event)"
  />
  <NcMonthYearSelector
    v-if="['month', 'year'].includes(tempPickerType)"
@ -143,7 +146,9 @@ onMounted(() => {
    :is-year-picker="tempPickerType === 'year'"
    is-cell-input-field
    size="medium"
+    :show-current-date-option="showCurrentDateOption"
    @update:picker-type="handleUpdatePickerType"
+    @current-date="emit('currentDate', $event)"
  />
 </template>

--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@ -15,6 +15,7 @@ interface Props {
  } | null
  isCellInputField?: boolean
  pickerType?: 'date' | 'time' | 'year' | 'month'
+  showCurrentDateOption?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
@ -29,7 +30,7 @@ const props = withDefaults(defineProps<Props>(), {
  isCellInputField: false,
  pickerType: 'date',
 })
-const emit = defineEmits(['update:selectedDate', 'update:pageDate', 'update:selectedWeek', 'update:pickerType'])
+const emit = defineEmits(['update:selectedDate', 'update:pageDate', 'update:selectedWeek', 'update:pickerType', 'currentDate'])
 // Page date is the date we use to manage which month/date that is currently being displayed
 const pageDate = useVModel(props, 'pageDate', emit)

@ -250,10 +251,19 @@ const paginate = (action: 'next' | 'prev') => {
          </span>
        </span>
      </div>
-      <div v-if="isCellInputField" class="flex items-center justify-center px-2 pb-2 pt-1">
+      <div v-if="isCellInputField" class="flex items-center justify-center px-2 pb-2 pt-1 gap-2">
        <NcButton class="nc-date-picker-now-btn !h-7" size="small" type="secondary" @click="handleSelectDate(dayjs())">
          <span class="text-small"> {{ $t('labels.today') }} </span>
        </NcButton>
+        <NcButton
+          v-if="showCurrentDateOption"
+          class="nc-date-picker-now-btn !h-7"
+          size="small"
+          type="secondary"
+          @click="emit('currentDate')"
+        >
+          <span class="text-small"> {{ $t('labels.currentDate') }} </span>
+        </NcButton>
      </div>
    </div>
  </div>
--- a/packages/nc-gui/components/nc/MonthYearSelector.vue
+++ b/packages/nc-gui/components/nc/MonthYearSelector.vue
@ -8,6 +8,7 @@ interface Props {
  hideCalendar?: boolean
  isCellInputField?: boolean
  pickerType?: 'date' | 'time' | 'year' | 'month'
+  showCurrentDateOption?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
@ -18,7 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
  isCellInputField: false,
  pickerType: 'date',
 })
-const emit = defineEmits(['update:selectedDate', 'update:pageDate', 'update:pickerType'])
+const emit = defineEmits(['update:selectedDate', 'update:pageDate', 'update:pickerType', 'currentDate'])

 const pageDate = useVModel(props, 'pageDate', emit)

@ -183,6 +184,12 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
          </span>
        </template>
      </div>
+
+      <div v-if="showCurrentDateOption" class="flex items-center justify-center px-2 pb-2 pt-1">
+        <NcButton class="nc-date-picker-now-btn !h-7" size="small" type="secondary" @click="emit('currentDate')">
+          <span class="text-small"> {{ $t('labels.currentDate') }} </span>
+        </NcButton>
+      </div>
    </div>
  </div>
 </template>
--- a/packages/nc-gui/components/nc/TimeSelector.vue
+++ b/packages/nc-gui/components/nc/TimeSelector.vue
@ -7,6 +7,7 @@ interface Props {
  isMinGranularityPicker?: boolean
  minGranularity?: number
  isOpen?: boolean
+  showCurrentDateOption?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
@ -16,7 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
  minGranularity: 30,
  isOpen: false,
 })
-const emit = defineEmits(['update:selectedDate'])
+const emit = defineEmits(['update:selectedDate', ''])

 const pageDate = ref<dayjs.Dayjs>(dayjs())

@ -93,10 +94,20 @@ onMounted(() => {
      </div>
    </div>
    <div v-else></div>
-    <div class="px-2 py-1 box-border flex items-center justify-center">
+    <div class="px-2 py-1 box-border flex items-center justify-center gap-2">
      <NcButton :tabindex="-1" class="!h-7" size="small" type="secondary" @click="handleSelectTime(dayjs())">
        <span class="text-small"> {{ $t('general.now') }} </span>
      </NcButton>
+
+      <NcButton
+        v-if="showCurrentDateOption"
+        class="nc-date-picker-now-btn !h-7"
+        size="small"
+        type="secondary"
+        @click="emit('currentDate')"
+      >
+        <span class="text-small"> {{ $t('labels.currentDate') }} </span>
+      </NcButton>
    </div>
  </div>
 </template>
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@ -19,6 +19,8 @@ const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'update:editE

 const column = toRef(props, 'column')

+const meta = inject(MetaInj, ref())
+
 const active = toRef(props, 'active', false)

 const readOnly = toRef(props, 'readOnly', false)
@ -51,11 +53,9 @@ const { currentRow } = useSmartsheetRowStoreOrThrow()

 const { sqlUis } = storeToRefs(useBase())

-const sqlUi = ref(
-  column.value?.source_id && sqlUis.value[column.value?.source_id]
-    ? sqlUis.value[column.value?.source_id]
-    : Object.values(sqlUis.value)[0],
-)
+const sourceId = meta.value?.source_id || column.value?.source_id
+
+const sqlUi = ref(sourceId && sqlUis.value[sourceId] ? sqlUis.value[sourceId] : Object.values(sqlUis.value)[0])

 const abstractType = computed(() => column.value && sqlUi.value.getAbstractType(column.value))

@ -123,6 +123,18 @@ const onContextmenu = (e: MouseEvent) => {
    e.stopPropagation()
  }
 }
+
+const showCurrentDateOption = computed(() => {
+  return (
+    isEditColumnMenu.value &&
+    (isDate(column.value, abstractType.value) || isDateTime(column.value, abstractType.value)) &&
+    sqlUi.value?.getNowDefaultVal?.()
+  )
+})
+
+const currentDate = () => {
+  vModel.value = sqlUi.value?.getNowDefaultVal?.()
+}
 </script>

 <template>
@ -166,13 +178,21 @@ const onContextmenu = (e: MouseEvent) => {
        :disable-option-creation="!!isEditColumnMenu"
        :row-index="props.rowIndex"
      />
-      <LazyCellDatePicker v-else-if="isDate(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
+      <LazyCellDatePicker
+        v-else-if="isDate(column, abstractType)"
+        v-model="vModel"
+        :is-pk="isPrimaryKey(column)"
+        :show-current-date-option="showCurrentDateOption"
+        @current-date="currentDate"
+      />
      <LazyCellYearPicker v-else-if="isYear(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
      <LazyCellDateTimePicker
        v-else-if="isDateTime(column, abstractType)"
        v-model="vModel"
        :is-pk="isPrimaryKey(column)"
        :is-updated-from-copy-n-paste="currentRow.rowMeta.isUpdatedFromCopyNPaste"
+        :show-current-date-option="showCurrentDateOption"
+        @current-date="currentDate"
      />
      <LazyCellTimePicker v-else-if="isTime(column, abstractType)" v-model="vModel" :is-pk="isPrimaryKey(column)" />
      <LazyCellRating v-else-if="isRating(column)" v-model="vModel" />
--- a/packages/nc-gui/components/smartsheet/column/DefaultValue.vue
+++ b/packages/nc-gui/components/smartsheet/column/DefaultValue.vue
@ -10,6 +10,8 @@ provide(EditColumnInj, ref(true))

 const vModel = useVModel(props, 'value', emits)

+const meta = inject(MetaInj, ref())
+
 const isVisibleDefaultValueInput = useVModel(props, 'isVisibleDefaultValueInput', emits)

 const rowRef = ref({
@ -41,6 +43,21 @@ watch(
    cdfValue.value = newValue
  },
 )
+
+const { sqlUis } = storeToRefs(useBase())
+const sqlUi = computed(() =>
+  meta.value?.source_id && sqlUis.value[meta.value?.source_id]
+    ? sqlUis.value[meta.value?.source_id]
+    : Object.values(sqlUis.value)[0],
+)
+
+const showCurrentDateOption = computed(() => {
+  return [UITypes.Date, UITypes.DateTime].includes(vModel.value?.uidt) && sqlUi.value?.getNowDefaultVal?.()
+})
+
+const isCurrentDate = computed(() => {
+  return showCurrentDateOption.value && cdfValue.value?.toUpperCase?.() === sqlUi.value?.getNowDefaultVal?.()
+})
 </script>

 <template>
@ -63,10 +80,19 @@ watch(
    <div class="w-full flex items-center gap-2 mb-2">
      <div class="text-small leading-[18px] flex-1 text-gray-700">{{ $t('placeholder.defaultValue') }}</div>
    </div>
-    <div class="flex flex-row gap-2">
+    <div class="flex flex-row gap-2 relative">
      <div
        class="nc-default-value-wrapper border-1 flex items-center w-full px-3 border-gray-300 rounded-lg sm:min-h-[32px] xs:min-h-13 flex items-center focus-within:(border-brand-500 shadow-selected ring-0) transition-all duration-0.3s"
      >
+        <div class="relative flex-grow">
+          <div
+            v-if="isCurrentDate"
+            class="absolute pointer-events-none h-full w-full bg-white z-2 top-0 left-0 rounded-full items-center flex bg-white"
+          >
+            <div class="-ml-2">
+              <NcBadge>{{ $t('labels.currentDate') }}</NcBadge>
+            </div>
+          </div>
          <LazySmartsheetCell
            :edit-enabled="true"
            :model-value="cdfValue"
@ -76,14 +102,15 @@ watch(
            @update:edit-enabled="editEnabled = $event"
            @click="editEnabled = true"
          />
+        </div>
        <component
          :is="iconMap.close"
          v-if="
            ![UITypes.Year, UITypes.Date, UITypes.Time, UITypes.DateTime, UITypes.SingleSelect, UITypes.MultiSelect].includes(
              vModel.uidt,
-            )
+            ) || isCurrentDate
          "
-          class="w-4 h-4 cursor-pointer rounded-full !text-black-500 text-gray-500 cursor-pointer hover:bg-gray-50"
+          class="w-4 h-4 cursor-pointer rounded-full z-3 !text-black-500 text-gray-500 cursor-pointer hover:bg-gray-50"
          @click="updateCdfValue(null)"
        />
      </div>
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@ -662,6 +662,7 @@
    "metaSync": "Meta Sync",
    "mention": "Mention",
    "today": "Today",
+    "currentDate": "Current date",
    "workspace": "Workspace",
    "txt": "TXT Record value",
    "transferOwnership": "Transfer Ownership",
--- a/packages/nocodb-sdk/src/lib/sqlUi/DatabricksUi.ts
+++ b/packages/nocodb-sdk/src/lib/sqlUi/DatabricksUi.ts
@ -794,6 +794,10 @@ export class DatabricksUi {
    ];
  }

+  static getNowDefaultVal() {
+    return null;
+  }
+
  static isEqual(dataType1: string, dataType2: string) {
    if (dataType1 === dataType2) return true;

--- a/packages/nocodb-sdk/src/lib/sqlUi/MssqlUi.ts
+++ b/packages/nocodb-sdk/src/lib/sqlUi/MssqlUi.ts
@ -969,6 +969,10 @@ export class MssqlUi {
    ];
  }

+  static getNowDefaultVal() {
+    return null;
+  }
+
  static isEqual(dataType1: string, dataType2: string) {
    if (dataType1 === dataType2) return true;

--- a/packages/nocodb-sdk/src/lib/sqlUi/MysqlUi.ts
+++ b/packages/nocodb-sdk/src/lib/sqlUi/MysqlUi.ts
@ -1335,6 +1335,10 @@ export class MysqlUi {
    return ['COUNTA', 'COUNT', 'DATESTR'];
  }

+  static getNowDefaultVal() {
+    return null;
+  }
+
  static isEqual(dataType1: string, dataType2: string) {
    if (dataType1 === dataType2) return true;

--- a/packages/nocodb-sdk/src/lib/sqlUi/OracleUi.ts
+++ b/packages/nocodb-sdk/src/lib/sqlUi/OracleUi.ts
@ -952,6 +952,10 @@ export class OracleUi {
    ];
  }

+  static getNowDefaultVal() {
+    return null;
+  }
+
  static isEqual(dataType1: string, dataType2: string) {
    if (dataType1 === dataType2) return true;

--- a/packages/nocodb-sdk/src/lib/sqlUi/PgUi.ts
+++ b/packages/nocodb-sdk/src/lib/sqlUi/PgUi.ts
@ -2032,6 +2032,10 @@ export class PgUi {
    return [];
  }

+  static getNowDefaultVal() {
+    return 'NOW()';
+  }
+
  static isEqual(dataType1: string, dataType2: string) {
    if (dataType1?.toLowerCase() === dataType2?.toLowerCase()) return true;

--- a/packages/nocodb-sdk/src/lib/sqlUi/SnowflakeUi.ts
+++ b/packages/nocodb-sdk/src/lib/sqlUi/SnowflakeUi.ts
@ -1035,6 +1035,10 @@ export class SnowflakeUi {
    ];
  }

+  static getNowDefaultVal() {
+    return null;
+  }
+
  static isEqual(dataType1: string, dataType2: string) {
    if (dataType1 === dataType2) return true;

--- a/packages/nocodb-sdk/src/lib/sqlUi/SqliteUi.ts
+++ b/packages/nocodb-sdk/src/lib/sqlUi/SqliteUi.ts
@ -930,6 +930,10 @@ export class SqliteUi {
    ];
  }

+  static getNowDefaultVal() {
+    return null;
+  }
+
  static isEqual(dataType1: string, dataType2: string) {
    if (dataType1 === dataType2) return true;