Add Task Sorting and Pagination

constants/constants.go

@@ -20,6 +20,11 @@ const FFMPEG_COMMANDS_TEMPLATE_NAME = "ffmpeg_commands.tmpl"
 
 const FORM_FILE_KEY = "file"
 
+const SORT_ORDER_BY_PARAM = "order_by"
+const SORT_ORDER_ASC_PARAM = "order_asc"
+const QUERY_LIMIT_PARAM = "limit"
+const QUERY_PAGE_PARAM = "page"
+
 const (
 	TASK_TYPE_HEALTHCHECK = iota
 	TASK_TYPE_TRANSCODE

server/task.go

@@ -7,6 +7,7 @@ import (
 	"fmt"
 	"log/slog"
 	"net/http"
+	"slices"
 	"strconv"
 	"time"
 
@@ -20,6 +21,11 @@ type TasksData struct {
 	FfmpegCommands []FfmpegCommand
 	Tasks          []TaskDisplay
 	Stats          TaskStats
+	OrderBy        string
+	OrderAsc       bool
+	Limit          uint
+	Page           uint
+	Count          uint
 }
 
 type TaskStats struct {
@@ -56,6 +62,8 @@ type TaskDB struct {
 	UpdatedAt     time.Time            `db:"updated_at"`
 }
 
+var taskColumns = []string{"id", "library", "worker", "type", "ffmpeg_command", "status", "file", "updated_at"}
+
 func handleTasks(w http.ResponseWriter, r *http.Request) {
 	if r.Method == "POST" {
 		err := createTask(r.Context(), r)
@@ -114,7 +122,52 @@ func handleTasks(w http.ResponseWriter, r *http.Request) {
 	}
 	data.FfmpegCommands = ffmpegCommands
 
-	rows, err = db.Query(r.Context(), "SELECT t.id AS id, l.id AS library, t.worker_id AS worker, t.type AS type, fc.name AS ffmpeg_command, t.status AS status, f.path AS file, t.updated_at AS updated_at FROM tasks t INNER JOIN files f ON f.id = t.file_id INNER JOIN libraries l ON l.id = f.library_id INNER JOIN ffmpeg_commands fc ON fc.id = t.ffmpeg_command_id ORDER BY CASE t.type WHEN 3 THEN -1 ELSE t.type END, t.id")
+	query := r.URL.Query()
+	data.OrderBy = "updated_at"
+	if query.Has(constants.SORT_ORDER_BY_PARAM) {
+		if slices.Contains(taskColumns, query.Get(constants.SORT_ORDER_BY_PARAM)) {
+			data.OrderBy = query.Get(constants.SORT_ORDER_BY_PARAM)
+		} else {
+			http.Error(w, "Error Unknown Column in order_by: "+query.Get(constants.SORT_ORDER_BY_PARAM), http.StatusBadRequest)
+			return
+		}
+	}
+
+	orderDir := "DESC"
+	if query.Has(constants.SORT_ORDER_ASC_PARAM) {
+		orderDir = "ASC"
+		data.OrderAsc = true
+	}
+
+	data.Limit = 100
+	if query.Has(constants.QUERY_LIMIT_PARAM) {
+		limit, err := strconv.Atoi(query.Get(constants.QUERY_LIMIT_PARAM))
+		if err != nil {
+			http.Error(w, "Error Parsing query limit: "+query.Get(constants.QUERY_LIMIT_PARAM), http.StatusBadRequest)
+			return
+		}
+		if limit < 0 {
+			http.Error(w, "Error query limit smaller than 0: "+query.Get(constants.QUERY_LIMIT_PARAM), http.StatusBadRequest)
+			return
+		}
+		data.Limit = uint(limit)
+	}
+
+	data.Page = 0
+	if query.Has(constants.QUERY_PAGE_PARAM) {
+		page, err := strconv.Atoi(query.Get(constants.QUERY_PAGE_PARAM))
+		if err != nil {
+			http.Error(w, "Error Parsing query page: "+query.Get(constants.QUERY_PAGE_PARAM), http.StatusBadRequest)
+			return
+		}
+		if page < 0 {
+			http.Error(w, "Error query limit smaller than 0: "+query.Get(constants.QUERY_PAGE_PARAM), http.StatusBadRequest)
+			return
+		}
+		data.Page = uint(page)
+	}
+
+	rows, err = db.Query(r.Context(), "SELECT t.id AS id, l.id AS library, t.worker_id AS worker, t.type AS type, fc.name AS ffmpeg_command, t.status AS status, f.path AS file, t.updated_at AS updated_at FROM tasks t INNER JOIN files f ON f.id = t.file_id INNER JOIN libraries l ON l.id = f.library_id INNER JOIN ffmpeg_commands fc ON fc.id = t.ffmpeg_command_id "+fmt.Sprintf("ORDER BY %v %v LIMIT %d OFFSET %d", data.OrderBy, orderDir, data.Limit, data.Page*data.Limit))
 	if err != nil {
 		slog.ErrorContext(r.Context(), "Query Tasks", "err", err)
 		http.Error(w, "Error Query Tasks: "+err.Error(), http.StatusInternalServerError)
@@ -138,6 +191,7 @@ func handleTasks(w http.ResponseWriter, r *http.Request) {
 			UpdatedAt:     tasks[i].UpdatedAt.Format(time.DateTime),
 		})
 	}
+	data.Count = uint(len(tasks))
 
 	buf := bytes.Buffer{}
 	err = templates.ExecuteTemplate(&buf, constants.TASKS_TEMPLATE_NAME, data)

static/js/table_sort.js

@@ -0,0 +1,37 @@
+const SORT_ORDER_BY_PARAM = "order_by"
+const SORT_ORDER_ASC_PARAM = "order_asc"
+const SORT_PAGE_PARAM = "page"
+const SORT_LIMIT_PARAM = "limit"
+
+function setTableSort(field) {
+    const urlParams = new URLSearchParams(window.location.search);
+
+    if (urlParams.get(SORT_ORDER_BY_PARAM) == field) {
+        if (urlParams.has(SORT_ORDER_ASC_PARAM)) {
+            urlParams.delete(SORT_ORDER_ASC_PARAM);
+        } else {
+            urlParams.set(SORT_ORDER_ASC_PARAM, true);
+        }
+    } else {
+        urlParams.set(SORT_ORDER_BY_PARAM, field);
+        urlParams.delete(SORT_ORDER_ASC_PARAM);
+    }
+    //Reset Pagination
+    urlParams.delete(SORT_PAGE_PARAM);
+    window.location.search = urlParams;
+}
+
+function setLimit(number) {
+    const urlParams = new URLSearchParams(window.location.search);
+    urlParams.set(SORT_LIMIT_PARAM, number);
+
+    //Reset Pagination
+    urlParams.delete(SORT_PAGE_PARAM);
+    window.location.search = urlParams;
+}
+
+function setPage(number) {
+    const urlParams = new URLSearchParams(window.location.search);
+    urlParams.set(SORT_PAGE_PARAM, number);
+    window.location.search = urlParams;
+}

tmpl/tasks.tmpl

@@ -1,4 +1,5 @@
 {{template "head"}}
+<script src="/static/js/table_sort.js"></script>
 <h2>New Tasks</h2>
 <form method="POST">
     <label for="library">Library:</label>
@@ -42,16 +43,25 @@ Total: {{.Stats.TotalCount}}
 
 
 <h2>Tasks</h2>
+<label for="limit">Limit:</label>
+<select id="limit" name="limit" onchange="setLimit(this.value)">
+    <option selected value="{{.Limit}}">{{.Limit}}</option>
+    {{if ne .Limit 100 }}<option value="100">100</option>{{end}}
+    {{if ne .Limit 500 }}<option value="500">500</option>{{end}}
+    {{if ne .Limit 1000 }}<option value="1000">1000</option>{{end}}
+    {{if ne .Limit 10000 }}<option value="10000">10000</option>{{end}}
+</select>
+    
 <table>
     <tr>
-        <th>ID</th>
+        <th onclick="setTableSort('id')">ID</th>
-        <th>Library</th>
+        <th onclick="setTableSort('library')">Library</th>
-        <th>Worker</th>
+        <th onclick="setTableSort('worker')">Worker</th>
-        <th>Type</th>
+        <th onclick="setTableSort('type')">Type</th>
-        <th>FFmpeg Command</th>
+        <th onclick="setTableSort('ffmpeg_command')">FFmpeg Command</th>
-        <th>Status</th>
+        <th onclick="setTableSort('status')">Status</th>
-        <th>File</th>
+        <th onclick="setTableSort('file')">File</th>
-        <th>Updated At</th>
+        <th onclick="setTableSort('updated_at')">Updated At</th>
     </tr>
     {{range $t := .Tasks}}
     <tr onclick="window.location='/tasks/{{ $t.ID }}';">
@@ -82,4 +92,8 @@ Total: {{.Stats.TotalCount}}
     </tr>
     {{end}}
 </table>
+{{if ne .Page 0 }}<button type="button" onclick="setPage(0)">First Page</button>{{end}}
+{{if ne .Page 0 }}<button type="button" onclick="setPage({{.Page}} -1)">Previous Page</button>{{end}}
+Page {{.Page}}
+{{if ne .Count 0}}<button type="button" onclick="setPage({{.Page}} +1)">Next Page</button>{{end}}
 {{template "tail"}}