mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-02 17:57:10 +00:00
fix: ui fixes feat: move to engineering beta toggle feature
This commit is contained in:
DarkPhoenix2704
@@ -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>
|
||||
<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="range.fk_to_column_id === null && isRangeEnabled"
|
||||
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.endDate') }}
|
||||
</NcButton>
|
||||
|
||||
<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
|
||||
class="!rounded-l-none !border-l-0"
|
||||
v-if="index !== 0"
|
||||
size="small"
|
||||
type="secondary"
|
||||
@click="range.fk_to_column_id = null"
|
||||
@click="
|
||||
() => {
|
||||
form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
|
||||
}
|
||||
"
|
||||
>
|
||||
<component :is="iconMap.delete" class="h-4 w-4" />
|
||||
<component :is="iconMap.close" />
|
||||
</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>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">
|
||||
|
||||
Reference in New Issue
Block a user