diff --git a/packages/nc-gui/assets/nc-icons/align-left.svg b/packages/nc-gui/assets/nc-icons/align-left.svg new file mode 100644 index 0000000000..93e9813fff --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/align-left.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/nc-gui/assets/nc-icons/calendar.svg b/packages/nc-gui/assets/nc-icons/calendar.svg new file mode 100644 index 0000000000..7e3a4df73a --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/calendar.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/nc-gui/assets/nc-icons/form.svg b/packages/nc-gui/assets/nc-icons/form.svg new file mode 100644 index 0000000000..2e2c8d8c36 --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/form.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/nc-gui/assets/nc-icons/gallery.svg b/packages/nc-gui/assets/nc-icons/gallery.svg new file mode 100644 index 0000000000..8ff51296a7 --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/gallery.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/nc-gui/assets/nc-icons/grid.svg b/packages/nc-gui/assets/nc-icons/grid.svg new file mode 100644 index 0000000000..95a842664e --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/grid.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/nc-gui/assets/nc-icons/kanban.svg b/packages/nc-gui/assets/nc-icons/kanban.svg new file mode 100644 index 0000000000..aae9418923 --- /dev/null +++ b/packages/nc-gui/assets/nc-icons/kanban.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue index 653d7d72b7..bff3ac0dd3 100644 --- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue +++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue @@ -45,7 +45,12 @@ const { copy } = useCopy() const baseRole = inject(ProjectRoleInj) provide(SidebarTableInj, table) -const { setMenuContext, openRenameTableDialog: _openRenameTableDialog, duplicateTable: _duplicateTable } = inject(TreeViewInj)! +const { + setMenuContext, + openRenameTableDialog: _openRenameTableDialog, + openTableDescriptionDialog: _openTableDescriptionDialog, + duplicateTable: _duplicateTable, +} = inject(TreeViewInj)! const { loadViews: _loadViews, navigateToView } = useViewsStore() const { activeView, activeViewTitleOrId, viewsByTable } = storeToRefs(useViewsStore()) @@ -204,6 +209,11 @@ const openRenameTableDialog = (table: SidebarTableNode, sourceId: string) => { _openRenameTableDialog(table, !!sourceId) } +const openTableDescriptionDialog = (table: SidebarTableNode) => { + isOptionsOpen.value = false + _openTableDescriptionDialog(table) +} + const deleteTable = () => { isOptionsOpen.value = false isTableDeleteDialogVisible.value = true @@ -343,124 +353,164 @@ const source = computed(() => { {{ table.title }} - - - - - - - + + + + + + + + { } .nc-tree-item svg { - @apply text-primary text-opacity-60; + &:not(.nc-info-icon) { + @apply text-primary text-opacity-60; + } } diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue index bcd6fda025..5dc062272d 100644 --- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue +++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue @@ -63,6 +63,8 @@ const isDefaultBase = computed(() => { return _isDefaultBase(source) }) +const { openViewDescriptionDialog: _openViewDescriptionDialog } = inject(TreeViewInj)! + const input = ref() const isDropdownOpen = ref(false) @@ -193,6 +195,12 @@ async function onRename() { onStopEdit() } +const openViewDescriptionDialog = (view: ViewType) => { + isDropdownOpen.value = false + + _openViewDescriptionDialog(view) +} + /** Cancel renaming view */ function onCancel() { if (!isEditing.value) return @@ -281,6 +289,15 @@ watch(isDropdownOpen, async () => { diff --git a/packages/nc-gui/components/dashboard/TreeView/index.vue b/packages/nc-gui/components/dashboard/TreeView/index.vue index 3d760f98c2..fc22eeb885 100644 --- a/packages/nc-gui/components/dashboard/TreeView/index.vue +++ b/packages/nc-gui/components/dashboard/TreeView/index.vue @@ -1,6 +1,6 @@ + + + + diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue index 4a1886031e..87581a44b6 100644 --- a/packages/nc-gui/components/dlg/ViewCreate.vue +++ b/packages/nc-gui/components/dlg/ViewCreate.vue @@ -23,6 +23,7 @@ interface Props { selectedViewId?: string groupingFieldColumnId?: string geoDataFieldColumnId?: string + description?: string tableId: string calendarRange?: Array<{ fk_from_column_id: string @@ -40,6 +41,7 @@ interface Emits { interface Form { title: string type: ViewTypes + description?: string copy_from_id: string | null // for kanban view only fk_grp_col_id: string | null @@ -103,6 +105,7 @@ const form = reactive
({ fk_geo_data_col_id: null, calendar_range: props.calendarRange || [], fk_cover_image_col_id: null, + description: props.description || '', }) const viewSelectFieldOptions = ref([]) @@ -243,14 +246,35 @@ const addCalendarRange = async () => { } */ +const enableDescription = ref(false) + +const removeDescription = () => { + form.description = '' + enableDescription.value = false +} + +const toggleDescription = () => { + if (enableDescription.value) { + enableDescription.value = false + } else { + enableDescription.value = true + setTimeout(() => { + inputEl.value?.focus() + }, 100) + } +} + const isMetaLoading = ref(false) onMounted(async () => { + if (form.copy_from_id) { + enableDescription.value = true + } + if ([ViewTypes.GALLERY, ViewTypes.KANBAN, ViewTypes.MAP, ViewTypes.CALENDAR].includes(props.type)) { isMetaLoading.value = true try { meta.value = (await getMeta(tableId.value))! - if (props.type === ViewTypes.MAP) { viewSelectFieldOptions.value = meta .value!.columns!.filter((el) => el.uidt === UITypes.GeoData) @@ -708,28 +732,65 @@ onMounted(async () => { -
- - {{ $t('general.cancel') }} - + +
+ + {{ $t('labels.description') }} + - - {{ $t('labels.createView') }} - + + + +
+ + + + +
+ +
+ + + + {{ $t('labels.addDescription') }} + +
+
+
+ + {{ $t('general.cancel') }} + + + + {{ $t('labels.createView') }} + + +
diff --git a/packages/nc-gui/components/nc/Button.vue b/packages/nc-gui/components/nc/Button.vue index 9c191ad2cf..f07efc6ef8 100644 --- a/packages/nc-gui/components/nc/Button.vue +++ b/packages/nc-gui/components/nc/Button.vue @@ -97,7 +97,7 @@ useEventListener(NcButton, 'mousedown', () => { 'justify-center': props.centered, 'justify-start': !props.centered, }" - class="flex flex-row gap-x-2.5 w-full" + class="flex flex-row gap-x-2.5 nc-btn-inner w-full" > + +
+ + {{ $t('labels.description') }} + + + + + +
+ + + + @@ -635,6 +713,11 @@ const isFullUpdateAllowed = computed(() => {