add List view for workflow tempalte (#3710)

Co-authored-by: Chenlei Hu <hcl@comfy.org>
Co-authored-by: github-actions <github-actions@github.com>

src/components/templates/TemplateWorkflowList.vue

@@ -0,0 +1,69 @@
+<template>
+  <DataTable
+    v-model:selection="selectedTemplate"
+    :value="templates"
+    striped-rows
+    selection-mode="single"
+  >
+    <Column field="title" :header="t('g.title')">
+      <template #body="slotProps">
+        <span :title="getTemplateTitle(slotProps.data)">{{
+          getTemplateTitle(slotProps.data)
+        }}</span>
+      </template>
+    </Column>
+    <Column field="description" :header="t('g.description')">
+      <template #body="slotProps">
+        <span :title="slotProps.data.description.replace(/[-_]/g, ' ')">
+          {{ slotProps.data.description.replace(/[-_]/g, ' ') }}
+        </span>
+      </template>
+    </Column>
+    <Column field="actions" header="" class="w-12">
+      <template #body="slotProps">
+        <Button
+          icon="pi pi-arrow-right"
+          text
+          rounded
+          size="small"
+          :loading="loading === slotProps.data.name"
+          @click="emit('loadWorkflow', slotProps.data.name)"
+        />
+      </template>
+    </Column>
+  </DataTable>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
+import { ref } from 'vue'
+
+import { st, t } from '@/i18n'
+import type { TemplateInfo } from '@/types/workflowTemplateTypes'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
+const { sourceModule, categoryTitle, loading, templates } = defineProps<{
+  sourceModule: string
+  categoryTitle: string
+  loading: string | null
+  templates: TemplateInfo[]
+}>()
+
+const selectedTemplate = ref(null)
+
+const emit = defineEmits<{
+  loadWorkflow: [name: string]
+}>()
+
+const getTemplateTitle = (template: TemplateInfo) => {
+  const fallback = template.title ?? template.name ?? `${sourceModule} Template`
+  return sourceModule === 'default'
+    ? st(
+        `templateWorkflows.template.${normalizeI18nKey(categoryTitle)}.${normalizeI18nKey(template.name)}`,
+        fallback
+      )
+    : fallback
+}
+</script>

src/components/templates/TemplateWorkflowView.vue

@@ -0,0 +1,82 @@
+<template>
+  <DataView
+    :value="templates"
+    :layout="layout"
+    data-key="name"
+    :lazy="true"
+    pt:root="h-full grid grid-rows-[auto_1fr]"
+    pt:content="p-2 overflow-auto"
+  >
+    <template #header>
+      <div class="flex justify-between items-center">
+        <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>
+    </template>
+
+    <template #list="{ items }">
+      <TemplateWorkflowList
+        :source-module="sourceModule"
+        :templates="items"
+        :loading="loading"
+        :category-title="categoryTitle"
+        @load-workflow="onLoadWorkflow"
+      />
+    </template>
+
+    <template #grid="{ items }">
+      <div
+        class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] auto-rows-fr gap-8 justify-items-center"
+      >
+        <TemplateWorkflowCard
+          v-for="template in items"
+          :key="template.name"
+          :source-module="sourceModule"
+          :template="template"
+          :loading="loading === template.name"
+          :category-title="categoryTitle"
+          @load-workflow="onLoadWorkflow"
+        />
+      </div>
+    </template>
+  </DataView>
+</template>
+
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core'
+import DataView from 'primevue/dataview'
+import SelectButton from 'primevue/selectbutton'
+
+import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
+import TemplateWorkflowList from '@/components/templates/TemplateWorkflowList.vue'
+import type { TemplateInfo } from '@/types/workflowTemplateTypes'
+
+defineProps<{
+  title: string
+  sourceModule: string
+  categoryTitle: string
+  loading: string | null
+  templates: TemplateInfo[]
+}>()
+
+const layout = useLocalStorage<'grid' | 'list'>(
+  'Comfy.TemplateWorkflow.Layout',
+  'grid'
+)
+
+const emit = defineEmits<{
+  loadWorkflow: [name: string]
+}>()
+
+const onLoadWorkflow = (name: string) => {
+  emit('loadWorkflow', name)
+}
+</script>

src/components/templates/TemplateWorkflowsContent.vue

