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
Split 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') }}
</v-tooltip>
<!-- <v-tooltip bottom>-->
<!-- <template #activator="{ on }">-->
<!-- <v-list-item-->
<!-- dense-->
<!-- class="body-2"-->
<!-- v-on="on"-->
<!-- @click="enableDummyFeat ? openCreateViewDlg('calendar') : comingSoon()"-->
<!-- >-->
<!-- <v-list-item-icon class="mr-n1">-->
<!-- <v-icon x-small>-->
<!-- mdi-calendar-->
<!-- </v-icon>-->
<!-- </v-list-item-icon>-->
<!-- <v-list-item-title>-->
<!-- <span class="font-weight-regular">-->
<!-- &lt;!&ndash; Calendar &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.calendar.title') }}-->
<!-- </span>-->
<!-- </v-list-item-title>-->
<!-- <v-spacer />-->
<!-- <v-icon class="mr-1" small>-->
<!-- mdi-plus-->
<!-- </v-icon>-->
<!-- </v-list-item>-->
<!-- </template>-->
<!-- &lt;!&ndash; Add Calendar View &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.calendar.create') }}-->
<!-- </v-tooltip>-->
<!-- <v-tooltip bottom>-->
<!-- <template #activator="{ on }">-->
<!-- <v-list-item-->
<!-- dense-->
<!-- open-class="body-2"-->
<!-- v-on="on"-->
<!-- @click="enableDummyFeat ? openCreateViewDlg('kanban') : comingSoon()"-->
<!-- >-->
<!-- <v-list-item-icon class="mr-n1">-->
<!-- <v-icon x-small>-->
<!-- mdi-tablet-dashboard-->
<!-- </v-icon>-->
<!-- </v-list-item-icon>-->
<!-- <v-list-item-title>-->
<!-- <span class="font-weight-regular">-->
<!-- &lt;!&ndash; Kanban &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.kanban.title') }}-->
<!-- </span>-->
<!-- </v-list-item-title>-->
<!-- <v-spacer />-->
<!-- <v-icon class="mr-1" small>-->
<!-- mdi-plus-->
<!-- </v-icon>-->
<!-- </v-list-item>-->
<!-- </template>-->
<!-- &lt;!&ndash; Add Kanban View &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.kanban.create') }}-->
<!-- </v-tooltip>-->
<!-- <v-tooltip bottom>-->
<!-- <template #activator="{ on }">-->
<!-- <v-list-item-->
<!-- dense-->
<!-- class="body-2"-->
<!-- v-on="on"-->
<!-- @click="$toast.info('Coming soon').goAway(3000)"-->
<!-- >-->
<!-- <v-list-item-icon class="mr-n1">-->
<!-- <v-icon x-small class="mt-n1">-->
<!-- mdi-form-select-->
<!-- </v-icon>-->
<!-- </v-list-item-icon>-->
<!-- <v-list-item-title>-->
<!-- <span class="font-weight-regular">-->
<!-- &lt;!&ndash; Form &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.form.title') }}-->
<!-- </span>-->
<!-- </v-list-item-title>-->
<!-- <v-spacer />-->
<!-- <v-icon class="mr-1" small>-->
<!-- mdi-plus-->
<!-- </v-icon>-->
<!-- </v-list-item>-->
<!-- </template>-->
<!-- &lt;!&ndash; Add Form View &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.form.create') }}-->
<!-- </v-tooltip>-->
<!-- <v-tooltip bottom>-->
<!-- <template #activator="{ on }">-->
<!-- <v-list-item-->
<!-- dense-->
<!-- class="body-2"-->
<!-- v-on="on"-->
<!-- @click="enableDummyFeat ? openCreateViewDlg('calendar') : comingSoon()"-->
<!-- >-->
<!-- <v-list-item-icon class="mr-n1">-->
<!-- <v-icon x-small>-->
<!-- mdi-calendar-->
<!-- </v-icon>-->
<!-- </v-list-item-icon>-->
<!-- <v-list-item-title>-->
<!-- <span class="font-weight-regular">-->
<!-- &lt;!&ndash; Calendar &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.calendar.title') }}-->
<!-- </span>-->
<!-- </v-list-item-title>-->
<!-- <v-spacer />-->
<!-- <v-icon class="mr-1" small>-->
<!-- mdi-plus-->
<!-- </v-icon>-->
<!-- </v-list-item>-->
<!-- </template>-->
<!-- &lt;!&ndash; Add Calendar View &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.calendar.create') }}-->
<!-- </v-tooltip>-->
<!-- <v-tooltip bottom>-->
<!-- <template #activator="{ on }">-->
<!-- <v-list-item-->
<!-- dense-->
<!-- open-class="body-2"-->
<!-- v-on="on"-->
<!-- @click="enableDummyFeat ? openCreateViewDlg('kanban') : comingSoon()"-->
<!-- >-->
<!-- <v-list-item-icon class="mr-n1">-->
<!-- <v-icon x-small>-->
<!-- mdi-tablet-dashboard-->
<!-- </v-icon>-->
<!-- </v-list-item-icon>-->
<!-- <v-list-item-title>-->
<!-- <span class="font-weight-regular">-->
<!-- &lt;!&ndash; Kanban &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.kanban.title') }}-->
<!-- </span>-->
<!-- </v-list-item-title>-->
<!-- <v-spacer />-->
<!-- <v-icon class="mr-1" small>-->
<!-- mdi-plus-->
<!-- </v-icon>-->
<!-- </v-list-item>-->
<!-- </template>-->
<!-- &lt;!&ndash; Add Kanban View &ndash;&gt;-->
<!-- {{ $t('nav_drawer.virtual_views.kanban.create') }}-->
<!-- </v-tooltip>-->
<v-tooltip bottom>
<template #activator="{ on }">
<v-list-item
dense
class="body-2"
v-on="on"
@click="openCreateViewDlg('form')"
>
<v-list-item-icon class="mr-n1">
<v-icon x-small class="mt-n1">
mdi-form-select
</v-icon>
</v-list-item-icon>
<v-list-item-title>
<span class="font-weight-regular">
<!-- Form -->
{{ $t('nav_drawer.virtual_views.form.title') }}
</span>
</v-list-item-title>
<v-spacer />
<v-icon class="mr-1" small>
mdi-plus
</v-icon>
</v-list-item>
</template>
<!-- Add Form View -->
{{ $t('nav_drawer.virtual_views.form.create') }}
</v-tooltip>
</v-list>
</template>
</div>
@ -490,6 +490,7 @@ export default {
name: 'SpreadsheetNavDrawer',
components: { Extras, CreateViewDialog },
props: {
extraViewParams: Object,
showAdvanceOptions: Boolean,
hideViews: Boolean,
primaryValueColumn: [Number, String],
@ -565,6 +566,7 @@ export default {
this.$emit('update:fieldsOrder', queryParams.fieldsOrder || [])
this.$emit('update:viewStatus', queryParams.viewStatus || {})
this.$emit('update:columnsWidth', queryParams.columnsWidth || {})
this.$emit('update:extraViewParams', queryParams.extraViewParams || {})
this.$emit('update:coverImageField', queryParams.coverImageField)
this.$emit('update:showSystemFields', queryParams.showSystemFields)
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)"
/>
</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>
<template v-if="data">
<pagination
@ -307,6 +320,7 @@
:view-status.sync="viewStatus"
:columns-width.sync="columnsWidth"
:show-system-fields.sync="showSystemFields"
:extra-view-params.sync="extraViewParams"
@mapFieldsAndShowFields="mapFieldsAndShowFields"
@loadTableData="loadTableData"
@showAdditionalFeatOverlay="showAdditionalFeatOverlay($event)"
@ -487,6 +501,7 @@
import { mapActions } from 'vuex'
import debounce from 'debounce'
import FormView from './views/formView'
import DebugMetas from '@/components/project/spreadsheet/components/debugMetas'
import AdditionalFeatures from '@/components/project/spreadsheet/overlay/additinalFeatures'
@ -507,6 +522,7 @@ import ColumnFilter from '~/components/project/spreadsheet/components/columnFilt
export default {
name: 'RowsXcDataTable',
components: {
FormView,
DebugMetas,
Pagination,
ExpandedForm,
@ -535,6 +551,7 @@ export default {
showTabs: [Boolean, Number]
},
data: () => ({
extraViewParams: {},
debug: false,
key: 1,
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