[ui] add basic BLOB value formatting
This commit is contained in:
parent
8a52a95bcd
commit
fc07cd27c4
3 changed files with 58 additions and 4 deletions
|
@ -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",
|
||||
|
|
|
@ -21,9 +21,15 @@
|
|||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Marquee>{{ entry.attribute }}</Marquee>
|
||||
<Marquee
|
||||
:class="{
|
||||
formatted: Boolean(formatAttribute(entry.attribute)),
|
||||
}"
|
||||
>
|
||||
{{ formatAttribute(entry.attribute) || entry.attribute }}
|
||||
</Marquee>
|
||||
</td>
|
||||
<td>
|
||||
<td class="value">
|
||||
<text-input
|
||||
:editable="editable"
|
||||
:value="entry.value.c"
|
||||
|
@ -41,8 +47,17 @@
|
|||
}
|
||||
"
|
||||
/>
|
||||
<Marquee v-else>
|
||||
{{ entry.value.c }}
|
||||
<Marquee
|
||||
v-else
|
||||
:class="{
|
||||
formatted: Boolean(
|
||||
formatValue(entry.value.c, entry.attribute)
|
||||
),
|
||||
}"
|
||||
>
|
||||
{{
|
||||
formatValue(entry.value.c, entry.attribute) || entry.value.c
|
||||
}}
|
||||
</Marquee>
|
||||
</text-input>
|
||||
</td>
|
||||
|
@ -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 }),
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -228,6 +269,10 @@ table {
|
|||
&.attr-action {
|
||||
max-width: 1em;
|
||||
}
|
||||
|
||||
.formatted {
|
||||
font-family: var(--default-font);
|
||||
}
|
||||
}
|
||||
|
||||
.attr-action-col {
|
||||
|
|
|
@ -5500,6 +5500,13 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"filesize@npm:^8.0.3":
|
||||
version: 8.0.3
|
||||
resolution: "filesize@npm:8.0.3"
|
||||
checksum: be0f7402249f0df2adf57268bde15c1f54d4b35e9c5ab75921710140846a2b3670e0c3a69bda406f0a53832ff878b2d7cccc4661bb1b79d322c6395613aa51a6
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"fill-range@npm:^4.0.0":
|
||||
version: 4.0.0
|
||||
resolution: "fill-range@npm:4.0.0"
|
||||
|
@ -11776,6 +11783,7 @@ typescript@^4.2.4:
|
|||
date-fns: ^2.21.3
|
||||
eslint: ^6.8.0
|
||||
eslint-plugin-vue: ^7.9.0
|
||||
filesize: ^8.0.3
|
||||
normalize.css: ^8.0.1
|
||||
sass: ^1.34.0
|
||||
sass-loader: ^10.2.0
|
||||
|
|
Loading…
Reference in a new issue