mirror of https://github.com/nocodb/nocodb
Browse Source
* fix(nc-gui): update topbar breadcrumb divider * feat(nc-gui): custom list component setup * fix(nc-gui): update reload view data tooltip * feat(nc-gui): custom list component * feat(nc-gui): add table list menu * fix(nc-gui): small changes * fix(nc-gui): add bases list dropdown * fix(nc-gui): show chevron icon in mobile view * feat(nc-gui): add view list dropdown in topbar * fix(nc-gui): auto scroll selected list option on open dropdown * feat(nc-gui): add typedocs for each fun from custom list component * chore(nc-gui): add typedocs for new functions * fix(nc-gui): view search issue on default view * fix(nc-gui): reset selected option hover state on search input * fix(nc-gui): font weight issue * fix(nc-gui): show reload data topbar option * fix(nc-gui): change view action menu position * fix(nc-gui): font weight issue * feat(nc-gui): create new table/view from topbar * fix(nc-gui): update other page headers * fix(nc-gui): project view header * fix(nc-gui): update admin panel workspaces page header * fix(nc-gui): admin panel base/workspace user page header * fix(nc-gui): admin panel scroll issue * fix(nc-gui): update project home page * fix(nc-gui): table list scroll issue * chore(nc-gui): lint * fix(nc-gui): reset breadcrumb btn hover state on open dropdown * fix(nc-gui): review changes * fix(nc-gui): use slash icon instead of text * fix(nc-gui): pr review changes * fix(nc-gui): details tab height issue * fix(nc-gui): add user account pages breadcrumb * fix(nc-gui): hide rename view option * fix(nc-gui): disable scrollIntoView on base rename * fix(nc-gui): on rename view select text * fix(nc-gui): user menu overflow issue if sidebar baselist is scrollable * feat(nc-gui): use virtual scrolling for NcList component * fix(nc-gui): reduce chevron icon opacity * chore(nc-gui): lint * fix(nc-gui): ai review changes * fix(nc-gui): view rename input focus issue * fix(nc-gui): topbar width issue * fix(nc-gui): udpate toolbar height * fix(nc-gui): update chevron icon from breadcrumb * fix(nc-gui): update breadcrumb icon size * fix(nc-gui): add min width for breadcrumb * fix(nc-gui): add topbar bottom border * fix(nc-gui): details tab heigth and alignment issue * fix(nc-gui): hide basename and show only icon * fix(nc-gui): update NcList component * fix(nc-gui): update admin panel header * fix(nc-gui): add header in account settings pages * fix(nc-gui): add account pages header oss * fix(nc-gui): udpate max width * chore(nc-gui): lint * fix(nc-gui(: reduce topbar top padding * fix(nc-gui): typo error * fix(nc-gui): review changes * fix(nc-gui): review changes * fix(nc-gui): slash icon conflict * fix(nc-gui): review changes * fix(nc-gui): remove chevron icon & add list wrapper div to control height * fix(nc-gui): ncList keyboard navigation issue * chore(nc-gui): lintpull/9230/head
Ramesh Mane
3 months ago
committed by
GitHub
54 changed files with 2564 additions and 1205 deletions
|
After Width: | Height: | Size: 234 B |
|
After Width: | Height: | Size: 346 B |
|
After Width: | Height: | Size: 235 B |
|
After Width: | Height: | Size: 571 B |
@ -1,8 +1,19 @@
|
||||
<template> |
||||
<div class="h-full overflow-y-auto scrollbar-thin-dull pt-2 px-5"> |
||||
<div class="text-xl mt-4 mb-8 text-left font-weight-bold">{{ $t('title.appStore') }}</div> |
||||
<div class="flex flex-col"> |
||||
<NcPageHeader> |
||||
<template #icon> |
||||
<GeneralIcon icon="appStore" class="flex-none text-gray-700 text-[20px] h-5 w-5" /> |
||||
</template> |
||||
<template #title> |
||||
<span data-rec="true"> |
||||
{{ $t('title.appStore') }} |
||||
</span> |
||||
</template> |
||||
</NcPageHeader> |
||||
<div class="p-6 h-[calc(100vh_-_100px)] border-t-1 border-gray-200 flex flex-col gap-6 overflow-auto nc-scrollbar-thin"> |
||||
<div> |
||||
<LazyDashboardSettingsAppStore /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
@ -0,0 +1,112 @@
|
||||
<script lang="ts" setup> |
||||
const route = useRoute() |
||||
|
||||
interface BreadcrumbType { |
||||
title: string |
||||
active?: boolean |
||||
} |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const breadcrumb = computed<BreadcrumbType[]>(() => { |
||||
const payload: BreadcrumbType[] = [ |
||||
{ |
||||
title: 'Account', |
||||
}, |
||||
] |
||||
|
||||
switch (route.params.page) { |
||||
case 'profile': { |
||||
payload.push({ |
||||
title: t('labels.profile'), |
||||
active: true, |
||||
}) |
||||
break |
||||
} |
||||
case 'tokens': { |
||||
payload.push({ |
||||
title: t('title.tokens'), |
||||
active: true, |
||||
}) |
||||
break |
||||
} |
||||
case 'audit': { |
||||
payload.push({ |
||||
title: t('title.auditLogs'), |
||||
active: true, |
||||
}) |
||||
break |
||||
} |
||||
case 'apps': { |
||||
payload.push({ |
||||
title: t('title.appStore'), |
||||
active: true, |
||||
}) |
||||
break |
||||
} |
||||
} |
||||
|
||||
switch (route.params.nestedPage) { |
||||
case 'password-reset': { |
||||
payload.push( |
||||
...[ |
||||
{ |
||||
title: t('objects.users'), |
||||
}, |
||||
{ |
||||
title: t('title.resetPasswordMenu'), |
||||
active: true, |
||||
}, |
||||
], |
||||
) |
||||
break |
||||
} |
||||
case 'settings': { |
||||
payload.push( |
||||
...[ |
||||
{ |
||||
title: t('objects.users'), |
||||
}, |
||||
{ |
||||
title: t('activity.settings'), |
||||
active: true, |
||||
}, |
||||
], |
||||
) |
||||
break |
||||
} |
||||
} |
||||
|
||||
if ((route.params.page === undefined && route.params.nestedPage === '') || route.params.nestedPage === 'list') { |
||||
payload.push( |
||||
...[ |
||||
{ |
||||
title: t('objects.users'), |
||||
}, |
||||
{ |
||||
title: t('title.userManagement'), |
||||
active: true, |
||||
}, |
||||
], |
||||
) |
||||
} |
||||
|
||||
return payload |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="nc-breadcrumb"> |
||||
<template v-for="(item, i) of breadcrumb" :key="i"> |
||||
<div |
||||
class="nc-breadcrumb-item" |
||||
:class="{ |
||||
active: item.active, |
||||
}" |
||||
> |
||||
{{ item.title }} |
||||
</div> |
||||
<GeneralIcon v-if="i !== breadcrumb.length - 1" icon="ncSlash1" class="nc-breadcrumb-divider" /> |
||||
</template> |
||||
</div> |
||||
</template> |
||||
@ -1,5 +0,0 @@
|
||||
<script lang="ts" setup></script> |
||||
|
||||
<template> |
||||
<WorkspaceIntegrationsView /> |
||||
</template> |
||||
@ -0,0 +1,338 @@
|
||||
<script lang="ts" setup> |
||||
import { useVirtualList } from '@vueuse/core' |
||||
export type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' |
||||
|
||||
export type RawValueType = string | number |
||||
|
||||
interface ListItem { |
||||
value?: RawValueType |
||||
label?: string |
||||
[key: string]: any |
||||
} |
||||
|
||||
/** |
||||
* Props interface for the List component |
||||
*/ |
||||
interface Props { |
||||
/** The currently selected value */ |
||||
value: RawValueType |
||||
/** The list of items to display */ |
||||
list: ListItem[] |
||||
/** |
||||
* The key to use for accessing the value from a list item |
||||
* @default 'value' |
||||
*/ |
||||
optionValueKey?: string |
||||
/** |
||||
* The key to use for accessing the label from a list item |
||||
* @default 'label' |
||||
*/ |
||||
optionLabelKey?: string |
||||
/** Whether the list is open or closed */ |
||||
open?: boolean |
||||
/** Whether to close the list after an item is selected */ |
||||
closeOnSelect?: boolean |
||||
/** Placeholder text for the search input */ |
||||
searchInputPlaceholder?: string |
||||
/** Whether to show the currently selected option */ |
||||
showSelectedOption?: boolean |
||||
/** Custom filter function for list items */ |
||||
filterOption?: (input: string, option: ListItem, index: Number) => boolean |
||||
} |
||||
|
||||
interface Emits { |
||||
(e: 'update:value', value: RawValueType): void |
||||
(e: 'update:open', open: boolean): void |
||||
(e: 'change', option: ListItem): void |
||||
} |
||||
|
||||
const props = withDefaults(defineProps<Props>(), { |
||||
open: false, |
||||
closeOnSelect: true, |
||||
showSelectedOption: true, |
||||
optionValueKey: 'value', |
||||
optionLabelKey: 'label', |
||||
}) |
||||
|
||||
const emits = defineEmits<Emits>() |
||||
|
||||
const vModel = useVModel(props, 'value', emits) |
||||
|
||||
const vOpen = useVModel(props, 'open', emits) |
||||
|
||||
const { optionValueKey, optionLabelKey } = props |
||||
|
||||
const { closeOnSelect, showSelectedOption } = toRefs(props) |
||||
|
||||
const listRef = ref<HTMLDivElement>() |
||||
|
||||
const searchQuery = ref('') |
||||
|
||||
const inputRef = ref() |
||||
|
||||
const activeOptionIndex = ref(-1) |
||||
|
||||
const showHoverEffectOnSelectedOption = ref(true) |
||||
|
||||
const isSearchEnabled = computed(() => props.list.length > 4) |
||||
|
||||
/** |
||||
* Computed property that filters the list of options based on the search query. |
||||
* If a custom filter function is provided via props.filterOption, it will be used instead of the default filtering logic. |
||||
* |
||||
* @returns Filtered list of options |
||||
* |
||||
* @typeparam ListItem - The type of items in the list |
||||
*/ |
||||
const list = computed(() => { |
||||
const query = searchQuery.value.toLowerCase() |
||||
|
||||
return props.list.filter((item, i) => { |
||||
if (props?.filterOption) { |
||||
return props.filterOption(query, item, i) |
||||
} else { |
||||
return item[optionLabelKey]?.toLowerCase()?.includes(query) |
||||
} |
||||
}) |
||||
}) |
||||
|
||||
const { |
||||
list: virtualList, |
||||
containerProps, |
||||
wrapperProps, |
||||
scrollTo, |
||||
} = useVirtualList(list, { |
||||
itemHeight: 38, |
||||
}) |
||||
|
||||
/** |
||||
* Resets the hover effect on the selected option |
||||
* @param clearActiveOption - Whether to clear the active option index |
||||
*/ |
||||
const handleResetHoverEffect = (clearActiveOption = false, newActiveIndex?: number) => { |
||||
if (clearActiveOption && showHoverEffectOnSelectedOption.value) { |
||||
activeOptionIndex.value = -1 |
||||
} |
||||
|
||||
if (newActiveIndex !== undefined) { |
||||
activeOptionIndex.value = newActiveIndex |
||||
} |
||||
|
||||
if (!showHoverEffectOnSelectedOption.value) return |
||||
|
||||
showHoverEffectOnSelectedOption.value = false |
||||
} |
||||
|
||||
/** |
||||
* Handles the selection of an option from the list |
||||
* |
||||
* @param option - The selected list item |
||||
* |
||||
* This function is responsible for handling the selection of an option from the list. |
||||
* It updates the model value, emits a change event, and optionally closes the dropdown. |
||||
*/ |
||||
const handleSelectOption = (option: ListItem) => { |
||||
if (!option?.[optionValueKey]) return |
||||
|
||||
vModel.value = option[optionValueKey] as RawValueType |
||||
emits('change', option) |
||||
if (closeOnSelect.value) { |
||||
vOpen.value = false |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Automatically scrolls to the active option in the list |
||||
*/ |
||||
const handleAutoScrollOption = (useDelay = false) => { |
||||
if (activeOptionIndex.value === -1) return |
||||
|
||||
if (!useDelay) { |
||||
scrollTo(activeOptionIndex.value) |
||||
return |
||||
} |
||||
|
||||
setTimeout(() => { |
||||
scrollTo(activeOptionIndex.value) |
||||
}, 150) |
||||
} |
||||
|
||||
const onArrowDown = () => { |
||||
handleResetHoverEffect() |
||||
|
||||
if (activeOptionIndex.value === list.value.length - 1) return |
||||
|
||||
activeOptionIndex.value = Math.min(activeOptionIndex.value + 1, list.value.length - 1) |
||||
handleAutoScrollOption() |
||||
} |
||||
|
||||
const onArrowUp = () => { |
||||
handleResetHoverEffect() |
||||
|
||||
if (activeOptionIndex.value === 0) return |
||||
|
||||
activeOptionIndex.value = Math.max(activeOptionIndex.value - 1, 0) |
||||
handleAutoScrollOption() |
||||
} |
||||
|
||||
const handleKeydownEnter = () => { |
||||
if (list.value[activeOptionIndex.value]) { |
||||
handleSelectOption(list.value[activeOptionIndex.value]) |
||||
} else if (list.value[0]) { |
||||
handleSelectOption(list.value[activeOptionIndex.value]) |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Focuses the input box when the list is opened |
||||
*/ |
||||
const focusInputBox = () => { |
||||
if (!vOpen.value) return |
||||
|
||||
setTimeout(() => { |
||||
inputRef.value?.focus() |
||||
}, 100) |
||||
} |
||||
|
||||
/** |
||||
* Focuses the list wrapper when the list is opened |
||||
* |
||||
* This function is called when the list is opened and search is not enabled. |
||||
* It sets a timeout to focus the list wrapper element after a short delay. |
||||
* This allows for proper rendering and improves accessibility. |
||||
*/ |
||||
const focusListWrapper = () => { |
||||
if (!vOpen.value || isSearchEnabled.value) return |
||||
|
||||
setTimeout(() => { |
||||
listRef.value?.focus() |
||||
}, 100) |
||||
} |
||||
|
||||
watch( |
||||
vOpen, |
||||
() => { |
||||
if (!vOpen.value) return |
||||
|
||||
searchQuery.value = '' |
||||
showHoverEffectOnSelectedOption.value = true |
||||
|
||||
if (vModel.value) { |
||||
activeOptionIndex.value = list.value.findIndex((o) => o?.[optionValueKey] === vModel.value) |
||||
|
||||
nextTick(() => { |
||||
handleAutoScrollOption(true) |
||||
}) |
||||
} else { |
||||
activeOptionIndex.value = -1 |
||||
} |
||||
|
||||
if (isSearchEnabled.value) { |
||||
focusInputBox() |
||||
} else { |
||||
focusListWrapper() |
||||
} |
||||
}, |
||||
{ |
||||
immediate: true, |
||||
}, |
||||
) |
||||
</script> |
||||
|
||||
<template> |
||||
<div |
||||
ref="listRef" |
||||
tabindex="0" |
||||
class="flex flex-col pt-2 w-64 !focus:(shadow-none outline-none)" |
||||
@keydown.arrow-down.prevent="onArrowDown" |
||||
@keydown.arrow-up.prevent="onArrowUp" |
||||
@keydown.enter.prevent="handleSelectOption(list[activeOptionIndex])" |
||||
> |
||||
<template v-if="isSearchEnabled"> |
||||
<div class="w-full px-2" @click.stop> |
||||
<a-input |
||||
ref="inputRef" |
||||
v-model:value="searchQuery" |
||||
:placeholder="searchInputPlaceholder || $t('placeholder.searchFields')" |
||||
class="nc-toolbar-dropdown-search-field-input !pl-2 !pr-1.5" |
||||
allow-clear |
||||
:bordered="false" |
||||
@keydown.enter.stop="handleKeydownEnter" |
||||
@change="handleResetHoverEffect(false, 0)" |
||||
> |
||||
<template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template |
||||
></a-input> |
||||
</div> |
||||
<NcDivider /> |
||||
</template> |
||||
|
||||
<slot name="listHeader"></slot> |
||||
<div class="nc-list-wrapper"> |
||||
<template v-if="list.length"> |
||||
<div class="h-auto !max-h-[247px]"> |
||||
<div |
||||
v-bind="containerProps" |
||||
class="nc-list !h-auto w-full nc-scrollbar-thin px-2 pb-2" |
||||
:style="{ |
||||
maxHeight: '247px !important', |
||||
}" |
||||
> |
||||
<div v-bind="wrapperProps"> |
||||
<div |
||||
v-for="{ data: option, index: idx } in virtualList" |
||||
:key="idx" |
||||
class="flex items-center gap-2 w-full py-2 px-2 hover:bg-gray-100 cursor-pointer rounded-md" |
||||
:class="[ |
||||
`nc-list-option-${idx}`, |
||||
{ |
||||
'nc-list-option-selected': option[optionValueKey] === vModel, |
||||
'bg-gray-100 ': showHoverEffectOnSelectedOption && option[optionValueKey] === vModel, |
||||
'bg-gray-100 nc-list-option-active': activeOptionIndex === idx, |
||||
}, |
||||
]" |
||||
@mouseover="handleResetHoverEffect(true)" |
||||
@click="handleSelectOption(option)" |
||||
> |
||||
<slot name="listItem" :option="option" :index="idx"> |
||||
<NcTooltip class="truncate flex-1" show-on-truncate-only> |
||||
<template #title> |
||||
{{ option[optionLabelKey] }} |
||||
</template> |
||||
{{ option[optionLabelKey] }} |
||||
</NcTooltip> |
||||
<GeneralIcon |
||||
v-if="showSelectedOption && option[optionValueKey] === vModel" |
||||
id="nc-selected-item-icon" |
||||
icon="check" |
||||
class="flex-none text-primary w-4 h-4" |
||||
/> |
||||
</slot> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template v-if="!list.length"> |
||||
<slot name="emptyState"> |
||||
<div class="h-full text-center flex items-center justify-center gap-3 mt-4"> |
||||
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" class="!my-0" /> |
||||
</div> |
||||
</slot> |
||||
</template> |
||||
</div> |
||||
<slot name="listFooter"></slot> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
:deep(.nc-toolbar-dropdown-search-field-input) { |
||||
&.ant-input-affix-wrapper-focused { |
||||
.ant-input-prefix svg { |
||||
@apply text-brand-500; |
||||
} |
||||
} |
||||
.ant-input { |
||||
@apply placeholder-gray-500; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,36 @@
|
||||
<script lang="ts" setup></script> |
||||
|
||||
<template> |
||||
<div class="nc-page-header"> |
||||
<div class="flex-1 flex items-start gap-3"> |
||||
<div v-if="$slots.icon" class="h-7 flex items-center children:flex-none"> |
||||
<slot name="icon"></slot> |
||||
</div> |
||||
|
||||
<div class="flex flex-col gap-3"> |
||||
<h1 class="nc-page-header-title truncate"> |
||||
<slot name="title"></slot> |
||||
</h1> |
||||
<p v-if="$slots.subtitle" class="nc-page-header-subtitle"> |
||||
<slot name="subtitle"></slot> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
<div v-if="$slots.action"> |
||||
<slot name="action"></slot> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.nc-page-header { |
||||
@apply h-12 flex items-center gap-3 px-3 py-2; |
||||
|
||||
.nc-page-header-title { |
||||
@apply text-xl font-semibold text-gray-800 my-0; |
||||
} |
||||
.nc-page-header-subtitle { |
||||
@apply text-sm font-weight-500 text-gray-700; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,80 @@
|
||||
<script lang="ts" setup> |
||||
const basesStore = useBases() |
||||
const { basesList } = storeToRefs(basesStore) |
||||
|
||||
const baseStore = useBase() |
||||
const { base: activeBase, isSharedBase } = storeToRefs(baseStore) |
||||
|
||||
const { loadProjectTables } = useTablesStore() |
||||
|
||||
const isOpen = ref<boolean>(false) |
||||
|
||||
/** |
||||
* Handles navigation to a selected project/base. |
||||
* |
||||
* @param base - The project/base to navigate to. |
||||
* @returns A Promise that resolves when the navigation is complete. |
||||
* |
||||
* @remarks |
||||
* This function is called when a user selects a project from the dropdown list. |
||||
* It performs the following steps: |
||||
* 1. Checks if the base has a valid ID. |
||||
* 2. Determines if the project data is already populated. |
||||
* 3. Navigates to the selected project's URL. |
||||
* 4. If the project data isn't populated, it loads the project tables. |
||||
*/ |
||||
const handleNavigateToProject = async (base: NcProject) => { |
||||
if (!base?.id) return |
||||
|
||||
const isProjectPopulated = basesStore.isProjectPopulated(base.id!) |
||||
|
||||
await navigateTo( |
||||
baseStore.baseUrl({ |
||||
id: base.id!, |
||||
type: 'database', |
||||
isSharedBase: isSharedBase.value, |
||||
}), |
||||
) |
||||
|
||||
if (!isProjectPopulated) { |
||||
await loadProjectTables(base.id) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<NcDropdown v-model:visible="isOpen"> |
||||
<slot name="default" :is-open="isOpen"></slot> |
||||
<template #overlay> |
||||
<LazyNcList |
||||
v-if="activeBase.id" |
||||
v-model:open="isOpen" |
||||
:value="activeBase.id" |
||||
:list="basesList" |
||||
option-value-key="id" |
||||
option-label-key="title" |
||||
search-input-placeholder="Search bases" |
||||
@change="handleNavigateToProject" |
||||
> |
||||
<template #listItem="{ option }"> |
||||
<GeneralBaseIconColorPicker :type="option?.type" :model-value="parseProp(option.meta).iconColor" size="xsmall" readonly> |
||||
</GeneralBaseIconColorPicker> |
||||
<NcTooltip class="truncate flex-1" show-on-truncate-only> |
||||
<template #title> |
||||
{{ option?.title }} |
||||
</template> |
||||
{{ option?.title }} |
||||
</NcTooltip> |
||||
<GeneralIcon |
||||
v-if="option.id === activeBase.id" |
||||
id="nc-selected-item-icon" |
||||
icon="check" |
||||
class="flex-none text-primary w-4 h-4" |
||||
/> |
||||
</template> |
||||
</LazyNcList> |
||||
</template> |
||||
</NcDropdown> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,159 @@
|
||||
<script lang="ts" setup> |
||||
import type { TableType } from 'nocodb-sdk' |
||||
|
||||
const { isMobileMode } = useGlobal() |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const { isUIAllowed } = useRoles() |
||||
|
||||
const { base } = storeToRefs(useBase()) |
||||
|
||||
const { activeTable, activeTables } = storeToRefs(useTablesStore()) |
||||
|
||||
const { openTable } = useTablesStore() |
||||
|
||||
const isOpen = ref<boolean>(false) |
||||
|
||||
const activeTableSourceIndex = computed(() => base.value?.sources?.findIndex((s) => s.id === activeTable.value?.source_id) ?? -1) |
||||
|
||||
const filteredTableList = computed(() => { |
||||
return activeTables.value.filter((t: TableType) => t?.source_id === activeTable.value?.source_id) || [] |
||||
}) |
||||
|
||||
/** |
||||
* Handles navigation to a selected table. |
||||
* |
||||
* @param table - The table to navigate to. |
||||
* |
||||
* @remarks |
||||
* This function is called when a user selects a table from the dropdown list. |
||||
* It checks if the table has a valid ID and then opens the selected table. |
||||
*/ |
||||
const handleNavigateToTable = (table: TableType) => { |
||||
if (table?.id) { |
||||
openTable(table) |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Opens a dialog to create a new table. |
||||
* |
||||
* @returns void |
||||
* |
||||
* @remarks |
||||
* This function is triggered when the user initiates the table creation process from the topbar. |
||||
* It emits a tracking event, checks for a valid source, and opens a dialog for table creation. |
||||
* The function also handles the dialog closure and potential scrolling to the newly created table. |
||||
* |
||||
* @see {@link packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue} for a similar implementation |
||||
* of table creation dialog. If this function is updated, consider updating the other implementation as well. |
||||
*/ |
||||
function openTableCreateDialog() { |
||||
$e('c:table:create:topbar') |
||||
|
||||
if (activeTableSourceIndex.value === -1) return |
||||
|
||||
isOpen.value = false |
||||
|
||||
const isCreateTableOpen = ref(true) |
||||
const sourceId = base.value!.sources?.[activeTableSourceIndex.value].id |
||||
|
||||
if (!sourceId || !base.value?.id) return |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgTableCreate'), { |
||||
'modelValue': isCreateTableOpen, |
||||
sourceId, // || sources.value[0].id, |
||||
'baseId': base.value!.id, |
||||
'onCreate': closeDialog, |
||||
'onUpdate:modelValue': () => closeDialog(), |
||||
}) |
||||
|
||||
function closeDialog(table?: TableType) { |
||||
isCreateTableOpen.value = false |
||||
|
||||
if (!table) return |
||||
|
||||
// TODO: Better way to know when the table node dom is available |
||||
setTimeout(() => { |
||||
const newTableDom = document.querySelector(`[data-table-id="${table.id}"]`) |
||||
if (!newTableDom) return |
||||
|
||||
// Scroll to the table node |
||||
newTableDom?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) |
||||
}, 1000) |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<NcDropdown v-model:visible="isOpen"> |
||||
<slot name="default" :is-open="isOpen"></slot> |
||||
<template #overlay> |
||||
<LazyNcList |
||||
v-model:open="isOpen" |
||||
:value="activeTable.id" |
||||
:list="filteredTableList" |
||||
option-value-key="id" |
||||
option-label-key="title" |
||||
search-input-placeholder="Search tables" |
||||
@change="handleNavigateToTable" |
||||
> |
||||
<template #listItem="{ option }"> |
||||
<div> |
||||
<LazyGeneralEmojiPicker :emoji="option?.meta?.icon" readonly size="xsmall"> |
||||
<template #default> |
||||
<GeneralIcon icon="table" class="min-w-4 !text-gray-500" /> |
||||
</template> |
||||
</LazyGeneralEmojiPicker> |
||||
</div> |
||||
<NcTooltip class="truncate flex-1" show-on-truncate-only> |
||||
<template #title> |
||||
{{ option?.title }} |
||||
</template> |
||||
{{ option?.title }} |
||||
</NcTooltip> |
||||
<GeneralIcon |
||||
v-if="option.id === activeTable.id" |
||||
id="nc-selected-item-icon" |
||||
icon="check" |
||||
class="flex-none text-primary w-4 h-4" |
||||
/> |
||||
</template> |
||||
|
||||
<template |
||||
v-if=" |
||||
!isMobileMode && |
||||
isUIAllowed('tableCreate', { |
||||
roles: base?.project_role || base?.workspace_role, |
||||
source: base?.sources?.[activeTableSourceIndex] || {}, |
||||
}) |
||||
" |
||||
#listFooter |
||||
> |
||||
<NcDivider class="!mt-0 !mb-2" /> |
||||
<div class="px-2 mb-2" @click="openTableCreateDialog()"> |
||||
<div |
||||
class="px-2 py-1.5 flex items-center justify-between gap-2 text-sm font-weight-500 !text-brand-500 hover:bg-gray-100 rounded-md cursor-pointer" |
||||
> |
||||
<div class="flex items-center gap-2"> |
||||
<GeneralIcon icon="plus" /> |
||||
<div> |
||||
{{ |
||||
$t('general.createEntity', { |
||||
entity: $t('objects.table'), |
||||
}) |
||||
}} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</LazyNcList> |
||||
</template> |
||||
</NcDropdown> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,303 @@
|
||||
<script lang="ts" setup> |
||||
import { type ViewType, ViewTypes } from 'nocodb-sdk' |
||||
|
||||
const { isMobileMode } = useGlobal() |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const { isUIAllowed } = useRoles() |
||||
|
||||
const { base } = storeToRefs(useBase()) |
||||
|
||||
const { activeTable } = storeToRefs(useTablesStore()) |
||||
|
||||
const viewsStore = useViewsStore() |
||||
|
||||
const { activeView, views } = storeToRefs(viewsStore) |
||||
|
||||
const { loadViews, navigateToView } = viewsStore |
||||
|
||||
const { refreshCommandPalette } = useCommandPalette() |
||||
|
||||
const isOpen = ref<boolean>(false) |
||||
|
||||
const activeSource = computed(() => { |
||||
return base.value.sources?.find((s) => s.id === activeView.value?.source_id) |
||||
}) |
||||
|
||||
/** |
||||
* Handles navigation to a selected view. |
||||
* |
||||
* @param view - The view to navigate to. |
||||
* @returns A Promise that resolves when the navigation is complete. |
||||
* |
||||
* @remarks |
||||
* This function is called when a user selects a view from the dropdown list. |
||||
* It checks if the view has a valid ID and then navigates to the selected view. |
||||
* If the view is a form and it's already active, it performs a hard reload. |
||||
*/ |
||||
const handleNavigateToView = async (view: ViewType) => { |
||||
if (!view?.id) return |
||||
|
||||
await navigateToView({ |
||||
view, |
||||
tableId: activeTable.value.id!, |
||||
baseId: base.value.id!, |
||||
hardReload: view.type === ViewTypes.FORM && activeView.value?.id === view.id, |
||||
doNotSwitchTab: true, |
||||
}) |
||||
} |
||||
|
||||
/** |
||||
* Filters the view options based on the input string. |
||||
* |
||||
* @param input - The search input string. |
||||
* @param view - The view object to be filtered. |
||||
* @returns True if the view matches the filter criteria, false otherwise. |
||||
* |
||||
* @remarks |
||||
* This function is used to filter the list of views in the dropdown. |
||||
* It checks if the input string matches either the default view title (translated) or the view's title. |
||||
* The matching is case-insensitive. |
||||
*/ |
||||
const filterOption = (input: string = '', view: ViewType) => { |
||||
if (view.is_default && t('title.defaultView').toLowerCase().includes(input)) { |
||||
return true |
||||
} |
||||
|
||||
return view.title?.toLowerCase()?.includes(input.toLowerCase()) |
||||
} |
||||
|
||||
/** |
||||
* Opens a modal for creating or editing a view. |
||||
* |
||||
* @param options - The options for opening the modal. |
||||
* @param options.title - The title of the modal. Default is an empty string. |
||||
* @param options.type - The type of view to create or edit. |
||||
* @param options.copyViewId - The ID of the view to copy, if creating a copy. |
||||
* @param options.groupingFieldColumnId - The ID of the column to use for grouping, if applicable. |
||||
* @param options.calendarRange - The date range for calendar views. |
||||
* @param options.coverImageColumnId - The ID of the column to use for cover images, if applicable. |
||||
* |
||||
* @returns A Promise that resolves when the modal operation is complete. |
||||
* |
||||
* @remarks |
||||
* This function opens a modal dialog for creating or editing a view. |
||||
* It handles the dialog state, view creation, and navigation to the newly created view. |
||||
* After creating a view, it refreshes the command palette and reloads the views. |
||||
* |
||||
* @see {@link packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue} for a similar implementation of view creation dialog. |
||||
* If this function is updated, consider updating the other implementations as well. |
||||
*/ |
||||
async function onOpenModal({ |
||||
title = '', |
||||
type, |
||||
copyViewId, |
||||
groupingFieldColumnId, |
||||
calendarRange, |
||||
coverImageColumnId, |
||||
}: { |
||||
title?: string |
||||
type: ViewTypes |
||||
copyViewId?: string |
||||
groupingFieldColumnId?: string |
||||
calendarRange?: Array<{ |
||||
fk_from_column_id: string |
||||
fk_to_column_id: string | null |
||||
}> |
||||
coverImageColumnId?: string |
||||
}) { |
||||
isOpen.value = false |
||||
|
||||
const isDlgOpen = ref(true) |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgViewCreate'), { |
||||
'modelValue': isDlgOpen, |
||||
title, |
||||
type, |
||||
'tableId': activeTable.value.id, |
||||
'selectedViewId': copyViewId, |
||||
calendarRange, |
||||
groupingFieldColumnId, |
||||
coverImageColumnId, |
||||
'onUpdate:modelValue': closeDialog, |
||||
'onCreated': async (view: ViewType) => { |
||||
closeDialog() |
||||
|
||||
refreshCommandPalette() |
||||
|
||||
await loadViews({ |
||||
tableId: activeTable.value.id!, |
||||
force: true, |
||||
}) |
||||
|
||||
activeTable.value.meta = { |
||||
...(activeTable.value.meta as object), |
||||
hasNonDefaultViews: true, |
||||
} |
||||
|
||||
navigateToView({ |
||||
view, |
||||
tableId: activeTable.value.id!, |
||||
baseId: base.value.id!, |
||||
doNotSwitchTab: true, |
||||
}) |
||||
|
||||
$e('a:view:create', { view: view.type }) |
||||
}, |
||||
}) |
||||
|
||||
function closeDialog() { |
||||
isOpen.value = false |
||||
isDlgOpen.value = false |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<NcDropdown v-if="activeView" v-model:visible="isOpen"> |
||||
<slot name="default" :is-open="isOpen"></slot> |
||||
<template #overlay> |
||||
<LazyNcList |
||||
v-model:open="isOpen" |
||||
:value="activeView.id" |
||||
:list="views" |
||||
option-value-key="id" |
||||
option-label-key="title" |
||||
search-input-placeholder="Search views" |
||||
:filter-option="filterOption" |
||||
@change="handleNavigateToView" |
||||
> |
||||
<template #listItem="{ option }"> |
||||
<div> |
||||
<LazyGeneralEmojiPicker :emoji="option?.meta?.icon" readonly size="xsmall"> |
||||
<template #default> |
||||
<GeneralViewIcon :meta="{ type: option?.type }" class="min-w-4 text-lg flex" /> |
||||
</template> |
||||
</LazyGeneralEmojiPicker> |
||||
</div> |
||||
<NcTooltip class="truncate flex-1" show-on-truncate-only> |
||||
<template #title> |
||||
{{ option?.is_default ? $t('title.defaultView') : option?.title }} |
||||
</template> |
||||
{{ option?.is_default ? $t('title.defaultView') : option?.title }} |
||||
</NcTooltip> |
||||
<GeneralIcon |
||||
v-if="option.id === activeView.id" |
||||
id="nc-selected-item-icon" |
||||
icon="check" |
||||
class="flex-none text-primary w-4 h-4" |
||||
/> |
||||
</template> |
||||
|
||||
<template v-if="!isMobileMode && isUIAllowed('viewCreateOrEdit')" #listFooter> |
||||
<NcDivider class="!mt-0 !mb-2" /> |
||||
<div class="overflow-hidden mb-2"> |
||||
<a-menu class="nc-viewlist-menu"> |
||||
<a-sub-menu popup-class-name="nc-viewlist-submenu-popup "> |
||||
<template #title> |
||||
<div class="flex items-center justify-between gap-2 text-sm font-weight-500 !text-brand-500"> |
||||
<div class="flex items-center gap-2"> |
||||
<GeneralIcon icon="plus" /> |
||||
<div> |
||||
{{ |
||||
$t('general.createEntity', { |
||||
entity: $t('objects.view'), |
||||
}) |
||||
}} |
||||
</div> |
||||
</div> |
||||
<GeneralIcon icon="arrowRight" class="text-base text-gray-600 group-hover:text-gray-800" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<template #expandIcon> </template> |
||||
|
||||
<a-menu-item @click.stop="onOpenModal({ type: ViewTypes.GRID })"> |
||||
<div class="nc-viewlist-submenu-popup-item" data-testid="topbar-view-create-grid"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.GRID }" /> |
||||
Grid |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item v-if="!activeSource?.is_schema_readonly" @click="onOpenModal({ type: ViewTypes.FORM })"> |
||||
<div class="nc-viewlist-submenu-popup-item" data-testid="topbar-view-create-form"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.FORM }" /> |
||||
Form |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item @click="onOpenModal({ type: ViewTypes.GALLERY })"> |
||||
<div class="nc-viewlist-submenu-popup-item" data-testid="topbar-view-create-gallery"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.GALLERY }" /> |
||||
Gallery |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item data-testid="topbar-view-create-kanban" @click="onOpenModal({ type: ViewTypes.KANBAN })"> |
||||
<div class="nc-viewlist-submenu-popup-item"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.KANBAN }" /> |
||||
Kanban |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item data-testid="topbar-view-create-calendar" @click="onOpenModal({ type: ViewTypes.CALENDAR })"> |
||||
<div class="nc-viewlist-submenu-popup-item"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.CALENDAR }" class="!w-4 !h-4" /> |
||||
{{ $t('objects.viewType.calendar') }} |
||||
</div> |
||||
</a-menu-item> |
||||
</a-sub-menu> |
||||
</a-menu> |
||||
</div> |
||||
</template> |
||||
</LazyNcList> |
||||
</template> |
||||
</NcDropdown> |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
.nc-viewlist-menu { |
||||
@apply !border-r-0; |
||||
|
||||
.ant-menu-submenu { |
||||
@apply !mx-2; |
||||
|
||||
.ant-menu-submenu-title { |
||||
@apply flex items-center gap-2 py-1.5 px-2 my-0 h-auto hover:bg-gray-100 cursor-pointer rounded-md; |
||||
|
||||
.ant-menu-title-content { |
||||
@apply w-full; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.nc-viewlist-submenu-popup { |
||||
@apply !rounded-lg border-1 border-gray-50; |
||||
|
||||
.ant-menu.ant-menu-sub { |
||||
@apply p-2 !rounded-lg !shadow-lg shadow-gray-200; |
||||
} |
||||
|
||||
.ant-menu-item { |
||||
@apply h-auto !my-0 text-sm !leading-5 py-2 px-2 hover:!bg-gray-100 cursor-pointer rounded-md; |
||||
|
||||
.ant-menu-title-content { |
||||
@apply w-full px-0; |
||||
} |
||||
|
||||
.nc-viewlist-submenu-popup-item { |
||||
@apply flex items-center gap-2 !text-gray-800; |
||||
} |
||||
|
||||
&.ant-menu-item-selected { |
||||
@apply bg-transparent; |
||||
} |
||||
} |
||||
} |
||||
.nc-viewlist-submenu-popup .ant-dropdown-menu.ant-dropdown-menu-sub { |
||||
@apply !rounded-lg !shadow-lg shadow-gray-200; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue