多维表格
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.
 
 
 
 
 
 

621 lines
16 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">
<span class="font-weight-bold"> {{ viewName }}</span> <span class="font-weight-regular ml-1" />
</div>
<v-toolbar
v-if="meta"
height="40"
dense
class="nc-table-toolbar elevation-0 xc-toolbar xc-border-bottom"
style="z-index: 7;border-radius: 4px"
>
<div class="d-inline-flex">
<fields-menu
v-model="showFields"
:field-list="fieldList"
:fields-order.sync="fieldsOrder"
is-public
:meta="meta"
:show-system-fields="showSystemFields"
/>
<sort-list-menu
v-model="sorts"
:meta="meta"
:shared="true"
:field-list="realFieldList"
@input="loadTableData"
/>
<column-filter-menu
v-model="filters"
:meta="meta"
:field-list="realFieldList"
:shared="true"
@input="loadTableData"
/>
<more-actions
v-if="allowDownload"
:is-view="isView"
:query-params="{...queryParams, showFields, fieldsOrder}"
:public-view-id="$route.params.id"
:meta="meta"
:req-payload="{filters, sorts, password}"
/>
</div>
<v-spacer class="h-100" @dblclick="debug=true" />
</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="tableMeta"
:metas="metas"
:data="data"
:available-columns="availableColumns"
:show-fields="showFields"
:nodes="{...nodes, dbConnection:{client}}"
: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>
</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
autocomplete="shared-table-password"
browser-autocomplete="shared-table-password"
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>
/* eslint-disable camelcase */
import { ErrorMessages, SqlUiFactory } from 'nocodb-sdk'
import spreadsheet from '../mixins/spreadsheet'
import ApiFactory from '../apis/apiFactory'
import FieldsMenu from '../components/FieldsMenu'
import SortListMenu from '../components/SortListMenu'
import ColumnFilterMenu from '../components/ColumnFilterMenu'
import XcGridView from '../views/GridView'
import MoreActions from '~/components/project/spreadsheet/components/MoreActions'
export default {
name: 'XcTable',
components: {
MoreActions,
XcGridView,
ColumnFilterMenu,
SortListMenu,
FieldsMenu
},
mixins: [spreadsheet],
props: {
env: String,
nodes: Object,
relationType: String,
relation: Object,
relationIdValue: [String, Number],
refTable: String,
relationPrimaryValue: [String, Number],
isView: Boolean
},
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: [],
sorts: [],
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,
tableMeta: null,
allowDownload: true,
}),
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 SqlUiFactory.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))
},
table() {
if (this.relationType === 'hm') {
return this.relation.table_name
} else if (this.relationType === 'bt') {
return this.relation.rtn
}
return this.nodes.table_name || this.nodes.view_name
},
primaryValueColumn() {
if (!this.meta || !this.meta.columns) {
return ''
}
const pvIndex = this.meta.columns.findIndex(c => c.pv)
if (pvIndex > -1 && pvIndex <= this.colLength - 1) {
return this.meta.columns[pvIndex].title
}
const pkIndex = this.meta.columns.findIndex(c => c.pv)
if (pkIndex > -1 && pkIndex < this.colLength - 1) {
return this.meta.columns[pkIndex + 1].title
}
return this.meta.columns[0].title
}
},
async mounted() {
try {
await this.loadMetaData()
if (!this.showPasswordModal && !this.notFound) {
await this.loadTableData()
}
} catch (e) {
console.log(e)
}
this.searchField = this.primaryValueColumn
},
created() {
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
}) {
// 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.sorts.push({
field: '',
order: ''
})
this.filters = this.filters.slice()
},
async loadMetaData() {
this.loading = true
try {
this.viewMeta = (await this.$api.public.sharedViewMetaGet(this.$route.params.id, {
headers: {
'xc-password': this.password
}
}))
this.tableMeta = this.viewMeta.model
this.meta = { ...this.viewMeta.model }
this.meta.columns = this.meta.columns.filter(c => c.show)
this.metas = this.viewMeta.relatedMetas
this.showSystemFields = this.viewMeta.show_system_fields
this.sorts = this.viewMeta.sorts
this.viewName = this.viewMeta.title
this.client = this.viewMeta.client
this.allowDownload = this.viewMeta.download
} catch (e) {
if (e.response && e.response.status === 404) {
this.notFound = true
} else if (await this._extractSdkResponseErrorMsg(e) === ErrorMessages.INVALID_SHARED_VIEW_PASSWORD) {
this.showPasswordModal = true
} else {
console.log(e)
}
}
this.loadingData = false
},
async loadTableData() {
this.loadingData = true
try {
const {
data: {
list,
pageInfo: { totalRows: count }
}
} = (await this.$api.public.dataList(
this.$route.params.id,
{
sortArrJson: JSON.stringify(this.sorts && this.sorts.map(({
fk_column_id,
direction
}) => ({
direction,
fk_column_id
}))),
filterArrJson: JSON.stringify(this.filters),
...this.queryParams
}, {
headers: { 'xc-password': this.password }
}
))
this.count = count
this.data = list.map(row => ({
row,
oldRow: { ...row },
rowMeta: {}
}))
} catch (e) {
if (e.response && e.response.status === 404) {
this.notFound = true
} else if (await this._extractSdkResponseErrorMsg(e) === ErrorMessages.INVALID_SHARED_VIEW_PASSWORD) {
this.showPasswordModal = true
} else {
console.log(e)
}
}
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.reload()
},
async reload() {
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/>.
*
*/
-->