mirror of
https://github.com/nocodb/nocodb.git
synced 2026-04-30 06:26:30 +00:00
refactor(gui): linting
Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>
This commit is contained in:
Pranav C
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user