mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
675 lines
20 KiB
675 lines
20 KiB
<template> |
|
<v-container class="h-100 j-excel-container"> |
|
<v-alert v-if="notFound" type="warning" class="mx-auto mt-10" outlined max-width="300"> |
|
Not found |
|
</v-alert> |
|
|
|
<v-row v-else :class="{'d-flex justify-center': submitted}"> |
|
<template v-if="submitted"> |
|
<v-col class="d-flex justify-center"> |
|
<div v-if="localParams && localParams.submit" style="min-width: 350px"> |
|
<v-alert type="success" outlined> |
|
<span class="title">{{ localParams.submit.message || 'Successfully submitted form data' }}</span> |
|
</v-alert> |
|
<p v-if="localParams.submit.showBlankForm" class="caption grey--text text-center"> |
|
New form will be loaded after {{ secondsRemain }} seconds |
|
</p> |
|
<div v-if="localParams.submit.showAnotherSubmit" class=" text-center"> |
|
<v-btn color="primary" @click="submitted = false"> |
|
Submit Another Form |
|
</v-btn> |
|
</div> |
|
</div> |
|
</v-col> |
|
</template> |
|
<template v-else> |
|
<v-col |
|
class="h-100 px-sm-1 px-md-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="nc-form-wrapper elevation-3 pb-10 "> |
|
<div class="mt-10 d-flex align-center justify-center flex-column"> |
|
<div class="nc-form-banner backgroundColor darken-1 flex-column justify-center d-flex"> |
|
<div class="d-flex align-center justify-center flex-grow-1"> |
|
<!-- <v-chip small color="backgroundColorDefault caption grey--text"> |
|
Add cover image |
|
</v-chip>--> |
|
<v-img src="./icon.png" width="50" class="mx-4" /> |
|
<span class="display-1 font-weight-bold">NocoDB</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="mx-auto nc-form elevation-3 pa-2 mb-10"> |
|
<div class="nc-form-logo py-8" style="display: none"> |
|
<!-- <div v-ripple class="nc-form-add-logo text-center caption pointer" @click.stop>--> |
|
<!-- Add a logo--> |
|
<!-- </div>--> |
|
</div> |
|
<h2 |
|
class="mt-4 display-1 font-weight-bold text-left mx-4 mb-3 px-1 text--text text--lighten-1" |
|
> |
|
{{ localParams.name }} |
|
</h2> |
|
|
|
<div |
|
class="body-1 text-left mx-4 py-2 px-1 text--text text--lighten-2" |
|
> |
|
{{ localParams.description }} |
|
</div> |
|
<div class="h-100"> |
|
<div |
|
|
|
v-for="(col) in columns" |
|
:key="col.alias" |
|
class="nc-field-wrapper item px-4 my-3 pointer" |
|
> |
|
<div> |
|
<div |
|
v-if="localParams.fields && localParams.fields[col.alias]" |
|
:class="{ |
|
'active-row' : active === col._cn, |
|
required: isRequired(col, localState, localParams.fields[col.alias].required) |
|
}" |
|
> |
|
<div class="nc-field-editables"> |
|
<label |
|
:for="`data-table-form-${col._cn}`" |
|
class="body-2 text-capitalize nc-field-labels" |
|
> |
|
<virtual-header-cell |
|
v-if="col.virtual" |
|
class="caption" |
|
:column="{...col, _cn: localParams.fields[col.alias].label || col._cn}" |
|
:nodes="{}" |
|
:is-form="true" |
|
:meta="meta" |
|
:required="isRequired(col, localState, localParams.fields[col.alias].required)" |
|
/> |
|
<header-cell |
|
v-else |
|
class="caption" |
|
:is-form="true" |
|
:value="localParams.fields[col.alias].label || col._cn" |
|
:column="col" |
|
:sql-ui="sqlUiLoc" |
|
:required="isRequired(col, localState, localParams.fields[col.alias].required)" |
|
/> |
|
|
|
</label> |
|
<div |
|
v-if="col.virtual" |
|
@click.stop |
|
> |
|
<virtual-cell |
|
ref="virtual" |
|
:disabled-columns="{}" |
|
:column="col" |
|
:row="localState" |
|
:nodes="{}" |
|
:meta="meta" |
|
:api="api" |
|
:active="true" |
|
:sql-ui="sqlUiLoc" |
|
:is-new="true" |
|
is-form |
|
is-public |
|
:hint="localParams.fields[col.alias].description" |
|
:required="localParams.fields[col.alias].description" |
|
:metas="metas" |
|
:password="password" |
|
@update:localState="state => $set(virtual,col._cn, state)" |
|
@updateCol="updateCol" |
|
/> |
|
<div |
|
v-if="$v.virtual && $v.virtual.$dirty && $v.virtual[col.alias] && (!$v.virtual[col.alias].required || !$v.virtual[col.alias].minLength)" |
|
class="error--text caption" |
|
> |
|
Field is required. |
|
</div> |
|
|
|
<!-- todo: optimize --> |
|
<template |
|
v-if="col.bt && $v.localState && $v.localState.$dirty && $v.localState[meta.columns.find(c => c.cn === col.bt.cn)._cn]" |
|
> |
|
<div |
|
v-if="!$v.localState[meta.columns.find(c => c.cn === col.bt.cn)._cn].required" |
|
class="error--text caption" |
|
> |
|
Field is required. |
|
</div> |
|
</template> |
|
</div> |
|
<template v-else> |
|
<div |
|
v-if="col.ai || disabledColumns[col._cn]" |
|
style="height:100%; width:100%" |
|
class="caption xc-input" |
|
@click.stop |
|
@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> |
|
|
|
<div |
|
v-else |
|
@click.stop |
|
> |
|
<editable-cell |
|
: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="sqlUiLoc" |
|
is-form |
|
is-public |
|
:hint="localParams.fields[col.alias].description" |
|
@focus="active = col._cn" |
|
@blur="active = ''" |
|
/> |
|
</div> |
|
<template v-if="$v.localState&& $v.localState.$dirty && $v.localState[col._cn] "> |
|
<div v-if="!$v.localState[col._cn].required" class="error--text caption"> |
|
Field is required. |
|
</div> |
|
</template> |
|
</template> |
|
</div> |
|
<!-- </div>--> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="my-10 text-center"> |
|
<v-btn color="primary" :loading="submitting" :disabled="submitting" @click="save"> |
|
Submit |
|
</v-btn> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</v-col> |
|
</template> |
|
</v-row> |
|
|
|
<v-dialog v-model="showPasswordModal" width="400"> |
|
<v-card width="400" class="backgroundColor"> |
|
<v-container fluid> |
|
<v-text-field |
|
v-model="password" |
|
dense |
|
autocomplete="shared-form-password" |
|
browser-autocomplete="shared-form-password" |
|
type="password" |
|
solo |
|
flat |
|
hint="Enter the password" |
|
persistent-hint |
|
/> |
|
|
|
<div class="text-center"> |
|
<v-btn small color="primary" @click="loadMetaData(); showPasswordModal =false"> |
|
Unlock |
|
</v-btn> |
|
</div> |
|
</v-container> |
|
</v-card> |
|
</v-dialog> |
|
</v-container> |
|
</template> |
|
|
|
<script> |
|
|
|
import { validationMixin } from 'vuelidate' |
|
import { required, minLength } from 'vuelidate/lib/validators' |
|
import form from '../mixins/form' |
|
import VirtualHeaderCell from '../components/virtualHeaderCell' |
|
import HeaderCell from '../components/headerCell' |
|
import VirtualCell from '../components/virtualCell' |
|
import EditableCell from '../components/editableCell' |
|
import { SqlUI } from '../../../../helpers/sqlUi' |
|
|
|
export default { |
|
name: 'XcForm', |
|
components: { EditableCell, VirtualCell, HeaderCell, VirtualHeaderCell }, |
|
mixins: [form, validationMixin], |
|
data() { |
|
return { |
|
active: null, |
|
loading: false, |
|
showPasswordModal: false, |
|
password: '', |
|
submitting: false, |
|
submitted: false, |
|
client: null, |
|
meta: null, |
|
columns: [], |
|
query_params: {}, |
|
localParams: {}, |
|
localState: {}, |
|
dbAlias: '', |
|
virtual: {}, |
|
metas: {}, |
|
secondsRemain: null, |
|
notFound: false |
|
} |
|
}, |
|
computed: { |
|
|
|
sqlUiLoc() { |
|
// todo: replace with correct client |
|
return this.client && SqlUI.create({ client: this.client }) |
|
} |
|
}, |
|
watch: { |
|
submitted(val) { |
|
if (val && this.localParams.submit.showBlankForm) { |
|
this.secondsRemain = 5 |
|
const intvl = setInterval(() => { |
|
if (--this.secondsRemain < 0) { |
|
this.submitted = false |
|
clearInterval(intvl) |
|
} |
|
}, 1000) |
|
} |
|
} |
|
}, |
|
async mounted() { |
|
await this.loadMetaData() |
|
}, |
|
methods: { |
|
async loadMetaData() { |
|
this.loading = true |
|
try { |
|
// eslint-disable-next-line camelcase |
|
const { |
|
meta, |
|
// model_name, |
|
client, |
|
query_params: qp, |
|
db_alias: dbAlias, |
|
relatedTableMetas |
|
} = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'sharedViewGet', { |
|
view_id: this.$route.params.id, |
|
password: this.password |
|
}]) |
|
this.client = client |
|
this.meta = meta |
|
this.query_params = qp |
|
this.dbAlias = dbAlias |
|
this.metas = relatedTableMetas |
|
|
|
const showFields = this.query_params.showFields || {} |
|
let fields = this.query_params.fieldsOrder || [] |
|
if (!fields.length) { |
|
fields = Object.keys(showFields) |
|
} |
|
// eslint-disable-next-line camelcase |
|
|
|
let columns = this.meta.columns |
|
if (this.meta && this.meta.v) { |
|
columns = [...columns, ...this.meta.v.map(v => ({ ...v, virtual: 1 }))] |
|
} |
|
|
|
{ |
|
const _ref = {} |
|
columns.forEach((c) => { |
|
if (c.virtual && c.bt) { |
|
c.prop = `${c.bt.rtn}Read` |
|
} |
|
if (c.virtual && c.mm) { |
|
c.prop = `${c.mm.rtn}MMList` |
|
} |
|
if (c.virtual && c.hm) { |
|
c.prop = `${c.hm.tn}List` |
|
} |
|
|
|
// if (c.virtual && c.lk) { |
|
// c.alias = `${c.lk._lcn} (from ${c.lk._ltn})` |
|
// } else { |
|
c.alias = c._cn |
|
// } |
|
if (c.alias in _ref) { |
|
c.alias += _ref[c.alias]++ |
|
} else { |
|
_ref[c.alias] = 1 |
|
} |
|
}) |
|
} |
|
// this.modelName = model_name |
|
this.columns = columns.filter(c => showFields[c.alias]).sort((a, b) => fields.indexOf(a.alias) - fields.indexOf(b.alias)) |
|
|
|
this.localParams = (this.query_params.extraViewParams && this.query_params.extraViewParams.formParams) || {} |
|
} catch (e) { |
|
if (e.message === 'Not found' || e.message === 'Meta not found') { |
|
this.notFound = true |
|
} else if (e.message === 'Invalid password') { |
|
this.showPasswordModal = true |
|
} |
|
} |
|
|
|
this.loadingData = false |
|
}, |
|
async save() { |
|
try { |
|
this.$v.$touch() |
|
if (this.$v.localState.$invalid) { |
|
this.$toast.error('Provide values of all required field').goAway(3000) |
|
return |
|
} |
|
|
|
this.submitting = true |
|
// 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 formData = new FormData() |
|
const data = { ...this.localState } |
|
|
|
for (const col of this.meta.columns) { |
|
if (col.uidt === 'Attachment') { |
|
const files = data[col._cn] |
|
delete data[col._cn] |
|
for (const file of (files || [])) { |
|
formData.append(`${col._cn}`, file) |
|
} |
|
} |
|
} |
|
|
|
await this.$store.dispatch('sqlMgr/ActUpload', { |
|
op: 'sharedViewInsert', |
|
opArgs: { |
|
view_id: this.$route.params.id, |
|
password: this.password, |
|
data, |
|
nested: this.virtual |
|
}, |
|
formData |
|
}) |
|
|
|
this.virtual = {} |
|
this.localState = {} |
|
|
|
this.submitted = true |
|
|
|
this.$toast.success(this.localParams.submit.message || 'Saved successfully.', { |
|
position: 'bottom-right' |
|
}).goAway(3000) |
|
} catch |
|
(e) { |
|
console.log(e) |
|
this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000) |
|
} |
|
this.submitting = false |
|
}, |
|
updateCol(_, column, id) { |
|
this.$set(this.localState, column, id) |
|
} |
|
}, |
|
|
|
validations() { |
|
const obj = { localState: {}, virtual: {} } |
|
for (const column of this.columns) { |
|
if (!this.localParams || !this.localParams.fields || !this.localParams.fields[column.alias]) { |
|
continue |
|
} |
|
if (!column.virtual && (((column.rqd || column.notnull) && !column.default) || (column.pk && !(column.ai || column.default)) || this.localParams.fields[column.alias].required)) { |
|
obj.localState[column._cn] = { required } |
|
} else if (column.bt) { |
|
const col = this.meta.columns.find(c => c.cn === column.bt.cn) |
|
|
|
console.log(col, this.meta.columns, column) |
|
|
|
if ((col.rqd && !col.default) || this.localParams.fields[column.alias].required) { |
|
obj.localState[col._cn] = { required } |
|
} |
|
} else if (column.virtual && this.localParams.fields[column.alias].required && (column.mm || column.hm)) { |
|
obj.virtual[column.alias] = { minLength: minLength(1), required } |
|
} |
|
} |
|
|
|
return obj |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.nc-form-wrapper { |
|
max-width: 800px; |
|
margin: 0 auto; |
|
} |
|
|
|
.nc-form-wrapper { |
|
border-radius: 4px; |
|
|
|
.nc-form { |
|
position: relative; |
|
border-radius: 4px; |
|
z-index: 2; |
|
background: var(--v-backgroundColorDefault-base); |
|
width: 80%; |
|
max-width: 600px; |
|
margin: 0 auto; |
|
margin-top: -100px; |
|
} |
|
} |
|
|
|
.nc-field-wrapper { |
|
|
|
&.active-row { |
|
border-radius: 4px; |
|
border: 1px solid var(--v-backgroundColor-darken1); |
|
} |
|
|
|
position: relative; |
|
|
|
.nc-field-remove-icon { |
|
opacity: 0; |
|
position: absolute; |
|
right: 10px; |
|
top: 10px; |
|
transition: 200ms opacity; |
|
z-index: 9 |
|
} |
|
|
|
&.nc-editable:hover { |
|
background: var(--v-backgroundColor-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 { |
|
|
|
.nc-hint { |
|
padding-left: 3px; |
|
} |
|
|
|
.nc-required-switch, .nc-switch { |
|
.v-input--selection-controls__input { |
|
transform: scale(0.65) !important; |
|
} |
|
} |
|
|
|
.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); |
|
} |
|
|
|
.comment-icon { |
|
position: absolute; |
|
right: 60px; |
|
bottom: 60px; |
|
} |
|
|
|
.nc-field-wrapper { |
|
|
|
//.required { |
|
// & > input, |
|
// .xc-input > input, |
|
// .xc-input .v-input__slot input, |
|
// .xc-input > div > input, |
|
// & > select, |
|
// .xc-input > select, |
|
// textarea:not(.inputarea) { |
|
// border: 1px solid rgba(255, 0, 0, 0.98); |
|
// border-radius: 4px; |
|
// background: var(--v-backgroundColorDefault-base); |
|
// } |
|
//} |
|
|
|
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); |
|
} |
|
|
|
.v-input__slot { |
|
padding: 0 !important; |
|
} |
|
} |
|
} |
|
|
|
.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, .nc-drag-n-drop-to-show { |
|
border: 2px dashed #c4c4c4; |
|
border-radius: 4px; |
|
font-size: .62rem; |
|
|
|
color: grey |
|
} |
|
|
|
.nc-form-left-nav { |
|
max-height: 100%; |
|
} |
|
|
|
.required > div > label + * { |
|
//border: 1px solid red; |
|
border-radius: 4px; |
|
background: var(--v-backgroundColorDefault-base); |
|
} |
|
|
|
.nc-form-banner { |
|
width: 100%; |
|
height: 200px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border-top-left-radius: 4px; |
|
border-top-right-radius: 4px; |
|
padding-bottom: 100px; |
|
|
|
.nc-form-logo { |
|
border-top-left-radius: 4px; |
|
border-top-right-radius: 4px; |
|
height: 100px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-start; |
|
width: 70%; |
|
padding: 0 20px; |
|
background: var(--v-backgroundColorDefault-base); |
|
|
|
.nc-form-add-logo { |
|
border-radius: 4px; |
|
color: grey; |
|
border: 2px dashed var(--v-backgroundColor-darken1); |
|
padding: 15px 15px; |
|
} |
|
} |
|
} |
|
</style> |
|
|
|
<!-- |
|
/** |
|
* @copyright Copyright (c) 2021, Xgene Cloud Ltd |
|
* |
|
* @author Naveen MR <oof1lab@gmail.com> |
|
* @author Pranav C Balan <pranavxc@gmail.com> |
|
* |
|
* @license GNU AGPL version 3 or any later version |
|
* |
|
* This program is free software: you can redistribute it and/or modify |
|
* it under the terms of the GNU Affero General Public License as |
|
* published by the Free Software Foundation, either version 3 of the |
|
* License, or (at your option) any later version. |
|
* |
|
* This program is distributed in the hope that it will be useful, |
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
* GNU Affero General Public License for more details. |
|
* |
|
* You should have received a copy of the GNU Affero General Public License |
|
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
* |
|
*/ |
|
-->
|
|
|