Rename SideBar to Sidebar (#422)

* Rename SideBar to Sidebar * rename files * rename files
2026-05-04 21:22:07 +00:00 · 2024-08-14 11:27:23 -04:00
parent c6b6bdcb67
commit a68f7c680b
16 changed files with 54 additions and 54 deletions
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -0,0 +1,176 @@
+<template>
+  <DataTable
+    v-if="tasks.length > 0"
+    :value="tasks"
+    dataKey="promptId"
+    class="queue-table"
+  >
+    <Column header="STATUS">
+      <template #body="{ data }">
+        <Tag :severity="taskTagSeverity(data.displayStatus)">
+          {{ data.displayStatus.toUpperCase() }}
+        </Tag>
+      </template>
+    </Column>
+    <Column header="TIME" :pt="{ root: { class: 'queue-time-cell' } }">
+      <template #body="{ data }">
+        <div v-if="data.isHistory" class="queue-time-cell-content">
+          {{ formatTime(data.executionTimeInSeconds) }}
+        </div>
+        <div v-else-if="data.isRunning" class="queue-time-cell-content">
+          <i class="pi pi-spin pi-spinner"></i>
+        </div>
+        <div v-else class="queue-time-cell-content">...</div>
+      </template>
+    </Column>
+    <Column
+      :pt="{
+        headerCell: {
+          class: 'queue-tool-header-cell'
+        },
+        bodyCell: {
+          class: 'queue-tool-body-cell'
+        }
+      }"
+    >
+      <template #header>
+        <Toast />
+        <ConfirmPopup />
+        <Button
+          icon="pi pi-trash"
+          text
+          severity="primary"
+          @click="confirmRemoveAll($event)"
+        />
+      </template>
+      <template #body="{ data }">
+        <Button
+          icon="pi pi-file-export"
+          text
+          severity="primary"
+          @click="data.loadWorkflow()"
+        />
+        <Button
+          icon="pi pi-times"
+          text
+          severity="secondary"
+          @click="removeTask(data)"
+        />
+      </template>
+    </Column>
+  </DataTable>
+  <div v-else>
+    <NoResultsPlaceholder
+      icon="pi pi-info-circle"
+      :title="$t('noTasksFound')"
+      :message="$t('noTasksFoundMessage')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import Tag from 'primevue/tag'
+import Button from 'primevue/button'
+import ConfirmPopup from 'primevue/confirmpopup'
+import Toast from 'primevue/toast'
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import {
+  TaskItemDisplayStatus,
+  TaskItemImpl,
+  useQueueStore
+} from '@/stores/queueStore'
+import { computed, onMounted, onUnmounted } from 'vue'
+import { api } from '@/scripts/api'
+
+const confirm = useConfirm()
+const toast = useToast()
+const queueStore = useQueueStore()
+
+const tasks = computed(() => queueStore.tasks)
+const taskTagSeverity = (status: TaskItemDisplayStatus) => {
+  switch (status) {
+    case TaskItemDisplayStatus.Pending:
+      return 'secondary'
+    case TaskItemDisplayStatus.Running:
+      return 'info'
+    case TaskItemDisplayStatus.Completed:
+      return 'success'
+    case TaskItemDisplayStatus.Failed:
+      return 'danger'
+    case TaskItemDisplayStatus.Cancelled:
+      return 'warning'
+  }
+}
+const formatTime = (time?: number) => {
+  if (time === undefined) {
+    return ''
+  }
+  return `${time.toFixed(2)}s`
+}
+const removeTask = (task: TaskItemImpl) => {
+  if (task.isRunning) {
+    api.interrupt()
+  }
+  queueStore.delete(task)
+}
+const removeAllTasks = async () => {
+  await queueStore.clear()
+}
+const confirmRemoveAll = (event) => {
+  confirm.require({
+    target: event.currentTarget,
+    message: 'Do you want to delete all tasks?',
+    icon: 'pi pi-info-circle',
+    rejectProps: {
+      label: 'Cancel',
+      severity: 'secondary',
+      outlined: true
+    },
+    acceptProps: {
+      label: 'Delete',
+      severity: 'danger'
+    },
+    accept: async () => {
+      await removeAllTasks()
+      toast.add({
+        severity: 'info',
+        summary: 'Confirmed',
+        detail: 'Tasks deleted',
+        life: 3000
+      })
+    }
+  })
+}
+
+const onStatus = () => queueStore.update()
+onMounted(() => {
+  api.addEventListener('status', onStatus)
+
+  queueStore.update()
+})
+onUnmounted(() => {
+  api.removeEventListener('status', onStatus)
+})
+</script>
+
+<style>
+.queue-tool-header-cell {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.queue-tool-body-cell {
+  display: table-cell;
+  text-align: right !important;
+}
+</style>
+
+<style scoped>
+.queue-time-cell-content {
+  width: fit-content;
+}
+</style>