mirror of https://github.com/nocodb/nocodb
Browse Source
* feat(nc-gui): form field in right pannel setup * fix(nc-gui): inline form field reorder issue * fix(nc-gui): make edit form field right panel scrollable * fix(nc-gui): form field limit option hide btn focus box shadow style issue * fix(nc-gui): add support to edit form column in form view builder * feat(nc-gui): added form field header menu dropdown * fix(nc-gui): tab issue in form builder * feat(nc-gui): add support to edit column from form builder itself * fix(nc-gui): wrong virtual cell icon in column delete modal * feat(nc-gui): column edit, hide, delete option in form builder field settings * fix(nc-gui): move all form field settings radio btns to the right side * chore(nc-gui): lint * chore(nc-gui): lint errors * chore(nc-gui): lint * fix(nc-gui): update 'change icon color' text case * fix(nc-gui): small changes * fix(nc-gui): form builder side panel field div key issue * fix(nc-gui): form view outsideclick fild toggle issue * chore(nc-gui): lint * fix(nc-gui): hide select dropdown in value is selected and show if value is not selected * fix(nc-gui): suggested review changes * fix(nc-gui): make form field rich text options sticky at bottom * chore(nc-gui): lint * fix(nc-gui): small changes * fix(nc-gui): lazy import richtext component * fix(nc-gui): set the max height for form rich text fields * fix(nc-gui): move form settings switch inputs to the right side * fix(nc-gui): move form select type field layout option to appearance settings section * fix(nc-gui): select form active field text on focus * fix(nc-gui): form rich text element menu option tabindex issue * fix(nc-gui): form search field input autofill issue * fix(nc-gui): update position of rich text menu option of form description * feat(nc-gui): adjustable form view sidebar width * chore(nc-gui): lint * fix(nc-gui): typo mistake * fix(nc-gui): PR review changesnc-enable-calendar-view
Ramesh Mane
9 months ago
committed by
GitHub
15 changed files with 1603 additions and 1039 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,248 @@
|
||||
<script lang="ts" setup> |
||||
import type { ColumnReqType, ColumnType } from 'nocodb-sdk' |
||||
import { UITypes } from 'nocodb-sdk' |
||||
import { computed } from 'vue' |
||||
import { |
||||
ActiveViewInj, |
||||
ColumnInj, |
||||
IsLockedInj, |
||||
MetaInj, |
||||
ReloadViewDataHookInj, |
||||
SmartsheetStoreEvents, |
||||
iconMap, |
||||
inject, |
||||
message, |
||||
toRefs, |
||||
useI18n, |
||||
useMetas, |
||||
useNuxtApp, |
||||
useSmartsheetStoreOrThrow, |
||||
} from '#imports' |
||||
|
||||
const props = defineProps<{ |
||||
column: ColumnType |
||||
formColumn: Record<string, any> |
||||
isRequired?: boolean |
||||
isOpen: boolean |
||||
onDelete: () => void |
||||
}>() |
||||
|
||||
const emit = defineEmits(['hideField', 'update:isOpen', 'delete']) |
||||
|
||||
const { column, isRequired } = toRefs(props) |
||||
|
||||
const isOpen = useVModel(props, 'isOpen', emit) |
||||
|
||||
const { eventBus } = useSmartsheetStoreOrThrow() |
||||
|
||||
const reloadDataHook = inject(ReloadViewDataHookInj) |
||||
|
||||
const meta = inject(MetaInj, ref()) |
||||
|
||||
const view = inject(ActiveViewInj, ref()) |
||||
|
||||
const isLocked = inject(IsLockedInj) |
||||
|
||||
provide(ColumnInj, column) |
||||
|
||||
const { $api } = useNuxtApp() |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const { getMeta } = useMetas() |
||||
|
||||
const showDeleteColumnModal = ref(false) |
||||
|
||||
const isDuplicateDlgOpen = ref(false) |
||||
const selectedColumnExtra = ref<any>() |
||||
const duplicateDialogRef = ref<any>() |
||||
|
||||
const duplicateVirtualColumn = async () => { |
||||
let columnCreatePayload = {} |
||||
|
||||
// generate duplicate column title |
||||
const duplicateColumnTitle = getUniqueColumnName(`${column!.value.title} copy`, meta!.value!.columns!) |
||||
|
||||
columnCreatePayload = { |
||||
...column!.value!, |
||||
...(column!.value.colOptions ?? {}), |
||||
title: duplicateColumnTitle, |
||||
column_name: duplicateColumnTitle.replace(/\s/g, '_'), |
||||
id: undefined, |
||||
colOptions: undefined, |
||||
order: undefined, |
||||
system: false, |
||||
} |
||||
|
||||
try { |
||||
const gridViewColumnList = (await $api.dbViewColumn.list(view.value?.id as string)).list |
||||
|
||||
const currentColumnIndex = gridViewColumnList.findIndex((f) => f.fk_column_id === column!.value.id) |
||||
let newColumnOrder |
||||
if (currentColumnIndex === gridViewColumnList.length - 1) { |
||||
newColumnOrder = gridViewColumnList[currentColumnIndex].order! + 1 |
||||
} else { |
||||
newColumnOrder = (gridViewColumnList[currentColumnIndex].order! + gridViewColumnList[currentColumnIndex + 1].order!) / 2 |
||||
} |
||||
|
||||
await $api.dbTableColumn.create(meta!.value!.id!, { |
||||
...columnCreatePayload, |
||||
pv: false, |
||||
view_id: view.value!.id as string, |
||||
column_order: { |
||||
order: newColumnOrder, |
||||
view_id: view.value!.id as string, |
||||
}, |
||||
} as ColumnReqType) |
||||
await getMeta(meta!.value!.id!, true) |
||||
|
||||
eventBus.emit(SmartsheetStoreEvents.FIELD_RELOAD) |
||||
reloadDataHook?.trigger() |
||||
|
||||
// message.success(t('msg.success.columnDuplicated')) |
||||
} catch (e) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
// closing dropdown |
||||
isOpen.value = false |
||||
} |
||||
|
||||
const openDuplicateDlg = async () => { |
||||
if (!column?.value) return |
||||
if ( |
||||
column.value.uidt && |
||||
[ |
||||
UITypes.Lookup, |
||||
UITypes.Rollup, |
||||
UITypes.CreatedTime, |
||||
UITypes.LastModifiedTime, |
||||
UITypes.CreatedBy, |
||||
UITypes.LastModifiedBy, |
||||
].includes(column.value.uidt as UITypes) |
||||
) { |
||||
duplicateVirtualColumn() |
||||
} else { |
||||
const gridViewColumnList = (await $api.dbViewColumn.list(view.value?.id as string)).list |
||||
|
||||
const currentColumnIndex = gridViewColumnList.findIndex((f) => f.fk_column_id === column!.value.id) |
||||
let newColumnOrder |
||||
if (currentColumnIndex === gridViewColumnList.length - 1) { |
||||
newColumnOrder = gridViewColumnList[currentColumnIndex].order! + 1 |
||||
} else { |
||||
newColumnOrder = (gridViewColumnList[currentColumnIndex].order! + gridViewColumnList[currentColumnIndex + 1].order!) / 2 |
||||
} |
||||
|
||||
selectedColumnExtra.value = { |
||||
pv: false, |
||||
view_id: view.value!.id as string, |
||||
column_order: { |
||||
order: newColumnOrder, |
||||
view_id: view.value!.id as string, |
||||
}, |
||||
} |
||||
|
||||
if (column.value.uidt === UITypes.Formula) { |
||||
nextTick(() => { |
||||
duplicateDialogRef?.value?.duplicate() |
||||
}) |
||||
} else { |
||||
isDuplicateDlgOpen.value = true |
||||
} |
||||
|
||||
isOpen.value = false |
||||
} |
||||
} |
||||
|
||||
// hide the field in view |
||||
const hideField = async () => { |
||||
if (isRequired.value) return |
||||
isOpen.value = false |
||||
emit('hideField') |
||||
} |
||||
|
||||
const handleDelete = () => { |
||||
// closing the dropdown |
||||
// when modal opens |
||||
isOpen.value = false |
||||
showDeleteColumnModal.value = true |
||||
} |
||||
|
||||
const isDeleteAllowed = computed(() => { |
||||
return column?.value && !column.value.system |
||||
}) |
||||
const isDuplicateAllowed = computed(() => { |
||||
return column?.value && !column.value.system |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<a-dropdown |
||||
v-if="!isLocked" |
||||
v-model:visible="isOpen" |
||||
:trigger="['click']" |
||||
placement="bottomLeft" |
||||
overlay-class-name="nc-dropdown-form-column-operations !border-1 rounded-lg !shadow-xl" |
||||
@click.stop="isOpen = !isOpen" |
||||
> |
||||
<NcButton |
||||
type="secondary" |
||||
size="small" |
||||
class="nc-form-add-field" |
||||
data-testid="nc-form-add-field" |
||||
@click.stop="showAddColumnDropdown = true" |
||||
> |
||||
<component :is="iconMap.threeDotVertical" class="flex-none w-4 h-4" /> |
||||
</NcButton> |
||||
<template #overlay> |
||||
<NcMenu class="flex flex-col gap-1 border-gray-200 nc-column-options"> |
||||
<!-- Todo: Duplicate column with form column settings --> |
||||
<!-- eslint-disable vue/no-constant-condition --> |
||||
<NcMenuItem v-if="false" :disabled="!isDuplicateAllowed" @click="openDuplicateDlg"> |
||||
<div class="nc-column-duplicate nc-form-header-menu-item"> |
||||
<component :is="iconMap.duplicate" /> |
||||
<!-- Duplicate --> |
||||
{{ t('general.duplicate') }} |
||||
</div> |
||||
</NcMenuItem> |
||||
|
||||
<NcMenuItem :disabled="isRequired" @click="hideField"> |
||||
<div class="nc-column-insert-before nc-form-header-menu-item"> |
||||
<component :is="iconMap.eye" class="!w-3.75 !h-3.75" /> |
||||
<!-- Hide Field --> |
||||
{{ $t('general.hideField') }} |
||||
</div> |
||||
</NcMenuItem> |
||||
|
||||
<template v-if="!column?.pv"> |
||||
<a-divider class="!my-0" /> |
||||
|
||||
<NcMenuItem :disabled="!isDeleteAllowed" class="!hover:bg-red-50" @click="handleDelete"> |
||||
<div class="nc-column-delete nc-form-header-menu-item text-red-600"> |
||||
<component :is="iconMap.delete" /> |
||||
<!-- Delete --> |
||||
{{ $t('general.delete') }} |
||||
</div> |
||||
</NcMenuItem> |
||||
</template> |
||||
</NcMenu> |
||||
</template> |
||||
</a-dropdown> |
||||
<SmartsheetHeaderDeleteColumnModal |
||||
v-model:visible="showDeleteColumnModal" |
||||
class="nc-form-column-delete-dropdown" |
||||
:on-delete-column="onDelete" |
||||
/> |
||||
<DlgColumnDuplicate |
||||
v-if="column" |
||||
ref="duplicateDialogRef" |
||||
v-model="isDuplicateDlgOpen" |
||||
:column="column" |
||||
:extra="selectedColumnExtra" |
||||
/> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.nc-form-header-menu-item { |
||||
@apply flex items-center gap-2; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,94 @@
|
||||
<script lang="ts" setup> |
||||
import { Pane, Splitpanes } from 'splitpanes' |
||||
import 'splitpanes/dist/splitpanes.css' |
||||
|
||||
const { leftSidebarWidth, windowSize, formRightSidebarState, formRightSidebarWidthPercent } = storeToRefs(useSidebarStore()) |
||||
|
||||
const formPreviewSize = computed(() => 100 - formRightSidebarWidthPercent.value) |
||||
|
||||
function onResize(widthPercent: any) { |
||||
const sidebarWidth = (widthPercent * (windowSize.value - leftSidebarWidth.value)) / 100 |
||||
|
||||
if (sidebarWidth > formRightSidebarState.value.maxWidth) { |
||||
formRightSidebarState.value.width = formRightSidebarState.value.maxWidth |
||||
} else if (sidebarWidth < formRightSidebarState.value.minWidth) { |
||||
formRightSidebarState.value.width = formRightSidebarState.value.minWidth |
||||
} else { |
||||
formRightSidebarState.value.width = sidebarWidth |
||||
} |
||||
} |
||||
|
||||
const normalizeSidebarWidth = computed(() => { |
||||
if (formRightSidebarState.value.width > formRightSidebarState.value.maxWidth) { |
||||
return formRightSidebarState.value.maxWidth |
||||
} else if (formRightSidebarState.value.width < formRightSidebarState.value.minWidth) { |
||||
return formRightSidebarState.value.minWidth |
||||
} else { |
||||
return formRightSidebarState.value.width |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<Splitpanes |
||||
class="nc-form-right-sidebar-content-resizable-wrapper w-full h-full" |
||||
@resize="(event: any) => onResize(event[1].size)" |
||||
> |
||||
<Pane :size="formPreviewSize" class="flex-1 h-full"> |
||||
<slot name="preview" /> |
||||
</Pane> |
||||
<Pane |
||||
min-size="15%" |
||||
class="nc-sidebar-splitpane relative" |
||||
:size="formRightSidebarWidthPercent" |
||||
:style="{ |
||||
minWidth: `${formRightSidebarState.minWidth}px !important`, |
||||
maxWidth: `${normalizeSidebarWidth}px !important`, |
||||
}" |
||||
> |
||||
<slot name="sidebar" /> |
||||
</Pane> |
||||
</Splitpanes> |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
/** Split pane CSS */ |
||||
|
||||
.nc-form-right-sidebar-content-resizable-wrapper > { |
||||
.splitpanes__splitter { |
||||
@apply !w-0 relative overflow-visible; |
||||
} |
||||
.splitpanes__splitter:before { |
||||
@apply bg-gray-200 w-0.25 absolute left-0 top-0 h-full z-40; |
||||
content: ''; |
||||
} |
||||
|
||||
.splitpanes__splitter:hover:before { |
||||
@apply bg-scrollbar; |
||||
width: 3px !important; |
||||
left: 0px; |
||||
} |
||||
|
||||
.splitpanes--dragging .splitpanes__splitter:before { |
||||
@apply bg-scrollbar; |
||||
width: 3px !important; |
||||
left: 0px; |
||||
} |
||||
|
||||
.splitpanes--dragging .splitpanes__splitter { |
||||
@apply w-1 mr-0; |
||||
} |
||||
} |
||||
|
||||
.splitpanes__pane { |
||||
transition: width 0.15s ease-in-out !important; |
||||
} |
||||
|
||||
.splitpanes--dragging { |
||||
cursor: col-resize; |
||||
|
||||
> .splitpanes__pane { |
||||
transition: none !important; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue