github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
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
6e076a3a1e 52f0fcb58d
commit
a562540011
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 243 additions and 230 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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,

Write Preview
Loading…
Cancel
Save