B8f7a improve templates pages for seo (#5)

* Templates

* access templates without login also

* Set required on UI

* Improve templates pages for SEO

* test case for Templates

* Refactor SitemapController

* Cosmetic changes to templates

Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>

resources/js/components/open/forms/components/FormFieldsEditor.vue

@@ -224,7 +224,7 @@ export default {
     },
     init() {
       if (this.$route.name === 'forms.create') {  // Set Default fields
-        this.formFields = this.getDefaultFields()
+        this.formFields = (this.form.properties.length > 0) ? clonedeep(this.form.properties): this.getDefaultFields()
       } else {
         this.formFields = clonedeep(this.form.properties).map((field) => {
           // Add more field properties

resources/js/components/open/forms/components/FormSubmissions.vue

@@ -53,7 +53,6 @@ export default {
   },
   watch: {
     form () {
-      debugger
       if(!this.form){
         return
       }

resources/js/components/pages/OpenFormFooter.vue

@@ -21,6 +21,13 @@
 <!--                  Pricing-->
 <!--                </router-link>-->
 <!--              </li>-->
+              <li>
+                <router-link :to="{name:'templates'}"
+                    class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+                >
+                  Templates
+                </router-link>
+              </li>
               <li>
                 <a target="_blank" :href="helpUrl"
                    class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"

resources/js/components/pages/forms/CreateTemplateModal.vue

@@ -0,0 +1,64 @@
+<template>
+    <modal :show="show" @close="$emit('close')">
+      <form @submit.prevent="createTemplate" @keydown="templateForm.onKeydown($event)">
+        <div class="-m-6">
+            <div class="p-6">
+              <h2 class="text-nt-blue text-3xl font-bold mb-6">
+                  Create template
+              </h2>
+              <p>
+                  New template will be create from your form <span class="font-semibold">{{form.title}}</span>.
+                  Template will be public for all to create form quickly.
+              </p>
+            </div>
+            <div class="border-t py-4 px-6">
+              <text-input name="name" :form="templateForm" class="mt-4" label="Title" :required="true" />
+              <text-input name="slug" :form="templateForm" class="mt-4" label="Slug" :required="true" />
+              <rich-text-area-input name="description" :form="templateForm" class="mt-4" label="Description" :required="true" />
+              <text-input name="image_url" :form="templateForm" class="mt-4" label="Image" :required="true" />
+              <questions-editor name="questions" :form="templateForm" class="mt-4" label="Frequently asked questions" />
+            </div>
+            <div class="flex justify-end mt-4 pb-5 px-6">
+              <v-button class="mr-2" :loading="templateForm.busy">Create</v-button>
+              <v-button color="gray" shade="light" @click.prevent="$emit('close')">Close</v-button>
+            </div>
+        </div>
+      </form>
+    </modal>
+</template>
+  
+<script>
+import Form from 'vform'
+import QuestionsEditor from '../../templates/QuestionsEditor';
+
+export default {
+    name: 'CreateTemplateModal',
+    components: { QuestionsEditor },
+    props: {
+      show: { type: Boolean, required: true },
+      form: { type: Object, required: true }
+    },
+
+    data: () => ({
+      templateForm: new Form({
+        name: '',
+        slug: '',
+        description: '',
+        image_url: '',
+      })
+    }),
+
+    computed: {},
+
+    methods: {
+      async createTemplate() {
+        this.templateForm.form = this.form
+        await this.templateForm.post('/api/templates').then((response) => {
+          this.alertSuccess('Template was successfully created.')
+          this.$emit('close')
+        });
+      }
+    }
+}
+</script>
+  

resources/js/components/templates/QuestionsEditor.vue

@@ -0,0 +1,80 @@
+<template>
+    <div :class="wrapperClass">
+      <label v-if="label" :for="id?id:name"
+             :class="[theme.default.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
+      >
+        {{ label }}
+        <span v-if="required" class="text-red-500 required-dot">*</span>
+      </label>
+  
+      <loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
+      <div v-else class="my-3">
+        <div v-for="(questionForm, quesKey) in allQuestions" :key="quesKey" class="bg-gray-100 p-2 mb-4">
+            <v-button color="red" size="small" nativeType="button" class="text-right mb-2" @click.prevent="onRemove(quesKey)">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+              </svg>
+            </v-button>
+            <text-input name="question" :form="questionForm" placeholder="Question title" />
+            <rich-text-area-input name="answer" :form="questionForm" class="mt-4" placeholder="Question response" />
+        </div>
+        <v-button v-if="addNew" color="green" size="small" nativeType="button" class="mt-2 flex" @click.prevent="onAdd">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-1" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          Add New
+        </v-button>
+      </div>
+  
+      <small v-if="help" :class="theme.SelectInput.help">
+        <slot name="help">{{ help }}</slot>
+      </small>
+      <has-error v-if="hasValidation" :form="form" :field="name" />
+    </div>
+  </template>
+  
+  <script>
+  import inputMixin from '~/mixins/forms/input'
+  import Form from 'vform'
+
+  export default {
+    name: 'QuestionsEditor',
+    mixins: [inputMixin],
+  
+    props: {
+      loading: { type: Boolean, default: false },
+      addNew: { type: Boolean, default: true }
+    },
+    data () {
+      return {
+        allQuestions: [new Form({
+          question: '',
+          answer: '',
+        })]
+      }
+    },
+    watch: {
+      allQuestions: {
+        deep: true,
+        handler () {
+          this.compVal = this.allQuestions.map((ques) => { 
+            return ques.data() 
+          })
+        }
+      }
+    },
+    computed: { },
+    methods: {
+      onAdd() {
+        this.allQuestions.push(new Form({
+          question: '',
+          answer: '',
+        }))
+      },
+      onRemove(key){
+        this.allQuestions.splice(key, 1)
+      }
+    }
+  }
+  </script>
+  

resources/js/pages/forms/create.vue

@@ -51,12 +51,21 @@
 </template>
 
 <script>
+import store from '~/store'
 import Form from 'vform'
 import {mapState, mapActions} from 'vuex'
 import saveUpdateAlert from '../../mixins/forms/saveUpdateAlert'
 import clonedeep from 'clone-deep'
 
 const FormEditor = () => import('../../components/open/forms/components/FormEditor')
+
+const loadTemplates = function () {
+  store.commit('open/templates/startLoading')
+  store.dispatch('open/templates/loadIfEmpty').then(() => {
+      store.commit('open/templates/stopLoading')
+  })
+}
+
 export default {
   name: 'CreateForm',
   components: {
@@ -69,6 +78,11 @@ export default {
 
   mixins: [saveUpdateAlert],
 
+  beforeRouteEnter (to, from, next) {
+    loadTemplates()
+    next()
+  },
+
   middleware: 'auth',
 
   data() {
@@ -126,7 +140,16 @@ export default {
   },
 
   mounted() {
-    this.initForm()
+    if(this.$route.query.template !== undefined && this.$route.query.template){
+      let template = this.$store.getters['open/templates/getBySlug'](this.$route.query.template)
+      if(template && template.structure){
+        this.form = new Form(template.structure)
+      }else{
+        this.initForm()
+      }
+    }else{
+      this.initForm()
+    }
     this.closeAlert()
     this.loadWorkspaces()
 

resources/js/pages/forms/show.vue

@@ -164,6 +164,20 @@
               <loader v-else class="h-6 w-6 text-nt-blue mx-auto" />
             </div>
           </div>
+          <div class="w-full sm:w-1/2 px-2 flex mb-5" v-if="user.admin">
+            <div class="group relative transition-all mt-4 flex items-center p-3 px-6 w-full rounded-md bg-gray-50 dark:bg-gray-700 hover:bg-blue-50 dark:hover:bg-blue-900 cursor-pointer hover:text-blue-500"
+                 @click="showCreateTemplateModal=true"
+            >
+              <template>
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z" />
+                </svg>
+                <span class="font-semibold group relative-hover:text-blue-500">
+                  Create template
+                </span>
+              </template>
+            </div>
+          </div>
         </div>
 
         <!-- Form Submissions -->
@@ -260,6 +274,8 @@
           </div>
         </modal>
 
+        <create-template-modal :form="form" :show="showCreateTemplateModal" @close="showCreateTemplateModal=false" />
+
         <url-form-prefill-modal :form="form" :show="showUrlFormPrefillModal" @close="showUrlFormPrefillModal=false" />
       </div>
       <div v-else-if="loading" class="text-center w-full p-5">
@@ -282,6 +298,7 @@ import Breadcrumb from '../../components/common/Breadcrumb'
 import { mapGetters, mapState } from 'vuex'
 import ProTag from '../../components/common/ProTag'
 import UrlFormPrefillModal from '../../components/pages/forms/UrlFormPrefillModal'
+import CreateTemplateModal from '../../components/pages/forms/CreateTemplateModal'
 import FormStats from '../../components/open/forms/components/FormStats'
 import FormSubmissions from '../../components/open/forms/components/FormSubmissions'
 
@@ -294,7 +311,7 @@ const loadForms = function () {
 
 export default {
   name: 'EditForm',
-  components: { UrlFormPrefillModal, ProTag, Breadcrumb, ShareFormUrl, EmbedFormCode, FormStats, FormSubmissions },
+  components: { UrlFormPrefillModal, CreateTemplateModal, ProTag, Breadcrumb, ShareFormUrl, EmbedFormCode, FormStats, FormSubmissions },
 
   beforeRouteEnter (to, from, next) {
     loadForms()
@@ -315,7 +332,8 @@ export default {
       showNotionEmbedModal: false,
       showShareEmbedFormModal: false,
       showUrlFormPrefillModal: false,
-      showGenerateFormLinkModal: false
+      showGenerateFormLinkModal: false,
+      showCreateTemplateModal: false
     }
   },
 

resources/js/pages/templates/show.vue

@@ -0,0 +1,100 @@
+<template>
+    <div class="flex flex-col min-h-full mt-6">
+      <div class="w-full flex-grow md:w-4/5 lg:w-2/3 md:mx-auto md:max-w-4xl px-4">
+
+        <breadcrumb :path="breadcrumbs" />
+        <div v-if="templatesLoading" class="text-center">
+            <loader class="h-6 w-6 text-nt-blue mx-auto" />
+        </div>
+        <p v-else-if="template === null || !template">
+            Template does not exist.
+        </p>
+        <div v-else>
+          <div class="flex flex-wrap items-center mt-6 mb-4">
+            <h2 class="text-nt-blue text-3xl font-bold flex-grow">
+                {{ template.name }}
+            </h2>
+          </div>
+          <div class="mb-10">
+            <img :src="template.image_url" alt="" class="w-full shadow-xl rounded-lg my-5"/>
+            <div v-html="template.description"></div>
+            <div class="mt-5 text-center">
+                <fancy-link class="mt-4 sm:mt-0" :to="{path:'/forms/create?template='+template.slug}" color="nt-blue">
+                    Use this template
+                </fancy-link>
+            </div>
+
+            <h3 class="text-center text-gray-500">Template Preview</h3>
+            <open-complete-form ref="open-complete-form" :form="form" :creating="true" class="my-5 p-4 bg-gray-50 rounded-lg"/>
+
+            <h3 class="text-xl font-semibold mb-3">Frequently asked questions</h3>
+            <div v-if="template.questions.length > 0" class="mt-5 pt-2">
+              <div v-for="(ques,ques_key) in template.questions" :key="ques_key" class="my-3 border rounded-lg">
+                <h5 class="border-b p-2">{{ ques.question }}</h5>
+                <div class="p-2" v-html="ques.answer"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <open-form-footer class="mt-8 border-t" />
+    </div>
+  </template>
+
+  <script>
+  import store from '~/store'
+  import Form from 'vform'
+  import { mapGetters, mapState } from 'vuex'
+  import Fuse from 'fuse.js'
+  import OpenFormFooter from '../../components/pages/OpenFormFooter'
+  import OpenCompleteForm from '../../components/open/forms/OpenCompleteForm'
+  import Breadcrumb from "../../components/common/Breadcrumb";
+
+  const loadTemplates = function () {
+    store.commit('open/templates/startLoading')
+    store.dispatch('open/templates/loadIfEmpty').then(() => {
+        store.commit('open/templates/stopLoading')
+    })
+  }
+
+  export default {
+    components: {Breadcrumb, OpenFormFooter, OpenCompleteForm },
+
+    beforeRouteEnter (to, from, next) {
+      loadTemplates()
+      next()
+    },
+
+    props: {
+      metaTitle: { type: String, default: 'Templates' },
+      metaDescription: { type: String, default: 'Public templates for create form quickly!' }
+    },
+
+    data () {
+      return {
+      }
+    },
+
+    mounted () {},
+
+    methods: {},
+
+    computed: {
+      ...mapState({
+        templatesLoading: state => state['open/templates'].loading
+      }),
+      breadcrumbs () {
+        if (!this.template) {
+          return [{ route: { name: 'templates' }, label: 'Templates' }]
+        }
+        return [{ route: { name: 'templates' }, label: 'Templates' }, { label: this.template.name }]
+      },
+      template () {
+        return this.$store.getters['open/templates/getBySlug'](this.$route.params.slug)
+      },
+      form (){
+        return new Form(this.template.structure)
+      }
+    }
+  }
+  </script>

resources/js/pages/templates/templates.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="flex flex-col min-h-full mt-6">
+    <div class="w-full flex-grow md:w-4/5 lg:w-2/3 md:mx-auto md:max-w-4xl px-4">
+      <div>
+        <div class="flex flex-wrap items-center mt-6 mb-4">
+          <h2 class="text-nt-blue text-3xl font-bold flex-grow">
+            Templates
+          </h2>
+        </div>
+        <div v-if="templatesLoading" class="text-center">
+          <loader class="h-6 w-6 text-nt-blue mx-auto"/>
+        </div>
+        <p v-else-if="templates.length === 0">
+          No any templates found.
+        </p>
+        <div v-else class="mb-4">
+          <div v-if="templates && templates.length"
+               class="grid max-w-3xl grid-cols-1 mx-auto text-center sm:text-left sm:grid-cols-2 gap-y-8 gap-x-8 lg:gap-x-20">
+            <div class="relative group" v-for="(template, index) in templates" :key="template.id">
+              <div class="overflow-hidden rounded-lg aspect-w-16 aspect-h-9">
+                <img class="object-cover w-full h-full transition-all duration-300 transform group-hover:scale-125"
+                     :src="template.image_url" alt=""/>
+              </div>
+              <p class="mt-3 mb-2 text-sm font-normal text-gray-600 font-pj">
+                {{ formatCreatedDate(template.created_at) }}</p>
+              <p class="text-xl font-bold text-gray-900 font-pj">{{ template.name }}</p>
+              <router-link :to="{params:{slug:template.slug},name:'templates.show'}" title="">
+                <span class="absolute inset-0" aria-hidden="true"></span>
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <open-form-footer class="mt-8 border-t"/>
+  </div>
+</template>
+
+<script>
+import store from '~/store'
+import {mapGetters, mapState} from 'vuex'
+import Fuse from 'fuse.js'
+import OpenFormFooter from '../../components/pages/OpenFormFooter'
+
+const loadTemplates = function () {
+  store.commit('open/templates/startLoading')
+  store.dispatch('open/templates/load').then(() => {
+    store.commit('open/templates/stopLoading')
+  })
+}
+
+export default {
+  components: {OpenFormFooter},
+
+  beforeRouteEnter(to, from, next) {
+    loadTemplates()
+    next()
+  },
+
+  props: {
+    metaTitle: {type: String, default: 'Templates'},
+    metaDescription: {type: String, default: 'Public templates for create form quickly!'}
+  },
+
+  data() {
+    return {}
+  },
+
+  mounted() {
+  },
+
+  methods: {
+    formatCreatedDate(createdDate) {
+      const date = new Date(createdDate)
+      const dateTimeFormat = new Intl.DateTimeFormat('en', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })
+      return dateTimeFormat.format(date)
+    }
+  },
+
+  computed: {
+    ...mapState({
+      templates: state => state['open/templates'].content,
+      templatesLoading: state => state['open/templates'].loading
+    }),
+  }
+}
+</script>

resources/js/router/routes.js

@@ -52,5 +52,9 @@ export default [
   { path: '/integrations', name: 'integrations', component: page('integrations.vue') },
   { path: '/forms/:slug', name: 'forms.show_public', component: page('forms/show-public.vue') },
 
+  // Templates
+  { path: '/templates', name: 'templates', component: page('templates/templates.vue') },
+  { path: '/templates/:slug', name: 'templates.show', component: page('templates/show.vue') },
+
   { path: '*', component: page('errors/404.vue') }
 ]

resources/js/store/modules/open/templates.js

@@ -0,0 +1,55 @@
+import Vue from 'vue'
+import axios from 'axios'
+
+// state
+export const state = {
+  content: [],
+  loading: false
+}
+
+// getters
+export const getters = {
+  getById: (state) => (id) => {
+    if (state.content.length === 0) return null
+    return state.content.find(item => item.id === id)
+  },
+  getBySlug: (state) => (slug) => {
+    if (state.content.length === 0) return null
+    return state.content.find(item => item.slug === slug)
+  },
+}
+
+// mutations
+export const mutations = {
+  set (state, items) {
+    state.content = items
+  },
+  addOrUpdate (state, item) {
+    state.content = state.content.filter((val) => val.id !== item.id)
+    state.content.push(item)
+  },
+  startLoading () {
+    state.loading = true
+  },
+  stopLoading () {
+    state.loading = false
+  }
+}
+
+// actions
+export const actions = {
+  load (context) {
+    context.commit('set', [])
+    context.commit('startLoading')
+    return axios.get('/api/templates').then((response) => {
+      context.commit('set', response.data)
+      context.commit('stopLoading')
+    })
+  },
+  loadIfEmpty ({ context, dispatch, state }) {
+    if (state.content.length === 0) {
+      return dispatch('load')
+    }
+    return Promise.resolve()
+  },
+}