0351d front end linting (#377)
* feat: disable custom script for trial users * after lint fix * frontend linting --------- Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka
GitHub
@@ -1,52 +1,89 @@
|
||||
<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"
|
||||
<breadcrumb
|
||||
v-if="template"
|
||||
:path="breadcrumbs"
|
||||
>
|
||||
<template #left>
|
||||
<div
|
||||
v-if="canEditTemplate"
|
||||
class="ml-5"
|
||||
>
|
||||
<v-button
|
||||
color="gray"
|
||||
size="small"
|
||||
@click.prevent="showFormTemplateModal = true"
|
||||
>
|
||||
Copy Template URL
|
||||
Edit Template
|
||||
</v-button>
|
||||
<v-button v-track.use_template_button_clicked size="small" class="mr-5"
|
||||
:to="createFormWithTemplateUrl"
|
||||
>
|
||||
Use this template
|
||||
</v-button>
|
||||
</template>
|
||||
<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">
|
||||
<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">
|
||||
<img 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
|
||||
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"
|
||||
>
|
||||
<img
|
||||
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">
|
||||
<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"
|
||||
<template-tags
|
||||
:template="template"
|
||||
:display-all="true"
|
||||
class="flex flex-wrap items-center justify-center gap-3 mt-4 md:justify-start"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -61,8 +98,11 @@
|
||||
<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"
|
||||
<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>
|
||||
@@ -70,8 +110,11 @@
|
||||
<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">
|
||||
<v-button
|
||||
v-track.use_template_button_clicked
|
||||
class="mx-auto w-full max-w-[300px]"
|
||||
:to="createFormWithTemplateUrl"
|
||||
>
|
||||
Use this template
|
||||
</v-button>
|
||||
</div>
|
||||
@@ -88,14 +131,21 @@
|
||||
|
||||
<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"/>
|
||||
<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">
|
||||
<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">
|
||||
@@ -103,11 +153,18 @@
|
||||
</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">
|
||||
<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"/>
|
||||
<dd
|
||||
class="mt-2 leading-6 text-gray-600 dark:text-gray-400"
|
||||
v-html="ques.answer"
|
||||
/>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
@@ -116,20 +173,35 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="relatedTemplates && relatedTemplates.length > 0"
|
||||
class="py-12 bg-white border-t border-gray-200 sm:py-16">
|
||||
<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">
|
||||
<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">
|
||||
<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
|
||||
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>
|
||||
@@ -137,7 +209,9 @@
|
||||
<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">
|
||||
<h4
|
||||
class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl"
|
||||
>
|
||||
How OpnForm works
|
||||
</h4>
|
||||
</div>
|
||||
@@ -159,8 +233,8 @@
|
||||
<NuxtLink :to="createFormWithTemplateUrl">
|
||||
Click here to copy this template
|
||||
</NuxtLink>
|
||||
and start customizing it. Change the questions, add new ones, choose colors and
|
||||
more.
|
||||
and start customizing it. Change the questions, add new ones,
|
||||
choose colors and more.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -178,7 +252,8 @@
|
||||
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! 🪄
|
||||
You can directly share your form link, or embed the form on
|
||||
your website. It's magic! 🪄
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -190,23 +265,23 @@
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<open-form-footer class="mt-8 border-t"/>
|
||||
<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'
|
||||
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
|
||||
swr: 3600,
|
||||
})
|
||||
|
||||
const {copy} = useClipboard()
|
||||
const { copy } = useClipboard()
|
||||
const authStore = useAuthStore()
|
||||
const templatesStore = useTemplatesStore()
|
||||
|
||||
@@ -218,19 +293,24 @@ const form = computed(() => template.value.structure)
|
||||
|
||||
// Fetch the template
|
||||
if (!template.value) {
|
||||
const {data} = await fetchTemplate(slug.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)
|
||||
}))
|
||||
})
|
||||
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()
|
||||
|
||||
@@ -240,49 +320,67 @@ const showFormTemplateModal = ref(false)
|
||||
// Computed
|
||||
const breadcrumbs = computed(() => {
|
||||
if (!template.value) {
|
||||
return [{route: {name: 'templates'}, label: 'Templates'}]
|
||||
return [{ route: { name: "templates" }, label: "Templates" }]
|
||||
}
|
||||
return [{route: {name: 'templates'}, label: 'Templates'}, {label: template.value.name}]
|
||||
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 relatedTemplates = computed(() =>
|
||||
templatesStore.getByKey(template?.value?.related_templates),
|
||||
)
|
||||
const canEditTemplate = computed(
|
||||
() =>
|
||||
authStore.check &&
|
||||
template.value &&
|
||||
(authStore.user.admin ||
|
||||
authStore.user.template_editor ||
|
||||
template.value.creator_id === authStore.user.id),
|
||||
)
|
||||
const createFormWithTemplateUrl = computed(() => {
|
||||
return {name: (authStore.check) ? 'forms-create' : 'forms-create-guest', query: {template: template?.value?.slug}}
|
||||
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(/"$/, '') : ''
|
||||
return str ? str.replace(/^"/, "").replace(/"$/, "") : ""
|
||||
}
|
||||
|
||||
const copyTemplateUrl = () => {
|
||||
copy(template.value.share_url)
|
||||
useAlert().success('Copied!')
|
||||
useAlert().success("Copied!")
|
||||
}
|
||||
|
||||
useOpnSeoMeta({
|
||||
title: () => {
|
||||
if (!template || !template.value) return 'Form Template'
|
||||
if (!template.value || !template.value) return "Form Template"
|
||||
return template.value.name
|
||||
},
|
||||
description() {
|
||||
if (!template || !template.value) return null
|
||||
if (!template.value || !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.'
|
||||
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
|
||||
if (!template.value || !template.value) return null
|
||||
return template.value.image_url
|
||||
},
|
||||
robots: () => {
|
||||
if (!template || !template.value) return null
|
||||
return template.value.publicly_listed ? null : 'noindex'
|
||||
}
|
||||
if (!template.value || !template.value) return null
|
||||
return template.value.publicly_listed ? null : "noindex"
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
<style lang="scss">
|
||||
.nf-text {
|
||||
@apply space-y-4;
|
||||
h2 {
|
||||
|
||||
@@ -3,7 +3,9 @@
|
||||
<section class="py-12 sm:py-16 bg-gray-50 border-b border-gray-200">
|
||||
<div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div class="text-center max-w-xl mx-auto">
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900">
|
||||
<h1
|
||||
class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900"
|
||||
>
|
||||
Form Templates
|
||||
</h1>
|
||||
<p class="text-gray-600 mt-4 text-lg font-normal">
|
||||
@@ -13,22 +15,26 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<templates-list :templates="templates" :loading="loading"/>
|
||||
<templates-list
|
||||
:templates="templates"
|
||||
:loading="loading"
|
||||
/>
|
||||
|
||||
<open-form-footer class="mt-8 border-t"/>
|
||||
<open-form-footer class="mt-8 border-t" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {loadAllTemplates} from "~/stores/templates.js";
|
||||
import { loadAllTemplates } from "~/stores/templates.js"
|
||||
|
||||
defineRouteRules({
|
||||
swr: 3600
|
||||
swr: 3600,
|
||||
})
|
||||
|
||||
useOpnSeoMeta({
|
||||
title: 'Form Templates',
|
||||
description: 'Our collection of beautiful templates to create your own forms!'
|
||||
title: "Form Templates",
|
||||
description:
|
||||
"Our collection of beautiful templates to create your own forms!",
|
||||
})
|
||||
|
||||
const templatesStore = useTemplatesStore()
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<div class="flex flex-col min-h-full">
|
||||
<breadcrumb :path="breadcrumbs"/>
|
||||
<breadcrumb :path="breadcrumbs" />
|
||||
|
||||
<p v-if="industry === null || !industry" class="text-center my-4">
|
||||
<p
|
||||
v-if="industry === null || !industry"
|
||||
class="text-center my-4"
|
||||
>
|
||||
We could not find this industry.
|
||||
</p>
|
||||
<template v-else>
|
||||
@@ -12,7 +15,9 @@
|
||||
<div class="font-semibold sm:w-full text-blue-500 mb-3">
|
||||
{{ industry.name }}
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900">
|
||||
<h1
|
||||
class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900"
|
||||
>
|
||||
{{ industry.meta_title }}
|
||||
</h1>
|
||||
<p class="max-w-xl mx-auto text-gray-600 mt-4 text-lg font-normal">
|
||||
@@ -22,8 +27,11 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<templates-list :templates="templates" :filter-industries="false" :show-industries="false">
|
||||
<templates-list
|
||||
:templates="templates"
|
||||
:filter-industries="false"
|
||||
:show-industries="false"
|
||||
>
|
||||
<template #before-lists>
|
||||
<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">
|
||||
@@ -36,66 +44,77 @@
|
||||
</templates-list>
|
||||
</template>
|
||||
|
||||
<open-form-footer class="mt-8 border-t"/>
|
||||
<open-form-footer class="mt-8 border-t" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed} from 'vue'
|
||||
import Breadcrumb from '~/components/global/Breadcrumb.vue'
|
||||
import {loadAllTemplates} from "~/stores/templates.js";
|
||||
import { computed } from "vue"
|
||||
import Breadcrumb from "~/components/global/Breadcrumb.vue"
|
||||
import { loadAllTemplates } from "~/stores/templates.js"
|
||||
|
||||
defineRouteRules({
|
||||
swr: 3600
|
||||
swr: 3600,
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
const templatesStore = useTemplatesStore()
|
||||
|
||||
loadAllTemplates(templatesStore)
|
||||
|
||||
// Computed
|
||||
const authenticated = computed(() => authStore.check)
|
||||
const user = computed(() => authStore.user)
|
||||
const templates = computed(() => templatesStore.getAll.filter((item) => {
|
||||
return (item.industries && item.industries.length > 0) ? item.industries.includes(route.params.slug) : false
|
||||
}))
|
||||
const templates = computed(() =>
|
||||
templatesStore.getAll.filter((item) => {
|
||||
return item.industries && item.industries.length > 0
|
||||
? item.industries.includes(route.params.slug)
|
||||
: false
|
||||
}),
|
||||
)
|
||||
const breadcrumbs = computed(() => {
|
||||
if (!industry) {
|
||||
return [{route: {name: 'templates'}, label: 'Templates'}]
|
||||
if (!industry.value) {
|
||||
return [{ route: { name: "templates" }, label: "Templates" }]
|
||||
}
|
||||
return [{route: {name: 'templates'}, label: 'Templates'}, {label: industry.value.name}]
|
||||
return [
|
||||
{ route: { name: "templates" }, label: "Templates" },
|
||||
{ label: industry.value.name },
|
||||
]
|
||||
})
|
||||
|
||||
const industry = computed(() => templatesStore.industries.get(route.params.slug))
|
||||
const industry = computed(() =>
|
||||
templatesStore.industries.get(route.params.slug),
|
||||
)
|
||||
|
||||
useOpnSeoMeta({
|
||||
title: () => {
|
||||
if (!industry.value) return 'Form Templates'
|
||||
if (!industry.value) return "Form Templates"
|
||||
if (industry.value.meta_title.length > 60) {
|
||||
return industry.value.meta_title
|
||||
}
|
||||
return industry.value.meta_title
|
||||
},
|
||||
description: () => industry.value ? industry.value.meta_description: 'Our collection of beautiful templates to create your own forms!'
|
||||
description: () =>
|
||||
industry.value
|
||||
? industry.value.meta_description
|
||||
: "Our collection of beautiful templates to create your own forms!",
|
||||
})
|
||||
useHead({
|
||||
titleTemplate: (titleChunk) => {
|
||||
// Disable title template for longer titles
|
||||
if (industry.value
|
||||
&& industry.value.meta_title.length < 60
|
||||
&& !industry.value.meta_title.toLowerCase().includes('opnform')
|
||||
if (
|
||||
industry.value &&
|
||||
industry.value.meta_title.length < 60 &&
|
||||
!industry.value.meta_title.toLowerCase().includes("opnform")
|
||||
) {
|
||||
return titleChunk ? `${titleChunk} - OpnForm` : 'Form Templates - OpnForm'
|
||||
return titleChunk
|
||||
? `${titleChunk} - OpnForm`
|
||||
: "Form Templates - OpnForm"
|
||||
}
|
||||
return titleChunk ? titleChunk : 'Form Templates - OpnForm'
|
||||
}
|
||||
return titleChunk ? titleChunk : "Form Templates - OpnForm"
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
<style lang="scss">
|
||||
.nf-text {
|
||||
@apply space-y-4;
|
||||
h2 {
|
||||
@@ -115,4 +134,3 @@ useHead({
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -3,7 +3,9 @@
|
||||
<section class="py-12 sm:py-16 bg-gray-50 border-b border-gray-200">
|
||||
<div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div class="text-center max-w-xl mx-auto">
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900">
|
||||
<h1
|
||||
class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900"
|
||||
>
|
||||
My Form Templates
|
||||
</h1>
|
||||
<p class="text-gray-600 mt-4 text-lg font-normal">
|
||||
@@ -13,26 +15,32 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<templates-list :templates="templates" :loading="loading" :show-types="false" :show-industries="false"/>
|
||||
<templates-list
|
||||
:templates="templates"
|
||||
:loading="loading"
|
||||
:show-types="false"
|
||||
:show-industries="false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
middleware: "auth",
|
||||
})
|
||||
|
||||
useOpnSeoMeta({
|
||||
title: 'My Templates',
|
||||
description: 'Our collection of beautiful templates to create your own forms!'
|
||||
title: "My Templates",
|
||||
description:
|
||||
"Our collection of beautiful templates to create your own forms!",
|
||||
})
|
||||
|
||||
let loading = ref(false)
|
||||
let templates = ref([])
|
||||
const loading = ref(false)
|
||||
const templates = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
loading.value = true
|
||||
opnFetch('templates',{query: {onlymy: true}}).then((data) => {
|
||||
opnFetch("templates", { query: { onlymy: true } }).then((data) => {
|
||||
loading.value = false
|
||||
templates.value = data
|
||||
})
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<div class="flex flex-col min-h-full">
|
||||
<breadcrumb :path="breadcrumbs"/>
|
||||
<breadcrumb :path="breadcrumbs" />
|
||||
|
||||
<p v-if="type === null || !type" class="text-center my-4">
|
||||
<p
|
||||
v-if="type === null || !type"
|
||||
class="text-center my-4"
|
||||
>
|
||||
We could not find this type.
|
||||
</p>
|
||||
<template v-else>
|
||||
@@ -12,7 +15,9 @@
|
||||
<div class="font-semibold sm:w-full text-blue-500 mb-3">
|
||||
{{ type.name }}
|
||||
</div>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900">
|
||||
<h1
|
||||
class="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900"
|
||||
>
|
||||
{{ type.meta_title }}
|
||||
</h1>
|
||||
<p class="max-w-xl mx-auto text-gray-600 mt-4 text-lg font-normal">
|
||||
@@ -22,8 +27,11 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<templates-list :templates="templates" :filter-types="false" :show-industries="false">
|
||||
<templates-list
|
||||
:templates="templates"
|
||||
:filter-types="false"
|
||||
:show-industries="false"
|
||||
>
|
||||
<template #before-lists>
|
||||
<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">
|
||||
@@ -36,67 +44,76 @@
|
||||
</templates-list>
|
||||
</template>
|
||||
|
||||
<open-form-footer class="mt-8 border-t"/>
|
||||
<open-form-footer class="mt-8 border-t" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed} from 'vue'
|
||||
import OpenFormFooter from '../../../components/pages/OpenFormFooter.vue'
|
||||
import Breadcrumb from '~/components/global/Breadcrumb.vue'
|
||||
import {loadAllTemplates} from "~/stores/templates.js";
|
||||
import { computed } from "vue"
|
||||
import OpenFormFooter from "../../../components/pages/OpenFormFooter.vue"
|
||||
import Breadcrumb from "~/components/global/Breadcrumb.vue"
|
||||
import { loadAllTemplates } from "~/stores/templates.js"
|
||||
|
||||
defineRouteRules({
|
||||
swr: 3600
|
||||
swr: 3600,
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
const templatesStore = useTemplatesStore()
|
||||
|
||||
loadAllTemplates(templatesStore)
|
||||
|
||||
// Computed
|
||||
const authenticated = computed(() => authStore.check)
|
||||
const user = computed(() => authStore.user)
|
||||
const templates = computed(() => templatesStore.getAll.filter((item) => {
|
||||
return (item.types && item.types.length > 0) ? item.types.includes(route.params.slug) : false
|
||||
}))
|
||||
const templates = computed(() =>
|
||||
templatesStore.getAll.filter((item) => {
|
||||
return item.types && item.types.length > 0
|
||||
? item.types.includes(route.params.slug)
|
||||
: false
|
||||
}),
|
||||
)
|
||||
const breadcrumbs = computed(() => {
|
||||
if (!type) {
|
||||
return [{route: {name: 'templates'}, label: 'Templates'}]
|
||||
if (!type.value) {
|
||||
return [{ route: { name: "templates" }, label: "Templates" }]
|
||||
}
|
||||
return [{route: {name: 'templates'}, label: 'Templates'}, {label: type.value.name}]
|
||||
return [
|
||||
{ route: { name: "templates" }, label: "Templates" },
|
||||
{ label: type.value.name },
|
||||
]
|
||||
})
|
||||
|
||||
const type = computed(() => templatesStore.types.get(route.params.slug))
|
||||
|
||||
useOpnSeoMeta({
|
||||
title: () => {
|
||||
if (!type.value) return 'Form Templates'
|
||||
if (!type.value) return "Form Templates"
|
||||
if (type.value.meta_title.length > 60) {
|
||||
return type.value.meta_title
|
||||
}
|
||||
return type.value.meta_title
|
||||
},
|
||||
description: () => type.value ? type.value.meta_description: 'Our collection of beautiful templates to create your own forms!'
|
||||
description: () =>
|
||||
type.value
|
||||
? type.value.meta_description
|
||||
: "Our collection of beautiful templates to create your own forms!",
|
||||
})
|
||||
useHead({
|
||||
titleTemplate: (titleChunk) => {
|
||||
// Disable title template for longer titles
|
||||
if (type.value
|
||||
&& type.value.meta_title.length < 60
|
||||
&& !type.value.meta_title.toLowerCase().includes('opnform')
|
||||
if (
|
||||
type.value &&
|
||||
type.value.meta_title.length < 60 &&
|
||||
!type.value.meta_title.toLowerCase().includes("opnform")
|
||||
) {
|
||||
return titleChunk ? `${titleChunk} - OpnForm` : 'Form Templates - OpnForm'
|
||||
return titleChunk
|
||||
? `${titleChunk} - OpnForm`
|
||||
: "Form Templates - OpnForm"
|
||||
}
|
||||
return titleChunk ? titleChunk : 'Form Templates - OpnForm'
|
||||
}
|
||||
return titleChunk ? titleChunk : "Form Templates - OpnForm"
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
<style lang="scss">
|
||||
.nf-text {
|
||||
@apply space-y-4;
|
||||
h2 {
|
||||
@@ -116,4 +133,3 @@ useHead({
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user