|
|
|
@ -454,9 +454,10 @@ const onFormItemClick = (element: any) => {
|
|
|
|
|
<div v-else class="h-full w-full flex" data-testid="nc-form-wrapper"> |
|
|
|
|
<div |
|
|
|
|
v-if="formViewData" |
|
|
|
|
class="flex-1 h-full overflow-y-auto nc-form-scrollbar p-6 bg-gray-50" |
|
|
|
|
class="flex-1 h-full overflow-auto nc-form-scrollbar p-6 bg-gray-50" |
|
|
|
|
:style="{background:(formViewData?.meta as Record<string,any>).theme_color}" |
|
|
|
|
> |
|
|
|
|
<div :class="isEditable ? 'min-w-[616px] overflow-x-auto nc-form-scrollbar' : ''"> |
|
|
|
|
<div class="h-[160px] bg-primary bg-opacity-75 border-gray-200 rounded-3xl"> |
|
|
|
|
<!-- for future implementation of cover image --> |
|
|
|
|
<LazyNuxtImg |
|
|
|
@ -553,7 +554,9 @@ const onFormItemClick = (element: any) => {
|
|
|
|
|
:list="visibleColumns" |
|
|
|
|
item-key="fk_column_id" |
|
|
|
|
draggable=".item" |
|
|
|
|
handle=".nc-form-field-drag-handler" |
|
|
|
|
group="form-inputs" |
|
|
|
|
ghost-class="nc-form-field-ghost" |
|
|
|
|
class="h-full px-4 lg:px-6" |
|
|
|
|
:move="onMoveCallback" |
|
|
|
|
:disabled="isLocked" |
|
|
|
@ -563,22 +566,26 @@ const onFormItemClick = (element: any) => {
|
|
|
|
|
> |
|
|
|
|
<template #item="{ element, index }"> |
|
|
|
|
<div |
|
|
|
|
class="nc-editable item cursor-pointer relative bg-white" |
|
|
|
|
class="nc-editable item cursor-pointer relative bg-white my-1" |
|
|
|
|
:class="[ |
|
|
|
|
`nc-form-drag-${element.title.replaceAll(' ', '')}`, |
|
|
|
|
{ |
|
|
|
|
'rounded-2xl overflow-hidden border-2': editEnabled, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
'border-transparent hover:(bg-gray-50) p-4 lg:p-6': activeRow !== element.title, |
|
|
|
|
'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) p-4 lg:p-6': |
|
|
|
|
activeRow !== element.title, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
'border-brand-500 my-1': activeRow === element.title, |
|
|
|
|
'border-brand-500': activeRow === element.title, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
'!hover:bg-white !ring-0 !cursor-auto': isLocked, |
|
|
|
|
}, |
|
|
|
|
]" |
|
|
|
|
:style="{ |
|
|
|
|
transition: 'height 1s ease-in', |
|
|
|
|
}" |
|
|
|
|
data-testid="nc-form-fields" |
|
|
|
|
@click="onFormItemClick(element)" |
|
|
|
|
> |
|
|
|
@ -596,19 +603,22 @@ const onFormItemClick = (element: any) => {
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- Field Header --> |
|
|
|
|
<div v-if="activeRow === element.title" class="flex gap-3 items-center px-3 py-2 bg-gray-50"> |
|
|
|
|
<component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600" /> |
|
|
|
|
<div class="flex-1 flex items-center"> |
|
|
|
|
<div v-if="activeRow === element.title" class="w-full flex gap-3 items-center px-3 py-2 bg-gray-50"> |
|
|
|
|
<component |
|
|
|
|
:is="iconMap.drag" |
|
|
|
|
class="nc-form-field-drag-handler flex-none cursor-move !h-4 !w-4 text-gray-600" |
|
|
|
|
/> |
|
|
|
|
<div class="flex-1 flex items-center max-w-[calc(100%_-_152px)]"> |
|
|
|
|
<SmartsheetHeaderVirtualCellIcon v-if="element && isVirtualCol(element)" :column-meta="element" /> |
|
|
|
|
<SmartsheetHeaderCellIcon v-else :column-meta="element" /> |
|
|
|
|
|
|
|
|
|
<NcTooltip class="truncate flex-1" show-on-truncate-only> |
|
|
|
|
<NcTooltip class="truncate" show-on-truncate-only> |
|
|
|
|
<template #title> {{ element.label || element.title }} </template> |
|
|
|
|
<span data-testid="nc-form-field-title"> |
|
|
|
|
{{ element.label || element.title }} |
|
|
|
|
</span> |
|
|
|
|
<span v-if="element.required" class="text-red-500"> *</span> |
|
|
|
|
</NcTooltip> |
|
|
|
|
<span v-if="element.required" class="text-red-500"> *</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex gap-2 items-center"> |
|
|
|
|
<span |
|
|
|
@ -798,9 +808,10 @@ const onFormItemClick = (element: any) => {
|
|
|
|
|
</div> |
|
|
|
|
</a-card> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="isEditable" class="h-full w-full max-w-[384px] nc-form-left-drawer border-l border-gray-200"> |
|
|
|
|
<Splitpanes horizontal class="w-full nc-form-right-splitpane"> |
|
|
|
|
<Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-2 md:p-4 flex flex-col space-y-4 !min-h-200px"> |
|
|
|
|
<Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px"> |
|
|
|
|
<div class="flex flex-wrap justify-between items-center gap-2"> |
|
|
|
|
<div class="flex gap-3"> |
|
|
|
|
<div class="text-base font-bold text-gray-900"> |
|
|
|
@ -883,7 +894,7 @@ const onFormItemClick = (element: any) => {
|
|
|
|
|
<Draggable |
|
|
|
|
v-model="localColumns" |
|
|
|
|
item-key="id" |
|
|
|
|
class="" |
|
|
|
|
ghost-class="nc-form-field-ghost" |
|
|
|
|
:style="{ height: 'calc(100% - 64px)' }" |
|
|
|
|
@change="onMove($event)" |
|
|
|
|
> |
|
|
|
@ -891,27 +902,26 @@ const onFormItemClick = (element: any) => {
|
|
|
|
|
<div |
|
|
|
|
v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase())" |
|
|
|
|
:key="field.id" |
|
|
|
|
class="p-2 flex flex-row items-center border-b-1 last:border-none border-gray-200 hover:bg-gray-50" |
|
|
|
|
class="w-full p-2 flex flex-row items-center border-b-1 last:border-none border-gray-200 hover:bg-gray-50" |
|
|
|
|
:data-testid="`nc-form-field-item-${field.title}`" |
|
|
|
|
> |
|
|
|
|
<component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" /> |
|
|
|
|
<div |
|
|
|
|
class="flex-1 flex items-center justify-between cursor-pointer" |
|
|
|
|
class="flex-1 flex items-center justify-between space-x-2 cursor-pointer max-w-[calc(100%_-_20px)]" |
|
|
|
|
@click="showOrHideColumn(field, !field.show, true)" |
|
|
|
|
> |
|
|
|
|
<div class="flex-1 flex items-center"> |
|
|
|
|
<div class="flex-1 flex items-center max-w-[calc(100%_-_40px)]"> |
|
|
|
|
<SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" /> |
|
|
|
|
<SmartsheetHeaderCellIcon v-else :column-meta="field" /> |
|
|
|
|
|
|
|
|
|
<NcTooltip class="truncate flex-1 ml-1" show-on-truncate-only> |
|
|
|
|
<template #title> {{ field.title }} </template> |
|
|
|
|
<NcTooltip class="truncate ml-1" show-on-truncate-only> |
|
|
|
|
<template #title> {{ field.label || field.title }} </template> |
|
|
|
|
<span data-testid="nc-field-title"> |
|
|
|
|
{{ field.title }} |
|
|
|
|
{{ field.label || field.title }} |
|
|
|
|
</span> |
|
|
|
|
<span v-if="field.required" class="text-red-500"> *</span> |
|
|
|
|
</NcTooltip> |
|
|
|
|
<span v-if="field.required" class="text-red-500"> *</span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<NcSwitch :checked="!!field.show" :disabled="field.required" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
@ -1131,4 +1141,7 @@ const onFormItemClick = (element: any) => {
|
|
|
|
|
:deep(.nc-form-field-body .nc-cell) { |
|
|
|
|
@apply my-0; |
|
|
|
|
} |
|
|
|
|
.nc-form-field-ghost { |
|
|
|
|
@apply bg-gray-50; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|