github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(nc-gui): put div inside NcMenuItem

pull/6954/head
աɨռɢӄաօռɢ 1 year ago
parent
5f98238b0f
commit
6681da6143
3 changed files with 138 additions and 122 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. 48
      packages/nc-gui/components/dashboard/TreeView/BaseOptions.vue
  2. 167
      packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
  3. 45
      packages/nc-gui/components/dashboard/TreeView/TableNode.vue

48
packages/nc-gui/components/dashboard/TreeView/BaseOptions.vue
Unescape View File

@ -67,32 +67,44 @@ function openQuickImportDialog(type: string) {
<template #expandIcon></template> <template #expandIcon></template>
<div v-if="isUIAllowed('airtableImport', { roles: baseRole })" v-e="['c:import:airtable']"> <NcMenuItem
<NcMenuItem key="quick-import-airtable" @click="openAirtableImportDialog(source.base_id, source.id)"> v-if="isUIAllowed('airtableImport', { roles: baseRole })"
key="quick-import-airtable"
@click="openAirtableImportDialog(source.base_id, source.id)"
>
<div v-e="['c:import:airtable']" class="flex gap-2 items-center">
<GeneralIcon icon="airtable" class="max-w-3.75 group-hover:text-black" /> <GeneralIcon icon="airtable" class="max-w-3.75 group-hover:text-black" />
<div class="ml-0.5">{{ $t('labels.airtable') }}</div> <div class="ml-0.5">{{ $t('labels.airtable') }}</div>
</NcMenuItem> </div>
</div> </NcMenuItem>
<div v-if="isUIAllowed('csvImport', { roles: baseRole })" v-e="['c:import:csv']"> <NcMenuItem v-if="isUIAllowed('csvImport', { roles: baseRole })" key="quick-import-csv" @click="openQuickImportDialog('csv')">
<NcMenuItem 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" /> <GeneralIcon icon="csv" class="w-4 group-hover:text-black" />
{{ $t('labels.csvFile') }} {{ $t('labels.csvFile') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
<div v-if="isUIAllowed('jsonImport', { roles: baseRole })" v-e="['c:import:json']"> <NcMenuItem
<NcMenuItem key="quick-import-json" @click="openQuickImportDialog('json')"> v-if="isUIAllowed('jsonImport', { roles: baseRole })"
key="quick-import-json"
@click="openQuickImportDialog('json')"
>
<div v-e="['c:import:json']" class="flex gap-2 items-center">
<GeneralIcon icon="code" class="w-4 group-hover:text-black" /> <GeneralIcon icon="code" class="w-4 group-hover:text-black" />
{{ $t('labels.jsonFile') }} {{ $t('labels.jsonFile') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
<div v-if="isUIAllowed('excelImport', { roles: baseRole })" v-e="['c:import:excel']"> <NcMenuItem
<NcMenuItem key="quick-import-excel" @click="openQuickImportDialog('excel')"> v-if="isUIAllowed('excelImport', { roles: baseRole })"
key="quick-import-excel"
@click="openQuickImportDialog('excel')"
>
<div v-e="['c:import:excel']" class="flex gap-2 items-center">
<GeneralIcon icon="excel" class="max-w-4 group-hover:text-black" /> <GeneralIcon icon="excel" class="max-w-4 group-hover:text-black" />
{{ $t('labels.microsoftExcel') }} {{ $t('labels.microsoftExcel') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
</NcSubMenu> </NcSubMenu>
</template> </template>

167
packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
Unescape View File

@ -461,57 +461,63 @@ const projectDelete = () => {
@click="isOptionsOpen = false" @click="isOptionsOpen = false"
> >
<template v-if="!isSharedBase"> <template v-if="!isSharedBase">
<div v-if="isUIAllowed('baseRename')" v-e="['c:base:rename']"> <NcMenuItem v-if="isUIAllowed('baseRename')" data-testid="nc-sidebar-project-rename" @click="enableEditMode">
<NcMenuItem data-testid="nc-sidebar-project-rename" @click="enableEditMode"> <div v-e="['c:base:rename']" class="flex gap-2 items-center"></div>
<GeneralIcon icon="edit" class="group-hover:text-black" /> <GeneralIcon icon="edit" class="group-hover:text-black" />
{{ $t('general.rename') }} {{ $t('general.rename') }}
</NcMenuItem> </NcMenuItem>
</div>
<div <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"
@click="duplicateProject(base)"
> >
<NcMenuItem data-testid="nc-sidebar-base-duplicate" @click="duplicateProject(base)"> <div v-e="['c:base:duplicate']" class="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') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
<NcDivider v-if="['baseDuplicate', 'baseRename'].some((permission) => isUIAllowed(permission))" /> <NcDivider v-if="['baseDuplicate', 'baseRename'].some((permission) => isUIAllowed(permission))" />
<div v-if="!isEeUI" v-e="['c:base:copy-proj-info']"> <!-- Copy Project Info -->
<!-- Copy Project Info --> <NcMenuItem
<NcMenuItem key="copy" data-testid="nc-sidebar-base-copy-base-info" @click.stop="copyProjectInfo"> v-if="!isEeUI"
key="copy"
data-testid="nc-sidebar-base-copy-base-info"
@click.stop="copyProjectInfo"
>
<div v-e="['c:base:copy-proj-info']" class="flex gap-2 items-center">
<GeneralIcon icon="copy" class="group-hover:text-black" /> <GeneralIcon icon="copy" class="group-hover:text-black" />
{{ $t('activity.account.projInfo') }} {{ $t('activity.account.projInfo') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
<div v-e="['c:base:erd']"> <!-- ERD View -->
<!-- ERD View --> <NcMenuItem key="erd" data-testid="nc-sidebar-base-relations" @click="openErdView(base?.sources?.[0]!)">
<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" /> <GeneralIcon icon="erd" />
{{ $t('title.relations') }} {{ $t('title.relations') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
<div v-if="isUIAllowed('apiDocs')" v-e="['c:base:api-docs']"> <!-- Swagger: Rest APIs -->
<!-- Swagger: Rest APIs --> <NcMenuItem
<NcMenuItem v-if="isUIAllowed('apiDocs')"
key="api" key="api"
data-testid="nc-sidebar-base-rest-apis" data-testid="nc-sidebar-base-rest-apis"
@click.stop=" @click.stop="
() => { () => {
$e('c:base:api-docs') $e('c:base:api-docs')
openLink(`/api/v1/db/meta/projects/${base.id}/swagger`, appInfo.ncSiteUrl) openLink(`/api/v1/db/meta/projects/${base.id}/swagger`, appInfo.ncSiteUrl)
} }
" "
> >
<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" /> <GeneralIcon icon="snippet" class="group-hover:text-black !max-w-3.9" />
{{ $t('activity.account.swagger') }} {{ $t('activity.account.swagger') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
</template> </template>
<div v-if="base.sources && base.sources[0] && showBaseOption"> <div v-if="base.sources && base.sources[0] && showBaseOption">
@ -521,28 +527,30 @@ const projectDelete = () => {
<NcDivider v-if="['baseMiscSettings', 'baseDelete'].some((permission) => isUIAllowed(permission))" /> <NcDivider v-if="['baseMiscSettings', 'baseDelete'].some((permission) => isUIAllowed(permission))" />
<div v-if="isUIAllowed('baseMiscSettings')" v-e="['c:base:settings']"> <NcMenuItem
<NcMenuItem v-if="isUIAllowed('baseMiscSettings')"
key="teamAndSettings" key="teamAndSettings"
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)"
> >
<div v-e="['c:base:settings']" class="flex gap-2 items-center">
<GeneralIcon icon="settings" class="group-hover:text-black" /> <GeneralIcon icon="settings" class="group-hover:text-black" />
{{ $t('activity.settings') }} {{ $t('activity.settings') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
<div v-if="isUIAllowed('baseDelete', { roles: [stringifyRolesObj(orgRoles), baseRole].join() })"> <NcMenuItem
<NcMenuItem v-if="isUIAllowed('baseDelete', { roles: [stringifyRolesObj(orgRoles), baseRole].join() })"
data-testid="nc-sidebar-base-delete" data-testid="nc-sidebar-base-delete"
class="!text-red-500 !hover:bg-red-50" class="!text-red-500 !hover:bg-red-50"
@click="projectDelete" @click="projectDelete"
> >
<div class="flex gap-2 items-center">
<GeneralIcon icon="delete" class="w-4" /> <GeneralIcon icon="delete" class="w-4" />
{{ $t('general.delete') }} {{ $t('general.delete') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
</NcMenu> </NcMenu>
</template> </template>
</NcDropdown> </NcDropdown>
@ -661,13 +669,13 @@ const projectDelete = () => {
}" }"
@click="isBasesOptionsOpen[source!.id!] = false" @click="isBasesOptionsOpen[source!.id!] = false"
> >
<div v-e="['c:source:erd']"> <!-- ERD View -->
<!-- ERD View --> <NcMenuItem key="erd" @click="openErdView(source)">
<NcMenuItem key="erd" @click="openErdView(source)"> <div v-e="['c:source:erd']" class="flex gap-2 items-center">
<GeneralIcon icon="erd" /> <GeneralIcon icon="erd" />
{{ $t('title.relations') }} {{ $t('title.relations') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
<DashboardTreeViewBaseOptions v-if="showBaseOption" v-model:base="base" :source="source" /> <DashboardTreeViewBaseOptions v-if="showBaseOption" v-model:base="base" :source="source" />
</NcMenu> </NcMenu>
@ -710,35 +718,28 @@ 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'">
<div v-if="isUIAllowed('tableRename')" v-e="['c:table:rename']"> <NcMenuItem v-if="isUIAllowed('tableRename')" @click="openRenameTableDialog(contextMenuTarget.value, true)">
<NcMenuItem @click="openRenameTableDialog(contextMenuTarget.value, true)"> <div v-e="['c:table:rename']" class="nc-base-option-item flex gap-2 items-center">
<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> </NcMenuItem>
</NcMenuItem> <NcMenuItem
</div>
<div
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)"
> >
<NcMenuItem @click="duplicateTable(contextMenuTarget.value)"> <div v-e="['c:table:duplicate']" class="nc-base-option-item flex gap-2 items-center">
<div class="nc-base-option-item"> <GeneralIcon icon="duplicate" class="text-gray-700" />
<GeneralIcon icon="duplicate" class="text-gray-700" /> {{ $t('general.duplicate') }}
{{ $t('general.duplicate') }} </div>
</div> </NcMenuItem>
</NcMenuItem>
</div>
<NcDivider /> <NcDivider />
<div v-if="isUIAllowed('table-delete')"> <NcMenuItem v-if="isUIAllowed('table-delete')" class="!hover:bg-red-50" @click="tableDelete">
<NcMenuItem class="!hover:bg-red-50" @click="tableDelete"> <div class="nc-base-option-item flex gap-2 items-center text-red-600">
<div class="nc-base-option-item text-red-600"> <GeneralIcon icon="delete" />
<GeneralIcon icon="delete" /> {{ $t('general.delete') }}
{{ $t('general.delete') }} </div>
</div> </NcMenuItem>
</NcMenuItem>
</div>
</template> </template>
</NcMenu> </NcMenu>
</template> </template>

45
packages/nc-gui/components/dashboard/TreeView/TableNode.vue
Unescape View File

@ -251,40 +251,43 @@ const isTableOpened = computed(() => {
<template #overlay> <template #overlay>
<NcMenu> <NcMenu>
<div v-if="isUIAllowed('tableRename', { roles: baseRole })" v-e="['c:table:rename']"> <NcMenuItem
<NcMenuItem 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)"
> >
<div v-e="['c:table:rename']" class="flex gap-2 items-center">
<GeneralIcon icon="edit" class="text-gray-700" /> <GeneralIcon icon="edit" class="text-gray-700" />
{{ $t('general.rename') }} {{ $t('general.rename') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
<div <NcMenuItem
v-if=" v-if="
isUIAllowed('tableDuplicate') && isUIAllowed('tableDuplicate') &&
base.sources?.[sourceIndex] && base.sources?.[sourceIndex] &&
(base.sources[sourceIndex].is_meta || base.sources[sourceIndex].is_local) (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)"
> >
<NcMenuItem :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" /> <GeneralIcon icon="duplicate" class="text-gray-700" />
{{ $t('general.duplicate') }} {{ $t('general.duplicate') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
<div v-if="isUIAllowed('tableDelete', { roles: baseRole })" v-e="['c:table:delete']"> <NcMenuItem
<NcMenuItem v-if="isUIAllowed('tableDelete', { roles: baseRole })"
:data-testid="`sidebar-table-delete-${table.title}`" :data-testid="`sidebar-table-delete-${table.title}`"
class="!text-red-500 !hover:bg-red-50" class="!text-red-500 !hover:bg-red-50"
@click="isTableDeleteDialogVisible = true" @click="isTableDeleteDialogVisible = true"
> >
<div v-e="['c:table:delete']" class="flex gap-2 items-center">
<GeneralIcon icon="delete" /> <GeneralIcon icon="delete" />
{{ $t('general.delete') }} {{ $t('general.delete') }}
</NcMenuItem> </div>
</div> </NcMenuItem>
</NcMenu> </NcMenu>
</template> </template>
</NcDropdown> </NcDropdown>

Write Preview
Loading…
Cancel
Save