Browse Source

Merge pull request #6954 from nocodb/fix/runtime-directive-warnings

fix: vue warnings
pull/6759/head
աӄա 12 months ago committed by GitHub
parent
commit
a562540011
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 38
      packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
  2. 35
      packages/nc-gui/components/dashboard/TreeView/BaseOptions.vue
  3. 109
      packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
  4. 101
      packages/nc-gui/components/dashboard/TreeView/TableNode.vue
  5. 8
      packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
  6. 2
      packages/nc-gui/components/general/EmojiPicker.vue
  7. 49
      packages/nc-gui/components/general/OpenLeftSidebarBtn.vue
  8. 4
      packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
  9. 11
      packages/nc-gui/components/smartsheet/expanded-form/index.vue
  10. 114
      packages/nc-gui/components/smartsheet/grid/Table.vue
  11. 2
      packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue

38
packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue

@ -93,17 +93,21 @@ onMounted(() => {
</div> </div>
<template #overlay> <template #overlay>
<NcMenu data-testid="nc-sidebar-userinfo"> <NcMenu data-testid="nc-sidebar-userinfo">
<NcMenuItem v-e="['c:user:logout']" data-testid="nc-sidebar-user-logout" @click="logout"> <NcMenuItem data-testid="nc-sidebar-user-logout" @click="logout">
<GeneralLoader v-if="isLoggingOut" class="!ml-0.5 !mr-0.5 !max-h-4.5 !-mt-0.5" /> <div v-e="['c:user:logout']" class="flex gap-2 items-center">
<GeneralIcon v-else icon="signout" class="menu-icon" /> <GeneralLoader v-if="isLoggingOut" class="!ml-0.5 !mr-0.5 !max-h-4.5 !-mt-0.5" />
<span class="menu-btn"> {{ $t('general.logout') }}</span> <GeneralIcon v-else icon="signout" class="menu-icon" />
<span class="menu-btn"> {{ $t('general.logout') }}</span>
</div>
</NcMenuItem> </NcMenuItem>
<template v-if="!isMobileMode"> <template v-if="!isMobileMode">
<NcMenuItem v-e="['c:auth-token:copy']" @click="onCopy"> <NcMenuItem @click="onCopy">
<GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black menu-icon" /> <div v-e="['c:auth-token:copy']" class="flex gap-2 items-center">
<GeneralIcon v-else icon="copy" class="menu-icon" /> <GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black menu-icon" />
<template v-if="isAuthTokenCopied"> {{ $t('title.copiedAuthToken') }} </template> <GeneralIcon v-else icon="copy" class="menu-icon" />
<template v-else> {{ $t('title.copyAuthToken') }} </template> <template v-if="isAuthTokenCopied"> {{ $t('title.copiedAuthToken') }} </template>
<template v-else> {{ $t('title.copyAuthToken') }} </template>
</div>
</NcMenuItem> </NcMenuItem>
</template> </template>
<NcDivider /> <NcDivider />
@ -140,13 +144,17 @@ onMounted(() => {
<template v-if="!appInfo.ee"> <template v-if="!appInfo.ee">
<NcDivider /> <NcDivider />
<a-popover key="language" class="lang-menu !py-1.5" placement="rightBottom"> <a-popover key="language" class="lang-menu !py-1.5" placement="rightBottom">
<NcMenuItem v-e="['c:translate:open']"> <NcMenuItem>
<GeneralIcon icon="translate" class="group-hover:text-black nc-language ml-0.25 menu-icon" /> <div v-e="['c:translate:open']" class="flex gap-2 items-center">
{{ $t('labels.language') }} <GeneralIcon icon="translate" class="group-hover:text-black nc-language ml-0.25 menu-icon" />
<div class="flex items-center text-gray-400 text-xs">{{ $t('labels.community.communityTranslated') }}</div> {{ $t('labels.language') }}
<div class="flex-1" /> <div class="flex items-center text-gray-400 text-xs">{{ $t('labels.community.communityTranslated') }}</div>
<div class="flex-1" />
<MaterialSymbolsChevronRightRounded class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400" /> <MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
/>
</div>
</NcMenuItem> </NcMenuItem>
<template #content> <template #content>

35
packages/nc-gui/components/dashboard/TreeView/BaseOptions.vue

@ -62,7 +62,6 @@ function openQuickImportDialog(type: string) {
<NcSubMenu class="py-0" data-testid="nc-sidebar-base-import"> <NcSubMenu class="py-0" data-testid="nc-sidebar-base-import">
<template #title> <template #title>
<GeneralIcon icon="download" /> <GeneralIcon icon="download" />
{{ $t('labels.importData') }} {{ $t('labels.importData') }}
</template> </template>
@ -71,41 +70,41 @@ function openQuickImportDialog(type: string) {
<NcMenuItem <NcMenuItem
v-if="isUIAllowed('airtableImport', { roles: baseRole })" v-if="isUIAllowed('airtableImport', { roles: baseRole })"
key="quick-import-airtable" key="quick-import-airtable"
v-e="['c:import:airtable']"
@click="openAirtableImportDialog(source.base_id, source.id)" @click="openAirtableImportDialog(source.base_id, source.id)"
> >
<GeneralIcon icon="airtable" class="max-w-3.75 group-hover:text-black" /> <div v-e="['c:import:airtable']" class="flex gap-2 items-center">
<div class="ml-0.5">{{ $t('labels.airtable') }}</div> <GeneralIcon icon="airtable" class="max-w-3.75 group-hover:text-black" />
<div class="ml-0.5">{{ $t('labels.airtable') }}</div>
</div>
</NcMenuItem> </NcMenuItem>
<NcMenuItem <NcMenuItem v-if="isUIAllowed('csvImport', { roles: baseRole })" key="quick-import-csv" @click="openQuickImportDialog('csv')">
v-if="isUIAllowed('csvImport', { roles: baseRole })" <div v-e="['c:import:csv']" class="flex gap-2 items-center">
key="quick-import-csv" <GeneralIcon icon="csv" class="w-4 group-hover:text-black" />
v-e="['c:import:csv']" {{ $t('labels.csvFile') }}
@click="openQuickImportDialog('csv')" </div>
>
<GeneralIcon icon="csv" class="w-4 group-hover:text-black" />
{{ $t('labels.csvFile') }}
</NcMenuItem> </NcMenuItem>
<NcMenuItem <NcMenuItem
v-if="isUIAllowed('jsonImport', { roles: baseRole })" v-if="isUIAllowed('jsonImport', { roles: baseRole })"
key="quick-import-json" key="quick-import-json"
v-e="['c:import:json']"
@click="openQuickImportDialog('json')" @click="openQuickImportDialog('json')"
> >
<GeneralIcon icon="code" class="w-4 group-hover:text-black" /> <div v-e="['c:import:json']" class="flex gap-2 items-center">
{{ $t('labels.jsonFile') }} <GeneralIcon icon="code" class="w-4 group-hover:text-black" />
{{ $t('labels.jsonFile') }}
</div>
</NcMenuItem> </NcMenuItem>
<NcMenuItem <NcMenuItem
v-if="isUIAllowed('excelImport', { roles: baseRole })" v-if="isUIAllowed('excelImport', { roles: baseRole })"
key="quick-import-excel" key="quick-import-excel"
v-e="['c:import:excel']"
@click="openQuickImportDialog('excel')" @click="openQuickImportDialog('excel')"
> >
<GeneralIcon icon="excel" class="max-w-4 group-hover:text-black" /> <div v-e="['c:import:excel']" class="flex gap-2 items-center">
{{ $t('labels.microsoftExcel') }} <GeneralIcon icon="excel" class="max-w-4 group-hover:text-black" />
{{ $t('labels.microsoftExcel') }}
</div>
</NcMenuItem> </NcMenuItem>
</NcSubMenu> </NcSubMenu>
</template> </template>

109
packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@ -77,7 +77,7 @@ const tempTitle = ref('')
const activeBaseId = ref('') const activeBaseId = ref('')
const isErdModalOpen = ref<Boolean>(false) const isErdModalOpen = ref<boolean>(false)
const { t } = useI18n() const { t } = useI18n()
@ -116,7 +116,7 @@ const showBaseOption = computed(() => {
return ['airtableImport', 'csvImport', 'jsonImport', 'excelImport'].some((permission) => isUIAllowed(permission)) return ['airtableImport', 'csvImport', 'jsonImport', 'excelImport'].some((permission) => isUIAllowed(permission))
}) })
const enableEditMode = () => { function enableEditMode() {
editMode.value = true editMode.value = true
tempTitle.value = base.value.title! tempTitle.value = base.value.title!
nextTick(() => { nextTick(() => {
@ -126,7 +126,7 @@ const enableEditMode = () => {
}) })
} }
const updateProjectTitle = async () => { async function updateProjectTitle() {
if (!tempTitle.value) return if (!tempTitle.value) return
try { try {
@ -146,7 +146,7 @@ const updateProjectTitle = async () => {
const { copy } = useCopy(true) const { copy } = useCopy(true)
const copyProjectInfo = async () => { async function copyProjectInfo() {
try { try {
if ( if (
await copy( await copy(
@ -168,7 +168,7 @@ defineExpose({
enableEditMode, enableEditMode,
}) })
const setIcon = async (icon: string, base: BaseType) => { async function setIcon(icon: string, base: BaseType) {
try { try {
const meta = { const meta = {
...((base.meta as object) || {}), ...((base.meta as object) || {}),
@ -224,7 +224,8 @@ function openTableCreateDialog(sourceIndex?: number | undefined) {
} }
const isAddNewProjectChildEntityLoading = ref(false) const isAddNewProjectChildEntityLoading = ref(false)
const addNewProjectChildEntity = async () => {
async function addNewProjectChildEntity() {
if (isAddNewProjectChildEntityLoading.value) return if (isAddNewProjectChildEntityLoading.value) return
isAddNewProjectChildEntityLoading.value = true isAddNewProjectChildEntityLoading.value = true
@ -248,7 +249,7 @@ const addNewProjectChildEntity = async () => {
} }
} }
const onProjectClick = async (base: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => { async function onProjectClick(base: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) {
if (!base) { if (!base) {
return return
} }
@ -347,17 +348,17 @@ onKeyStroke('Escape', () => {
const isDuplicateDlgOpen = ref(false) const isDuplicateDlgOpen = ref(false)
const selectedProjectToDuplicate = ref() const selectedProjectToDuplicate = ref()
const duplicateProject = (base: BaseType) => { function duplicateProject(base: BaseType) {
selectedProjectToDuplicate.value = base selectedProjectToDuplicate.value = base
isDuplicateDlgOpen.value = true isDuplicateDlgOpen.value = true
} }
const tableDelete = () => { function tableDelete() {
isTableDeleteDialogVisible.value = true isTableDeleteDialogVisible.value = true
$e('c:table:delete') $e('c:table:delete')
} }
const projectDelete = () => { function projectDelete() {
isProjectDeleteDialogVisible.value = true isProjectDeleteDialogVisible.value = true
$e('c:project:delete') $e('c:project:delete')
} }
@ -396,21 +397,18 @@ const projectDelete = () => {
</NcButton> </NcButton>
<div class="flex items-center mr-1" @click="onProjectClick(base)"> <div class="flex items-center mr-1" @click="onProjectClick(base)">
<div class="flex items-center select-none w-6 h-full"> <div v-e="['c:base:emojiSelect']" class="flex items-center select-none w-6 h-full">
<a-spin v-if="base.isLoading" class="!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" :indicator="indicator" /> <a-spin v-if="base.isLoading" class="!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" :indicator="indicator" />
<LazyGeneralEmojiPicker <LazyGeneralEmojiPicker
v-else v-else
:key="base.meta?.icon" :key="base.meta?.icon"
v-e="['c:base:emojiSelect']"
:emoji="base.meta?.icon" :emoji="base.meta?.icon"
:readonly="true" :readonly="true"
size="small" size="small"
@emoji-selected="setIcon($event, base)" @emoji-selected="setIcon($event, base)"
> >
<template #default> <GeneralProjectIcon :type="base.type" />
<GeneralProjectIcon :type="base.type" />
</template>
</LazyGeneralEmojiPicker> </LazyGeneralEmojiPicker>
</div> </div>
</div> </div>
@ -460,24 +458,22 @@ const projectDelete = () => {
@click="isOptionsOpen = false" @click="isOptionsOpen = false"
> >
<template v-if="!isSharedBase"> <template v-if="!isSharedBase">
<NcMenuItem <NcMenuItem v-if="isUIAllowed('baseRename')" data-testid="nc-sidebar-project-rename" @click="enableEditMode">
v-if="isUIAllowed('baseRename')" <div v-e="['c:base:rename']" class="flex gap-2 items-center">
v-e="['c:base:rename']" <GeneralIcon icon="edit" class="group-hover:text-black" />
data-testid="nc-sidebar-project-rename" {{ $t('general.rename') }}
@click="enableEditMode" </div>
>
<GeneralIcon icon="edit" class="group-hover:text-black" />
{{ $t('general.rename') }}
</NcMenuItem> </NcMenuItem>
<NcMenuItem <NcMenuItem
v-if="isUIAllowed('baseDuplicate', { roles: [stringifyRolesObj(orgRoles), baseRole].join() })" v-if="isUIAllowed('baseDuplicate', { roles: [stringifyRolesObj(orgRoles), baseRole].join() })"
v-e="['c:base:duplicate']"
data-testid="nc-sidebar-base-duplicate" data-testid="nc-sidebar-base-duplicate"
@click="duplicateProject(base)" @click="duplicateProject(base)"
> >
<GeneralIcon icon="duplicate" class="text-gray-700" /> <div v-e="['c:base:duplicate']" class="flex gap-2 items-center">
{{ $t('general.duplicate') }} <GeneralIcon icon="duplicate" class="text-gray-700" />
{{ $t('general.duplicate') }}
</div>
</NcMenuItem> </NcMenuItem>
<NcDivider v-if="['baseDuplicate', 'baseRename'].some((permission) => isUIAllowed(permission))" /> <NcDivider v-if="['baseDuplicate', 'baseRename'].some((permission) => isUIAllowed(permission))" />
@ -486,30 +482,27 @@ const projectDelete = () => {
<NcMenuItem <NcMenuItem
v-if="!isEeUI" v-if="!isEeUI"
key="copy" key="copy"
v-e="['c:base:copy-proj-info']"
data-testid="nc-sidebar-base-copy-base-info" data-testid="nc-sidebar-base-copy-base-info"
@click.stop="copyProjectInfo" @click.stop="copyProjectInfo"
> >
<GeneralIcon icon="copy" class="group-hover:text-black" /> <div v-e="['c:base:copy-proj-info']" class="flex gap-2 items-center">
{{ $t('activity.account.projInfo') }} <GeneralIcon icon="copy" class="group-hover:text-black" />
{{ $t('activity.account.projInfo') }}
</div>
</NcMenuItem> </NcMenuItem>
<!-- ERD View --> <!-- ERD View -->
<NcMenuItem <NcMenuItem key="erd" data-testid="nc-sidebar-base-relations" @click="openErdView(base?.sources?.[0]!)">
key="erd" <div v-e="['c:base:erd']" class="flex gap-2 items-center">
v-e="['c:base:erd']" <GeneralIcon icon="erd" />
data-testid="nc-sidebar-base-relations" {{ $t('title.relations') }}
@click="openErdView(base?.sources?.[0]!)" </div>
>
<GeneralIcon icon="erd" />
{{ $t('title.relations') }}
</NcMenuItem> </NcMenuItem>
<!-- Swagger: Rest APIs --> <!-- Swagger: Rest APIs -->
<NcMenuItem <NcMenuItem
v-if="isUIAllowed('apiDocs')" v-if="isUIAllowed('apiDocs')"
key="api" key="api"
v-e="['c:base:api-docs']"
data-testid="nc-sidebar-base-rest-apis" data-testid="nc-sidebar-base-rest-apis"
@click.stop=" @click.stop="
() => { () => {
@ -518,8 +511,10 @@ const projectDelete = () => {
} }
" "
> >
<GeneralIcon icon="snippet" class="group-hover:text-black !max-w-3.9" /> <div v-e="['c:base:api-docs']" class="flex gap-2 items-center">
{{ $t('activity.account.swagger') }} <GeneralIcon icon="snippet" class="group-hover:text-black !max-w-3.9" />
{{ $t('activity.account.swagger') }}
</div>
</NcMenuItem> </NcMenuItem>
</template> </template>
@ -533,13 +528,14 @@ const projectDelete = () => {
<NcMenuItem <NcMenuItem
v-if="isUIAllowed('baseMiscSettings')" v-if="isUIAllowed('baseMiscSettings')"
key="teamAndSettings" key="teamAndSettings"
v-e="['c:base:settings']"
data-testid="nc-sidebar-base-settings" data-testid="nc-sidebar-base-settings"
class="nc-sidebar-base-base-settings" class="nc-sidebar-base-base-settings"
@click="toggleDialog(true, 'teamAndAuth', undefined, base.id)" @click="toggleDialog(true, 'teamAndAuth', undefined, base.id)"
> >
<GeneralIcon icon="settings" class="group-hover:text-black" /> <div v-e="['c:base:settings']" class="flex gap-2 items-center">
{{ $t('activity.settings') }} <GeneralIcon icon="settings" class="group-hover:text-black" />
{{ $t('activity.settings') }}
</div>
</NcMenuItem> </NcMenuItem>
<NcMenuItem <NcMenuItem
v-if="isUIAllowed('baseDelete', { roles: [stringifyRolesObj(orgRoles), baseRole].join() })" v-if="isUIAllowed('baseDelete', { roles: [stringifyRolesObj(orgRoles), baseRole].join() })"
@ -547,8 +543,10 @@ const projectDelete = () => {
class="!text-red-500 !hover:bg-red-50" class="!text-red-500 !hover:bg-red-50"
@click="projectDelete" @click="projectDelete"
> >
<GeneralIcon icon="delete" class="w-4" /> <div class="flex gap-2 items-center">
{{ $t('general.delete') }} <GeneralIcon icon="delete" class="w-4" />
{{ $t('general.delete') }}
</div>
</NcMenuItem> </NcMenuItem>
</NcMenu> </NcMenu>
</template> </template>
@ -666,9 +664,11 @@ const projectDelete = () => {
@click="isBasesOptionsOpen[source!.id!] = false" @click="isBasesOptionsOpen[source!.id!] = false"
> >
<!-- ERD View --> <!-- ERD View -->
<NcMenuItem key="erd" v-e="['c:source:erd']" @click="openErdView(source)"> <NcMenuItem key="erd" @click="openErdView(source)">
<GeneralIcon icon="erd" /> <div v-e="['c:source:erd']" class="flex gap-2 items-center">
{{ $t('title.relations') }} <GeneralIcon icon="erd" />
{{ $t('title.relations') }}
</div>
</NcMenuItem> </NcMenuItem>
<DashboardTreeViewBaseOptions v-if="showBaseOption" v-model:base="base" :source="source" /> <DashboardTreeViewBaseOptions v-if="showBaseOption" v-model:base="base" :source="source" />
@ -712,12 +712,8 @@ const projectDelete = () => {
<template v-else-if="contextMenuTarget.type === 'source'"></template> <template v-else-if="contextMenuTarget.type === 'source'"></template>
<template v-else-if="contextMenuTarget.type === 'table'"> <template v-else-if="contextMenuTarget.type === 'table'">
<NcMenuItem <NcMenuItem v-if="isUIAllowed('tableRename')" @click="openRenameTableDialog(contextMenuTarget.value, true)">
v-if="isUIAllowed('tableRename')" <div v-e="['c:table:rename']" class="nc-base-option-item flex gap-2 items-center">
v-e="['c:table:rename']"
@click="openRenameTableDialog(contextMenuTarget.value, true)"
>
<div class="nc-base-option-item">
<GeneralIcon icon="edit" class="text-gray-700" /> <GeneralIcon icon="edit" class="text-gray-700" />
{{ $t('general.rename') }} {{ $t('general.rename') }}
</div> </div>
@ -725,17 +721,16 @@ const projectDelete = () => {
<NcMenuItem <NcMenuItem
v-if="isUIAllowed('tableDuplicate') && (contextMenuBase?.is_meta || contextMenuBase?.is_local)" v-if="isUIAllowed('tableDuplicate') && (contextMenuBase?.is_meta || contextMenuBase?.is_local)"
v-e="['c:table:duplicate']"
@click="duplicateTable(contextMenuTarget.value)" @click="duplicateTable(contextMenuTarget.value)"
> >
<div class="nc-base-option-item"> <div v-e="['c:table:duplicate']" class="nc-base-option-item flex gap-2 items-center">
<GeneralIcon icon="duplicate" class="text-gray-700" /> <GeneralIcon icon="duplicate" class="text-gray-700" />
{{ $t('general.duplicate') }} {{ $t('general.duplicate') }}
</div> </div>
</NcMenuItem> </NcMenuItem>
<NcDivider /> <NcDivider />
<NcMenuItem v-if="isUIAllowed('table-delete')" class="!hover:bg-red-50" @click="tableDelete"> <NcMenuItem v-if="isUIAllowed('table-delete')" class="!hover:bg-red-50" @click="tableDelete">
<div class="nc-base-option-item text-red-600"> <div class="nc-base-option-item flex gap-2 items-center text-red-600">
<GeneralIcon icon="delete" /> <GeneralIcon icon="delete" />
{{ $t('general.delete') }} {{ $t('general.delete') }}
</div> </div>

101
packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@ -180,8 +180,10 @@ const isTableOpened = computed(() => {
:class="{ '!rotate-180': isExpanded }" :class="{ '!rotate-180': isExpanded }"
/> />
</NcButton> </NcButton>
<div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`"> <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
<div <div
v-e="['c:table:emoji-picker']"
class="flex items-center nc-table-icon" class="flex items-center nc-table-icon"
:class="{ :class="{
'pointer-events-none': !canUserEditEmote, 'pointer-events-none': !canUserEditEmote,
@ -190,7 +192,6 @@ const isTableOpened = computed(() => {
> >
<LazyGeneralEmojiPicker <LazyGeneralEmojiPicker
:key="table.meta?.icon" :key="table.meta?.icon"
v-e="['c:table:emoji-picker']"
:emoji="table.meta?.icon" :emoji="table.meta?.icon"
size="small" size="small"
:readonly="!canUserEditEmote || isMobileMode" :readonly="!canUserEditEmote || isMobileMode"
@ -239,60 +240,62 @@ const isTableOpened = computed(() => {
</span> </span>
<div class="flex flex-grow h-full"></div> <div class="flex flex-grow h-full"></div>
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<NcDropdown <div
v-if=" v-if="
!isSharedBase && !isSharedBase &&
(isUIAllowed('tableRename', { roles: baseRole }) || isUIAllowed('tableDelete', { roles: baseRole })) (isUIAllowed('tableRename', { roles: baseRole }) || isUIAllowed('tableDelete', { roles: baseRole }))
" "
v-e="['c:table:option']" v-e="['c:table:option']"
:trigger="['click']"
class="nc-sidebar-node-btn"
@click.stop
> >
<MdiDotsHorizontal <NcDropdown :trigger="['click']" class="nc-sidebar-node-btn" @click.stop>
data-testid="nc-sidebar-table-context-menu" <MdiDotsHorizontal
class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 !text-gray-600 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)" data-testid="nc-sidebar-table-context-menu"
/> class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 !text-gray-600 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)"
/>
<template #overlay>
<NcMenu> <template #overlay>
<NcMenuItem <NcMenu>
v-if="isUIAllowed('tableRename', { roles: baseRole })" <NcMenuItem
v-e="['c:table:rename']" v-if="isUIAllowed('tableRename', { roles: baseRole })"
:data-testid="`sidebar-table-rename-${table.title}`" :data-testid="`sidebar-table-rename-${table.title}`"
@click="openRenameTableDialog(table, base.sources[sourceIndex].id)" @click="openRenameTableDialog(table, base.sources[sourceIndex].id)"
> >
<GeneralIcon icon="edit" class="text-gray-700" /> <div v-e="['c:table:rename']" class="flex gap-2 items-center">
{{ $t('general.rename') }} <GeneralIcon icon="edit" class="text-gray-700" />
</NcMenuItem> {{ $t('general.rename') }}
</div>
<NcMenuItem </NcMenuItem>
v-if="
isUIAllowed('tableDuplicate') && <NcMenuItem
base.sources?.[sourceIndex] && v-if="
(base.sources[sourceIndex].is_meta || base.sources[sourceIndex].is_local) isUIAllowed('tableDuplicate') &&
" base.sources?.[sourceIndex] &&
v-e="['c:table:duplicate']" (base.sources[sourceIndex].is_meta || base.sources[sourceIndex].is_local)
:data-testid="`sidebar-table-duplicate-${table.title}`" "
@click="duplicateTable(table)" :data-testid="`sidebar-table-duplicate-${table.title}`"
> @click="duplicateTable(table)"
<GeneralIcon icon="duplicate" class="text-gray-700" /> >
{{ $t('general.duplicate') }} <div v-e="['c:table:duplicate']" class="flex gap-2 items-center">
</NcMenuItem> <GeneralIcon icon="duplicate" class="text-gray-700" />
{{ $t('general.duplicate') }}
<NcMenuItem </div>
v-if="isUIAllowed('tableDelete', { roles: baseRole })" </NcMenuItem>
v-e="['c:table:delete']"
:data-testid="`sidebar-table-delete-${table.title}`" <NcMenuItem
class="!text-red-500 !hover:bg-red-50" v-if="isUIAllowed('tableDelete', { roles: baseRole })"
@click="isTableDeleteDialogVisible = true" :data-testid="`sidebar-table-delete-${table.title}`"
> class="!text-red-500 !hover:bg-red-50"
<GeneralIcon icon="delete" /> @click="isTableDeleteDialogVisible = true"
{{ $t('general.delete') }} >
</NcMenuItem> <div v-e="['c:table:delete']" class="flex gap-2 items-center">
</NcMenu> <GeneralIcon icon="delete" />
</template> {{ $t('general.delete') }}
</NcDropdown> </div>
</NcMenuItem>
</NcMenu>
</template>
</NcDropdown>
</div>
</div> </div>
</div> </div>
<DlgTableDelete <DlgTableDelete

8
packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue

@ -192,7 +192,6 @@ watch(isDropdownOpen, async () => {
<template> <template>
<a-menu-item <a-menu-item
v-e="['c:view:open']"
class="nc-sidebar-node !min-h-7 !max-h-7 !mb-0.25 select-none group text-gray-700 !flex !items-center !mt-0 hover:(!bg-gray-200 !text-gray-900) cursor-pointer" class="nc-sidebar-node !min-h-7 !max-h-7 !mb-0.25 select-none group text-gray-700 !flex !items-center !mt-0 hover:(!bg-gray-200 !text-gray-900) cursor-pointer"
:class="{ :class="{
'!pl-18 !xs:(pl-19.75)': isDefaultBase, '!pl-18 !xs:(pl-19.75)': isDefaultBase,
@ -203,9 +202,12 @@ watch(isDropdownOpen, async () => {
@click="onClick" @click="onClick"
> >
<div v-e="['a:view:open', { view: vModel.type }]" class="text-sm flex items-center w-full gap-1" data-testid="view-item"> <div v-e="['a:view:open', { view: vModel.type }]" class="text-sm flex items-center w-full gap-1" data-testid="view-item">
<div class="flex min-w-6" :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`"> <div
v-e="['c:view:emoji-picker']"
class="flex min-w-6"
:data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`"
>
<LazyGeneralEmojiPicker <LazyGeneralEmojiPicker
v-e="['c:view:emoji-picker']"
class="nc-table-icon" class="nc-table-icon"
:emoji="props.view?.meta?.icon" :emoji="props.view?.meta?.icon"
size="small" size="small"

2
packages/nc-gui/components/general/EmojiPicker.vue

@ -2,7 +2,6 @@
import data from 'emoji-mart-vue-fast/data/apple.json' import data from 'emoji-mart-vue-fast/data/apple.json'
import 'emoji-mart-vue-fast/css/emoji-mart.css' import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Icon } from '@iconify/vue' import { Icon } from '@iconify/vue'
import { EmojiIndex, Picker } from 'emoji-mart-vue-fast/src' import { EmojiIndex, Picker } from 'emoji-mart-vue-fast/src'
const props = defineProps<{ const props = defineProps<{
@ -21,6 +20,7 @@ const clearable = computed(() => {
}) })
const isOpen = ref(false) const isOpen = ref(false)
const emojiIndex = new EmojiIndex(data, { const emojiIndex = new EmojiIndex(data, {
emojisToShowFilter: (emoji: any) => { emojisToShowFilter: (emoji: any) => {
if (Number(emoji.added_in) >= 14) { if (Number(emoji.added_in) >= 14) {

49
packages/nc-gui/components/general/OpenLeftSidebarBtn.vue

@ -11,29 +11,30 @@ const onClick = () => {
</script> </script>
<template> <template>
<NcTooltip <div v-e="['c:leftSidebar:hideToggle']">
v-e="['c:leftSidebar:hideToggle']" <NcTooltip
placement="topLeft" placement="topLeft"
hide-on-click hide-on-click
class="transition-all duration-150" class="transition-all duration-150"
:class="{ :class="{
'opacity-0 w-0 pointer-events-none': !isMobileMode && isLeftSidebarOpen, 'opacity-0 w-0 pointer-events-none': !isMobileMode && isLeftSidebarOpen,
'opacity-100 max-w-10': isMobileMode || !isLeftSidebarOpen, 'opacity-100 max-w-10': isMobileMode || !isLeftSidebarOpen,
}" }"
>
<template #title>
{{ isLeftSidebarOpen ? `${$t('title.hideSidebar')}` : `${$t('title.showSidebar')}` }}
</template>
<NcButton
:type="isMobileMode ? 'secondary' : 'text'"
:size="isMobileMode ? 'medium' : 'small'"
class="nc-sidebar-left-toggle-icon !text-gray-600 !hover:text-gray-800 w-8"
@click="onClick"
> >
<div class="flex items-center text-inherit"> <template #title>
<GeneralIcon v-if="isMobileMode" icon="menu" class="text-lg -mt-0.25" /> {{ isLeftSidebarOpen ? `${$t('title.hideSidebar')}` : `${$t('title.showSidebar')}` }}
<GeneralIcon v-else icon="doubleRightArrow" class="duration-150 transition-all !text-lg -mt-0.25" /> </template>
</div> <NcButton
</NcButton> :type="isMobileMode ? 'secondary' : 'text'"
</NcTooltip> :size="isMobileMode ? 'medium' : 'small'"
class="nc-sidebar-left-toggle-icon !text-gray-600 !hover:text-gray-800 w-8"
@click="onClick"
>
<div class="flex items-center text-inherit">
<GeneralIcon v-if="isMobileMode" icon="menu" class="text-lg -mt-0.25" />
<GeneralIcon v-else icon="doubleRightArrow" class="duration-150 transition-all !text-lg -mt-0.25" />
</div>
</NcButton>
</NcTooltip>
</div>
</template> </template>

4
packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@ -5,7 +5,7 @@ import { Icon } from '@iconify/vue'
import { ref, timeAgo, useExpandedFormStoreOrThrow, useGlobal, useRoles, watch } from '#imports' import { ref, timeAgo, useExpandedFormStoreOrThrow, useGlobal, useRoles, watch } from '#imports'
const props = defineProps<{ const props = defineProps<{
isLoading: boolean loading: boolean
}>() }>()
const { loadCommentsAndLogs, commentsAndLogs, saveComment: _saveComment, comment, updateComment } = useExpandedFormStoreOrThrow() const { loadCommentsAndLogs, commentsAndLogs, saveComment: _saveComment, comment, updateComment } = useExpandedFormStoreOrThrow()
@ -16,7 +16,7 @@ const commentsWrapperEl = ref<HTMLDivElement>()
const { user, appInfo } = useGlobal() const { user, appInfo } = useGlobal()
const isExpandedFormLoading = computed(() => props.isLoading) const isExpandedFormLoading = computed(() => props.loading)
const tab = ref<'comments' | 'audits'>('comments') const tab = ref<'comments' | 'audits'>('comments')

11
packages/nc-gui/components/smartsheet/expanded-form/index.vue

@ -556,14 +556,15 @@ export default {
<NcDivider v-if="isUIAllowed('dataEdit') && !isNew" /> <NcDivider v-if="isUIAllowed('dataEdit') && !isNew" />
<NcMenuItem <NcMenuItem
v-if="isUIAllowed('dataEdit') && !isNew" v-if="isUIAllowed('dataEdit') && !isNew"
v-e="['c:row-expand:delete']"
class="!text-red-500 !hover:bg-red-50" class="!text-red-500 !hover:bg-red-50"
@click="!isNew && onDeleteRowClick()" @click="!isNew && onDeleteRowClick()"
> >
<component :is="iconMap.delete" data-testid="nc-expanded-form-delete" class="cursor-pointer nc-delete-row" /> <div v-e="['c:row-expand:delete']" data-testid="nc-expanded-form-delete" class="flex gap-2 items-center">
<span class="-ml-0.5"> <component :is="iconMap.delete" class="cursor-pointer nc-delete-row" />
{{ $t('activity.deleteRecord') }} <span class="-ml-0.25">
</span> {{ $t('activity.deleteRecord') }}
</span>
</div>
</NcMenuItem> </NcMenuItem>
</NcMenu> </NcMenu>
</template> </template>

114
packages/nc-gui/components/smartsheet/grid/Table.vue

@ -1471,15 +1471,10 @@ onKeyStroke('ArrowDown', onDown)
></td> ></td>
</tr> </tr>
</template> </template>
<LazySmartsheetRow <LazySmartsheetRow v-for="(row, rowIndex) of dataRef" ref="rowRefs" :key="rowIndex" :row="row">
v-for="(row, rowIndex) of dataRef"
v-show="!showSkeleton"
ref="rowRefs"
:key="rowIndex"
:row="row"
>
<template #default="{ state }"> <template #default="{ state }">
<tr <tr
v-show="!showSkeleton"
class="nc-grid-row !xs:h-14" class="nc-grid-row !xs:h-14"
:style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }" :style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
:data-testid="`grid-row-${rowIndex}`" :data-testid="`grid-row-${rowIndex}`"
@ -1658,50 +1653,53 @@ onKeyStroke('ArrowDown', onDown)
<NcMenu class="!rounded !py-0" @click="contextMenu = false"> <NcMenu class="!rounded !py-0" @click="contextMenu = false">
<NcMenuItem <NcMenuItem
v-if="isEeUI && !contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)" v-if="isEeUI && !contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)"
v-e="['a:row:update-bulk']"
@click="emits('bulkUpdateDlg')" @click="emits('bulkUpdateDlg')"
> >
<component :is="iconMap.edit" /> <div v-e="['a:row:update-bulk']" class="flex gap-2 items-center">
<component :is="iconMap.edit" />
{{ $t('title.updateSelectedRows') }} {{ $t('title.updateSelectedRows') }}
</div>
</NcMenuItem> </NcMenuItem>
<NcMenuItem <NcMenuItem
v-if="!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)" v-if="!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected)"
v-e="['a:row:delete-bulk']"
class="nc-base-menu-item !text-red-600 !hover:bg-red-50" class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
data-testid="nc-delete-row" data-testid="nc-delete-row"
@click="deleteSelectedRows" @click="deleteSelectedRows"
> >
<component :is="iconMap.delete" /> <div v-e="['a:row:delete-bulk']" class="flex gap-2 items-center">
<!-- Delete Selected Rows --> <component :is="iconMap.delete" />
{{ $t('activity.deleteSelectedRow') }} <!-- Delete Selected Rows -->
{{ $t('activity.deleteSelectedRow') }}
</div>
</NcMenuItem> </NcMenuItem>
<!-- <NcMenuItem --> <!-- <NcMenuItem -->
<!-- v-if="contextMenuTarget && selectedRange.isSingleCell()" --> <!-- v-if="contextMenuTarget && selectedRange.isSingleCell()" -->
<!-- v-e="['a:row:insert']" --> <!-- class="nc-base-menu-item" -->
<!-- class="nc-base-menu-item" --> <!-- @click="addEmptyRow(contextMenuTarget.row + 1)" -->
<!-- @click="addEmptyRow(contextMenuTarget.row + 1)" --> <!-- > -->
<!-- > --> <!-- <div v-e="['a:row:insert']" class="flex gap-2 items-center"> -->
<!-- <GeneralIcon icon="plus" /> --> <!-- <GeneralIcon icon="plus" /> -->
<!-- Insert New Row --> <!-- Insert New Row -->
<!-- {{ $t('activity.insertRow') }} --> <!-- {{ $t('activity.insertRow') }} -->
<!-- </NcMenuItem> --> <!-- </div> -->
<!-- </NcMenuItem> -->
<NcMenuItem <NcMenuItem
v-if="contextMenuTarget" v-if="contextMenuTarget"
v-e="['a:row:copy']"
class="nc-base-menu-item" class="nc-base-menu-item"
data-testid="context-menu-item-copy" data-testid="context-menu-item-copy"
@click="copyValue(contextMenuTarget)" @click="copyValue(contextMenuTarget)"
> >
<GeneralIcon icon="copy" /> <div v-e="['a:row:copy']" class="flex gap-2 items-center">
<!-- Copy --> <GeneralIcon icon="copy" />
{{ $t('general.copy') }} <!-- Copy -->
{{ $t('general.copy') }}
</div>
</NcMenuItem> </NcMenuItem>
<!-- Clear cell --> <!-- Clear cell -->
<NcMenuItem <NcMenuItem
v-if=" v-if="
contextMenuTarget && contextMenuTarget &&
@ -1709,58 +1707,64 @@ onKeyStroke('ArrowDown', onDown)
selectedRange.isSingleCell() && selectedRange.isSingleCell() &&
(isLinksOrLTAR(fields[contextMenuTarget.col]) || !isVirtualCol(fields[contextMenuTarget.col])) (isLinksOrLTAR(fields[contextMenuTarget.col]) || !isVirtualCol(fields[contextMenuTarget.col]))
" "
v-e="['a:row:clear']"
class="nc-base-menu-item" class="nc-base-menu-item"
@click="clearCell(contextMenuTarget)" @click="clearCell(contextMenuTarget)"
> >
<GeneralIcon icon="close" /> <div v-e="['a:row:clear']" class="flex gap-2 items-center">
{{ $t('general.clear') }} <GeneralIcon icon="close" />
{{ $t('general.clear') }}
</div>
</NcMenuItem> </NcMenuItem>
<!-- Clear cell --> <!-- Clear cell -->
<NcMenuItem <NcMenuItem
v-else-if="contextMenuTarget && hasEditPermission" v-else-if="contextMenuTarget && hasEditPermission"
v-e="['a:row:clear-range']"
class="nc-base-menu-item" class="nc-base-menu-item"
@click="clearSelectedRangeOfCells()" @click="clearSelectedRangeOfCells()"
> >
<GeneralIcon icon="closeBox" class="text-gray-500" /> <div v-e="['a:row:clear-range']" class="flex gap-2 items-center">
<GeneralIcon icon="closeBox" class="text-gray-500" />
{{ $t('general.clear') }} {{ $t('general.clear') }}
</div>
</NcMenuItem> </NcMenuItem>
<template
<NcDivider />
<NcMenuItem
v-if="contextMenuTarget && !isLocked && selectedRange.isSingleCell() && isUIAllowed('commentEdit') && !isMobileMode" v-if="contextMenuTarget && !isLocked && selectedRange.isSingleCell() && isUIAllowed('commentEdit') && !isMobileMode"
class="nc-base-menu-item"
@click="commentRow(contextMenuTarget.row)"
> >
<NcDivider /> <div v-e="['a:row:comment']" class="flex gap-2 items-center">
<NcMenuItem v-e="['a:row:comment']" class="nc-base-menu-item" @click="commentRow(contextMenuTarget.row)">
<MdiMessageOutline class="h-4 w-4" /> <MdiMessageOutline class="h-4 w-4" />
{{ $t('general.comment') }} {{ $t('general.comment') }}
</NcMenuItem> </div>
</template> </NcMenuItem>
<template v-if="hasEditPermission"> <template v-if="hasEditPermission">
<NcDivider v-if="!(!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected))" /> <NcDivider v-if="!(!contextMenuClosing && !contextMenuTarget && data.some((r) => r.rowMeta.selected))" />
<NcMenuItem <NcMenuItem
v-if="contextMenuTarget && (selectedRange.isSingleCell() || selectedRange.isSingleRow())" v-if="contextMenuTarget && (selectedRange.isSingleCell() || selectedRange.isSingleRow())"
v-e="['a:row:delete']"
class="nc-base-menu-item !text-red-600 !hover:bg-red-50" class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
@click="confirmDeleteRow(contextMenuTarget.row)" @click="confirmDeleteRow(contextMenuTarget.row)"
> >
<GeneralIcon icon="delete" /> <div v-e="['a:row:delete']" class="flex gap-2 items-center">
<!-- Delete Row --> <GeneralIcon icon="delete" />
{{ $t('activity.deleteRow') }} <!-- Delete Row -->
{{ $t('activity.deleteRow') }}
</div>
</NcMenuItem> </NcMenuItem>
<div v-else-if="contextMenuTarget && deleteRangeOfRows"> <NcMenuItem
<NcMenuItem v-else-if="contextMenuTarget && deleteRangeOfRows"
v-e="['a:row:delete']" class="nc-base-menu-item !text-red-600 !hover:bg-red-50"
class="nc-base-menu-item !text-red-600 !hover:bg-red-50" @click="deleteSelectedRangeOfRows"
@click="deleteSelectedRangeOfRows" >
> <div v-e="['a:row:delete']" class="flex gap-2 items-center">
<GeneralIcon icon="delete" class="text-gray-500 text-red-600" /> <GeneralIcon icon="delete" class="text-gray-500 text-red-600" />
<!-- Delete Rows --> <!-- Delete Rows -->
{{ $t('activity.deleteRows') }} {{ $t('activity.deleteRows') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
</template> </template>
</NcMenu> </NcMenu>
</template> </template>

2
packages/nc-gui/components/smartsheet/toolbar/OpenedViewAction.vue

@ -168,11 +168,11 @@ function openDeleteDialog() {
<NcDropdown <NcDropdown
v-else v-else
v-model:visible="isDropdownOpen" v-model:visible="isDropdownOpen"
v-e="['c:breadcrumb:view-actions']"
class="!xs:pointer-events-none nc-actions-menu-btn nc-view-context-btn" class="!xs:pointer-events-none nc-actions-menu-btn nc-view-context-btn"
overlay-class-name="nc-dropdown-actions-menu" overlay-class-name="nc-dropdown-actions-menu"
> >
<div <div
v-e="['c:breadcrumb:view-actions']"
class="truncate nc-active-view-title !hover:(bg-gray-100 text-gray-800) ml-0.25 pl-1 pr-0.25 rounded-md py-1 cursor-pointer" class="truncate nc-active-view-title !hover:(bg-gray-100 text-gray-800) ml-0.25 pl-1 pr-0.25 rounded-md py-1 cursor-pointer"
:class="{ :class="{
'max-w-2/5': !isSharedBase && !isMobileMode && activeView?.is_default, 'max-w-2/5': !isSharedBase && !isMobileMode && activeView?.is_default,

Loading…
Cancel
Save