Work in progress

client/components/pages/templates/SingleTemplate.vue

@@ -0,0 +1,88 @@
+<template>
+  <div v-if="template" class="relative group">
+    <div v-if="template.is_new" class="absolute top-0 right-0 p-3 z-10">
+      <span
+        class="inline-flex items-center gap-1 rounded-full bg-blue-500 px-2 py-1 text-xs font-medium text-white"
+      >
+        <svg aria-hidden="true" class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+             fill="currentColor"
+        >
+          <path fill-rule="evenodd"
+                d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
+                clip-rule="evenodd"
+          />
+        </svg>
+        New
+      </span>
+    </div>
+
+    <div class="aspect-[4/3] rounded-lg shadow-sm overflow-hidden">
+      <img class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full"
+           :src="template.image_url" alt=""
+      >
+    </div>
+    <p
+      class="text-lg font-semibold leading-tight tracking-tight text-gray-900 mt-4 group-hover:text-blue-500 transition-all duration-150"
+    >
+      {{ template.name }}
+    </p>
+    <p class="line-clamp-2 mt-2 text-sm font-normal text-gray-600">
+      {{ cleanQuotes(template.short_description) }}
+    </p>
+    <template-tags :slug="template.slug"
+                   class="flex mt-4 items-center flex-wrap gap-3"
+    />
+    <router-link :to="{params:{slug:template.slug},name:'templates.show'}" title="">
+      <span class="absolute inset-0" aria-hidden="true" />
+    </router-link>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useTemplatesStore } from '../../../stores/templates'
+import TemplateTags from './TemplateTags.vue'
+
+export default {
+  components: { TemplateTags },
+
+  props: {
+    slug: {
+      type: String,
+      required: true
+    }
+  },
+
+  setup () {
+    const templatesStore = useTemplatesStore()
+    return {
+      templatesStore
+    }
+  },
+
+  data: () => ({}),
+
+  computed: {
+    template () {
+      return this.templatesStore.getBySlug(this.slug)
+    }
+  },
+
+  watch: {
+    slug () {
+      this.templatesStore.loadTemplate(this.slug)
+    }
+  },
+
+  mounted () {
+    this.templatesStore.loadTemplate(this.slug)
+  },
+
+  methods: {
+    cleanQuotes (str) {
+      // Remove starting and ending quotes if any
+      return (str) ? str.replace(/^"/, '').replace(/"$/, '') : ''
+    }
+  }
+}
+</script>

client/components/pages/templates/TemplateTags.vue

