Browse Source

feat(nc-gui): calendarRange options

pull/7611/head
DarkPhoenix2704 9 months ago
parent
commit
cb78e2b9cd
  1. 9
      packages/nc-gui/components/smartsheet/Toolbar.vue
  2. 177
      packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
  3. 6
      packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
  4. 2
      packages/nc-gui/composables/useSmartsheetStore.ts
  5. 3
      packages/nc-gui/lang/en.json

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

@ -10,7 +10,7 @@ import {
useViewsStore,
} from '#imports'
const { isGrid, isGallery, isKanban, isMap } = useSmartsheetStoreOrThrow()
const { isGrid, isGallery, isKanban, isMap, isCalendar } = useSmartsheetStoreOrThrow()
const isPublic = inject(IsPublicInj, ref(false))
@ -30,16 +30,17 @@ const { allowCSVDownload } = useSharedView()
</template>
<template v-else>
<LazySmartsheetToolbarMappedBy v-if="isMap" />
<LazySmartsheetToolbarCalendarRange v-if="isCalendar" />
<LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap" :show-system-fields="false" />
<LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap || isCalendar" :show-system-fields="false" />
<LazySmartsheetToolbarStackedBy v-if="isKanban" />
<LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap" />
<LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap || isCalendar" />
<LazySmartsheetToolbarGroupByMenu v-if="isGrid" />
<LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
<LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban || isCalendar" />
<template v-if="!isMobileMode">
<LazySmartsheetToolbarRowHeight v-if="isGrid" />

177
packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue

@ -0,0 +1,177 @@
<script lang="ts" setup>
import {isSystemColumn, UITypes} from 'nocodb-sdk'
import type {SelectProps} from 'ant-design-vue'
import {
ActiveViewInj,
computed,
iconMap,
inject,
IsLockedInj,
IsPublicInj,
MetaInj,
ref,
useSmartsheetStoreOrThrow,
useViewColumnsOrThrow,
watch,
} from '#imports'
const {eventBus} = useSmartsheetStoreOrThrow()
const meta = inject(MetaInj, ref())
const { $e } = useNuxtApp()
const activeView = inject(ActiveViewInj, ref())
const isLocked = inject(IsLockedInj, ref(false))
const IsPublic = inject(IsPublicInj, ref(false))
const {fields, loadViewColumns, metaColumnById} = useViewColumnsOrThrow()
const calendarRangeDropdown = ref(false)
watch(
() => activeView.value?.id,
async (newVal, oldVal) => {
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,
// })
// }
// })
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 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,
})
}
} catch (e) {
console.log(e)
message.error('There was an error while updating view!')
}
} else {
message.error('Please select a view first')
}
}
// To add new calendar range
const addCalendarRange = async () => {
_calendar_ranges.value.push({
fk_from_column_id: '',
fk_to_column_id: null,
})
}
const dateFieldOptions = computed<SelectProps['options']>(() => {
return meta.value?.columns
?.filter((c) => {
if (c.uidt === UITypes.Date || c.uidt === UITypes.DateTime && !isSystemColumn(c)) {
return true
}
})
.map((c) => ({
label: c.title,
value: c.id,
})) ?? []
})
</script>
<template>
<NcDropdown v-if="!IsPublic" v-model:visible="calendarRangeDropdown" :trigger="['click']" class="!xs:hidden">
<div class="nc-calendar-btn">
<a-button v-e="['c:calendar:change-calendar-range']" :disabled="isLocked"
class="nc-calendar-range-btn nc-toolbar-btn">
<div class="flex items-center gap-2">
<component :is="iconMap.calendar" class="h-4 w-4"/>
<span class="text-capitalize !text-sm font-medium">
{{ $t('activity.viewSettings') }}
</span>
</div>
</a-button>
</div>
<template #overlay>
<div
v-if="calendarRangeDropdown"
class="flex flex-col w-full p-6 w-[40rem]"
@click.stop
>
<div>
<span class="font-bold"> {{ $t('activity.calendar') + $t('activity.viewSettings') }}</span>
<a-divider class="!my-2"/>
</div>
<div v-for="cal in _calendar_ranges" class="flex w-full gap-3">
<div class="flex flex-col w-1/2">
<span>
{{ $t('labels.selectDateField') }}
</span>
<NcSelect
:value="cal.fk_from_column_id"
:options="dateFieldOptions"
class="w-full"
@click.stop
@change="saveCalendarRanges"
/>
</div>
<div v-if="cal.fk_to_column_id === null" class="flex flex-col justify-end w-1/2">
<div class="cursor-pointer flex items-center font-medium gap-1 mb-1"
@click="cal.fk_to_column_id = ''">
<component :is="iconMap.plus" class="h-4 w-4"/>
{{ $t('activity.setEndDate') }}
</div>
</div>
<div v-if="isEeUI && cal.fk_to_column_id !== null" class="flex flex-col w-1/2">
<div class="flex flex-row justify-between">
<span>
{{ $t('labels.selectEndDateField') }}
</span>
<component :is="iconMap.delete" class="h-4 w-4 cursor-pointer text-red-500"
@click="cal.fk_to_column_id = null"/>
</div>
<NcSelect
:value="cal.fk_to_column_id"
:options="dateFieldOptions"
:disabled="!cal.fk_from_column_id"
:placeholder="$t('placeholder.notSelected')"
class="w-full"
@click.stop
@change="saveCalendarRanges"
/>
</div>
</div>
</div>
</template>
</NcDropdown>
</template>

6
packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@ -297,7 +297,7 @@ useMenuCloseOnEsc(open)
<a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
<div class="flex items-center gap-2">
<GeneralIcon
v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY"
v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.CALENDAR"
icon="creditCard"
class="h-4 w-4"
/>
@ -305,7 +305,7 @@ useMenuCloseOnEsc(open)
<!-- Fields -->
<span v-if="!isMobileMode" class="text-capitalize text-sm font-medium">
<template v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY">
<template v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY || ViewTypes.CALENDAR">
{{ $t('title.editCards') }}
</template>
<template v-else>
@ -322,7 +322,7 @@ useMenuCloseOnEsc(open)
<template #overlay>
<div class="p-4 pr-0 bg-white w-90 rounded-2xl nc-table-toolbar-menu" data-testid="nc-fields-menu" @click.stop>
<div
v-if="!filterQuery && !isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN)"
v-if="!filterQuery && !isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.CALENDAR)"
class="flex flex-col gap-y-2 pr-4 mb-6"
>
<div class="flex text-sm select-none">Select cover image field</div>

2
packages/nc-gui/composables/useSmartsheetStore.ts

@ -36,6 +36,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
const isGallery = computed(() => view.value?.type === ViewTypes.GALLERY)
const isKanban = computed(() => view.value?.type === ViewTypes.KANBAN)
const isMap = computed(() => view.value?.type === ViewTypes.MAP)
const isCalendar = computed(() => view.value?.type === ViewTypes.CALENDAR)
const isSharedForm = computed(() => isForm.value && shared)
const xWhere = computed(() => {
let where
@ -89,6 +90,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
isGallery,
isKanban,
isMap,
isCalendar,
isSharedForm,
sorts,
nestedFilters,

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

@ -675,6 +675,9 @@
}
},
"activity": {
"setEndDate": "Set end date",
"calendar": "Calendar",
"viewSettings": "View settings",
"googleOAuth": "Google OAuth",
"registerOIDC": "Register OIDC Identity Provider",
"registerSAML": "Register SAML Identity Provider",

Loading…
Cancel
Save