Browse Source

fix: hide hidden columns from shared gridview field list

re #1654

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/1668/head
Pranav C 3 years ago
parent
commit
72e15a5a25
  1. 34
      packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
  2. 3
      packages/nc-gui/components/project/spreadsheet/public/xcTable.vue
  3. 39
      packages/nc-gui/components/project/spreadsheet/views/formView.vue
  4. 4
      packages/nc-gui/components/project/spreadsheet/views/galleryView.vue
  5. 6
      packages/nc-gui/components/project/spreadsheet/views/kanbanView.vue
  6. 16
      packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue

34
packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js

@ -108,25 +108,12 @@ export default {
} }
{ {
const _ref = {}
columns.forEach((c) => { columns.forEach((c) => {
// if (c.virtual && c.lk) {
// c.alias = `${c.lk._lcn} (from ${c.lk._ltn})`
// } else {
c.alias = c.title c.alias = c.title
// }
if (c.alias in _ref) {
c.alias += _ref[c.alias]++
} else {
_ref[c.alias] = 1
}
}) })
} }
return columns return columns
}, },
// allColumnsNames() {
// return this.allColumns && this.allColumns.length ? this.allColumns.reduce((a, c) => [...a, c.column_name, c.title], []) : []
// },
availableColumns() { availableColumns() {
let columns = [] let columns = []
@ -140,32 +127,15 @@ export default {
columns = filterOutSystemColumns(this.meta.columns) columns = filterOutSystemColumns(this.meta.columns)
} }
if (this.meta && this.meta.v) {
columns = [...columns, ...this.meta.v.map(v => ({
...v,
virtual: 1
}))]
}
{ {
const _ref = {}
columns.forEach((c) => { columns.forEach((c) => {
// if (c.virtual && c.lk) {
// c.alias = `${c.lk._lcn} (from ${c.lk._ltn})`
// } else {
c.alias = c.title c.alias = c.title
// }
if (c.alias in _ref) {
c.alias += _ref[c.alias]++
} else {
_ref[c.alias] = 1
}
}) })
} }
if (this.fieldsOrder.length) { if (this.fieldsOrder.length) {
return [...columns].sort((c1, c2) => { return [...columns].sort((c1, c2) => {
const i1 = this.fieldsOrder.indexOf(c1.alias) const i1 = this.fieldsOrder.indexOf(c1.title)
const i2 = this.fieldsOrder.indexOf(c2.alias) const i2 = this.fieldsOrder.indexOf(c2.title)
return (i1 === -1 ? Infinity : i1) - (i2 === -1 ? Infinity : i2) return (i1 === -1 ? Infinity : i1) - (i2 === -1 ? Infinity : i2)
}) })
} }

3
packages/nc-gui/components/project/spreadsheet/public/xcTable.vue

@ -29,6 +29,7 @@
:fields-order.sync="fieldsOrder" :fields-order.sync="fieldsOrder"
is-public is-public
:meta="meta" :meta="meta"
:show-system-fields="showSystemFields"
/> />
<sort-list-menu <sort-list-menu
@ -393,7 +394,9 @@ export default {
} }
})) }))
this.meta = this.viewMeta.model this.meta = this.viewMeta.model
this.meta.columns = this.meta.columns.filter(c => c.show)
this.metas = this.viewMeta.relatedMetas this.metas = this.viewMeta.relatedMetas
this.showSystemFields = this.viewMeta.show_system_fields
this.sorts = this.viewMeta.sorts this.sorts = this.viewMeta.sorts
this.viewName = this.viewMeta.title this.viewName = this.viewMeta.title

39
packages/nc-gui/components/project/spreadsheet/views/formView.vue

