Fixed details panel

fayazara · Sep 2, 2023 · aeb63ef · aeb63ef
1 parent 9c465da
commit aeb63ef
Show file tree

Hide file tree

Showing 9 changed files with 769 additions and 82 deletions.
diff --git a/components/Dashboard/Feedback/Details.vue b/components/Dashboard/Feedback/Details.vue
@@ -17,7 +17,7 @@
           Feedback Details
         </h3>
         <span class="flex-1"></span>
-        <UBadge color="primary" variant="subtle" label="Open" />
+        <UBadge color="primary" variant="subtle" :label="feedback.status" />
         <UButton
           color="gray"
           variant="soft"
@@ -31,19 +31,15 @@
           icon="i-heroicons-x-mark-20-solid"
           class="-my-1"
           size="xs"
-          @click="$emit('toggleFeedbackDetails')"
+          @click="$emit('close')"
         />
       </div>
     </template>
     <ul class="space-y-2.5">
       <li>
         <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-2.5 text-[14px]">
           <p class="text-gray-700 dark:text-gray-400">
-            Notification delay, my users expect to get a notification as soon as
-            our app is down, and it affects their business, this new update is
-            actually delaying the notifications, it used to work as expected
-            earlier, not for some reason it's just delayed sometimes by even
-            hours.
+            {{ feedback.message }}
           </p>
         </div>
       </li>
@@ -52,17 +48,22 @@
           class="bg-gray-50 dark:bg-gray-900 rounded-lg p-2.5 flex items-center gap-x-3"
         >
           <UAvatar
-            src="https://api.dicebear.com/6.x/initials/svg?seed=Emily%20Chen"
+            :src="feedback.user.avatar_url"
+            :alt="feedback.user.name"
             class="ring-2 ring-gray-200 dark:ring-white/10"
           />
           <div class="text-gray-700 dark:text-gray-400">
             <p class="text-sm font-semibold text-gray-900 dark:text-white">
-              Emily Chen
+              {{ feedback.user.name }}
             </p>
-            <p class="text-xs">emily@instatus.com</p>
+            <p class="text-xs">{{ feedback.user.email }}</p>
           </div>
           <span class="flex-1"></span>
-          <UBadge color="primary" variant="subtle" label="Prime Customer" />
+          <UBadge
+            color="primary"
+            variant="subtle"
+            :label="feedback.user.label"
+          />
         </div>
       </li>
       <li>
@@ -72,16 +73,13 @@
           <div
             class="h-10 w-10 rounded-full flex items-center justify-center bg-gray-200 dark:bg-gray-950"
           >
-            <UIcon
-              name="i-heroicons-arrow-down-on-square-20-solid"
-              class="h-6 w-6"
-            />
+            <UIcon name="i-heroicons-link-20-solid" class="h-6 w-6" />
           </div>
           <div class="text-gray-700 dark:text-gray-400">
             <p class="text-sm font-semibold text-gray-900 dark:text-white">
               Origin
             </p>
-            <p class="text-xs">app.instatus.com/settings</p>
+            <p class="text-xs">{{ feedback.origin }}</p>
           </div>
         </div>
       </li>
@@ -92,14 +90,13 @@
           <div
             class="h-10 w-10 rounded-full flex items-center justify-center bg-gray-200 dark:bg-gray-950"
           >
-            <!-- <UIcon name="i-heroicons-globe-alt"  class="h-6 w-6"/> -->
-            <span class="text-2xl">🇮🇳</span>
+            <span class="text-2xl">🇳🇱</span>
           </div>
           <div class="text-gray-700 dark:text-gray-400">
             <p class="text-sm font-semibold text-gray-900 dark:text-white">
               Country
             </p>
-            <p class="text-xs">India</p>
+            <p class="text-xs">Netherlands</p>
           </div>
         </div>
       </li>
@@ -116,7 +113,10 @@
             <p class="text-sm font-semibold text-gray-900 dark:text-white">
               Browser
             </p>
