github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(nc-gui): enable ranges

pull/7753/head
DarkPhoenix2704 6 months ago
parent
ca896d36a9
commit
c4be7305d6
2 changed files with 84 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 67
      packages/nc-gui/components/dlg/ViewCreate.vue
  2. 119
      packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue

67
packages/nc-gui/components/dlg/ViewCreate.vue
Unescape View File

@ -217,15 +217,12 @@ async function onSubmit() {
} }
} }
/*
TODO: Add support for end date and multiple range in future
const addCalendarRange = async () => { const addCalendarRange = async () => {
form.calendar_range.push({ form.calendar_range.push({
fk_from_column_id: viewSelectFieldOptions.value[0].value as string, fk_from_column_id: viewSelectFieldOptions.value[0].value as string,
fk_to_column_id: null, fk_to_column_id: null,
}) })
} }
*/
const isMetaLoading = ref(false) const isMetaLoading = ref(false)
@ -453,23 +450,20 @@ onMounted(async () => {
</div> </div>
</a-select-option> </a-select-option>
</NcSelect> </NcSelect>
<!-- <div
<div v-if="range.fk_to_column_id === null && isEeUI"
v-if="range.fk_to_column_id === null && isEeUI" class="cursor-pointer flex items-center text-gray-800 gap-1"
class="cursor-pointer flex items-center text-gray-800 gap-1" @click="range.fk_to_column_id = undefined"
@click="range.fk_to_column_id = undefined" >
> <component :is="iconMap.plus" class="h-4 w-4" />
<component :is="iconMap.plus" class="h-4 w-4" /> {{ $t('activity.addEndDate') }}
{{ $t('activity.addEndDate') }} </div>
</div> <template v-else-if="isEeUI">
<template v-else-if="isEeUI"> <span>
<span> {{ $t('activity.withEndDate') }}
{{ $t('activity.withEndDate') }} </span>
</span>
<div class="flex">
TODO: Add support for end date and multiple range in future
<div class="flex">
<NcSelect <NcSelect
v-model:value="range.fk_to_column_id" v-model:value="range.fk_to_column_id"
:disabled="isMetaLoading" :disabled="isMetaLoading"
@ -499,27 +493,28 @@ class="cursor-pointer flex items-center text-gray-800 gap-1"
</NcSelect> </NcSelect>
<NcButton class="!rounded-l-none !border-l-0" size="small" type="secondary" @click="range.fk_to_column_id = null"> <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" /> <component :is="iconMap.delete" class="h-4 w-4" />
</NcButton> --> </NcButton>
</div> </div>
</template> <NcButton
<!-- <NcButton v-if="index !== 0"
v-if="index !== 0" size="small"
size="small" type="secondary"
type="secondary" @click="
@click=" () => {
() => { form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
form.calendar_range = form.calendar_range.filter((_, i) => i !== index) }
} "
" >
> <component :is="iconMap.close" />
<component :is="iconMap.close" /> </NcButton>
</NcButton> </template>
</div> </div>
<NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange"> <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">
<component :is="iconMap.plus" /> <component :is="iconMap.plus" />
Add another date field Add another date field
</NcButton> </NcButton>
--> </template>
</a-form> </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"> <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" /> <GeneralIcon class="!text-5xl text-orange-500" icon="warning" />

119
packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
Unescape View File

@ -93,9 +93,7 @@ const dateFieldOptions = computed<SelectProps['options']>(() => {
) )
}) })
// TODO: Add support for end date in future const addCalendarRange = async () => {
// To add new calendar range
/* const addCalendarRange = async () => {
_calendar_ranges.value.push({ _calendar_ranges.value.push({
fk_from_column_id: dateFieldOptions.value![0].value as string, fk_from_column_id: dateFieldOptions.value![0].value as string,
fk_to_column_id: null, fk_to_column_id: null,
@ -111,7 +109,7 @@ const removeRange = async (id: number) => {
const saveCalendarRange = async (range: CalendarRangeType, value?) => { const saveCalendarRange = async (range: CalendarRangeType, value?) => {
range.fk_to_column_id = value range.fk_to_column_id = value
await saveCalendarRanges() await saveCalendarRanges()
} */ }
</script> </script>
<template> <template>
@ -132,7 +130,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
</a-button> </a-button>
</div> </div>
<template #overlay> <template #overlay>
<div v-if="calendarRangeDropdown" class="w-full p-6 w-[22rem]" data-testid="nc-calendar-range-menu" @click.stop> <div v-if="calendarRangeDropdown" class="w-full p-6 w-[36rem]" data-testid="nc-calendar-range-menu" @click.stop>
<div <div
v-for="(range, id) in _calendar_ranges" v-for="(range, id) in _calendar_ranges"
:key="id" :key="id"
@ -167,69 +165,58 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
</a-select-option> </a-select-option>
</NcSelect> </NcSelect>
<!-- <div
TODO: Add support for end date and multiple range in future v-if="range.fk_to_column_id === null && isEeUI"
<div class="flex cursor-pointer flex text-gray-800 items-center gap-1"
v-if="range.fk_to_column_id === null && isEeUI" data-testid="nc-calendar-range-add-end-date"
class="flex cursor-pointer flex text-gray-800 items-center gap-1" @click="saveCalendarRange(range, undefined)"
data-testid="nc-calendar-range-add-end-date" >
@click="saveCalendarRange(range, undefined)" <component :is="iconMap.plus" class="h-4 w-4" />
> {{ $t('activity.addEndDate') }}
<component :is="iconMap.plus" class="h-4 w-4" /> </div>
{{ $t('activity.addEndDate') }} <template v-else-if="isEeUI">
</div> <span>
<template v-else-if="isEeUI && false"> {{ $t('activity.withEndDate') }}
<span> </span>
{{ $t('activity.withEndDate') }} <div class="flex">
</span> <NcSelect
<div class="flex"> v-model:value="range.fk_to_column_id"
<NcSelect :disabled="!range.fk_from_column_id"
v-model:value="range.fk_to_column_id" :placeholder="$t('placeholder.notSelected')"
:disabled="!range.fk_from_column_id" class="!rounded-r-none nc-to-select"
:placeholder="$t('placeholder.notSelected')" data-testid="nc-calendar-range-to-field-select"
class="!rounded-r-none nc-to-select" @change="saveCalendarRanges"
data-testid="nc-calendar-range-to-field-select" >
@change="saveCalendarRanges" <a-select-option
> v-for="(option, opId) in [...dateFieldOptions].filter((f) => {
<a-select-option const firstRange = dateFieldOptions.find((f) => f.value === calendarRange[0].fk_from_column_id)
v-for="(option, opId) in [...dateFieldOptions].filter((f) => { return firstRange?.uidt === f.uidt
const firstRange = dateFieldOptions.find((f) => f.value === calendarRange[0].fk_from_column_id) })"
return firstRange?.uidt === f.uidt :key="opId"
})" :value="option.value"
:key="opId" >
:value="option.value" <div class="flex items-center">
> <SmartsheetHeaderIcon :column="option" />
<div class="flex items-center"> <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
<SmartsheetHeaderIcon :column="option" /> <template #title>{{ option.label }}</template>
<NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only> {{ option.label }}
<template #title>{{ option.label }}</template> </NcTooltip>
{{ option.label }}
</NcTooltip>
</div>
</a-select-option>
</NcSelect>
<NcButton class="!rounded-l-none !border-l-0" size="small" type="secondary" @click="saveCalendarRange(range, null)">
<component :is="iconMap.delete" class="h-4 w-4" />
</NcButton>
</div>
</template>
<NcButton v-if="id !== 0" size="small" type="secondary" @click="removeRange(id)">
<component :is="iconMap.close" />
</NcButton>
</div> </div>
<NcButton </a-select-option>
v-if="false" </NcSelect>
class="mt-2" <NcButton class="!rounded-l-none !border-l-0" size="small" type="secondary" @click="saveCalendarRange(range, null)">
data-testid="nc-calendar-range-add-btn" <component :is="iconMap.delete" class="h-4 w-4" />
size="small" </NcButton>
type="secondary" </div>
@click="addCalendarRange" </template>
> <NcButton v-if="id !== 0" size="small" type="secondary" @click="removeRange(id)">
<component :is="iconMap.plus" /> <component :is="iconMap.close" />
Add another date field </NcButton>
</NcButton>
-->
</div> </div>
<NcButton class="mt-2" data-testid="nc-calendar-range-add-btn" size="small" type="secondary" @click="addCalendarRange">
<component :is="iconMap.plus" />
Add another date field
</NcButton>
</div> </div>
</template> </template>
</NcDropdown> </NcDropdown>

Write Preview
Loading…
Cancel
Save