mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
513 lines
16 KiB
513 lines
16 KiB
<template> |
|
<div class="h-100"> |
|
|
|
|
|
<v-card style="" class="h-100"> |
|
<v-toolbar flat height="42" class="toolbar-border-bottom"> |
|
<v-toolbar-title> |
|
<v-breadcrumbs :items="[{ |
|
text: this.nodes.env, |
|
disabled: true, |
|
href: '#' |
|
},{ |
|
text: this.nodes.dbAlias, |
|
disabled: true, |
|
href: '#' |
|
}, |
|
{ |
|
text: (nodes._tn || nodes.view_name|| nodes.tn) + ' (RBAC)', |
|
disabled: true, |
|
href: '#' |
|
}]" divider=">" small> |
|
<template v-slot:divider> |
|
<v-icon small color="grey lighten-2">forward</v-icon> |
|
</template> |
|
</v-breadcrumbs> |
|
|
|
</v-toolbar-title> |
|
<v-spacer></v-spacer> |
|
<x-btn outlined tooltip="Reload RBAC" |
|
color="primary" |
|
small |
|
@click="load" |
|
v-ge="['acl','reload']" |
|
> |
|
<v-icon small left>refresh</v-icon> |
|
Reload |
|
</x-btn> |
|
|
|
<x-btn outlined tooltip="Save Changes" |
|
color="primary" |
|
class="primary" |
|
small |
|
v-ge="['acl','save']" |
|
@click="save" |
|
:disabled="!edited" |
|
> |
|
<v-icon small left>save</v-icon> |
|
Save |
|
</x-btn> |
|
|
|
</v-toolbar> |
|
|
|
|
|
<p class="title mt-6 mb-6"> Table : <span class="text-capitalize">{{ nodes._tn || nodes.view_name }}</span><br> |
|
<span class="font-weight-thin">Role Based Access Control (RBAC) For Columns</span></p> |
|
|
|
|
|
|
|
<v-skeleton-loader v-if="loading || !data" type="table"> |
|
|
|
</v-skeleton-loader> |
|
|
|
<div v-else class="pb-10"> |
|
<v-overlay absolute v-model="showCustomAcl"> |
|
<template v-slot:default> |
|
<v-card :light="!$store.state.windows.darkTheme" class="ma-2" style="max-height: 100%; overflow: auto; min-height:70vh"> |
|
|
|
<v-card-actions> |
|
<p class="body-1 mb-0 mr-2">Custom Rules : {{ custoAclTitle[0] }}<span class="grey--text caption">(table)</span> |
|
> {{ custoAclTitle[1] }}<span class="grey--text caption">(role)</span> > {{ custoAclTitle[2] }}<span |
|
class="grey--text caption">(operation)</span></p> |
|
<v-spacer> |
|
</v-spacer> |
|
<v-btn |
|
outlined |
|
small |
|
@click="showCustomAcl=false" |
|
>Cancel |
|
</v-btn> |
|
<v-btn |
|
outlined |
|
color="primary" |
|
small |
|
@click="save" |
|
>Save |
|
</v-btn> |
|
</v-card-actions> |
|
<v-card-text> |
|
<custom-acl :nodes="nodes" :table="nodes.tn || nodes.view_name" |
|
v-model="customAcl"></custom-acl> |
|
</v-card-text> |
|
|
|
</v-card> |
|
</template> |
|
</v-overlay> |
|
<v-simple-table dense v-slot:default class=" mx-10"> |
|
<thead> |
|
<tr> |
|
<th rowspan="2" class="text-center"> |
|
<!-- <div class="d-flex justify-center align-end">--> |
|
<!-- <v-checkbox dense v-model="aclAll"></v-checkbox>--> |
|
|
|
<span>Columns x RBAC</span> |
|
<!-- <v-text-field dense hide-details class="my-2 caption font-weight-regular" |
|
flat |
|
outlined |
|
:placeholder="`Search columns in '${nodes._tn|| nodes.view_name}'`" |
|
prepend-inner-icon="search" v-model="search" |
|
></v-text-field>--> |
|
<!-- </div>--> |
|
</th> |
|
<th :colspan="operations.length" class="text-center" |
|
v-for="role in roles" :key="role" v-if="role !== 'creator'">{{ role }} |
|
</th> |
|
</tr> |
|
<tr> |
|
<template v-for="role in roles" v-if="role !== 'creator'"> |
|
<th v-for="op in operations" :class="` pa-0 caption text-capitalize ${op.color}--text`" |
|
class="permission role-op-header" |
|
:key="`${role}-${op.name}--11`" |
|
> |
|
|
|
<v-tooltip bottom> |
|
<template v-slot:activator="{on}"> |
|
<div class="d-flex flex-column justify-center align-center d-100 h-100 mt-0" v-on="on"> |
|
<v-checkbox |
|
hide-details |
|
class="mt-n1" dense v-model="aclRoleOpAll[`${role}___${op.name}`]" |
|
@change="onAclRoleOpAllChange(aclRoleOpAll[`${role}___${op.name}`],`${role}___${op.name}`)" |
|
:color="op.color"></v-checkbox> |
|
<span>{{ op.name }}</span> |
|
</div> |
|
</template> |
|
<span class="caption"><span |
|
class="text-capitalize">{{ |
|
role |
|
}}</span> {{ aclRoleOpAll[`${role}___${op.name}`] ? 'can' : 'can\'t' }} {{ |
|
op.name |
|
}} '{{ nodes.tn }}' rows</span> |
|
</v-tooltip> |
|
|
|
<v-icon v-if="op.name !== 'delete'" x-small class="custom-acl" |
|
@click="( |
|
showCustomAcl = true, |
|
custoAclTitle = [nodes.tn,role,op.name], |
|
customAcl=(data[role] && data[role][op.name] && data[role][op.name].custom ) || {} |
|
)"> |
|
mdi-pencil-outline |
|
</v-icon> |
|
|
|
<v-icon |
|
x-small |
|
class="custom-acl-found" |
|
v-if="data[role] |
|
&& data[role][op.name] |
|
&& data[role][op.name].custom |
|
&& Object.keys(data[role][op.name].custom).length" |
|
>mdi-filter-menu |
|
</v-icon> |
|
|
|
</th> |
|
</template> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
|
|
<tr class="caption" v-for="column in columns" |
|
:key="column._cn" |
|
v-show="column._cn.toLowerCase().indexOf(search.toLowerCase()) > -1"> |
|
<td |
|
>{{ column._cn }} |
|
</td> |
|
<template v-for="role in roles" v-if="role !== 'creator'"> |
|
<td |
|
class="pa-0" |
|
style="position: relative" |
|
v-for="op in operations" :class="`caption text-capitalize`" |
|
:key="`${role}-${op.name}`"> |
|
<v-tooltip bottom :disabled="op.ignore"> |
|
<template v-slot:activator="{on}"> |
|
<div class="d-100 h-100 d-flex align-center justify-center permission-checkbox-container" v-on="on"> |
|
<v-checkbox class="mt-n1" v-if="!op.ignore" dense |
|
color="primary lighten-2" |
|
@change="onPermissionChange(aclObj[`${column._cn}___${role}___${op.name}`],`${role}___${op.name}`)" |
|
v-model="aclObj[`${column._cn}___${role}___${op.name}`]" |
|
style=""></v-checkbox> |
|
|
|
<v-checkbox class="mt-n1" v-else dense |
|
color="primary lighten-2" |
|
disabled |
|
style=""></v-checkbox> |
|
</div> |
|
</template> |
|
|
|
<span class="caption"><span |
|
class="text-capitalize">{{ |
|
role |
|
}}</span> {{ aclObj[`${column._cn}___${role}___${op.name}`] ? 'can' : 'can\'t' }} {{ |
|
op.name |
|
}} column '{{ column._cn }}'</span> |
|
</v-tooltip> |
|
</td> |
|
</template> |
|
</tr> |
|
|
|
|
|
</tbody> |
|
</v-simple-table> |
|
</div> |
|
|
|
</v-card> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
|
|
// import debounce from "@/helpers/debounce"; |
|
// import CustomAcl from "./customAcl"; |
|
|
|
import CustomAcl from "./customAcl"; |
|
|
|
export default { |
|
name: "tableAcl", |
|
components: {CustomAcl}, |
|
// components: {CustomAcl}, |
|
props: ['nodes'], |
|
data: () => ({ |
|
showCustomAcl: false, |
|
custoAclTitle: null, |
|
customAcl: {}, |
|
edited: false, |
|
search: '', |
|
allOperations: [{ |
|
name: 'create', |
|
color: 'warning' |
|
}, { |
|
name: 'read', |
|
color: 'success' |
|
}, { |
|
name: 'update', |
|
color: 'info' |
|
}, { |
|
name: 'delete', |
|
color: 'error', |
|
ignore: true |
|
}], |
|
|
|
data: null, |
|
columns: null, |
|
aclObj: {}, |
|
aclRoleOpAll: {}, |
|
loading: false |
|
}), |
|
computed: { |
|
roles() { |
|
return (this.data ? Object.keys(this.data) : []).filter(r => r !== 'guest') |
|
}, |
|
operations() { |
|
return this.allOperations.filter(({name}) => this.nodes.tn || name === 'read') |
|
} |
|
}, |
|
async created() { |
|
await this.load(); |
|
}, |
|
methods: { |
|
async load() { |
|
await this.loadColumnList(); |
|
await this.loadAcl(); |
|
this.generateAclObj(); |
|
this.edited = false; |
|
}, |
|
generateAclObj() { |
|
|
|
const aclObj = {}; |
|
const aclRoleOpAll = {}; |
|
console.log(this.data) |
|
// generate aclObj with merged key value |
|
for (const [role, roleObj] of Object.entries(this.data)) { |
|
for (const [operation, acl] of Object.entries(roleObj)) { |
|
aclRoleOpAll[`${role}___${operation}`] = false; |
|
for (const {_cn: cn} of this.columns) { |
|
if (typeof acl === 'boolean') { |
|
aclObj[`${cn}___${role}___${operation}`] = acl; |
|
} else if (acl) { |
|
aclObj[`${cn}___${role}___${operation}`] = acl.columns[cn]; |
|
} |
|
if (!aclRoleOpAll[`${role}___${operation}`] && aclObj[`${cn}___${role}___${operation}`]) { |
|
aclRoleOpAll[`${role}___${operation}`] = true; |
|
} |
|
} |
|
} |
|
} |
|
this.aclRoleOpAll = aclRoleOpAll; |
|
this.$nextTick(() => this.aclObj = aclObj); |
|
|
|
}, |
|
async save() { |
|
const obj = {}; |
|
for (const [key, isAllowed] of Object.entries(this.aclObj)) { |
|
const [column, role, operation] = key.split('___'); |
|
if (operation !== 'delete') { |
|
obj[role] = obj[role] || {}; |
|
obj[role][operation] = obj[role][operation] || {}; |
|
obj[role][operation].columns = obj[role][operation].columns || {}; |
|
obj[role][operation].columns[column] = isAllowed; |
|
} |
|
if (this.data[role] && this.data[role][operation] && this.data[role][operation].custom) { |
|
obj[role][operation].custom = this.data[role][operation].custom; |
|
} |
|
|
|
|
|
} |
|
|
|
for (const [key, isAllowed] of Object.entries(this.aclRoleOpAll)) { |
|
const [role, operation] = key.split('___'); |
|
if (operation === 'delete' || !isAllowed) { |
|
obj[role] = obj[role] || {}; |
|
obj[role][operation] = isAllowed; |
|
} |
|
} |
|
|
|
if (this.showCustomAcl && this.custoAclTitle) { |
|
if (!obj[this.custoAclTitle[1]][this.custoAclTitle[2]] || typeof obj[this.custoAclTitle[1]][this.custoAclTitle[2]] !== 'object') |
|
obj[this.custoAclTitle[1]][this.custoAclTitle[2]] = {}; |
|
obj[this.custoAclTitle[1]][this.custoAclTitle[2]].custom = this.customAcl; |
|
} |
|
|
|
|
|
console.log(obj) |
|
try { |
|
await this.$store.dispatch('sqlMgr/ActSqlOp', [{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, 'xcAclSave', { |
|
tn: this.nodes.tn || this.nodes.view_name, |
|
acl: obj |
|
}]); |
|
if (this.showCustomAcl) { |
|
this.$toast.success('Custom RBAC saved successfully').goAway(3000); |
|
this.showCustomAcl = false; |
|
} else |
|
this.$toast.success('RBAC saved successfully').goAway(3000); |
|
this.edited = false; |
|
await this.load() |
|
} catch (e) { |
|
this.$toast.error(e.message).goAway(3000); |
|
} |
|
}, |
|
|
|
async loadColumnList() { |
|
// const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ |
|
// env: this.nodes.env, |
|
// dbAlias: this.nodes.dbAlias |
|
// }, 'columnList', { |
|
// tn: this.nodes.tn || this.nodes.view_name |
|
// }]); |
|
// this.columns = result.data.list; |
|
const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, 'tableXcModelGet', { |
|
tn: this.nodes.tn || this.nodes.view_name |
|
}]); |
|
|
|
|
|
const meta = JSON.parse(result.meta); |
|
this.columns = meta.columns; |
|
}, |
|
async loadAcl() { |
|
this.loading = true; |
|
const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, 'xcAclGet', { |
|
tn: this.nodes.tn || this.nodes.view_name |
|
}]); |
|
this.data = JSON.parse(result.acl); |
|
|
|
this.loading = false; |
|
}, |
|
onAclRoleOpAllChange(isEnabled, name) { |
|
this.edited = true; |
|
const obj = {}; |
|
for (const key in this.aclObj) { |
|
if (key.split('___').slice(1).join('___') === name) { |
|
obj[key] = isEnabled; |
|
} else { |
|
obj[key] = this.aclObj[key]; |
|
} |
|
} |
|
this.aclObj = obj; |
|
}, |
|
onPermissionChange(isEnabled, name) { |
|
this.edited = true; |
|
if (isEnabled && !this.aclRoleOpAll[name]) { |
|
this.$set(this.aclRoleOpAll, name, true); |
|
} |
|
if (!isEnabled && this.aclRoleOpAll[name]) { |
|
this.$set(this.aclRoleOpAll, name, Object.entries(this.aclObj).some(([key, enabled]) => key.endsWith(name) && enabled)); |
|
} |
|
} |
|
}, |
|
// watch: { |
|
// aclRoleOpAll: { |
|
// // todo: fix toggle issue |
|
// handler(aclRoleOpAll) { |
|
// const obj = {}; |
|
// for (const key in this.aclObj) { |
|
// obj[key] = aclRoleOpAll[key.split('___').slice(1).join('___')]; |
|
// } |
|
// this.aclObj = obj; |
|
// }, |
|
// deep: true |
|
// } |
|
// |
|
// } |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
tr,th{ |
|
border: 1px solid grey; |
|
} |
|
td, th { |
|
border-left: 1px solid grey; |
|
} |
|
|
|
td:last-child, th:last-child { |
|
border-right: 1px solid grey; |
|
} |
|
|
|
tr:first-child > th:nth-child(n+2) { |
|
border-bottom: 1px solid grey; |
|
} |
|
|
|
th.permission { |
|
padding-left: 0; |
|
padding-right: 0; |
|
/*width: 75px;*/ |
|
} |
|
|
|
//.permission-checkbox-container { |
|
// transition: filter .4s; |
|
// filter: grayscale(100%); |
|
//} |
|
// |
|
//.permission-checkbox-container:hover { |
|
// filter: none; |
|
//} |
|
|
|
|
|
::v-deep { |
|
.permission-checkbox-container .v-input { |
|
transform: scale(.8); |
|
} |
|
|
|
.v-overlay__content { |
|
height: 100%; |
|
display: flex; |
|
align-items: center; |
|
} |
|
table{ |
|
border-collapse: collapse; |
|
} |
|
} |
|
|
|
.role-op-header { |
|
position: relative; |
|
|
|
.custom-acl { |
|
opacity: 0; |
|
transition: opacity .4s; |
|
position: absolute; |
|
right: 1px; |
|
bottom: 1px; |
|
} |
|
|
|
.custom-acl-found { |
|
position: absolute; |
|
right: 1px; |
|
top: 1px; |
|
} |
|
|
|
&:hover .custom-acl { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
</style> |
|
<!-- |
|
/** |
|
* @copyright Copyright (c) 2021, Xgene Cloud Ltd |
|
* |
|
* @author Naveen MR <oof1lab@gmail.com> |
|
* @author Pranav C Balan <pranavxc@gmail.com> |
|
* |
|
* @license GNU AGPL version 3 or any later version |
|
* |
|
* This program is free software: you can redistribute it and/or modify |
|
* it under the terms of the GNU Affero General Public License as |
|
* published by the Free Software Foundation, either version 3 of the |
|
* License, or (at your option) any later version. |
|
* |
|
* This program is distributed in the hope that it will be useful, |
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
* GNU Affero General Public License for more details. |
|
* |
|
* You should have received a copy of the GNU Affero General Public License |
|
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
* |
|
*/ |
|
-->
|
|
|