Browse Source

fix: virtual-header-cell component

Signed-off-by: mertmit <mertmit99@gmail.com>
pull/1802/head
mertmit 3 years ago
parent
commit
ed326412ad
  1. 133
      packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue

133
packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue

@ -2,37 +2,37 @@
<div class="d-flex align-center"> <div class="d-flex align-center">
<v-tooltip bottom> <v-tooltip bottom>
<template #activator="{on}"> <template #activator="{on}">
<v-icon v-if="column.hm" color="warning" x-small class="mr-1" v-on="on"> <v-icon v-if="type === 'hm'" color="warning" x-small class="mr-1" v-on="on">
mdi-table-arrow-right mdi-table-arrow-right
</v-icon> </v-icon>
<v-icon v-else-if="column.bt" color="info" x-small class="mr-1" v-on="on"> <v-icon v-else-if="type === 'bt'" color="info" x-small class="mr-1" v-on="on">
mdi-table-arrow-left mdi-table-arrow-left
</v-icon> </v-icon>
<v-icon v-else-if="column.mm" color="pink" x-small class="mr-1" v-on="on"> <v-icon v-else-if="type === 'mm'" color="pink" x-small class="mr-1" v-on="on">
mdi-table-network mdi-table-network
</v-icon> </v-icon>
<v-icon v-else-if="column.formula" x-small class="mr-1" v-on="on"> <v-icon v-else-if="type === 'formula'" x-small class="mr-1" v-on="on">
mdi-math-integral mdi-math-integral
</v-icon> </v-icon>
<template v-else-if="column.lk"> <template v-else-if="type === 'lk'">
<v-icon v-if="column.lk.type === 'hm'" color="warning" x-small class="mr-1" v-on="on"> <v-icon v-if="relationType === 'hm'" color="warning" x-small class="mr-1" v-on="on">
mdi-table-column-plus-before mdi-table-column-plus-before
</v-icon> </v-icon>
<v-icon v-else-if="column.lk.type === 'bt'" color="info" x-small class="mr-1" v-on="on"> <v-icon v-else-if="relationType === 'bt'" color="info" x-small class="mr-1" v-on="on">
mdi-table-column-plus-before mdi-table-column-plus-before
</v-icon> </v-icon>
<v-icon v-else-if="column.lk.type === 'mm'" color="pink" x-small class="mr-1" v-on="on"> <v-icon v-else-if="relationType === 'mm'" color="pink" x-small class="mr-1" v-on="on">
mdi-table-column-plus-before mdi-table-column-plus-before
</v-icon> </v-icon>
</template> </template>
<template v-else-if="column.rl"> <template v-else-if="type === 'rl'">
<v-icon v-if="column.rl.type === 'hm'" color="warning" x-small class="mr-1" v-on="on"> <v-icon v-if="relationType === 'hm'" color="warning" x-small class="mr-1" v-on="on">
{{ rollupIcon }} {{ rollupIcon }}
</v-icon> </v-icon>
<v-icon v-else-if="column.rl.type === 'bt'" color="info" x-small class="mr-1" v-on="on"> <v-icon v-else-if="relationType === 'bt'" color="info" x-small class="mr-1" v-on="on">
{{ rollupIcon }} {{ rollupIcon }}
</v-icon> </v-icon>
<v-icon v-else-if="column.rl.type === 'mm'" color="pink" x-small class="mr-1" v-on="on"> <v-icon v-else-if="relationType === 'mm'" color="pink" x-small class="mr-1" v-on="on">
{{ rollupIcon }} {{ rollupIcon }}
</v-icon> </v-icon>
</template> </template>
@ -135,6 +135,7 @@
</div> </div>
</template> </template>
<script> <script>
import { UITypes } from 'nocodb-sdk'
import { getUIDTIcon } from '../helpers/uiTypes' import { getUIDTIcon } from '../helpers/uiTypes'
import EditVirtualColumn from '@/components/project/spreadsheet/components/editVirtualColumn' import EditVirtualColumn from '@/components/project/spreadsheet/components/editVirtualColumn'
@ -145,7 +146,8 @@ export default {
data: () => ({ data: () => ({
columnDeleteDialog: false, columnDeleteDialog: false,
editColumnMenu: false, editColumnMenu: false,
rollupIcon: getUIDTIcon('Rollup') rollupIcon: getUIDTIcon('Rollup'),
rels: ['bt', 'hm', 'mm']
}), }),
computed: { computed: {
alias() { alias() {
@ -153,62 +155,67 @@ export default {
return this.column.title return this.column.title
}, },
type() { type() {
if (this.column.bt) { if (this.column?.colOptions?.type) {
return 'bt' return this.column.colOptions.type
} }
if (this.column.hm) { if (this.column?.colOptions?.formula) {
return 'hm' return 'formula'
} }
if (this.column.mm) { if (this.column.uidt === UITypes.Lookup) {
return 'mm' return 'lk'
}
if (this.column.uidt === UITypes.Rollup) {
return 'rl'
} }
return '' return ''
}, },
relation() {
if (this.rels.includes(this.type)) {
return this.column
} else if (this.column.colOptions?.fk_relation_column_id) {
return this.meta.columns.find(c => c.id === this.column.colOptions?.fk_relation_column_id)
}
return undefined
},
relationType() {
return this.relation?.colOptions?.type
},
relationMeta() {
if (this.rels.includes(this.type)) {
return this.getMeta(this.column.colOptions.fk_related_model_id)
} else if (this.relation) {
return this.getMeta(this.relation.colOptions.fk_related_model_id)
}
return undefined
},
childColumn() { childColumn() {
if (this.column.bt) { if (this.relationMeta?.columns) {
return this.column.bt.column_name if (this.type === 'rl') {
const ch = this.relationMeta.columns.find(c => c.id === this.column.colOptions.fk_rollup_column_id)
return ch
} }
if (this.column.hm) { if (this.type === 'lk') {
return this.column.hm.column_name const ch = this.relationMeta.columns.find(c => c.id === this.column.colOptions.fk_lookup_column_id)
return ch
} }
if (this.column.mm) {
return this.column.mm.rcn
} }
return '' return ''
}, },
childTable() { childTable() {
if (this.column.bt) { if (this.relationMeta?.table_name) {
return this.column.bt.table_name return this.relationMeta.table_name
}
if (this.column.hm) {
return this.column.hm.table_name
}
if (this.column.mm) {
return this.column.mm.rtn
} }
return '' return ''
}, },
parentTable() { parentTable() {
if (this.column.bt) { if (this.rels.includes(this.type)) {
return this.column.bt.rtn return this.meta.table_name
}
if (this.column.hm) {
return this.column.hm.rtn
}
if (this.column.mm) {
return this.column.mm.table_name
} }
return '' return ''
}, },
parentColumn() { parentColumn() {
if (this.column.bt) { if (this.rels.includes(this.type)) {
return this.column.bt.rcn return this.column.column_name
}
if (this.column.hm) {
return this.column.hm.rcn
}
if (this.column.mm) {
return this.column.mm.column_name
} }
return '' return ''
}, },
@ -216,23 +223,26 @@ export default {
if (!this.column) { if (!this.column) {
return '' return ''
} }
if (this.column.hm) { if (this.type === 'hm') {
return `'${this.column.hm._rtn}' has many '${this.column.hm.title}'` return `'${this.parentTable}' has many '${this.childTable}'`
} else if (this.column.mm) { } else if (this.type === 'mm') {
return `'${this.column.mm.title}' & '${this.column.mm._rtn}' have <br>many to many relation` return `'${this.childTable}' & '${this.parentTable}' have <br>many to many relation`
} else if (this.column.bt) { } else if (this.type === 'bt') {
return `'${this.column.bt.title}' belongs to '${this.column.bt._rtn}'` return `'${this.childColumn.column_name}' belongs to '${this.childTable}'`
} else if (this.column.lk) { } else if (this.type === 'lk') {
return `'${this.column.lk._lcn}' from '${this.column.lk._ltn}' (${this.column.lk.type})` return `'${this.childColumn.column_name}' from '${this.childTable}' (${this.childColumn.uidt})`
} else if (this.column.formula) { } else if (this.type === 'formula') {
return `Formula - ${this.column.formula.value}` return `Formula - ${this.column.colOptions.formula}`
} else if (this.column.rl) { } else if (this.type === 'rl') {
return `${this.column.rl.fn} of ${this.column.rl._rlcn} (${this.column.rl._rltn})` return `'${this.childColumn.column_name}' of '${this.childTable}' (${this.childColumn.uidt})`
} }
return '' return ''
} }
}, },
methods: { methods: {
getMeta(id) {
return this.$store.state.meta.metas[id] || {}
},
async deleteColumn() { async deleteColumn() {
try { try {
await this.$api.dbTableColumn.delete(this.column.id) await this.$api.dbTableColumn.delete(this.column.id)
@ -259,6 +269,7 @@ export default {
* *
* @author Naveen MR <oof1lab@gmail.com> * @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com> * @author Pranav C Balan <pranavxc@gmail.com>
* @author Mert Ersoy <mertmit99@gmail.com>
* *
* @license GNU AGPL version 3 or any later version * @license GNU AGPL version 3 or any later version
* *

Loading…
Cancel
Save