@@ -30,36 +30,22 @@
         />
       </aside>
       <div
-        class="flex-1 overflow-auto transition-all duration-300"
+        class="flex-1 transition-all duration-300"
         :class="{
           'pl-80': isSideNavOpen || !isSmallScreen,
           'pl-8': !isSideNavOpen && isSmallScreen
         }"
       >
-        <div v-if="isReady && selectedTab" class="flex flex-col px-12 pb-4">
+        <TemplateWorkflowView
-          <div class="py-3 text-left">
+          v-if="isReady && selectedTab"
-            <h2 class="text-lg">
+          class="px-12 py-4"
-              {{ selectedTab.title }}
+          :title="selectedTab.title"
-            </h2>
+          :source-module="selectedTab.moduleName"
-          </div>
+          :templates="selectedTab.templates"
-          <div
+          :loading="workflowLoading"
-            class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] auto-rows-fr gap-8 justify-items-center"
+          :category-title="selectedTab.title"
-          >
+          @load-workflow="loadWorkflow"
-            <div
+        />
-              v-for="template in selectedTab.templates"
-              :key="template.name"
-              class="h-full"
-            >
-              <TemplateWorkflowCard
-                :source-module="selectedTab.moduleName"
-                :template="template"
-                :loading="template.name === workflowLoading"
-                :category-title="selectedTab.title"
-                @load-workflow="loadWorkflow"
-              />
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -73,7 +59,7 @@ import ProgressSpinner from 'primevue/progressspinner'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
+import TemplateWorkflowView from '@/components/templates/TemplateWorkflowView.vue'
 import TemplateWorkflowsSideNav from '@/components/templates/TemplateWorkflowsSideNav.vue'
 import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
 import { api } from '@/scripts/api'

src/locales/en/main.json

@@ -113,7 +113,8 @@
     "login": "Login",
     "learnMore": "Learn more",
     "amount": "Amount",
-    "unknownError": "Unknown error"
+    "unknownError": "Unknown error",
+    "title": "Title"
   },
   "manager": {
     "title": "Custom Nodes Manager",

src/locales/es/main.json

@@ -308,6 +308,7 @@
     "success": "Éxito",
     "systemInfo": "Información del sistema",
     "terminal": "Terminal",
+    "title": "Título",
     "unknownError": "Error desconocido",
     "update": "Actualizar",
     "updateAvailable": "Actualización Disponible",

src/locales/fr/main.json

@@ -308,6 +308,7 @@
     "success": "Succès",
     "systemInfo": "Informations système",
     "terminal": "Terminal",
+    "title": "Titre",
     "unknownError": "Erreur inconnue",
     "update": "Mettre à jour",
     "updateAvailable": "Mise à jour disponible",

src/locales/ja/main.json

@@ -308,6 +308,7 @@
     "success": "成功",
     "systemInfo": "システム情報",
     "terminal": "ターミナル",
+    "title": "タイトル",
     "unknownError": "不明なエラー",
     "update": "更新",
     "updateAvailable": "更新が利用可能",

src/locales/ko/main.json

@@ -308,6 +308,7 @@
     "success": "성공",
     "systemInfo": "시스템 정보",
     "terminal": "터미널",
+    "title": "제목",
     "unknownError": "알 수 없는 오류",
     "update": "업데이트",
     "updateAvailable": "업데이트 가능",

src/locales/ru/main.json

@@ -308,6 +308,7 @@
     "success": "Успех",
     "systemInfo": "Информация о системе",
     "terminal": "Терминал",
+    "title": "Заголовок",
     "unknownError": "Неизвестная ошибка",
     "update": "Обновить",
     "updateAvailable": "Доступно обновление",

src/locales/zh/main.json

@@ -308,6 +308,7 @@
     "success": "成功",
     "systemInfo": "系统信息",
     "terminal": "终端",
+    "title": "标题",
     "unknownError": "未知错误",
     "update": "更新",
     "updateAvailable": "有更新可用",

vite.config.mts

@@ -52,6 +52,10 @@ export default defineConfig({
         target: DEV_SERVER_COMFYUI_URL
       },
 
+      '/templates': {
+        target: DEV_SERVER_COMFYUI_URL
+      },
+
       '/testsubrouteindex': {
         target: 'http://localhost:5173',
         rewrite: (path) => path.substring('/testsubrouteindex'.length)