clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-04-29 19:06:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(gui): linting

Browse Source 
Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>
This commit is contained in:
Pranav C
2021-07-19 16:30:37 +05:30
parent f9508c2d44
commit fa00be39b8
303 changed files with 34924 additions and 31761 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
packages/nc-gui/components/project/projectMetadata/disableOrEnableModels.vue
View File

@@ -1,30 +1,33 @@
<template>
<div>
<v-tabs color="x-active" height="30" v-model="dbsTab">
<v-tabs v-model="dbsTab" color="x-active" height="30">
<v-tab href="#xc-project-meta">
<v-icon icon x-small class="mr-2"> mdi-file-table-box-multiple-outline</v-icon>
<span class="caption text-capitalize"> Project Metadata</span></v-tab>
<v-icon icon x-small class="mr-2">
mdi-file-table-box-multiple-outline
</v-icon>
<span class="caption text-capitalize"> Project Metadata</span>
</v-tab>
<v-tab-item value="xc-project-meta">
<div class="d-flex justify-center d-100">
<xc-meta>
</xc-meta>
<xc-meta />
</div>
</v-tab-item>
<template v-for="(db,i) in dbAliasList">
<v-tab :key="db.meta.dbAlias + i" :href="'#' + db.meta.dbAlias" class="text-capitalize caption">
{{ db.connection.database }} {{ db.meta.dbAlias }} Metadata
</v-tab>
<v-tab-item :key="db.meta.dbAlias + 't' + i" :value=" db.meta.dbAlias">
<v-tabs color="x-active" height="28">
<v-tab class="text-capitalize caption">Tables</v-tab>
<v-tab class="text-capitalize caption">
Tables
</v-tab>
<v-tab-item>
<disable-or-enable-tables
:nodes="nodes" :db="db"
:db-alias="db.meta.dbAlias"></disable-or-enable-tables>
:nodes="nodes"
:db="db"
:db-alias="db.meta.dbAlias"
/>
</v-tab-item>
<!-- enable extra -->
<!-- <v-tab class="text-capitalize caption">Views</v-tab>
@@ -44,25 +47,29 @@
:db-alias="db.meta.dbAlias"></disable-or-enable-procedures>
</v-tab-item>-->
<v-tab class="text-capitalize caption">Relations</v-tab>
<v-tab class="text-capitalize caption">
Relations
</v-tab>
<v-tab-item>
<disable-or-enable-relations :nodes="nodes" :db-alias="db.meta.dbAlias"></disable-or-enable-relations>
<disable-or-enable-relations :nodes="nodes" :db-alias="db.meta.dbAlias" />
</v-tab-item>
</v-tabs>
</v-tab-item>
<v-tab :key="db.meta.dbAlias + 'acl'" :href="'#' + db.meta.dbAlias + 'acl'" class="text-capitalize caption">
{{ db.connection.database }} UI Access Control
</v-tab>
<v-tab-item :key="db.meta.dbAlias + 'aclt'" :value=" db.meta.dbAlias + 'acl'">
<v-tab-item :key="db.meta.dbAlias + 'aclt'" :value=" db.meta.dbAlias + 'acl'">
<v-tabs color="x-active" height="28">
<v-tab class="text-capitalize caption">Tables</v-tab>
<v-tab class="text-capitalize caption">
Tables
</v-tab>
<v-tab-item>
<toggle-table-ui-acl :nodes="nodes" :db="db"
:db-alias="db.meta.dbAlias"></toggle-table-ui-acl>
<toggle-table-ui-acl
:nodes="nodes"
:db="db"
:db-alias="db.meta.dbAlias"
/>
</v-tab-item>
<!-- enable extra -->
<!-- <v-tab class="text-capitalize caption">Views</v-tab>
@@ -82,50 +89,42 @@
:db-alias="db.meta.dbAlias"></toggle-procedure-ui-acl>
</v-tab-item>-->
<v-tab class="text-capitalize caption">Relations</v-tab>
<v-tab class="text-capitalize caption">
Relations
</v-tab>
<v-tab-item>
<toggle-relations-ui-acl :nodes="nodes" :db="db"
:db-alias="db.meta.dbAlias"></toggle-relations-ui-acl>
<toggle-relations-ui-acl
:nodes="nodes"
:db="db"
:db-alias="db.meta.dbAlias"
/>
</v-tab-item>
</v-tabs>
</v-tab-item>
</template>
</v-tabs>
</div>
</template>
<script>
import {mapGetters} from "vuex";
import {isMetaTable} from "@/helpers/xutils";
import XIcon from "@/components/global/xIcon";
import XBtn from "@/components/global/xBtn";
import DisableOrEnableRelations from "./sync/disableOrEnableRelations";
import XcMeta from "../settings/xcMeta";
import DisableOrEnableViews from "./sync/disableOrEnableViews";
import DisableOrEnableFunctions from "./sync/disableOrEnableFunctions";
import DisableOrEnableProcedures from "./sync/disableOrEnableProcedures";
import DisableOrEnableTables from "@/components/project/projectMetadata/sync/disableOrEnableTables";
import ToggleTableUiAcl from "@/components/project/projectMetadata/uiAcl/toggleTableUIAcl";
import ToggleViewUiAcl from "@/components/project/projectMetadata/uiAcl/toggleViewUIAcl";
import ToggleFunctionUiAcl from "@/components/project/projectMetadata/uiAcl/toggleFunctionUIAcl";
import ToggleProcedureUiAcl from "@/components/project/projectMetadata/uiAcl/toggleProcedureUIAcl";
import ToggleRelationsUiAcl from "@/components/project/projectMetadata/uiAcl/toggleRelationsUIAcl";
import { mapGetters } from 'vuex'
import { isMetaTable } from '@/helpers/xutils'
import DisableOrEnableTables from '@/components/project/projectMetadata/sync/disableOrEnableTables'
import ToggleTableUiAcl from '@/components/project/projectMetadata/uiAcl/toggleTableUIAcl'
import ToggleRelationsUiAcl from '@/components/project/projectMetadata/uiAcl/toggleRelationsUIAcl'
import XcMeta from '../settings/xcMeta'
import DisableOrEnableRelations from './sync/disableOrEnableRelations'
export default {
name: "disableOrEnableModels",
name: 'DisableOrEnableModels',
components: {
ToggleRelationsUiAcl,
ToggleProcedureUiAcl,
ToggleFunctionUiAcl,
ToggleViewUiAcl,
ToggleTableUiAcl,
DisableOrEnableTables,
DisableOrEnableProcedures,
DisableOrEnableFunctions, DisableOrEnableViews, XcMeta, DisableOrEnableRelations, XBtn, XIcon
XcMeta,
DisableOrEnableRelations
},
props: ['nodes'],
data: () => ({
edited: false,
models: null,
@@ -134,20 +133,20 @@ export default {
filter: '',
tables: null
}),
props: ['nodes'],
async mounted() {
async mounted () {
},
methods: {},
computed: {
dbsTab: {
set(tab) {
set (tab) {
if (!tab) {
// return this.$router.push({
// query: {}
// })
return;
return
}
const nested_1 = tab;
// eslint-disable-next-line camelcase
const nested_1 = tab
this.$router.push({
query: {
...this.$route.query,
@@ -155,7 +154,7 @@ export default {
}
})
},
get() {
get () {
return this.$route.query.nested_1
}
@@ -164,40 +163,39 @@ export default {
...mapGetters({
dbAliasList: 'project/GtrDbAliasList'
}),
enableCountText() {
return this.models ?
`${this.models.filter(m => m.enabled).length}/${this.models.length} enabled`
enableCountText () {
return this.models
? `${this.models.filter(m => m.enabled).length}/${this.models.length} enabled`
: ''
},
isNewOrDeletedModelFound() {
isNewOrDeletedModelFound () {
return this.comparedModelList.some(m => m.new || m.deleted)
},
comparedModelList() {
const res = [];
comparedModelList () {
const res = []
const getPriority = (item) => {
if (item.new) return 2;
if (item.deleted) return 1;
return 0;
if (item.new) { return 2 }
if (item.deleted) { return 1 }
return 0
}
if (this.tables && this.models) {
const tables = this.tables.filter(t => !isMetaTable(t.tn)).map(t => t.tn);
res.push(...this.models.map(m => {
const i = tables.indexOf(m.title);
const tables = this.tables.filter(t => !isMetaTable(t.tn)).map(t => t.tn)
res.push(...this.models.map((m) => {
const i = tables.indexOf(m.title)
if (i === -1) {
m.deleted = true;
m.deleted = true
} else {
tables.splice(i, 1);
tables.splice(i, 1)
}
return m;
}));
return m
}))
res.push(...tables.map(t => ({
title: t, new: true
})))
}
res.sort((a, b) => getPriority(b) - getPriority(a))
return res;
return res
}
}
}

311
packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableFunctions.vue
View File

@@ -1,84 +1,113 @@
<template>
<v-container fluid v-if="db">
<v-container v-if="db" fluid>
<v-card>
<v-row>
<!-- <v-col cols="12">-->
<!-- <v-col cols="12">-->
<!-- <h4 class="text-center my-2 grey&#45;&#45;text text&#45;&#45;darken-2 title"> Metadata Management-->
<!-- </h4></v-col>-->
<v-col cols="8">
<v-card class="pb-2">
<v-toolbar flat height="50" class="toolbar-border-bottom">
<v-text-field
v-if="dbAliasList && db"
v-model="filter"
dense
hide-details
class="my-2 mx-auto"
:placeholder="`Search '${db.connection.database}' models`"
prepend-inner-icon="search"
style="max-width:500px"
outlined
/>
<v-text-field v-if="dbAliasList && db" v-model="filter" dense hide-details
class="my-2 mx-auto"
:placeholder="`Search '${db.connection.database}' models`"
prepend-inner-icon="search"
style="max-width:500px"
outlined></v-text-field>
<v-spacer></v-spacer>
<x-btn outlined tooltip="Reload list" small @click="loadModels();loadTableList()"
color="primary"
icon="refresh">Reload
<v-spacer />
<x-btn
outlined
tooltip="Reload list"
small
color="primary"
icon="refresh"
@click="loadModels();loadTableList()"
>
Reload
</x-btn>
<x-btn outlined :loading="updating" :disabled="updating || !edited" tooltip="Save Changes"
small
@click="saveModels()"
color="primary" icon="save">Save
<x-btn
outlined
:loading="updating"
:disabled="updating || !edited"
tooltip="Save Changes"
small
color="primary"
icon="save"
@click="saveModels()"
>
Save
</x-btn>
</v-toolbar>
<div class="d-flex d-100 justify-center">
<v-simple-table dense v-slot:default style="min-width: 400px">
<v-simple-table dense style="min-width: 400px">
<thead>
<tr>
<th>Models <span class="caption ml-1" v-show="!isNewOrDeletedModelFound">({{
enableCountText
}})</span>
</th>
<th>APIs</th>
<th>Actions</th>
<th>Comment</th>
</tr>
<tr>
<th>
Models <span v-show="!isNewOrDeletedModelFound" class="caption ml-1">({{
enableCountText
}})</span>
</th>
<th>APIs</th>
<th>Actions</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr v-for="model in comparedModelList"
v-if="model.title.toLowerCase().indexOf(filter.toLowerCase()) > -1">
<td>{{ model.title }}</td>
<td>
<v-checkbox dense :disabled="model.new || model.deleted" @change="edited = true"
v-model="model.enabled"></v-checkbox>
</td>
<td>
<template v-if="model.new">
<!-- <x-icon small color="success success" tooltip="Add and sync meta information"-->
<!-- @click="addTableMeta([model.title])">mdi-plus-circle-outline-->
<!-- </x-icon>-->
</template>
<template v-else-if="model.deleted">
<!-- <x-icon small v-else-if="model.deleted" color="error error" tooltip="Delete meta information"-->
<!-- @click="deleteTableMeta([model.title])">mdi-delete-outline-->
<!-- </x-icon>-->
</template>
<x-icon small v-else color="primary" tooltip="Recreate metadata"
@click="recreateTableMeta(model.title)">mdi-reload
</x-icon>
<template
v-for="model in comparedModelList"
>
<tr
v-if="model.title.toLowerCase().indexOf(filter.toLowerCase()) > -1"
:key="model.title"
>
<td>{{ model.title }}</td>
<td>
<v-checkbox
v-model="model.enabled"
dense
:disabled="model.new || model.deleted"
@change="edited = true"
/>
</td>
<td>
<template v-if="model.new">
<!-- <x-icon small color="success success" tooltip="Add and sync meta information"-->
<!-- @click="addTableMeta([model.title])">mdi-plus-circle-outline-->
<!-- </x-icon>-->
</template>
<template v-else-if="model.deleted">
<!-- <x-icon small v-else-if="model.deleted" color="error error" tooltip="Delete meta information"-->
<!-- @click="deleteTableMeta([model.title])">mdi-delete-outline-->
<!-- </x-icon>-->
</template>
<x-icon
v-else
small
color="primary"
tooltip="Recreate metadata"
@click="recreateTableMeta(model.title)"
>
mdi-reload
</x-icon>
</td>
</td>
<td>
<span v-if="model.new"
class="caption success--text">New table found in DB. Yet to be synced.</span>
<span v-else-if="model.deleted" class="caption error--text">This table doesn't exist in DB. Yet to be synced.</span>
<!-- <span v-else class="caption grey&#45;&#45;text">Recreate metadata.</span>-->
</td>
</tr>
<td>
<span
v-if="model.new"
class="caption success--text"
>New table found in DB. Yet to be synced.</span>
<span v-else-if="model.deleted" class="caption error--text">This table doesn't exist in DB. Yet to be synced.</span>
<!-- <span v-else class="caption grey&#45;&#45;text">Recreate metadata.</span>-->
</td>
</tr>
</template>
</tbody>
</v-simple-table>
</div>
@@ -86,21 +115,30 @@
</v-col>
<v-col cols="4" style="padding-top:100px">
<div class="d-flex">
<v-spacer></v-spacer>
<v-spacer />
<v-tooltip bottom>
<template v-slot:activator="{on}">
<v-alert dense
v-on="on"
border="left"
colored-border
elevation="2"
color="warning"
v-if="isNewOrDeletedModelFound" type="warning"> Functions metadata <br>is out of sync
<template #activator="{on}">
<v-alert
v-if="isNewOrDeletedModelFound"
dense
border="left"
colored-border
elevation="2"
color="warning"
type="warning"
v-on="on"
>
Functions metadata <br>is out of sync
</v-alert>
<v-alert dense
v-on="on" outlined v-else type="success">Function metadata is in sync
<v-alert
v-else
dense
outlined
type="success"
v-on="on"
>
Function metadata is in sync
</v-alert>
</template>
<template v-if="!isNewOrDeletedModelFound">
@@ -111,23 +149,22 @@
Metadata for API creation & management isn't sync with
'{{ db.connection.database }}' Database.
</template>
</v-tooltip>
<v-spacer></v-spacer>
<v-spacer />
</div>
<div class="d-flex justify-center" v-if="isNewOrDeletedModelFound">
<div v-if="isNewOrDeletedModelFound" class="d-flex justify-center">
<x-btn
x-large
btn.class="mx-auto primary"
tooltip="Sync metadata"
@click="syncMetadata"
>
<v-icon color="white" class="mr-2 mt-n1">mdi-database-sync</v-icon>
<v-icon color="white" class="mr-2 mt-n1">
mdi-database-sync
</v-icon>
Sync Now
</x-btn>
</div>
</v-col>
</v-row>
</v-card>
@@ -135,11 +172,12 @@
</template>
<script>
import {mapGetters} from "vuex";
import {isMetaTable} from "@/helpers/xutils";
import { mapGetters } from 'vuex'
import { isMetaTable } from '@/helpers/xutils'
export default {
name: "disable-or-enable-functions",
name: 'DisableOrEnableFunctions',
props: ['nodes', 'db'],
data: () => ({
edited: false,
models: null,
@@ -148,142 +186,141 @@ export default {
filter: '',
functions: null
}),
props: ['nodes', 'db'],
async mounted() {
await this.loadModels();
await this.loadTableList();
async mounted () {
await this.loadModels()
await this.loadTableList()
},
methods: {
async addTableMeta(tables) {
async addTableMeta (tables) {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'functionMetaCreate', {
tableNames: tables//this.comparedModelList.filter(t => t.new).map(t=>t.title)
}]);
tableNames: tables// this.comparedModelList.filter(t => t.new).map(t=>t.title)
}])
setTimeout(async () => {
await this.loadModels()
this.$toast.success('Table metadata added successfully').goAway(3000);
}, 1000);
this.$toast.success('Table metadata added successfully').goAway(3000)
}, 1000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(5000)
}
},
async deleteTableMeta(tables) {
async deleteTableMeta (tables) {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'functioneMetaDelete', {
tableNames: tables
}]);
}])
setTimeout(async () => {
await this.loadModels()
this.$toast.success('Table metadata deleted successfully').goAway(3000);
}, 1000);
this.$toast.success('Table metadata deleted successfully').goAway(3000)
}, 1000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(5000)
}
},
async syncMetadata() {
const addTables = this.comparedModelList.filter(t => t.new).map(t => t.title);
const deleteTables = this.comparedModelList.filter(t => t.deleted).map(t => t.title);
async syncMetadata () {
const addTables = this.comparedModelList.filter(t => t.new).map(t => t.title)
const deleteTables = this.comparedModelList.filter(t => t.deleted).map(t => t.title)
if (addTables.length) {
await this.addTableMeta(addTables);
await this.addTableMeta(addTables)
}
if (deleteTables.length) {
await this.deleteTableMeta(deleteTables);
await this.deleteTableMeta(deleteTables)
}
},
async recreateTableMeta(table) {
async recreateTableMeta (table) {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'functionMetaRecreate', {
tn: table
}]);
}])
setTimeout(async () => {
await this.loadModels()
this.$toast.success('Table metadata recreated successfully').goAway(3000);
}, 1000);
this.$toast.success('Table metadata recreated successfully').goAway(3000)
}, 1000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(5000)
}
},
async loadModels() {
async loadModels () {
if (this.dbAliasList[this.dbsTab]) {
this.models = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcFunctionModelsList']);
this.edited = false;
}, 'xcFunctionModelsList'])
this.edited = false
}
},
async loadTableList() {
async loadTableList () {
this.functions = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'functionList'])).data.list;
}, 'functionList'])).data.list
},
async saveModels() {
this.updating = true;
async saveModels () {
this.updating = true
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcFunctionModelsEnable', this.models.filter(m => m.enabled).map(m => m.title)]);
this.$toast.success('Models changes are updated successfully').goAway(3000);
}, 'xcFunctionModelsEnable', this.models.filter(m => m.enabled).map(m => m.title)])
this.$toast.success('Models changes are updated successfully').goAway(3000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(3000);
console.log(e.message);
this.$toast.error('Some error occurred').goAway(3000)
console.log(e.message)
}
this.updating = false;
this.edited = false;
this.updating = false
this.edited = false
}
},
computed: {
...mapGetters({
dbAliasList: 'project/GtrDbAliasList'
}),
enableCountText() {
return this.models ?
`${this.models.filter(m => m.enabled).length}/${this.models.length} enabled`
enableCountText () {
return this.models
? `${this.models.filter(m => m.enabled).length}/${this.models.length} enabled`
: ''
},
isNewOrDeletedModelFound() {
isNewOrDeletedModelFound () {
return this.comparedModelList.some(m => m.new || m.deleted)
},
comparedModelList() {
const res = [];
comparedModelList () {
const res = []
const getPriority = (item) => {
if (item.new) return 2;
if (item.deleted) return 1;
return 0;
if (item.new) { return 2 }
if (item.deleted) { return 1 }
return 0
}
if (this.functions && this.models) {
const tables = this.functions.filter(t => !isMetaTable(t.function_name)).map(t => t.function_name);
res.push(...this.models.map(m => {
const i = tables.indexOf(m.title);
const tables = this.functions.filter(t => !isMetaTable(t.function_name)).map(t => t.function_name)
res.push(...this.models.map((m) => {
const i = tables.indexOf(m.title)
if (i === -1) {
m.deleted = true;
m.deleted = true
} else {
tables.splice(i, 1);
tables.splice(i, 1)
}
return m;
}));
return m
}))
res.push(...tables.map(t => ({
title: t, new: true
})))
}
res.sort((a, b) => getPriority(b) - getPriority(a))
return res;
return res
}
},
}
}
</script>

319
packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableProcedures.vue
View File

@@ -1,84 +1,113 @@
<template>
<v-container fluid v-if="db">
<v-container v-if="db" fluid>
<v-card>
<v-row>
<!-- <v-col cols="12">-->
<!-- <h4 class="text-center my-2 grey&#45;&#45;text text&#45;&#45;darken-2 title"> Metadata Management-->
<!-- </h4></v-col>-->
<!-- <v-col cols="12">-->
<!-- <h4 class="text-center my-2 grey&#45;&#45;text text&#45;&#45;darken-2 title"> Metadata Management-->
<!-- </h4></v-col>-->
<v-col cols="8">
<v-card class="pb-2">
<v-toolbar flat height="50" class="toolbar-border-bottom">
<v-text-field
v-if="dbAliasList && db"
v-model="filter"
dense
hide-details
class="my-2 mx-auto"
:placeholder="`Search '${db.connection.database}' models`"
prepend-inner-icon="search"
style="max-width:500px"
outlined
/>
<v-text-field v-if="dbAliasList && db" v-model="filter" dense hide-details
class="my-2 mx-auto"
:placeholder="`Search '${db.connection.database}' models`"
prepend-inner-icon="search"
style="max-width:500px"
outlined></v-text-field>
<v-spacer></v-spacer>
<x-btn outlined tooltip="Reload list" small @click="loadModels();loadTableList()"
color="primary"
icon="refresh">Reload
<v-spacer />
<x-btn
outlined
tooltip="Reload list"
small
color="primary"
icon="refresh"
@click="loadModels();loadTableList()"
>
Reload
</x-btn>
<x-btn outlined :loading="updating" :disabled="updating || !edited" tooltip="Save Changes"
small
@click="saveModels()"
color="primary" icon="save">Save
<x-btn
outlined
:loading="updating"
:disabled="updating || !edited"
tooltip="Save Changes"
small
color="primary"
icon="save"
@click="saveModels()"
>
Save
</x-btn>
</v-toolbar>
<div class="d-flex d-100 justify-center">
<v-simple-table dense v-slot:default style="min-width: 400px">
<v-simple-table dense style="min-width: 400px">
<thead>
<tr>
<th>Models <span class="caption ml-1" v-show="!isNewOrDeletedModelFound">({{
enableCountText
}})</span>
</th>
<th>APIs</th>
<th>Actions</th>
<th>Comment</th>
</tr>
<tr>
<th>
Models <span v-show="!isNewOrDeletedModelFound" class="caption ml-1">({{
enableCountText
}})</span>
</th>
<th>APIs</th>
<th>Actions</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr v-for="model in comparedModelList"
v-if="model.title.toLowerCase().indexOf(filter.toLowerCase()) > -1">
<td>{{ model.title }}</td>
<td>
<v-checkbox dense :disabled="model.new || model.deleted" @change="edited = true"
v-model="model.enabled"></v-checkbox>
</td>
<td>
<template v-if="model.new">
<!-- <x-icon small color="success success" tooltip="Add and sync meta information"-->
<!-- @click="addTableMeta([model.title])">mdi-plus-circle-outline-->
<!-- </x-icon>-->
</template>
<template v-else-if="model.deleted">
<!-- <x-icon small v-else-if="model.deleted" color="error error" tooltip="Delete meta information"-->
<!-- @click="deleteTableMeta([model.title])">mdi-delete-outline-->
<!-- </x-icon>-->
</template>
<x-icon small v-else color="primary" tooltip="Recreate metadata"
@click="recreateTableMeta(model.title)">mdi-reload
</x-icon>
<template
v-for="model in comparedModelList"
>
<tr
v-if="model.title.toLowerCase().indexOf(filter.toLowerCase()) > -1"
:key="model.title"
>
<td>{{ model.title }}</td>
<td>
<v-checkbox
v-model="model.enabled"
dense
:disabled="model.new || model.deleted"
@change="edited = true"
/>
</td>
<td>
<template v-if="model.new">
<!-- <x-icon small color="success success" tooltip="Add and sync meta information"-->
<!-- @click="addTableMeta([model.title])">mdi-plus-circle-outline-->
<!-- </x-icon>-->
</template>
<template v-else-if="model.deleted">
<!-- <x-icon small v-else-if="model.deleted" color="error error" tooltip="Delete meta information"-->
<!-- @click="deleteTableMeta([model.title])">mdi-delete-outline-->
<!-- </x-icon>-->
</template>
<x-icon
v-else
small
color="primary"
tooltip="Recreate metadata"
@click="recreateTableMeta(model.title)"
>
mdi-reload
</x-icon>
</td>
</td>
<td>
<span v-if="model.new"
class="caption success--text">New table found in DB. Yet to be synced.</span>
<span v-else-if="model.deleted" class="caption error--text">This table doesn't exist in DB. Yet to be synced.</span>
<!-- <span v-else class="caption grey&#45;&#45;text">Recreate metadata.</span>-->
</td>
</tr>
<td>
<span
v-if="model.new"
class="caption success--text"
>New table found in DB. Yet to be synced.</span>
<span v-else-if="model.deleted" class="caption error--text">This table doesn't exist in DB. Yet to be synced.</span>
<!-- <span v-else class="caption grey&#45;&#45;text">Recreate metadata.</span>-->
</td>
</tr>
</template>
</tbody>
</v-simple-table>
</div>
@@ -86,21 +115,30 @@
</v-col>
<v-col cols="4" style="padding-top:100px">
<div class="d-flex">
<v-spacer></v-spacer>
<v-spacer />
<v-tooltip bottom>
<template v-slot:activator="{on}">
<v-alert dense
v-on="on"
border="left"
colored-border
elevation="2"
color="warning"
v-if="isNewOrDeletedModelFound" type="warning"> Procedures metadata <br>is out of sync
<template #activator="{on}">
<v-alert
v-if="isNewOrDeletedModelFound"
dense
border="left"
colored-border
elevation="2"
color="warning"
type="warning"
v-on="on"
>
Procedures metadata <br>is out of sync
</v-alert>
<v-alert dense
v-on="on" outlined v-else type="success">Procedures metadata is in sync
<v-alert
v-else
dense
outlined
type="success"
v-on="on"
>
Procedures metadata is in sync
</v-alert>
</template>
<template v-if="!isNewOrDeletedModelFound">
@@ -111,23 +149,22 @@
Metadata for API creation & management isn't sync with
'{{ db.connection.database }}' Database.
</template>
</v-tooltip>
<v-spacer></v-spacer>
<v-spacer />
</div>
<div class="d-flex justify-center" v-if="isNewOrDeletedModelFound">
<div v-if="isNewOrDeletedModelFound" class="d-flex justify-center">
<x-btn
x-large
btn.class="mx-auto primary"
tooltip="Sync metadata"
@click="syncMetadata"
>
<v-icon color="white" class="mr-2 mt-n1">mdi-database-sync</v-icon>
<v-icon color="white" class="mr-2 mt-n1">
mdi-database-sync
</v-icon>
Sync Now
</x-btn>
</div>
</v-col>
</v-row>
</v-card>
@@ -135,11 +172,12 @@
</template>
<script>
import {mapGetters} from "vuex";
import {isMetaTable} from "@/helpers/xutils";
import { mapGetters } from 'vuex'
import { isMetaTable } from '@/helpers/xutils'
export default {
name: "disable-or-enable-procedures",
name: 'DisableOrEnableProcedures',
props: ['nodes', 'db'],
data: () => ({
edited: false,
models: null,
@@ -148,142 +186,145 @@ export default {
filter: '',
procedures: null
}),
props: ['nodes', 'db'],
async mounted() {
await this.loadModels();
await this.loadTableList();
async mounted () {
await this.loadModels()
await this.loadTableList()
},
methods: {
async addTableMeta(tables) {
async addTableMeta (tables) {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'procedureMetaCreate', {
tableNames: tables//this.comparedModelList.filter(t => t.new).map(t=>t.title)
}]);
tableNames: tables// this.comparedModelList.filter(t => t.new).map(t=>t.title)
}])
setTimeout(async () => {
await this.loadModels()
this.$toast.success('Table metadata added successfully').goAway(3000);
}, 1000);
this.$toast.success('Table metadata added successfully').goAway(3000)
}, 1000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(5000)
}
},
async deleteTableMeta(tables) {
async deleteTableMeta (tables) {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'procedureMetaDelete', {
tableNames: tables
}]);
}])
setTimeout(async () => {
await this.loadModels()
this.$toast.success('Table metadata deleted successfully').goAway(3000);
}, 1000);
this.$toast.success('Table metadata deleted successfully').goAway(3000)
}, 1000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(5000)
}
},
async syncMetadata() {
const addTables = this.comparedModelList.filter(t => t.new).map(t => t.title);
const deleteTables = this.comparedModelList.filter(t => t.deleted).map(t => t.title);
async syncMetadata () {
const addTables = this.comparedModelList.filter(t => t.new).map(t => t.title)
const deleteTables = this.comparedModelList.filter(t => t.deleted).map(t => t.title)
if (addTables.length) {
await this.addTableMeta(addTables);
await this.addTableMeta(addTables)
}
if (deleteTables.length) {
await this.deleteTableMeta(deleteTables);
await this.deleteTableMeta(deleteTables)
}
},
async recreateTableMeta(table) {
async recreateTableMeta (table) {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'procedureMetaRecreate', {
tn: table
}]);
}])
setTimeout(async () => {
await this.loadModels()
this.$toast.success('Table metadata recreated successfully').goAway(3000);
}, 1000);
this.$toast.success('Table metadata recreated successfully').goAway(3000)
}, 1000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(5000)
}
},
async loadModels() {
async loadModels () {
if (this.dbAliasList[this.dbsTab]) {
this.models = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcProcedureModelsList']);
this.edited = false;
}, 'xcProcedureModelsList'])
this.edited = false
}
},
async loadTableList() {
async loadTableList () {
this.procedures = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'procedureList'])).data.list;
}, 'procedureList'])).data.list
},
async saveModels() {
this.updating = true;
async saveModels () {
this.updating = true
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcProcedureModelsEnable', this.models.filter(m => m.enabled).map(m => m.title)]);
this.$toast.success('Models changes are updated successfully').goAway(3000);
}, 'xcProcedureModelsEnable', this.models.filter(m => m.enabled).map(m => m.title)])
this.$toast.success('Models changes are updated successfully').goAway(3000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(3000);
console.log(e.message);
this.$toast.error('Some error occurred').goAway(3000)
console.log(e.message)
}
this.updating = false;
this.edited = false;
this.updating = false
this.edited = false
}
},
computed: {
...mapGetters({
dbAliasList: 'project/GtrDbAliasList'
}),
enableCountText() {
return this.models ?
`${this.models.filter(m => m.enabled).length}/${this.models.length} enabled`
enableCountText () {
return this.models
? `${this.models.filter(m => m.enabled).length}/${this.models.length} enabled`
: ''
},
isNewOrDeletedModelFound() {
isNewOrDeletedModelFound () {
return this.comparedModelList.some(m => m.new || m.deleted)
},
comparedModelList() {
const res = [];
comparedModelList () {
const res = []
const getPriority = (item) => {
if (item.new) return 2;
if (item.deleted) return 1;
return 0;
if (item.new) {
return 2
}
if (item.deleted) {
return 1
}
return 0
}
if (this.procedures && this.models) {
const tables = this.procedures.filter(t => !isMetaTable(t.procedure_name)).map(t => t.procedure_name);
res.push(...this.models.map(m => {
const i = tables.indexOf(m.title);
const tables = this.procedures.filter(t => !isMetaTable(t.procedure_name)).map(t => t.procedure_name)
res.push(...this.models.map((m) => {
const i = tables.indexOf(m.title)
if (i === -1) {
m.deleted = true;
m.deleted = true
} else {
tables.splice(i, 1);
tables.splice(i, 1)
}
return m;
}));
return m
}))
res.push(...tables.map(t => ({
title: t, new: true
})))
}
res.sort((a, b) => getPriority(b) - getPriority(a))
return res;
return res
}
},
}
}
</script>

178
packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableRelations.vue
View File

@@ -1,8 +1,6 @@
<template>
<div>
<v-toolbar flat height="60" class="toolbar-border-bottom">
<v-text-field
v-model="search"
label="Search"
@@ -11,70 +9,90 @@
outlined
hide-details
prepend-inner-icon="search"
></v-text-field>
/>
<v-spacer></v-spacer>
<x-btn outlined tooltip="Reload list" small @click
color="primary"
@click="loadRelations"
icon="refresh"
btn.class="text-capitalize"
>Reload
<v-spacer />
<x-btn
outlined
tooltip="Reload list"
small
color="primary"
icon="refresh"
btn.class="text-capitalize"
@click="loadRelations"
>
Reload
</x-btn>
<x-btn outlined tooltip="Toggle All" small @click
color="primary"
@click="toggleAll(toggle)"
btn.class="text-capitalize" icon="mdi-check-bold">Toggle All {{ toggle ? 'ON' : 'OFF' }}
<x-btn
outlined
tooltip="Toggle All"
small
color="primary"
btn.class="text-capitalize"
icon="mdi-check-bold"
@click="toggleAll(toggle)"
>
Toggle All {{ toggle ? 'ON' : 'OFF' }}
</x-btn>
<x-btn outlined tooltip="Save Changes"
small
@click="save"
:disabled="!edited"
:loading="updating"
btn.class="text-capitalize"
color="primary" icon="save">Save
<x-btn
outlined
tooltip="Save Changes"
small
:disabled="!edited"
:loading="updating"
btn.class="text-capitalize"
color="primary"
icon="save"
@click="save"
>
Save
</x-btn>
</v-toolbar>
<div class="d-flex justify-center">
<v-skeleton-loader v-if="loading"
type="table"
class="flex-shrink-1"
style="min-width:75%"
></v-skeleton-loader>
<v-data-table dense v-else
class="flex-shrink-1"
style="min-width:75%"
:headers="[{},{},{},{value:'tn'},{value:'rtn'},{}]"
hide-default-header
:items="relations" :search="search"
<v-skeleton-loader
v-if="loading"
type="table"
class="flex-shrink-1"
style="min-width:75%"
/>
<v-data-table
v-else
dense
class="flex-shrink-1"
style="min-width:75%"
:headers="[{},{},{},{value:'tn'},{value:'rtn'},{}]"
hide-default-header
:items="relations"
:search="search"
>
<template v-slot:header="{props:{headers}}">
<template #header>
<thead>
<tr class="text-left caption">
<th>#</th>
<th>Table Name <span class="caption grey--text">({{ selectedCount }})</span></th>
<th>Relation</th>
<th>Parent</th>
<th>Child</th>
<th></th>
</tr>
<tr class="text-left caption">
<th>#</th>
<th>Table Name <span class="caption grey--text">({{ selectedCount }})</span></th>
<th>Relation</th>
<th>Parent</th>
<th>Child</th>
<th />
</tr>
</thead>
</template>
<template v-slot:item="{item,index}">
<template #item="{item,index}">
<tr class="caption">
<td>{{ index + 1 }}</td>
<td>{{ item.relationType === 'hm' ? item.rtn : item.tn }}</td>
<td>{{ item.relationType === 'hm' ? 'HasMany' : 'BelongsTo' }}</td>
<td>{{ item.rtn }}</td>
<td>{{ item.tn }}</td>
<td>
<v-checkbox v-model="item.enabled" @change="$set(item,'edited',true)" class="" dense
hide-details></v-checkbox>
<v-checkbox
v-model="item.enabled"
class=""
dense
hide-details
@change="$set(item,'edited',true)"
/>
</td>
</tr>
</template>
@@ -85,7 +103,8 @@
<script>
export default {
name: "disableOrEnableRelations",
name: 'DisableOrEnableRelations',
props: ['nodes', 'dbAlias'],
data: () => ({
loading: true,
toggle: true,
@@ -93,57 +112,56 @@ export default {
relations: [],
search: ''
}),
computed: {
selectedCount () {
return `${this.relations.filter(({ enabled }) => enabled).length}/${this.relations.length}`
},
edited () {
return this.relations.some(({ edited }) => edited)
}
},
async created () {
await this.loadRelations()
},
methods: {
async loadRelations() {
this.loading = true;
async loadRelations () {
this.loading = true
try {
this.relations = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcRelationsGet']);
}, 'xcRelationsGet'])
} catch (e) {
console.log(e);
console.log(e)
}
this.loading = false;
this.loading = false
},
toggleAll(toggle) {
this.toggle = !toggle;
for (let rel of this.relations) {
this.$set(rel, 'edited', rel.edited || rel.enabled !== toggle);
this.$set(rel, 'enabled', toggle);
toggleAll (toggle) {
this.toggle = !toggle
for (const rel of this.relations) {
this.$set(rel, 'edited', rel.edited || rel.enabled !== toggle)
this.$set(rel, 'enabled', toggle)
}
},
async save() {
const editedRelations = this.relations.filter(({edited}) => edited);
this.updating = true;
async save () {
const editedRelations = this.relations.filter(({ edited }) => edited)
this.updating = true
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcRelationsSet', editedRelations]);
this.$toast.success('Relations enabled/disabled successfully').goAway(3000);
}, 'xcRelationsSet', editedRelations])
this.$toast.success('Relations enabled/disabled successfully').goAway(3000)
for (const rel of this.relations) {
this.$set(rel, 'edited', false)
}
} catch (e) {
this.$toast[e.response?.status === 402 ? 'info' : 'error'](e.message).goAway(3000);
console.log(e.message);
this.$toast[e.response?.status === 402 ? 'info' : 'error'](e.message).goAway(3000)
console.log(e.message)
}
this.updating = false;
this.updating = false
}
},
computed: {
selectedCount() {
return `${this.relations.filter(({enabled}) => enabled).length}/${this.relations.length}`
},
edited() {
return this.relations.some(({edited}) => edited);
}
},
async created() {
await this.loadRelations();
},
props: ['nodes', 'dbAlias']
}
}
</script>

