github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix: ui fixes feat: move to engineering beta toggle feature

pull/9831/head
DarkPhoenix2704 2 days ago
parent
380e2b8f3c
commit
ef453e8baf
4 changed files with 131 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 198
      packages/nc-gui/components/dlg/ViewCreate.vue
  2. 28
      packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
  3. 7
      packages/nc-gui/composables/useBetaFeatureToggle.ts
  4. 3
      packages/nc-gui/lang/en.json

198
packages/nc-gui/components/dlg/ViewCreate.vue
Unescape View File

@ -323,6 +323,8 @@ const addCalendarRange = async () => {
}
*/
const isRangeEnabled = computed(() => isFeatureEnabled(FEATURE_FLAG.CALENDAR_VIEW_RANGE))
const enableDescription = ref(false)
const removeDescription = () => {
@ -977,116 +979,126 @@ const getPluralName = (name: string) => {
/>
</a-form-item>
<template v-if="form.type === ViewTypes.CALENDAR && !form.copy_from_id">
<div v-for="(range, index) in form.calendar_range" :key="`range-${index}`" class="flex flex-col w-full gap-2">
<div class="text-gray-800">
{{ $t('labels.organiseBy') }}
</div>
<NcSelect
v-model:value="range.fk_from_column_id"
:disabled="isMetaLoading"
:loading="isMetaLoading"
class="nc-select-shadow nc-from-select"
>
<a-select-option
v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
<div
v-for="(range, index) in form.calendar_range"
:key="`range-${index}`"
:class="{
'!gap-2': range.fk_to_column_id === null,
}"
class="flex flex-col w-full gap-6"
>
<div class="w-full space-y-2">
<div class="text-gray-800">
{{ $t('labels.organiseBy') }}
</div>
<NcSelect
v-model:value="range.fk_from_column_id"
:disabled="isMetaLoading"
:loading="isMetaLoading"
class="nc-select-shadow w-full nc-from-select"
>
<a-select-option
v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
// If the fk_from_column_id of first range is Date, then all the other ranges should be Date
// If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
if (index === 0) return true
const firstRange = viewSelectFieldOptions!.find((f) => f.value === form.calendar_range[0].fk_from_column_id)
return firstRange?.uidt === f.uidt
})"
:key="id"
class="w-40"
:value="option.value"
>
<div class="flex w-full gap-2 justify-between items-center">
<div class="flex gap-2 items-center">
<SmartsheetHeaderIcon :column="option" class="!ml-0" />
<NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
<template #title>{{ option.label }}</template>
{{ option.label }}
</NcTooltip>
</div>
<div class="flex-1" />
<component
:is="iconMap.check"
v-if="option.value === range.fk_from_column_id"
id="nc-selected-item-icon"
class="text-primary min-w-4 h-4"
/>
</div>
</a-select-option>
</NcSelect>
<NcButton
v-if="range.fk_to_column_id === null"
size="small"
class="!border-none w-28"
type="secondary"
:disabled="!isEeUI"
@click="range.fk_to_column_id = undefined"
>
<component :is="iconMap.plus" class="h-4 w-4" />
{{ $t('activity.addEndDate') }}
</NcButton>
<template v-else-if="isEeUI">
<span>
{{ $t('activity.withEndDate') }}
</span>
<div class="flex">
<NcSelect
v-model:value="range.fk_to_column_id"
:disabled="isMetaLoading"
:loading="isMetaLoading"
:placeholder="$t('placeholder.notSelected')"
class="nc-to-select flex-1"
:key="id"
class="w-40"
:value="option.value"
>
<a-select-option
v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
// If the fk_from_column_id of first range is Date, then all the other ranges should be Date
// If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
const firstRange = viewSelectFieldOptions.find(
(f) => f.value === form.calendar_range[0].fk_from_column_id,
)
return firstRange?.uidt === f.uidt && f.value !== range.fk_from_column_id
})"
:key="id"
:value="option.value"
>
<div class="flex items-center">
<SmartsheetHeaderIcon :column="option" />
<div class="flex w-full gap-2 justify-between items-center">
<div class="flex gap-2 items-center">
<SmartsheetHeaderIcon :column="option" class="!ml-0" />
<NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
<template #title>{{ option.label }}</template>
{{ option.label }}
</NcTooltip>
</div>
</a-select-option>
</NcSelect>
<NcButton
class="!rounded-l-none !border-l-0"
size="small"
type="secondary"
@click="range.fk_to_column_id = null"
>
<component :is="iconMap.delete" class="h-4 w-4" />
</NcButton>
</div>
<div class="flex-1" />
<component
:is="iconMap.check"
v-if="option.value === range.fk_from_column_id"
id="nc-selected-item-icon"
class="text-primary min-w-4 h-4"
/>
</div>
</a-select-option>
</NcSelect>
</div>
<div class="w-full space-y-2">
<NcButton
v-if="index !== 0"
v-if="range.fk_to_column_id === null && isRangeEnabled"
size="small"
class="!border-none w-28"
type="secondary"
@click="
() => {
form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
}
"
:disabled="!isEeUI"
@click="range.fk_to_column_id = undefined"
>
<component :is="iconMap.close" />
<component :is="iconMap.plus" class="h-4 w-4" />
{{ $t('activity.endDate') }}
</NcButton>
</template>
<template v-else-if="isEeUI && isRangeEnabled">
<span class="text-gray-700">
{{ $t('activity.withEndDate') }}
</span>
<div class="flex">
<NcSelect
v-model:value="range.fk_to_column_id"
:disabled="isMetaLoading"
:loading="isMetaLoading"
:placeholder="$t('placeholder.notSelected')"
class="nc-to-select flex-1"
>
<a-select-option
v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
// If the fk_from_column_id of first range is Date, then all the other ranges should be Date
// If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
const firstRange = viewSelectFieldOptions.find(
(f) => f.value === form.calendar_range[0].fk_from_column_id,
)
return firstRange?.uidt === f.uidt && f.value !== range.fk_from_column_id
})"
:key="id"
:value="option.value"
>
<div class="flex items-center">
<SmartsheetHeaderIcon :column="option" />
<NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
<template #title>{{ option.label }}</template>
{{ option.label }}
</NcTooltip>
</div>
</a-select-option>
</NcSelect>
<NcButton
class="!rounded-l-none !border-l-0"
size="small"
type="secondary"
@click="range.fk_to_column_id = null"
>
<component :is="iconMap.delete" class="h-4 w-4" />
</NcButton>
</div>
<NcButton
v-if="index !== 0"
size="small"
type="secondary"
@click="
() => {
form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
}
"
>
<component :is="iconMap.close" />
</NcButton>
</template>
</div>
</div>
<!-- <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">

