mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
351 lines
12 KiB
351 lines
12 KiB
<script lang="ts" setup> |
|
import { type CalendarRangeType, FormulaDataTypes, UITypes } from 'nocodb-sdk' |
|
import type { SelectProps } from 'ant-design-vue' |
|
|
|
const meta = inject(MetaInj, ref()) |
|
|
|
const { $api } = useNuxtApp() |
|
|
|
const activeView = inject(ActiveViewInj, ref()) |
|
|
|
const isLocked = inject(IsLockedInj, ref(false)) |
|
|
|
const IsPublic = inject(IsPublicInj, ref(false)) |
|
|
|
const isToolbarIconMode = inject( |
|
IsToolbarIconMode, |
|
computed(() => false), |
|
) |
|
|
|
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 showWeekends = computed({ |
|
get: () => !viewMetaProperties.value?.hide_weekend, |
|
set: (newValue) => { |
|
updateCalendarMeta({ |
|
meta: { |
|
hide_weekend: !newValue, |
|
}, |
|
}) |
|
}, |
|
}) |
|
|
|
const dateFieldOptions = computed<SelectProps['options']>(() => { |
|
return ( |
|
meta.value?.columns |
|
?.filter( |
|
(c) => |
|
[UITypes.DateTime, UITypes.Date, UITypes.CreatedTime, UITypes.LastModifiedTime].includes(c.uidt) || |
|
(c.uidt === UITypes.Formula && (c.colOptions as any)?.parsed_tree?.dataType === FormulaDataTypes.DATE), |
|
) |
|
.map((c) => ({ |
|
label: c.title, |
|
value: c.id, |
|
uidt: c.uidt, |
|
})) ?? [] |
|
).sort((a, b) => { |
|
const priority = { |
|
[UITypes.DateTime]: 1, |
|
[UITypes.Date]: 2, |
|
[UITypes.Formula]: 3, |
|
[UITypes.CreatedTime]: 4, |
|
[UITypes.LastModifiedTime]: 5, |
|
} |
|
|
|
return (priority[a.uidt] || 6) - (priority[b.uidt] || 6) |
|
}) |
|
}) |
|
|
|
watch( |
|
() => activeView.value?.id, |
|
async (newVal, oldVal) => { |
|
if (newVal !== oldVal && meta.value) { |
|
await loadViewColumns() |
|
} |
|
}, |
|
{ immediate: true }, |
|
) |
|
|
|
const calendarRange = computed<CalendarRangeType[]>(() => { |
|
const tempCalendarRange: CalendarRangeType[] = [] |
|
|
|
if (!activeView.value || !activeView.value.view) return tempCalendarRange |
|
activeView.value.view.calendar_range?.forEach((range) => { |
|
tempCalendarRange.push({ |
|
fk_from_column_id: range.fk_from_column_id, |
|
fk_to_column_id: range.fk_to_column_id, |
|
}) |
|
}) |
|
return tempCalendarRange |
|
}) |
|
|
|
// We keep the calendar range here and update it when the user selects a new range |
|
const _calendar_ranges = ref<CalendarRangeType[]>(calendarRange.value) |
|
|
|
const isSetup = computed(() => { |
|
return _calendar_ranges.value.length > 0 && _calendar_ranges.value[0].fk_from_column_id |
|
}) |
|
|
|
watch( |
|
calendarRangeDropdown, |
|
(newVal) => { |
|
if (!newVal && !isSetup.value) { |
|
calendarRangeDropdown.value = true |
|
if (_calendar_ranges.value.length === 0) { |
|
_calendar_ranges.value.push({ |
|
fk_from_column_id: undefined, |
|
fk_to_column_id: null, |
|
}) |
|
} |
|
} |
|
}, |
|
{ immediate: true }, |
|
) |
|
|
|
const saveCalendarRanges = async () => { |
|
if (activeView.value) { |
|
try { |
|
const calRanges = _calendar_ranges.value |
|
.filter((range) => range.fk_from_column_id) |
|
.map((range) => ({ |
|
fk_from_column_id: range.fk_from_column_id, |
|
fk_to_column_id: range.fk_to_column_id, |
|
})) |
|
await $api.dbView.calendarUpdate(activeView.value?.id as string, { |
|
calendar_range: calRanges as CalendarRangeType[], |
|
}) |
|
|
|
if (activeView.value.view) activeView.value.view.calendar_range = calRanges |
|
|
|
await loadCalendarMeta() |
|
await Promise.all([loadCalendarData(), loadSidebarData(), fetchActiveDates()]) |
|
// calendarRangeDropdown.value = false |
|
} catch (e) { |
|
console.log(e) |
|
message.error('There was an error while updating view!') |
|
} |
|
} else { |
|
message.error('Please select a view first') |
|
} |
|
} |
|
|
|
const removeRange = async (id: number) => { |
|
_calendar_ranges.value = _calendar_ranges.value.filter((_, i) => i !== id) |
|
await saveCalendarRanges() |
|
} |
|
|
|
const isDisabled = computed(() => { |
|
return ( |
|
dateFieldOptions.value.find((f) => f.value === calendarRange.value[0]?.fk_from_column_id)?.uidt === UITypes.DateTime && |
|
!isRangeEnabled.value |
|
) |
|
}) |
|
|
|
const onValueChange = async () => { |
|
_calendar_ranges.value = _calendar_ranges.value.map((range, i) => { |
|
if (i === 0) { |
|
return { |
|
fk_from_column_id: range.fk_from_column_id, |
|
fk_to_column_id: undefined, |
|
} |
|
} |
|
return range |
|
}) |
|
} |
|
</script> |
|
|
|
<template> |
|
<NcDropdown |
|
v-if="!IsPublic" |
|
v-model:visible="calendarRangeDropdown" |
|
:trigger="['click']" |
|
class="!xs:hidden" |
|
overlay-class-name="overflow-hidden" |
|
> |
|
<NcTooltip :disabled="!isToolbarIconMode" class="nc-calendar-btn"> |
|
<template #title> |
|
{{ $t('activity.settings') }} |
|
</template> |
|
|
|
<NcButton |
|
v-e="['c:calendar:change-calendar-range']" |
|
class="nc-toolbar-btn !border-0 group !h-6" |
|
size="small" |
|
type="secondary" |
|
data-testid="nc-calendar-range-btn" |
|
:show-as-disabled="isLocked" |
|
> |
|
<div class="flex items-center gap-2"> |
|
<component :is="iconMap.calendar" class="h-4 w-4" /> |
|
<span v-if="!isToolbarIconMode" class="text-capitalize !text-[13px] font-medium"> |
|
{{ $t('activity.settings') }} |
|
</span> |
|
</div> |
|
</NcButton> |
|
</NcTooltip> |
|
|
|
<template #overlay> |
|
<div v-if="calendarRangeDropdown" class="w-108 space-y-6 rounded-2xl p-6" data-testid="nc-calendar-range-menu" @click.stop> |
|
<div |
|
v-for="(range, id) in _calendar_ranges" |
|
:key="id" |
|
class="flex flex-col w-full gap-2 mb-2" |
|
data-testid="nc-calendar-range-option" |
|
> |
|
<span class="text-gray-800"> |
|
{{ $t('labels.organiseBy') }} |
|
</span> |
|
|
|
<a-select |
|
v-model:value="range.fk_from_column_id" |
|
class="nc-select-shadow w-full !rounded-lg" |
|
dropdown-class-name="!rounded-lg" |
|
:placeholder="$t('placeholder.notSelected')" |
|
data-testid="nc-calendar-range-from-field-select" |
|
:disabled="isLocked" |
|
@change=" |
|
() => { |
|
onValueChange() |
|
saveCalendarRanges() |
|
} |
|
" |
|
@click.stop |
|
> |
|
<template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template> |
|
<a-select-option |
|
v-for="(option, opId) in [...(dateFieldOptions ?? [])].filter((r) => { |
|
if (id === 0) return true |
|
const firstRange = (dateFieldOptions ?? []).find((f) => f.value === calendarRange[0].fk_from_column_id) |
|
return firstRange?.uidt === r.uidt |
|
})" |
|
:key="opId" |
|
:value="option.value" |
|
> |
|
<div class="w-full flex gap-2 items-center justify-between" :title="option.label"> |
|
<div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]"> |
|
<SmartsheetHeaderIcon :column="option" /> |
|
|
|
<NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only> |
|
<template #title> |
|
{{ option.label }} |
|
</template> |
|
<template #default>{{ option.label }}</template> |
|
</NcTooltip> |
|
</div> |
|
<GeneralIcon |
|
v-if="option.value === range.fk_from_column_id" |
|
id="nc-selected-item-icon" |
|
icon="check" |
|
class="flex-none text-primary w-4 h-4" |
|
/> |
|
</div> |
|
</a-select-option> |
|
</a-select> |
|
<NcTooltip v-if="range.fk_to_column_id === null && isRangeEnabled" placement="left" :disabled="!isDisabled"> |
|
<NcButton |
|
size="small" |
|
data-testid="nc-calendar-range-add-end-date" |
|
class="w-23" |
|
type="text" |
|
:shadow="false" |
|
:disabled="!isEeUI || isLocked || isDisabled" |
|
@click="range.fk_to_column_id = undefined" |
|
> |
|
<div class="flex gap-1 items-center"> |
|
<component :is="iconMap.plus" class="h-4 w-4" /> |
|
{{ $t('activity.endDate') }} |
|
</div> |
|
</NcButton> |
|
<template #title> Coming Soon!! Currently, range support is only available for Date field. </template> |
|
</NcTooltip> |
|
|
|
<template v-else-if="isEeUI"> |
|
<span> |
|
{{ $t('activity.withEndDate') }} |
|
</span> |
|
<div class="flex"> |
|
<a-select |
|
v-model:value="range.fk_to_column_id" |
|
class="!rounded-r-none nc-select-shadow w-full flex-1" |
|
allow-clear |
|
:disabled="!range.fk_from_column_id || isLocked || isDisabled" |
|
:placeholder="$t('placeholder.notSelected')" |
|
data-testid="nc-calendar-range-to-field-select" |
|
dropdown-class-name="!rounded-lg" |
|
@change="saveCalendarRanges" |
|
@click.stop |
|
> |
|
<template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template> |
|
|
|
<a-select-option |
|
v-for="(option, opId) in [...dateFieldOptions].filter((f) => { |
|
const firstRange = dateFieldOptions.find((f) => f.value === calendarRange[0].fk_from_column_id) |
|
return firstRange?.uidt === f.uidt && f.value !== range.fk_from_column_id |
|
})" |
|
:key="opId" |
|
:value="option.value" |
|
> |
|
<div class="w-full flex gap-2 items-center justify-between" :title="option.label"> |
|
<div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]"> |
|
<SmartsheetHeaderIcon :column="option" /> |
|
|
|
<NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only> |
|
<template #title> |
|
{{ option.label }} |
|
</template> |
|
<template #default>{{ option.label }}</template> |
|
</NcTooltip> |
|
</div> |
|
<GeneralIcon |
|
v-if="option.value === range.fk_from_column_id" |
|
id="nc-selected-item-icon" |
|
icon="check" |
|
class="flex-none text-primary w-4 h-4" |
|
/> |
|
</div> |
|
</a-select-option> |
|
</a-select> |
|
</div> |
|
</template> |
|
|
|
<NcButton v-if="id !== 0" size="small" type="secondary" @click="removeRange(id)"> |
|
<component :is="iconMap.close" /> |
|
</NcButton> |
|
</div> |
|
|
|
<div v-if="!isSetup" class="flex items-center gap-2 !mt-2"> |
|
<GeneralIcon icon="warning" class="text-sm mt-0.5 text-orange-500" /> |
|
<span class="text-sm text-gray-500"> Date field is required! </span> |
|
</div> |
|
|
|
<div> |
|
<NcSwitch v-model:checked="showWeekends" :disabled="isLocked"> |
|
<span class="text-gray-800 font-semibold"> |
|
{{ $t('activity.showSaturdaysAndSundays') }} |
|
</span> |
|
</NcSwitch> |
|
</div> |
|
|
|
<!-- |
|
<div class="text-[13px] text-gray-500 py-2">Records in this view will be based on the specified date field.</div> |
|
--> |
|
<GeneralLockedViewFooter v-if="isLocked" class="!-mb-4 -mx-4" @on-open="calendarRangeDropdown = false" /> |
|
</div> |
|
</template> |
|
</NcDropdown> |
|
</template> |
|
|
|
<style lang="scss"> |
|
.nc-to-select .ant-select-selector { |
|
@apply !rounded-r-none; |
|
} |
|
</style>
|
|
|