feat: add sorting and filtering in file list

editor/public/static/js/index.js

@@ -1,3 +1,5 @@
+let fileNodes = []
+
 function makeFilm(meta) {
     const file = document.getElementById("film-template").cloneNode(true)
     file.querySelector(".title").innerText = meta.title
@@ -47,13 +49,59 @@ function addFiles(files) {
         const meta = files[i]
         const file = makeFile(meta)
         list.appendChild(file)
+        fileNodes.push([meta, file])
     })
 }
 
+function sortFiles() {
+    const sortBy = document.getElementById("sort-by").value
+    const sortDesc = document.getElementById("sort-desc").checked
+    const filter = document.getElementById("filter").value
+
+    fileNodes.forEach(([meta, node]) => {
+        if (node.classList.contains(filter) || filter === "all") {
+            node.classList.remove("hidden")
+        } else {
+            node.classList.add("hidden")
+        }
+    })
+    
+    let changed = false
+    do {
+        changed = false
+        for (let i = 0; i < fileNodes.length - 1; i++) {
+            /** @type {[object, HTMLElement]} */
+            const pair1 = fileNodes[i]
+            /** @type {[object, HTMLElement]} */
+            const pair2 = fileNodes[i + 1]
+            const [meta1, node1] = pair1
+            const [meta2, node2] = pair2
+            
+            let swap = false
+            if (sortDesc) {
+                swap = !(meta1[sortBy] >= meta2[sortBy])
+            } else {
+                swap = !(meta2[sortBy] >= meta1[sortBy])
+            }
+            if (swap) {
+                fileNodes[i] = pair2
+                fileNodes[i + 1] = pair1
+                node2.parentElement.insertBefore(node2, node1)
+                changed = true
+            }
+        }
+    } while (changed)
+}
+
 window.addEventListener("load", () => {
     fetch("/api/files").then(res => {
         return res.json()
     }).then(files => {
         addFiles(files)
+        sortFiles()
     })
+
+    document.getElementById("sort-by").addEventListener("change", () => sortFiles())
+    document.getElementById("sort-desc").addEventListener("click", () => sortFiles())
+    document.getElementById("filter").addEventListener("change", () => sortFiles())
 })

editor/public/static/js/media_file.mjs

@@ -1,5 +0,0 @@
-export default class MediaFile {
-    constructor(data) {
-        
-    }
-}