|
|
|
|
@ -12,6 +12,7 @@ import {
|
|
|
|
|
TabType, |
|
|
|
|
computed, |
|
|
|
|
extractSdkResponseErrorMsg, |
|
|
|
|
iconMap, |
|
|
|
|
isDrawerOrModalExist, |
|
|
|
|
isMac, |
|
|
|
|
parseProp, |
|
|
|
|
@ -30,8 +31,6 @@ import {
|
|
|
|
|
useUIPermission, |
|
|
|
|
watchEffect, |
|
|
|
|
} from '#imports' |
|
|
|
|
import MdiView from '~icons/mdi/eye-circle-outline' |
|
|
|
|
import MdiTableLarge from '~icons/mdi/table-large' |
|
|
|
|
|
|
|
|
|
const { isMobileMode } = useGlobal() |
|
|
|
|
|
|
|
|
|
@ -152,10 +151,10 @@ watchEffect(() => {
|
|
|
|
|
|
|
|
|
|
const icon = (table: TableType) => { |
|
|
|
|
if (table.type === 'table') { |
|
|
|
|
return MdiTableLarge |
|
|
|
|
return iconMap.table |
|
|
|
|
} |
|
|
|
|
if (table.type === 'view') { |
|
|
|
|
return MdiView |
|
|
|
|
return iconMap.view |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -373,8 +372,13 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
</Transition> |
|
|
|
|
|
|
|
|
|
<Transition name="layout" mode="out-in"> |
|
|
|
|
<MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" /> |
|
|
|
|
<IcRoundSearch v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="toggleSearchActive(true)" /> |
|
|
|
|
<GeneralIcon |
|
|
|
|
v-if="searchActive" |
|
|
|
|
icon="close" |
|
|
|
|
class="text-gray-500 text-lg mx-1 mt-0.5" |
|
|
|
|
@click="onSearchCloseIconClick" |
|
|
|
|
/> |
|
|
|
|
<GeneralIcon v-else icon="search" class="text-gray-500 text-lg mx-1 mt-0.5" @click="toggleSearchActive(true)" /> |
|
|
|
|
</Transition> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
@ -400,13 +404,18 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
</Transition> |
|
|
|
|
|
|
|
|
|
<Transition name="slide-right" mode="out-in"> |
|
|
|
|
<MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" /> |
|
|
|
|
<IcRoundSearch v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchIconClick" /> |
|
|
|
|
<GeneralIcon |
|
|
|
|
v-if="searchActive" |
|
|
|
|
icon="close" |
|
|
|
|
class="text-gray-500 text-lg mx-1 mt-0.5" |
|
|
|
|
@click="onSearchCloseIconClick" |
|
|
|
|
/> |
|
|
|
|
<component :is="iconMap.search" v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchIconClick" /> |
|
|
|
|
</Transition> |
|
|
|
|
|
|
|
|
|
<a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop> |
|
|
|
|
<Transition name="slide-right" mode="out-in"> |
|
|
|
|
<MdiDotsVertical v-if="!searchActive" class="hover:text-accent outline-0" /> |
|
|
|
|
<GeneralIcon v-if="!searchActive" icon="threeDotVertical" class="hover:text-accent outline-0" /> |
|
|
|
|
</Transition> |
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
|
@ -457,7 +466,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
target="_blank" |
|
|
|
|
class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)" |
|
|
|
|
> |
|
|
|
|
<MdiOpenInNew class="group-hover:text-accent" /> |
|
|
|
|
<GeneralIcon icon="openInNew" class="group-hover:text-accent" /> |
|
|
|
|
<!-- Request a data source you need? --> |
|
|
|
|
{{ $t('labels.requestDataSource') }} |
|
|
|
|
</a> |
|
|
|
|
@ -473,12 +482,15 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
class="group flex items-center gap-2 pl-2 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none" |
|
|
|
|
@click="openTableCreateDialog(bases[0].id)" |
|
|
|
|
> |
|
|
|
|
<MdiPlus class="w-5" /> |
|
|
|
|
<GeneralIcon icon="plus" class="w-5" /> |
|
|
|
|
|
|
|
|
|
<span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{ $t('tooltip.addTable') }}</span> |
|
|
|
|
|
|
|
|
|
<a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop> |
|
|
|
|
<MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" /> |
|
|
|
|
<GeneralIcon |
|
|
|
|
icon="threeDotVertical" |
|
|
|
|
class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
|
<a-menu class="!py-0 rounded text-sm"> |
|
|
|
|
@ -490,7 +502,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
@click="openAirtableImportDialog(bases[0].id)" |
|
|
|
|
> |
|
|
|
|
<div class="color-transition nc-project-menu-item group"> |
|
|
|
|
<MdiTableLarge class="group-hover:text-accent" /> |
|
|
|
|
<GeneralIcon icon="table" class="group-hover:text-accent" /> |
|
|
|
|
Airtable |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
@ -501,7 +513,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
@click="openQuickImportDialog('csv', bases[0].id)" |
|
|
|
|
> |
|
|
|
|
<div class="color-transition nc-project-menu-item group"> |
|
|
|
|
<MdiFileDocumentOutline class="group-hover:text-accent" /> |
|
|
|
|
<GeneralIcon icon="csv" class="group-hover:text-accent" /> |
|
|
|
|
CSV file |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
@ -512,7 +524,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
@click="openQuickImportDialog('json', bases[0].id)" |
|
|
|
|
> |
|
|
|
|
<div class="color-transition nc-project-menu-item group"> |
|
|
|
|
<MdiCodeJson class="group-hover:text-accent" /> |
|
|
|
|
<GeneralIcon icon="code" class="group-hover:text-accent" /> |
|
|
|
|
JSON file |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
@ -523,7 +535,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
@click="openQuickImportDialog('excel', bases[0].id)" |
|
|
|
|
> |
|
|
|
|
<div class="color-transition nc-project-menu-item group"> |
|
|
|
|
<MdiFileExcel class="group-hover:text-accent" /> |
|
|
|
|
<GeneralIcon icon="excel" class="group-hover:text-accent" /> |
|
|
|
|
Microsoft Excel |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
@ -577,7 +589,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
target="_blank" |
|
|
|
|
class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)" |
|
|
|
|
> |
|
|
|
|
<MdiOpenInNew class="group-hover:text-accent" /> |
|
|
|
|
<GeneralIcon icon="openInNew" class="group-hover:text-accent" /> |
|
|
|
|
<!-- Request a data source you need? --> |
|
|
|
|
{{ $t('labels.requestDataSource') }} |
|
|
|
|
</a> |
|
|
|
|
@ -658,7 +670,10 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
:trigger="['click']" |
|
|
|
|
@click.stop |
|
|
|
|
> |
|
|
|
|
<MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" /> |
|
|
|
|
<GeneralIcon |
|
|
|
|
icon="threeDotVertical" |
|
|
|
|
class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
|
<a-menu class="!py-0 rounded text-sm"> |
|
|
|
|
@ -725,7 +740,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none" |
|
|
|
|
@click="openTableCreateDialog(bases[0].id)" |
|
|
|
|
> |
|
|
|
|
<MdiPlus /> |
|
|
|
|
<component :is="iconMap.plus" /> |
|
|
|
|
|
|
|
|
|
<span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{ |
|
|
|
|
$t('tooltip.addTable') |
|
|
|
|
@ -737,7 +752,10 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
overlay-class-name="nc-dropdown-import-menu" |
|
|
|
|
@click.stop |
|
|
|
|
> |
|
|
|
|
<MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" /> |
|
|
|
|
<component |
|
|
|
|
:is="iconMap.threeDotVertical" |
|
|
|
|
class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
|
<a-menu class="!py-0 rounded text-sm"> |
|
|
|
|
@ -749,7 +767,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
@click="openAirtableImportDialog(bases[0].id)" |
|
|
|
|
> |
|
|
|
|
<div class="color-transition nc-project-menu-item group"> |
|
|
|
|
<MdiTableLarge class="group-hover:text-accent" /> |
|
|
|
|
<component :is="iconMap.airtable" class="group-hover:text-accent" /> |
|
|
|
|
Airtable |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
@ -760,7 +778,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
@click="openQuickImportDialog('csv', bases[0].id)" |
|
|
|
|
> |
|
|
|
|
<div class="color-transition nc-project-menu-item group"> |
|
|
|
|
<MdiFileDocumentOutline class="group-hover:text-accent" /> |
|
|
|
|
<component :is="iconMap.csv" class="group-hover:text-accent" /> |
|
|
|
|
CSV file |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
@ -771,7 +789,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
@click="openQuickImportDialog('json', bases[0].id)" |
|
|
|
|
> |
|
|
|
|
<div class="color-transition nc-project-menu-item group"> |
|
|
|
|
<MdiCodeJson class="group-hover:text-accent" /> |
|
|
|
|
<component :is="iconMap.json" class="group-hover:text-accent" /> |
|
|
|
|
JSON file |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
@ -782,7 +800,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
@click="openQuickImportDialog('excel', bases[0].id)" |
|
|
|
|
> |
|
|
|
|
<div class="color-transition nc-project-menu-item group"> |
|
|
|
|
<MdiFileExcel class="group-hover:text-accent" /> |
|
|
|
|
<component :is="iconMap.excel" class="group-hover:text-accent" /> |
|
|
|
|
Microsoft Excel |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
@ -797,7 +815,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
target="_blank" |
|
|
|
|
class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)" |
|
|
|
|
> |
|
|
|
|
<MdiOpenInNew class="group-hover:text-accent" /> |
|
|
|
|
<component :is="iconMap.share" class="group-hover:text-accent" /> |
|
|
|
|
<!-- Request a data source you need? --> |
|
|
|
|
{{ $t('labels.requestDataSource') }} |
|
|
|
|
</a> |
|
|
|
|
@ -811,7 +829,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none" |
|
|
|
|
@click="openTableCreateDialog(base.id)" |
|
|
|
|
> |
|
|
|
|
<MdiPlus /> |
|
|
|
|
<component :is="iconMap.plus" /> |
|
|
|
|
|
|
|
|
|
<span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{ |
|
|
|
|
$t('tooltip.addTable') |
|
|
|
|
@ -823,7 +841,10 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
overlay-class-name="nc-dropdown-import-menu" |
|
|
|
|
@click.stop |
|
|
|
|
> |
|
|
|
|
<MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" /> |
|
|
|
|
<component |
|
|
|
|
:is="iconMap.threeDotVertical" |
|
|
|
|
class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
|
<a-menu class="!py-0 rounded text-sm"> |
|
|
|
|
@ -835,7 +856,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
@click="openAirtableImportDialog(base.id)" |
|
|
|
|
> |
|
|
|
|
<div class="color-transition nc-project-menu-item group"> |
|
|
|
|
<MdiTableLarge class="group-hover:text-accent" /> |
|
|
|
|
<component :is="iconMap.airtable" class="group-hover:text-accent" /> |
|
|
|
|
Airtable |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
@ -846,7 +867,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
@click="openQuickImportDialog('csv', base.id)" |
|
|
|
|
> |
|
|
|
|
<div class="color-transition nc-project-menu-item group"> |
|
|
|
|
<MdiFileDocumentOutline class="group-hover:text-accent" /> |
|
|
|
|
<component :is="iconMap.csv" class="group-hover:text-accent" /> |
|
|
|
|
CSV file |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
@ -857,7 +878,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
@click="openQuickImportDialog('json', base.id)" |
|
|
|
|
> |
|
|
|
|
<div class="color-transition nc-project-menu-item group"> |
|
|
|
|
<MdiCodeJson class="group-hover:text-accent" /> |
|
|
|
|
<component :is="iconMap.json" class="group-hover:text-accent" /> |
|
|
|
|
JSON file |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
@ -868,7 +889,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
@click="openQuickImportDialog('excel', base.id)" |
|
|
|
|
> |
|
|
|
|
<div class="color-transition nc-project-menu-item group"> |
|
|
|
|
<MdiFileExcel class="group-hover:text-accent" /> |
|
|
|
|
<component :is="iconMap.excel" class="group-hover:text-accent" /> |
|
|
|
|
Microsoft Excel |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
@ -883,7 +904,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
target="_blank" |
|
|
|
|
class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)" |
|
|
|
|
> |
|
|
|
|
<MdiOpenInNew class="group-hover:text-accent" /> |
|
|
|
|
<component :is="iconMap.openInNew" class="group-hover:text-accent" /> |
|
|
|
|
<!-- Request a data source you need? --> |
|
|
|
|
{{ $t('labels.requestDataSource') }} |
|
|
|
|
</a> |
|
|
|
|
@ -957,7 +978,10 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
:trigger="['click']" |
|
|
|
|
@click.stop |
|
|
|
|
> |
|
|
|
|
<MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" /> |
|
|
|
|
<component |
|
|
|
|
:is="iconMap.threeDotVertical" |
|
|
|
|
class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
|
<a-menu class="!py-0 rounded text-sm"> |
|
|
|
|
@ -1027,9 +1051,7 @@ const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
|
<a-divider class="!my-0" /> |
|
|
|
|
|
|
|
|
|
<div class="flex items-start flex-col justify-start px-2 py-3 gap-2"> |
|
|
|
|
<LazyGeneralAddBaseButton |
|
|
|
|
class="color-transition py-1.5 px-2 text-primary font-bold cursor-pointer select-none hover:text-accent" |
|
|
|
|
/> |
|
|
|
|
<LazyGeneralAddBaseButton class="color-transition py-1.5 px-2 cursor-pointer select-none hover:text-primary" /> |
|
|
|
|
|
|
|
|
|
<LazyGeneralHelpAndSupport class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" /> |
|
|
|
|
|
|
|
|
|
|
Wing-Kam Wong
2 years ago