319
packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableTables.vue
View File

@@ -1,6 +1,5 @@
<template>
<v-container fluid v-if="dbAliasList[dbsTab]">
<v-container v-if="dbAliasList[dbsTab]" fluid>
<v-card>
<v-row>
<!-- <v-col cols="12">-->
@@ -9,84 +8,107 @@
<v-col cols="8">
<v-card class="pb-2">
<v-toolbar flat height="50" class="toolbar-border-bottom">
<v-text-field
v-if="dbAliasList && dbAliasList[dbsTab]"
v-model="filter"
dense
hide-details
class="my-2 mx-auto"
:placeholder="`Search '${dbAliasList[dbsTab].connection.database}' models`"
prepend-inner-icon="search"
style="max-width:500px"
outlined
/>
<v-text-field v-if="dbAliasList && dbAliasList[dbsTab]" v-model="filter" dense hide-details
class="my-2 mx-auto"
:placeholder="`Search '${dbAliasList[dbsTab].connection.database}' models`"
prepend-inner-icon="search"
style="max-width:500px"
outlined></v-text-field>
<v-spacer></v-spacer>
<x-btn outlined tooltip="Reload list" small @click="loadModels();loadTableList()"
color="primary"
icon="refresh">Reload
<v-spacer />
<x-btn
outlined
tooltip="Reload list"
small
color="primary"
icon="refresh"
@click="loadModels();loadTableList()"
>
Reload
</x-btn>
<x-btn outlined :loading="updating" :disabled="updating || !edited" tooltip="Save Changes"
small
@click="saveModels()"
color="primary" icon="save">Save
<x-btn
outlined
:loading="updating"
:disabled="updating || !edited"
tooltip="Save Changes"
small
color="primary"
icon="save"
@click="saveModels()"
>
Save
</x-btn>
</v-toolbar>
<div class="d-flex d-100 justify-center">
<v-simple-table dense v-slot:default style="min-width: 400px">
<v-simple-table dense style="min-width: 400px">
<thead>
<tr>
<th>Models <span class="caption ml-1" v-show="!isNewOrDeletedModelFound">({{
enableCountText
}})</span>
</th>
<th>APIs</th>
<th>Actions</th>
<th>Comment</th>
</tr>
<tr>
<th>
Models <span v-show="!isNewOrDeletedModelFound" class="caption ml-1">({{
enableCountText
}})</span>
</th>
<th>APIs</th>
<th>Actions</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr v-for="model in comparedModelList">
<!-- v-if="model.alias.toLowerCase().indexOf(filter.toLowerCase()) > -1">-->
<td>
<v-tooltip bottom>
<template v-slot:activator="{on}">
<span v-on="on">{{ model.alias }}</span>
</template>
<span class="caption">{{ model.title }}</span>
</v-tooltip>
</td>
<td>
<v-checkbox dense :disabled="model.new || model.deleted" @change="edited = true"
v-model="model.enabled"></v-checkbox>
</td>
<td>
<template v-if="model.new">
<tr v-for="model in comparedModelList" :key="model.title">
<!-- v-if="model.alias.toLowerCase().indexOf(filter.toLowerCase()) > -1">-->
<td>
<v-tooltip bottom>
<template #activator="{on}">
<span v-on="on">{{ model.alias }}</span>
</template>
<span class="caption">{{ model.title }}</span>
</v-tooltip>
</td>
<td>
<v-checkbox
v-model="model.enabled"
dense
:disabled="model.new || model.deleted"
@change="edited = true"
/>
</td>
<td>
<template v-if="model.new">
<!-- <x-icon small color="success success" tooltip="Add and sync meta information"-->
<!-- @click="addTableMeta([model.title])">mdi-plus-circle-outline-->
<!-- </x-icon>-->
</template>
<template v-else-if="model.deleted">
</template>
<template v-else-if="model.deleted">
<!-- <x-icon small v-else-if="model.deleted" color="error error" tooltip="Delete meta information"-->
<!-- @click="deleteTableMeta([model.title])">mdi-delete-outline-->
<!-- </x-icon>-->
</template>
<x-icon small v-else color="primary" tooltip="Recreate metadata"
@click="recreateTableMeta(model.title)">mdi-reload
</x-icon>
</template>
<x-icon
v-else
small
color="primary"
tooltip="Recreate metadata"
@click="recreateTableMeta(model.title)"
>
mdi-reload
</x-icon>
</td>
</td>
<td>
<span v-if="model.new"
class="caption success--text">New table found in DB. Yet to be synced.</span>
<span v-else-if="model.deleted" class="caption error--text">This table doesn't exist in DB. Yet to be synced.</span>
<td>
<span
v-if="model.new"
class="caption success--text"
>New table found in DB. Yet to be synced.</span>
<span v-else-if="model.deleted" class="caption error--text">This table doesn't exist in DB. Yet to be synced.</span>
<!-- <span v-else class="caption grey&#45;&#45;text">Recreate metadata.</span>-->
</td>
</tr>
</td>
</tr>
</tbody>
</v-simple-table>
</div>
@@ -94,21 +116,30 @@
</v-col>
<v-col cols="4" style="padding-top:100px">
<div class="d-flex">
<v-spacer></v-spacer>
<v-spacer />
<v-tooltip bottom>
<template v-slot:activator="{on}">
<v-alert dense
v-on="on"
border="left"
colored-border
elevation="2"
color="warning"
v-if="isNewOrDeletedModelFound" type="warning"> Tables metadata <br>is out of sync
<template #activator="{on}">
<v-alert
v-if="isNewOrDeletedModelFound"
dense
border="left"
colored-border
elevation="2"
color="warning"
type="warning"
v-on="on"
>
Tables metadata <br>is out of sync
</v-alert>
<v-alert dense
v-on="on" outlined v-else type="success">Tables metadata is in sync
<v-alert
v-else
dense
outlined
type="success"
v-on="on"
>
Tables metadata is in sync
</v-alert>
</template>
<template v-if="!isNewOrDeletedModelFound">
@@ -119,47 +150,41 @@
Metadata for API creation & management isn't sync with
'{{ dbAliasList[dbsTab].connection.database }}' Database.
</template>
</v-tooltip>
<v-spacer></v-spacer>
<v-spacer />
</div>
<div class="d-flex justify-center" v-if="isNewOrDeletedModelFound">
<div v-if="isNewOrDeletedModelFound" class="d-flex justify-center">
<x-btn
x-large
btn.class="mx-auto primary"
tooltip="Sync metadata"
@click="syncMetadata"
>
<v-icon color="white" class="mr-2 mt-n1">mdi-database-sync</v-icon>
<v-icon color="white" class="mr-2 mt-n1">
mdi-database-sync
</v-icon>
Sync Now
</x-btn>
</div>
</v-col>
</v-row>
</v-card>
</v-container>
</template>
<script>
import {mapGetters} from "vuex";
import {isMetaTable} from "@/helpers/xutils";
import XIcon from "@/components/global/xIcon";
import XBtn from "@/components/global/xBtn";
import DisableOrEnableRelations from "./disableOrEnableRelations";
import XcMeta from "../../settings/xcMeta";
import DisableOrEnableViews from "./disableOrEnableViews";
import DisableOrEnableFunctions from "./disableOrEnableFunctions";
import DisableOrEnableProcedures from "./disableOrEnableProcedures";
import { mapGetters } from 'vuex'
import { isMetaTable } from '@/helpers/xutils'
import XIcon from '@/components/global/xIcon'
import XBtn from '@/components/global/xBtn'
export default {
name: "disableOrEnableTables",
name: 'DisableOrEnableTables',
components: {
DisableOrEnableProcedures,
DisableOrEnableFunctions, DisableOrEnableViews, XcMeta, DisableOrEnableRelations, XBtn, XIcon
XBtn,
XIcon
},
props: ['nodes', 'db'],
data: () => ({
edited: false,
models: null,
@@ -168,141 +193,139 @@ export default {
filter: '',
tables: null
}),
props: ['nodes', 'db'],
async mounted() {
await this.loadModels();
await this.loadTableList();
async mounted () {
await this.loadModels()
await this.loadTableList()
},
methods: {
async addTableMeta(tables) {
async addTableMeta (tables) {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'tableMetaCreate', {
tableNames: tables//this.comparedModelList.filter(t => t.new).map(t=>t.title)
}]);
tableNames: tables// this.comparedModelList.filter(t => t.new).map(t=>t.title)
}])
setTimeout(async () => {
await this.loadModels()
this.$toast.success('Table metadata added successfully').goAway(3000);
}, 1000);
this.$toast.success('Table metadata added successfully').goAway(3000)
}, 1000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(5000)
}
},
async deleteTableMeta(tables) {
async deleteTableMeta (tables) {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'tableMetaDelete', {
tableNames: tables
}]);
}])
setTimeout(async () => {
await this.loadModels()
this.$toast.success('Table metadata deleted successfully').goAway(3000);
}, 1000);
this.$toast.success('Table metadata deleted successfully').goAway(3000)
}, 1000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(5000)
}
},
async syncMetadata() {
const addTables = this.comparedModelList.filter(t => t.new).map(t => t.title);
const deleteTables = this.comparedModelList.filter(t => t.deleted).map(t => t.title);
async syncMetadata () {
const addTables = this.comparedModelList.filter(t => t.new).map(t => t.title)
const deleteTables = this.comparedModelList.filter(t => t.deleted).map(t => t.title)
if (addTables.length) {
await this.addTableMeta(addTables);
await this.addTableMeta(addTables)
}
if (deleteTables.length) {
await this.deleteTableMeta(deleteTables);
await this.deleteTableMeta(deleteTables)
}
},
async recreateTableMeta(table) {
async recreateTableMeta (table) {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'tableMetaRecreate', {
tn: table
}]);
}])
setTimeout(async () => {
await this.loadModels()
this.$toast.success('Table metadata recreated successfully').goAway(3000);
}, 1000);
this.$toast.success('Table metadata recreated successfully').goAway(3000)
}, 1000)
} catch (e) {
this.$toast[e.response?.status === 402 ? 'info' : 'error'](e.message).goAway(3000);
this.$toast[e.response?.status === 402 ? 'info' : 'error'](e.message).goAway(3000)
}
},
async loadModels() {
async loadModels () {
if (this.dbAliasList[this.dbsTab]) {
this.models = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcTableModelsList']);
this.edited = false;
}, 'xcTableModelsList'])
this.edited = false
}
},
async loadTableList() {
async loadTableList () {
this.tables = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'tableList',{force:true}])).data.list;
}, 'tableList', { force: true }])).data.list
},
async saveModels() {
this.updating = true;
async saveModels () {
this.updating = true
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcTableModelsEnable', this.models.filter(m => m.enabled).map(m => m.title)]);
this.$toast.success('Models changes are updated successfully').goAway(3000);
}, 'xcTableModelsEnable', this.models.filter(m => m.enabled).map(m => m.title)])
this.$toast.success('Models changes are updated successfully').goAway(3000)
} catch (e) {
this.$toast[e.response?.status === 402 ? 'info' : 'error'](e.message).goAway(3000);
console.log(e.message);
this.$toast[e.response?.status === 402 ? 'info' : 'error'](e.message).goAway(3000)
console.log(e.message)
}
this.updating = false;
this.edited = false;
this.updating = false
this.edited = false
}
},
computed: {
...mapGetters({
dbAliasList: 'project/GtrDbAliasList'
}),
enableCountText() {
return this.models ?
`${this.models.filter(m => m.enabled).length}/${this.models.length} enabled`
enableCountText () {
return this.models
? `${this.models.filter(m => m.enabled).length}/${this.models.length} enabled`
: ''
},
isNewOrDeletedModelFound() {
isNewOrDeletedModelFound () {
return this.comparedModelList.some(m => m.new || m.deleted)
},
comparedModelList() {
const res = [];
comparedModelList () {
const res = []
const getPriority = (item) => {
if (item.new) return 2;
if (item.deleted) return 1;
return 0;
if (item.new) { return 2 }
if (item.deleted) { return 1 }
return 0
}
if (this.tables && this.models) {
const tables = this.tables.filter(t => !isMetaTable(t.tn)).map(t => t.tn);
res.push(...this.models.map(m => {
const i = tables.indexOf(m.title);
const tables = this.tables.filter(t => !isMetaTable(t.tn)).map(t => t.tn)
res.push(...this.models.map((m) => {
const i = tables.indexOf(m.title)
if (i === -1) {
m.deleted = true;
m.deleted = true
} else {
tables.splice(i, 1);
tables.splice(i, 1)
}
return m;
}));
return m
}))
res.push(...tables.map(t => ({
title: t, new: true, alias: t
})))
}
res.sort((a, b) => getPriority(b) - getPriority(a))
return res;
return res
}
}
}

313
packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableViews.vue
View File

@@ -2,83 +2,112 @@
<v-container fluid>
<v-card>
<v-row>
<!-- <v-col cols="12">-->
<!-- <h4 class="text-center my-2 grey&#45;&#45;text text&#45;&#45;darken-2 title"> Metadata Management-->
<!-- </h4></v-col>-->
<!-- <v-col cols="12">-->
<!-- <h4 class="text-center my-2 grey&#45;&#45;text text&#45;&#45;darken-2 title"> Metadata Management-->
<!-- </h4></v-col>-->
<v-col cols="8">
<v-card class="pb-2">
<v-toolbar flat height="50" class="toolbar-border-bottom">
<v-text-field
v-if="dbAliasList && db"
v-model="filter"
dense
hide-details
class="my-2 mx-auto"
:placeholder="`Search '${db.connection.database}' models`"
prepend-inner-icon="search"
style="max-width:500px"
outlined
/>
<v-text-field v-if="dbAliasList && db" v-model="filter" dense hide-details
class="my-2 mx-auto"
:placeholder="`Search '${db.connection.database}' models`"
prepend-inner-icon="search"
style="max-width:500px"
outlined></v-text-field>
<v-spacer></v-spacer>
<x-btn outlined tooltip="Reload list" small @click="loadModels();loadTableList()"
color="primary"
icon="refresh">Reload
<v-spacer />
<x-btn
outlined
tooltip="Reload list"
small
color="primary"
icon="refresh"
@click="loadModels();loadTableList()"
>
Reload
</x-btn>
<x-btn outlined :loading="updating" :disabled="updating || !edited" tooltip="Save Changes"
small
@click="saveModels()"
color="primary" icon="save">Save
<x-btn
outlined
:loading="updating"
:disabled="updating || !edited"
tooltip="Save Changes"
small
color="primary"
icon="save"
@click="saveModels()"
>
Save
</x-btn>
</v-toolbar>
<div class="d-flex d-100 justify-center">
<v-simple-table dense v-slot:default style="min-width: 400px">
<v-simple-table dense style="min-width: 400px">
<thead>
<tr>
<th>Models <span class="caption ml-1" v-show="!isNewOrDeletedModelFound">({{
enableCountText
}})</span>
</th>
<th>APIs</th>
<th>Actions</th>
<th>Comment</th>
</tr>
<tr>
<th>
Models <span v-show="!isNewOrDeletedModelFound" class="caption ml-1">({{
enableCountText
}})</span>
</th>
<th>APIs</th>
<th>Actions</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr v-for="model in comparedModelList"
v-if="model.title.toLowerCase().indexOf(filter.toLowerCase()) > -1">
<td>{{ model.title }}</td>
<td>
<v-checkbox dense :disabled="model.new || model.deleted" @change="edited = true"
v-model="model.enabled"></v-checkbox>
</td>
<td>
<template v-if="model.new">
<!-- <x-icon small color="success success" tooltip="Add and sync meta information"-->
<!-- @click="addTableMeta([model.title])">mdi-plus-circle-outline-->
<!-- </x-icon>-->
</template>
<template v-else-if="model.deleted">
<!-- <x-icon small v-else-if="model.deleted" color="error error" tooltip="Delete meta information"-->
<!-- @click="deleteTableMeta([model.title])">mdi-delete-outline-->
<!-- </x-icon>-->
</template>
<x-icon small v-else color="primary" tooltip="Recreate metadata"
@click="recreateTableMeta(model.title)">mdi-reload
</x-icon>
<template
v-for="model in comparedModelList"
>
<tr
v-if="model.title.toLowerCase().indexOf(filter.toLowerCase()) > -1"
:key="model.title"
>
<td>{{ model.title }}</td>
<td>
<v-checkbox
v-model="model.enabled"
dense
:disabled="model.new || model.deleted"
@change="edited = true"
/>
</td>
<td>
<template v-if="model.new">
<!-- <x-icon small color="success success" tooltip="Add and sync meta information"-->
<!-- @click="addTableMeta([model.title])">mdi-plus-circle-outline-->
<!-- </x-icon>-->
</template>
<template v-else-if="model.deleted">
<!-- <x-icon small v-else-if="model.deleted" color="error error" tooltip="Delete meta information"-->
<!-- @click="deleteTableMeta([model.title])">mdi-delete-outline-->
<!-- </x-icon>-->
</template>
<x-icon
v-else
small
color="primary"
tooltip="Recreate metadata"
@click="recreateTableMeta(model.title)"
>
mdi-reload
</x-icon>
</td>
</td>
<td>
<span v-if="model.new"
class="caption success--text">New table found in DB. Yet to be synced.</span>
<span v-else-if="model.deleted" class="caption error--text">This table doesn't exist in DB. Yet to be synced.</span>
<!-- <span v-else class="caption grey&#45;&#45;text">Recreate metadata.</span>-->
</td>
</tr>
<td>
<span
v-if="model.new"
class="caption success--text"
>New table found in DB. Yet to be synced.</span>
<span v-else-if="model.deleted" class="caption error--text">This table doesn't exist in DB. Yet to be synced.</span>
<!-- <span v-else class="caption grey&#45;&#45;text">Recreate metadata.</span>-->
</td>
</tr>
</template>
</tbody>
</v-simple-table>
</div>
@@ -86,21 +115,30 @@
</v-col>
<v-col cols="4" style="padding-top:100px">
<div class="d-flex">
<v-spacer></v-spacer>
<v-spacer />
<v-tooltip bottom>
<template v-slot:activator="{on}">
<v-alert dense
v-on="on"
border="left"
colored-border
elevation="2"
color="warning"
v-if="isNewOrDeletedModelFound" type="warning"> Views metadata <br>is out of sync
<template #activator="{on}">
<v-alert
v-if="isNewOrDeletedModelFound"
dense
border="left"
colored-border
elevation="2"
color="warning"
type="warning"
v-on="on"
>
Views metadata <br>is out of sync
</v-alert>
<v-alert dense
v-on="on" outlined v-else type="success">Views metadata is in sync
<v-alert
v-else
dense
outlined
type="success"
v-on="on"
>
Views metadata is in sync
</v-alert>
</template>
<template v-if="!isNewOrDeletedModelFound">
@@ -111,23 +149,22 @@
Metadata for API creation & management isn't sync with
'{{ db.connection.database }}' Database.
</template>
</v-tooltip>
<v-spacer></v-spacer>
<v-spacer />
</div>
<div class="d-flex justify-center" v-if="isNewOrDeletedModelFound">
<div v-if="isNewOrDeletedModelFound" class="d-flex justify-center">
<x-btn
x-large
btn.class="mx-auto primary"
tooltip="Sync metadata"
@click="syncMetadata"
>
<v-icon color="white" class="mr-2 mt-n1">mdi-database-sync</v-icon>
<v-icon color="white" class="mr-2 mt-n1">
mdi-database-sync
</v-icon>
Sync Now
</x-btn>
</div>
</v-col>
</v-row>
</v-card>
@@ -135,11 +172,12 @@
</template>
<script>
import {mapGetters} from "vuex";
import {isMetaTable} from "@/helpers/xutils";
import { mapGetters } from 'vuex'
import { isMetaTable } from '@/helpers/xutils'
export default {
name: "disableOrEnableViews",
name: 'DisableOrEnableViews',
props: ['nodes', 'db'],
data: () => ({
edited: false,
models: null,
@@ -148,142 +186,141 @@ export default {
filter: '',
views: null
}),
props: ['nodes', 'db'],
async mounted() {
await this.loadModels();
await this.loadTableList();
async mounted () {
await this.loadModels()
await this.loadTableList()
},
methods: {
async addTableMeta(tables) {
async addTableMeta (tables) {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'viewMetaCreate', {
viewNames: tables//this.comparedModelList.filter(t => t.new).map(t=>t.title)
}]);
viewNames: tables// this.comparedModelList.filter(t => t.new).map(t=>t.title)
}])
setTimeout(async () => {
await this.loadModels()
this.$toast.success('Table metadata added successfully').goAway(3000);
}, 1000);
this.$toast.success('Table metadata added successfully').goAway(3000)
}, 1000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(5000)
}
},
async deleteTableMeta(tables) {
async deleteTableMeta (tables) {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'viewMetaDelete', {
tableNames: tables
}]);
}])
setTimeout(async () => {
await this.loadModels()
this.$toast.success('Table metadata deleted successfully').goAway(3000);
}, 1000);
this.$toast.success('Table metadata deleted successfully').goAway(3000)
}, 1000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(5000)
}
},
async syncMetadata() {
const addTables = this.comparedModelList.filter(t => t.new).map(t => t.title);
const deleteTables = this.comparedModelList.filter(t => t.deleted).map(t => t.title);
async syncMetadata () {
const addTables = this.comparedModelList.filter(t => t.new).map(t => t.title)
const deleteTables = this.comparedModelList.filter(t => t.deleted).map(t => t.title)
if (addTables.length) {
await this.addTableMeta(addTables);
await this.addTableMeta(addTables)
}
if (deleteTables.length) {
await this.deleteTableMeta(deleteTables);
await this.deleteTableMeta(deleteTables)
}
},
async recreateTableMeta(table) {
async recreateTableMeta (table) {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'viewMetaRecreate', {
tn: table
}]);
}])
setTimeout(async () => {
await this.loadModels()
this.$toast.success('Table metadata recreated successfully').goAway(3000);
}, 1000);
this.$toast.success('Table metadata recreated successfully').goAway(3000)
}, 1000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(5000)
}
},
async loadModels() {
async loadModels () {
if (this.dbAliasList[this.dbsTab]) {
this.models = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcViewModelsList']);
this.edited = false;
}, 'xcViewModelsList'])
this.edited = false
}
},
async loadTableList() {
async loadTableList () {
this.views = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'viewList'])).data.list;
}, 'viewList'])).data.list
},
async saveModels() {
this.updating = true;
async saveModels () {
this.updating = true
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcViewModelsEnable', this.models.filter(m => m.enabled).map(m => m.title)]);
this.$toast.success('Models changes are updated successfully').goAway(3000);
}, 'xcViewModelsEnable', this.models.filter(m => m.enabled).map(m => m.title)])
this.$toast.success('Models changes are updated successfully').goAway(3000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(3000);
console.log(e.message);
this.$toast.error('Some error occurred').goAway(3000)
console.log(e.message)
}
this.updating = false;
this.edited = false;
this.updating = false
this.edited = false
}
},
computed: {
...mapGetters({
dbAliasList: 'project/GtrDbAliasList'
}),
enableCountText() {
return this.models ?
`${this.models.filter(m => m.enabled).length}/${this.models.length} enabled`
enableCountText () {
return this.models
? `${this.models.filter(m => m.enabled).length}/${this.models.length} enabled`
: ''
},
isNewOrDeletedModelFound() {
isNewOrDeletedModelFound () {
return this.comparedModelList.some(m => m.new || m.deleted)
},
comparedModelList() {
const res = [];
comparedModelList () {
const res = []
const getPriority = (item) => {
if (item.new) return 2;
if (item.deleted) return 1;
return 0;
if (item.new) { return 2 }
if (item.deleted) { return 1 }
return 0
}
if (this.views && this.models) {
const tables = this.views.filter(t => !isMetaTable(t.view_name)).map(t => t.view_name);
res.push(...this.models.map(m => {
const i = tables.indexOf(m.title);
const tables = this.views.filter(t => !isMetaTable(t.view_name)).map(t => t.view_name)
res.push(...this.models.map((m) => {
const i = tables.indexOf(m.title)
if (i === -1) {
m.deleted = true;
m.deleted = true
} else {
tables.splice(i, 1);
tables.splice(i, 1)
}
return m;
}));
return m
}))
res.push(...tables.map(t => ({
title: t, new: true
})))
}
res.sort((a, b) => getPriority(b) - getPriority(a))
return res;
return res
}
},
}
}
</script>

158
packages/nc-gui/components/project/projectMetadata/uiAcl/toggleFunctionUIAcl.vue
View File

@@ -1,90 +1,110 @@
<template>
<v-container fluid v-if="db">
<v-container v-if="db" fluid>
<v-card>
<v-card class="pb-2">
<v-toolbar flat height="50" class="toolbar-border-bottom">
<v-text-field v-if=" db" v-model="filter" dense hide-details
class="my-2 mx-auto search-field"
:placeholder="`Search '${db.connection.database}' models`"
style="max-width:300px"
outlined>
<template v-slot:prepend-inner>
<v-icon small>search</v-icon>
<v-text-field
v-if=" db"
v-model="filter"
dense
hide-details
class="my-2 mx-auto search-field"
:placeholder="`Search '${db.connection.database}' models`"
style="max-width:300px"
outlined
>
<template #prepend-inner>
<v-icon small>
search
</v-icon>
</template>
</v-text-field>
<v-spacer></v-spacer>
<x-btn outlined tooltip="Reload list" small @click="loadFunctionList()"
color="primary"
icon="refresh">Reload
<v-spacer />
<x-btn
outlined
tooltip="Reload list"
small
color="primary"
icon="refresh"
@click="loadFunctionList()"
>
Reload
</x-btn>
<x-btn outlined :loading="updating" :disabled="updating || !edited" tooltip="Save Changes"
small
@click="save()"
color="primary" icon="save">Save
<x-btn
outlined
:loading="updating"
:disabled="updating || !edited"
tooltip="Save Changes"
small
color="primary"
icon="save"
@click="save()"
>
Save
</x-btn>
</v-toolbar>
<div class="d-flex d-100 justify-center">
<v-simple-table dense v-slot:default style="min-width: 400px">
<v-simple-table dense style="min-width: 400px">
<thead>
<tr>
<th>Models
</th>
<th v-for="role in roles" :key="role">{{ role }}</th>
</tr>
<tr>
<th>
Models
</th>
<th v-for="role in roles" :key="role">
{{ role }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="functionObj in functions"
v-if="functionObj.function_name.toLowerCase().indexOf(filter.toLowerCase()) > -1"
:key="functionObj.function_name">
<td>{{ functionObj.function_name }}</td>
<td v-for="role in roles" :key="`${functionObj.function_name}-${role}`">
<v-tooltip bottom>
<template v-slot:activator="{on}">
<div
v-on="on">
<v-checkbox dense
:true-value="false"
:false-value="true"
@change="$set(functionObj,'edited',true)"
v-model="functionObj.disabled[role]"></v-checkbox>
</div>
</template>
<template
v-for="functionObj in functions"
>
<tr
v-if="functionObj.function_name.toLowerCase().indexOf(filter.toLowerCase()) > -1"
:key="functionObj.function_name"
>
<td>{{ functionObj.function_name }}</td>
<td v-for="role in roles" :key="`${functionObj.function_name}-${role}`">
<v-tooltip bottom>
<template #activator="{on}">
<div
v-on="on"
>
<v-checkbox
v-model="functionObj.disabled[role]"
dense
:true-value="false"
:false-value="true"
@change="$set(functionObj,'edited',true)"
/>
</div>
</template>
<span v-if="functionObj.disabled[role]">Click to hide '{{
functionObj.function_name
}}' for Role:{{ role }} in UI dashboard</span>
<span v-else>Click to make '{{ functionObj.function_name }}' visible for Role:{{ role }} in UI dashboard</span>
</v-tooltip>
</td>
</tr>
<span v-if="functionObj.disabled[role]">Click to hide '{{
functionObj.function_name
}}' for Role:{{ role }} in UI dashboard</span>
<span v-else>Click to make '{{ functionObj.function_name }}' visible for Role:{{ role }} in UI dashboard</span>
</v-tooltip>
</td>
</tr>
</template>
</tbody>
</v-simple-table>
</div>
</v-card>
</v-card>
</v-container>
</template>
<script>
import {mapGetters} from "vuex";
import { mapGetters } from 'vuex'
export default {
name: "toggleFunctionUiAcl",
name: 'ToggleFunctionUiAcl',
components: {},
props: ['nodes', 'db'],
data: () => ({
models: null,
updating: false,
@@ -92,20 +112,19 @@ export default {
filter: '',
functions: null
}),
props: ['nodes', 'db'],
async mounted() {
await this.loadFunctionList();
async mounted () {
await this.loadFunctionList()
},
methods: {
async loadFunctionList() {
async loadFunctionList () {
this.functions = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcVisibilityMetaGet', {
type: 'function'
}]));
}]))
},
async save() {
async save () {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
@@ -113,7 +132,7 @@ export default {
}, 'xcVisibilityMetaSet', {
type: 'function',
disableList: this.functions.filter(t => t.edited)
}]);
}])
this.$toast.success('Updated UI ACL for tables successfully').goAway(3000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(3000)
@@ -124,11 +143,11 @@ export default {
...mapGetters({
dbAliasList: 'project/GtrDbAliasList'
}),
edited() {
edited () {
return this.functions && this.functions.length && this.functions.some(t => t.edited)
},
roles() {
return this.functions && this.functions.length ? Object.keys(this.functions[0].disabled) : [];
roles () {
return this.functions && this.functions.length ? Object.keys(this.functions[0].disabled) : []
}
}
}
@@ -144,7 +163,6 @@ export default {
border-right: 1px solid #7f828b33;
}
.search-field.v-text-field > .v-input__control, .search-field.v-text-field > .v-input__control > .v-input__slot {
min-height: auto;

155
packages/nc-gui/components/project/projectMetadata/uiAcl/toggleProcedureUIAcl.vue
View File

@@ -1,87 +1,110 @@
<template>
<v-container fluid v-if="db">
<v-container v-if="db" fluid>
<v-card>
<v-card class="pb-2">
<v-toolbar flat height="50" class="toolbar-border-bottom">
<v-text-field v-if=" db" v-model="filter" dense hide-details
class="my-2 mx-auto search-field"
:placeholder="`Search '${db.connection.database}' models`"
style="max-width:300px"
outlined>
<template v-slot:prepend-inner>
<v-icon small>search</v-icon>
<v-text-field
v-if=" db"
v-model="filter"
dense
hide-details
class="my-2 mx-auto search-field"
:placeholder="`Search '${db.connection.database}' models`"
style="max-width:300px"
outlined
>
<template #prepend-inner>
<v-icon small>
search
</v-icon>
</template>
</v-text-field>
<v-spacer></v-spacer>
<x-btn outlined tooltip="Reload list" small @click="loadFunctionList()"
color="primary"
icon="refresh">Reload
<v-spacer />
<x-btn
outlined
tooltip="Reload list"
small
color="primary"
icon="refresh"
@click="loadFunctionList()"
>
Reload
</x-btn>
<x-btn outlined :loading="updating" :disabled="updating || !edited" tooltip="Save Changes"
small
@click="save()"
color="primary" icon="save">Save
<x-btn
outlined
:loading="updating"
:disabled="updating || !edited"
tooltip="Save Changes"
small
color="primary"
icon="save"
@click="save()"
>
Save
</x-btn>
</v-toolbar>
<div class="d-flex d-100 justify-center">
<v-simple-table dense v-slot:default style="min-width: 400px">
<v-simple-table dense style="min-width: 400px">
<thead>
<tr>
<th>Models
</th>
<th v-for="role in roles" :key="role">{{ role }}</th>
</tr>
<tr>
<th>
Models
</th>
<th v-for="role in roles" :key="role">
{{ role }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="procedureObj in procedures"
v-if="procedureObj.procedure_name.toLowerCase().indexOf(filter.toLowerCase()) > -1" :key="procedureObj.procedure_name">
<td>{{ procedureObj.procedure_name }}</td>
<td v-for="role in roles" :key="`${procedureObj.procedure_name}-${role}`">
<v-tooltip bottom>
<template v-slot:activator="{on}">
<div
v-on="on">
<v-checkbox dense
:true-value="false"
:false-value="true"
@change="$set(procedureObj,'edited',true)"
v-model="procedureObj.disabled[role]"></v-checkbox>
</div>
</template>
<template
v-for="procedureObj in procedures"
>
<tr
v-if="procedureObj.procedure_name.toLowerCase().indexOf(filter.toLowerCase()) > -1"
:key="procedureObj.procedure_name"
>
<td>{{ procedureObj.procedure_name }}</td>
<td v-for="role in roles" :key="`${procedureObj.procedure_name}-${role}`">
<v-tooltip bottom>
<template #activator="{on}">
<div
v-on="on"
>
<v-checkbox
v-model="procedureObj.disabled[role]"
dense
:true-value="false"
:false-value="true"
@change="$set(procedureObj,'edited',true)"
/>
</div>
</template>
<span v-if="procedureObj.disabled[role]">Click to hide '{{ procedureObj.procedure_name }}' for Role:{{ role }} in UI dashboard</span>
<span v-else>Click to make '{{ procedureObj.procedure_name }}' visible for Role:{{ role }} in UI dashboard</span>
</v-tooltip>
</td>
</tr>
<span v-if="procedureObj.disabled[role]">Click to hide '{{ procedureObj.procedure_name }}' for Role:{{
role
}} in UI dashboard</span>
<span v-else>Click to make '{{ procedureObj.procedure_name }}' visible for Role:{{ role }} in UI dashboard</span>
</v-tooltip>
</td>
</tr>
</template>
</tbody>
</v-simple-table>
</div>
</v-card>
</v-card>
</v-container>
</template>
<script>
import {mapGetters} from "vuex";
import { mapGetters } from 'vuex'
export default {
name: "toggleProcedureUiAcl",
name: 'ToggleProcedureUiAcl',
components: {},
props: ['nodes', 'db'],
data: () => ({
models: null,
updating: false,
@@ -89,20 +112,19 @@ export default {
filter: '',
procedures: null
}),
props: ['nodes','db'],
async mounted() {
await this.loadFunctionList();
async mounted () {
await this.loadFunctionList()
},
methods: {
async loadFunctionList() {
async loadFunctionList () {
this.procedures = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcVisibilityMetaGet', {
type: 'procedure'
}]));
}]))
},
async save() {
async save () {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
@@ -110,7 +132,7 @@ export default {
}, 'xcVisibilityMetaSet', {
type: 'procedure',
disableList: this.procedures.filter(t => t.edited)
}]);
}])
this.$toast.success('Updated UI ACL for tables successfully').goAway(3000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(3000)
@@ -121,11 +143,11 @@ export default {
...mapGetters({
dbAliasList: 'project/GtrDbAliasList'
}),
edited() {
edited () {
return this.procedures && this.procedures.length && this.procedures.some(t => t.edited)
},
roles() {
return this.procedures && this.procedures.length ? Object.keys(this.procedures[0].disabled) : [];
roles () {
return this.procedures && this.procedures.length ? Object.keys(this.procedures[0].disabled) : []
}
}
}
@@ -141,7 +163,6 @@ export default {
border-right: 1px solid #7f828b33;
}
.search-field.v-text-field > .v-input__control, .search-field.v-text-field > .v-input__control > .v-input__slot {
min-height: auto;

159
packages/nc-gui/components/project/projectMetadata/uiAcl/toggleRelationsUIAcl.vue
View File

@@ -1,98 +1,111 @@
<template>
<v-container fluid v-if="db">
<v-container v-if="db" fluid>
<v-card>
<v-card class="pb-2">
<v-toolbar flat height="50" class="toolbar-border-bottom">
<v-text-field v-if="db" v-model="filter" dense hide-details
class="my-2 mx-auto search-field"
:placeholder="`Search '${db.connection.database}' models`"
style="max-width:300px"
outlined>
<template v-slot:prepend-inner>
<v-icon small>search</v-icon>
<v-text-field
v-if="db"
v-model="filter"
dense
hide-details
class="my-2 mx-auto search-field"
:placeholder="`Search '${db.connection.database}' models`"
style="max-width:300px"
outlined
>
<template #prepend-inner>
<v-icon small>
search
</v-icon>
</template>
</v-text-field>
<v-spacer></v-spacer>
<x-btn outlined tooltip="Reload list" small @click="loadViewList()"
color="primary"
icon="refresh">Reload
<v-spacer />
<x-btn
outlined
tooltip="Reload list"
small
color="primary"
icon="refresh"
@click="loadViewList()"
>
Reload
</x-btn>
<x-btn outlined :loading="updating" :disabled="updating || !edited" tooltip="Save Changes"
small
@click="save()"
color="primary" icon="save">Save
<x-btn
outlined
:loading="updating"
:disabled="updating || !edited"
tooltip="Save Changes"
small
color="primary"
icon="save"
@click="save()"
>
Save
</x-btn>
</v-toolbar>
<div class="d-flex d-100 justify-center">
<v-simple-table dense v-slot:default style="min-width: 400px">
<v-simple-table dense style="min-width: 400px">
<thead>
<tr>
<th>Table Name</th>
<th>Relation</th>
<th>Parent</th>
<th>Child</th>
<th v-for="role in roles" :key="role">{{ role }}</th>
</tr>
<tr>
<th>Table Name</th>
<th>Relation</th>
<th>Parent</th>
<th>Child</th>
<th v-for="role in roles" :key="role">
{{ role }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(relation,i) in relations" :key="i"
>
<tr
v-for="(relation,i) in relations"
:key="i"
>
<td>{{ relation.relationType === 'hm' ? relation.rtn : relation.tn }}</td>
<td>{{ relation.relationType === 'hm' ? 'HasMany' : 'BelongsTo' }}</td>
<td>{{ relation.rtn }}</td>
<td>{{ relation.tn }}</td>
<td v-for="role in roles" :key="`${i}-${role}`">
<v-tooltip bottom>
<template #activator="{on}">
<div
v-on="on"
>
<v-checkbox
v-model="relation.disabled[role]"
dense
:true-value="false"
:false-value="true"
@change="$set(relation,'edited',true)"
/>
</div>
</template>
<td>{{ relation.relationType === 'hm' ? relation.rtn : relation.tn }}</td>
<td>{{ relation.relationType === 'hm' ? 'HasMany' : 'BelongsTo' }}</td>
<td>{{ relation.rtn }}</td>
<td>{{ relation.tn }}</td>
<td v-for="role in roles" :key="`${i}-${role}`">
<v-tooltip bottom>
<template v-slot:activator="{on}">
<div
v-on="on">
<v-checkbox dense
:true-value="false"
:false-value="true"
@change="$set(relation,'edited',true)"
v-model="relation.disabled[role]"></v-checkbox>
</div>
</template>
<!-- <span v-if="relation.disabled[role]">Click to hide '{{ relation.relation_name }}' for Role:{{ role }} in UI dashboard</span>
<!-- <span v-if="relation.disabled[role]">Click to hide '{{ relation.relation_name }}' for Role:{{ role }} in UI dashboard</span>
<span v-else>Click to make '{{ relation.relation_name }}' visible for Role:{{
role
}} in UI dashboard</span>-->
</v-tooltip>
</td>
</tr>
</v-tooltip>
</td>
</tr>
</tbody>
</v-simple-table>
</div>
</v-card>
</v-card>
</v-container>
</template>
<script>
import {mapGetters} from "vuex";
import { mapGetters } from 'vuex'
export default {
name: "toggleRelationsUiAcl",
name: 'ToggleRelationsUiAcl',
components: {},
props: ['nodes', 'db'],
data: () => ({
models: null,
updating: false,
@@ -100,20 +113,19 @@ export default {
filter: '',
relations: null
}),
props: ['nodes','db'],
async mounted() {
await this.loadViewList();
async mounted () {
await this.loadViewList()
},
methods: {
async loadViewList() {
async loadViewList () {
this.relations = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcVisibilityMetaGet', {
type: 'relation'
}]));
}]))
},
async save() {
async save () {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
@@ -121,7 +133,7 @@ export default {
}, 'xcVisibilityMetaSet', {
type: 'relation',
disableList: this.relations.filter(t => t.edited)
}]);
}])
this.$toast.success('Updated UI ACL for tables successfully').goAway(3000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(3000)
@@ -132,11 +144,11 @@ export default {
...mapGetters({
dbAliasList: 'project/GtrDbAliasList'
}),
edited() {
edited () {
return this.relations && this.relations.length && this.relations.some(t => t.edited)
},
roles() {
return this.relations && this.relations.length ? Object.keys(this.relations[0].disabled) : [];
roles () {
return this.relations && this.relations.length ? Object.keys(this.relations[0].disabled) : []
}
}
}
@@ -152,7 +164,6 @@ export default {
border-right: 1px solid #7f828b33;
}
.search-field.v-text-field > .v-input__control, .search-field.v-text-field > .v-input__control > .v-input__slot {
min-height: auto;

171
packages/nc-gui/components/project/projectMetadata/uiAcl/toggleTableUIAcl.vue
View File

@@ -1,96 +1,117 @@
<template>
<v-container fluid v-if="db">
<v-container v-if="db" fluid>
<v-card>
<v-card class="pb-2">
<v-toolbar flat height="50" class="toolbar-border-bottom">
<v-text-field v-if="db" v-model="filter" dense hide-details
class="my-2 mx-auto search-field"
:placeholder="`Search '${db.connection.database}' models`"
style="max-width:300px"
outlined>
<template v-slot:prepend-inner>
<v-icon small>search</v-icon>
<v-text-field
v-if="db"
v-model="filter"
dense
hide-details
class="my-2 mx-auto search-field"
:placeholder="`Search '${db.connection.database}' models`"
style="max-width:300px"
outlined
>
<template #prepend-inner>
<v-icon small>
search
</v-icon>
</template>
</v-text-field>
<v-spacer></v-spacer>
<x-btn outlined tooltip="Reload list" small @click="loadTableList()"
color="primary"
icon="refresh">Reload
<v-spacer />
<x-btn
outlined
tooltip="Reload list"
small
color="primary"
icon="refresh"
@click="loadTableList()"
>
Reload
</x-btn>
<x-btn outlined :loading="updating" :disabled="updating || !edited" tooltip="Save Changes"
small
@click="save()"
color="primary" icon="save">Save
<x-btn
outlined
:loading="updating"
:disabled="updating || !edited"
tooltip="Save Changes"
small
color="primary"
icon="save"
@click="save()"
>
Save
</x-btn>
</v-toolbar>
<div class="d-flex d-100 justify-center">
<v-simple-table dense v-slot:default style="min-width: 400px">
<v-simple-table dense style="min-width: 400px">
<thead>
<tr>
<th>Models
</th>
<th v-for="role in roles" :key="role">{{ role }}</th>
</tr>
<tr>
<th>
Models
</th>
<th v-for="role in roles" :key="role">
{{ role }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="table in tables"
v-if="table._tn.toLowerCase().indexOf(filter.toLowerCase()) > -1" :key="table.tn">
<td>
<v-tooltip bottom>
<template v-slot:activator="{on}">
<span v-on="on">{{ table._tn }}</span>
</template>
<span class="caption">{{ table.tn }}</span>
</v-tooltip>
</td>
<td v-for="role in roles" :key="`${table.tn}-${role}`">
<v-tooltip bottom>
<template v-slot:activator="{on}">
<div
v-on="on">
<v-checkbox dense
:true-value="false"
:false-value="true"
@change="$set(table,'edited',true)"
v-model="table.disabled[role]"></v-checkbox>
</div>
</template>
<template
v-for="table in tables"
>
<tr
v-if="table._tn.toLowerCase().indexOf(filter.toLowerCase()) > -1"
:key="table.tn"
>
<td>
<v-tooltip bottom>
<template #activator="{on}">
<span v-on="on">{{ table._tn }}</span>
</template>
<span class="caption">{{ table.tn }}</span>
</v-tooltip>
</td>
<td v-for="role in roles" :key="`${table.tn}-${role}`">
<v-tooltip bottom>
<template #activator="{on}">
<div
v-on="on"
>
<v-checkbox
v-model="table.disabled[role]"
dense
:true-value="false"
:false-value="true"
@change="$set(table,'edited',true)"
/>
</div>
</template>
<span v-if="table.disabled[role]">Click to hide '{{ table.tn }}' for Role:{{
role
}} in UI dashboard</span>
<span v-else>Click to make '{{ table.tn }}' visible for Role:{{ role }} in UI dashboard</span>
</v-tooltip>
</td>
</tr>
<span v-if="table.disabled[role]">Click to hide '{{ table.tn }}' for Role:{{
role
}} in UI dashboard</span>
<span v-else>Click to make '{{ table.tn }}' visible for Role:{{ role }} in UI dashboard</span>
</v-tooltip>
</td>
</tr>
</template>
</tbody>
</v-simple-table>
</div>
</v-card>
</v-card>
</v-container>
</template>
<script>
import {mapGetters} from "vuex";
import { mapGetters } from 'vuex'
export default {
name: "toggleTableUiAcl",
name: 'ToggleTableUiAcl',
components: {},
props: ['nodes', 'db'],
data: () => ({
models: null,
updating: false,
@@ -98,20 +119,19 @@ export default {
filter: '',
tables: null
}),
props: ['nodes', 'db'],
async mounted() {
await this.loadTableList();
async mounted () {
await this.loadTableList()
},
methods: {
async loadTableList() {
async loadTableList () {
this.tables = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcVisibilityMetaGet', {
type: 'table'
}]));
}]))
},
async save() {
async save () {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
@@ -119,7 +139,7 @@ export default {
}, 'xcVisibilityMetaSet', {
type: 'table',
disableList: this.tables.filter(t => t.edited)
}]);
}])
this.$toast.success('Updated UI ACL for tables successfully').goAway(3000)
} catch (e) {
this.$toast.error(e.message).goAway(3000)
@@ -130,11 +150,11 @@ export default {
...mapGetters({
dbAliasList: 'project/GtrDbAliasList'
}),
edited() {
edited () {
return this.tables && this.tables.length && this.tables.some(t => t.edited)
},
roles() {
return this.tables && this.tables.length ? Object.keys(this.tables[0].disabled) : [];
roles () {
return this.tables && this.tables.length ? Object.keys(this.tables[0].disabled) : []
}
}
}
@@ -150,7 +170,6 @@ export default {
border-right: 1px solid #7f828b33;
}
.search-field.v-text-field > .v-input__control, .search-field.v-text-field > .v-input__control > .v-input__slot {
min-height: auto;
}

153
packages/nc-gui/components/project/projectMetadata/uiAcl/toggleViewUIAcl.vue
View File

@@ -1,87 +1,108 @@
<template>
<v-container fluid v-if="db">
<v-container v-if="db" fluid>
<v-card>
<v-card class="pb-2">
<v-toolbar flat height="50" class="toolbar-border-bottom">
<v-text-field v-if=" db" v-model="filter" dense hide-details
class="my-2 mx-auto search-field"
:placeholder="`Search '${db.connection.database}' models`"
style="max-width:300px"
outlined>
<template v-slot:prepend-inner>
<v-icon small>search</v-icon>
<v-text-field
v-if=" db"
v-model="filter"
dense
hide-details
class="my-2 mx-auto search-field"
:placeholder="`Search '${db.connection.database}' models`"
style="max-width:300px"
outlined
>
<template #prepend-inner>
<v-icon small>
search
</v-icon>
</template>
</v-text-field>
<v-spacer></v-spacer>
<x-btn outlined tooltip="Reload list" small @click="loadViewList()"
color="primary"
icon="refresh">Reload
<v-spacer />
<x-btn
outlined
tooltip="Reload list"
small
color="primary"
icon="refresh"
@click="loadViewList()"
>
Reload
</x-btn>
<x-btn outlined :loading="updating" :disabled="updating || !edited" tooltip="Save Changes"
small
@click="save()"
color="primary" icon="save">Save
<x-btn
outlined
:loading="updating"
:disabled="updating || !edited"
tooltip="Save Changes"
small
color="primary"
icon="save"
@click="save()"
>
Save
</x-btn>
</v-toolbar>
<div class="d-flex d-100 justify-center">
<v-simple-table dense v-slot:default style="min-width: 400px">
<v-simple-table dense style="min-width: 400px">
<thead>
<tr>
<th>Models
</th>
<th v-for="role in roles" :key="role">{{ role }}</th>
</tr>
<tr>
<th>
Models
</th>
<th v-for="role in roles" :key="role">
{{ role }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="view in views"
v-if="view.view_name.toLowerCase().indexOf(filter.toLowerCase()) > -1" :key="view.view_name">
<td>{{ view.view_name }}</td>
<td v-for="role in roles" :key="`${view.view_name}-${role}`">
<v-tooltip bottom>
<template v-slot:activator="{on}">
<div
v-on="on">
<v-checkbox dense
:true-value="false"
:false-value="true"
@change="$set(view,'edited',true)"
v-model="view.disabled[role]"></v-checkbox>
</div>
</template>
<template
v-for="view in views"
>
<tr
v-if="view.view_name.toLowerCase().indexOf(filter.toLowerCase()) > -1"
:key="view.view_name"
>
<td>{{ view.view_name }}</td>
<td v-for="role in roles" :key="`${view.view_name}-${role}`">
<v-tooltip bottom>
<template #activator="{on}">
<div
v-on="on"
>
<v-checkbox
v-model="view.disabled[role]"
dense
:true-value="false"
:false-value="true"
@change="$set(view,'edited',true)"
/>
</div>
</template>
<span v-if="view.disabled[role]">Click to hide '{{ view.view_name }}' for Role:{{ role }} in UI dashboard</span>
<span v-else>Click to make '{{ view.view_name }}' visible for Role:{{ role }} in UI dashboard</span>
</v-tooltip>
</td>
</tr>
<span v-if="view.disabled[role]">Click to hide '{{ view.view_name }}' for Role:{{ role }} in UI dashboard</span>
<span v-else>Click to make '{{ view.view_name }}' visible for Role:{{ role }} in UI dashboard</span>
</v-tooltip>
</td>
</tr>
</template>
</tbody>
</v-simple-table>
</div>
</v-card>
</v-card>
</v-container>
</template>
<script>
import {mapGetters} from "vuex";
import { mapGetters } from 'vuex'
export default {
name: "toggleViewUiAcl",
name: 'ToggleViewUiAcl',
components: {},
props: ['nodes', 'db'],
data: () => ({
models: null,
updating: false,
@@ -89,20 +110,19 @@ export default {
filter: '',
views: null
}),
props: ['nodes', 'db'],
async mounted() {
await this.loadViewList();
async mounted () {
await this.loadViewList()
},
methods: {
async loadViewList() {
async loadViewList () {
this.views = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
env: this.$store.getters['project/GtrEnv']
}, 'xcVisibilityMetaGet', {
type: 'view'
}]));
}]))
},
async save() {
async save () {
try {
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
dbAlias: this.db.meta.dbAlias,
@@ -110,7 +130,7 @@ export default {
}, 'xcVisibilityMetaSet', {
type: 'view',
disableList: this.views.filter(t => t.edited)
}]);
}])
this.$toast.success('Updated UI ACL for tables successfully').goAway(3000)
} catch (e) {
this.$toast.error('Some error occurred').goAway(3000)
@@ -121,11 +141,11 @@ export default {
...mapGetters({
dbAliasList: 'project/GtrDbAliasList'
}),
edited() {
edited () {
return this.views && this.views.length && this.views.some(t => t.edited)
},
roles() {
return this.views && this.views.length ? Object.keys(this.views[0].disabled) : [];
roles () {
return this.views && this.views.length ? Object.keys(this.views[0].disabled) : []
}
}
}
@@ -141,7 +161,6 @@ export default {
border-right: 1px solid #7f828b33;
}
.search-field.v-text-field > .v-input__control, .search-field.v-text-field > .v-input__control > .v-input__slot {
min-height: auto;