28
packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
Unescape View File

@ -22,14 +22,18 @@ const { loadViewColumns } = useViewColumnsOrThrow()
const { loadCalendarMeta, loadCalendarData, loadSidebarData, fetchActiveDates, updateCalendarMeta, viewMetaProperties } =
useCalendarViewStoreOrThrow()
const { isFeatureEnabled } = useBetaFeatureToggle()
const isRangeEnabled = computed(() => isFeatureEnabled(FEATURE_FLAG.CALENDAR_VIEW_RANGE))
const calendarRangeDropdown = ref(false)
const hideWeekends = computed({
get: () => viewMetaProperties.value?.hide_weekend ?? false,
const showWeekends = computed({
get: () => !viewMetaProperties.value?.hide_weekend,
set: (newValue) => {
updateCalendarMeta({
meta: {
hide_weekend: newValue,
hide_weekend: !newValue,
},
})
},
@ -183,7 +187,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
class="flex flex-col w-full gap-2 mb-2"
data-testid="nc-calendar-range-option"
>
<span>
<span class="text-gray-800">
{{ $t('labels.organiseBy') }}
</span>
<NcSelect
@ -223,7 +227,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
</NcSelect>
<NcButton
v-if="range.fk_to_column_id === null"
v-if="range.fk_to_column_id === null && isRangeEnabled"
size="small"
data-testid="nc-calendar-range-add-end-date"
class="!border-none w-28"
@ -231,10 +235,12 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
:disabled="!isEeUI"
@click="range.fk_to_column_id = undefined"
>
<component :is="iconMap.plus" class="h-4 w-4" />
{{ $t('activity.addEndDate') }}
<div class="flex gap-2 items-center">
<component :is="iconMap.plus" class="h-4 w-4" />
{{ $t('activity.endDate') }}
</div>
</NcButton>
<template v-else-if="isEeUI">
<template v-else-if="isEeUI && isRangeEnabled">
<span>
{{ $t('activity.withEndDate') }}
</span>
@ -281,9 +287,9 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
</div>
<div>
<NcSwitch v-model:checked="hideWeekends" :disabled="isLocked">
<span class="text-gray-800">
{{ $t('activity.hideWeekends') }}
<NcSwitch v-model:checked="showWeekends" :disabled="isLocked">
<span class="text-gray-800 font-semibold">
{{ $t('activity.showSaturdaysAndSundays') }}
</span>
</NcSwitch>
</div>

7
packages/nc-gui/composables/useBetaFeatureToggle.ts
Unescape View File

@ -43,6 +43,13 @@ const FEATURES = [
enabled: false,
isEngineering: true,
},
{
id: 'calendar_view_range',
title: 'Allow configuring End Date for Calendar View',
description: 'Enables the calendar to display items as date ranges by allowing configuration of both start and end dates. ',
enabled: false,
isEngineering: true,
},
]
export const FEATURE_FLAG = Object.fromEntries(FEATURES.map((feature) => [feature.id.toUpperCase(), feature.id])) as Record<

3
packages/nc-gui/lang/en.json
Unescape View File

@ -1053,7 +1053,7 @@
"activity": {
"assignView": "Assign view",
"webhookDetails": "Webhook Details",
"hideWeekends": "Hide weekends",
"showSaturdaysAndSundays": "Show Saturdays & Sundays",
"renameBase": "Rename Base",
"renameWorkspace": "Rename workspace",
"deactivate": "De-activate",
@ -1069,6 +1069,7 @@
"goToToday": "Go to Today",
"toggleSidebar": "Toggle Sidebar",
"addEndDate": "Add end date",
"endDate": "End Date",
"withEndDate": "with end date",
"calendar": "Calendar",
"viewSettings": "View settings",

Write Preview
Loading…
Cancel
Save