Skip to content

Commit ba3b1ba

Browse files
jtydhr88Chenlei Hugithub-actions
authored
add List view for workflow tempalte (#3710)
Co-authored-by: Chenlei Hu <[email protected]> Co-authored-by: github-actions <[email protected]>
1 parent 23d3228 commit ba3b1ba

File tree

11 files changed

+175
-27
lines changed

11 files changed

+175
-27
lines changed

‎src/components/templates/TemplateWorkflowList.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<DataTable
3+
v-model:selection="selectedTemplate"
4+
:value="templates"
5+
striped-rows
6+
selection-mode="single"
7+
>
8+
<Column field="title" :header="t('g.title')">
9+
<template #body="slotProps">
10+
<span :title="getTemplateTitle(slotProps.data)">{{
11+
getTemplateTitle(slotProps.data)
12+
}}</span>
13+
</template>
14+
</Column>
15+
<Column field="description" :header="t('g.description')">
16+
<template #body="slotProps">
17+
<span :title="slotProps.data.description.replace(/[-_]/g, ' ')">
18+
{{ slotProps.data.description.replace(/[-_]/g, ' ') }}
19+
</span>
20+
</template>
21+
</Column>
22+
<Column field="actions" header="" class="w-12">
23+
<template #body="slotProps">
24+
<Button
25+
icon="pi pi-arrow-right"
26+
text
27+
rounded
28+
size="small"
29+
:loading="loading === slotProps.data.name"
30+
@click="emit('loadWorkflow', slotProps.data.name)"
31+
/>
32+
</template>
33+
</Column>
34+
</DataTable>
35+
</template>
36+
37+
<script setup lang="ts">
38+
import Button from 'primevue/button'
39+
import Column from 'primevue/column'
40+
import DataTable from 'primevue/datatable'
41+
import { ref } from 'vue'
42+
43+
import { st, t } from '@/i18n'
44+
import type { TemplateInfo } from '@/types/workflowTemplateTypes'
45+
import { normalizeI18nKey } from '@/utils/formatUtil'
46+
47+
const { sourceModule, categoryTitle, loading, templates } = defineProps<{
48+
sourceModule: string
49+
categoryTitle: string
50+
loading: string | null
51+
templates: TemplateInfo[]
52+
}>()
53+
54+
const selectedTemplate = ref(null)
55+
56+
const emit = defineEmits<{
57+
loadWorkflow: [name: string]
58+
}>()
59+
60+
const getTemplateTitle = (template: TemplateInfo) => {
61+
const fallback = template.title ?? template.name ?? `${sourceModule} Template`
62+
return sourceModule === 'default'
63+
? st(
64+
`templateWorkflows.template.${normalizeI18nKey(categoryTitle)}.${normalizeI18nKey(template.name)}`,
65+
fallback
66+
)
67+
: fallback
68+
}
69+
</script>

‎src/components/templates/TemplateWorkflowView.vue‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<DataView
3+
:value="templates"
4+
:layout="layout"
5+
data-key="name"
6+
:lazy="true"
7+
pt:root="h-full grid grid-rows-[auto_1fr]"
8+
pt:content="p-2 overflow-auto"
9+
>
10+
<template #header>
11+
<div class="flex justify-between items-center">
12+
<h2 class="text-lg">{{ title }}</h2>
13+
<SelectButton
14+
v-model="layout"
15+
:options="['grid', 'list']"
16+
:allow-empty="false"
17+
>
18+
<template #option="{ option }">
19+
<i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
20+
</template>
21+
</SelectButton>
22+
</div>
23+
</template>
24+
25+
<template #list="{ items }">
26+
<TemplateWorkflowList
27+
:source-module="sourceModule"
28+
:templates="items"
29+
:loading="loading"
30+
:category-title="categoryTitle"
31+
@load-workflow="onLoadWorkflow"
32+
/>
33+
</template>
34+
35+
<template #grid="{ items }">
36+
<div
37+
class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] auto-rows-fr gap-8 justify-items-center"
38+
>
39+
<TemplateWorkflowCard
40+
v-for="template in items"
41+
:key="template.name"
42+
:source-module="sourceModule"
43+
:template="template"
44+
:loading="loading === template.name"
45+
:category-title="categoryTitle"
46+
@load-workflow="onLoadWorkflow"
47+
/>
48+
</div>
49+
</template>
50+
</DataView>
51+
</template>
52+
53+
<script setup lang="ts">
54+
import { useLocalStorage } from '@vueuse/core'
55+
import DataView from 'primevue/dataview'
56+
import SelectButton from 'primevue/selectbutton'
57+
58+
import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
59+
import TemplateWorkflowList from '@/components/templates/TemplateWorkflowList.vue'
60+
import type { TemplateInfo } from '@/types/workflowTemplateTypes'
61+
62+
defineProps<{
63+
title: string
64+
sourceModule: string
65+
categoryTitle: string
66+
loading: string | null
67+
templates: TemplateInfo[]
68+
}>()
69+
70+
const layout = useLocalStorage<'grid' | 'list'>(
71+
'Comfy.TemplateWorkflow.Layout',
72+
'grid'
73+
)
74+
75+
const emit = defineEmits<{
76+
loadWorkflow: [name: string]
77+
}>()
78+
79+
const onLoadWorkflow = (name: string) => {
80+
emit('loadWorkflow', name)
81+
}
82+
</script>