@ -56,7 +56,7 @@
> >
<v-card <v-card
v-for="(col) in hiddenColumns" v-for="(col) in hiddenColumns"
:key="col.alias" :key="col.title"
class="pa-2 my-2 item pointer elevation-0" class="pa-2 my-2 item pointer elevation-0"
@mousedown="moved=false" @mousedown="moved=false"
@mousemove="moved=false" @mousemove="moved=false"
@ -178,13 +178,13 @@
> >
<div <div
v-for="(col,i) in columns" v-for="(col,i) in columns"
:key="col.alias" :key="col.title"
class="nc-field-wrapper item px-4 my-3 pointer" class="nc-field-wrapper item px-4 my-3 pointer"
:class="{'nc-editable':isEditable , 'active-row': isActiveRow(col) , 'py-4': !isActiveRow(col) , 'pb-4':isActiveRow(col)}" :class="{'nc-editable':isEditable , 'active-row': isActiveRow(col) , 'py-4': !isActiveRow(col) , 'pb-4':isActiveRow(col)}"
> >
<div <div
v-click-outside="() => onClickOutside(col)" v-click-outside="() => onClickOutside(col)"
@click="activeRow= col.alias" @click="activeRow= col.title"
> >
<template <template
v-if="_isUIAllowed('editFormView')" v-if="_isUIAllowed('editFormView')"
@ -195,10 +195,10 @@
</template> </template>
<div <div
v-if="localParams.fields && localParams.fields[col.alias]" v-if="localParams.fields && localParams.fields[col.title]"
:class="{ :class="{
'active-row' : active === col.title, 'active-row' : active === col.title,
required: isRequired(col, localState, localParams.fields[col.alias].required) required: isRequired(col, localState, localParams.fields[col.title].required)
}" }"
> >
<div class="nc-field-editables" :class="{'nc-show' : isActiveRow(col)}"> <div class="nc-field-editables" :class="{'nc-show' : isActiveRow(col)}">
@ -256,7 +256,7 @@
:nodes="nodes" :nodes="nodes"
:is-form="true" :is-form="true"
:meta="meta" :meta="meta"
:required="isRequired(col, localState, localParams.fields[col.alias].required)" :required="isRequired(col, localState, localParams.fields[col.title].required)"
/> />
<header-cell <header-cell
v-else v-else
@ -265,7 +265,7 @@
:value="col.label || col.title" :value="col.label || col.title"
:column="col" :column="col"
:sql-ui="sqlUi" :sql-ui="sqlUi"
:required="isRequired(col, localState, localParams.fields[col.alias].required)" :required="isRequired(col, localState, localParams.fields[col.title].required)"
/> />
</label> </label>
@ -287,11 +287,11 @@
:is-form="true" :is-form="true"
:hint="col.description" :hint="col.description"
:required="col.required" :required="col.required"
@update:localState="state => $set(virtual,col.alias, state)" @update:localState="state => $set(virtual,col.title, state)"
@updateCol="updateCol" @updateCol="updateCol"
/> />
<div <div
v-if="$v.virtual && $v.virtual.$dirty && $v.virtual[col.alias] && (!$v.virtual[col.alias].required || !$v.virtual[col.alias].minLength)" v-if="$v.virtual && $v.virtual.$dirty && $v.virtual[col.title] && (!$v.virtual[col.title].required || !$v.virtual[col.alias].minLength)"
class="error--text caption" class="error--text caption"
> >
Field is required. Field is required.
@ -512,18 +512,18 @@ export default {
virtual: {} virtual: {}
} }
for (const column of this.columns) { for (const column of this.columns) {
if (!this.localParams || !this.localParams.fields || !this.localParams.fields[column.alias]) { if (!this.localParams || !this.localParams.fields || !this.localParams.fields[column.title]) {
continue continue
} }
if (!column.virtual && (((column.rqd || column.notnull) && !column.cdf) || (column.pk && !(column.ai || column.default)) || this.localParams.fields[column.alias].required)) { if (!column.virtual && (((column.rqd || column.notnull) && !column.cdf) || (column.pk && !(column.ai || column.default)) || this.localParams.fields[column.title].required)) {
obj.localState[column.title] = { required } obj.localState[column.title] = { required }
} else if (column.bt) { } else if (column.bt) {
const col = this.meta.columns.find(c => c.column_name === column.bt.column_name) const col = this.meta.columns.find(c => c.column_name === column.bt.column_name)
if ((col.rqd && !col.default) || this.localParams.fields[column.alias].required) { if ((col.rqd && !col.default) || this.localParams.fields[column.title].required) {
obj.localState[col.title] = { required } obj.localState[col.title] = { required }
} }
} else if (column.virtual && this.localParams.fields[column.alias].required && (column.mm || column.hm)) { } else if (column.virtual && this.localParams.fields[column.title].required && (column.mm || column.hm)) {
obj.virtual[column.alias] = { obj.virtual[column.title] = {
minLength: minLength(1), minLength: minLength(1),
required required
} }
@ -589,7 +589,7 @@ export default {
watch: { watch: {
'meta.columns'() { 'meta.columns'() {
this.meta.columns.forEach((c) => { this.meta.columns.forEach((c) => {
this.localParams.fields[c.alias] = this.localParams.fields[c.alias] || {} this.localParams.fields[c.title] = this.localParams.fields[c.title] || {}
}) })
}, },
submitted(val) { submitted(val) {
@ -616,7 +616,7 @@ export default {
fields: {} fields: {}
}, this.localParams) }, this.localParams)
this.availableColumns.forEach((c) => { this.availableColumns.forEach((c) => {
localParams.fields[c.alias] = localParams.fields[c.alias] || {} localParams.fields[c.title] = localParams.fields[c.title] || {}
}) })
this.localParams = localParams this.localParams = localParams
// this.columns = [...this.availableColumns] // this.columns = [...this.availableColumns]
@ -706,7 +706,6 @@ export default {
const meta = this.$store.state.meta.metas[this.meta.id] const meta = this.$store.state.meta.metas[this.meta.id]
this.fields = meta.columns.map(c => ({ this.fields = meta.columns.map(c => ({
...c, ...c,
alias: c.title,
fk_column_id: c.id, fk_column_id: c.id,
fk_view_id: this.viewId, fk_view_id: this.viewId,
...(fieldById[c.id] ? fieldById[c.id] : {}), ...(fieldById[c.id] ? fieldById[c.id] : {}),
@ -778,7 +777,7 @@ export default {
(column.pk && !column.ai && !column.cdf) (column.pk && !column.ai && !column.cdf)
if (column.uidt === UITypes.LinkToAnotherRecord && column.colOptions.type === RelationTypes.BELONGS_TO) { if (column.uidt === UITypes.LinkToAnotherRecord && column.colOptions.type === RelationTypes.BELONGS_TO) {
const col = this.meta.columns.find(c => c.id === column.colOptions.fk_child_column_id) const col = this.meta.columns.find(c => c.id === column.colOptions.fk_child_column_id)
if ((col.rqd && !col.default) || this.localParams.fields[column.alias].required) { if ((col.rqd && !col.default) || this.localParams.fields[column.title].required) {
isRequired = true isRequired = true
} }
} }
@ -798,10 +797,10 @@ export default {
this.$set(this.localState, column, id) this.$set(this.localState, column, id)
}, },
isActiveRow(col) { isActiveRow(col) {
return this.activeRow === col.alias return this.activeRow === col.title
}, },
onClickOutside(col) { onClickOutside(col) {
this.activeRow = this.activeRow === col.alias ? null : this.activeRow this.activeRow = this.activeRow === col.title ? null : this.activeRow
}, },
handleMouseUp(col) { handleMouseUp(col) {
if (!this.moved) { if (!this.moved) {

4
packages/nc-gui/components/project/spreadsheet/views/galleryView.vue

@ -43,8 +43,8 @@
<v-row class=""> <v-row class="">
<v-col <v-col
v-for="(col) in fields" v-for="(col) in fields"
v-show="showFields[col.alias|| col.title]" v-show="showFields[ col.title]"
:key="col.alias || col.title" :key="col.title"
class="col-12 mt-1 mb-2 " class="col-12 mt-1 mb-2 "
> >
<label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize caption grey--text"> <label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize caption grey--text">

6
packages/nc-gui/components/project/spreadsheet/views/kanbanView.vue

@ -21,8 +21,8 @@
<v-row class=""> <v-row class="">
<v-col <v-col
v-for="(col) in fields" v-for="(col) in fields"
v-show="showFields[col.alias|| col.title]" v-show="showFields[col.title]"
:key="col.alias || col.title" :key="col.title"
class="kanban-col col-12" class="kanban-col col-12"
> >
<label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize caption grey--text"> <label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize caption grey--text">
@ -137,7 +137,7 @@ export default {
) || [] ) || []
}, },
groupingFieldColumn() { groupingFieldColumn() {
return this.fields.filter(o => o.alias === this.groupingField)[0] return this.fields.filter(f => f.title === this.groupingField)[0]
} }
}, },
mounted() { mounted() {

16
packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue

@ -34,14 +34,14 @@
</th> </th>
<th <th
v-for="(col) in availableColumns" v-for="(col) in availableColumns"
v-show="showFields[col.alias]" v-show="showFields[col.title]"
:key="col.alias" :key="col.title"
v-xc-ver-resize v-xc-ver-resize
class="grey-border caption font-wight-regular nc-grid-header-cell" class="grey-border caption font-wight-regular nc-grid-header-cell"
:class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4 grey--text text--darken-2'" :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4 grey--text text--darken-2'"
:data-col="col.alias" :data-col="col.title"
@xcresize="onresize(col.id,$event), log('xcresize')" @xcresize="onresize(col.id,$event), log('xcresize')"
@xcresizing="onXcResizing(col.alias,$event)" @xcresizing="onXcResizing(col.title,$event)"
@xcresized="resizingCol = null" @xcresized="resizingCol = null"
> >
<!-- :style="columnsWidth[col.title] ? `min-width:${columnsWidth[col.title]}; max-width:${columnsWidth[col.title]}` : ''" <!-- :style="columnsWidth[col.title] ? `min-width:${columnsWidth[col.title]}; max-width:${columnsWidth[col.title]}` : ''"
@ -170,8 +170,8 @@
</td> </td>
<td <td
v-for="(columnObj,col) in availableColumns" v-for="(columnObj,col) in availableColumns"
v-show="showFields[columnObj.alias]" v-show="showFields[columnObj.title]"
:key="row + columnObj.alias" :key="row + columnObj.title"
class="cell pointer nc-grid-cell" class="cell pointer nc-grid-cell"
:class="{ :class="{
'active' :!isPublicView && selected.col === col && selected.row === row && isEditable , 'active' :!isPublicView && selected.col === col && selected.row === row && isEditable ,
@ -179,7 +179,7 @@
'text-center': isCentrallyAligned(columnObj), 'text-center': isCentrallyAligned(columnObj),
'required': isRequired(columnObj,rowObj) 'required': isRequired(columnObj,rowObj)
}" }"
:data-col="columnObj.alias" :data-col="columnObj.title"
@dblclick="makeEditable(col,row,columnObj.ai,rowMeta)" @dblclick="makeEditable(col,row,columnObj.ai,rowMeta)"
@click="makeSelected(col,row);" @click="makeSelected(col,row);"
@contextmenu="showRowContextMenu($event,rowObj,rowMeta,row,col, columnObj)" @contextmenu="showRowContextMenu($event,rowObj,rowMeta,row,col, columnObj)"
@ -392,7 +392,7 @@ export default {
const val = (this.gridViewCols && this.gridViewCols[c.id] && this.gridViewCols[c.id].width) || '200px' const val = (this.gridViewCols && this.gridViewCols[c.id] && this.gridViewCols[c.id].width) || '200px'
if (val && c.key !== this.resizingCol) { if (val && c.key !== this.resizingCol) {
style += `[data-col="${c.alias}"]{min-width:${val};max-width:${val};width: ${val};}` style += `[data-col="${c.title}"]{min-width:${val};max-width:${val};width: ${val};}`
} }
} }

Loading…
Cancel
Save