feat: slight clean up

qin-guan · Jul 23, 2023 · f397631 · f397631
1 parent 4f3d5fb
commit f397631
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 27 deletions.
diff --git a/pages/s/[id]/analytics.vue b/pages/s/[id]/analytics.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import Paginator from 'primevue/paginator'
-import Dialog from 'primevue/dialog'
 import TabView from 'primevue/tabview'
 import TabPanel from 'primevue/tabpanel'
 import DataTable from 'primevue/datatable'
-import Button from 'primevue/button'
-import Textarea from 'primevue/textarea'
 import Column from 'primevue/column'
-import Chart from 'primevue/chart'
-import RadioButton from 'primevue/radiobutton'
 import Skeleton from 'primevue/skeleton'
 import type { SurveyResponseSchema } from 'shared/survey'
 
+const Paginator = defineAsyncComponent(() => import('primevue/paginator'))
+const Dialog = defineAsyncComponent(() => import('primevue/dialog'))
+const Button = defineAsyncComponent(() => import('primevue/button'))
+const Textarea = defineAsyncComponent(() => import('primevue/textarea'))
+const Chart = defineAsyncComponent(() => import('primevue/chart'))
+const RadioButton = defineAsyncComponent(() => import('primevue/radiobutton'))
+
 definePageMeta({
   middleware: ['survey-permissions'],
 })
@@ -155,19 +156,26 @@ const responsesByQn = computed(() => {
         <TabPanel header="By question">
           <Paginator v-model:first="responsePreview.qnIdx" :rows="1" :total-records="survey?.questions.length" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
-          <div>
-            <span my10>
+          <div flex>
+            <span px2 py4 text-lg font-semibold>
               {{ survey?.questions[responsePreview.qnIdx].title }}
             </span>
-            <DataTable :value="responsesByQn">
-              <Column v-if="survey?.questions[responsePreview.qnIdx].type === 'text'" field="answer" header="Answer" />
-              <Column v-else-if="survey?.questions[responsePreview.qnIdx].type === 'mcq'" header="Option">
-                <template #body="bodySlot">
-                  {{ survey?.questions[responsePreview.qnIdx].options[bodySlot.data.option] }}
-                </template>
-              </Column>
-            </DataTable>
           </div>
+
+          <DataTable :value="responsesByQn">
+            <Column header="ID" style="width: 10%">
+              <template #body="bodySlot">
+                {{ bodySlot.index + 1 }}
+              </template>
+            </Column>
+
+            <Column v-if="survey?.questions[responsePreview.qnIdx].type === 'text'" field="answer" header="Answer" />
+            <Column v-else-if="survey?.questions[responsePreview.qnIdx].type === 'mcq'" header="Option">
+              <template #body="bodySlot">
+                {{ survey?.questions[responsePreview.qnIdx].options[bodySlot.data.option] }}
+              </template>
+            </Column>
+          </DataTable>
         </TabPanel>
         <TabPanel header="Charts">
           <Skeleton v-if="chartPending" height="300px" />

diff --git a/server/trpc/routers/response/response.router.ts b/server/trpc/routers/response/response.router.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod'
 import { TRPCError } from '@trpc/server'
-import type { Prisma, Survey, User } from '@prisma/client'
+import type { Prisma, Response, Survey, User } from '@prisma/client'
 
 import { protectedProcedure, publicProcedure, router } from '~/server/trpc/trpc'
 import type { SurveyPermissionSchema } from '~/shared/survey'
@@ -95,12 +95,15 @@ export const responseRouter = router({
       })
     })
     .query(async ({ ctx, input }) => {
-      const data = await ctx.prisma.response.findMany({
+      let data = await ctx.cache.surveys.getItem<Response[]>(`${input.surveyId}-responses`)
+      data ??= await ctx.prisma.response.findMany({
         where: {
           surveyId: input.surveyId,
         },
       })
 
+      await ctx.cache.surveys.setItem(`${input.surveyId}-responses`, data)
+
       return data
     }),
 
@@ -140,15 +143,17 @@ export const responseRouter = router({
           throw new TRPCError({ code: 'UNAUTHORIZED' })
       }
 
-      await ctx.prisma.response.create({
-        data: {
-          surveyId: input.surveyId,
-          respondentId: user.id,
-          data: input.data,
-        },
-      })
-
-      await ctx.cache.surveys.removeItem(`${user.id}-submitted`)
+      await Promise.all([
+        ctx.prisma.response.create({
+          data: {
+            surveyId: input.surveyId,
+            respondentId: user.id,
+            data: input.data,
+          },
+        }),
+        ctx.cache.surveys.removeItem(`${user.id}-submitted`),
+        ctx.cache.surveys.removeItem(`${input.surveyId}-responses`),
+      ])
 
       return true
     }),