Browse Source

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

fix: vue warnings
pull/6759/head
աӄա 1 year 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>
<template #overlay>
<NcMenu data-testid="nc-sidebar-userinfo">
<NcMenuItem v-e="['c:user:logout']" 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" />
<GeneralIcon v-else icon="signout" class="menu-icon" />
<span class="menu-btn"> {{ $t('general.logout') }}</span>
<NcMenuItem data-testid="nc-sidebar-user-logout" @click="logout">
<div v-e="['c:user:logout']" class="flex gap-2 items-center">
<GeneralLoader v-if="isLoggingOut" class="!ml-0.5 !mr-0.5 !max-h-4.5 !-mt-0.5" />
<GeneralIcon v-else icon="signout" class="menu-icon" />
<span class="menu-btn"> {{ $t('general.logout') }}</span>
</div>
</NcMenuItem>
<template v-if="!isMobileMode">
<NcMenuItem v-e="['c:auth-token:copy']" @click="onCopy">
<GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black menu-icon" />
<GeneralIcon v-else icon="copy" class="menu-icon" />
<template v-if="isAuthTokenCopied"> {{ $t('title.copiedAuthToken') }} </template>
<template v-else> {{ $t('title.copyAuthToken') }} </template>
<NcMenuItem @click="onCopy">
<div v-e="['c:auth-token:copy']" class="flex gap-2 items-center">
<GeneralIcon v-if="isAuthTokenCopied" icon="check" class="group-hover:text-black menu-icon" />
<GeneralIcon v-else icon="copy" class="menu-icon" />
<template v-if="isAuthTokenCopied"> {{ $t('title.copiedAuthToken') }} </template>
<template v-else> {{ $t('title.copyAuthToken') }} </template>
</div>
</NcMenuItem>
</template>
<NcDivider />
@ -140,13 +144,17 @@ onMounted(() => {
<template v-if="!appInfo.ee">
<NcDivider />
<a-popover key="language" class="lang-menu !py-1.5" placement="rightBottom">
<NcMenuItem v-e="['c:translate:open']">
<GeneralIcon icon="translate" class="group-hover:text-black nc-language ml-0.25 menu-icon" />
{{ $t('labels.language') }}
<div class="flex items-center text-gray-400 text-xs">{{ $t('labels.community.communityTranslated') }}</div>
<div class="flex-1" />
<NcMenuItem>
<div v-e="['c:translate:open']" class="flex gap-2 items-center">
<GeneralIcon icon="translate" class="group-hover:text-black nc-language ml-0.25 menu-icon" />
{{ $t('labels.language') }}
<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>
<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">
<template #title>
<GeneralIcon icon="download" />
{{ $t('labels.importData') }}
</template>
@ -71,41 +70,41 @@ function openQuickImportDialog(type: string) {
<NcMenuItem
v-if="isUIAllowed('airtableImport', { roles: baseRole })"
key="quick-import-airtable"
v-e="['c:import:airtable']"
@click="openAirtableImportDialog(source.base_id, source.id)"
>
<GeneralIcon icon="airtable" class="max-w-3.75 group-hover:text-black" />
<div class="ml-0.5">{{ $t('labels.airtable') }}</div>
<div v-e="['c:import:airtable']" class="flex gap-2 items-center">
<GeneralIcon icon="airtable" class="max-w-3.75 group-hover:text-black" />
<div class="ml-0.5">{{ $t('labels.airtable') }}</div>
</div>
</NcMenuItem>
<NcMenuItem
v-if="isUIAllowed('csvImport', { roles: baseRole })"
key="quick-import-csv"
v-e="['c:import:csv']"
@click="openQuickImportDialog('csv')"
>
<GeneralIcon icon="csv" class="w-4 group-hover:text-black" />
{{ $t('labels.csvFile') }}
<NcMenuItem v-if="isUIAllowed('csvImport', { roles: baseRole })" key="quick-import-csv" @click="openQuickImportDialog('csv')">
<div v-e="['c:import:csv']" class="flex gap-2 items-center">
<GeneralIcon icon="csv" class="w-4 group-hover:text-black" />
{{ $t('labels.csvFile') }}
</div>
</NcMenuItem>
<NcMenuItem
v-if="isUIAllowed('jsonImport', { roles: baseRole })"
key="quick-import-json"
v-e="['c:import:json']"
@click="openQuickImportDialog('json')"
>
<GeneralIcon icon="code" class="w-4 group-hover:text-black" />
{{ $t('labels.jsonFile') }}
<div v-e="['c:import:json']" class="flex gap-2 items-center">
<GeneralIcon icon="code" class="w-4 group-hover:text-black" />
{{ $t('labels.jsonFile') }}
</div>
</NcMenuItem>
<NcMenuItem
v-if="isUIAllowed('excelImport', { roles: baseRole })"
key="quick-import-excel"
v-e="['c:import:excel']"
@click="openQuickImportDialog('excel')"
>
<GeneralIcon icon="excel" class="max-w-4 group-hover:text-black" />
{{ $t('labels.microsoftExcel') }}
<div v-e="['c:import:excel']" class="flex gap-2 items-center">
<GeneralIcon icon="excel" class="max-w-4 group-hover:text-black" />
{{ $t('labels.microsoftExcel') }}
</div>
</NcMenuItem>
</NcSubMenu>
</template>

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

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

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

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

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

@ -192,7 +192,6 @@ watch(isDropdownOpen, async () => {
<template>
<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="{
'!pl-18 !xs:(pl-19.75)': isDefaultBase,
@ -203,9 +202,12 @@ watch(isDropdownOpen, async () => {
@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 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
v-e="['c:view:emoji-picker']"
class="nc-table-icon"
:emoji="props.view?.meta?.icon"
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 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Icon } from '@iconify/vue'
import { EmojiIndex, Picker } from 'emoji-mart-vue-fast/src'
const props = defineProps<{
@ -21,6 +20,7 @@ const clearable = computed(() => {
})
const isOpen = ref(false)
const emojiIndex = new EmojiIndex(data, {
emojisToShowFilter: (emoji: any) => {
if (Number(emoji.added_in) >= 14) {

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

@ -11,29 +11,30 @@ const onClick = () => {
</script>
<template>
<NcTooltip
v-e="['c:leftSidebar:hideToggle']"
placement="topLeft"
hide-on-click
class="transition-all duration-150"
:class="{
'opacity-0 w-0 pointer-events-none': !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 v-e="['c:leftSidebar:hideToggle']">
<NcTooltip
placement="topLeft"
hide-on-click
class="transition-all duration-150"
:class="{
'opacity-0 w-0 pointer-events-none': !isMobileMode && isLeftSidebarOpen,
'opacity-100 max-w-10': isMobileMode || !isLeftSidebarOpen,
}"
>
<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>
<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">
<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>

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'
const props = defineProps<{
isLoading: boolean
loading: boolean
}>()
const { loadCommentsAndLogs, commentsAndLogs, saveComment: _saveComment, comment, updateComment } = useExpandedFormStoreOrThrow()
@ -16,7 +16,7 @@ const commentsWrapperEl = ref<HTMLDivElement>()
const { user, appInfo } = useGlobal()
const isExpandedFormLoading = computed(() => props.isLoading)
const isExpandedFormLoading = computed(() => props.loading)
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" />
<NcMenuItem
v-if="isUIAllowed('dataEdit') && !isNew"
v-e="['c:row-expand:delete']"
class="!text-red-500 !hover:bg-red-50"
@click="!isNew && onDeleteRowClick()"
>
<component :is="iconMap.delete" data-testid="nc-expanded-form-delete" class="cursor-pointer nc-delete-row" />
<span class="-ml-0.5">
{{ $t('activity.deleteRecord') }}
</span>
<div v-e="['c:row-expand:delete']" data-testid="nc-expanded-form-delete" class="flex gap-2 items-center">
<component :is="iconMap.delete" class="cursor-pointer nc-delete-row" />
<span class="-ml-0.25">
{{ $t('activity.deleteRecord') }}
</span>
</div>
</NcMenuItem>
</NcMenu>
</template>

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

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

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

@ -168,11 +168,11 @@ function openDeleteDialog() {
<NcDropdown
v-else
v-model:visible="isDropdownOpen"
v-e="['c:breadcrumb:view-actions']"
class="!xs:pointer-events-none nc-actions-menu-btn nc-view-context-btn"
overlay-class-name="nc-dropdown-actions-menu"
>
<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="{
'max-w-2/5': !isSharedBase && !isMobileMode && activeView?.is_default,

Loading…
Cancel
Save