|
|
|
|
@ -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-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" |
|
|
|
|
:disabled-columns="{}" |
|
|
|
|
:column="col" |
|
|
|
|
:row="localState" |
|
|
|
|
:nodes="nodes" |
|
|
|
|
:is-form="true" |
|
|
|
|
:meta="meta" |
|
|
|
|
:api="api" |
|
|
|
|
:active="false" |
|
|
|
|
:sql-ui="sqlUi" |
|
|
|
|
:is-form="true" |
|
|
|
|
:dummy="true" |
|
|
|
|
/> |
|
|
|
|
<header-cell |
|
|
|
|
<editable-cell |
|
|
|
|
v-else |
|
|
|
|
:is-form="true" |
|
|
|
|
:value="col._cn" |
|
|
|
|
: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>--> |
|
|
|
|
|
|
|
|
|
</label> |
|
|
|
|
<virtual-cell |
|
|
|
|
<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" |
|
|
|
|
ref="virtual" |
|
|
|
|
:column="col" |
|
|
|
|
:row="localState" |
|
|
|
|
:nodes="nodes" |
|
|
|
|
:meta="meta" |
|
|
|
|
:api="api" |
|
|
|
|
:active="false" |
|
|
|
|
:sql-ui="sqlUi" |
|
|
|
|
:is-form="true" |
|
|
|
|
:dummy="true" |
|
|
|
|
:meta="meta" |
|
|
|
|
/> |
|
|
|
|
<editable-cell |
|
|
|
|
<header-cell |
|
|
|
|
v-else |
|
|
|
|
:id="`data-table-form-${col._cn}`" |
|
|
|
|
v-model="localState[col._cn]" |
|
|
|
|
:db-alias="dbAlias" |
|
|
|
|
:is-form="true" |
|
|
|
|
:value="col._cn" |
|
|
|
|
:column="col" |
|
|
|
|
class="xc-input body-2" |
|
|
|
|
:meta="meta" |
|
|
|
|
:sql-ui="sqlUi" |
|
|
|
|
is-form |
|
|
|
|
:dummy="true" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
</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> |
|
|
|
|
<!-- </v-card>--> |
|
|
|
|
<!-- </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; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:hover:not(:focus) { |
|
|
|
|
box-shadow: 0 0 2px dimgrey; |
|
|
|
|
background: var(--v-backgroundColorDefault-base); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
background: var(--v-backgroundColorDefault-base); |
|
|
|
|
.v-input__slot { |
|
|
|
|
padding: 0 !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.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> |
|
|
|
|
|
Pranav C
3 years ago