mirror of
https://github.com/nocodb/nocodb.git
synced 2026-04-30 21:56:57 +00:00
feat(gui): add save option in form view
Signed-off-by: Pranav C <pranavxc@gmail.com>
This commit is contained in:
Pranav C
@@ -1,8 +1,8 @@
|
||||
<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 nc-form-left-nav">
|
||||
<v-container fluid class="h-100 py-0">
|
||||
<v-row class="h-100 my-0">
|
||||
<v-col v-if="isEditable" class="h-100 col-md-4 col-lg-3">
|
||||
<v-card class="h-100 overflow-auto pa-2 backgroundColor elevation-0 nc-form-left-nav">
|
||||
<div class="d-flex grey--text">
|
||||
<span class="">Fields</span>
|
||||
<v-spacer />
|
||||
@@ -55,32 +55,65 @@
|
||||
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-menu
|
||||
v-model="addNewColMenu"
|
||||
fixed
|
||||
z-index="99"
|
||||
content-class="elevation-0"
|
||||
>
|
||||
<template #activator="{on}">
|
||||
<div class="grey--text caption text-center mt-4" v-on="on">
|
||||
<v-icon samll color="grey">
|
||||
mdi-plus
|
||||
</v-icon>
|
||||
Add new field to this table
|
||||
</div>
|
||||
</template>
|
||||
<edit-column
|
||||
v-if="addNewColMenu"
|
||||
:meta="meta"
|
||||
:nodes="nodes"
|
||||
:sql-ui="sqlUi"
|
||||
@close="addNewColMenu = false"
|
||||
@saved="onNewColCreation"
|
||||
/>
|
||||
</v-menu>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col class="h-100 px-10 backgroundColor darken-1" style="overflow-y: auto" cols="9">
|
||||
<v-col
|
||||
:class="{'col-12' : !isEditable, 'col-lg-9 col-md-8': isEditable}"
|
||||
class="h-100 px-10 "
|
||||
style="overflow-y: auto"
|
||||
>
|
||||
<!-- <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"
|
||||
/>
|
||||
:is="isEditable ? 'editable' : 'h3'"
|
||||
v-model.lazy="localParams.name"
|
||||
class="title text-center"
|
||||
:class="{'nc-meta-inputs': isEditable}"
|
||||
placeholder="Form Title"
|
||||
>
|
||||
{{ localParams.name }}
|
||||
</editable>
|
||||
|
||||
<editable
|
||||
v-model="localParams.description"
|
||||
class="caption nc-meta-inputs text-center"
|
||||
/>
|
||||
:is="isEditable ? 'editable' : 'div'"
|
||||
v-model.lazy="localParams.description"
|
||||
:class="{'nc-meta-inputs': isEditable}"
|
||||
class="caption text-center"
|
||||
placeholder="Add form description"
|
||||
>
|
||||
{{ localParams.description }}
|
||||
</editable>
|
||||
</div>
|
||||
|
||||
<div style="max-width:600px" class="mx-auto">
|
||||
<draggable
|
||||
:is="_isUIAllowed('editFormView') ? 'draggable' : 'div'"
|
||||
v-model="columns"
|
||||
draggable=".item"
|
||||
group="form-inputs"
|
||||
@@ -91,75 +124,143 @@
|
||||
<div
|
||||
v-for="(col,i) in columns"
|
||||
:key="col.alias"
|
||||
class="nc-field-wrapper item pa-2"
|
||||
class="nc-field-wrapper item px-4 py-4"
|
||||
:class="{'nc-editable':isEditable}"
|
||||
>
|
||||
<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"
|
||||
<template
|
||||
v-if="_isUIAllowed('editFormView')"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<!-- <v-overlay-->
|
||||
<!-- :value="true"-->
|
||||
<!-- absolute-->
|
||||
<!-- :color="$store.state.windows.darkTheme ? 'black': 'white'"-->
|
||||
<!-- opacity="0"-->
|
||||
<!-- />-->
|
||||
<v-icon small class="nc-field-remove-icon" @click="columns = columns.filter((_,j) => i !== j)">
|
||||
mdi-eye-off-outline
|
||||
</v-icon>
|
||||
</template>
|
||||
<!-- <div
|
||||
v-if="!col.lk"
|
||||
:key="i"
|
||||
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>
|
||||
</label>
|
||||
<virtual-cell
|
||||
v-if="col.virtual"
|
||||
ref="virtual"
|
||||
:disabled-columns="{}"
|
||||
: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>-->
|
||||
<!-- </template>-->
|
||||
<!-- </v-card>-->
|
||||
|
||||
<div
|
||||
:class="{
|
||||
'active-row' : active === col._cn,
|
||||
required: isRequired(col, localState)
|
||||
}"
|
||||
>
|
||||
<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"
|
||||
:disabled-columns="{}"
|
||||
:column="col"
|
||||
:row="localState"
|
||||
:nodes="nodes"
|
||||
:meta="meta"
|
||||
:api="api"
|
||||
:active="true"
|
||||
:sql-ui="sqlUi"
|
||||
:is-new="true"
|
||||
:is-form="true"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-else-if="col.ai || (col.pk && !isNew) || disabledColumns[col._cn]"
|
||||
style="height:100%; width:100%"
|
||||
class="caption xc-input"
|
||||
@click="col.ai && $toast.info('Auto Increment field is not editable').goAway(3000)"
|
||||
>
|
||||
<input
|
||||
style="height:100%; width: 100%"
|
||||
readonly
|
||||
disabled
|
||||
:value="localState[col._cn]"
|
||||
>
|
||||
</div>
|
||||
|
||||
<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>-->
|
||||
</div>
|
||||
|
||||
<div v-if="!columns.length" class="mt-1 nc-drag-n-drop-to-show py-4 text-center grey--text text--lighter-1">
|
||||
@@ -167,7 +268,7 @@
|
||||
</div>
|
||||
</draggable>
|
||||
<div class="my-10 text-center">
|
||||
<v-btn color="primary">
|
||||
<v-btn color="primary" @click="save">
|
||||
Submit
|
||||
</v-btn>
|
||||
</div>
|
||||
@@ -185,17 +286,25 @@ import HeaderCell from '../components/headerCell'
|
||||
import VirtualCell from '../components/virtualCell'
|
||||
import EditableCell from '../components/editableCell'
|
||||
import Editable from '../components/editable'
|
||||
import EditColumn from '../components/editColumn'
|
||||
import form from '../mixins/form'
|
||||
|
||||
export default {
|
||||
name: 'FormView',
|
||||
components: { Editable, EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell, draggable },
|
||||
props: ['meta', 'availableColumns', 'nodes', 'sqlUi', 'formParams', 'showFields', 'fieldsOrder', 'allColumns'],
|
||||
components: { EditColumn, Editable, EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell, draggable },
|
||||
mixins: [form],
|
||||
props: ['meta', 'availableColumns', 'nodes', 'sqlUi', 'formParams', 'showFields', 'fieldsOrder', 'allColumns', 'dbAlias', 'api'],
|
||||
data: () => ({
|
||||
localState: {},
|
||||
moved: false
|
||||
moved: false,
|
||||
addNewColMenu: false,
|
||||
addNewColModal: false
|
||||
// hiddenColumns: []
|
||||
}),
|
||||
computed: {
|
||||
isEditable() {
|
||||
return this._isUIAllowed('editFormView')
|
||||
},
|
||||
localParams: {
|
||||
get() {
|
||||
return this.formParams || {}
|
||||
@@ -211,29 +320,22 @@ export default {
|
||||
},
|
||||
columns: {
|
||||
get() {
|
||||
return this.allColumns.filter(c => this.showFields[c.alias])
|
||||
return this.allColumns.filter(c => this.showFields[c.alias]).sort((a, b) => ((this.fieldsOrder.indexOf(a.alias) + 1) || Infinity) - ((this.fieldsOrder.indexOf(b.alias) + 1) || Infinity))
|
||||
},
|
||||
set(val) {
|
||||
const showFields = val.reduce((o, v) => {
|
||||
o[v.alias] = true
|
||||
return o
|
||||
}, {})
|
||||
console.log(showFields, this.showFields)
|
||||
}, this.allColumns.reduce((o, v) => {
|
||||
o[v.alias] = false
|
||||
return o
|
||||
}, {}))
|
||||
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]
|
||||
@@ -244,6 +346,57 @@ export default {
|
||||
if (!this.moved) {
|
||||
this.columns = [...this.columns, col]
|
||||
}
|
||||
},
|
||||
onNewColCreation(col) {
|
||||
this.addNewColMenu = false
|
||||
this.addNewColModal = false
|
||||
this.$emit('onNewColCreation', col)
|
||||
},
|
||||
async save() {
|
||||
try {
|
||||
// const id = this.meta.columns.filter(c => c.pk).map(c => this.localState[c._cn]).join('___')
|
||||
|
||||
// const updatedObj = Object.keys(this.changedColumns).reduce((obj, col) => {
|
||||
// obj[col] = this.localState[col]
|
||||
// return obj
|
||||
// }, {})
|
||||
|
||||
// if (this.isNew) {
|
||||
const data = await this.api.insert(this.localState)
|
||||
this.localState = {} // { ...this.localState, ...data }
|
||||
|
||||
// save hasmany and manytomany relations from local state
|
||||
if (this.$refs.virtual && Array.isArray(this.$refs.virtual)) {
|
||||
for (const vcell of this.$refs.virtual) {
|
||||
if (vcell.save) {
|
||||
await vcell.save(this.localState)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// await this.reload()
|
||||
// }
|
||||
// else if (Object.keys(updatedObj).length) {
|
||||
// if (!id) {
|
||||
// return this.$toast.info('Update not allowed for table which doesn\'t have primary Key').goAway(3000)
|
||||
// }
|
||||
// await this.api.update(id, updatedObj, this.oldRow)
|
||||
// } else {
|
||||
// return this.$toast.info('No columns to update').goAway(3000)
|
||||
// }
|
||||
|
||||
// this.$emit('update:oldRow', { ...this.localState })
|
||||
// this.changedColumns = {}
|
||||
// this.$emit('input', this.localState)
|
||||
// this.$emit('update:isNew', false)
|
||||
|
||||
this.$toast.success(`${this.localState[this.primaryValueColumn]} saved successfully.`, {
|
||||
position: 'bottom-right'
|
||||
}).goAway(3000)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -264,8 +417,8 @@ export default {
|
||||
z-index: 9
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--v-backgroundColorDefault-base);
|
||||
&.nc-editable:hover {
|
||||
background: var(--v-backgroundColor-base);
|
||||
|
||||
.nc-field-remove-icon {
|
||||
opacity: 1;
|
||||
@@ -301,37 +454,40 @@ export default {
|
||||
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;
|
||||
.nc-field-wrapper {
|
||||
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);
|
||||
&:focus {
|
||||
border: 1px solid var(--v-primary-base);
|
||||
}
|
||||
|
||||
&:hover:not(:focus) {
|
||||
box-shadow: 0 0 2px dimgrey;
|
||||
}
|
||||
|
||||
background: var(--v-backgroundColorDefault-base);
|
||||
}
|
||||
|
||||
&:hover:not(:focus) {
|
||||
box-shadow: 0 0 2px dimgrey;
|
||||
.v-input__slot {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
background: var(--v-backgroundColorDefault-base);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.required > div > label + * {
|
||||
@@ -364,8 +520,14 @@ export default {
|
||||
color: grey
|
||||
}
|
||||
|
||||
.nc-form-left-nav{
|
||||
.nc-form-left-nav {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.required > div > label + * {
|
||||
border: 1px solid red;
|
||||
border-radius: 4px;
|
||||
background: var(--v-backgroundColorDefault-base);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user