mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
582 lines
17 KiB
582 lines
17 KiB
<template> |
|
<v-container |
|
fluid |
|
class="ph-no-capture project-container ma-0 pa-0" |
|
style="position: relative" |
|
> |
|
<v-tabs |
|
ref="projectTabs" |
|
v-model="activeTab" |
|
dark |
|
background-color="primary" |
|
height="40" |
|
class="project-tabs nc-project-tabs" |
|
color="" |
|
next-icon="mdi-arrow-right-bold-box-outline" |
|
prev-icon="mdi-arrow-left-bold-box-outline" |
|
show-arrows |
|
:class="{ 'dark-them': $store.state.windows.darkTheme }" |
|
> |
|
<v-tabs-slider color="" /> |
|
|
|
<v-tab |
|
v-for="(tab, index) in tabs" |
|
:key="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${ |
|
(tab._nodes && tab._nodes.dbAlias) || '' |
|
}||${tab.name}`" |
|
class="divider project-tab xc-border-right" |
|
:title="tab.name" |
|
:href="`#${(tab._nodes && tab._nodes).type || ''}||${ |
|
(tab._nodes && tab._nodes.dbAlias) || '' |
|
}||${tab.name}`" |
|
@change="tabActivated(tab)" |
|
> |
|
<v-icon v-if="treeViewIcons[tab._nodes.type]" icon :small="true"> |
|
{{ treeViewIcons[tab._nodes.type].openIcon }} |
|
</v-icon> |
|
<span |
|
class="flex-grow-1 caption font-weight-bold text-capitalize mx-2" |
|
style=" |
|
white-space: nowrap; |
|
overflow: hidden; |
|
max-width: 140px; |
|
text-overflow: ellipsis; |
|
" |
|
>{{ tab.name }}</span |
|
> |
|
<v-icon icon :small="true" @click="removeTab(index)"> |
|
mdi-close |
|
</v-icon> |
|
</v-tab> |
|
|
|
<!-- <v-tabs-items v-model="activeTab">--> |
|
<v-tabs-items :value="activeTab"> |
|
<v-tab-item |
|
v-for="(tab, index) in tabs" |
|
:key="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${ |
|
(tab._nodes && tab._nodes.dbAlias) || '' |
|
}||${tab.name}`" |
|
:value="`${(tab._nodes && tab._nodes.type) || ''}||${ |
|
(tab._nodes && tab._nodes.dbAlias) || '' |
|
}||${tab.name}`" |
|
eager |
|
:transition="false" |
|
style="height: 100%" |
|
:reverse-transition="false" |
|
> |
|
<div v-if="tab._nodes.type === 'table'" style="height: 100%"> |
|
<!-- <sqlLogAndOutput :hide="hideLogWindows">--> |
|
<TableView |
|
:ref="'tabs' + index" |
|
:is-active=" |
|
activeTab === |
|
`${(tab._nodes && tab._nodes).type || ''}||${ |
|
(tab._nodes && tab._nodes.dbAlias) || '' |
|
}||${tab.name}` |
|
" |
|
:tab-id="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${ |
|
(tab._nodes && tab._nodes.dbAlias) || '' |
|
}||${tab.name}`" |
|
:hide-log-windows.sync="hideLogWindows" |
|
:nodes="tab._nodes" |
|
/> |
|
<!-- </sqlLogAndOutput>--> |
|
</div> |
|
<div v-else-if="tab._nodes.type === 'view'" style="height: 100%"> |
|
<!-- <sqlLogAndOutput>--> |
|
<!-- <ViewTab :ref="'tabs'+index" :nodes="tab._nodes" />--> |
|
<TableView |
|
:ref="'tabs' + index" |
|
:is-active=" |
|
activeTab === |
|
`${(tab._nodes && tab._nodes).type || ''}||${ |
|
(tab._nodes && tab._nodes.dbAlias) || '' |
|
}||${tab.name}` |
|
" |
|
:tab-id="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${ |
|
(tab._nodes && tab._nodes.dbAlias) || '' |
|
}||${tab.name}`" |
|
:hide-log-windows.sync="hideLogWindows" |
|
:nodes="tab._nodes" |
|
is-view |
|
/> |
|
<!-- </sqlLogAndOutput>--> |
|
</div> |
|
<div v-else-if="tab._nodes.type === 'function'" style="height: 100%"> |
|
<sqlLogAndOutput> |
|
<FunctionTab :ref="'tabs' + index" :nodes="tab._nodes" /> |
|
</sqlLogAndOutput> |
|
</div> |
|
<div v-else-if="tab._nodes.type === 'procedure'" style="height: 100%"> |
|
<sqlLogAndOutput> |
|
<ProcedureTab :ref="'tabs' + index" :nodes="tab._nodes" /> |
|
</sqlLogAndOutput> |
|
</div> |
|
<div v-else-if="tab._nodes.type === 'sequence'" style="height: 100%"> |
|
<sqlLogAndOutput> |
|
<SequenceTab :ref="'tabs' + index" :nodes="tab._nodes" /> |
|
</sqlLogAndOutput> |
|
</div> |
|
<div v-else-if="tab._nodes.type === 'db'" style="height: 100%"> |
|
<audit-tab |
|
:ref="'tabs' + index" |
|
class="backgroundColor" |
|
:nodes="tab._nodes" |
|
/> |
|
</div> |
|
<div |
|
v-else-if="tab._nodes.type === 'seedParserDir'" |
|
style="height: 100%" |
|
> |
|
<sqlLogAndOutput> |
|
<SeedTab :ref="'tabs' + index" :nodes="tab._nodes" /> |
|
</sqlLogAndOutput> |
|
</div> |
|
<div |
|
v-else-if="tab._nodes.type === 'migrationsDir'" |
|
style="height: 100%" |
|
> |
|
<audit-tab |
|
:ref="'tabs' + index" |
|
class="backgroundColor" |
|
:nodes="tab._nodes" |
|
/> |
|
</div> |
|
<div v-else-if="tab._nodes.type === 'apisDir'" style="height: 100%"> |
|
<ApisTab |
|
:ref="'tabs' + index" |
|
class="backgroundColor" |
|
:nodes="tab._nodes" |
|
/> |
|
</div> |
|
<div |
|
v-else-if="tab._nodes.type === 'apiClientDir'" |
|
style="height: 100%" |
|
> |
|
<ApiClientTab :ref="'tabs' + index" :nodes="tab._nodes" /> |
|
</div> |
|
<div |
|
v-else-if="tab._nodes.type === 'apiClientSwaggerDir'" |
|
style="height: 100%" |
|
> |
|
<ApiClientSwaggerTab :ref="'tabs' + index" :nodes="tab._nodes" /> |
|
</div> |
|
<div |
|
v-else-if="tab._nodes.type === 'sqlClientDir'" |
|
style="height: 100%" |
|
> |
|
<sqlLogAndOutput> |
|
<SqlClientTab :ref="'tabs' + index" :nodes="tab._nodes" /> |
|
</sqlLogAndOutput> |
|
</div> |
|
<div v-else-if="tab._nodes.type === 'terminal'" style="height: 100%"> |
|
<x-term :ref="'tabs' + index" style="height: 100%" /> |
|
</div> |
|
<div |
|
v-else-if="tab._nodes.type === 'graphqlClientDir'" |
|
style="height: 100%" |
|
> |
|
<graphql-client class="backgroundColor" style="height: 100%" /> |
|
</div> |
|
<div |
|
v-else-if="tab._nodes.type === 'swaggerClientDir'" |
|
style="height: 100%" |
|
> |
|
<swagger-client style="height: 100%" /> |
|
</div> |
|
<div |
|
v-else-if="tab._nodes.type === 'grpcClient'" |
|
style="height: 100%" |
|
> |
|
<grpc-client style="height: 100%" /> |
|
</div> |
|
<div v-else-if="tab._nodes.type === 'meta'" style="height: 100%"> |
|
<xc-meta class="backgroundColor" style="height: 100%" /> |
|
</div> |
|
<div v-else-if="tab._nodes.type === 'roles'" style="height: 100%"> |
|
<auth-tab |
|
v-if="_isUIAllowed('team-auth')" |
|
class="backgroundColor" |
|
:nodes="tab._nodes" |
|
style="height: 100%" |
|
/> |
|
</div> |
|
<div v-else-if="tab._nodes.type === 'acl'" style="height: 100%"> |
|
<global-acl |
|
class="backgroundColor" |
|
:nodes="tab._nodes" |
|
style="height: 100%" |
|
/> |
|
</div> |
|
<div |
|
v-else-if="tab._nodes.type === 'projectSettings'" |
|
style="height: 100%" |
|
> |
|
<project-settings |
|
v-if="_isUIAllowed('settings')" |
|
class="backgroundColor" |
|
:nodes="tab._nodes" |
|
style="height: 100%" |
|
/> |
|
</div> |
|
<div |
|
v-else-if="tab._nodes.type === 'disableOrEnableModel'" |
|
style="height: 100%" |
|
> |
|
<disable-or-enable-models |
|
v-if="_isUIAllowed('project-metadata')" |
|
class="backgroundColor" |
|
:nodes="tab._nodes" |
|
style="height: 100%" |
|
/> |
|
</div> |
|
<div v-else-if="tab._nodes.type === 'cronJobs'" style="height: 100%"> |
|
<cron-jobs :nodes="tab._nodes" style="height: 100%" /> |
|
</div> |
|
<div |
|
v-else-if="tab._nodes.type === 'projectInfo'" |
|
style="height: 100%" |
|
> |
|
<xc-info :nodes="tab._nodes" class="h-100" /> |
|
</div> |
|
<div v-else-if="tab._nodes.type === 'appStore'" style="height: 100%"> |
|
<app-store :nodes="tab._nodes" class="backgroundColor h-100" /> |
|
</div> |
|
<div v-else style="height: 100%"> |
|
<h1>{{ tab.name }}</h1> |
|
<h1>{{ tab._nodes }}</h1> |
|
</div> |
|
</v-tab-item> |
|
<!-- </v-tabs-items>--> |
|
</v-tabs-items> |
|
|
|
<!-- tooltip: Add new table --> |
|
<x-icon |
|
v-if="_isUIAllowed('addTable')" |
|
:tooltip="$t('tooltip.addTable')" |
|
icon-class="add-btn" |
|
:color="['white', 'grey lighten-2']" |
|
@click="dialogCreateTableShowMethod" |
|
> |
|
mdi-plus-box |
|
</x-icon> |
|
<v-spacer /> |
|
</v-tabs> |
|
|
|
<dlg-table-create |
|
v-if="dialogCreateTableShow" |
|
v-model="dialogCreateTableShow" |
|
@create=" |
|
$emit('tableCreate', $event); |
|
dialogCreateTableShow = false; |
|
" |
|
/> |
|
|
|
<!-- <screensaver v-if="showScreensaver && !($store.state.project.projectInfo && $store.state.project.projectInfo.ncMin)" class="screensaver" />--> |
|
</v-container> |
|
</template> |
|
|
|
<script> |
|
import { mapGetters, mapMutations } from "vuex"; |
|
import treeViewIcons from "../helpers/treeViewIcons"; |
|
import TableView from "./project/table"; |
|
import FunctionTab from "./project/function"; |
|
import ProcedureTab from "./project/procedure"; |
|
import SequenceTab from "./project/sequence"; |
|
import SeedTab from "./project/seed"; |
|
import SqlClientTab from "./project/sqlClient"; |
|
import ApisTab from "./project/apis"; |
|
import ApiClientTab from "./project/apiClientOld"; |
|
import sqlLogAndOutput from "./project/sqlLogAndOutput"; |
|
import graphqlClient from "./project/graphqlClient"; |
|
import xTerm from "./xTerm"; |
|
|
|
import ApiClientSwaggerTab from "./project/apiClientSwagger"; |
|
import XcMeta from "./project/settings/xcMeta"; |
|
import XcInfo from "./project/xcInfo"; |
|
import SwaggerClient from "@/components/project/swaggerClient"; |
|
import DlgTableCreate from "@/components/utils/dlgTableCreate"; |
|
import AppStore from "@/components/project/appStore"; |
|
import AuthTab from "@/components/authTab"; |
|
import CronJobs from "@/components/project/cronJobs"; |
|
import DisableOrEnableModels from "@/components/project/projectMetadata/disableOrEnableModels"; |
|
import ProjectSettings from "@/components/project/projectSettings"; |
|
import GrpcClient from "@/components/project/grpcClient"; |
|
import GlobalAcl from "@/components/globalAcl"; |
|
import AuditTab from "~/components/project/auditTab"; |
|
|
|
export default { |
|
components: { |
|
SwaggerClient, |
|
// Screensaver, |
|
DlgTableCreate, |
|
AuditTab, |
|
AppStore, |
|
XcInfo, |
|
AuthTab, |
|
CronJobs, |
|
DisableOrEnableModels, |
|
// CreateOrEditProject, |
|
ProjectSettings, |
|
GrpcClient, |
|
GlobalAcl, |
|
// Roles, |
|
XcMeta, |
|
ApiClientSwaggerTab, |
|
TableView, |
|
FunctionTab, |
|
ProcedureTab, |
|
ApisTab, |
|
SqlClientTab, |
|
ApiClientTab, |
|
SeedTab, |
|
SequenceTab, |
|
sqlLogAndOutput, |
|
xTerm, |
|
graphqlClient, |
|
}, |
|
data() { |
|
return { |
|
dialogCreateTableShow: false, |
|
test: "", |
|
treeViewIcons, |
|
hideLogWindows: false, |
|
showScreensaver: false, |
|
}; |
|
}, |
|
methods: { |
|
dialogCreateTableShowMethod() { |
|
this.dialogCreateTableShow = true; |
|
this.$e("c:table:create:navbar"); |
|
}, |
|
checkInactiveState() { |
|
let position = 0; |
|
let idleTime = 0; |
|
// Increment the idle time counter every minute. |
|
let idleInterval = setInterval(timerIncrement, 1000); |
|
|
|
const self = this; |
|
// Zero the idle timer on mouse movement. |
|
document.addEventListener("mousemove", (e) => { |
|
self.showScreensaver = false; |
|
idleTime = 0; |
|
clearInterval(idleInterval); |
|
idleInterval = setInterval(timerIncrement, 1000); |
|
}); |
|
document.addEventListener("keypress", (e) => { |
|
self.showScreensaver = false; |
|
idleTime = 0; |
|
clearInterval(idleInterval); |
|
idleInterval = setInterval(timerIncrement, 1000); |
|
}); |
|
|
|
function timerIncrement() { |
|
idleTime = idleTime + 1; |
|
if (idleTime > 120) { |
|
const title = document.title; |
|
|
|
function scrolltitle() { |
|
document.title = title + Array(position).fill(" .").join(""); |
|
position = ++position % 3; |
|
if (self.showScreensaver) { |
|
window.setTimeout(scrolltitle, 400); |
|
} else { |
|
document.title = title; |
|
} |
|
} |
|
|
|
self.showScreensaver = self.$store.state.windows.screensaver; |
|
scrolltitle(); |
|
clearInterval(idleInterval); |
|
} |
|
} |
|
}, |
|
async handleKeyDown(event) { |
|
const activeTabEleKey = `tabs${this.activeTab}`; |
|
let isHandled = false; |
|
|
|
if ( |
|
this.$refs[activeTabEleKey] && |
|
this.$refs[activeTabEleKey][0] && |
|
this.$refs[activeTabEleKey][0].handleKeyDown |
|
) { |
|
isHandled = await this.$refs[activeTabEleKey][0].handleKeyDown(event); |
|
} |
|
if (!isHandled) { |
|
switch ( |
|
[this._isMac ? event.metaKey : event.ctrlKey, event.key].join("_") |
|
) { |
|
case "true_w": |
|
this.removeTab(this.activeTab); |
|
event.preventDefault(); |
|
event.stopPropagation(); |
|
break; |
|
} |
|
} |
|
}, |
|
...mapMutations({ |
|
setActiveTab: "tabs/active", |
|
removeTab: "tabs/remove", |
|
updateActiveTabx: "tabs/activeTabCtx", |
|
}), |
|
tabActivated(tab) {}, |
|
}, |
|
computed: { |
|
...mapGetters({ tabs: "tabs/list", activeTabCtx: "tabs/activeTabCtx" }), |
|
pid() { |
|
return this.$route.params.project_id; |
|
}, |
|
activeTab: { |
|
set(tab) { |
|
if (!tab) { |
|
return this.$router.push({ |
|
query: {}, |
|
}); |
|
} |
|
const [type, dbalias, name] = tab.split("||"); |
|
this.$router.push({ |
|
query: { |
|
...this.$route.query, |
|
type, |
|
dbalias, |
|
name, |
|
}, |
|
}); |
|
}, |
|
get() { |
|
return [ |
|
this.$route.query.type, |
|
this.$route.query.dbalias, |
|
this.$route.query.name, |
|
].join("||"); |
|
}, |
|
}, |
|
}, |
|
|
|
beforeCreated() {}, |
|
watch: {}, |
|
created() { |
|
document.addEventListener("keydown", this.handleKeyDown); |
|
/** |
|
* Listening for tab change so that we can hide/show projectlogs based on tab |
|
*/ |
|
}, |
|
mounted() {}, |
|
beforeDestroy() {}, |
|
destroyed() { |
|
document.removeEventListener("keydown", this.handleKeyDown); |
|
}, |
|
directives: {}, |
|
validate({ params }) { |
|
return true; |
|
}, |
|
head() { |
|
return {}; |
|
}, |
|
props: {}, |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
/*/deep/ .project-tabs > .v-tabs-items {*/ |
|
/* border-top: 1px solid #7F828B33;*/ |
|
/*}*/ |
|
|
|
/deep/ .project-tabs .v-tabs-bar { |
|
max-height: 30px; |
|
} |
|
|
|
/deep/ .project-tabs > .v-tabs-bar { |
|
max-height: 30px; |
|
} |
|
|
|
/*/deep/ .project-tabs .v-tabs-slider-wrapper {*/ |
|
/* display: none;*/ |
|
/*}*/ |
|
|
|
/deep/ .project-tabs .v-tab.project-tab { |
|
text-transform: capitalize; |
|
border-top-left-radius: 3px; |
|
border-top-right-radius: 3px; |
|
background: #0002; |
|
margin: 0px 1px 0 1px; |
|
color: white !important; |
|
} |
|
|
|
/deep/ .project-tabs .v-tab.v-tab--active.project-tab { |
|
background-color: white !important; |
|
color: rgba(51, 51, 51, 1) !important; |
|
} |
|
|
|
/deep/ .project-tabs.dark-them .v-tab.v-tab--active.project-tab { |
|
background-color: #272727 !important; |
|
color: white !important; |
|
} |
|
|
|
/* |
|
/deep/ .project-tabs.dark-them > div > div > div > div > .v-tabs-slider { |
|
color: #272727 !important; |
|
} |
|
*/ |
|
|
|
/deep/ .project-tabs > div > div > div > div > .v-tabs-slider { |
|
color: transparent !important; |
|
} |
|
|
|
/deep/ .project-tabs .v-btn { |
|
text-transform: capitalize; |
|
} |
|
|
|
.powered-by .powered-by-close { |
|
opacity: 0; |
|
transition: 0.4s opacity; |
|
} |
|
|
|
.powered-by a { |
|
transition: 0.1s font-weight; |
|
} |
|
|
|
.powered-by:hover .powered-by-close { |
|
opacity: 1; |
|
} |
|
|
|
.powered-by:hover a { |
|
font-weight: bold; |
|
} |
|
|
|
/deep/ .add-btn { |
|
margin-left: 5px; |
|
} |
|
|
|
/deep/ .screensaver.body { |
|
position: absolute; |
|
} |
|
|
|
/deep/ .project-tab:first-of-type { |
|
margin-left: 0 !important; |
|
} |
|
</style> |
|
<!-- |
|
/** |
|
* @copyright Copyright (c) 2021, Xgene Cloud Ltd |
|
* |
|
* @author Naveen MR <oof1lab@gmail.com> |
|
* @author Pranav C Balan <pranavxc@gmail.com> |
|
* |
|
* @license GNU AGPL version 3 or any later version |
|
* |
|
* This program is free software: you can redistribute it and/or modify |
|
* it under the terms of the GNU Affero General Public License as |
|
* published by the Free Software Foundation, either version 3 of the |
|
* License, or (at your option) any later version. |
|
* |
|
* This program is distributed in the hope that it will be useful, |
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
* GNU Affero General Public License for more details. |
|
* |
|
* You should have received a copy of the GNU Affero General Public License |
|
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
* |
|
*/ |
|
-->
|
|
|