diff --git a/ui/package.json b/ui/package.json
index cb9d2cb..b0bbdd0 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -11,6 +11,7 @@
"@shoelace-style/shoelace": "^2.0.0-beta.40",
"core-js": "^3.12.1",
"date-fns": "^2.21.3",
+ "filesize": "^8.0.3",
"normalize.css": "^8.0.1",
"sass": "^1.34.0",
"sass-loader": "^10.2.0",
diff --git a/ui/src/components/widgets/Table.vue b/ui/src/components/widgets/Table.vue
index 57f6b4f..356180f 100644
--- a/ui/src/components/widgets/Table.vue
+++ b/ui/src/components/widgets/Table.vue
@@ -21,9 +21,15 @@
/>
-
+
|
-
+ |
- |
@@ -103,6 +118,8 @@ import {
ref,
watchEffect,
} from "vue";
+import filesize from "filesize";
+import { format, fromUnixTime } from "date-fns";
export default defineComponent({
name: "Table",
@@ -163,6 +180,17 @@ export default defineComponent({
return props.attributes.slice(0, currentDisplay.value);
});
+ function formatAttribute(attribute: string) {
+ return ATTRIBUTE_LABELS[attribute];
+ }
+
+ function formatValue(value: string, attribute: string): string | undefined {
+ const handler = VALUE_FORMATTERS[attribute];
+ if (handler) {
+ return handler(value);
+ }
+ }
+
return {
editable,
addressEls,
@@ -170,6 +198,8 @@ export default defineComponent({
limitedAttributes,
currentDisplay,
MAX_DISPLAY,
+ formatAttribute,
+ formatValue,
};
},
methods: {
@@ -208,6 +238,17 @@ export default defineComponent({
},
},
});
+
+const ATTRIBUTE_LABELS: { [key: string]: string } = {
+ FILE_MIME: "MIME type",
+ FILE_MTIME: "Last modified",
+ FILE_SIZE: "File size",
+};
+
+const VALUE_FORMATTERS: { [key: string]: (val: string) => string } = {
+ FILE_MTIME: (val) => format(fromUnixTime(parseInt(val, 10)), "PPpp"),
+ FILE_SIZE: (val) => filesize(parseInt(val, 10), { base: 2 }),
+};