github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(gui): add form view options 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/577/head
Pranav C 3 years ago
parent
e386e915f2
commit
c2d260ed15
2 changed files with 134 additions and 123 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. 6
      packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonEditableCell.vue
  2. 251
      packages/nc-gui/components/project/spreadsheet/views/formView.vue

6
packages/nc-gui/components/project/spreadsheet/components/editableCell/jsonEditableCell.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<v-dialog :is="expand ? 'v-dialog' : 'div'" :value="true" class="cell-container" @keydown.stop.enter>
<v-dialog :is="expand ? 'v-dialog' : 'div'" :value="true" max-width="800px" class="cell-container" @keydown.stop.enter>
<div class="d-flex pa-1 " :class="{backgroundColor:expand}">
<v-spacer />
<v-icon small class="mr-2" @click="expand = !expand">
@ -21,13 +21,13 @@
v-if="expand"
v-model="localState"
class="text-left caption"
style="width: 300px;min-height:500px;min-width:100%"
style="width: 300px;min-height:min(600px,80vh);min-width:100%; "
/>
<monaco-json-object-editor
v-else
v-model="localState"
class="text-left caption"
style="width: 300px;min-height:200px;min-width:100%"
style="width: 300px;min-height:200px;min-width:100%;"
/>
</v-dialog>
</template>

251
packages/nc-gui/components/project/spreadsheet/views/formView.vue
Unescape View File

@ -7,11 +7,11 @@
<span class="">Fields</span>
<v-spacer />
<span
class="pointer caption mr-2 font-weight-bold"
style="border-bottom: 2px solid grey"
class="pointer caption mr-2"
style="border-bottom: 2px solid rgba(128,128,128,0.67)"
@click="columns=[...allColumns]"
>add all</span>
<span class="pointer caption font-weight-bold" style="border-bottom: 2px solid grey" @click="columns=[]">remove all</span>
<span class="pointer caption" style="border-bottom: 2px solid rgba(128,128,128,0.67)" @click="columns=[]">remove all</span>
</div>
<draggable
v-model="hiddenColumns"
@ -122,149 +122,110 @@
@end="drag=false"
>
<div
v-for="(col,i) in columns"
:key="col.alias"
class="nc-field-wrapper item px-4 py-4"
:class="{'nc-editable':isEditable}"
:class="{'nc-editable':isEditable , 'active-row': isActiveRow(col)}"
>
<template
v-if="_isUIAllowed('editFormView')"
<div
v-click-outside="() => onClickOutside(col)"
@dblclick="activeRow= col.alias"
>
<!-- <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"
<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"
/>
</label>
<virtual-cell
<v-icon small class="nc-field-remove-icon" @click="columns = columns.filter((_,j) => i !== j)">
mdi-eye-off-outline
</v-icon>
</template>
<div
:class="{
'active-row' : active === col._cn,
required: isRequired(col, localState)
}"
>
<div v-if="isActiveRow(col)">
<editable
style="width:300px"
placeholder=" Enter form input label"
class="caption pa-1 backgroundColor darken-1 mb-2 "
/>
<editable
style="width:300px"
placeholder=" Add some help text"
class="caption pa-1 backgroundColor darken-1 mb-2"
/>
</div>
<label v-else :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize">
<virtual-header-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"
: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"
/>
</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
</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="true"
:sql-ui="sqlUi"
:is-new="true"
:is-form="true"
/>
<header-cell
<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
: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
@focus="active = col._cn"
@blur="active = ''"
/>
</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>
<div v-if="!columns.length" class="mt-1 nc-drag-n-drop-to-show py-4 text-center grey--text text--lighter-1">
Drag and drop field here to add
<div
v-if="!columns.length"
class="mt-1 nc-drag-n-drop-to-show py-4 text-center grey--text text--lighter-1"
>
Drag and drop field here to add
</div>
</div>
</draggable>
<div class="my-10 text-center">
@ -272,6 +233,43 @@
Submit
</v-btn>
</div>
<div v-if="isEditable" style="max-width: 400px" class="mx-auto">
<v-switch dense inset hide-details v-model="localParams.nocoBranding">
<template #label>
<span class="caption">Show NocoDB branding</span>
</template>
</v-switch>
<v-switch dense inset hide-details v-model="localParams.submitRedirectUrl">
<template #label>
<span class="caption">Redirect to URL after form submission</span>
</template>
</v-switch>
<div class="caption grey--text mt-4 mb-2">
After form is submitted:
</div>
<label class="caption">Show this message:</label>
<v-textarea v-model="localParams.submitMessage" rows="3" hide-details solo outlined />
<v-switch v-model="localParams.submitShowAnotherSubmit" dense inset hide-details>
<template #label>
<span class="caption">Show "Submit another response" button</span>
</template>
</v-switch>
<v-switch v-model="localParams.submitShowBlankForm" dense inset hide-details>
<template #label>
<span class="caption">Show a blank form after 5 seconds</span>
</template>
</v-switch>
<v-switch v-model="localParams.submitEmailMe" dense inset hide-details>
<template #label>
<span class="caption">Email me at <span class="font-eright-bold">{{
$store.state.users.user.email
}}</span></span>
</template>
</v-switch>
</div>
</div>
</v-col>
</v-row>
@ -298,7 +296,8 @@ export default {
localState: {},
moved: false,
addNewColMenu: false,
addNewColModal: false
addNewColModal: false,
activeRow: null
// hiddenColumns: []
}),
computed: {
@ -342,6 +341,12 @@ export default {
// this.hiddenColumns = this.meta.columns.filter(c => this.availableColumns.find(c1 => c.cn === c1.cn && c._cn === c1._cn))
},
methods: {
isActiveRow(col) {
return this.activeRow === col.alias
},
onClickOutside(col) {
this.activeRow = this.activeRow === col.alias ? null : this.activeRow
},
handleMouseUp(col) {
if (!this.moved) {
this.columns = [...this.columns, col]
@ -362,7 +367,8 @@ export default {
// }, {})
// if (this.isNew) {
const data = await this.api.insert(this.localState)
//const data =
await this.api.insert(this.localState)
this.localState = {} // { ...this.localState, ...data }
// save hasmany and manytomany relations from local state
@ -406,6 +412,11 @@ export default {
.nc-field-wrapper {
&.active-row {
border-radius: 4px;
border: 1px solid var(--v-backgroundColor-darken1);
}
position: relative;
.nc-field-remove-icon {

Write Preview
Loading…
Cancel
Save