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.
1081 lines
35 KiB
1081 lines
35 KiB
<template> |
|
<v-container fluid class="h-100 py-0"> |
|
<v-row class="h-100 my-0" :class="{ 'd-flex justify-center': submitted }"> |
|
<template v-if="submitted"> |
|
<v-col class="d-flex justify-center"> |
|
<div v-if="view" style="min-width: 350px"> |
|
<v-alert type="success" outlined> |
|
<span class="title">{{ view.success_msg || 'Successfully submitted form data' }}</span> |
|
</v-alert> |
|
<p v-if="view.show_blank_form" class="caption grey--text text-center"> |
|
New form will be loaded after {{ secondsRemain }} seconds |
|
</p> |
|
<div v-if="view.submit_another_form" 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 v-if="isEditable" class="h-100 col-md-4 col-lg-3"> |
|
<v-card class="h-100 overflow-auto pa-4 pa-md-6 backgroundColor elevation-0 nc-form-left-nav"> |
|
<div class="d-flex grey--text"> |
|
<span class=""> |
|
<!--Fields--> |
|
{{ $t('objects.fields') }} |
|
</span> |
|
<v-spacer /> |
|
<span |
|
v-if="hiddenColumns.length" |
|
class="pointer caption mr-2" |
|
style="border-bottom: 2px solid rgb(218, 218, 218)" |
|
@click="addAllColumns()" |
|
> |
|
<!--Add all--> |
|
{{ $t('general.addAll') }} |
|
</span> |
|
<span |
|
v-if="columns.length" |
|
class="pointer caption" |
|
style="border-bottom: 2px solid rgb(218, 218, 218)" |
|
@click="removeAllColumns" |
|
> |
|
<!--Remove all--> |
|
{{ $t('general.removeAll') }} |
|
</span> |
|
</div> |
|
<draggable |
|
v-if="showFields" |
|
v-model="hiddenColumns" |
|
draggable=".item" |
|
group="form-inputs" |
|
@start="drag = true" |
|
@end="drag = false" |
|
> |
|
<v-card |
|
v-for="col in hiddenColumns" |
|
:key="col.title" |
|
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.title}`" class="body-2 text-capitalize flex-grow-1"> |
|
<virtual-header-cell |
|
v-if="isVirtualCol(col)" |
|
class="caption" |
|
:column="col" |
|
:nodes="nodes" |
|
:is-form="true" |
|
:meta="meta" |
|
/> |
|
<header-cell |
|
v-else |
|
class="caption" |
|
:is-form="true" |
|
:value="col.title" |
|
:column="col" |
|
:sql-ui="sqlUi" |
|
/> |
|
</label> |
|
<v-icon color="grey"> mdi-drag </v-icon> |
|
</div> |
|
</v-card> |
|
<div class="mt-4 nc-drag-n-drop-to-hide py-3 text-center grey--text text--lighter-1"> |
|
<!--Drag and drop fields here to hide--> |
|
{{ $t('msg.info.dragDropHide') }} |
|
</div> |
|
</draggable> |
|
|
|
<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 size="20" color="grey"> mdi-plus </v-icon> |
|
<!--Add new field to this table--> |
|
{{ $t('activity.addField') }} |
|
</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="{ 'col-12': !isEditable, 'col-lg-9 col-md-8': isEditable }" |
|
class="h-100 px-sm-1 px-md-10" |
|
style="overflow-y: auto" |
|
> |
|
<!-- <pre class="caption">{{ fields }}</pre>--> |
|
|
|
<!-- <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 ma-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>--> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="mx-auto nc-form elevation-3 pa-2"> |
|
<div class="nc-form-logo py-8"> |
|
<!-- <div v-ripple class="nc-form-add-logo text-center caption pointer" @click.stop>--> |
|
<!-- Add a logo--> |
|
<!-- </div>--> |
|
</div> |
|
<editable |
|
:is="isEditable ? 'editable' : 'h2'" |
|
v-model="view.heading" |
|
class="display-1 font-weight-bold text-left mx-4 mb-3 px-1 text--text text--lighten-1" |
|
:class="{ 'nc-meta-inputs': isEditable }" |
|
placeholder="Form Title" |
|
@input="updateView" |
|
> |
|
{{ view.heading }} |
|
</editable> |
|
<!--placeholder="Add form description"--> |
|
<editable |
|
:is="isEditable ? 'editable' : 'div'" |
|
v-model="view.subheading" |
|
:class="{ 'nc-meta-inputs': isEditable }" |
|
class="body-1 text-left mx-4 py-2 px-1 text--text text--lighten-2" |
|
:placeholder="$t('msg.info.formDesc')" |
|
@input="updateView" |
|
> |
|
{{ view.subheading }} |
|
</editable> |
|
<draggable |
|
v-model="columns" |
|
draggable=".item" |
|
group="form-inputs" |
|
class="h-100" |
|
@start="drag = true" |
|
@end="drag = false" |
|
@change="onMove($event)" |
|
> |
|
<div |
|
v-for="(col, i) in columns" |
|
:key="col.title" |
|
class="nc-field-wrapper item px-4 my-3 pointer" |
|
:class="{ |
|
'nc-editable': isEditable, |
|
'active-row': isActiveRow(col), |
|
'py-4': !isActiveRow(col), |
|
'pb-4': isActiveRow(col), |
|
}" |
|
> |
|
<div v-click-outside="() => onClickOutside(col)" @click="activeRow = col.title"> |
|
<template v-if="_isUIAllowed('editFormView')"> |
|
<v-icon small class="nc-field-remove-icon" @click.stop="hideColumn(i)"> |
|
mdi-eye-off-outline |
|
</v-icon> |
|
</template> |
|
|
|
<div |
|
v-if="localParams.fields && localParams.fields[col.title]" |
|
:class="{ |
|
'active-row': active === col.title, |
|
required: isRequired(col, localState, localParams.fields[col.title].required), |
|
}" |
|
> |
|
<div class="nc-field-editables" :class="{ 'nc-show': isActiveRow(col) }"> |
|
<div class="d-flex align-center pb-2 mt-2"> |
|
<v-icon small color="grey"> mdi-drag </v-icon> |
|
|
|
<label |
|
class="grey--text caption ml-2" |
|
@click="(col.required = !col.required), updateColMeta(col, i)" |
|
> |
|
<!--Required--> |
|
{{ $t('general.required') }} |
|
</label> |
|
<v-switch |
|
v-model="col.required" |
|
v-t="['a:form-view:field:mark-required']" |
|
class="nc-required-switch ml-1 mt-0" |
|
hide-details |
|
flat |
|
color="primary" |
|
dense |
|
inset |
|
@change="updateColMeta(col, i)" |
|
/> |
|
</div> |
|
<!--placeholder=" Enter form input label"--> |
|
<editable |
|
v-model.lazy="col.label" |
|
style="width: 300px; white-space: pre-wrap" |
|
:placeholder="$t('msg.info.formInput')" |
|
class="caption pa-1 backgroundColor darken-1 mb-2" |
|
@input="updateColMeta(col, i)" |
|
/> |
|
<!--placeholder=" Add some help text"--> |
|
<editable |
|
v-model.lazy="col.description" |
|
style="width: 300px; white-space: pre-wrap" |
|
:placeholder="$t('msg.info.formHelpText')" |
|
class="caption pa-1 backgroundColor darken-1 mb-2" |
|
@input="updateColMeta(col, i)" |
|
@keydown.enter.prevent |
|
/> |
|
</div> |
|
<label |
|
:class="{ 'nc-show': !isActiveRow(col) }" |
|
:for="`data-table-form-${col.title}`" |
|
class="body-2 text-capitalize nc-field-labels" |
|
> |
|
<virtual-header-cell |
|
v-if="isVirtualCol(col)" |
|
class="caption" |
|
:column="{ ...col, _cn: col.label || col.title }" |
|
:nodes="nodes" |
|
:is-form="true" |
|
:meta="meta" |
|
:required="isRequired(col, localState, localParams.fields[col.title].required)" |
|
/> |
|
<header-cell |
|
v-else |
|
class="caption" |
|
:is-form="true" |
|
:value="col.label || col.title" |
|
:column="col" |
|
:sql-ui="sqlUi" |
|
:required="isRequired(col, localState, localParams.fields[col.title].required)" |
|
/> |
|
</label> |
|
<div v-if="isVirtualCol(col)" @click.stop> |
|
<virtual-cell |
|
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" |
|
:hint="col.description" |
|
:required="col.required" |
|
@update:localState="state => $set(virtual, col.title, state)" |
|
@updateCol="updateCol" |
|
/> |
|
<div |
|
v-if=" |
|
$v.virtual && |
|
$v.virtual.$dirty && |
|
$v.virtual[col.title] && |
|
(!$v.virtual[col.title].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.column_name === col.bt.column_name).title] |
|
" |
|
> |
|
<div |
|
v-if=" |
|
!$v.localState[meta.columns.find(c => c.column_name === col.bt.column_name).title] |
|
.required |
|
" |
|
class="error--text caption" |
|
> |
|
Field is required. |
|
</div> |
|
</template> |
|
</div> |
|
<template v-else> |
|
<div |
|
v-if="col.ai || (col.pk && !isNew) || disabledColumns[col.title]" |
|
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.title]" /> |
|
</div> |
|
|
|
<div v-else @click.stop> |
|
<editable-cell |
|
:id="`data-table-form-${col.title}`" |
|
v-model="localState[col.title]" |
|
:db-alias="dbAlias" |
|
:column="col" |
|
class="xc-input body-2" |
|
:meta="meta" |
|
:sql-ui="sqlUi" |
|
is-form |
|
:hint="col.description" |
|
@focus="active = col.title" |
|
@blur="active = ''" |
|
/> |
|
</div> |
|
<template v-if="$v.localState && $v.localState.$dirty && $v.localState[col.title]"> |
|
<div v-if="!$v.localState[col.title].required" class="error--text caption"> |
|
Field is required. |
|
</div> |
|
</template> |
|
</template> |
|
</div> |
|
<!-- </div>--> |
|
</div> |
|
</div> |
|
<div |
|
v-if="!columns.length" |
|
class="nc-drag-n-drop-to-show py-4 mx-8 my-10 text-center grey--text text--lighter-1" |
|
> |
|
Drag and drop fields here to add |
|
</div> |
|
</draggable> |
|
<div class="my-10 text-center"> |
|
<v-btn color="primary" :loading="loading" :disabled="loading" @click="save"> |
|
<!--Submit--> |
|
{{ $t('general.submit') }} |
|
</v-btn> |
|
<!-- <span class="caption grey--text pointer">Edit label</span>--> |
|
</div> |
|
<div v-if="isEditable && localParams.submit" style="max-width: 700px" class="mx-auto mt-4 px-4 mb-4"> |
|
<!-- <v-switch v-model="localParams.nocoBranding" dense inset hide-details> |
|
<template #label> |
|
<span class="caption">Show NocoDB branding</span> |
|
</template> |
|
</v-switch> |
|
<v-switch v-model="localParams.submitRedirectUrl" dense inset hide-details> |
|
<template #label> |
|
<span class="caption">Redirect to URL after form submission</span> |
|
</template> |
|
</v-switch>--> |
|
|
|
<div class="caption grey--text mt-10 mb-2"> |
|
<!--After form is submitted:--> |
|
{{ $t('msg.info.afterFormSubmitted') }} |
|
</div> |
|
<label class="caption grey--text font-weight-bold"> |
|
<!--Show this message:--> |
|
{{ $t('msg.info.showMessage') }}: |
|
</label> |
|
<v-textarea v-model="view.success_msg" rows="3" hide-details solo class="caption" @input="updateView" /> |
|
|
|
<v-switch |
|
v-model="view.submit_another_form" |
|
v-t="[`a:form-view:submit-another-form`]" |
|
dense |
|
inset |
|
hide-details |
|
class="nc-switch" |
|
@change="updateView" |
|
> |
|
<template #label> |
|
<span class="font-weight-bold grey--text caption"> |
|
<!--Show "Submit Another Form" button--> |
|
{{ $t('msg.info.submitAnotherForm') }} |
|
</span> |
|
</template> |
|
</v-switch> |
|
<v-switch |
|
v-model="view.show_blank_form" |
|
v-t="[`a:form-view:show-blank-form`]" |
|
dense |
|
inset |
|
hide-details |
|
class="nc-switch" |
|
@change="updateView" |
|
> |
|
<template #label> |
|
<span class="font-weight-bold grey--text caption"> |
|
<!--Show a blank form after 5 seconds--> |
|
{{ $t('msg.info.showBlankForm') }} |
|
</span> |
|
</template> |
|
</v-switch> |
|
<v-switch v-model="emailMe" v-t="[`a:form-view:email-me`]" dense inset hide-details class="nc-switch"> |
|
<template #label> |
|
<span class="caption font-weight-bold grey--text"> |
|
{{ $t('msg.info.emailForm') }} |
|
<span class="font-eright-bold">{{ $store.state.users.user.email }}</span> |
|
</span> |
|
</template> |
|
</v-switch> |
|
</div> |
|
</div> |
|
</div> |
|
</v-col> |
|
</template> |
|
</v-row> |
|
</v-container> |
|
</template> |
|
|
|
<script> |
|
import draggable from 'vuedraggable'; |
|
import { validationMixin } from 'vuelidate'; |
|
import { required, minLength } from 'vuelidate/lib/validators'; |
|
import { UITypes, isVirtualCol, RelationTypes, getSystemColumns } from 'nocodb-sdk'; |
|
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'; |
|
import EditColumn from '../components/EditColumn'; |
|
import form from '../mixins/form'; |
|
|
|
// todo: generate hideCols based on default values |
|
const hiddenCols = ['created_at', 'updated_at']; |
|
|
|
export default { |
|
name: 'FormView', |
|
components: { |
|
EditColumn, |
|
Editable, |
|
EditableCell, |
|
VirtualCell, |
|
HeaderCell, |
|
VirtualHeaderCell, |
|
draggable, |
|
}, |
|
mixins: [form, validationMixin], |
|
props: [ |
|
'meta', |
|
'availableColumns', |
|
'nodes', |
|
'sqlUi', |
|
'formParams', |
|
'showFields', |
|
'fieldsOrder', |
|
'allColumns', |
|
'dbAlias', |
|
'api', |
|
'id', |
|
'viewId', |
|
'viewTitle', |
|
], |
|
data: () => ({ |
|
isVirtualCol, |
|
localState: {}, |
|
moved: false, |
|
addNewColMenu: false, |
|
addNewColModal: false, |
|
activeRow: null, |
|
active: null, |
|
isNew: true, |
|
submitted: false, |
|
secondsRemain: null, |
|
loading: false, |
|
virtual: {}, |
|
formColumns: [], |
|
fields: [], |
|
view: {}, |
|
// hiddenColumns: [] |
|
}), |
|
validations() { |
|
const obj = { |
|
localState: {}, |
|
virtual: {}, |
|
}; |
|
for (const column of this.columns) { |
|
if (!this.localParams || !this.localParams.fields || !this.localParams.fields[column.title]) { |
|
continue; |
|
} |
|
if ( |
|
!isVirtualCol(column) && |
|
(((column.rqd || column.notnull) && !column.cdf) || |
|
(column.pk && !(column.ai || column.cdf)) || |
|
column.required) |
|
) { |
|
obj.localState[column.title] = { required }; |
|
} else if ( |
|
column.uidt === UITypes.LinkToAnotherRecord && |
|
column.colOptions && |
|
column.colOptions.type === RelationTypes.BELONGS_TO |
|
) { |
|
const col = this.meta.columns.find(c => c.id === column.colOptions.fk_child_column_id); |
|
|
|
if ((col && col.rqd && !col.cdf) || column.required) { |
|
if (col) { |
|
obj.virtual[column.title] = { required }; |
|
} |
|
} |
|
} else if (isVirtualCol(column) && column.required) { |
|
obj.virtual[column.title] = { |
|
minLength: minLength(1), |
|
required, |
|
}; |
|
} |
|
} |
|
return obj; |
|
}, |
|
computed: { |
|
systemFieldsIds() { |
|
return getSystemColumns(this.fields).map(c => c.fk_column_id); |
|
}, |
|
emailMe: { |
|
get() { |
|
try { |
|
const data = JSON.parse(this.view.email); |
|
return data[this.$store.state.users.user.email]; |
|
} catch (e) {} |
|
return false; |
|
}, |
|
set(v) { |
|
let data = {}; |
|
try { |
|
data = JSON.parse(this.view.email) || {}; |
|
} catch (e) {} |
|
data[this.$store.state.users.user.email] = v; |
|
this.view.email = JSON.stringify(data); |
|
this.updateView(); |
|
this.checkSMTPStatus(); |
|
}, |
|
}, |
|
allColumnsLoc() { |
|
return this.fields; // this.mets.columns.filter(c => !hiddenCols.includes(c.column_name) && !(c.pk && c.ai) && this.meta.belongsTo.every(bt => c.column_name !== bt.column_name)) |
|
}, |
|
isEditable() { |
|
return this._isUIAllowed('editFormView'); |
|
}, |
|
localParams: { |
|
get() { |
|
return this.formParams || {}; |
|
}, |
|
set(params) { |
|
this.$emit('update:formParams', params); |
|
}, |
|
}, |
|
hiddenColumns: { |
|
get() { |
|
return this.fields.filter(f => !f.show && !this.systemFieldsIds.includes(f.fk_column_id)); |
|
}, |
|
set(v) {}, |
|
}, |
|
columns: { |
|
get() { |
|
return this.fields |
|
.filter(f => f.show && f.uidt != UITypes.Rollup && f.uidt != UITypes.Lookup) |
|
.sort((a, b) => a.order - b.order); |
|
}, |
|
set(v) {}, |
|
}, |
|
}, |
|
watch: { |
|
'meta.columns'() { |
|
this.meta.columns.forEach(c => { |
|
this.localParams.fields[c.title] = this.localParams.fields[c.title] || {}; |
|
}); |
|
}, |
|
submitted(val) { |
|
if (val && this.view.show_blank_form) { |
|
this.secondsRemain = 5; |
|
const intvl = setInterval(() => { |
|
if (--this.secondsRemain < 0) { |
|
this.submitted = false; |
|
clearInterval(intvl); |
|
} |
|
}, 1000); |
|
} |
|
}, |
|
}, |
|
created() { |
|
this.loadView(); |
|
}, |
|
mounted() { |
|
const localParams = Object.assign( |
|
{ |
|
name: this.meta.title, |
|
description: 'Form view description', |
|
submit: {}, |
|
emailMe: {}, |
|
fields: {}, |
|
}, |
|
this.localParams |
|
); |
|
this.availableColumns.forEach(c => { |
|
localParams.fields[c.title] = localParams.fields[c.title] || {}; |
|
}); |
|
this.localParams = localParams; |
|
// this.columns = [...this.availableColumns] |
|
// this.hiddenColumns = this.meta.columns.filter(c => this.availableColumns.find(c1 => c.column_name === c1.column_name && c.title === c1.title)) |
|
}, |
|
methods: { |
|
onMove(event) { |
|
const { newIndex, element, oldIndex } = event.added || event.moved || event.removed; |
|
|
|
if (event.added) { |
|
this.$set(element, 'show', true); |
|
} |
|
|
|
if (event.removed) { |
|
this.$set(element, 'show', false); |
|
this.saveOrUpdateOrderOrVisibility(element, oldIndex); |
|
} else { |
|
if (!this.columns.length || this.columns.length === 1) { |
|
this.$set(element, 'order', 1); |
|
} else if (this.columns.length - 1 === newIndex) { |
|
this.$set(element, 'order', this.columns[newIndex - 1].order + 1); |
|
} else if (newIndex === 0) { |
|
this.$set(element, 'order', this.columns[1].order / 2); |
|
} else { |
|
this.$set(element, 'order', (this.columns[newIndex - 1].order + this.columns[newIndex + 1].order) / 2); |
|
} |
|
this.saveOrUpdateOrderOrVisibility(element, newIndex); |
|
} |
|
|
|
this.$e('a:form-view:reorder'); |
|
}, |
|
|
|
async saveOrUpdateOrderOrVisibility(field, i) { |
|
const { fk_view_id, fk_column_id, order, show, id } = field; |
|
|
|
if (id) { |
|
await this.$api.dbViewColumn.update(this.viewId, field.id, { |
|
fk_view_id, |
|
fk_column_id, |
|
order, |
|
show, |
|
}); |
|
} else { |
|
field.id = ( |
|
await this.$api.dbViewColumn.create(this.viewId, { |
|
fk_view_id, |
|
fk_column_id, |
|
order, |
|
show, |
|
}) |
|
).id; |
|
} |
|
this.$emit( |
|
'update:fieldsOrder', |
|
this.fields.map(c => c.title) |
|
); |
|
}, |
|
async updateColMeta(col, i) { |
|
// todo: introduce debounce to avoid consecutive api call |
|
if (col.id) { |
|
await this.$api.dbView.formColumnUpdate(col.id, col); |
|
} |
|
}, |
|
async updateView() { |
|
if (this.view.subheading?.length > 255) { |
|
this.$toast.error('Data too long for Form Description').goAway(3000); |
|
return; |
|
} |
|
await this.$api.dbView.formUpdate(this.viewId, this.view); |
|
}, |
|
async loadView() { |
|
const { columns, ...view } = await this.$api.dbView.formRead(this.viewId); |
|
this.view = view; |
|
this.formColumns = columns; |
|
let order = 1; |
|
const fieldById = this.formColumns.reduce( |
|
(o, f) => ({ |
|
...o, |
|
[f.fk_column_id]: f, |
|
}), |
|
{} |
|
); |
|
|
|
const meta = this.$store.state.meta.metas[this.meta.id]; |
|
this.fields = meta.columns |
|
.map(c => ({ |
|
...c, |
|
fk_column_id: c.id, |
|
fk_view_id: this.viewId, |
|
...(fieldById[c.id] ? fieldById[c.id] : {}), |
|
order: (fieldById[c.id] && fieldById[c.id].order) || order++, |
|
id: fieldById[c.id] && fieldById[c.id].id, |
|
})) |
|
.sort((a, b) => a.order - b.order); |
|
}, |
|
hideColumn(i) { |
|
if (this.isDbRequired(this.columns[i])) { |
|
this.$toast.info("Required field can't be removed").goAway(3000); |
|
return; |
|
} |
|
|
|
this.saveOrUpdateOrderOrVisibility( |
|
{ |
|
...this.columns[i], |
|
show: false, |
|
}, |
|
i |
|
); |
|
this.$set(this.columns[i], 'show', false); |
|
|
|
this.$e('a:form-view:hide-columns'); |
|
// this.columns = this.columns.filter((_, j) => i !== j) |
|
}, |
|
async addAllColumns() { |
|
for (const col of this.fields) { |
|
if (!this.systemFieldsIds.includes(col.fk_column_id)) { |
|
this.$set(col, 'show', true); |
|
} |
|
} |
|
await this.$api.dbView.showAllColumn(this.viewId, { |
|
ignoreIds: this.systemFieldsIds, |
|
}); |
|
// this.columns = [...this.allColumnsLoc] |
|
this.$e('a:form-view:add-all'); |
|
}, |
|
async removeAllColumns() { |
|
for (const col of this.fields) { |
|
if (this.isDbRequired(col)) { |
|
continue; |
|
} |
|
this.$set(col, 'show', false); |
|
} |
|
await this.$api.dbView.hideAllColumn(this.viewId, { |
|
ignoreIds: this.fields.filter(this.isDbRequired).map(f => f.fk_column_id), |
|
}); |
|
this.$e('a:form-view:remove-all'); |
|
}, |
|
isDbRequired(column) { |
|
if (hiddenCols.includes(column.fk_column_id)) { |
|
return false; |
|
} |
|
|
|
let isRequired = |
|
// confirm column is not virtual |
|
(!isVirtualCol(column) && |
|
// column required / not null |
|
column.rqd && |
|
// column default value |
|
!column.cdf && |
|
// confirm it's not foreign key |
|
!this.meta.columns.some( |
|
c => |
|
c.uidt === UITypes.LinkToAnotherRecord && |
|
c.colOptions.type === RelationTypes.BELONGS_TO && |
|
column.fk_column_id === c.colOptions.fk_child_column_id |
|
)) || |
|
// primary column |
|
(column.pk && !column.ai && !column.cdf); |
|
if (column.uidt === UITypes.LinkToAnotherRecord && column.colOptions.type === RelationTypes.BELONGS_TO) { |
|
const col = this.meta.columns.find(c => c.id === column.colOptions.fk_child_column_id); |
|
if ((col.rqd && !col.default) || this.localParams.fields[column.title].required) { |
|
isRequired = true; |
|
} |
|
} |
|
|
|
return isRequired; |
|
}, |
|
async checkSMTPStatus() { |
|
if (this.emailMe) { |
|
const emailPluginActive = await this.$api.plugin.status('SMTP'); |
|
if (!emailPluginActive) { |
|
this.emailMe = false; |
|
this.$toast.info('Please activate SMTP plugin in App store for enabling email notification').goAway(5000); |
|
} |
|
} |
|
}, |
|
updateCol(_, column, id) { |
|
this.$set(this.localState, column, id); |
|
}, |
|
isActiveRow(col) { |
|
return this.activeRow === col.title; |
|
}, |
|
onClickOutside(col) { |
|
this.activeRow = this.activeRow === col.title ? null : this.activeRow; |
|
}, |
|
handleMouseUp(col) { |
|
if (!this.moved) { |
|
const index = this.columns.length; |
|
// this.columns = [...this.columns, col] |
|
col.order = (index ? this.columns[index - 1].order : 0) + 1; |
|
this.$set(col, 'show', true); |
|
this.$nextTick(() => { |
|
this.saveOrUpdateOrderOrVisibility(col, index); |
|
}); |
|
} |
|
}, |
|
async onNewColCreation(col) { |
|
this.addNewColMenu = false; |
|
this.addNewColModal = false; |
|
this.$emit('onNewColCreation', col); |
|
await this.$store.dispatch('meta/ActLoadMeta', { |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias, |
|
id: this.meta.id, |
|
force: true, |
|
}); |
|
|
|
await this.loadView(); |
|
|
|
this.$e('a:form-view:add-new-field'); |
|
}, |
|
async save() { |
|
try { |
|
this.$v.$touch(); |
|
if (this.$v.localState.$invalid) { |
|
this.$toast.error('Provide values of all required field').goAway(3000); |
|
|
|
return; |
|
} |
|
|
|
this.loading = true; |
|
|
|
let data = await this.$api.dbViewRow.create( |
|
'noco', |
|
this.projectName, |
|
this.meta.title, |
|
this.viewTitle, |
|
this.localState |
|
); |
|
|
|
data = { ...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(data); |
|
} |
|
} |
|
} |
|
|
|
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.loading = false; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.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: 0.72rem; |
|
color: grey; |
|
} |
|
|
|
.v-breadcrumbs li:nth-child(even) { |
|
padding: 0 6px; |
|
font-size: 0.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: 0.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: 0.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; |
|
} |
|
} |
|
} |
|
|
|
//.nc-field-labels, |
|
.nc-field-editables { |
|
max-height: 0; |
|
transition: 0.4s max-height; |
|
overflow-y: hidden; |
|
display: block; |
|
|
|
&.nc-show { |
|
max-height: 500px; |
|
} |
|
} |
|
</style>
|
|
|