feat: 1.1.3 version

Author: spikeninja

package.json

@@ -2,7 +2,7 @@
   "name": "nuxt-app",
   "private": true,
   "type": "module",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -12,6 +12,7 @@
     "db:push": "drizzle-kit push"
   },
   "dependencies": {
+    "@vueuse/core": "^12.0.0",
     "better-sqlite3": "^11.6.0",
     "bootstrap": "^5.3.3",
     "dayjs": "^1.11.13",

pnpm-lock.yaml

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { formatDate } from "~/utils"
+import { useIntervalFn } from "@vueuse/core"
+import type { TaskSelect } from "~/server/db/schema"
 
 const route = useRoute()
 const router = useRouter()
@@ -11,34 +13,70 @@ if (!route.query.page) {
 const perPage = 10
 const searchRef = ref("")
 
+const state = computed(() => route.query.state)
 const search = computed(() => route.query.search || "")
 const page = computed(() => Number(route.query.page) || 1)
 
-const { data } = useAsyncData(
+const { data, refresh } = useAsyncData(
   "tasks",
   () =>
     $fetch(`/api/tasks`, {
       params: {
         limit: perPage,
+        state: state.value,
         search: search.value,
         offset: (page.value - 1) * perPage,
       },
     }),
   {
-    watch: [page, search],
+    watch: [page, search, state],
   }
 )
 
+useIntervalFn(() => {
+  console.log("REFRESHING...")
+  refresh()
+}, 3000)
+
 const totalPages = computed(() => Math.ceil((data.value?.count || 0) / perPage))
 
-function limitText(text: string, length: number) {
+const limitText = (text: string, length: number) => {
   if (text.length > length) {
     return text.slice(0, length).trim() + "..."
   }
   return text
 }
 
-function searchSubmit() {
+const formatReturnValue = (task: TaskSelect) => {
+  if (task.returnValue?.return_value) {
+    return task.returnValue.return_value
+  } else {
+    return "null"
+  }
+}
+
+// temporarily, while dishka hasn't fixed it's module naming bug
+const formatTaskName = (taskName: string) => {
+  if (taskName.includes(":")) {
+    const parts = taskName.split(":")
+    return parts[parts.length - 1]
+  } else {
+    return taskName
+  }
+}
+
+const stateHandler = (state: "pending" | "success" | "failure") => {
+  router.push({
+    path: "/tasks",
+    query: {
+      page: 1,
+      state: state,
+      search: searchRef.value || undefined,
+    },
+  })
+}
+
+const searchSubmit = () => {
   if (searchRef.value) {
     router.push({
       path: "/tasks",
@@ -50,24 +88,26 @@ function searchSubmit() {
   }
 }
 
-function handleNext() {
+const handleNext = () => {
   if (page.value < totalPages.value) {
     router.push({
       path: "/tasks",
       query: {
         page: page.value + 1,
+        state: state.value,
         search: searchRef.value || undefined,
       },
     })
   }
 }
 
-function handlePrev() {
+const handlePrev = () => {
   if (page.value > 1) {
     router.push({
       path: "/tasks",
       query: {
         page: page.value - 1,
+        state: state.value,
         search: searchRef.value || undefined,
       },
     })
@@ -113,21 +153,22 @@ function handlePrev() {
             <th>Result</th>
             <th>Started</th>
             <th>Finished</th>
-            <th>Runtime</th>
+            <th>Runtime (s)</th>
             <th>Worker</th>
           </tr>
         </thead>
         <tbody>
           <tr v-if="data" v-for="task in data.tasks">
-            <td class="task-name-td">{{ task.name }}</td>
+            <td class="task-name-td">{{ formatTaskName(task.name) }}</td>
             <td>
               <NuxtLink :to="{ name: 'tasks-id', params: { id: task.id } }">
                 {{ task.id }}
               </NuxtLink>
             </td>
             <td>
               <span
-                class="py-1 px-2 badge"
+                @click="stateHandler(task.state)"
+                class="py-1 px-2 badge cursor-pointer"
                 :class="{
                   'bg-success': task.state === 'success',
                   'bg-danger': task.state === 'failure',
@@ -138,10 +179,12 @@ function handlePrev() {
               </span>
             </td>
             <td>{{ task.args }}</td>
-            <td>{{ limitText(JSON.stringify(task.kwargs), 50) }}</td>
-            <td>{{ task.returnValue }}</td>
+            <td>{{ limitText(JSON.stringify(task.kwargs), 40) }}</td>
+            <td>{{ formatReturnValue(task) }}</td>
             <td>{{ formatDate(task.startedAt) }}</td>
-            <td>{{ task.finishedAt ? formatDate(task.finishedAt) : null }}</td>
+            <td>
+              {{ task.finishedAt ? formatDate(task.finishedAt) : null }}
+            </td>
             <td>{{ task.executionTime }}</td>
             <td>{{ task.worker }}</td>
           </tr>
@@ -153,23 +196,25 @@ function handlePrev() {
       <nav>
         <ul class="pagination">
           <li class="page-item">
-            <span
+            <button
               @click="handlePrev"
               :class="{ disabled: page === 1 }"
               class="page-link cursor-pointer"
-              >Previous</span
             >
+              Previous
+            </button>
           </li>
           <div class="flex justify-center items-center px-2">
             <span>{{ page }} / {{ totalPages }}</span>
           </div>
           <li class="page-item">
-            <span
+            <button
               @click="handleNext"
               class="page-link cursor-pointer"
               :class="{ disabled: page === totalPages }"
-              >Next</span
             >
+              Next
+            </button>
           </li>
         </ul>
       </nav>

src/pages/tasks/index.vue

@@ -5,11 +5,12 @@ import { getTasksQueryParamsSchema } from "../../schemas/tasks"
 export default defineEventHandler(async (event) => {
   const query = await getValidatedQuery(event, getTasksQueryParamsSchema.parse)
 
-  const { tasks, count } = await tasksRepository.getAll(
-    query.search ? query.search : null,
-    query.limit,
-    query.offset
-  )
+  const { tasks, count } = await tasksRepository.getAll({
+    name: query.search ? query.search : null,
+    limit: query.limit,
+    offset: query.offset,
+    state: query.state,
+  })
 
   return { tasks, count }
 })

src/server/api/tasks/index.get.ts

@@ -14,9 +14,9 @@ export const tasksTable = sqliteTable(
     finishedAt: int("finished_at", { mode: "timestamp" }),
     args: text({ mode: "json" }).$type<Array<any>>(),
     kwargs: text({ mode: "json" }).$type<Record<string, any>>(),
-    returnValue: text("return_value", { mode: "json" }).$type<
-      Record<string, any>
-    >(),
+    returnValue: text("return_value", { mode: "json" }).$type<{
+      return_value: any
+    }>(),
   },
   (t) => ({
     idxStartedAt: index("idx_tasks__started_at").on(t.startedAt),

src/server/db/schema.ts

@@ -1,12 +1,22 @@
 import { db } from "../db"
 import { tasksTable } from "../db/schema"
 import { takeUniqueOrThrow } from "../utils"
-import { count, eq, desc, like } from "drizzle-orm"
+import { count, eq, desc, like, and } from "drizzle-orm"
 
 export type TaskState = "pending" | "success" | "failed"
 
 class TasksRepository {
-  async getAll(name: string | null, limit: number, offset: number) {
+  async getAll({
+    name,
+    state,
+    limit,
+    offset,
+  }: {
+    limit: number
+    offset: number
+    name: string | null
+    state?: "success" | "pending" | "failure"
+  }) {
     const whereCondition = name
       ? like(tasksTable.name, `%${name.toLowerCase()}%`)
       : undefined
@@ -16,13 +26,17 @@ class TasksRepository {
         count: count(),
       })
       .from(tasksTable)
-      .where(whereCondition)
+      .where(
+        and(whereCondition, state ? eq(tasksTable.state, state) : undefined)
+      )
       .then(takeUniqueOrThrow)
 
     const tasks = await db
       .select()
       .from(tasksTable)
-      .where(whereCondition)
+      .where(
+        and(whereCondition, state ? eq(tasksTable.state, state) : undefined)
+      )
       .orderBy(desc(tasksTable.startedAt))
       .limit(limit)
       .offset(offset)

src/server/repositories/tasks.ts

@@ -23,4 +23,5 @@ export const getTasksQueryParamsSchema = z.object({
   search: z.string().optional(),
   limit: z.coerce.number().gte(0),
   offset: z.coerce.number().gte(0),
+  state: z.enum(["success", "pending", "failure"]).optional(),
 })