opnform/client/pages/templates/[slug].vue

309 lines
12 KiB
Vue

<template>
<div class="flex flex-col min-h-full">
<breadcrumb :path="breadcrumbs" v-if="template">
<template #left>
<div v-if="canEditTemplate" class="ml-5">
<v-button color="gray" size="small" @click.prevent="showFormTemplateModal=true">
Edit Template
</v-button>
<form-template-modal v-if="form" :form="form" :template="template" :show="showFormTemplateModal"
@close="showFormTemplateModal=false"
/>
</div>
</template>
<template #right>
<v-button v-if="canEditTemplate" v-track.copy_template_button_clicked size="small" color="white" class="mr-5"
@click.prevent="copyTemplateUrl"
>
Copy Template URL
</v-button>
<v-button v-track.use_template_button_clicked size="small" class="mr-5"
:to="createFormWithTemplateUrl"
>
Use this template
</v-button>
</template>
</breadcrumb>
<p v-if="template === null || !template" class="text-center my-4">
We could not find this template.
</p>
<template v-else>
<section class="pt-12 bg-gray-50 sm:pt-16 border-b pb-[250px] relative">
<div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
<div class="flex flex-col items-center justify-center max-w-4xl gap-8 mx-auto md:gap-12 md:flex-row">
<div class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-sm">
<NuxtImg class="object-cover w-full transition-all duration-200 group-hover:scale-110 h-[240px]"
:src="template.image_url" alt="Template cover image" width="500px" height="380px"
/>
</div>
<div class="flex-1 text-center md:text-left relative">
<h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
{{ template.name }}
</h1>
<p class="mt-2 text-lg font-normal text-gray-600">
{{ cleanQuotes(template.short_description) }}
</p>
<template-tags :template="template" :display-all="true"
class="flex flex-wrap items-center justify-center gap-3 mt-4 md:justify-start"
/>
</div>
</div>
</div>
</section>
<section class="relative px-4 mx-auto sm:px-6 lg:px-8 -mt-[210px]">
<div class="max-w-7xl">
<div
class="max-w-2xl p-4 mx-auto bg-white shadow-lg sm:p-6 lg:p-8 rounded-xl ring-1 ring-inset ring-gray-200 isolate"
>
<p class="text-sm font-medium text-center text-gray-500 -mt-2 mb-2">
Template Preview
</p>
<open-complete-form ref="open-complete-form" :form="form" :creating="true"
class="mb-4 p-4 bg-gray-50 border border-gray-200 border-dashed rounded-lg"
/>
</div>
</div>
<div class="absolute bottom-0 translate-y-full inset-x-0">
<div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl -mt-[20px]">
<div class="flex items-center justify-center">
<v-button v-track.use_template_button_clicked class="mx-auto w-full max-w-[300px]"
:to="createFormWithTemplateUrl">
Use this template
</v-button>
</div>
<div class="flex items-center justify-center">
<div class="text-left mx-auto text-gray-500 text-xs mt-4">
✓ Core features 100% free<br>
✓ No credit card required<br>
✓ No submissions limit on Free plan
</div>
</div>
</div>
</div>
</section>
<section class="pt-20 pb-12 bg-white sm:pb-16">
<div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
<div class="max-w-2xl mx-auto mt-16 space-y-12 sm:mt-16 sm:space-y-16">
<div class="nf-text" v-html="template.description"/>
<template v-if="template.questions.length > 0">
<hr class="mt-12 border-gray-200">
<div>
<div class="text-center">
<h3 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
Frequently asked questions
</h3>
<p class="mt-2 text-base font-normal text-gray-600">
Everything you need to know about this template.
</p>
</div>
<dl class="mt-12 space-y-10">
<div v-for="(ques,ques_key) in template.questions" :key="ques_key" class="space-y-4">
<dt class="font-semibold text-gray-900 dark:text-gray-100">
{{ ques.question }}
</dt>
<dd class="mt-2 leading-6 text-gray-600 dark:text-gray-400" v-html="ques.answer"/>
</div>
</dl>
</div>
</template>
</div>
</div>
</section>
<section v-if="relatedTemplates && relatedTemplates.length > 0"
class="py-12 bg-white border-t border-gray-200 sm:py-16">
<div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
<div class="flex items-center justify-between">
<h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
Related templates
</h4>
<v-button :to="{name:'templates'}" color="white" size="small" :arrow="true">
View All
</v-button>
</div>
<div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-y-12">
<single-template v-for="related in relatedTemplates" :key="related.id" :template="related"/>
</div>
</div>
</section>
<section class="py-12 bg-white border-t border-gray-200 sm:py-16">
<div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
<div class="text-center">
<h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
How OpnForm works
</h4>
</div>
<div class="grid grid-cols-1 mt-12 md:grid-cols-2 gap-x-8 gap-y-12">
<div
class="flex flex-col items-center gap-4 text-center lg:items-start sm:text-left sm:items-start xl:flex-row"
>
<div
class="inline-flex items-center justify-center w-10 h-10 text-base font-bold bg-white rounded-full shadow-sm ring-1 ring-inset ring-gray-200 text-blue-500 shrink-0"
>
1
</div>
<div>
<h5 class="text-base font-bold leading-tight text-gray-900">
Copy the template and change it the way you like
</h5>
<p class="mt-2 text-sm font-normal text-gray-600">
<NuxtLink :to="createFormWithTemplateUrl">
Click here to copy this template
</NuxtLink>
and start customizing it. Change the questions, add new ones, choose colors and
more.
</p>
</div>
</div>
<div
class="flex flex-col items-center gap-4 text-center lg:items-start sm:text-left sm:items-start xl:flex-row"
>
<div
class="inline-flex items-center justify-center w-10 h-10 text-base font-bold bg-white rounded-full shadow-sm ring-1 ring-inset ring-gray-200 text-blue-500 shrink-0"
>
2
</div>
<div>
<h5 class="text-base font-bold leading-tight text-gray-900">
Embed the form or share it via a link
</h5>
<p class="mt-2 text-sm font-normal text-gray-600">
You can directly share your form link, or embed the form on your website. It's magic! 🪄
</p>
</div>
</div>
</div>
<!-- add video here -->
<!-- <div class="max-w-5xl mx-auto mt-12 shadow-sm rounded-xl bg-blue-50 aspect-video" />-->
</div>
</section>
</template>
<open-form-footer class="mt-8 border-t"/>
</div>
</template>
<script setup>
import {computed} from 'vue'
import OpenCompleteForm from '../../components/open/forms/OpenCompleteForm.vue'
import Breadcrumb from '~/components/global/Breadcrumb.vue'
import SingleTemplate from '../../components/pages/templates/SingleTemplate.vue'
import {fetchTemplate} from "~/stores/templates.js"
import FormTemplateModal from '~/components/open/forms/components/templates/FormTemplateModal.vue'
defineRouteRules({
swr: 3600
})
const {copy} = useClipboard()
const authStore = useAuthStore()
const templatesStore = useTemplatesStore()
const route = useRoute()
const slug = computed(() => route.params.slug)
const template = computed(() => templatesStore.getByKey(slug.value))
const form = computed(() => template.value.structure)
// Fetch the template
if (!template.value) {
const {data} = await fetchTemplate(slug.value)
templatesStore.save(data.value)
}
// Fetch related templates
const {data: relatedTemplatesData} = await useAsyncData('related-templates', () => {
return Promise.all(template.value.related_templates.map((slug) => {
if (templatesStore.getByKey(slug)) {
return Promise.resolve(templatesStore.getByKey(slug))
}
return fetchTemplate(slug).then((res) => res.data.value)
}))
})
templatesStore.save(relatedTemplatesData.value)
templatesStore.initTypesAndIndustries()
// State
const showFormTemplateModal = ref(false)
// Computed
const breadcrumbs = computed(() => {
if (!template.value) {
return [{route: {name: 'templates'}, label: 'Templates'}]
}
return [{route: {name: 'templates'}, label: 'Templates'}, {label: template.value.name}]
})
const relatedTemplates = computed(() => templatesStore.getByKey(template?.value?.related_templates))
const canEditTemplate = computed(() => authStore.check && template.value && (authStore.user.admin || authStore.user.template_editor || template.creator_id === authStore.user.id))
const createFormWithTemplateUrl = computed(() => {
return {name: (authStore.check) ? 'forms-create' : 'forms-create-guest', query: {template: template?.value?.slug}}
})
// methods
const cleanQuotes = (str) => {
// Remove starting and ending quotes if any
return (str) ? str.replace(/^"/, '').replace(/"$/, '') : ''
}
const copyTemplateUrl = () => {
copy(template.value.share_url)
useAlert().success('Copied!')
}
useOpnSeoMeta({
title: () => {
if (!template || !template.value) return 'Form Template'
return template.value.name
},
description() {
if (!template || !template.value) return null
// take the first 140 characters of the description
return template.value.short_description?.substring(0, 140) + '... | Customize any template and create your own form in minutes.'
},
ogImage() {
if (!template || !template.value) return null
return template.value.image_url
},
robots: () => {
if (!template || !template.value) return null
return template.value.publicly_listed ? null : 'noindex'
}
})
</script>
<style lang='scss'>
.nf-text {
@apply space-y-4;
h2 {
@apply text-sm font-normal tracking-widest text-gray-500 uppercase;
}
p {
@apply font-normal leading-7 text-gray-900 dark:text-gray-100;
}
ol {
@apply list-decimal list-inside;
}
ul {
@apply list-disc list-inside;
}
}
.aspect-video {
aspect-ratio: 16/9;
}
</style>