@@ -0,0 +1,84 @@
+<template>
+  <div v-if="template">
+    <template v-if="displayAll">
+      <span v-if="template.is_new"
+            class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-white bg-blue-500 rounded-full"
+      >
+        <svg aria-hidden="true" class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+             fill="currentColor"
+        >
+          <path fill-rule="evenodd"
+                d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z"
+                clip-rule="evenodd"
+          />
+        </svg>
+        New
+      </span>
+      <span v-for="item in types"
+            class="inline-flex items-center rounded-full bg-gray-50 dark:bg-gray-800 dark:text-gray-400 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+      >
+        {{ item }}
+      </span>
+      <span v-for="item in industries"
+            class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-900 dark:text-gray-400 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
+      >
+        {{ item }}
+      </span>
+    </template>
+    <template v-else>
+      <span v-if="types.length > 0"
+            class="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+      >
+        {{ types[0] }} <template v-if="types.length > 1">+{{ types.length - 1 }}</template>
+      </span>
+      <span v-if="industries.length > 0"
+            class="inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
+      >
+        {{ industries[0] }} <template v-if="industries.length > 1">+{{ industries.length - 1 }}</template>
+      </span>
+    </template>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useTemplatesStore } from '../../../stores/templates'
+
+export default {
+  props: {
+    slug: {
+      type: String,
+      required: true
+    },
+    displayAll: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  setup () {
+    const templatesStore = useTemplatesStore()
+    return {
+      templatesStore
+    }
+  },
+
+  data: () => ({}),
+
+  computed: {
+    template () {
+      return this.templatesStore.getBySlug(this.slug)
+    },
+    types () {
+      if (!this.template) return null
+      return this.templatesStore.getTemplateTypes(this.template.types)
+    },
+    industries () {
+      if (!this.template) return null
+      return this.templatesStore.getTemplateIndustries(this.template.industries)
+    }
+  },
+
+  methods: {}
+}
+</script>

client/components/pages/templates/TemplatesList.vue

@@ -0,0 +1,190 @@
+<template>
+  <div>
+    <section class="bg-white py-12">
+      <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 sm:gap-6 relative z-20">
+          <div class="flex items-center gap-4">
+            <div class="flex-1 sm:flex-none">
+              <select-input v-model="selectedType" name="type"
+                            :options="typesOptions" class="w-full sm:w-auto md:w-56"
+              />
+            </div>
+            <div class="flex-1 sm:flex-none">
+              <select-input v-model="selectedIndustry" name="industry"
+                            :options="industriesOptions" class="w-full sm:w-auto md:w-56"
+              />
+            </div>
+          </div>
+          <div class="flex-1 w-full md:max-w-xs">
+            <text-input name="search" :form="searchTemplate" placeholder="Search..." />
+          </div>
+        </div>
+
+        <div v-if="templatesLoading" class="text-center mt-4">
+          <loader class="h-6 w-6 text-nt-blue mx-auto" />
+        </div>
+        <p v-else-if="enrichedTemplates.length === 0" class="text-center mt-4">
+          No templates found.
+        </p>
+        <div v-else class="relative z-10">
+          <div class="grid grid-cols-1 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 sm:gap-y-12">
+            <single-template v-for="template in enrichedTemplates" :key="template.id" :slug="template.slug" />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <template v-if="!onlyMy">
+      <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="flex items-center justify-between">
+            <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+              All Types
+            </h4>
+          </div>
+
+          <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <router-link v-for="row in types" :key="row.slug" 
+                        :to="{params:{slug:row.slug}, name:'templates.types.show'}" 
+                        :title="row.name"
+                        class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+            >
+              {{ row.name }}
+            </router-link>
+          </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="flex items-center justify-between">
+            <h4 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+              All Industries
+            </h4>
+          </div>
+
+          <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <router-link v-for="row in industries" :key="row.slug" 
+                        :to="{params:{slug:row.slug}, name:'templates.industries.show'}" 
+                        :title="row.name"
+                        class="text-gray-600 dark:text-gray-400 transition-colors duration-300 hover:text-nt-blue"
+            >
+              {{ row.name }}
+            </router-link>
+          </div>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useAuthStore } from '../../../stores/auth'
+import { useTemplatesStore } from '../../../stores/templates'
+import Form from 'vform'
+import Fuse from 'fuse.js'
+import SingleTemplate from './SingleTemplate.vue'
+
+const loadTemplates = function (onlyMy) {
+  const templatesStore = useTemplatesStore()
+  if(onlyMy){
+    templatesStore.loadAll({'onlymy':true})
+  } else {
+    templatesStore.loadIfEmpty()
+  }
+}
+
+export default {
+  name: 'TemplatesList',
+  components: { SingleTemplate },
+  props: {
+    onlyMy: {
+      type: Boolean,
+      required: false
+    }
+  },
+
+  setup () {
+    const authStore = useAuthStore()
+    const templatesStore = useTemplatesStore()
+    return {
+      user : computed(() => authStore.user),
+      templates : computed(() => templatesStore.content),
+      templatesLoading : computed(() => templatesStore.loading),
+      industries : computed(() => templatesStore.industries),
+      types : computed(() => templatesStore.types)
+    }
+  },
+
+  data: () => ({
+    selectedType: 'all',
+    selectedIndustry: 'all',
+    searchTemplate: new Form({
+      search: ''
+    })
+  }),
+
+  watch: {},
+
+  mounted () {
+    loadTemplates(this.onlyMy)
+  },
+
+  computed: {
+    industriesOptions () {
+      return [{ name: 'All Industries', value: 'all' }].concat(Object.values(this.industries).map((industry) => {
+        return {
+          name: industry.name,
+          value: industry.slug
+        }
+      }))
+    },
+    typesOptions () {
+      return [{ name: 'All Types', value: 'all' }].concat(Object.values(this.types).map((type) => {
+        return {
+          name: type.name,
+          value: type.slug
+        }
+      }))
+    },
+    enrichedTemplates () {
+      let enrichedTemplates = (this.onlyMy && this.user) ? this.templates.filter((item) => { return item.creator_id === this.user.id}) : this.templates
+
+      // Filter by Selected Type
+      if (this.selectedType && this.selectedType !== 'all') {
+        enrichedTemplates = enrichedTemplates.filter((item) => {
+          return (item.types && item.types.length > 0) ? item.types.includes(this.selectedType) : false
+        })
+      }
+
+      // Filter by Selected Industry
+      if (this.selectedIndustry && this.selectedIndustry !== 'all') {
+        enrichedTemplates = enrichedTemplates.filter((item) => {
+          return (item.industries && item.industries.length > 0) ? item.industries.includes(this.selectedIndustry) : false
+        })
+      }
+
+      if (this.searchTemplate.search === '' || this.searchTemplate.search === null) {
+        return enrichedTemplates
+      }
+
+      // Fuze search
+      const fuzeOptions = {
+        keys: [
+          'name',
+          'slug',
+          'description',
+          'short_description'
+        ]
+      }
+      const fuse = new Fuse(enrichedTemplates, fuzeOptions)
+      return fuse.search(this.searchTemplate.search).map((res) => {
+        return res.item
+      })
+    }
+  },
+
+  methods: {}
+}
+</script>