-            <p class="text-xs">Chrome v108.9</p>
+            <p class="text-xs">
+              {{ feedback.device_details.browser }} -
+              {{ feedback.device_details.browser_version }}
+            </p>
           </div>
         </div>
       </li>
@@ -136,7 +136,7 @@
             <p class="text-sm font-semibold text-gray-900 dark:text-white">
               Device
             </p>
-            <p class="text-xs">Macbook Pro</p>
+            <p class="text-xs">{{ feedback.device_details.name }}</p>
           </div>
         </div>
       </li>
@@ -153,7 +153,9 @@
             <p class="text-sm font-semibold text-gray-900 dark:text-white">
               Screen Resolution
             </p>
-            <p class="text-xs">1920x1080</p>
+            <p class="text-xs">
+              {{ feedback.device_details.screen_resolution }}
+            </p>
           </div>
         </div>
       </li>
@@ -170,8 +172,7 @@
       <li>
         <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-2.5 text-[14px]">
           <p class="text-gray-700 dark:text-gray-400">
-            This is a known bug and Ali is already working on it. Emily was
-            informed about the same.
+            {{ feedback.internal_notes }}
           </p>
         </div>
       </li>
@@ -185,44 +186,12 @@
           color="gray"
         />
       </div>
-      <li>
-        <div
-          class="bg-gray-50 dark:bg-gray-900 rounded-lg p-2.5 flex items-center justify-between text-sm"
-        >
-          <p>Subscription Plan</p>
-          <p>Startup ($240/mo)</p>
-        </div>
-      </li>
-      <li>
-        <div
-          class="bg-gray-50 dark:bg-gray-900 rounded-lg p-2.5 flex items-center justify-between text-sm"
-        >
-          <p>Twitter Handle</p>
-          <p>@instatus</p>
-        </div>
-      </li>
-      <li>
-        <div
-          class="bg-gray-50 dark:bg-gray-900 rounded-lg p-2.5 flex items-center justify-between text-sm"
-        >
-          <p>Company</p>
-          <p>Instatus</p>
-        </div>
-      </li>
-      <li>
-        <div
-          class="bg-gray-50 dark:bg-gray-900 rounded-lg p-2.5 flex items-center justify-between text-sm"
-        >
-          <p>Company Size</p>
-          <p>1-10</p>
-        </div>
-      </li>
-      <li>
+      <li v-for="(attribute, i) in feedback.custom_attributes" :key="i">
         <div
           class="bg-gray-50 dark:bg-gray-900 rounded-lg p-2.5 flex items-center justify-between text-sm"
         >
-          <p>Industry</p>
-          <p>Software</p>
+          <p>{{ attribute.key }}</p>
+          <p>{{ attribute.value }}</p>
         </div>
       </li>
     </ul>
@@ -231,4 +200,10 @@
 
 <script lang="ts" setup>
 defineEmits(["toggleFeedbackDetails"]);
+defineProps({
+  feedback: {
+    type: Object,
+    required: true,
+  },
+});
 </script>
diff --git a/pages/dashboard/index/[projectId]/index/index.vue b/pages/dashboard/index/[projectId]/index/index.vue
@@ -10,12 +10,12 @@
         Latest activity
       </h2>
       <div class="pt-4">
-        <ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">
+        <div role="list" class="divide-y divide-gray-200 dark:divide-white/10">
           <li
             v-for="feedback in project.feedbacks"
             :key="feedback.id"
             class="relative grid grid-cols-8 gap-6 px-4 py-5 hover:bg-gray-100 dark:hover:bg-gray-900 sm:px-6 lg:px-8"
-            @click="toggleFeedbackDetails"
+            @click="showFeedbackDetails(feedback)"
           >
             <div class="min-w-0 flex-grow col-span-6">
               <p class="truncate font-mono text-sm leading-6">
