web UI rewrite, switch to ndjson.zst index format

sist2-vue/src/components/MimePicker.vue

@@ -0,0 +1,61 @@
+<template>
+  <div id="mimeTree"></div>
+</template>
+
+<script>
+import InspireTree from "inspire-tree";
+import InspireTreeDOM from "inspire-tree-dom";
+
+import "inspire-tree-dom/dist/inspire-tree-light.min.css";
+import {getSelectedTreeNodes} from "@/util";
+
+export default {
+  name: "MimePicker",
+  data() {
+    return {
+      mimeTree: null,
+    }
+  },
+  mounted() {
+    this.$store.subscribe((mutation) => {
+      if (mutation.type === "setUiMimeMap") {
+        const mimeMap = mutation.payload.slice();
+
+        this.mimeTree = new InspireTree({
+          selection: {
+            mode: 'checkbox'
+          },
+          data: mimeMap
+        });
+        new InspireTreeDOM(this.mimeTree, {
+          target: '#mimeTree'
+        });
+        this.mimeTree.on("node.state.changed", this.handleTreeClick);
+        this.mimeTree.deselect();
+
+        if (this.$store.state._onLoadSelectedMimeTypes.length > 0) {
+          this.$store.state._onLoadSelectedMimeTypes.forEach(mime => {
+            this.mimeTree.node(mime).select();
+          });
+        }
+      }
+    });
+  },
+  methods: {
+    handleTreeClick(node, e) {
+      if (e === "indeterminate" || e === "collapsed") {
+        return;
+      }
+
+      this.$store.commit("setSelectedMimeTypes", getSelectedTreeNodes(this.mimeTree));
+    },
+  }
+}
+</script>
+
+<style scoped>
+#mimeTree {
+  max-height: 350px;
+  overflow: auto;
+}
+</style>