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 @@ - - - - - {}" - /> - - - - - - {{ $t('g.resultsCount', { count: filteredCount }) }} - - - - - - - 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" > - - - - {{ title }} - - - - - - - reset()" - /> - - - 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([]) - const sortBy = ref<'recommended' | 'alphabetical' | 'newest'>('recommended') + const selectedUseCases = ref([]) + const selectedLicenses = ref([]) + 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() + 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 {