@@ -39,11 +39,11 @@
               {{ timeAgo(feedback.createdAt) }}
             </div>
           </li>
-        </ul>
-        <!-- <UButton @click="isOpen = true">Open</UButton> -->
+        </div>
         <USlideover v-model="isOpen" :ui="feedbackStylesBase">
           <DashboardFeedbackDetails
-            @toggleFeedbackDetails="toggleFeedbackDetails"
+            @close="isOpen = false"
+            :feedback="selectedFeedback"
           />
         </USlideover>
       </div>
@@ -56,19 +56,20 @@ import { formatTimeAgo } from "@vueuse/core";
 const route = useRoute();
 const { projectId } = route.params;
 const { data: project } = await useFetch(`/api/projects/${projectId}/overview`);
+
+const isOpen = ref(false);
+const timeAgo = (date) => formatTimeAgo(new Date(date));
 const feedbackStylesBase = {
   base: "relative flex-1 flex flex-col w-full focus:outline-none m-2 rounded-xl",
 };
-const isOpen = ref(false);
-const toggleFeedbackDetails = () => (isOpen.value = !isOpen.value);
-const timeAgo = (date) => formatTimeAgo(new Date(date));
+const selectedFeedback = ref(null);
 
 const statuses = {
   Idea: {
     class: "text-sky-400 bg-sky-400/10",
     label: "Idea",
   },
-  Issue: {
+  Bug: {
     class: "text-rose-400 bg-rose-400/10",
     label: "Issue",
   },
@@ -77,4 +78,9 @@ const statuses = {
     label: "Other",
   },
 };
+
+const showFeedbackDetails = (feedback) => {
+  selectedFeedback.value = feedback;
+  isOpen.value = true;
+};
 </script>
diff --git a/server/api/projects/[id]/overview.ts b/server/api/projects/[id]/overview.ts
@@ -34,16 +34,7 @@ export default eventHandler(async (event) => {
   }
 
   const feedbacks: Feedback[] = await getFeedbacks(
-    {
-      id: tables.feedbacks.id,
-      userData: tables.feedbacks.user,
-      category: tables.feedbacks.category,
-      projectId: tables.feedbacks.projectId,
-      message: tables.feedbacks.message,
-      status: tables.feedbacks.status,
-      createdAt: tables.feedbacks.createdAt,
-      updatedAt: tables.feedbacks.updatedAt,
-    },
+    "",
     filterBy,
     desc(tables.feedbacks.createdAt),
     0,

diff --git a/server/db/migrations/0001_rare_black_knight.sql b/server/db/migrations/0001_rare_black_knight.sql
@@ -0,0 +1,9 @@
+/*
+ SQLite does not support "Changing existing column type" out of the box, we do not generate automatic migration for that, so it has to be done manually
+ Please refer to: https://www.techonthenet.com/sqlite/tables/alter_table.php
+                  https://www.sqlite.org/lang_altertable.html
+                  https://stackoverflow.com/questions/2083543/modify-a-columns-type-in-sqlite3
+
+ Due to that we don't generate migration automatically and it has to be done manually
+*/--> statement-breakpoint
+ALTER TABLE feedbacks ADD `internal_notes` text;
diff --git a/server/db/migrations/0002_clumsy_strong_guy.sql b/server/db/migrations/0002_clumsy_strong_guy.sql
@@ -0,0 +1,9 @@
+ALTER TABLE `feedbacks` RENAME COLUMN `custom_attributes` TO `custom_attributes  `;--> statement-breakpoint
+/*
+ SQLite does not support "Changing existing column type" out of the box, we do not generate automatic migration for that, so it has to be done manually
+ Please refer to: https://www.techonthenet.com/sqlite/tables/alter_table.php
+                  https://www.sqlite.org/lang_altertable.html
+                  https://stackoverflow.com/questions/2083543/modify-a-columns-type-in-sqlite3
+
+ Due to that we don't generate migration automatically and it has to be done manually
+*/