From 989e4e50d33afcc0a7fd670482c70b169ba4fdd7 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Wed, 20 Aug 2025 19:39:37 +0100
Subject: [PATCH] feat: remove TemplateSearchBar component and enhance template
 filtering options with use cases and licenses

---
 .../templates/TemplateSearchBar.vue           | 64 --------------
 .../templates/TemplateWorkflowView.vue        | 25 ------
 src/composables/useTemplateFiltering.ts       | 85 +++++++++++++++++--
 src/locales/en/main.json                      |  2 +
 src/types/workflowTemplateTypes.ts            |  2 +
 5 files changed, 82 insertions(+), 96 deletions(-)
 delete mode 100644 src/components/templates/TemplateSearchBar.vue

diff --git a/src/components/templates/TemplateSearchBar.vue b/src/components/templates/TemplateSearchBar.vue
deleted file mode 100644
index 17b564b12..000000000
--- a/src/components/templates/TemplateSearchBar.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div class="relative w-full p-4">
-    <div class="h-12 flex items-center gap-4 justify-between">
-      <div class="flex-1 max-w-md">
-        <AutoComplete
-          v-model.lazy="searchQuery"
-          :placeholder="$t('templateWorkflows.searchPlaceholder')"
-          :complete-on-focus="false"
-          :delay="200"
-          class="w-full"
-          :pt="{
-            pcInputText: {
-              root: {
-                class: 'w-full rounded-2xl'
-              }
-            },
-            loader: {
-              style: 'display: none'
-            }
-          }"
-          :show-empty-message="false"
-          @complete="() => {}"
-        />
-      </div>
-    </div>
-
-    <div class="flex items-center gap-4 mt-2">
-      <small
-        v-if="searchQuery && filteredCount !== null"
-        class="text-color-secondary"
-      >
-        {{ $t('g.resultsCount', { count: filteredCount }) }}
-      </small>
-      <Button
-        v-if="searchQuery"
-        text
-        size="small"
-        icon="pi pi-times"
-        :label="$t('g.clearFilters')"
-        @click="clearFilters"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import AutoComplete from 'primevue/autocomplete'
-import Button from 'primevue/button'
-
-const { filteredCount } = defineProps<{
-  filteredCount?: number | null
-}>()
-
-const searchQuery = defineModel<string>('searchQuery', { default: '' })
-
-const emit = defineEmits<{
-  clearFilters: []
-}>()
-
-const clearFilters = () => {
-  searchQuery.value = ''
-  emit('clearFilters')
-}
-</script>
diff --git a/src/components/templates/TemplateWorkflowView.vue b/src/components/templates/TemplateWorkflowView.vue
index 8a866cdd1..c364a9dfa 100644
--- a/src/components/templates/TemplateWorkflowView.vue
+++ b/src/components/templates/TemplateWorkflowView.vue
@@ -7,28 +7,6 @@
     pt:root="h-full grid grid-rows-[auto_1fr_auto]"
     pt:content="p-2 overflow-auto"
   >
-    <template #header>
-      <div class="flex flex-col">
-        <div class="flex justify-between items-center mb-4">
-          <h2 class="text-lg">{{ title }}</h2>
-          <SelectButton
-            v-model="layout"
-            :options="['grid', 'list']"
-            :allow-empty="false"
-          >
-            <template #option="{ option }">
-              <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
-            </template>
-          </SelectButton>
-        </div>
-        <TemplateSearchBar
-          v-model:search-query="searchQuery"
-          :filtered-count="filteredCount"
-          @clear-filters="() => reset()"
-        />
-      </div>
-    </template>
-
     <template #list="{ items }">
       <TemplateWorkflowList
         :source-module="sourceModule"
@@ -77,11 +55,8 @@
 <script setup lang="ts">
 import { useLocalStorage } from '@vueuse/core'
 import DataView from 'primevue/dataview'
-import SelectButton from 'primevue/selectbutton'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-
-import TemplateSearchBar from '@/components/templates/TemplateSearchBar.vue'
 import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
 import TemplateWorkflowCardSkeleton from '@/components/templates/TemplateWorkflowCardSkeleton.vue'
 import TemplateWorkflowList from '@/components/templates/TemplateWorkflowList.vue'
