diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue index 2d262bda63..0c0af66187 100644 --- a/src/components/sidebar/tabs/QueueSidebarTab.vue +++ b/src/components/sidebar/tabs/QueueSidebarTab.vue @@ -1,21 +1,32 @@ - + - + + + + @@ -43,7 +55,7 @@ /> - + ([]) const scrollContainer = ref(null) const loadMoreTrigger = ref(null) const galleryActiveIndex = ref(-1) +// Folder view: only show outputs from a single selected task. +const folderTask = ref(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(() => [ { 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/components/sidebar/tabs/queue/TaskItem.vue b/src/components/sidebar/tabs/queue/TaskItem.vue index 558027f7ed..2ef2708219 100644 --- a/src/components/sidebar/tabs/queue/TaskItem.vue +++ b/src/components/sidebar/tabs/queue/TaskItem.vue @@ -38,15 +38,20 @@ - - {{ flatOutputs.length }} - + + {{ flatOutputs.length }} +