fix: handle dynamic poll columns (#7243)

client/components/Polls.vue

@@ -3,19 +3,20 @@
   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>
 
 <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,35 +47,45 @@ const columns = [
   {
     title: 'End Time',
     key: 'end_time'
-  },
-  {
-    title: 'Raise Hand',
-    key: 'raise_hand'
-  },
-  {
-    title: 'Do Not Raise Hand',
-    key: 'do_not_raise_hand'
   }
 ]
 
 // MOUNTED
 
 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>

jsconfig.json

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

package.json

@@ -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",