Browse Source

fix: instead of hiding disable current date button and add tooltip

pull/9259/head
Pranav C 3 months ago
parent
commit
fe07e230bd
  1. 2
      packages/nc-gui/components/cell/DatePicker.vue
  2. 2
      packages/nc-gui/components/cell/DateTimePicker.vue
  3. 2
      packages/nc-gui/components/nc/DatePicker.vue
  4. 25
      packages/nc-gui/components/nc/DateWeekSelector.vue
  5. 19
      packages/nc-gui/components/nc/MonthYearSelector.vue
  6. 26
      packages/nc-gui/components/nc/TimeSelector.vue
  7. 9
      packages/nc-gui/components/smartsheet/Cell.vue
  8. 1
      packages/nc-gui/lang/en.json

2
packages/nc-gui/components/cell/DatePicker.vue

@ -5,7 +5,7 @@ import { isDateMonthFormat, isSystemColumn } from 'nocodb-sdk'
interface Props { interface Props {
modelValue?: string | null modelValue?: string | null
isPk?: boolean isPk?: boolean
showCurrentDateOption?: boolean showCurrentDateOption?: boolean | 'disabled'
} }
const { modelValue, isPk } = defineProps<Props>() const { modelValue, isPk } = defineProps<Props>()

2
packages/nc-gui/components/cell/DateTimePicker.vue

@ -5,7 +5,7 @@ import { dateFormats, isSystemColumn, timeFormats } from 'nocodb-sdk'
interface Props { interface Props {
modelValue?: string | null modelValue?: string | null
isPk?: boolean isPk?: boolean
showCurrentDateOption?: boolean showCurrentDateOption?: boolean | 'disabled'
isUpdatedFromCopyNPaste?: Record<string, boolean> isUpdatedFromCopyNPaste?: Record<string, boolean>
} }

2
packages/nc-gui/components/nc/DatePicker.vue