diff --git a/src/composables/useTemplateFiltering.ts b/src/composables/useTemplateFiltering.ts
index c9f2bc1a6..240407b00 100644
--- a/src/composables/useTemplateFiltering.ts
+++ b/src/composables/useTemplateFiltering.ts
@@ -6,7 +6,9 @@ import type { TemplateInfo } from '@/types/workflowTemplateTypes'
 export interface TemplateFilterOptions {
   searchQuery?: string
   selectedModels?: string[]
-  sortBy?: 'recommended' | 'alphabetical' | 'newest'
+  selectedUseCases?: string[] // Now represents selected tags
+  selectedLicenses?: string[]
+  sortBy?: 'default' | 'alphabetical' | 'newest'
 }
 
 export function useTemplateFiltering(
@@ -14,7 +16,9 @@ export function useTemplateFiltering(
 ) {
   const searchQuery = ref('')
   const selectedModels = ref<string[]>([])
-  const sortBy = ref<'recommended' | 'alphabetical' | 'newest'>('recommended')
+  const selectedUseCases = ref<string[]>([])
+  const selectedLicenses = ref<string[]>([])
+  const sortBy = ref<'default' | 'alphabetical' | 'newest'>('default')
 
   const templatesArray = computed(() => {
     const templateData = 'value' in templates ? templates.value : templates
@@ -47,6 +51,20 @@ export function useTemplateFiltering(
     return Array.from(modelSet).sort()
   })
 
+  const availableUseCases = computed(() => {
+    const tagSet = new Set<string>()
+    templatesArray.value.forEach((template) => {
+      if (template.tags && Array.isArray(template.tags)) {
+        template.tags.forEach((tag) => tagSet.add(tag))
+      }
+    })
+    return Array.from(tagSet).sort()
+  })
+
+  const availableLicenses = computed(() => {
+    return ['Open Source', 'Closed Source (API Nodes)']
+  })
+
   const filteredBySearch = computed(() => {
     if (!searchQuery.value.trim()) {
       return templatesArray.value
@@ -71,8 +89,45 @@ export function useTemplateFiltering(
     })
   })
 
+  const filteredByUseCases = computed(() => {
+    if (selectedUseCases.value.length === 0) {
+      return filteredByModels.value
+    }
+
+    return filteredByModels.value.filter((template) => {
+      if (!template.tags || !Array.isArray(template.tags)) {
+        return false
+      }
+      return selectedUseCases.value.some((selectedTag) =>
+        template.tags?.includes(selectedTag)
+      )
+    })
+  })
+
+  const filteredByLicenses = computed(() => {
+    if (selectedLicenses.value.length === 0) {
+      return filteredByUseCases.value
+    }
+
+    return filteredByUseCases.value.filter((template) => {
+      // Check if template has API in its tags or name (indicating it's a closed source API node)
+      const isApiTemplate =
+        template.tags?.includes('API') ||
+        template.name?.toLowerCase().includes('api_')
+
+      return selectedLicenses.value.some((selectedLicense) => {
+        if (selectedLicense === 'Closed Source (API Nodes)') {
+          return isApiTemplate
+        } else if (selectedLicense === 'Open Source') {
+          return !isApiTemplate
+        }
+        return false
+      })
+    })
+  })
+
   const sortedTemplates = computed(() => {
-    const templates = [...filteredByModels.value]
+    const templates = [...filteredByLicenses.value]
 
     switch (sortBy.value) {
       case 'alphabetical':
@@ -87,9 +142,9 @@ export function useTemplateFiltering(
           const dateB = new Date(b.date || '1970-01-01')
           return dateB.getTime() - dateA.getTime()
         })
-      case 'recommended':
+      case 'default':
       default:
-        // Keep original order (recommended order)
+        // Keep original order (default order)
         return templates
     }
   })
@@ -99,13 +154,23 @@ export function useTemplateFiltering(
   const resetFilters = () => {
     searchQuery.value = ''
     selectedModels.value = []
-    sortBy.value = 'recommended'
+    selectedUseCases.value = []
+    selectedLicenses.value = []
+    sortBy.value = 'default'
   }
 
   const removeModelFilter = (model: string) => {
     selectedModels.value = selectedModels.value.filter((m) => m !== model)
   }
 
+  const removeUseCaseFilter = (tag: string) => {
+    selectedUseCases.value = selectedUseCases.value.filter((t) => t !== tag)
+  }
+
+  const removeLicenseFilter = (license: string) => {
+    selectedLicenses.value = selectedLicenses.value.filter((l) => l !== license)
+  }
+
   const filteredCount = computed(() => filteredTemplates.value.length)
   const totalCount = computed(() => templatesArray.value.length)
 
@@ -113,16 +178,22 @@ export function useTemplateFiltering(
     // State
     searchQuery,
     selectedModels,
+    selectedUseCases,
+    selectedLicenses,
     sortBy,
 
     // Computed
     filteredTemplates,
     availableModels,
+    availableUseCases,
+    availableLicenses,
     filteredCount,
     totalCount,
 
     // Methods
     resetFilters,
-    removeModelFilter
+    removeModelFilter,
+    removeUseCaseFilter,
+    removeLicenseFilter
   }
 }
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index c7745520a..ea41a662f 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -895,6 +895,8 @@
     "noResultsHint": "Try adjusting your search or filters",
     "modelFilter": "Model Filter",
     "modelsSelected": "{count} Models",
+    "useCasesSelected": "{count} Use Cases",
+    "licensesSelected": "{count} Licenses",
     "resultsCount": "Showing {count} of {total} templates",
     "sort": {
       "recommended": "Recommended",
diff --git a/src/types/workflowTemplateTypes.ts b/src/types/workflowTemplateTypes.ts
index 1f62102fb..0a8d5efa9 100644
--- a/src/types/workflowTemplateTypes.ts
+++ b/src/types/workflowTemplateTypes.ts
@@ -15,6 +15,8 @@ export interface TemplateInfo {
   tags?: string[]
   models?: string[]
   date?: string
+  useCase?: string
+  license?: string
 }
 
 export interface WorkflowTemplates {