mirror of https://github.com/nocodb/nocodb
Pranav C
3 years ago
14 changed files with 573 additions and 69 deletions
@ -0,0 +1,121 @@
|
||||
<template> |
||||
<div> |
||||
<v-container fluid class="wrapper"> |
||||
<v-row> |
||||
<v-col cols="6"> |
||||
<v-autocomplete |
||||
ref="input" |
||||
v-model="lookup.table" |
||||
outlined |
||||
class="caption" |
||||
hide-details="auto" |
||||
label="Child Table" |
||||
:full-width="false" |
||||
:items="refTables" |
||||
item-text="_tn" |
||||
:item-value="v => v" |
||||
:rules="[v => !!v || 'Required']" |
||||
dense |
||||
/> |
||||
</v-col> |
||||
<v-col cols="6"> |
||||
<v-autocomplete |
||||
ref="input" |
||||
v-model="lookup.column" |
||||
outlined |
||||
class="caption" |
||||
hide-details="auto" |
||||
label="Child column" |
||||
:full-width="false" |
||||
:items="columnList" |
||||
item-text="_cn" |
||||
dense |
||||
:loading="loadingColumns" |
||||
:item-value="v => v" |
||||
:rules="[v => !!v || 'Required']" |
||||
/> |
||||
</v-col> |
||||
</v-row> |
||||
</v-container> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: 'LookupOptions', |
||||
props: ['nodes', 'column', 'meta', 'isSQLite', 'alias'], |
||||
data: () => ({ |
||||
lookup: {}, |
||||
loadingColumns: false |
||||
}), |
||||
computed: { |
||||
refTables() { |
||||
return this.meta |
||||
? [ |
||||
...(this.meta.belongsTo || []).map(bt => ({ type: 'bt', relation: bt, tn: bt.rtn, _tn: bt._rtn })), |
||||
...(this.meta.hasMany || []).map(hm => ({ type: 'hm', relation: hm, tn: hm.tn, _tn: hm._tn })), |
||||
...(this.meta.manyToMany || []).map(mm => ({ type: 'mm', relation: mm, tn: mm.rtn, _tn: mm._rtn })) |
||||
] |
||||
: [] |
||||
}, |
||||
columnList() { |
||||
return (( |
||||
this.lookup && |
||||
this.lookup.table && |
||||
this.$store.state.meta.metas && |
||||
this.$store.state.meta.metas[this.lookup.table.tn] && |
||||
this.$store.state.meta.metas[this.lookup.table.tn].columns |
||||
) || []).map(({ cn, _cn }) => ({ cn, _cn })) |
||||
} |
||||
}, |
||||
methods: { |
||||
async onTableChange() { |
||||
this.loadingColumns = true |
||||
if (this.lookup.table) { |
||||
try { |
||||
await this.$store.dispatch('meta/ActLoadMeta', { |
||||
dbAlias: this.nodes.dbAlias, |
||||
env: this.nodes.env, |
||||
tn: this.lookup.table.tn |
||||
}) |
||||
} catch (e) { |
||||
// ignore |
||||
} |
||||
} |
||||
|
||||
this.loadingColumns = false |
||||
}, |
||||
async save() { |
||||
try { |
||||
await this.$store.dispatch('meta/ActLoadMeta', { |
||||
dbAlias: this.nodes.dbAlias, |
||||
env: this.nodes.env, |
||||
tn: this.meta.tn, |
||||
force: true |
||||
}) |
||||
const meta = JSON.parse(JSON.stringify(this.$store.state.meta.metas[this.meta.tn])) |
||||
|
||||
meta.v.push({ |
||||
_cn: this.alias, |
||||
lookup: true, |
||||
...this.lookup.table, |
||||
cn: this.lookup.column.cn |
||||
}) |
||||
|
||||
await this.$store.dispatch('sqlMgr/ActSqlOp', [{ |
||||
env: this.nodes.env, |
||||
dbAlias: this.nodes.dbAlias |
||||
}, 'xcModelSet', { |
||||
tn: this.nodes.tn, |
||||
meta |
||||
}]) |
||||
} catch (e) { |
||||
this.$toast.error(e.message).goAway(3000) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,128 @@
|
||||
<template> |
||||
<div class="chips-wrapper"> |
||||
<div class="chips d-flex align-center lookup-items"> |
||||
<template v-if="localValue"> |
||||
<item-chip |
||||
v-for="(value,i) in localValue" |
||||
:key="i" |
||||
:active="active" |
||||
:value="value" |
||||
:readonly="true" |
||||
/> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import ItemChip from '@/components/project/spreadsheet/components/virtualCell/components/itemChip' |
||||
|
||||
export default { |
||||
name: 'LookupCell', |
||||
components: { ItemChip }, |
||||
props: { |
||||
meta: [Object], |
||||
column: [Object], |
||||
nodes: [Object], |
||||
row: [Object], |
||||
api: [Object, Function], |
||||
sqlUi: [Object, Function], |
||||
active: Boolean, |
||||
isNew: Boolean, |
||||
isForm: Boolean |
||||
}, |
||||
computed: { |
||||
lookUpMeta() { |
||||
return this.$store.state.meta.metas[this.column.tn] |
||||
}, |
||||
lookUpColumnAlias() { |
||||
if (!this.lookUpMeta || !this.column.cn) { |
||||
return |
||||
} |
||||
return (this.$store.state.meta.metas[this.column.tn].columns.find(cl => cl.cn === this.column.cn) || {})._cn |
||||
}, |
||||
localValueObj() { |
||||
if (!this.column || !this.row) { |
||||
return null |
||||
} |
||||
switch (this.column.type) { |
||||
case 'mm': |
||||
return this.row[`${this.column._tn}MMList`] |
||||
case 'hm': |
||||
return this.row[`${this.column._tn}List`] |
||||
case 'bt': |
||||
return this.row[`${this.column._tn}Read`] |
||||
default: |
||||
return null |
||||
} |
||||
}, |
||||
localValue() { |
||||
if (!this.localValueObj || !this.lookUpColumnAlias) { |
||||
return null |
||||
} |
||||
if (Array.isArray(this.localValueObj)) { |
||||
return this.localValueObj.map(o => o[this.lookUpColumnAlias]) |
||||
} |
||||
return [this.localValueObj[this.lookUpColumnAlias]] |
||||
} |
||||
}, |
||||
created() { |
||||
this.loadLookupMeta() |
||||
}, |
||||
methods: { |
||||
async loadLookupMeta() { |
||||
if (!this.lookUpMeta) { |
||||
await this.$store.dispatch('meta/ActLoadMeta', { |
||||
env: this.nodes.env, |
||||
dbAlias: this.nodes.dbAlias, |
||||
tn: this.column.tn |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.chips-wrapper { |
||||
.chips { |
||||
max-width: 100%; |
||||
&.lookup-items{ |
||||
flex-wrap: wrap; |
||||
row-gap: 3px; |
||||
gap:3px; |
||||
margin: 3px 0; |
||||
} |
||||
} |
||||
|
||||
&.active { |
||||
.chips { |
||||
max-width: calc(100% - 44px); |
||||
} |
||||
} |
||||
} |
||||
</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/>. |
||||
* |
||||
*/ |
||||
--> |
||||
Loading…
Reference in new issue