9a3d4 form page (#20)
* Form page new ui * UI polishing, code cleanign & bug fixes * form page divide into separate component & user route-view for tabs * new pages change meta info * Display columns modal Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>
This commit is contained in:
Chirag
GitHub
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap sm:flex-nowrap my-4 w-full">
|
||||
<div class="w-full sm:w-auto border border-gray-300 rounded-md p-2 flex-grow select-all bg-gray-100">
|
||||
<p class="select-all text-gray-900">
|
||||
{{ content }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-full sm:w-40 sm:ml-2 mt-2 sm:mt-0 shrink-0">
|
||||
<v-button color="light-gray" class="w-full" @click="copyToClipboard(content)">
|
||||
<slot name="icon">
|
||||
<svg class="h-4 w-4 -mt-1 text-blue-600 inline mr-1" viewBox="0 0 20 20" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.16667 12.4998C3.3901 12.4998 3.00182 12.4998 2.69553 12.373C2.28715 12.2038 1.9627 11.8794 1.79354 11.471C1.66667 11.1647 1.66667 10.7764 1.66667 9.99984V4.33317C1.66667 3.39975 1.66667 2.93304 1.84833 2.57652C2.00812 2.26292 2.26308 2.00795 2.57669 1.84816C2.93321 1.6665 3.39992 1.6665 4.33334 1.6665H10C10.7766 1.6665 11.1649 1.6665 11.4711 1.79337C11.8795 1.96253 12.204 2.28698 12.3731 2.69536C12.5 3.00165 12.5 3.38993 12.5 4.1665M10.1667 18.3332H15.6667C16.6001 18.3332 17.0668 18.3332 17.4233 18.1515C17.7369 17.9917 17.9919 17.7368 18.1517 17.4232C18.3333 17.0666 18.3333 16.5999 18.3333 15.6665V10.1665C18.3333 9.23308 18.3333 8.76637 18.1517 8.40985C17.9919 8.09625 17.7369 7.84128 17.4233 7.68149C17.0668 7.49984 16.6001 7.49984 15.6667 7.49984H10.1667C9.23325 7.49984 8.76654 7.49984 8.41002 7.68149C8.09642 7.84128 7.84145 8.09625 7.68166 8.40985C7.50001 8.76637 7.50001 9.23308 7.50001 10.1665V15.6665C7.50001 16.5999 7.50001 17.0666 7.68166 17.4232C7.84145 17.7368 8.09642 17.9917 8.41002 18.1515C8.76654 18.3332 9.23325 18.3332 10.1667 18.3332Z"
|
||||
stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</slot>
|
||||
<slot></slot>
|
||||
</v-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CopyContent',
|
||||
props: {
|
||||
content: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
mounted() {
|
||||
},
|
||||
|
||||
methods: {
|
||||
copyToClipboard(str) {
|
||||
const el = document.createElement('textarea')
|
||||
el.value = str
|
||||
document.body.appendChild(el)
|
||||
el.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(el)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="border border-nt-blue-light bg-blue-50 dark:bg-notion-dark-light rounded-md p-4 mb-5 w-full mx-auto mt-4 select-all"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<p class="select-all text-nt-blue flex-grow">
|
||||
{{ embedCode }}
|
||||
</p>
|
||||
<div class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer" @click="copyToClipboard">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-nt-blue" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EmbedFormCode',
|
||||
props: {
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {
|
||||
embedCode () {
|
||||
return '<iframe style="border:none;width:100%;" height="' + this.formHeight + 'px" src="' + this.form.share_url + '"></iframe>'
|
||||
},
|
||||
formHeight () {
|
||||
let height = 200
|
||||
if (!this.form.hide_title) {
|
||||
height += 60
|
||||
}
|
||||
height += this.form.properties.filter((property) => {
|
||||
return !property.hidden
|
||||
}).length * 70
|
||||
|
||||
return height
|
||||
}
|
||||
},
|
||||
|
||||
watch: {},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
|
||||
methods: {
|
||||
copyToClipboard () {
|
||||
const str = this.embedCode
|
||||
const el = document.createElement('textarea')
|
||||
el.value = str
|
||||
document.body.appendChild(el)
|
||||
el.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(el)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,39 +1,41 @@
|
||||
<template>
|
||||
<div
|
||||
class="my-4 w-full mx-auto">
|
||||
<h3 class="font-semibold mb-4">
|
||||
Form Submissions
|
||||
<span v-if="form && !isLoading && tableData.length > 0" class="text-right text-xs uppercase mb-2"> - <a :href="exportUrl" target="_blank">Export as CSV</a></span>
|
||||
<span v-if="form && !isLoading && formInitDone" class="float-right text-xs uppercase mb-2"> <a href="javascript:void(0);" @click="showColumnsModal=true">Display columns</a></span>
|
||||
<h3 class="font-semibold mb-4 text-xl">
|
||||
Form Submissions
|
||||
<span v-if="form && !isLoading && tableData.length > 0" class="text-right text-xs uppercase mb-2"> - <a
|
||||
:href="exportUrl" target="_blank">Export as CSV</a></span>
|
||||
<span v-if="form && !isLoading && formInitDone" class="float-right text-xs uppercase mb-2"> <a
|
||||
href="javascript:void(0);" @click="showColumnsModal=true">Display columns</a></span>
|
||||
</h3>
|
||||
|
||||
<!-- Table columns modal -->
|
||||
<modal :show="showColumnsModal" @close="showColumnsModal=false">
|
||||
<div class="-m-6">
|
||||
<div class="px-6 py-3">
|
||||
<h2 class="text-nt-blue text-3xl font-bold">
|
||||
Display columns
|
||||
</h2>
|
||||
</div>
|
||||
<div class="border-t py-4 px-6">
|
||||
<template v-if="properties.length > 0">
|
||||
<h4 class="font-bold mb-2">Form Fields</h4>
|
||||
<div v-for="field in properties" :key="field.id" class="p-2 border">
|
||||
{{ field.name }}
|
||||
<v-switch v-model="displayColumns[field.id]" @input="onChangeDisplayColumns" class="float-right" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="removed_properties.length > 0">
|
||||
<h4 class="font-bold mb-2 mt-4">Removed Fields</h4>
|
||||
<div v-for="field in removed_properties" :key="field.id" class="p-2 border">
|
||||
{{ field.name }}
|
||||
<v-switch v-model="displayColumns[field.id]" @input="onChangeDisplayColumns" class="float-right" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4 pb-5 px-6">
|
||||
<v-button color="gray" shade="light" @click="showColumnsModal=false">Close</v-button>
|
||||
</div>
|
||||
<template #icon>
|
||||
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 5H8C4.13401 5 1 8.13401 1 12C1 15.866 4.13401 19 8 19H16C19.866 19 23 15.866 23 12C23 8.13401 19.866 5 16 5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8 15C9.65685 15 11 13.6569 11 12C11 10.3431 9.65685 9 8 9C6.34315 9 5 10.3431 5 12C5 13.6569 6.34315 15 8 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</template>
|
||||
<template #title>
|
||||
Display columns
|
||||
</template>
|
||||
|
||||
<div class="px-4">
|
||||
<template v-if="properties.length > 0">
|
||||
<h4 class="font-bold mb-2">Form Fields</h4>
|
||||
<div v-for="field in properties" :key="field.id" class="p-2 border">
|
||||
{{ field.name }}
|
||||
<v-switch v-model="displayColumns[field.id]" @input="onChangeDisplayColumns" class="float-right"/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="removed_properties.length > 0">
|
||||
<h4 class="font-bold mb-2 mt-4">Removed Fields</h4>
|
||||
<div v-for="field in removed_properties" :key="field.id" class="p-2 border">
|
||||
{{ field.name }}
|
||||
<v-switch v-model="displayColumns[field.id]" @input="onChangeDisplayColumns" class="float-right"/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</modal>
|
||||
|
||||
@@ -87,8 +89,8 @@ export default {
|
||||
this.getSubmissionsData()
|
||||
},
|
||||
watch: {
|
||||
form () {
|
||||
if(!this.form){
|
||||
form() {
|
||||
if (this.form === null) {
|
||||
return
|
||||
}
|
||||
this.initFormStructure()
|
||||
@@ -117,28 +119,38 @@ export default {
|
||||
return
|
||||
}
|
||||
|
||||
// Add a "created at" column
|
||||
const columns = clonedeep(this.form.properties)
|
||||
columns.push({
|
||||
"name": "Created at",
|
||||
"id": "created_at",
|
||||
"type": "date",
|
||||
"width": 140,
|
||||
// check if form properties already has a created_at column
|
||||
let hasCreatedAt = false
|
||||
this.form.properties.forEach((property) => {
|
||||
if (property.id === 'created_at') {
|
||||
hasCreatedAt = true
|
||||
}
|
||||
})
|
||||
this.$set(this.form, 'properties', columns)
|
||||
|
||||
if (!hasCreatedAt) {
|
||||
// Add a "created at" column
|
||||
const columns = clonedeep(this.form.properties)
|
||||
columns.push({
|
||||
"name": "Created at",
|
||||
"id": "created_at",
|
||||
"type": "date",
|
||||
"width": 140,
|
||||
})
|
||||
this.$set(this.form, 'properties', columns)
|
||||
}
|
||||
this.formInitDone = true
|
||||
|
||||
this.properties = clonedeep(this.form.properties)
|
||||
this.removed_properties = (this.form.removed_properties) ? clonedeep(this.form.removed_properties) : []
|
||||
|
||||
// Get display columns from local storage
|
||||
const tmpColumns = window.localStorage.getItem('display-columns-formid-'+this.form.id)
|
||||
if(tmpColumns !== null && tmpColumns){
|
||||
const tmpColumns = window.localStorage.getItem('display-columns-formid-' + this.form.id)
|
||||
if (tmpColumns !== null && tmpColumns) {
|
||||
this.displayColumns = JSON.parse(tmpColumns)
|
||||
this.onChangeDisplayColumns()
|
||||
}else{
|
||||
this.form.properties.forEach((field) => {
|
||||
this.displayColumns[field.id] = true
|
||||
} else {
|
||||
this.form.properties.forEach((field) => {
|
||||
this.displayColumns[field.id] = true
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -148,7 +160,7 @@ export default {
|
||||
}
|
||||
this.isLoading = true
|
||||
axios.get('/api/open/forms/' + this.form.id + '/submissions?page=' + this.currentPage).then((response) => {
|
||||
const resData = response.data;
|
||||
const resData = response.data
|
||||
|
||||
this.tableData = this.tableData.concat(resData.data.map((record) => record.data))
|
||||
|
||||
@@ -168,8 +180,8 @@ export default {
|
||||
this.$refs.shadows.toggleShadow()
|
||||
this.$refs.shadows.calcDimensions()
|
||||
},
|
||||
onChangeDisplayColumns(){
|
||||
window.localStorage.setItem('display-columns-formid-'+this.form.id, JSON.stringify(this.displayColumns))
|
||||
onChangeDisplayColumns() {
|
||||
window.localStorage.setItem('display-columns-formid-' + this.form.id, JSON.stringify(this.displayColumns))
|
||||
const final_properties = this.properties.concat(this.removed_properties).filter((field) => {
|
||||
return this.displayColumns[field.id] === true
|
||||
})
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div class="border border-nt-blue-light bg-blue-50 dark:bg-notion-dark-light rounded-md p-4 mb-5 w-full mx-auto mt-4 select-all">
|
||||
<div class="flex items-center">
|
||||
<p class="select-all text-nt-blue flex-grow truncate">
|
||||
<a v-if="link" :href="form.share_url" target="_blank">
|
||||
{{ form.share_url }}
|
||||
</a>
|
||||
<span v-else>
|
||||
{{ form.share_url }}
|
||||
</span>
|
||||
</p>
|
||||
<div class="hover:bg-nt-blue-lighter rounded transition-colors cursor-pointer" @click="copyToClipboard(form.share_url)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-nt-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ShareFormUrl',
|
||||
props: {
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
link: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
},
|
||||
|
||||
watch: {
|
||||
},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
|
||||
methods: {
|
||||
copyToClipboard (str) {
|
||||
const el = document.createElement('textarea')
|
||||
el.value = str
|
||||
document.body.appendChild(el)
|
||||
el.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(el)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user