github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat: form view v1 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/559/head
Pranav C 3 years ago
parent
913a4a07ee
commit
bd317e0636
3 changed files with 229 additions and 88 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. 178
      packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
  2. 17
      packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
  3. 122
      packages/nc-gui/components/project/spreadsheet/views/formView.vue

178
packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
Unescape View File

@ -189,94 +189,94 @@
{{ $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 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="$toast.info('Coming soon').goAway(3000)"--> @click="openCreateViewDlg('form')"
<!-- >--> >
<!-- <v-list-item-icon class="mr-n1">--> <v-list-item-icon class="mr-n1">
<!-- <v-icon x-small class="mt-n1">--> <v-icon x-small class="mt-n1">
<!-- mdi-form-select--> mdi-form-select
<!-- </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; Form &ndash;&gt;--> <!-- Form -->
<!-- {{ $t('nav_drawer.virtual_views.form.title') }}--> {{ $t('nav_drawer.virtual_views.form.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 Form View &ndash;&gt;--> <!-- Add Form View -->
<!-- {{ $t('nav_drawer.virtual_views.form.create') }}--> {{ $t('nav_drawer.virtual_views.form.create') }}
<!-- </v-tooltip>--> </v-tooltip>
</v-list> </v-list>
</template> </template>
</div> </div>
@ -490,6 +490,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 +566,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) {

17
packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
Unescape View File

@ -273,6 +273,19 @@
@expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)" @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
/> />
</template> </template>
<template v-else-if="selectedView && selectedView.show_as === 'form' ">
<form-view
:nodes="nodes"
:table="table"
:show-fields="showFields"
:available-columns="availableColumns"
:meta="meta"
:data="data"
: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">
<pagination <pagination
@ -307,6 +320,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 +501,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 +522,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 +551,7 @@ export default {
showTabs: [Boolean, Number] showTabs: [Boolean, Number]
}, },
data: () => ({ data: () => ({
extraViewParams: {},
debug: false, debug: false,
key: 1, key: 1,
dataLoaded: false, dataLoaded: false,

122
packages/nc-gui/components/project/spreadsheet/views/formView.vue
Unescape View File

@ -0,0 +1,122 @@
<template>
<v-container fluid class="h-100">
<v-row class="h-100">
<v-col cols="4">
<v-card class="h-100 pa-2" outlined>
<draggable
v-model="hiddenColumns"
draggable=".item"
group="form-inputs"
class="h-100"
@start="drag=true"
@end="drag=false"
>
<v-card
v-for="(col) in hiddenColumns"
:key="col.alias"
outlined
class="pa-2 my-2 item"
>
{{ col.alias }}
</v-card>
</draggable>
</v-card>
</v-col>
<v-col class="h-100 px-10" style="overflow-y: auto" cols="8">
<draggable
v-model="columns"
draggable=".item"
group="form-inputs"
class="h-100"
@start="drag=true"
@end="drag=false"
>
<v-card
v-for="(col,i) in columns"
:key="col.alias"
outlined
class="pa-2 my-2 item"
>
<v-overlay absolute />
<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 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="true"
:sql-ui="sqlUi"
:is-form="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
@focus="active = col._cn"
@blur="active = ''"
/>
</div>
</div>
</v-card>
</draggable>
</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'
export default {
name: 'FormView',
components: { EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell, draggable },
props: ['meta', 'availableColumns', 'nodes', 'sqlUi', 'formParams'],
data: () => ({ localState: {}, columns: [], hiddenColumns: [] }),
computed: {},
mounted() {
this.columns = [...this.availableColumns]
}
}
</script>
<style scoped lang="scss">
</style>
Write Preview
Loading…
Cancel
Save