Browse Source

Merge branch 'feat/formView'

pull/559/head
Pranav C 3 years ago
parent
commit
af1daa07ba
  1. 31
      packages/nc-gui/components/project/spreadsheet/components/editable.vue
  2. 3
      packages/nc-gui/components/project/spreadsheet/components/editableCell.vue
  3. 182
      packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
  4. 42
      packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js
  5. 142
      packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
  6. 359
      packages/nc-gui/components/project/spreadsheet/views/formView.vue
  7. 4
      packages/nc-gui/mixins/device.js

31
packages/nc-gui/components/project/spreadsheet/components/editable.vue

@ -0,0 +1,31 @@
<template>
<div
ref="editable"
contenteditable
v-on="listeners"
/>
</template>
<script>
export default {
props: {
value: {
type: String,
default: ''
}
},
computed: {
listeners() {
return { ...this.$listeners, input: this.onInput }
}
},
mounted() {
this.$refs.editable.innerText = this.value
},
methods: {
onInput(e) {
this.$emit('input', e.target.innerText)
}
}
}
</script>

3
packages/nc-gui/components/project/spreadsheet/components/editableCell.vue

@ -151,7 +151,8 @@ export default {
meta: Object, meta: Object,
ignoreFocus: Boolean, ignoreFocus: Boolean,
isForm: Boolean, isForm: Boolean,
active: Boolean active: Boolean,
dummy: Boolean
}, },
data: () => ({ data: () => ({
changed: false, changed: false,

182
packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue

@ -189,94 +189,98 @@
{{ $t('nav_drawer.virtual_views.gallery.create') }} {{ $t('nav_drawer.virtual_views.gallery.create') }}
</v-tooltip> </v-tooltip>
<!-- <v-tooltip bottom>--> <!-- <v-tooltip bottom>-->
<!-- <template #activator="{ on }">--> <!-- <template #activator="{ on }">-->
<!-- <v-list-item--> <!-- <v-list-item-->
<!-- dense--> <!-- dense-->
<!-- class="body-2"--> <!-- class="body-2"-->
<!-- v-on="on"--> <!-- v-on="on"-->
<!-- @click="enableDummyFeat ? openCreateViewDlg('calendar') : comingSoon()"--> <!-- @click="enableDummyFeat ? openCreateViewDlg('calendar') : comingSoon()"-->
<!-- >--> <!-- >-->
<!-- <v-list-item-icon class="mr-n1">--> <!-- <v-list-item-icon class="mr-n1">-->
<!-- <v-icon x-small>--> <!-- <v-icon x-small>-->
<!-- mdi-calendar--> <!-- mdi-calendar-->
<!-- </v-icon>--> <!-- </v-icon>-->
<!-- </v-list-item-icon>--> <!-- </v-list-item-icon>-->
<!-- <v-list-item-title>--> <!-- <v-list-item-title>-->
<!-- <span class="font-weight-regular">--> <!-- <span class="font-weight-regular">-->
<!-- &lt;!&ndash; Calendar &ndash;&gt;--> <!-- &lt;!&ndash; Calendar &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.calendar.title') }}--> <!-- {{ $t('nav_drawer.virtual_views.calendar.title') }}-->
<!-- </span>--> <!-- </span>-->
<!-- </v-list-item-title>--> <!-- </v-list-item-title>-->
<!-- <v-spacer />--> <!-- <v-spacer />-->
<!-- <v-icon class="mr-1" small>--> <!-- <v-icon class="mr-1" small>-->
<!-- mdi-plus--> <!-- mdi-plus-->
<!-- </v-icon>--> <!-- </v-icon>-->
<!-- </v-list-item>--> <!-- </v-list-item>-->
<!-- </template>--> <!-- </template>-->
<!-- &lt;!&ndash; Add Calendar View &ndash;&gt;--> <!-- &lt;!&ndash; Add Calendar View &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.calendar.create') }}--> <!-- {{ $t('nav_drawer.virtual_views.calendar.create') }}-->
<!-- </v-tooltip>--> <!-- </v-tooltip>-->
<!-- <v-tooltip bottom>--> <!-- <v-tooltip bottom>-->
<!-- <template #activator="{ on }">--> <!-- <template #activator="{ on }">-->
<!-- <v-list-item--> <!-- <v-list-item-->
<!-- dense--> <!-- dense-->
<!-- open-class="body-2"--> <!-- open-class="body-2"-->
<!-- v-on="on"--> <!-- v-on="on"-->
<!-- @click="enableDummyFeat ? openCreateViewDlg('kanban') : comingSoon()"--> <!-- @click="enableDummyFeat ? openCreateViewDlg('kanban') : comingSoon()"-->
<!-- >--> <!-- >-->
<!-- <v-list-item-icon class="mr-n1">--> <!-- <v-list-item-icon class="mr-n1">-->
<!-- <v-icon x-small>--> <!-- <v-icon x-small>-->
<!-- mdi-tablet-dashboard--> <!-- mdi-tablet-dashboard-->
<!-- </v-icon>--> <!-- </v-icon>-->
<!-- </v-list-item-icon>--> <!-- </v-list-item-icon>-->
<!-- <v-list-item-title>--> <!-- <v-list-item-title>-->
<!-- <span class="font-weight-regular">--> <!-- <span class="font-weight-regular">-->
<!-- &lt;!&ndash; Kanban &ndash;&gt;--> <!-- &lt;!&ndash; Kanban &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.kanban.title') }}--> <!-- {{ $t('nav_drawer.virtual_views.kanban.title') }}-->
<!-- </span>--> <!-- </span>-->
<!-- </v-list-item-title>--> <!-- </v-list-item-title>-->
<!-- <v-spacer />--> <!-- <v-spacer />-->
<!-- <v-icon class="mr-1" small>--> <!-- <v-icon class="mr-1" small>-->
<!-- mdi-plus--> <!-- mdi-plus-->
<!-- </v-icon>--> <!-- </v-icon>-->
<!-- </v-list-item>--> <!-- </v-list-item>-->
<!-- </template>--> <!-- </template>-->
<!-- &lt;!&ndash; Add Kanban View &ndash;&gt;--> <!-- &lt;!&ndash; Add Kanban View &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.kanban.create') }}--> <!-- {{ $t('nav_drawer.virtual_views.kanban.create') }}-->
<!-- </v-tooltip>--> <!-- </v-tooltip>-->
<!-- <v-tooltip bottom>--> <v-tooltip
<!-- <template #activator="{ on }">--> v-if="enableDummyFeat"
<!-- <v-list-item--> bottom
<!-- dense--> >
<!-- class="body-2"--> <template #activator="{ on }">
<!-- v-on="on"--> <v-list-item
<!-- @click="$toast.info('Coming soon').goAway(3000)"--> v-if="enableDummyFeat"
<!-- >--> dense
<!-- <v-list-item-icon class="mr-n1">--> class="body-2"
<!-- <v-icon x-small class="mt-n1">--> v-on="on"
<!-- mdi-form-select--> @click="openCreateViewDlg('form')"
<!-- </v-icon>--> >
<!-- </v-list-item-icon>--> <v-list-item-icon class="mr-n1">
<!-- <v-list-item-title>--> <v-icon x-small class="mt-n1">
<!-- <span class="font-weight-regular">--> mdi-form-select
<!-- &lt;!&ndash; Form &ndash;&gt;--> </v-icon>
</v-list-item-icon>
<!-- {{ $t('nav_drawer.virtual_views.form.title') }}--> <v-list-item-title>
<!-- </span>--> <span class="font-weight-regular">
<!-- </v-list-item-title>--> <!-- Form -->
<!-- <v-spacer />--> {{ $t('nav_drawer.virtual_views.form.title') }}
<!-- <v-icon class="mr-1" small>--> </span>
<!-- mdi-plus--> </v-list-item-title>
<!-- </v-icon>-->
<!-- </v-list-item>--> <v-spacer />
<!-- </template>--> <v-icon class="mr-1" small>
<!-- &lt;!&ndash; Add Form View &ndash;&gt;--> mdi-plus
<!-- {{ $t('nav_drawer.virtual_views.form.create') }}--> </v-icon>
<!-- </v-tooltip>--> </v-list-item>
</template>
<!-- Add Form View -->
{{ $t('nav_drawer.virtual_views.form.create') }}
</v-tooltip>
</v-list> </v-list>
</template> </template>
</div> </div>
@ -490,6 +494,7 @@ export default {
name: 'SpreadsheetNavDrawer', name: 'SpreadsheetNavDrawer',
components: { Extras, CreateViewDialog }, components: { Extras, CreateViewDialog },
props: { props: {
extraViewParams: Object,
showAdvanceOptions: Boolean, showAdvanceOptions: Boolean,
hideViews: Boolean, hideViews: Boolean,
primaryValueColumn: [Number, String], primaryValueColumn: [Number, String],
@ -565,6 +570,7 @@ export default {
this.$emit('update:fieldsOrder', queryParams.fieldsOrder || []) this.$emit('update:fieldsOrder', queryParams.fieldsOrder || [])
this.$emit('update:viewStatus', queryParams.viewStatus || {}) this.$emit('update:viewStatus', queryParams.viewStatus || {})
this.$emit('update:columnsWidth', queryParams.columnsWidth || {}) this.$emit('update:columnsWidth', queryParams.columnsWidth || {})
this.$emit('update:extraViewParams', queryParams.extraViewParams || {})
this.$emit('update:coverImageField', queryParams.coverImageField) this.$emit('update:coverImageField', queryParams.coverImageField)
this.$emit('update:showSystemFields', queryParams.showSystemFields) this.$emit('update:showSystemFields', queryParams.showSystemFields)
if (queryParams.showFields) { if (queryParams.showFields) {

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

@ -83,23 +83,9 @@ export default {
availableRealColumns() { availableRealColumns() {
return this.availableColumns && this.availableColumns.filter(c => !c.virtual) return this.availableColumns && this.availableColumns.filter(c => !c.virtual)
}, },
availableColumns() {
let columns = []
if (!this.meta) { return [] }
// todo: generate hideCols based on default values
const hideCols = ['created_at', 'updated_at']
if (this.showSystemFields) {
columns = this.meta.columns || []
} else if (this.data && this.data.length) {
columns = (this.meta.columns.filter(c => !(c.pk && c.ai) &&
!((this.meta.v || []).some(v => v.bt && v.bt.cn === c.cn)) &&
!hideCols.includes(c.cn))) || []
} else {
columns = (this.meta && this.meta.columns && this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c.cn))) || []
}
allColumns() {
let columns = this.meta.columns
if (this.meta && this.meta.v) { if (this.meta && this.meta.v) {
columns = [...columns, ...this.meta.v.map(v => ({ ...v, virtual: 1 }))] columns = [...columns, ...this.meta.v.map(v => ({ ...v, virtual: 1 }))]
} }
@ -119,6 +105,25 @@ export default {
} }
}) })
} }
return columns
},
availableColumns() {
let columns = []
if (!this.meta) { return [] }
// todo: generate hideCols based on default values
const hideCols = ['created_at', 'updated_at']
if (this.showSystemFields) {
columns = this.meta.columns || []
} else if (this.data && this.data.length) {
columns = (this.meta.columns.filter(c => !(c.pk && c.ai) &&
!((this.meta.v || []).some(v => v.bt && v.bt.cn === c.cn)) &&
!hideCols.includes(c.cn))) || []
} else {
columns = (this.meta && this.meta.columns && this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c.cn))) || []
}
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.alias)
@ -283,6 +288,11 @@ export default {
this.syncDataDebounce(this) this.syncDataDebounce(this)
} }
}, },
extraViewParams(v) {
if (!this.loadingMeta || !this.loadingData) {
this.syncDataDebounce(this)
}
},
fieldsOrder: { fieldsOrder: {
handler(v) { handler(v) {
if (!this.loadingMeta || !this.loadingData) { if (!this.loadingMeta || !this.loadingData) {

142
packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue

@ -1,7 +1,7 @@
<template> <template>
<v-container class="h-100 j-excel-container pa-0 ma-0" fluid> <v-container class="h-100 j-excel-container pa-0 ma-0" fluid>
<v-toolbar height="32" dense class="elevation-0 xc-toolbar xc-border-bottom" style="z-index: 7"> <v-toolbar height="32" dense class="elevation-0 xc-toolbar xc-border-bottom" style="z-index: 7">
<div class="d-flex xc-border align-center search-box"> <div v-if="!isForm" class="d-flex xc-border align-center search-box">
<v-menu bottom offset-y> <v-menu bottom offset-y>
<template #activator="{on}"> <template #activator="{on}">
<div v-on="on"> <div v-on="on">
@ -72,62 +72,65 @@
</span> </span>
</v-tooltip> </v-tooltip>
<lock-menu v-if="_isUIAllowed('view-type')" v-model="viewStatus.type" /> <lock-menu v-if="_isUIAllowed('view-type')" v-model="viewStatus.type" />
<x-btn tooltip="Reload view data" outlined small text @click="reload">
<v-icon small class="mr-1" color="grey darken-3">
mdi-reload
</v-icon>
</x-btn>
<x-btn
v-if="isEditable && relationType !== 'bt'"
tooltip="Add new row"
:disabled="isLocked"
outlined
small
text
btn.class="nc-add-new-row-btn"
@click="insertNewRow(true,true)"
>
<v-icon small class="mr-1" color="grey darken-3">
mdi-plus
</v-icon>
</x-btn>
<x-btn
small
text
outlined
tooltip="Save new rows"
:disabled="!edited || isLocked"
@click="save"
>
<v-icon small class="mr-1" color="grey darken-3">
save
</v-icon>
Save
</x-btn>
<fields <template v-if="!isForm">
v-model="showFields" <x-btn tooltip="Reload view data" outlined small text @click="reload">
:field-list="fieldList" <v-icon small class="mr-1" color="grey darken-3">
:meta="meta" mdi-reload
:is-locked="isLocked" </v-icon>
:fields-order.sync="fieldsOrder" </x-btn>
:sql-ui="sqlUi" <x-btn
:show-system-fields.sync="showSystemFields" v-if="isEditable && relationType !== 'bt'"
:cover-image-field.sync="coverImageField" tooltip="Add new row"
:is-gallery="isGallery" :disabled="isLocked"
/> outlined
small
text
btn.class="nc-add-new-row-btn"
@click="insertNewRow(true,true)"
>
<v-icon small class="mr-1" color="grey darken-3">
mdi-plus
</v-icon>
</x-btn>
<x-btn
small
text
outlined
tooltip="Save new rows"
:disabled="!edited || isLocked"
@click="save"
>
<v-icon small class="mr-1" color="grey darken-3">
save
</v-icon>
Save
</x-btn>
<fields
v-model="showFields"
:field-list="fieldList"
:meta="meta"
:is-locked="isLocked"
:fields-order.sync="fieldsOrder"
:sql-ui="sqlUi"
:show-system-fields.sync="showSystemFields"
:cover-image-field.sync="coverImageField"
:is-gallery="isGallery"
/>
<sort-list <sort-list
v-model="sortList" v-model="sortList"
:is-locked="isLocked" :is-locked="isLocked"
:field-list="[...realFieldList, ...formulaFieldList]" :field-list="[...realFieldList, ...formulaFieldList]"
/> />
<column-filter <column-filter
v-model="filters" v-model="filters"
:is-locked="isLocked" :is-locked="isLocked"
:field-list="[...realFieldList, ...formulaFieldList]" :field-list="[...realFieldList, ...formulaFieldList]"
dense dense
/> />
</template>
<v-tooltip <v-tooltip
v-if="_isUIAllowed('table-delete')" v-if="_isUIAllowed('table-delete')"
bottom bottom
@ -273,8 +276,25 @@
@expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)" @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
/> />
</template> </template>
<template v-else-if="isForm">
<form-view
:nodes="nodes"
:table="table"
:available-columns="availableColumns"
:meta="meta"
:data="data"
:show-fields.sync="showFields"
:all-columns="allColumns"
:field-list="fieldList"
:is-locked="isLocked"
:fields-order.sync="fieldsOrder"
:primary-value-column="primaryValueColumn"
:form-params.sync="extraViewParams.formParams"
@expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
/>
</template>
</div> </div>
<template v-if="data"> <template v-if="data && !isForm">
<pagination <pagination
v-model="page" v-model="page"
:count="count" :count="count"
@ -307,6 +327,7 @@
:view-status.sync="viewStatus" :view-status.sync="viewStatus"
:columns-width.sync="columnsWidth" :columns-width.sync="columnsWidth"
:show-system-fields.sync="showSystemFields" :show-system-fields.sync="showSystemFields"
:extra-view-params.sync="extraViewParams"
@mapFieldsAndShowFields="mapFieldsAndShowFields" @mapFieldsAndShowFields="mapFieldsAndShowFields"
@loadTableData="loadTableData" @loadTableData="loadTableData"
@showAdditionalFeatOverlay="showAdditionalFeatOverlay($event)" @showAdditionalFeatOverlay="showAdditionalFeatOverlay($event)"
@ -487,6 +508,7 @@
import { mapActions } from 'vuex' import { mapActions } from 'vuex'
import debounce from 'debounce' import debounce from 'debounce'
import FormView from './views/formView'
import DebugMetas from '@/components/project/spreadsheet/components/debugMetas' import DebugMetas from '@/components/project/spreadsheet/components/debugMetas'
import AdditionalFeatures from '@/components/project/spreadsheet/overlay/additinalFeatures' import AdditionalFeatures from '@/components/project/spreadsheet/overlay/additinalFeatures'
@ -507,6 +529,7 @@ import ColumnFilter from '~/components/project/spreadsheet/components/columnFilt
export default { export default {
name: 'RowsXcDataTable', name: 'RowsXcDataTable',
components: { components: {
FormView,
DebugMetas, DebugMetas,
Pagination, Pagination,
ExpandedForm, ExpandedForm,
@ -535,6 +558,7 @@ export default {
showTabs: [Boolean, Number] showTabs: [Boolean, Number]
}, },
data: () => ({ data: () => ({
extraViewParams: {},
debug: false, debug: false,
key: 1, key: 1,
dataLoaded: false, dataLoaded: false,
@ -692,7 +716,8 @@ export default {
fieldsOrder: this.fieldsOrder, fieldsOrder: this.fieldsOrder,
viewStatus: this.viewStatus, viewStatus: this.viewStatus,
columnsWidth: this.columnsWidth, columnsWidth: this.columnsWidth,
showSystemFields: this.showSystemFields showSystemFields: this.showSystemFields,
extraViewParams: this.extraViewParams
} }
if (this.isGallery) { if (this.isGallery) {
@ -1038,6 +1063,9 @@ export default {
isGallery() { isGallery() {
return this.selectedView && this.selectedView.show_as === 'gallery' return this.selectedView && this.selectedView.show_as === 'gallery'
}, },
isForm() {
return this.selectedView && this.selectedView.show_as === 'form'
},
meta() { meta() {
return this.$store.state.meta.metas[this.table] return this.$store.state.meta.metas[this.table]
}, },

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

@ -0,0 +1,359 @@
<template>
<v-container fluid class="h-100 backgroundColor">
<v-row class="h-100">
<v-col cols="3">
<v-card class="h-100 pa-2 backgroundColor elevation-0">
<div class="d-flex grey--text">
<span class="">Fields</span>
<v-spacer />
<span class="caption mr-2 font-weight-bold" style="border-bottom: 2px solid grey">add all</span>
<span class="caption font-weight-bold" style="border-bottom: 2px solid grey">remove all</span>
</div>
<draggable
v-model="hiddenColumns"
draggable=".item"
group="form-inputs"
@start="drag=true"
@end="drag=false"
>
<v-card
v-for="(col) in hiddenColumns"
:key="col.alias"
class="pa-2 my-2 item pointer elevation-0"
@mousedown="moved=false"
@mousemove="moved=false"
@mouseup="handleMouseUp(col)"
>
<div class="d-flex">
<label :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize flex-grow-1">
<virtual-header-cell
v-if="col.virtual"
:column="col"
:nodes="nodes"
:is-form="true"
:meta="meta"
/>
<header-cell
v-else
:is-form="true"
:value="col._cn"
:column="col"
:sql-ui="sqlUi"
/>
</label>
<v-icon color="grey">
mdi-drag
</v-icon>
</div>
</v-card>
<div class="nc-drag-n-drop-to-hide py-3 text-center grey--text text--lighter-1">
Drag and drop field here to hide
</div>
</draggable>
<div class="grey--text caption text-center mt-4">
<v-icon samll color="grey">
mdi-plus
</v-icon>
Add new field to this table
</div>
</v-card>
</v-col>
<v-col class="h-100 px-10 backgroundColor darken-1" style="overflow-y: auto" cols="9">
<!-- <div class="my-14 d-flex align-center justify-center">-->
<!-- <v-chip>Add cover image</v-chip>-->
<!-- </div>-->
<div class="my-10 d-flex align-center justify-center flex-column">
<editable
v-model="localParams.name"
class="title nc-meta-inputs text-center"
/>
<editable
v-model="localParams.description"
class="caption nc-meta-inputs text-center"
/>
</div>
<div style="max-width:600px" class="mx-auto">
<draggable
v-model="columns"
draggable=".item"
group="form-inputs"
class="h-100"
@start="drag=true"
@end="drag=false"
>
<div
v-for="(col,i) in columns"
:key="col.alias"
class="nc-field-wrapper item pa-2"
>
<v-overlay
:value="true"
absolute
:color="$store.state.windows.darkTheme ? 'black': 'white'"
opacity="0.1"
/>
<v-icon small class="nc-field-remove-icon" @click="columns = columns.filter((_,j) => i !== j)">
mdi-eye-off-outline
</v-icon>
<!-- <v-card-->
<!-- outlined-->
<!-- class="pa-2 my-2 "-->
<!-- >-->
<div
v-if="!col.lk"
:key="i"
:class="{
'active-row' : active === col._cn
}"
class="row-col my-4"
>
<div>
<label :for="`data-table-form-${col._cn}`" class="body-2 mt-n1 text-capitalize">
<virtual-header-cell
v-if="col.virtual"
:column="col"
:nodes="nodes"
:is-form="true"
:meta="meta"
/>
<header-cell
v-else
:is-form="true"
:value="col._cn"
:column="col"
:sql-ui="sqlUi"
/>
</label>
<virtual-cell
v-if="col.virtual"
ref="virtual"
:column="col"
:row="localState"
:nodes="nodes"
:meta="meta"
:api="api"
:active="false"
:sql-ui="sqlUi"
:is-form="true"
:dummy="true"
/>
<editable-cell
v-else
:id="`data-table-form-${col._cn}`"
v-model="localState[col._cn]"
:db-alias="dbAlias"
:column="col"
class="xc-input body-2"
:meta="meta"
:sql-ui="sqlUi"
is-form
:dummy="true"
/>
</div>
</div>
<!-- </v-card>-->
</div>
</draggable>
<div class="my-10 text-center">
<v-btn color="primary">
Submit
</v-btn>
</div>
</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
import draggable from 'vuedraggable'
import VirtualHeaderCell from '../components/virtualHeaderCell'
import HeaderCell from '../components/headerCell'
import VirtualCell from '../components/virtualCell'
import EditableCell from '../components/editableCell'
import Editable from '../components/editable'
export default {
name: 'FormView',
components: { Editable, EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell, draggable },
props: ['meta', 'availableColumns', 'nodes', 'sqlUi', 'formParams', 'showFields', 'fieldsOrder', 'allColumns'],
data: () => ({
localState: {},
moved: false
// hiddenColumns: []
}),
computed: {
localParams: {
get() {
return this.formParams || {}
},
set(params) {
this.$emit('update:formParams', params)
}
},
hiddenColumns: {
get() {
return this.allColumns.filter(c => !this.showFields[c.alias])
}
},
columns: {
get() {
return this.allColumns.filter(c => this.showFields[c.alias])
},
set(val) {
const showFields = val.reduce((o, v) => {
o[v.alias] = true
return o
}, {})
console.log(showFields, this.showFields)
const fieldsOrder = val.map(v => v.alias)
// debugger
this.$emit('update:showFields', showFields)
this.$emit('update:fieldsOrder', fieldsOrder)
}
}
},
watch: {
// visibleColumns: {
// handler(val) {
//
// },
// deep: true
// }
},
mounted() {
this.localParams = Object.assign({ name: this.meta._tn, description: 'Form view description' }, this.localParams)
// this.columns = [...this.availableColumns]
// this.hiddenColumns = this.meta.columns.filter(c => this.availableColumns.find(c1 => c.cn === c1.cn && c._cn === c1._cn))
},
methods: {
handleMouseUp(col) {
if (!this.moved) {
this.columns = [...this.columns, col]
}
}
}
}
</script>
<style scoped lang="scss">
.nc-field-wrapper {
position: relative;
.nc-field-remove-icon {
opacity: 0;
position: absolute;
right: 10px;
top: 10px;
transition: 200ms opacity;
z-index: 9
}
&:hover {
background: var(--v-backgroundColorDefault-base);
.nc-field-remove-icon {
opacity: 1;
}
}
}
.row-col > label {
color: grey;
font-weight: 700;
}
.row-col:focus > label, .active-row > label {
color: var(--v-primary-base);
}
.title.text-center {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
::v-deep {
.v-breadcrumbs__item:nth-child(odd) {
font-size: .72rem;
color: grey;
}
.v-breadcrumbs li:nth-child(even) {
padding: 0 6px;
font-size: .72rem;
color: var(--v-textColor-base);
}
position: relative;
.comment-icon {
position: absolute;
right: 60px;
bottom: 60px;
}
div > input,
div > .xc-input > input,
div > .xc-input > div > input,
div > select,
div > .xc-input > select,
div textarea:not(.inputarea) {
border: 1px solid #7f828b33;
padding: 1px 5px;
font-size: .8rem;
border-radius: 4px;
min-height: 44px;
&:focus {
border: 1px solid var(--v-primary-base);
}
&:hover:not(:focus) {
box-shadow: 0 0 2px dimgrey;
}
background: var(--v-backgroundColorDefault-base);
}
}
.required > div > label + * {
border: 1px solid red;
border-radius: 4px;
background: var(--v-backgroundColorDefault-base);
}
.nc-meta-inputs {
width: 400px;
min-height: 40px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background: var(--v-backgroundColor-base);
}
&:active, &:focus {
border: 1px solid #7f828b33;
}
}
.nc-drag-n-drop-to-hide {
border: 2px dotted #a1a1a1;
border-radius: 4px;
font-size: .6rem;
color: grey
}
</style>

4
packages/nc-gui/mixins/device.js

@ -44,7 +44,9 @@ export default {
return process.env.EE return process.env.EE
}, },
_isZh() { _isZh() {
return ['zh', 'zh-cn', 'zh-hk', 'zh-mo', 'zh-sg', 'zh-tw'].includes((navigator.language || navigator.userLanguage || 'en').toLowerCase()) const zhLan = ['zh', 'zh-cn', 'zh-hk', 'zh-mo', 'zh-sg', 'zh-tw']
const browserLan = (navigator.languages || [navigator.language || navigator.userLanguage || 'en']).map(v => v.toLowerCase())
return zhLan.some(l => browserLan.includes(l))
}, },
...mapGetters({ ...mapGetters({
_isUIAllowed: 'users/GtrIsUIAllowed' _isUIAllowed: 'users/GtrIsUIAllowed'

Loading…
Cancel
Save