Folder view

Comfy-Org · Aug 21, 2024 · 5e7588c · 5e7588c
1 parent d5c0766
commit 5e7588c
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 45 deletions.
diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -2,20 +2,31 @@
   <SidebarTabTemplate :title="$t('sideToolbar.queue')">
     <template #tool-buttons>
       <Button
-        :icon="isExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
+        v-if="isInFolderView"
+        icon="pi pi-arrow-left"
         text
         severity="secondary"
-        @click="toggleExpanded"
-        class="toggle-expanded-button"
-        v-tooltip="$t('sideToolbar.queueTab.showFlatList')"
-      />
-      <Button
-        icon="pi pi-trash"
-        text
-        severity="primary"
-        @click="confirmRemoveAll($event)"
-        class="clear-all-button"
+        @click="exitFolderView"
+        class="back-button"
+        v-tooltip="$t('sideToolbar.queueTab.backToAllTasks')"
       />
+      <template v-else>
+        <Button
+          :icon="isExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
+          text
+          severity="secondary"
+          @click="toggleExpanded"
+          class="toggle-expanded-button"
+          v-tooltip="$t('sideToolbar.queueTab.showFlatList')"
+        />
+        <Button
+          icon="pi pi-trash"
+          text
+          severity="primary"
+          @click="confirmRemoveAll($event)"
+          class="clear-all-button"
+        />
+      </template>
     </template>
     <template #body>
       <div
@@ -28,9 +39,10 @@
             v-for="task in visibleTasks"
             :key="task.key"
             :task="task"
-            :isFlatTask="isExpanded"
+            :isFlatTask="isExpanded || isInFolderView"
             @contextmenu="handleContextMenu"
             @preview="handlePreview"
+            @taskOutputLengthClicked="enterFolderView($event)"
           />
         </div>
         <div ref="loadMoreTrigger" style="height: 1px" />
@@ -74,17 +86,27 @@ const toast = useToast()
 const queueStore = useQueueStore()
 const { t } = useI18n()
 
+// Expanded view: show all outputs in a flat list.
 const isExpanded = ref(false)
 const visibleTasks = ref<TaskItemImpl[]>([])
 const scrollContainer = ref<HTMLElement | null>(null)
 const loadMoreTrigger = ref<HTMLElement | null>(null)
 const galleryActiveIndex = ref(-1)
+// Folder view: only show outputs from a single selected task.
+const folderTask = ref<TaskItemImpl | null>(null)
+const isInFolderView = computed(() => folderTask.value !== null)
 
 const ITEMS_PER_PAGE = 8
 const SCROLL_THRESHOLD = 100 // pixels from bottom to trigger load
 
 const allTasks = computed(() =>
-  isExpanded.value ? queueStore.flatTasks : queueStore.tasks
+  isInFolderView.value
+    ? folderTask.value
+      ? folderTask.value.flatten()
+      : []
+    : isExpanded.value
+      ? queueStore.flatTasks
+      : queueStore.tasks
 )
 const allGalleryItems = computed(() =>
   allTasks.value.flatMap((task: TaskItemImpl) => {
@@ -129,9 +151,13 @@ useResizeObserver(scrollContainer, () => {
   })
 })
 
+const updateVisibleTasks = () => {
+  visibleTasks.value = allTasks.value.slice(0, ITEMS_PER_PAGE)
+}
+
 const toggleExpanded = () => {
   isExpanded.value = !isExpanded.value
-  visibleTasks.value = allTasks.value.slice(0, ITEMS_PER_PAGE)
+  updateVisibleTasks()
 }
 
 const removeTask = (task: TaskItemImpl) => {
@@ -173,7 +199,7 @@ const confirmRemoveAll = (event: Event) => {
 
 const onStatus = async () => {
   await queueStore.update()
-  visibleTasks.value = allTasks.value.slice(0, ITEMS_PER_PAGE)
+  updateVisibleTasks()
 }
 
 const menu = ref(null)
@@ -182,7 +208,8 @@ const menuItems = computed<MenuItem[]>(() => [
   {
     label: t('delete'),
     icon: 'pi pi-trash',
-    command: () => menuTargetTask.value && removeTask(menuTargetTask.value)
+    command: () => menuTargetTask.value && removeTask(menuTargetTask.value),
+    disabled: isExpanded.value || isInFolderView.value
   },
   {
     label: t('loadWorkflow'),
@@ -208,6 +235,16 @@ const handlePreview = (task: TaskItemImpl) => {
   )
 }
 
+const enterFolderView = (task: TaskItemImpl) => {
+  folderTask.value = task
+  updateVisibleTasks()
+}
+
+const exitFolderView = () => {
+  folderTask.value = null
+  updateVisibleTasks()
+}
+
 onMounted(() => {
   api.addEventListener('status', onStatus)
   queueStore.update()
@@ -225,7 +262,7 @@ watch(
       visibleTasks.value.length === 0 ||
       visibleTasks.value.length > newTasks.length
     ) {
-      visibleTasks.value = newTasks.slice(0, ITEMS_PER_PAGE)
+      updateVisibleTasks()
     }
 
     nextTick(() => {

diff --git a/src/i18n.ts b/src/i18n.ts
@@ -25,7 +25,8 @@ const messages = {
         sortOrder: 'Sort Order'
       },
       queueTab: {
-        showFlatList: 'Show Flat List'
+        showFlatList: 'Show Flat List',
+        backToAllTasks: 'Back to All Tasks'
       }
     }
   },
@@ -51,7 +52,8 @@ const messages = {
         sortOrder: '排序顺序'
       },
       queueTab: {
-        showFlatList: '平铺结果'
+        showFlatList: '平铺结果',
+        backToAllTasks: '返回'
       }
     }
   }

diff --git a/src/stores/queueStore.ts b/src/stores/queueStore.ts
@@ -219,6 +219,33 @@ export class TaskItemImpl {
       app.nodeOutputs = toRaw(this.outputs)
     }
   }
+
+  public flatten(): TaskItemImpl[] {
+    if (this.displayStatus !== TaskItemDisplayStatus.Completed) {
+      return [this]
+    }
+
+    return this.flatOutputs.map(
+      (output: ResultItemImpl, i: number) =>
+        new TaskItemImpl(
+          this.taskType,
+          [
+            this.queueIndex,
+            `${this.promptId}-${i}`,
+            this.promptInputs,
+            this.extraData,
+            this.outputsToExecute
+          ],
+          this.status,
+          {
+            [output.nodeId]: {
+              [output.mediaType]: [output]
+            }
+          },
+          [output]
+        )
+    )
+  }
 }
 
 interface State {
@@ -244,32 +271,7 @@ export const useQueueStore = defineStore('queue', {
       ]
     },
     flatTasks(): TaskItemImpl[] {
-      return this.tasks.flatMap((task: TaskItemImpl) => {
-        if (task.displayStatus !== TaskItemDisplayStatus.Completed) {
-          return [task]
-        }
-
-        return task.flatOutputs.map(
-          (output: ResultItemImpl, i: number) =>
-            new TaskItemImpl(
-              task.taskType,
-              [
-                task.queueIndex,
-                `${task.promptId}-${i}`,
-                task.promptInputs,
-                task.extraData,
-                task.outputsToExecute
-              ],
-              task.status,
-              {
-                [output.nodeId]: {
-                  [output.mediaType]: [output]
-                }
-              },
-              [output]
-            )
-        )
-      })
+      return this.tasks.flatMap((task: TaskItemImpl) => task.flatten())
     },
     lastHistoryQueueIndex(state) {
       return state.historyTasks.length ? state.historyTasks[0].queueIndex : -1