feat: filter community questions by course (#157)

* checkpoint save

* checkpoint

* feat: course dropdown

* added comments

* feat: generate db migration

* fixes

* PR Fixes

* PR Fixes

* refactoring

* show empty state

* improve styling

* fix styling issue

* PR Fixes

* PR Fixes

* PR Fixes

* dropdown for edit mode

* test db schema change on staging

* fix: change course_id to courseId

* fix theming issue

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/dashboard/src/lib/components/Org/Community/Loader.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div
-  class="h-[70px] w-full border border-gray-100 dark:bg-neutral-800 mr-4 mb-4 mt-2 rounded-md transition ease-in-out relative flex pt-3 px-3"
+  class="h-[70px] w-full border border-gray-100 dark:bg-neutral-800 mx-4 my-2 rounded-md transition ease-in-out relative flex pt-3 px-3"
 >
   <div class="w-10 flex justify-evenly flex-col px-1 mr-2 rounded-md">
     <SkeletonPlaceholder style="width: 100%; height: 40%; border-radius: 4px;" />

apps/dashboard/src/lib/components/Org/Community/index.svelte

@@ -9,20 +9,34 @@
   import { currentOrgPath, currentOrg } from '$lib/utils/store/org';
   import { supabase } from '$lib/utils/functions/supabase';
   import { calDateDiff } from '$lib/utils/functions/date';
+  import { fetchCourses } from '$lib/components/Courses/api';
+  import { profile } from '$lib/utils/store/user';
+  import { Search, Dropdown } from 'carbon-components-svelte';
 
   export let isLMS = false;
 
   let isLoading = false;
   let discussions = [];
+  let searchValue = '';
+  let allCourses: any[] = [];
+  let selectedId = '';
 
-  async function fetchCommunityQuestions(orgId?: string) {
-    if (!orgId) return;
+  async function fetchCommunityQuestions(orgId?: string, profileId?: string) {
+    if (!orgId || !profileId) return;
     isLoading = true;
+
+    const courseResult = (await fetchCourses(profileId, orgId)) || { allCourses: [] };
+    allCourses = courseResult.allCourses;
+
+    const courseIds = allCourses.map((course) => course.id);
+    const courseIdsFilter = `(${courseIds.join(',')})`;
+
     const { data, error } = await supabase
       .from('community_question')
       .select(
         `
         organization_id,
+        course_id,
         title,
         votes,
         created_at,
@@ -30,13 +44,17 @@
         comments:community_answer(count),
         author:profile(
           fullname
+        ),
+        course!inner (
+          title
         )
       `
       )
-      .eq('organization_id', orgId)
+      .filter('course_id', 'in', courseIdsFilter)
       .order('created_at', { ascending: false });
     console.log('data', data);
     console.log('error', error);
+
     isLoading = false;
 
     if (error) {
@@ -47,6 +65,8 @@
     discussions =
       data?.map((discussion) => ({
         title: discussion.title,
+        courseId: discussion.course_id,
+        courseTitle: discussion.course?.title,
         slug: discussion.slug,
         author: discussion?.author?.fullname,
         comments: discussion.comments?.[0]?.count || 0,
@@ -55,9 +75,29 @@
       })) || [];
   }
 
-  $: fetchCommunityQuestions($currentOrg.id);
+  $: fetchCommunityQuestions($currentOrg.id, $profile.id);
+  $: filteredDiscussions = discussions.filter(
+    (discussion) =>
+      discussion.title.toLowerCase().includes(searchValue.toLowerCase()) &&
+      (!selectedId || discussion.courseId === selectedId)
+  );
 </script>
 
+<div class="flex justify-between">
+  <Search
+    placeholder="Find Question"
+    bind:value={searchValue}
+    searchClass="mr-2"
+    class=" bg-gray-100 dark:bg-neutral-800"
+  />
+  <Dropdown
+    class="w-[25%]"
+    size="xl"
+    label="Select Course"
+    items={allCourses.map((course) => ({ id: course.id, text: course.title }))}
+    bind:selectedId
+  />
+</div>
 <div
   class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto border-c rounded bg-gray-100 dark:bg-neutral-800"
 >
@@ -67,11 +107,11 @@
     <CommunityLoader />
     <CommunityLoader />
   {:else}
-    {#each discussions as discussion}
-      <div class="w-full flex border-bottom-c p-5">
+    {#each filteredDiscussions as discussion}
+      <div class="w-full flex border-bottom-c p-3">
         <Vote value={discussion.votes} />
-        <div class="discussion-topic-author">
-          <h4>
+        <div class="text-sm flex flex-col gap-y-0.5">
+          <h4 class="mt-0">
             <a
               class="text-black dark:text-white"
               href="{isLMS ? '/lms' : $currentOrgPath}/community/{discussion.slug}"
@@ -82,6 +122,11 @@
           <span class="text-gray-600 dark:text-white">
             {discussion.author} asked {discussion.createdAt}
           </span>
+          <a class="m-0" href="/courses/{discussion.courseId}">
+            <span class="text-xs text-primary-200 dark:text-black text-primary-700 p-0">
+              #{discussion.courseTitle}
+            </span>
+          </a>
         </div>
         <Space />
         <div class="flex items-center">
@@ -107,11 +152,4 @@
     overflow-wrap: break-word;
     margin: 0;
   }
-
-  .discussion-topic-author {
-    margin-right: 20px;
-  }
-  .discussion-topic-author span {
-    font-size: 12px;
-  }
 </style>