github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
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 2 years ago
parent
2445b181f9
commit
72e15a5a25
6 changed files with 37 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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};}`
} }
} }

Write Preview
Loading…
Cancel
Save