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

feat(gui): form view 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/591/head
Pranav C 3 years ago
parent
48a603a8cc
commit
6e916a67e0
3 changed files with 93 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      packages/nc-gui/components/project/spreadsheet/components/editable.vue
  2. 1
      packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
  3. 97
      packages/nc-gui/components/project/spreadsheet/views/formView.vue

18
packages/nc-gui/components/project/spreadsheet/components/editable.vue
Unescape View File

@ -30,15 +30,17 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
[contentEditable]{ [contentEditable] {
position: relative; position: relative;
} }
[contentEditable]:empty:before{
[contentEditable]:empty:before {
position: absolute; position: absolute;
left:0; left: 4px;
content:attr(placeholder); right: 4px;
color:grey; content: attr(placeholder);
font-style:italic; color: grey;
width:100%; font-style: italic;
} width: 100%;
}
</style> </style>

1
packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
Unescape View File

@ -282,6 +282,7 @@
</template> </template>
<template v-else-if="isForm"> <template v-else-if="isForm">
<form-view <form-view
:key="selectedViewId"
:nodes="nodes" :nodes="nodes"
:table="table" :table="table"
:available-columns="availableColumns" :available-columns="availableColumns"

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

@ -32,6 +32,7 @@
<label :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize flex-grow-1"> <label :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize flex-grow-1">
<virtual-header-cell <virtual-header-cell
v-if="col.virtual" v-if="col.virtual"
class="caption"
:column="col" :column="col"
:nodes="nodes" :nodes="nodes"
:is-form="true" :is-form="true"
@ -39,6 +40,7 @@
/> />
<header-cell <header-cell
v-else v-else
class="caption"
:is-form="true" :is-form="true"
:value="col._cn" :value="col._cn"
:column="col" :column="col"
@ -90,10 +92,23 @@
<!-- <v-chip>Add cover image</v-chip>--> <!-- <v-chip>Add cover image</v-chip>-->
<!-- </div>--> <!-- </div>-->
<div class="my-10 d-flex align-center justify-center flex-column"> <div class="my-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 class="nc-form-logo">
<div v-ripple class="nc-form-add-logo text-center caption pointer" @click.stop>
Add a logo
</div>
</div>
</div>
<editable <editable
:is="isEditable ? 'editable' : 'h3'" :is="isEditable ? 'editable' : 'h2'"
v-model.lazy="localParams.name" v-model.lazy="localParams.name"
class="title text-center" class="display-1 text-center"
:class="{'nc-meta-inputs': isEditable}" :class="{'nc-meta-inputs': isEditable}"
placeholder="Form Title" placeholder="Form Title"
> >
@ -104,7 +119,7 @@
:is="isEditable ? 'editable' : 'div'" :is="isEditable ? 'editable' : 'div'"
v-model.lazy="localParams.description" v-model.lazy="localParams.description"
:class="{'nc-meta-inputs': isEditable}" :class="{'nc-meta-inputs': isEditable}"
class="caption text-center" class="body-1 text-center"
placeholder="Add form description" placeholder="Add form description"
> >
{{ localParams.description }} {{ localParams.description }}
@ -140,18 +155,22 @@
</v-icon> </v-icon>
</template> </template>
<div <div
v-if="localParams.fields && localParams.fields[col.alias]"
:class="{ :class="{
'active-row' : active === col._cn, 'active-row' : active === col._cn,
required: isRequired(col, localState) required: isRequired(col, localState)
}" }"
> >
<div v-if="isActiveRow(col)"> <div v-if="isActiveRow(col)">
<div><label class="grey--text caption">Required</label><v-switch color="grey" dense inset /></div>
<editable <editable
v-model="localParams.fields[col.alias].label"
style="width:300px" style="width:300px"
placeholder=" Enter form input label" placeholder=" Enter form input label"
class="caption pa-1 backgroundColor darken-1 mb-2 " class="caption pa-1 backgroundColor darken-1 mb-2 "
/> />
<editable <editable
v-model="localParams.fields[col.alias].description"
style="width:300px" style="width:300px"
placeholder=" Add some help text" placeholder=" Add some help text"
class="caption pa-1 backgroundColor darken-1 mb-2" class="caption pa-1 backgroundColor darken-1 mb-2"
@ -160,15 +179,17 @@
<label v-else :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize"> <label v-else :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize">
<virtual-header-cell <virtual-header-cell
v-if="col.virtual" v-if="col.virtual"
:column="col" class="caption"
:column="{...col, _cn: localParams.fields[col.alias].label || col._cn}"
:nodes="nodes" :nodes="nodes"
:is-form="true" :is-form="true"
:meta="meta" :meta="meta"
/> />
<header-cell <header-cell
v-else v-else
class="caption"
:is-form="true" :is-form="true"
:value="col._cn" :value="localParams.fields[col.alias].label || col._cn"
:column="col" :column="col"
:sql-ui="sqlUi" :sql-ui="sqlUi"
/> />
@ -232,37 +253,38 @@
<v-btn color="primary" @click="save"> <v-btn color="primary" @click="save">
Submit Submit
</v-btn> </v-btn>
<!-- <span class="caption grey&#45;&#45;text pointer">Edit label</span>-->
</div> </div>
<div v-if="isEditable" style="max-width: 400px" class="mx-auto"> <div v-if="isEditable && localParams.submit" style="max-width: 400px" class="mx-auto">
<v-switch dense inset hide-details v-model="localParams.nocoBranding"> <!-- <v-switch v-model="localParams.nocoBranding" dense inset hide-details>
<template #label> <template #label>
<span class="caption">Show NocoDB branding</span> <span class="caption">Show NocoDB branding</span>
</template> </template>
</v-switch> </v-switch>
<v-switch dense inset hide-details v-model="localParams.submitRedirectUrl"> <v-switch v-model="localParams.submitRedirectUrl" dense inset hide-details>
<template #label> <template #label>
<span class="caption">Redirect to URL after form submission</span> <span class="caption">Redirect to URL after form submission</span>
</template> </template>
</v-switch> </v-switch>-->
<div class="caption grey--text mt-4 mb-2"> <div class="caption grey--text mt-4 mb-2">
After form is submitted: After form is submitted:
</div> </div>
<label class="caption">Show this message:</label> <label class="caption">Show this message:</label>
<v-textarea v-model="localParams.submitMessage" rows="3" hide-details solo outlined /> <v-textarea v-model="localParams.submit.message" rows="3" hide-details solo outlined />
<v-switch v-model="localParams.submitShowAnotherSubmit" dense inset hide-details> <v-switch v-model="localParams.submit.showAnotherSubmit" dense inset hide-details>
<template #label> <template #label>
<span class="caption">Show "Submit another response" button</span> <span class="caption">Show "Submit another response" button</span>
</template> </template>
</v-switch> </v-switch>
<v-switch v-model="localParams.submitShowBlankForm" dense inset hide-details> <v-switch v-model="localParams.submit.showBlankForm" dense inset hide-details>
<template #label> <template #label>
<span class="caption">Show a blank form after 5 seconds</span> <span class="caption">Show a blank form after 5 seconds</span>
</template> </template>
</v-switch> </v-switch>
<v-switch v-model="localParams.submitEmailMe" dense inset hide-details> <v-switch v-model="localParams.submit.emailMe" dense inset hide-details>
<template #label> <template #label>
<span class="caption">Email me at <span class="font-eright-bold">{{ <span class="caption">Email me at <span class="font-eright-bold">{{
$store.state.users.user.email $store.state.users.user.email
@ -335,8 +357,24 @@ export default {
} }
} }
}, },
watch: {
'meta.columns'() {
this.meta.columns.forEach((c) => {
this.localParams.fields[c.alias] = this.localParams.fields[c.alias] || {}
})
}
},
mounted() { mounted() {
this.localParams = Object.assign({ name: this.meta._tn, description: 'Form view description' }, this.localParams) const localParams = Object.assign({
name: this.meta._tn,
description: 'Form view description',
submit: {},
fields: {}
}, this.localParams)
this.meta.columns.forEach((c) => {
localParams.fields[c.alias] = localParams.fields[c.alias] || {}
})
this.localParams = localParams
// this.columns = [...this.availableColumns] // this.columns = [...this.availableColumns]
// this.hiddenColumns = this.meta.columns.filter(c => this.availableColumns.find(c1 => c.cn === c1.cn && c._cn === c1._cn)) // this.hiddenColumns = this.meta.columns.filter(c => this.availableColumns.find(c1 => c.cn === c1.cn && c._cn === c1._cn))
}, },
@ -367,7 +405,7 @@ export default {
// }, {}) // }, {})
// if (this.isNew) { // if (this.isNew) {
//const data = // const data =
await this.api.insert(this.localState) await this.api.insert(this.localState)
this.localState = {} // { ...this.localState, ...data } this.localState = {} // { ...this.localState, ...data }
@ -541,4 +579,33 @@ export default {
background: var(--v-backgroundColorDefault-base); 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;
.nc-form-logo {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 100px;
display: flex;
align-items: center;
justify-content: 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> </style>

Write Preview
Loading…
Cancel
Save