@ -8,7 +8,7 @@ interface Props {
isCellInputField?: boolean isCellInputField?: boolean
type: 'date' | 'time' | 'year' | 'month' type: 'date' | 'time' | 'year' | 'month'
isOpen: boolean isOpen: boolean
showCurrentDateOption?: boolean showCurrentDateOption?: boolean | 'disabled'
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {

25
packages/nc-gui/components/nc/DateWeekSelector.vue

@ -15,7 +15,7 @@ interface Props {
} | null } | null
isCellInputField?: boolean isCellInputField?: boolean
pickerType?: 'date' | 'time' | 'year' | 'month' pickerType?: 'date' | 'time' | 'year' | 'month'
showCurrentDateOption?: boolean showCurrentDateOption?: boolean | 'disabled'
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
@ -255,15 +255,20 @@ const paginate = (action: 'next' | 'prev') => {
<NcButton class="nc-date-picker-now-btn !h-7" size="small" type="secondary" @click="handleSelectDate(dayjs())"> <NcButton class="nc-date-picker-now-btn !h-7" size="small" type="secondary" @click="handleSelectDate(dayjs())">
<span class="text-small"> {{ $t('labels.today') }} </span> <span class="text-small"> {{ $t('labels.today') }} </span>
</NcButton> </NcButton>
<NcButton <NcTooltip v-if="showCurrentDateOption" :disabled="showCurrentDateOption !== 'disabled'">
v-if="showCurrentDateOption" <template #title>
class="nc-date-picker-now-btn !h-7" {{ $t('tooltip.currentDateNotAvail') }}
size="small" </template>
type="secondary" <NcButton
@click="emit('currentDate')" class="nc-date-picker-current-date-btn !h-7"
> size="small"
<span class="text-small"> {{ $t('labels.currentDate') }} </span> type="secondary"
</NcButton> :disabled="showCurrentDateOption === 'disabled'"
@click="emit('currentDate')"
>
<span class="text-small"> {{ $t('labels.currentDate') }} </span>
</NcButton>
</NcTooltip>
</div> </div>
</div> </div>
</div> </div>

19
packages/nc-gui/components/nc/MonthYearSelector.vue

@ -8,7 +8,7 @@ interface Props {
hideCalendar?: boolean hideCalendar?: boolean
isCellInputField?: boolean isCellInputField?: boolean
pickerType?: 'date' | 'time' | 'year' | 'month' pickerType?: 'date' | 'time' | 'year' | 'month'
showCurrentDateOption?: boolean showCurrentDateOption?: boolean | 'disabled'
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
@ -186,9 +186,20 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
</div> </div>
<div v-if="showCurrentDateOption" class="flex items-center justify-center px-2 pb-2 pt-1"> <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')"> <NcTooltip :disabled="showCurrentDateOption !== 'disabled'">
<span class="text-small"> {{ $t('labels.currentDate') }} </span> <template #title>
</NcButton> {{ $t('tooltip.currentDateNotAvail') }}
</template>
<NcButton
class="nc-date-picker-now-btn !h-7"
size="small"
type="secondary"
:disabled="showCurrentDateOption === 'disabled'"
@click="emit('currentDate')"
>
<span class="text-small"> {{ $t('labels.currentDate') }} </span>
</NcButton>
</NcTooltip>
</div> </div>
</div> </div>
</div> </div>

26
packages/nc-gui/components/nc/TimeSelector.vue

@ -7,7 +7,7 @@ interface Props {
isMinGranularityPicker?: boolean isMinGranularityPicker?: boolean
minGranularity?: number minGranularity?: number
isOpen?: boolean isOpen?: boolean
showCurrentDateOption?: boolean showCurrentDateOption?: boolean | 'disabled'
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
@ -98,16 +98,20 @@ onMounted(() => {
<NcButton :tabindex="-1" class="!h-7" size="small" type="secondary" @click="handleSelectTime(dayjs())"> <NcButton :tabindex="-1" class="!h-7" size="small" type="secondary" @click="handleSelectTime(dayjs())">
<span class="text-small"> {{ $t('general.now') }} </span> <span class="text-small"> {{ $t('general.now') }} </span>
</NcButton> </NcButton>
<NcTooltip v-if="showCurrentDateOption" :disabled="showCurrentDateOption !== 'disabled'">
<NcButton <template #title>
v-if="showCurrentDateOption" {{ $t('tooltip.currentDateNotAvail') }}
class="nc-date-picker-now-btn !h-7" </template>
size="small" <NcButton
type="secondary" class="nc-date-picker-now-btn !h-7"
@click="emit('currentDate')" size="small"
> type="secondary"
<span class="text-small"> {{ $t('labels.currentDate') }} </span> :disabled="showCurrentDateOption === 'disabled'"
</NcButton> @click="emit('currentDate')"
>
<span class="text-small"> {{ $t('labels.currentDate') }} </span>
</NcButton>
</NcTooltip>
</div> </div>
</div> </div>
</template> </template>

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

@ -125,11 +125,10 @@ const onContextmenu = (e: MouseEvent) => {
} }
const showCurrentDateOption = computed(() => { const showCurrentDateOption = computed(() => {
return ( if (!isEditColumnMenu.value || (!isDate(column.value, abstractType.value) && !isDateTime(column.value, abstractType.value)))
isEditColumnMenu.value && return false
(isDate(column.value, abstractType.value) || isDateTime(column.value, abstractType.value)) &&
sqlUi.value?.getCurrentDateDefault?.(column.value) return sqlUi.value?.getCurrentDateDefault?.(column.value) ? true : 'disabled'
)
}) })
const currentDate = () => { const currentDate = () => {

1
packages/nc-gui/lang/en.json

@ -1245,6 +1245,7 @@
"goToDocs": "Go to Docs" "goToDocs": "Go to Docs"
}, },
"tooltip": { "tooltip": {
"currentDateNotAvail": "Current date option not available for the data source or the data type",
"privateConnection": "Enable to make this connection private and hidden from other creators in this workspace.", "privateConnection": "Enable to make this connection private and hidden from other creators in this workspace.",
"optionalDatabaseName": "Optional. Uses default database \"{database}\" if left blank", "optionalDatabaseName": "Optional. Uses default database \"{database}\" if left blank",
"optionalSchemaName": "Optional. Uses default schema \"{schema}\" if left blank.", "optionalSchemaName": "Optional. Uses default schema \"{schema}\" if left blank.",

Loading…
Cancel
Save