‎src/components/templates/TemplateWorkflowsContent.vue‎

Lines changed: 12 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -30,36 +30,22 @@
3030
/>
3131
</aside>
3232
<div
33-
class="flex-1 overflow-auto transition-all duration-300"
33+
class="flex-1 transition-all duration-300"
3434
:class="{
3535
'pl-80': isSideNavOpen || !isSmallScreen,
3636
'pl-8': !isSideNavOpen && isSmallScreen
3737
}"
3838
>
39-
<div v-if="isReady && selectedTab" class="flex flex-col px-12 pb-4">
40-
<div class="py-3 text-left">
41-
<h2 class="text-lg">
42-
{{ selectedTab.title }}
43-
</h2>
44-
</div>
45-
<div
46-
class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] auto-rows-fr gap-8 justify-items-center"
47-
>
48-
<div
49-
v-for="template in selectedTab.templates"
50-
:key="template.name"
51-
class="h-full"
52-
>
53-
<TemplateWorkflowCard
54-
:source-module="selectedTab.moduleName"
55-
:template="template"
56-
:loading="template.name === workflowLoading"
57-
:category-title="selectedTab.title"
58-
@load-workflow="loadWorkflow"
59-
/>
60-
</div>
61-
</div>
62-
</div>
39+
<TemplateWorkflowView
40+
v-if="isReady && selectedTab"
41+
class="px-12 py-4"
42+
:title="selectedTab.title"
43+
:source-module="selectedTab.moduleName"
44+
:templates="selectedTab.templates"
45+
:loading="workflowLoading"
46+
:category-title="selectedTab.title"
47+
@load-workflow="loadWorkflow"
48+
/>
6349
</div>
6450
</div>
6551
</div>
@@ -73,7 +59,7 @@ import ProgressSpinner from 'primevue/progressspinner'
7359
import { computed, ref, watch } from 'vue'
7460
import { useI18n } from 'vue-i18n'
7561
76-
import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
62+
import TemplateWorkflowView from '@/components/templates/TemplateWorkflowView.vue'
7763
import TemplateWorkflowsSideNav from '@/components/templates/TemplateWorkflowsSideNav.vue'
7864
import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
7965
import { api } from '@/scripts/api'

‎src/locales/en/main.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,8 @@
113113
"login": "Login",
114114
"learnMore": "Learn more",
115115
"amount": "Amount",
116-
"unknownError": "Unknown error"
116+
"unknownError": "Unknown error",
117+
"title": "Title"
117118
},
118119
"manager": {
119120
"title": "Custom Nodes Manager",

‎src/locales/es/main.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,7 @@
308308
"success": "Éxito",
309309
"systemInfo": "Información del sistema",
310310
"terminal": "Terminal",
311+
"title": "Título",
311312
"unknownError": "Error desconocido",
312313
"update": "Actualizar",
313314
"updateAvailable": "Actualización Disponible",

‎src/locales/fr/main.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,7 @@
308308
"success": "Succès",
309309
"systemInfo": "Informations système",
310310
"terminal": "Terminal",
311+
"title": "Titre",
311312
"unknownError": "Erreur inconnue",
312313
"update": "Mettre à jour",
313314
"updateAvailable": "Mise à jour disponible",

‎src/locales/ja/main.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,7 @@
308308
"success": "成功",
309309
"systemInfo": "システム情報",
310310
"terminal": "ターミナル",
311+
"title": "タイトル",
311312
"unknownError": "不明なエラー",
312313
"update": "更新",
313314
"updateAvailable": "更新が利用可能",

‎src/locales/ko/main.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,7 @@
308308
"success": "성공",
309309
"systemInfo": "시스템 정보",
310310
"terminal": "터미널",
311+
"title": "제목",
311312
"unknownError": "알 수 없는 오류",
312313
"update": "업데이트",
313314
"updateAvailable": "업데이트 가능",

‎src/locales/ru/main.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,7 @@
308308
"success": "Успех",
309309
"systemInfo": "Информация о системе",
310310
"terminal": "Терминал",
311+
"title": "Заголовок",
311312
"unknownError": "Неизвестная ошибка",
312313
"update": "Обновить",
313314
"updateAvailable": "Доступно обновление",

‎src/locales/zh/main.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,7 @@
308308
"success": "成功",
309309
"systemInfo": "系统信息",
310310
"terminal": "终端",
311+
"title": "标题",
311312
"unknownError": "未知错误",
312313
"update": "更新",
313314
"updateAvailable": "有更新可用",

0 commit comments

Comments
 (0)