mirror of
https://github.com/nocodb/nocodb.git
synced 2026-04-30 02:36:45 +00:00
refactor(gui): linting
Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>
This commit is contained in:
Pranav C
@@ -1,65 +1,92 @@
|
||||
<!-- eslint-disable -->
|
||||
<template>
|
||||
<v-skeleton-loader v-if="loading" type="text@3"></v-skeleton-loader>
|
||||
<div class="caption text-left" v-else>{{ Array.isArray(value) ? '[' : '{' }}
|
||||
<v-skeleton-loader v-if="loading" type="text@3" />
|
||||
<div v-else class="caption text-left">
|
||||
{{ Array.isArray(value) ? '[' : '{' }}
|
||||
|
||||
<ul>
|
||||
<template v-if="Array.isArray(value)">
|
||||
<li v-for="(v,i) in value">
|
||||
<custom-acl :nodes="nodes" :table="table" v-model="value[i]"></custom-acl>
|
||||
<custom-acl v-model="value[i]" :nodes="nodes" :table="table" />
|
||||
</li>
|
||||
<li class="caption add" @click="addConditionObj">
|
||||
add +
|
||||
</li>
|
||||
<li @click="addConditionObj" class="caption add">add +</li>
|
||||
</template>
|
||||
<template v-else>
|
||||
<li v-for="(key,i) in keys" :key="key" v-if="key !== 'relationType'" :class="{empty: !keys[i]}">
|
||||
<li v-for="(key,i) in keys" v-if="key !== 'relationType'" :key="key" :class="{empty: !keys[i]}">
|
||||
<div class="d-inline">
|
||||
<!-- <span contenteditable v-text="key" class="key"></span>-->
|
||||
<select class="caption" v-model="keys[i]" :ref="'keySelect'+i" @change="onKeyChange(i,key)">
|
||||
<select :ref="'keySelect'+i" v-model="keys[i]" class="caption" @change="onKeyChange(i,key)">
|
||||
<template v-if="table">
|
||||
<optgroup label="columns" v-if="columns && columns.length">
|
||||
<option v-for="col in columns" v-show="!keys.includes(col)" :data-value="col">{{ col }}</option>
|
||||
<optgroup v-if="columns && columns.length" label="columns">
|
||||
<option v-for="col in columns" v-show="!keys.includes(col)" :data-value="col">
|
||||
{{ col }}
|
||||
</option>
|
||||
</optgroup>
|
||||
<optgroup label="Has Many" v-if="hmList && hmList.length">
|
||||
<option v-for="hm in hmList" v-show="!keys.includes(hm)" data-relation-type="hm" :data-table="hm">{{
|
||||
<optgroup v-if="hmList && hmList.length" label="Has Many">
|
||||
<option v-for="hm in hmList" v-show="!keys.includes(hm)" data-relation-type="hm" :data-table="hm">
|
||||
{{
|
||||
hm
|
||||
}}
|
||||
</option>
|
||||
</optgroup>
|
||||
<optgroup label="BelongsTo" v-if="btList && btList.length">
|
||||
<option v-for="bt in btList" v-show="!keys.includes(bt)" data-relation-type="bt" :data-table="bt">{{
|
||||
<optgroup v-if="btList && btList.length" label="BelongsTo">
|
||||
<option v-for="bt in btList" v-show="!keys.includes(bt)" data-relation-type="bt" :data-table="bt">
|
||||
{{
|
||||
bt
|
||||
}}
|
||||
</option>
|
||||
</optgroup>
|
||||
<optgroup label="Logical Operators">
|
||||
<option v-for="op in logicOp" data-logical-op="true" :data-op="op">{{ op }}</option>
|
||||
<option v-for="op in logicOp" data-logical-op="true" :data-op="op">
|
||||
{{ op }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</template>
|
||||
<optgroup label="Comparison Operators" v-else>
|
||||
<option v-for="op in compOp" v-show="!keys.includes(op)" :data-op="op">{{ op }}</option>
|
||||
<optgroup v-else label="Comparison Operators">
|
||||
<option v-for="op in compOp" v-show="!keys.includes(op)" :data-op="op">
|
||||
{{ op }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<div class="delete-wrapper">
|
||||
<x-icon color="red" icon-class="delete" v-if="typeof value[key] !== 'string'" x-small
|
||||
@click="deleteCondition(key)">
|
||||
<x-icon
|
||||
v-if="typeof value[key] !== 'string'"
|
||||
color="red"
|
||||
icon-class="delete"
|
||||
x-small
|
||||
@click="deleteCondition(key)"
|
||||
>
|
||||
mdi-delete-outline
|
||||
</x-icon>
|
||||
</div>
|
||||
<span class="separator"> : </span>
|
||||
</div>
|
||||
<template v-if="typeof value[key] === 'string'"><input type="text" v-model="value[key]"
|
||||
class="value caption"/></template>
|
||||
<template v-if="typeof value[key] === 'string'">
|
||||
<input
|
||||
v-model="value[key]"
|
||||
type="text"
|
||||
class="value caption"
|
||||
>
|
||||
</template>
|
||||
<!-- @input="e => $set(value,key,e.target.innerHTML)" -->
|
||||
|
||||
<template v-else>
|
||||
<span class="caption grey--text" v-if="value[key].relationType">
|
||||
<span v-if="value[key].relationType" class="caption grey--text">
|
||||
{{ `'${table}' ${value[key].relationType === 'bt' ? 'BelongsTo' : 'HasMany'} '${key}'` }}
|
||||
</span>
|
||||
<custom-acl :nodes="nodes" v-model="value[key]" :table="(value[key].relationType ? key : null)
|
||||
|| (logicOp.includes(key) ? table : null)"
|
||||
></custom-acl>
|
||||
<custom-acl
|
||||
v-model="value[key]"
|
||||
:nodes="nodes"
|
||||
:table="(value[key].relationType ? key : null)
|
||||
|| (logicOp.includes(key) ? table : null)"
|
||||
/>
|
||||
</template>
|
||||
</li>
|
||||
<li v-if="table" @click="addConditionProp" class="caption add">add +</li>
|
||||
<li v-if="table" class="caption add" @click="addConditionProp">
|
||||
add +
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
{{ Array.isArray(value) ? '] ,' : '} ,' }}
|
||||
@@ -68,11 +95,16 @@
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import {insertKey} from "../../../helpers/xutils";
|
||||
import { insertKey } from '../../../helpers/xutils'
|
||||
|
||||
export default {
|
||||
name: "custom-acl",
|
||||
name: 'CustomAcl',
|
||||
props: [
|
||||
'value',
|
||||
'table',
|
||||
'column',
|
||||
'nodes'
|
||||
],
|
||||
data: () => ({
|
||||
columns: null,
|
||||
hmList: null,
|
||||
@@ -85,111 +117,102 @@ export default {
|
||||
],
|
||||
loading: false
|
||||
}),
|
||||
computed: {
|
||||
keys () {
|
||||
return Object.keys(this.value)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
async mounted () {
|
||||
await this.loadTableMetaDetails()
|
||||
},
|
||||
methods: {
|
||||
onKeyChange(i, key) {
|
||||
let value = JSON.parse(JSON.stringify(this.value));
|
||||
onKeyChange (i, key) {
|
||||
let value = JSON.parse(JSON.stringify(this.value))
|
||||
|
||||
const selected = this.$refs[`keySelect${i}`][0].selectedOptions;
|
||||
let selectedVal = '';
|
||||
if (selected && selected[0])
|
||||
selectedVal = selected[0].dataset;
|
||||
const selected = this.$refs[`keySelect${i}`][0].selectedOptions
|
||||
let selectedVal = ''
|
||||
if (selected && selected[0]) { selectedVal = selected[0].dataset }
|
||||
if (selectedVal.value) {
|
||||
delete value[key];
|
||||
value = insertKey(this.keys[i], {eq: ""}, value, i);
|
||||
delete value[key]
|
||||
value = insertKey(this.keys[i], { eq: '' }, value, i)
|
||||
} else if (selectedVal.relationType === 'hm') {
|
||||
delete value[key];
|
||||
delete value[key]
|
||||
value = insertKey(selectedVal.table, {
|
||||
relationType: "hm",
|
||||
"": ""
|
||||
}, value, i);
|
||||
relationType: 'hm',
|
||||
'': ''
|
||||
}, value, i)
|
||||
} else if (selectedVal.relationType === 'bt') {
|
||||
delete value[key];
|
||||
delete value[key]
|
||||
value = insertKey(selectedVal.table, {
|
||||
relationType: "bt",
|
||||
"": ""
|
||||
}, value, i);
|
||||
relationType: 'bt',
|
||||
'': ''
|
||||
}, value, i)
|
||||
} else if (selectedVal.op) {
|
||||
const oldVal = value[key];
|
||||
delete value[key];
|
||||
const oldVal = value[key]
|
||||
delete value[key]
|
||||
if (selectedVal.logicalOp) {
|
||||
if (selectedVal.op === '_not') {
|
||||
value = insertKey(selectedVal.op, {
|
||||
"": ""
|
||||
}, value, i);
|
||||
'': ''
|
||||
}, value, i)
|
||||
} else {
|
||||
value = insertKey(selectedVal.op, [{
|
||||
"": ""
|
||||
}], value, i);
|
||||
'': ''
|
||||
}], value, i)
|
||||
}
|
||||
} else {
|
||||
value[selectedVal.op] = oldVal;
|
||||
value[selectedVal.op] = oldVal
|
||||
}
|
||||
}
|
||||
this.$emit('input', value);
|
||||
this.$emit('input', value)
|
||||
},
|
||||
addConditionProp() {
|
||||
const value = JSON.parse(JSON.stringify(this.value));
|
||||
value[""] = "";
|
||||
this.$emit('input', value);
|
||||
addConditionProp () {
|
||||
const value = JSON.parse(JSON.stringify(this.value))
|
||||
value[''] = ''
|
||||
this.$emit('input', value)
|
||||
},
|
||||
addConditionObj() {
|
||||
const value = JSON.parse(JSON.stringify(this.value));
|
||||
addConditionObj () {
|
||||
const value = JSON.parse(JSON.stringify(this.value))
|
||||
value.push({
|
||||
"": ""
|
||||
'': ''
|
||||
})
|
||||
this.$emit('input', value);
|
||||
this.$emit('input', value)
|
||||
},
|
||||
deleteCondition(key) {
|
||||
const value = JSON.parse(JSON.stringify(this.value));
|
||||
delete value[key];
|
||||
this.$emit('input', value);
|
||||
deleteCondition (key) {
|
||||
const value = JSON.parse(JSON.stringify(this.value))
|
||||
delete value[key]
|
||||
this.$emit('input', value)
|
||||
},
|
||||
async loadTableMetaDetails() {
|
||||
async loadTableMetaDetails () {
|
||||
if (this.table) {
|
||||
this.loading = true;
|
||||
this.loading = true
|
||||
try {
|
||||
const meta = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
|
||||
env: this.nodes.env,
|
||||
dbAlias: this.nodes.dbAlias
|
||||
}, 'tableXcModelGet', {
|
||||
tn: this.table
|
||||
}]);
|
||||
}])
|
||||
const metaObj = JSON.parse(meta.meta)
|
||||
this.columns = metaObj.columns.map(v => v.cn);
|
||||
this.columns = metaObj.columns.map(v => v.cn)
|
||||
console.log(metaObj)
|
||||
this.hmList = metaObj.hasMany.map(v => v.tn)
|
||||
this.btList = metaObj.belongsTo.map(v => v.rtn)
|
||||
|
||||
} catch (e) {
|
||||
console.log('load meta', this.table, e);
|
||||
console.log('load meta', this.table, e)
|
||||
} finally {
|
||||
this.loading = false;
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'value',
|
||||
'table',
|
||||
'column',
|
||||
'nodes'
|
||||
],
|
||||
created() {
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadTableMetaDetails();
|
||||
},
|
||||
computed: {
|
||||
keys() {
|
||||
return Object.keys(this.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.key, .value {
|
||||
min-width: 40px;
|
||||
border-bottom: 1px dotted #bbbbbb;
|
||||
@@ -246,12 +269,10 @@ div:hover > .delete-wrapper .delete {
|
||||
//opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
select, input {
|
||||
color: var(--v-primary-text);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<!--
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user