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.
724 lines
19 KiB
724 lines
19 KiB
<template> |
|
<v-container |
|
class="h-100 j-excel-container " |
|
:class="{ |
|
'pa-0 ma-0': ! notFound |
|
}" |
|
fluid |
|
> |
|
<v-alert v-if="notFound" type="warning" class="mx-auto mt-10" outlined max-width="300"> |
|
Not found |
|
</v-alert> |
|
|
|
<template v-else> |
|
<div v-if="viewName" class="model-name text-capitalize"> |
|
<span class="font-weight-bold"> {{ viewName }}</span> <span class="font-weight-regular ml-1" /> |
|
</div> |
|
|
|
<v-toolbar v-if="meta" height="40" dense class="elevation-0 xc-toolbar xc-border-bottom" style="z-index: 7;border-radius: 4px"> |
|
<!-- |
|
<div class="d-flex xc-border align-center search-box"> |
|
<v-menu bottom offset-y> |
|
<template #activator="{on}"> |
|
<div v-on="on"> |
|
<v-icon |
|
class="pa-1 pr-0 ml-2" |
|
small |
|
color="grey" |
|
> |
|
mdi-magnify |
|
</v-icon> |
|
|
|
<v-icon |
|
color="grey" |
|
class="pl-0 pa-1" |
|
small |
|
> |
|
mdi-menu-down |
|
</v-icon> |
|
</div> |
|
</template> |
|
<v-list dense> |
|
<v-list-item |
|
v-for="col in meta.columns" |
|
:key="col._cn" |
|
@click="searchField = col._cn" |
|
> |
|
<span class="caption">{{ col._cn }}</span> |
|
</v-list-item> |
|
</v-list> |
|
</v-menu> |
|
|
|
<v-divider |
|
vertical |
|
/> |
|
|
|
<v-text-field |
|
v-model="searchQuery" |
|
autocomplete="off" |
|
style="min-width: 300px" |
|
flat |
|
dense |
|
solo |
|
hide-details |
|
:placeholder="searchField ? `Search '${searchField}' column` : 'Search all columns'" |
|
class="elevation-0 pa-0 flex-grow-1 caption search-field" |
|
@keyup.enter="loadTableData" |
|
@blur="loadTableData" |
|
/> |
|
</div> |
|
|
|
<span |
|
v-if="relationType && false" |
|
class="caption grey--text" |
|
>{{ refTable }}({{ |
|
relationPrimaryValue |
|
}}) -> {{ relationType === 'hm' ? ' Has Many ' : ' Belongs To ' }} -> {{ table }}</span> |
|
--> |
|
|
|
<v-spacer /> |
|
|
|
<v-btn outlined small text @click="loadTableData"> |
|
<v-icon small class="mr-1" color="grey darken-3"> |
|
mdi-reload |
|
</v-icon> |
|
Reload |
|
</v-btn> |
|
|
|
<fields-menu v-model="showFields" :field-list="fieldList" is-public /> |
|
|
|
<sort-list-menu v-model="sortList" :field-list="realFieldList" /> |
|
|
|
<column-filter-menu v-model="filters" :field-list="realFieldList" /> |
|
|
|
<!-- <v-menu> |
|
<template #activator="{ on, attrs }"> |
|
<v-icon |
|
v-bind="attrs" |
|
small |
|
class="mx-2" |
|
color="grey darken-3" |
|
v-on="on" |
|
> |
|
mdi-arrow-collapse-vertical |
|
</v-icon> |
|
</template> |
|
|
|
<v-list dense class="caption"> |
|
<v-list-item v-for="h in cellHeights" :key="h.size" dense @click.stop="cellHeight = h.size"> |
|
<v-list-item-icon class="mr-1"> |
|
<v-icon small :color="cellHeight === h.size && 'primary'"> |
|
{{ h.icon }} |
|
</v-icon> |
|
</v-list-item-icon> |
|
<v-list-item-title :class="{'primary--text' : cellHeight === h.size}" style="text-transform: capitalize"> |
|
{{ h.size }} |
|
</v-list-item-title> |
|
</v-list-item> |
|
</v-list> |
|
</v-menu>--> |
|
</v-toolbar> |
|
|
|
<div |
|
v-if="meta" |
|
class="nc-grid-wrapper d-flex" |
|
:class="`cell-height-${cellHeight}`" |
|
style="overflow:auto;transition: width 500ms " |
|
> |
|
<div class="flex-grow-1 h-100" style="overflow-y: auto"> |
|
<div ref="table" class="nc-grid" style=" overflow: auto;width:100%"> |
|
<v-skeleton-loader v-if="loadingData" type="table" /> |
|
|
|
<xc-grid-view |
|
v-else |
|
is-public-view |
|
:meta="meta" |
|
:metas="metas" |
|
:data="data" |
|
:available-columns="availableColumns" |
|
:show-fields="showFields" |
|
:belongs-to="belongsTo" |
|
:has-many="hasMany" |
|
:nodes="{dbAlias:''}" |
|
:sql-ui="sqlUi" |
|
:columns-width="columnsWidth" |
|
:password="password" |
|
/> |
|
</div> |
|
|
|
<v-pagination |
|
v-if="data" |
|
v-model="page" |
|
style="max-width: 100%" |
|
:length="Math.ceil(count / size)" |
|
:total-visible="8" |
|
color="primary lighten-2" |
|
@input="loadTableData" |
|
/> |
|
<!-- <div v-else class="d-flex justify-center py-4">--> |
|
<!-- <v-alert type="info" dense class="ma-1 flex-shrink-1">Table is empty</v-alert>--> |
|
<!-- </div>--> |
|
</div> |
|
</div> |
|
</template> |
|
<v-dialog v-model="showPasswordModal" width="400"> |
|
<v-card width="400" class="backgroundColor"> |
|
<v-container fluid> |
|
<v-text-field |
|
v-model="password" |
|
dense |
|
type="password" |
|
solo |
|
flat |
|
hint="Enter the password" |
|
persistent-hint |
|
/> |
|
|
|
<div class="text-center"> |
|
<v-btn small color="primary" @click="unlock"> |
|
Unlock |
|
</v-btn> |
|
</div> |
|
</v-container> |
|
</v-card> |
|
</v-dialog> |
|
</v-container> |
|
</template> |
|
|
|
<script> |
|
|
|
import spreadsheet from '../mixins/spreadsheet' |
|
import ApiFactory from '../apis/apiFactory' |
|
// import EditableCell from "../editableCell"; |
|
import FieldsMenu from '../components/fieldsMenu' |
|
import SortListMenu from '../components/sortListMenu' |
|
import ColumnFilterMenu from '../components/columnFilterMenu' |
|
import XcGridView from '../views/xcGridView' |
|
import { SqlUI } from '@/helpers/sqlUi' |
|
// import ExpandedForm from "../expandedForm"; |
|
|
|
export default { |
|
name: 'XcTable', |
|
components: { XcGridView, ColumnFilterMenu, SortListMenu, FieldsMenu }, |
|
mixins: [spreadsheet], |
|
props: { |
|
env: String, |
|
nodes: Object, |
|
addNewRelationTab: Function, |
|
relationType: String, |
|
relation: Object, |
|
relationIdValue: [String, Number], |
|
refTable: String, |
|
relationPrimaryValue: [String, Number] |
|
}, |
|
data: () => ({ |
|
notFound: false, |
|
viewName: null, |
|
viewType: null, |
|
columnsWidth: {}, |
|
metas: {}, |
|
fieldsOrder: [], |
|
password: null, |
|
showPasswordModal: false, |
|
client: 'mysql', |
|
shareLink: null, |
|
showShareModel: false, |
|
loadingMeta: true, |
|
loadingData: true, |
|
toggleDrawer: false, |
|
selectedItem: 0, |
|
searchField: null, |
|
searchQuery: '', |
|
showExpandModal: false, |
|
selectedExpandRowIndex: null, |
|
selectedExpandRowMeta: null, |
|
meta: null, |
|
navDrawer: true, |
|
selected: { |
|
row: null, |
|
col: null |
|
}, |
|
editEnabled: { |
|
row: null, |
|
col: null |
|
}, |
|
page: 1, |
|
count: 0, |
|
size: 25, |
|
xWhere: '', |
|
sort: '', |
|
|
|
cellHeight: 'small', |
|
|
|
isAnyFieldHidden: false, |
|
opList: ['is equal', 'is not equal', 'is like', 'is not like', 'is empty', 'is not empty', 'is null', 'is not null'], |
|
fieldFilter: '', |
|
|
|
filters: [], |
|
sortList: [], |
|
|
|
data: [], |
|
spreadsheet: null, |
|
options: { |
|
allowToolbar: true, |
|
columnSorting: false |
|
}, |
|
filteredData: [], |
|
showFields: {}, |
|
// fieldList: [], |
|
|
|
cellHeights: [{ |
|
size: 'small', |
|
icon: 'mdi-view-headline' |
|
}, { |
|
size: 'medium', |
|
icon: 'mdi-view-sequential' |
|
}, { |
|
size: 'large', |
|
icon: 'mdi-view-stream' |
|
}, { |
|
size: 'xlarge', |
|
icon: 'mdi-card' |
|
}], |
|
rowContextMenu: null, |
|
modelName: null |
|
}), |
|
computed: { |
|
concatenatedXWhere() { |
|
let where = '' |
|
if (this.searchField && this.searchQuery.trim()) { |
|
if (['text', 'string'].includes(this.sqlUi.getAbstractType(this.meta.columns.find(({ cn }) => cn === this.searchField)))) { |
|
where = `(${this.searchField},like,%${this.searchQuery.trim()}%)` |
|
} else { |
|
where = `(${this.searchField},eq,${this.searchQuery.trim()})` |
|
} |
|
} |
|
|
|
if (!where) { |
|
return this.xWhere |
|
} |
|
|
|
return this.xWhere ? where + `~and(${this.xWhere})` : where |
|
}, |
|
sqlUi() { |
|
// todo: replace with correct client |
|
return SqlUI.create({ client: this.client }) |
|
}, |
|
queryParams() { |
|
return { |
|
limit: this.size, |
|
offset: this.size * (this.page - 1), |
|
where: this.concatenatedXWhere, |
|
sort: this.sort |
|
} |
|
}, |
|
api() { |
|
return ApiFactory.create(this.$store.getters['project/GtrProjectType'], this.table, this.meta && this.meta.columns, this, this.meta) |
|
}, |
|
colLength() { |
|
return (this.meta && this.meta.columns && this.meta.columns.length) || 0 |
|
}, |
|
visibleColLength() { |
|
return (this.meta && this.meta.columns && this.meta.columns.length) || 0 |
|
}, |
|
rowLength() { |
|
return (this.data && this.data.length) || 0 |
|
}, |
|
edited() { |
|
return this.data && this.data.some(r => r.rowMeta && (r.rowMeta.new || r.rowMeta.changed)) |
|
}, |
|
hasMany() { |
|
return this.meta && this.meta.hasMany |
|
? this.meta.hasMany.reduce((hm, o) => { |
|
hm[o.rcn] = hm[o.rcn] || [] |
|
hm[o.rcn].push(o) |
|
return hm |
|
}, {}) |
|
: {} |
|
}, |
|
belongsTo() { |
|
return this.meta && this.meta.belongsTo |
|
? this.meta.belongsTo.reduce((bt, o) => { |
|
bt[o._cn] = o |
|
return bt |
|
}, {}) |
|
: {} |
|
}, |
|
table() { |
|
if (this.relationType === 'hm') { |
|
return this.relation.tn |
|
} else if (this.relationType === 'bt') { |
|
return this.relation.rtn |
|
} |
|
|
|
return this.nodes.tn || this.nodes.view_name |
|
}, |
|
primaryValueColumn() { |
|
if (!this.meta || !this.meta.columns) { |
|
return '' |
|
} |
|
|
|
const pkIndex = this.meta.columns.findIndex(c => c.pk) |
|
|
|
if (pkIndex > -1 && pkIndex <= this.colLength - 1) { |
|
return this.meta.columns[pkIndex + 1]._cn |
|
} |
|
return this.meta.columns[0]._cn |
|
} |
|
}, |
|
async mounted() { |
|
try { |
|
await this.loadMetaData() |
|
if (!this.showPasswordModal && !this.notFound) { |
|
await this.loadTableData() |
|
} |
|
} catch (e) { |
|
console.log(e) |
|
} |
|
this.searchField = this.primaryValueColumn |
|
}, |
|
created() { |
|
/* if (this.relationType === 'hm') { |
|
this.filters.push({ |
|
field: this.relation.cn, |
|
op: 'is equal', |
|
value: this.relationIdValue, |
|
readOnly: true |
|
}) |
|
} else if (this.relationType === 'bt') { |
|
this.filters.push({ |
|
field: this.relation.rcn, |
|
op: 'is equal', |
|
value: this.relationIdValue, |
|
readOnly: true |
|
}) |
|
} */ |
|
document.addEventListener('keydown', this.onKeyDown) |
|
}, |
|
beforeDestroy() { |
|
document.removeEventListener('keydown', this.onKeyDown) |
|
}, |
|
methods: { |
|
comingSoon() { |
|
this.$toast.info('Coming soon!').goAway(3000) |
|
}, |
|
makeSelected(col, row) { |
|
if (this.selected.col !== col || this.selected.row !== row) { |
|
this.selected = { col, row } |
|
this.editEnabled = {} |
|
} |
|
}, |
|
makeEditable(col, row) { |
|
if (this.meta.columns[col].ai) { |
|
return this.$toast.info('Auto Increment field is not editable').goAway(3000) |
|
} |
|
if (this.meta.columns[col].pk && !this.data[row].rowMeta.new) { |
|
return this.$toast.info('Editing primary key not supported').goAway(3000) |
|
} |
|
if (this.editEnabled.col !== col || this.editEnabled.row !== row) { |
|
this.editEnabled = { col, row } |
|
} |
|
}, |
|
|
|
async handleKeyDown({ metaKey, key, altKey, shiftKey, ctrlKey }) { |
|
console.log(metaKey, key, altKey, shiftKey, ctrlKey) |
|
// ctrl + s -> save |
|
// ctrl + l -> reload |
|
// ctrl + n -> new |
|
switch ([ |
|
this._isMac ? metaKey : ctrlKey, |
|
key].join('_')) { |
|
case 'true_s' : |
|
this.edited && await this.save() |
|
break |
|
case 'true_l' : |
|
await this.loadTableData() |
|
break |
|
case 'true_n' : |
|
this.insertNewRow(true) |
|
break |
|
} |
|
}, |
|
|
|
addFilter() { |
|
this.filters.push({ |
|
field: '', |
|
op: '', |
|
value: '', |
|
logicOp: 'and' |
|
}) |
|
this.filters = this.filters.slice() |
|
}, |
|
addSort() { |
|
this.sortList.push({ |
|
field: '', |
|
order: '' |
|
}) |
|
this.filters = this.filters.slice() |
|
}, |
|
async loadMetaData() { |
|
this.loading = true |
|
try { |
|
// eslint-disable-next-line camelcase |
|
const { |
|
meta, |
|
// model_name, |
|
view_name, |
|
view_type, |
|
client, |
|
query_params: qp, |
|
db_alias: dbAlias, |
|
relatedTableMetas |
|
} = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'sharedViewGet', { |
|
view_id: this.$route.params.id, |
|
password: this.password |
|
}]) |
|
|
|
this.fieldsOrder = qp.fieldsOrder || [] |
|
this.viewName = view_name |
|
this.viewType = view_type |
|
|
|
this.columnsWidth = qp.columnsWidth || {} |
|
|
|
this.client = client |
|
this.meta = meta |
|
this.query_params = qp |
|
this.dbAlias = dbAlias |
|
this.metas = relatedTableMetas |
|
|
|
this.showFields = this.query_params.showFields || {} |
|
|
|
// this.fieldList = Object.keys(this.showFields) |
|
|
|
let fields = this.query_params.fieldsOrder || [] |
|
if (!fields.length) { fields = Object.keys(this.showFields) } |
|
// eslint-disable-next-line camelcase |
|
|
|
let columns = this.meta.columns |
|
if (this.meta && this.meta.v) { |
|
columns = [...columns, ...this.meta.v.map(v => ({ ...v, virtual: 1 }))] |
|
} |
|
|
|
{ |
|
const _ref = {} |
|
columns.forEach((c) => { |
|
if (c.virtual && c.bt) { |
|
c.prop = `${c.bt.rtn}Read` |
|
} |
|
if (c.virtual && c.mm) { |
|
c.prop = `${c.mm.rtn}MMList` |
|
} |
|
if (c.virtual && c.hm) { |
|
c.prop = `${c.hm.tn}List` |
|
} |
|
|
|
// if (c.virtual && c.lk) { |
|
// c.alias = `${c.lk._lcn} (from ${c.lk._ltn})` |
|
// } else { |
|
c.alias = c._cn |
|
// } |
|
if (c.alias in _ref) { |
|
c.alias += _ref[c.alias]++ |
|
} else { |
|
_ref[c.alias] = 1 |
|
} |
|
}) |
|
} |
|
} catch (e) { |
|
if (e.message === 'Not found' || e.message === 'Meta not found') { |
|
this.notFound = true |
|
} else if (e.message === 'Invalid password') { |
|
this.showPasswordModal = true |
|
} else { |
|
console.log(e) |
|
} |
|
} |
|
|
|
this.loadingData = false |
|
}, |
|
|
|
async loadTableData() { |
|
this.loadingData = true |
|
try { |
|
// eslint-disable-next-line camelcase |
|
const { data: list, count, model_name, client } = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ |
|
query: this.queryParams |
|
}, 'getSharedViewData', { |
|
view_id: this.$route.params.id, |
|
password: this.password |
|
}]) |
|
|
|
this.client = client |
|
|
|
// this.showFields = queryParams && queryParams.showFields |
|
// this.meta = meta |
|
// eslint-disable-next-line camelcase |
|
this.modelName = model_name |
|
|
|
this.count = count |
|
this.data = list.map(row => ({ |
|
row, |
|
oldRow: { ...row }, |
|
rowMeta: {} |
|
})) |
|
} catch (e) { |
|
this.showPasswordModal = true |
|
} |
|
|
|
this.loadingData = false |
|
}, |
|
onKeyDown(e) { |
|
if (this.selected.col === null || this.selected.row === null) { |
|
return |
|
} |
|
switch (e.keyCode) { |
|
// left |
|
case 37: |
|
if (this.selected.col > 0) { |
|
this.selected.col-- |
|
} |
|
break |
|
// right |
|
case 39: |
|
if (this.selected.col < this.colLength - 1) { |
|
this.selected.col++ |
|
} |
|
break |
|
// up |
|
case 38: |
|
if (this.selected.row > 0) { |
|
this.selected.row-- |
|
} |
|
break |
|
// down |
|
case 40: |
|
if (this.selected.row < this.rowLength - 1) { |
|
this.selected.row++ |
|
} |
|
break |
|
// enter |
|
case 13: |
|
this.makeEditable(this.selected.col, this.selected.row) |
|
break |
|
} |
|
}, |
|
showRowContextMenu(e, row, rowMeta, index) { |
|
e.preventDefault() |
|
this.rowContextMenu = false |
|
this.$nextTick(() => { |
|
this.rowContextMenu = { |
|
x: e.clientX, |
|
y: e.clientY, |
|
row, |
|
index, |
|
rowMeta |
|
} |
|
}) |
|
}, |
|
expandRow(row, rowMeta) { |
|
this.showExpandModal = true |
|
this.selectedExpandRowIndex = row |
|
this.selectedExpandRowMeta = rowMeta |
|
}, |
|
async unlock() { |
|
this.showPasswordModal = false |
|
await this.loadMetaData() |
|
await this.loadTableData() |
|
} |
|
} |
|
} |
|
</script> |
|
<style scoped> |
|
|
|
/deep/ .v-input__control .v-input__slot .v-input--selection-controls__input { |
|
transform: scale(.85); |
|
margin-right: 0; |
|
|
|
} |
|
|
|
/deep/ .xc-toolbar .v-input__slot, .navigation .v-input__slot { |
|
box-shadow: none !important; |
|
} |
|
|
|
/deep/ .navigation .v-input__slot input::placeholder { |
|
font-size: .8rem; |
|
} |
|
|
|
/deep/ .v-btn { |
|
text-transform: capitalize; |
|
} |
|
|
|
/deep/ .xc-bt-chip { |
|
margin-right: 12px; |
|
transition: .4s margin-right, .4s padding-right; |
|
} |
|
|
|
/deep/ .xc-border.search-box { |
|
overflow: visible; |
|
border-radius: 4px; |
|
} |
|
|
|
/deep/ .xc-border.search-box .v-input { |
|
transition: .4s border-color; |
|
} |
|
|
|
/deep/ .xc-border.search-box .v-input--is-focused { |
|
border: 1px solid var(--v-primary-base) !important; |
|
margin: -1px; |
|
} |
|
|
|
/deep/ .search-field.v-text-field.v-text-field--solo.v-input--dense > .v-input__control { |
|
min-height: auto; |
|
} |
|
|
|
.model-name { |
|
position: fixed; |
|
top: 5px; |
|
pointer-events: none; |
|
left: 0; |
|
right: 0; |
|
text-align: center; |
|
z-index: 9999; |
|
width: 100%; |
|
font-size: 1.2rem; |
|
color: white; |
|
height: 40px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.nc-grid-wrapper{ |
|
height:calc(100vh - 120px) |
|
} |
|
|
|
.nc-grid{ |
|
height: calc(100% - 34px) |
|
} |
|
|
|
</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/>. |
|
* |
|
*/ |
|
-->
|
|
|