[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",
|
"@shoelace-style/shoelace": "^2.0.0-beta.40",
|
||||||
"core-js": "^3.12.1",
|
"core-js": "^3.12.1",
|
||||||
"date-fns": "^2.21.3",
|
"date-fns": "^2.21.3",
|
||||||
|
"filesize": "^8.0.3",
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"sass": "^1.34.0",
|
"sass": "^1.34.0",
|
||||||
"sass-loader": "^10.2.0",
|
"sass-loader": "^10.2.0",
|
||||||
|
|
|
@ -21,9 +21,15 @@
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<Marquee>{{ entry.attribute }}</Marquee>
|
<Marquee
|
||||||
|
:class="{
|
||||||
|
formatted: Boolean(formatAttribute(entry.attribute)),
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ formatAttribute(entry.attribute) || entry.attribute }}
|
||||||
|
</Marquee>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td class="value">
|
||||||
<text-input
|
<text-input
|
||||||
:editable="editable"
|
:editable="editable"
|
||||||
:value="entry.value.c"
|
:value="entry.value.c"
|
||||||
|
@ -41,8 +47,17 @@
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<Marquee v-else>
|
<Marquee
|
||||||
{{ entry.value.c }}
|
v-else
|
||||||
|
:class="{
|
||||||
|
formatted: Boolean(
|
||||||
|
formatValue(entry.value.c, entry.attribute)
|
||||||
|
),
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
formatValue(entry.value.c, entry.attribute) || entry.value.c
|
||||||
|
}}
|
||||||
</Marquee>
|
</Marquee>
|
||||||
</text-input>
|
</text-input>
|
||||||
</td>
|
</td>
|
||||||
|
@ -103,6 +118,8 @@ import {
|
||||||
ref,
|
ref,
|
||||||
watchEffect,
|
watchEffect,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
|
import filesize from "filesize";
|
||||||
|
import { format, fromUnixTime } from "date-fns";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "Table",
|
name: "Table",
|
||||||
|
@ -163,6 +180,17 @@ export default defineComponent({
|
||||||
return props.attributes.slice(0, currentDisplay.value);
|
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 {
|
return {
|
||||||
editable,
|
editable,
|
||||||
addressEls,
|
addressEls,
|
||||||
|
@ -170,6 +198,8 @@ export default defineComponent({
|
||||||
limitedAttributes,
|
limitedAttributes,
|
||||||
currentDisplay,
|
currentDisplay,
|
||||||
MAX_DISPLAY,
|
MAX_DISPLAY,
|
||||||
|
formatAttribute,
|
||||||
|
formatValue,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -228,6 +269,10 @@ table {
|
||||||
&.attr-action {
|
&.attr-action {
|
||||||
max-width: 1em;
|
max-width: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.formatted {
|
||||||
|
font-family: var(--default-font);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.attr-action-col {
|
.attr-action-col {
|
||||||
|
|
|
@ -5500,6 +5500,13 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
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":
|
"fill-range@npm:^4.0.0":
|
||||||
version: 4.0.0
|
version: 4.0.0
|
||||||
resolution: "fill-range@npm:4.0.0"
|
resolution: "fill-range@npm:4.0.0"
|
||||||
|
@ -11776,6 +11783,7 @@ typescript@^4.2.4:
|
||||||
date-fns: ^2.21.3
|
date-fns: ^2.21.3
|
||||||
eslint: ^6.8.0
|
eslint: ^6.8.0
|
||||||
eslint-plugin-vue: ^7.9.0
|
eslint-plugin-vue: ^7.9.0
|
||||||
|
filesize: ^8.0.3
|
||||||
normalize.css: ^8.0.1
|
normalize.css: ^8.0.1
|
||||||
sass: ^1.34.0
|
sass: ^1.34.0
|
||||||
sass-loader: ^10.2.0
|
sass-loader: ^10.2.0
|
||||||
|
|
Loading…
Reference in a new issue