fix: handle dynamic poll columns (#7243)

This commit is contained in:
Nicolas Giard 2024-03-22 13:38:28 -04:00 committed by GitHub
parent 2cc0646ee2
commit c02ece3af2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 342 additions and 29 deletions

164
.pnp.cjs generated
View file

@ -49,6 +49,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["@rollup/pluginutils", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.1.0"],\
["@twuni/emojify", "npm:1.0.2"],\
["@vitejs/plugin-vue", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:4.6.2"],\
["@vue/language-plugin-pug", "npm:2.0.7"],\
["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.3"],\
["bootstrap-icons", "npm:1.11.3"],\
["browser-fs-access", "npm:0.35.0"],\
@ -2721,6 +2722,48 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
["@volar/language-core", [\
["npm:2.1.4", {\
"packageLocation": "./.yarn/cache/@volar-language-core-npm-2.1.4-18ee1a037d-7430f65143.zip/node_modules/@volar/language-core/",\
"packageDependencies": [\
["@volar/language-core", "npm:2.1.4"],\
["@volar/source-map", "npm:2.1.4"]\
],\
"linkType": "HARD"\
}]\
]],\
["@volar/language-service", [\
["npm:2.1.4", {\
"packageLocation": "./.yarn/cache/@volar-language-service-npm-2.1.4-2d34cb628f-06cdcfacf0.zip/node_modules/@volar/language-service/",\
"packageDependencies": [\
["@volar/language-service", "npm:2.1.4"],\
["@volar/language-core", "npm:2.1.4"],\
["vscode-languageserver-protocol", "npm:3.17.5"],\
["vscode-languageserver-textdocument", "npm:1.0.11"],\
["vscode-uri", "npm:3.0.8"]\
],\
"linkType": "HARD"\
}]\
]],\
["@volar/source-map", [\
["npm:2.1.4", {\
"packageLocation": "./.yarn/cache/@volar-source-map-npm-2.1.4-5963b1701f-e2f65bcfd6.zip/node_modules/@volar/source-map/",\
"packageDependencies": [\
["@volar/source-map", "npm:2.1.4"],\
["muggle-string", "npm:0.4.1"]\
],\
"linkType": "HARD"\
}]\
]],\
["@vscode/l10n", [\
["npm:0.0.18", {\
"packageLocation": "./.yarn/cache/@vscode-l10n-npm-0.0.18-8a12efe4b5-c33876cebd.zip/node_modules/@vscode/l10n/",\
"packageDependencies": [\
["@vscode/l10n", "npm:0.0.18"]\
],\
"linkType": "HARD"\
}]\
]],\
["@vue/compiler-core", [\
["npm:3.4.21", {\
"packageLocation": "./.yarn/cache/@vue-compiler-core-npm-3.4.21-ec7f24d7f5-0d6b7732bc.zip/node_modules/@vue/compiler-core/",\
@ -2791,6 +2834,17 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
["@vue/language-plugin-pug", [\
["npm:2.0.7", {\
"packageLocation": "./.yarn/cache/@vue-language-plugin-pug-npm-2.0.7-547300c7e0-11cc96eb5f.zip/node_modules/@vue/language-plugin-pug/",\
"packageDependencies": [\
["@vue/language-plugin-pug", "npm:2.0.7"],\
["@volar/source-map", "npm:2.1.4"],\
["volar-service-pug", "npm:0.0.34"]\
],\
"linkType": "HARD"\
}]\
]],\
["@vue/reactivity", [\
["npm:3.4.21", {\
"packageLocation": "./.yarn/cache/@vue-reactivity-npm-3.4.21-fd3e254d08-79c7ebe3ec.zip/node_modules/@vue/reactivity/",\
@ -7153,6 +7207,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
["muggle-string", [\
["npm:0.4.1", {\
"packageLocation": "./.yarn/cache/muggle-string-npm-0.4.1-fe3c825cc2-85fe1766d1.zip/node_modules/muggle-string/",\
"packageDependencies": [\
["muggle-string", "npm:0.4.1"]\
],\
"linkType": "HARD"\
}]\
]],\
["murmurhash-js", [\
["npm:1.0.0", {\
"packageLocation": "./.yarn/cache/murmurhash-js-npm-1.0.0-b1fa804bc0-083cea92a1.zip/node_modules/murmurhash-js/",\
@ -8269,6 +8332,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["@rollup/pluginutils", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.1.0"],\
["@twuni/emojify", "npm:1.0.2"],\
["@vitejs/plugin-vue", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:4.6.2"],\
["@vue/language-plugin-pug", "npm:2.0.7"],\
["bootstrap", "virtual:dc3fc578bfa5e06182a4d2be39ede0bc5b74940b1ffe0d70c26892ab140a4699787750fba175dc306292e80b4aa2c8c5f68c2a821e69b2c37e360c0dff36ff66#npm:5.3.3"],\
["bootstrap-icons", "npm:1.11.3"],\
["browser-fs-access", "npm:0.35.0"],\
@ -9259,6 +9323,46 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
["volar-service-html", [\
["npm:0.0.34", {\
"packageLocation": "./.yarn/cache/volar-service-html-npm-0.0.34-32b6d24136-83b50cd805.zip/node_modules/volar-service-html/",\
"packageDependencies": [\
["volar-service-html", "npm:0.0.34"]\
],\
"linkType": "SOFT"\
}],\
["virtual:6f5429e17c4ecd390af605a4e97ecc7b34f2f1374a5e30c21f0a978cbdc904738a42d0d6f5d44d2e969250218b3c205853d6afefd88b87bcda877286d12bef83#npm:0.0.34", {\
"packageLocation": "./.yarn/__virtual__/volar-service-html-virtual-5a9107a24d/0/cache/volar-service-html-npm-0.0.34-32b6d24136-83b50cd805.zip/node_modules/volar-service-html/",\
"packageDependencies": [\
["volar-service-html", "virtual:6f5429e17c4ecd390af605a4e97ecc7b34f2f1374a5e30c21f0a978cbdc904738a42d0d6f5d44d2e969250218b3c205853d6afefd88b87bcda877286d12bef83#npm:0.0.34"],\
["@types/volar__language-service", null],\
["@volar/language-service", "npm:2.1.4"],\
["vscode-html-languageservice", "npm:5.1.2"],\
["vscode-languageserver-textdocument", "npm:1.0.11"],\
["vscode-uri", "npm:3.0.8"]\
],\
"packagePeers": [\
"@types/volar__language-service",\
"@volar/language-service"\
],\
"linkType": "HARD"\
}]\
]],\
["volar-service-pug", [\
["npm:0.0.34", {\
"packageLocation": "./.yarn/cache/volar-service-pug-npm-0.0.34-6f5429e17c-4691aa1c8e.zip/node_modules/volar-service-pug/",\
"packageDependencies": [\
["volar-service-pug", "npm:0.0.34"],\
["@volar/language-service", "npm:2.1.4"],\
["pug-lexer", "npm:5.0.1"],\
["pug-parser", "npm:6.0.0"],\
["volar-service-html", "virtual:6f5429e17c4ecd390af605a4e97ecc7b34f2f1374a5e30c21f0a978cbdc904738a42d0d6f5d44d2e969250218b3c205853d6afefd88b87bcda877286d12bef83#npm:0.0.34"],\
["vscode-html-languageservice", "npm:5.1.2"],\
["vscode-languageserver-textdocument", "npm:1.0.11"]\
],\
"linkType": "HARD"\
}]\
]],\
["vooks", [\
["npm:0.2.12", {\
"packageLocation": "./.yarn/cache/vooks-npm-0.2.12-0d1a2d856b-e6841ec5b6.zip/node_modules/vooks/",\
@ -9282,6 +9386,66 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
["vscode-html-languageservice", [\
["npm:5.1.2", {\
"packageLocation": "./.yarn/cache/vscode-html-languageservice-npm-5.1.2-2ea2618bdd-3a2a5ee5ad.zip/node_modules/vscode-html-languageservice/",\
"packageDependencies": [\
["vscode-html-languageservice", "npm:5.1.2"],\
["@vscode/l10n", "npm:0.0.18"],\
["vscode-languageserver-textdocument", "npm:1.0.11"],\
["vscode-languageserver-types", "npm:3.17.5"],\
["vscode-uri", "npm:3.0.8"]\
],\
"linkType": "HARD"\
}]\
]],\
["vscode-jsonrpc", [\
["npm:8.2.0", {\
"packageLocation": "./.yarn/cache/vscode-jsonrpc-npm-8.2.0-b7d2e5b553-f302a01e59.zip/node_modules/vscode-jsonrpc/",\
"packageDependencies": [\
["vscode-jsonrpc", "npm:8.2.0"]\
],\
"linkType": "HARD"\
}]\
]],\
["vscode-languageserver-protocol", [\
["npm:3.17.5", {\
"packageLocation": "./.yarn/cache/vscode-languageserver-protocol-npm-3.17.5-2b07e16989-dfb42d276d.zip/node_modules/vscode-languageserver-protocol/",\
"packageDependencies": [\
["vscode-languageserver-protocol", "npm:3.17.5"],\
["vscode-jsonrpc", "npm:8.2.0"],\
["vscode-languageserver-types", "npm:3.17.5"]\
],\
"linkType": "HARD"\
}]\
]],\
["vscode-languageserver-textdocument", [\
["npm:1.0.11", {\
"packageLocation": "./.yarn/cache/vscode-languageserver-textdocument-npm-1.0.11-6fc94d2b7b-ea7cdc9d4f.zip/node_modules/vscode-languageserver-textdocument/",\
"packageDependencies": [\
["vscode-languageserver-textdocument", "npm:1.0.11"]\
],\
"linkType": "HARD"\
}]\
]],\
["vscode-languageserver-types", [\
["npm:3.17.5", {\
"packageLocation": "./.yarn/cache/vscode-languageserver-types-npm-3.17.5-aca3b71a5a-79b420e757.zip/node_modules/vscode-languageserver-types/",\
"packageDependencies": [\
["vscode-languageserver-types", "npm:3.17.5"]\
],\
"linkType": "HARD"\
}]\
]],\
["vscode-uri", [\
["npm:3.0.8", {\
"packageLocation": "./.yarn/cache/vscode-uri-npm-3.0.8-56f46b9d24-5142491268.zip/node_modules/vscode-uri/",\
"packageDependencies": [\
["vscode-uri", "npm:3.0.8"]\
],\
"linkType": "HARD"\
}]\
]],\
["vue", [\
["npm:3.4.21", {\
"packageLocation": "./.yarn/cache/vue-npm-3.4.21-02110aa6d9-3c477982a0.zip/node_modules/vue/",\

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -3,9 +3,11 @@
n-data-table(
v-if='state.items.length > 0'
:data='state.items'
:columns='columns'
:columns='state.columns'
striped
)
span.text-danger(v-else-if='state.errMessage')
em {{ state.errMessage }}
span.text-body-secondary(v-else)
em No polls available.
</template>
@ -13,9 +15,8 @@
<script setup>
import { onMounted, reactive } from 'vue'
import { DateTime } from 'luxon'
import {
NDataTable
} from 'naive-ui'
import { cloneDeep, startCase } from 'lodash-es'
import { NDataTable } from 'naive-ui'
// PROPS
@ -29,13 +30,15 @@ const props = defineProps({
// STATE
const state = reactive({
items: []
items: [],
colums: [],
errMessage: null
})
const columns = [
const defaultColumns = [
{
title: 'Question',
key: 'question'
key: 'text'
},
{
title: 'Start Time',
@ -44,14 +47,6 @@ const columns = [
{
title: 'End Time',
key: 'end_time'
},
{
title: 'Raise Hand',
key: 'raise_hand'
},
{
title: 'Do Not Raise Hand',
key: 'do_not_raise_hand'
}
]
@ -59,20 +54,38 @@ const columns = [
onMounted(() => {
// Get polls from embedded json tag
const polls = JSON.parse(document.getElementById(`${props.componentId}-data`).textContent || '[]')
if (polls.length > 0) {
let idx = 1
for (const poll of polls) {
state.items.push({
id: `poll-${idx}`,
question: poll.text,
start_time: DateTime.fromISO(poll.start_time).toFormat('dd LLLL yyyy \'at\' HH:mm:ss a ZZZZ'),
end_time: DateTime.fromISO(poll.end_time).toFormat('dd LLLL yyyy \'at\' HH:mm:ss a ZZZZ'),
raise_hand: poll.raise_hand,
do_not_raise_hand: poll.do_not_raise_hand
})
idx++
try {
const polls = JSON.parse(document.getElementById(`${props.componentId}-data`).textContent || '[]')
if (polls.length > 0) {
// Populate columns
state.columns = cloneDeep(defaultColumns)
for (const col in polls[0]) {
if (!['text', 'start_time', 'end_time'].includes(col)) {
state.columns.push({
title: startCase(col),
key: col,
minWidth: 100,
titleAlign: 'center',
align: 'center'
})
}
}
// Populate rows
let idx = 1
for (const poll of polls) {
state.items.push({
...poll,
id: `poll-${idx}`,
start_time: DateTime.fromISO(poll.start_time).toFormat('dd LLLL yyyy \'at\' HH:mm:ss a ZZZZ'),
end_time: DateTime.fromISO(poll.end_time).toFormat('dd LLLL yyyy \'at\' HH:mm:ss a ZZZZ')
})
idx++
}
}
} catch (err) {
console.warn(err)
state.errMessage = 'Failed to load poll results.'
}
})
</script>

View file

@ -15,7 +15,7 @@
"vueCompilerOptions": {
"target": 3,
"plugins": [
"@volar/vue-language-plugin-pug"
"@vue/language-plugin-pug"
]
}
}

View file

@ -56,6 +56,7 @@
"@parcel/transformer-sass": "2.12.0",
"@rollup/pluginutils": "5.1.0",
"@vitejs/plugin-vue": "4.6.2",
"@vue/language-plugin-pug": "2.0.7",
"browserlist": "latest",
"c8": "9.1.0",
"eslint": "8.57.0",

135
yarn.lock
View file

@ -2019,6 +2019,43 @@ __metadata:
languageName: node
linkType: hard
"@volar/language-core@npm:2.1.4":
version: 2.1.4
resolution: "@volar/language-core@npm:2.1.4"
dependencies:
"@volar/source-map": 2.1.4
checksum: 7430f651431ed00eb7489d48c0596f4653fe70da3c779acfaa5807051db4491c9e4e154e9f0de3c9d863a3b4b1194a517a75395ca9134ea2b1b8af5ff637b204
languageName: node
linkType: hard
"@volar/language-service@npm:~2.1.0":
version: 2.1.4
resolution: "@volar/language-service@npm:2.1.4"
dependencies:
"@volar/language-core": 2.1.4
vscode-languageserver-protocol: ^3.17.5
vscode-languageserver-textdocument: ^1.0.11
vscode-uri: ^3.0.8
checksum: 06cdcfacf0fab22cee652cab1ae1729628d7ebf68f5f9e791e19e3715b2a4775c0bd2ec2e7a9b0815d93f244d7a745f3ea41aa5084923b10e9258a5f54c1107b
languageName: node
linkType: hard
"@volar/source-map@npm:2.1.4, @volar/source-map@npm:~2.1.3":
version: 2.1.4
resolution: "@volar/source-map@npm:2.1.4"
dependencies:
muggle-string: ^0.4.0
checksum: e2f65bcfd667a02ee5cfe49e612b12e75c05fdaecf3b3590fdd7a0255dce7e51d09e8d4c390c2098ca7321cea219c16a8ea3f6c0f36ca9c0edff3975990b458b
languageName: node
linkType: hard
"@vscode/l10n@npm:^0.0.18":
version: 0.0.18
resolution: "@vscode/l10n@npm:0.0.18"
checksum: c33876cebdef0385359619200ecb5d7c46d7f9abffb80f9fab1f83abb5d6bfdb44cc6d792d1b1b9c736c729121274733bbdcd5d2d2eea0d157bdf662d521edef
languageName: node
linkType: hard
"@vue/compiler-core@npm:3.4.21":
version: 3.4.21
resolution: "@vue/compiler-core@npm:3.4.21"
@ -2083,6 +2120,16 @@ __metadata:
languageName: node
linkType: hard
"@vue/language-plugin-pug@npm:2.0.7":
version: 2.0.7
resolution: "@vue/language-plugin-pug@npm:2.0.7"
dependencies:
"@volar/source-map": ~2.1.3
volar-service-pug: 0.0.34
checksum: 11cc96eb5f240144e91b27fe06fcd48de4ef1e4c7fe666d1173b346ed64b7edfa922bd4eb2e512a91a0c6b907975afcaf69cfee4c91af11168590142b3aba4c3
languageName: node
linkType: hard
"@vue/reactivity@npm:3.4.21":
version: 3.4.21
resolution: "@vue/reactivity@npm:3.4.21"
@ -5968,6 +6015,13 @@ browserlist@latest:
languageName: node
linkType: hard
"muggle-string@npm:^0.4.0":
version: 0.4.1
resolution: "muggle-string@npm:0.4.1"
checksum: 85fe1766d18d43cf22b6da7d047203a65b2e2b1ccfac505b699c2a459644f95ebb3c854a96db5be559eea0e213f6ee32b986b8c2f73c48e6c89e1fd829616532
languageName: node
linkType: hard
"murmurhash-js@npm:1.0.0":
version: 1.0.0
resolution: "murmurhash-js@npm:1.0.0"
@ -6982,6 +7036,7 @@ browserlist@latest:
"@rollup/pluginutils": 5.1.0
"@twuni/emojify": 1.0.2
"@vitejs/plugin-vue": 4.6.2
"@vue/language-plugin-pug": 2.0.7
bootstrap: 5.3.3
bootstrap-icons: 1.11.3
browser-fs-access: 0.35.0
@ -7868,6 +7923,36 @@ browserlist@latest:
languageName: node
linkType: hard
"volar-service-html@npm:0.0.34":
version: 0.0.34
resolution: "volar-service-html@npm:0.0.34"
dependencies:
vscode-html-languageservice: ^5.1.0
vscode-languageserver-textdocument: ^1.0.11
vscode-uri: ^3.0.8
peerDependencies:
"@volar/language-service": ~2.1.0
peerDependenciesMeta:
"@volar/language-service":
optional: true
checksum: 83b50cd805680c77b5632e9534b23cddb85bf7e0cd425624d474981d173ddf07a66fcce6348f675c9d5c2551df9ae1e58206c2ed1c32052f8a70940fb7f5fe50
languageName: node
linkType: hard
"volar-service-pug@npm:0.0.34":
version: 0.0.34
resolution: "volar-service-pug@npm:0.0.34"
dependencies:
"@volar/language-service": ~2.1.0
pug-lexer: ^5.0.1
pug-parser: ^6.0.0
volar-service-html: 0.0.34
vscode-html-languageservice: ^5.1.0
vscode-languageserver-textdocument: ^1.0.11
checksum: 4691aa1c8ea9039e1b5ce4218445309575c2cb4bc08ad5341a8af6f0db1a60711f26cc905e124c3485cc780eb58b895332fbb6a2ccf427a9d0e08012f2c5ad4a
languageName: node
linkType: hard
"vooks@npm:^0.2.12, vooks@npm:^0.2.4":
version: 0.2.12
resolution: "vooks@npm:0.2.12"
@ -7879,6 +7964,56 @@ browserlist@latest:
languageName: node
linkType: hard
"vscode-html-languageservice@npm:^5.1.0":
version: 5.1.2
resolution: "vscode-html-languageservice@npm:5.1.2"
dependencies:
"@vscode/l10n": ^0.0.18
vscode-languageserver-textdocument: ^1.0.11
vscode-languageserver-types: ^3.17.5
vscode-uri: ^3.0.8
checksum: 3a2a5ee5ad4ea429e85f4fb8f45da5b47d50541784d703fc9ccd009f68426034a48be6c04f8c420dc7236de07df93ccc28873da3395db5f5626fe169f18f1ac6
languageName: node
linkType: hard
"vscode-jsonrpc@npm:8.2.0":
version: 8.2.0
resolution: "vscode-jsonrpc@npm:8.2.0"
checksum: f302a01e59272adc1ae6494581fa31c15499f9278df76366e3b97b2236c7c53ebfc71efbace9041cfd2caa7f91675b9e56f2407871a1b3c7f760a2e2ee61484a
languageName: node
linkType: hard
"vscode-languageserver-protocol@npm:^3.17.5":
version: 3.17.5
resolution: "vscode-languageserver-protocol@npm:3.17.5"
dependencies:
vscode-jsonrpc: 8.2.0
vscode-languageserver-types: 3.17.5
checksum: dfb42d276df5dfea728267885b99872ecff62f6c20448b8539fae71bb196b420f5351c5aca7c1047bf8fb1f89fa94a961dce2bc5bf7e726198f4be0bb86a1e71
languageName: node
linkType: hard
"vscode-languageserver-textdocument@npm:^1.0.11":
version: 1.0.11
resolution: "vscode-languageserver-textdocument@npm:1.0.11"
checksum: ea7cdc9d4ffaae5952071fa11d17d714215a76444e6936c9359f94b9ba3222a52a55edb5bd5928bd3e9712b900a9f175bb3565ec1c8923234fe3bd327584bafb
languageName: node
linkType: hard
"vscode-languageserver-types@npm:3.17.5, vscode-languageserver-types@npm:^3.17.5":
version: 3.17.5
resolution: "vscode-languageserver-types@npm:3.17.5"
checksum: 79b420e7576398d396579ca3a461c9ed70e78db4403cd28bbdf4d3ed2b66a2b4114031172e51fad49f0baa60a2180132d7cb2ea35aa3157d7af3c325528210ac
languageName: node
linkType: hard
"vscode-uri@npm:^3.0.8":
version: 3.0.8
resolution: "vscode-uri@npm:3.0.8"
checksum: 514249126850c0a41a7d8c3c2836cab35983b9dc1938b903cfa253b9e33974c1416d62a00111385adcfa2b98df456437ab704f709a2ecca76a90134ef5eb4832
languageName: node
linkType: hard
"vue-demi@npm:>=0.14.5":
version: 0.14.5
resolution: "vue-demi@npm:0.14.5"