多维表格
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.
 
 
 
 
 
 

556 lines
18 KiB

<script lang="ts" setup>
import type { ComponentPublicInstance } from '@vue/runtime-core'
import { capitalize } from '@vue/runtime-core'
import type { Form as AntForm, SelectProps } from 'ant-design-vue'
import type { 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'
interface Props {
modelValue: boolean
type: ViewTypes
title?: string
selectedViewId?: string
groupingFieldColumnId?: string
geoDataFieldColumnId?: string
tableId: string
calendarRange: 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 | CalendarType): void
}
interface Form {
title: string
type: ViewTypes
copy_from_id: string | null
// for kanban view only
fk_grp_col_id: string | null
fk_geo_data_col_id: string | null
// for calendar view only
calendar_range: Array<{
fk_from_column_id: string
fk_to_column_id: string | undefined // for ee only
}>
}
const props = withDefaults(defineProps<Props>(), {
selectedViewId: undefined,
groupingFieldColumnId: undefined,
geoDataFieldColumnId: undefined,
calendarRange: undefined,
})
const emits = defineEmits<Emits>()
const { getMeta } = useMetas()
const { viewsByTable } = storeToRefs(useViewsStore())
const { refreshCommandPalette } = useCommandPalette()
const { selectedViewId, groupingFieldColumnId, geoDataFieldColumnId, tableId } = toRefs(props)
const meta = ref<TableType | undefined>()
const inputEl = ref<ComponentPublicInstance>()
const formValidator = ref<typeof AntForm>()
const vModel = useVModel(props, 'modelValue', emits)
const { t } = useI18n()
const { api } = useApi()
const isViewCreating = ref(false)
const views = computed(() => viewsByTable.value.get(tableId.value) ?? [])
const isNecessaryColumnsPresent = ref(true)
const errorMessages = {
[ViewTypes.KANBAN]: t('msg.warning.kanbanNoFields'),
[ViewTypes.MAP]: t('msg.warning.mapNoFields'),
[ViewTypes.CALENDAR]: t('msg.warning.calendarNoFields'),
}
const form = reactive<Form>({
title: props.title || '',
type: props.type,
copy_from_id: null,
fk_grp_col_id: null,
fk_geo_data_col_id: null,
calendar_range: props.calendarRange || [],
})
const viewSelectFieldOptions = ref<SelectProps['options']>([])
const viewNameRules = [
// name is required
{ required: true, message: `${t('labels.viewName')} ${t('general.required')}` },
// name is unique
{
validator: (_: unknown, v: string) =>
new Promise((resolve, reject) => {
views.value.every((v1) => v1.title !== v) ? resolve(true) : reject(new Error(`View name should be unique`))
}),
message: 'View name should be unique',
},
]
const groupingFieldColumnRules = [{ required: true, message: `${t('general.groupingField')} ${t('general.required')}` }]
const geoDataFieldColumnRules = [{ required: true, message: `${t('general.geoDataField')} ${t('general.required')}` }]
const typeAlias = computed(
() =>
({
[ViewTypes.GRID]: 'grid',
[ViewTypes.GALLERY]: 'gallery',
[ViewTypes.FORM]: 'form',
[ViewTypes.KANBAN]: 'kanban',
[ViewTypes.MAP]: 'map',
[ViewTypes.CALENDAR]: 'calendar',
}[props.type]),
)
onBeforeMount(init)
watch(
() => props.type,
(newType) => {
form.type = newType
},
)
function init() {
form.title = `${capitalize(typeAlias.value)}`
const repeatCount = views.value.filter((v) => v.title.startsWith(form.title)).length
if (repeatCount) {
form.title = `${form.title}-${repeatCount}`
}
if (selectedViewId.value) {
form.copy_from_id = selectedViewId?.value
}
nextTick(() => {
const el = inputEl.value?.$el as HTMLInputElement
if (el) {
el.focus()
el.select()
}
})
}
async function onSubmit() {
let isValid = null
try {
isValid = await formValidator.value?.validateFields()
} catch (e) {
console.error(e)
}
if (isValid && form.type) {
if (!tableId.value) return
try {
let data: GridType | KanbanType | GalleryType | FormType | MapType | null = null
isViewCreating.value = true
switch (form.type) {
case ViewTypes.GRID:
data = await api.dbView.gridCreate(tableId.value, form)
break
case ViewTypes.GALLERY:
data = await api.dbView.galleryCreate(tableId.value, form)
break
case ViewTypes.FORM:
data = await api.dbView.formCreate(tableId.value, form)
break
case ViewTypes.KANBAN:
data = await api.dbView.kanbanCreate(tableId.value, form)
break
case ViewTypes.MAP:
data = await api.dbView.mapCreate(tableId.value, form)
break
case ViewTypes.CALENDAR:
data = await api.dbView.calendarCreate(tableId.value, {
...form,
calendar_range: form.calendar_range.map((range) => ({
fk_from_column_id: range.fk_from_column_id,
fk_to_column_id: range.fk_to_column_id,
})),
})
break
}
if (data) {
// View created successfully
// message.success(t('msg.toast.createView'))
emits('created', data)
}
} catch (e: any) {
message.error(e.message)
} finally {
await refreshCommandPalette()
}
vModel.value = false
setTimeout(() => {
isViewCreating.value = false
}, 500)
}
}
const addCalendarRange = async () => {
form.calendar_range.push({
fk_from_column_id: viewSelectFieldOptions.value[0].value as string,
fk_to_column_id: null,
})
}
const isMetaLoading = ref(false)
onMounted(async () => {
if (props.type === ViewTypes.KANBAN || props.type === ViewTypes.MAP || props.type === ViewTypes.CALENDAR) {
isMetaLoading.value = true
try {
meta.value = (await getMeta(tableId.value))!
if (props.type === ViewTypes.MAP) {
viewSelectFieldOptions.value = meta
.value!.columns!.filter((el) => el.uidt === UITypes.GeoData)
.map((field) => {
return {
value: field.id,
label: field.title,
}
})
if (geoDataFieldColumnId.value) {
// take from the one from copy view
form.fk_geo_data_col_id = geoDataFieldColumnId.value
} else if (viewSelectFieldOptions.value?.length) {
// if there is geo data column take the first option
form.fk_geo_data_col_id = viewSelectFieldOptions.value?.[0]?.value as string
} else {
// if there is no geo data column, disable the create button
isNecessaryColumnsPresent.value = false
}
}
// preset the grouping field column
if (props.type === ViewTypes.KANBAN) {
viewSelectFieldOptions.value = meta.value
.columns!.filter((el) => el.uidt === UITypes.SingleSelect)
.map((field) => {
return {
value: field.id,
label: field.title,
}
})
if (groupingFieldColumnId.value) {
// take from the one from copy view
form.fk_grp_col_id = groupingFieldColumnId.value
} else if (viewSelectFieldOptions.value?.length) {
// take the first option
form.fk_grp_col_id = viewSelectFieldOptions.value[0].value as string
} else {
// if there is no grouping field column, disable the create button
isNecessaryColumnsPresent.value = false
}
}
if (props.type === ViewTypes.CALENDAR) {
viewSelectFieldOptions.value = meta
.value!.columns!.filter((el) => el.uidt === UITypes.Date || (el.uidt === UITypes.DateTime && !isSystemColumn(el)))
.map((field) => {
return {
value: field.id,
label: field.title,
uidt: field.uidt,
}
})
if (viewSelectFieldOptions.value?.length) {
// take the first option
if (form.calendar_range.length === 0) {
form.calendar_range = [
{
fk_from_column_id: viewSelectFieldOptions.value[0].value as string,
fk_to_column_id: null, // for ee only
},
]
}
} else {
// if there is no grouping field column, disable the create button
isNecessaryColumnsPresent.value = false
}
}
} catch (e) {
console.error(e)
} finally {
isMetaLoading.value = false
}
}
})
</script>
<template>
<NcModal
v-model:visible="vModel"
:size="[ViewTypes.KANBAN, ViewTypes.MAP, ViewTypes.CALENDAR].includes(form.type) ? 'medium' : 'small'"
>
<template #header>
<div class="flex w-full flex-row justify-between items-center">
<div class="flex gap-x-1.5 items-center">
<GeneralViewIcon :meta="{ type: form.type }" class="nc-view-icon !text-xl" />
<template v-if="form.type === ViewTypes.GRID">
<template v-if="form.copy_from_id">
{{ $t('labels.duplicateGridView') }}
</template>
<template v-else>
{{ $t('labels.createGridView') }}
</template>
</template>
<template v-else-if="form.type === ViewTypes.GALLERY">
<template v-if="form.copy_from_id">
{{ $t('labels.duplicateGalleryView') }}
</template>
<template v-else>
{{ $t('labels.createGalleryView') }}
</template>
</template>
<template v-else-if="form.type === ViewTypes.FORM">
<template v-if="form.copy_from_id">
{{ $t('labels.duplicateFormView') }}
</template>
<template v-else>
{{ $t('labels.createFormView') }}
</template>
</template>
<template v-else-if="form.type === ViewTypes.KANBAN">
<template v-if="form.copy_from_id">
{{ $t('labels.duplicateKanbanView') }}
</template>
<template v-else>
{{ $t('labels.createKanbanView') }}
</template>
</template>
<template v-else-if="form.type === ViewTypes.CALENDAR">
<template v-if="form.copy_from_id">
{{ $t('labels.duplicateCalendarView') }}
</template>
<template v-else>
{{ $t('labels.createCalendarView') }}
</template>
</template>
<template v-else>
<template v-if="form.copy_from_id">
{{ $t('labels.duplicateMapView') }}
</template>
<template v-else>
{{ $t('labels.duplicateView') }}
</template>
</template>
</div>
<a
v-if="!form.copy_from_id"
class="text-sm !text-gray-600 !hover:text-gray-600"
href="https://docs.nocodb.com/views/view-types/calendar/"
target="_blank"
>
Go to Docs
</a>
</div>
</template>
<div class="mt-2">
<a-form v-if="isNecessaryColumnsPresent" ref="formValidator" :model="form" layout="vertical">
<a-form-item :rules="viewNameRules" name="title">
<a-input
ref="inputEl"
v-model:value="form.title"
:placeholder="$t('labels.viewName')"
autofocus
class="nc-input-md h-10"
@keydown.enter="onSubmit"
/>
</a-form-item>
<a-form-item
v-if="form.type === ViewTypes.KANBAN"
:label="$t('general.groupingField')"
:rules="groupingFieldColumnRules"
name="fk_grp_col_id"
>
<NcSelect
v-model:value="form.fk_grp_col_id"
:disabled="isMetaLoading"
:loading="isMetaLoading"
:not-found-content="$t('placeholder.selectGroupFieldNotFound')"
:options="viewSelectFieldOptions"
:placeholder="$t('placeholder.selectGroupField')"
class="w-full nc-kanban-grouping-field-select"
/>
</a-form-item>
<a-form-item
v-if="form.type === ViewTypes.MAP"
:label="$t('general.geoDataField')"
:rules="geoDataFieldColumnRules"
name="fk_geo_data_col_id"
>
<NcSelect
v-model:value="form.fk_geo_data_col_id"
:disabled="isMetaLoading"
:loading="isMetaLoading"
:not-found-content="$t('placeholder.selectGeoFieldNotFound')"
:options="viewSelectFieldOptions"
:placeholder="$t('placeholder.selectGeoField')"
class="w-full"
/>
</a-form-item>
<template v-if="form.type === ViewTypes.CALENDAR">
<div v-for="(range, index) in form.calendar_range" :key="`range-${index}`" class="flex w-full mb-2 items-center gap-2">
<span>
{{ $t('labels.organiseBy') }}
</span>
<NcSelect v-model:value="range.fk_from_column_id" :disabled="isMetaLoading" :loading="isMetaLoading">
<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"
: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>
<div
v-if="range.fk_to_column_id === null && isEeUI && false"
class="cursor-pointer flex items-center text-gray-800 gap-1"
@click="range.fk_to_column_id = undefined"
>
<component :is="iconMap.plus" class="h-4 w-4" />
{{ $t('activity.addEndDate') }}
</div>
<template v-else-if="isEeUI && false">
<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="!rounded-r-none nc-to-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
const firstRange = viewSelectFieldOptions.find((f) => f.value === form.calendar_range[0].fk_from_column_id)
return firstRange?.uidt === f.uidt
})"
: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>
</template>
<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>
</div>
<NcButton v-if="false" class="mt-2" size="small" type="secondary" @click="addCalendarRange">
<component :is="iconMap.plus" />
Add another date field
</NcButton>
</template>
</a-form>
<div v-else-if="!isNecessaryColumnsPresent" class="flex flex-row p-4 border-gray-200 border-1 gap-x-4 rounded-lg w-full">
<GeneralIcon class="!text-5xl text-orange-500" icon="warning" />
<div class="text-gray-500">
<h2 class="font-semibold text-sm text-gray-800">Suitable fields not present</h2>
{{ errorMessages[form.type] }}
</div>
</div>
<div class="flex flex-row w-full justify-end gap-x-2 mt-7">
<NcButton type="secondary" @click="vModel = false">
{{ $t('general.cancel') }}
</NcButton>
<NcButton
v-e="[form.copy_from_id ? 'a:view:duplicate' : 'a:view:create']"
:disabled="!isNecessaryColumnsPresent"
:loading="isViewCreating"
type="primary"
@click="onSubmit"
>
{{ $t('labels.createView') }}
<template #loading> {{ $t('labels.creatingView') }}</template>
</NcButton>
</div>
</div>
</NcModal>
</template>
<style lang="scss">
.ant-form-item-required {
@apply !text-gray-800 font-medium;
&:before {
@apply !content-[''];
}
}
.nc-to-select .ant-select-selector {
@apply !rounded-r-none;
}
</style>