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

370 lines
9.5 KiB

feat: kanban view (#903) * feat: enable kanban button on nav drawer Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: move conditions to isKanban Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: add basic layout & integrate with view data Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: add missing components Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: emit expandForm Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add boolean cell for kanban card Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: add :disable to boollean cell Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * style: kanban card Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: enable kanban share view on drawer Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: share links Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: kanban shared page Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: implement updateBlock logic Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: reload kanban view after drag n drop Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: update CsvExportImport path Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add grouping field for kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add uncategorized stack Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * style: match stack title color with that of grouping field Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * style: kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: implement groupingField change logic Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: watch data prop change Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * style: fix center title n padding Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: add footer Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * test(cypress): include kanban viewTest Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add insertNewRow logic to kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add new stack column Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: include loadTableData Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: reload issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: fetch data using api Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add api filtering logic Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: inconsistent content Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: merge from upstream master Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: hide new stack button Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: populate the grouping field to new record for kanban Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: hide pagination in kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * style: display add new record as an icon Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add numbers of records under each stack Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: missing uncategorized records Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: kanban preset value issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: kanban layout & 0 record issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: set toast position Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: lint Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add v-skeleton-loader Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: rm toast if there is no grouping column Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: remove :loading Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: move kanban logic to rowsXcDataTable Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: update kanban block logic Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: remove unused code Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: update kanban ui for status and grouping field Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: move set kanban logic to rowsXcDataTable Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: new kanban record issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: infinite scrolling on kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: remove updateKanbanBlock Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: splash issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: empty kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: move skeleton-loader to rowsXcDataTable.vue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: avoid reload after saving in expanded form Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * refak: remove unused clonedBlock Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: handle composite primary key Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: kanban refresh issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: update reload logic for kanban Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * feat: add total number of records for each kanban stack Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: kanban display issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * wip: kanban share view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: insert new row issue Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * fix: missing data after reload Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: temporarily disable share view for kanban view Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com> * chore: disable kanban viewTest temporarily Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>
3 years ago
<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="elevation-0 xc-toolbar xc-border-bottom" style="z-index: 7;border-radius: 4px">
<v-spacer />
<v-btn outlined small text @click="reload">
<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" />
<csv-export-import :query-params="{...queryParams, showFields}" :public-view-id="$route.params.id" :meta="meta" />
</v-toolbar>
<div
v-if="meta"
class="nc-grid-wrapper d-flex"
:class="`cell-height-${cellHeight}`"
style="overflow:auto;transition: width 500ms "
>
<v-container fluid v-if="loadingData">
<v-row>
<v-col v-for="idx in 5" :key="idx">
<v-skeleton-loader type="image@3"></v-skeleton-loader>
</v-col>
</v-row>
</v-container>
<kanban-view
v-if="!loadingData && kanban.data.length"
:nodes="nodes"
:table="table"
:show-fields="showFields"
:available-columns="availableColumns"
:meta="meta"
:kanban="kanban"
:sql-ui="sqlUi"
:primary-value-column="primaryValueColumn"
:grouping-field.sync="groupingField"
:api="api"
@loadMoreKanbanData="(groupingFieldVal) => loadMoreKanbanData(groupingFieldVal)"
/>
</div>
</template>
</v-container>
</template>
<script>
/* eslint-disable camelcase */
import spreadsheet from '../mixins/spreadsheet'
import FieldsMenu from '../components/fieldsMenu'
import SortListMenu from '../components/sortListMenu'
import ColumnFilterMenu from '../components/columnFilterMenu'
import CsvExportImport from '~/components/project/spreadsheet/components/exportImport'
import KanbanView from '@/components/project/spreadsheet/views/kanbanView'
export default {
name: 'XcKanban',
components: { CsvExportImport, ColumnFilterMenu, SortListMenu, FieldsMenu, KanbanView },
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,
kanban: {
data: [],
stages: [],
blocks: [],
recordCnt: {},
recordTotalCnt: {},
groupingColumnItems: [],
loadingData : true,
selectedExpandRow: null,
selectedExpandOldRow: null,
selectedExpandRowMeta: null,
},
}),
computed: {
},
async mounted() {
try {
await this.loadMetaData()
if (!this.showPasswordModal && !this.notFound) {
await this.loadKanbanData()
}
} catch (e) {
console.log(e)
}
this.searchField = this.primaryValueColumn
},
methods: {
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 = '_noco',
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.sortList = qp.sortList || []
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`
}
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 loadKanbanData() {
this.loadingData = true
try {
// TODO
} catch (e) {
this.showPasswordModal = true
}
this.loadingData = false
},
async unlock() {
this.showPasswordModal = false
await this.reload()
},
async reload() {
await this.loadMetaData()
await this.loadKanbanData()
}
}
}
</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>
* @author Wing-Kam Wong <wingkwong.code@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/>.
*
*/
-->