diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue index 2cac961c90..ab0a1d2ee9 100644 --- a/packages/nc-gui/components/dlg/ViewCreate.vue +++ b/packages/nc-gui/components/dlg/ViewCreate.vue @@ -2,7 +2,7 @@ import type { ComponentPublicInstance } from '@vue/runtime-core' import type { Form as AntForm, SelectProps } from 'ant-design-vue' import { capitalize } from '@vue/runtime-core' -import type { FormType, GalleryType, GridType, KanbanType, MapType, TableType } from 'nocodb-sdk' +import {CalendarType, FormType, GalleryType, GridType, KanbanType, MapType, TableType} from 'nocodb-sdk' import { UITypes, ViewTypes, isSystemColumn } from 'nocodb-sdk' import { computed, message, nextTick, onBeforeMount, reactive, ref, useApi, useI18n, useVModel, watch } from '#imports' @@ -14,11 +14,15 @@ interface Props { groupingFieldColumnId?: string geoDataFieldColumnId?: string tableId: string + calendar_range: Array<{ + fk_from_column_id: string, + fk_to_column_id: string | null // for ee only + }> } interface Emits { (event: 'update:modelValue', value: boolean): void - (event: 'created', value: GridType | KanbanType | GalleryType | FormType | MapType): void + (event: 'created', value: GridType | KanbanType | GalleryType | FormType | MapType | CalendarType): void } interface Form { @@ -83,10 +87,10 @@ const form = reactive
({ copy_from_id: null, fk_grp_col_id: null, fk_geo_data_col_id: null, - calendar_range: ViewTypes.CALENDAR === props.type ? { + calendar_range: ViewTypes.CALENDAR === props.type ? props.calendar_range : [{ fk_from_column_id: '', fk_to_column_id: null - } : null, + }], }) const viewSelectFieldOptions = ref([]) @@ -276,7 +280,7 @@ onMounted(async () => { // take the first option form.calendar_range = [{ fk_from_column_id: viewSelectFieldOptions.value[0].value as string, - fk_to_column_id: null + fk_to_column_id: null // for ee only }] } else { // if there is no grouping field column, disable the create button @@ -298,7 +302,8 @@ onMounted(async () => { :size="[ViewTypes.KANBAN, ViewTypes.MAP, ViewTypes.CALENDAR].includes(form.type) ? 'medium' : 'small'" >
- + { />
-
+
- {{ $t('labels.selectDateField') }} + {{ $t('labels.organizeRecordsBy') }}
-
+
+
+ + {{ $t('activity.setEndDate') }} +
+ +
+
+
- {{ $t('labels.selectEndDateField') }} + {{ $t('labels.endDateField') }} + +
{ if (newVal !== oldVal && meta.value) { await loadViewColumns() - // For now we are adding a calendar range by default - // TODO: Remove this when we have a way to add calendar range - await addCalendarRange() } }, {immediate: true}, ) -// TODO: Fetch calendar range from viewColumnsComposable const calendarRange = computed<{ fk_from_column_id: string; fk_to_column_id: string | null }[]>(() => { - const tempCalendarRange: { fk_from_column_id: string; fk_to_column_id: string | null }[] = [] - // Object.values(fields.value).forEach((col) => { - // if (col.calendar_range) { - // tempCalendarRange.push({ - // fk_from_col_id: col.fk_from_column_id, - // fk_to_column_id: col.fk_to_column_id, - // }) - // } - // }) + const tempCalendarRange: { fk_from_column_id: string; fk_to_column_id: string | null }[] = []; + + 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<{ fk_from_column_id: string; fk_to_column_id: string | null }[]>([]) +const _calendar_ranges = ref<{ fk_from_column_id: string; fk_to_column_id: string | null }[]>(calendarRange.value) const saveCalendarRanges = async () => { if(activeView.value) { try { - for(const range of _calendar_ranges.value) { - if(!range.fk_from_column_id) continue; - // TODO: Update calendar range in viewColumnsComposable - - $e('c:calendar:change-calendar-range', { - viewId: activeView.value.id, - fk_from_column_id: range.fk_from_column_id, - fk_to_column_id: range.fk_to_column_id, - }) + const calRanges = _calendar_ranges.value.map((range) => { + if (range.fk_from_column_id) { + return { + 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 { fk_from_column_id: string; fk_to_column_id: string | null }[], + }) } catch (e) { console.log(e) message.error('There was an error while updating view!') @@ -131,19 +128,19 @@ const dateFieldOptions = computed(() => {
-
+
- {{ $t('labels.selectDateField') }} + {{ $t('labels.organizeRecordsBy') }}
-
+
@@ -151,17 +148,19 @@ const dateFieldOptions = computed(() => {
-
+
- - {{ $t('labels.selectEndDateField') }} + {{ $t('labels.endDateField') }} + @click="() => { + cal.fk_to_column_id = null + saveCalendarRanges() + }"/>
-import type { ColumnType, GalleryType, KanbanType } from 'nocodb-sdk' +import {CalendarType, ColumnType, GalleryType, KanbanType} from 'nocodb-sdk' import { UITypes, ViewTypes, isVirtualCol } from 'nocodb-sdk' import Draggable from 'vuedraggable' @@ -151,7 +151,7 @@ const coverOptions = computed(() => { const updateCoverImage = async (val?: string | null) => { if ( - (activeView.value?.type === ViewTypes.GALLERY || activeView.value?.type === ViewTypes.KANBAN) && + (activeView.value?.type === ViewTypes.GALLERY || activeView.value?.type === ViewTypes.KANBAN || activeView.value?.type === ViewTypes.CALENDAR) && activeView.value?.id && activeView.value?.view ) { @@ -165,6 +165,11 @@ const updateCoverImage = async (val?: string | null) => { fk_cover_image_col_id: val, }) ;(activeView.value.view as KanbanType).fk_cover_image_col_id = val + } else if (activeView.value?.type === ViewTypes.CALENDAR) { + await $api.dbView.calendarUpdate(activeView.value?.id, { + fk_cover_image_col_id: val, + }) + ;(activeView.value.view as CalendarType).fk_cover_image_col_id = val } reloadViewMetaHook?.trigger() } @@ -173,7 +178,7 @@ const updateCoverImage = async (val?: string | null) => { const coverImageColumnId = computed({ get: () => { const fk_cover_image_col_id = - (activeView.value?.type === ViewTypes.GALLERY || activeView.value?.type === ViewTypes.KANBAN) && activeView.value?.view + (activeView.value?.type === ViewTypes.GALLERY || activeView.value?.type === ViewTypes.KANBAN || activeView.value?.type === ViewTypes.CALENDAR) && activeView.value?.view ? (activeView.value?.view as GalleryType).fk_cover_image_col_id : undefined // check if `fk_cover_image_col_id` is in `coverOptions` @@ -305,7 +310,7 @@ useMenuCloseOnEsc(open) -