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

fix: update view create modal design

pull/9831/head
DarkPhoenix2704 6 days ago
parent
ac485df96d
commit
1787f4935b
1 changed files with 150 additions and 129 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. 279
      packages/nc-gui/components/dlg/ViewCreate.vue

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

@ -945,161 +945,182 @@ const getPluralName = (name: string) => {
<div class="flex-1 flex items-center gap-1 max-w-[calc(100%_-_24px)]"> <div class="flex-1 flex items-center gap-1 max-w-[calc(100%_-_24px)]">
<SmartsheetHeaderIcon :column="option" class="!ml-0" /> <SmartsheetHeaderIcon :column="option" class="!ml-0" />
<NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only> <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
<template #title> <template #title>
{{ option.label }} {{ option.label }}
</template> </template>
<template #default>{{ option.label }}</template> <template #default>{{ option.label }}</template>
</NcTooltip> </NcTooltip>
</div>
<GeneralIcon
v-if="form.fk_grp_col_id === option.value"
id="nc-selected-item-icon"
icon="check"
class="flex-none text-primary w-4 h-4"
/>
</div> </div>
</a-select-option> <GeneralIcon
</NcSelect> v-if="form.fk_grp_col_id === option.value"
</a-form-item> id="nc-selected-item-icon"
<a-form-item icon="check"
v-if="form.type === ViewTypes.MAP" class="flex-none text-primary w-4 h-4"
:label="$t('general.geoDataField')" />
:rules="geoDataFieldColumnRules" </div>
name="fk_geo_data_col_id" </a-select-option>
</NcSelect>
</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="nc-select-shadow w-full"
/>
</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="{
'!gap-2': range.fk_to_column_id === null,
}"
class="flex flex-col w-full gap-6"
> >
<NcSelect <div class="w-full space-y-2">
v-model:value="form.fk_geo_data_col_id" <div class="text-gray-800">
:disabled="isMetaLoading" {{ $t('labels.organiseBy') }}
:loading="isMetaLoading" </div>
:not-found-content="$t('placeholder.selectGeoFieldNotFound')"
:options="viewSelectFieldOptions" <a-select
:placeholder="$t('placeholder.selectGeoField')" v-model:value="range.fk_from_column_id"
class="nc-select-shadow w-full" class="nc-select-shadow w-full nc-from-select !rounded-lg"
/> dropdown-class-name="!rounded-lg"
</a-form-item> :placeholder="$t('placeholder.notSelected')"
<template v-if="form.type === ViewTypes.CALENDAR && !form.copy_from_id"> data-testid="nc-calendar-range-from-field-select"
<div @click.stop
v-for="(range, index) in form.calendar_range" >
:key="`range-${index}`" <template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
:class="{ <a-select-option
'!gap-2': range.fk_to_column_id === null, v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
}"
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 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 the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
if (index === 0) return true if (index === 0) return true
const firstRange = viewSelectFieldOptions!.find((f) => f.value === form.calendar_range[0].fk_from_column_id) const firstRange = viewSelectFieldOptions!.find((f) => f.value === form.calendar_range[0].fk_from_column_id)
return firstRange?.uidt === f.uidt return firstRange?.uidt === f.uidt
})" })"
:key="id" :key="id"
class="w-40" :value="option.value"
:value="option.value" >
> <div class="w-full flex gap-2 items-center justify-between" :title="option.label">
<div class="flex w-full gap-2 justify-between items-center"> <div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]">
<div class="flex gap-2 items-center"> <SmartsheetHeaderIcon :column="option" />
<SmartsheetHeaderIcon :column="option" class="!ml-0" />
<NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only> <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
<template #title>{{ option.label }}</template> <template #title>
{{ option.label }} {{ option.label }}
</NcTooltip> </template>
</div> <template #default>{{ option.label }}</template>
<div class="flex-1" /> </NcTooltip>
<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> </div>
</a-select-option> <GeneralIcon
</NcSelect> v-if="option.value === range.fk_from_column_id"
</div> id="nc-selected-item-icon"
<div class="w-full space-y-2"> icon="check"
<NcButton class="flex-none text-primary w-4 h-4"
v-if="range.fk_to_column_id === null && isRangeEnabled" />
size="small" </div>
class="!border-none w-28" </a-select-option>
type="secondary" </a-select>
:disabled="!isEeUI" </div>
@click="range.fk_to_column_id = undefined" <div class="w-full space-y-2">
> <NcButton
<component :is="iconMap.plus" class="h-4 w-4" /> v-if="range.fk_to_column_id === null && isRangeEnabled"
{{ $t('activity.endDate') }} size="small"
</NcButton> 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"> <template v-else-if="isEeUI && isRangeEnabled">
<span class="text-gray-700"> <span class="text-gray-700">
{{ $t('activity.withEndDate') }} {{ $t('activity.withEndDate') }}
</span> </span>
<div class="flex"> <div class="flex">
<NcSelect <a-select
v-model:value="range.fk_to_column_id" v-model:value="range.fk_to_column_id"
:disabled="isMetaLoading" class="!rounded-r-none nc-select-shadow w-full flex-1 nc-to-select"
:loading="isMetaLoading" :disabled="isMetaLoading"
:placeholder="$t('placeholder.notSelected')" :loading="isMetaLoading"
class="nc-to-select flex-1" :placeholder="$t('placeholder.notSelected')"
data-testid="nc-calendar-range-to-field-select"
dropdown-class-name="!rounded-lg"
@click.stop
>
<template #suffixIcon><GeneralIcon icon="arrowDown" class="text-gray-700" /></template>
<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"
> >
<a-select-option <div class="w-full flex gap-2 items-center justify-between" :title="option.label">
v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => { <div class="flex items-center gap-1 max-w-[calc(100%_-_20px)]">
// 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" /> <SmartsheetHeaderIcon :column="option" />
<NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
<template #title>{{ option.label }}</template> <NcTooltip class="flex-1 max-w-[calc(100%_-_20px)] truncate" show-on-truncate-only>
{{ option.label }} <template #title>
{{ option.label }}
</template>
<template #default>{{ option.label }}</template>
</NcTooltip> </NcTooltip>
</div> </div>
</a-select-option> <GeneralIcon
</NcSelect> v-if="option.value === range.fk_from_column_id"
<NcButton id="nc-selected-item-icon"
class="!rounded-l-none !border-l-0" icon="check"
size="small" class="flex-none text-primary w-4 h-4"
type="secondary" />
@click="range.fk_to_column_id = null" </div>
> </a-select-option>
<component :is="iconMap.delete" class="h-4 w-4" /> </a-select>
</NcButton>
</div>
<NcButton <NcButton
v-if="index !== 0" class="!rounded-l-none !border-l-0"
size="small" size="small"
type="secondary" type="secondary"
@click=" @click="range.fk_to_column_id = null"
() => {
form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
}
"
> >
<component :is="iconMap.close" /> <component :is="iconMap.delete" class="h-4 w-4" />
</NcButton> </NcButton>
</template> </div>
</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>
</div> </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" />

Write Preview
Loading…
Cancel
Save