feat: implement invite, delete and share actions on course card. #513

apps/dashboard/src/lib/components/Courses/components/Card/index.svelte

@@ -3,22 +3,19 @@
     Tag,
     ImageLoader,
     SkeletonPlaceholder,
-    ContextMenu,
-    ContextMenuDivider,
-    ContextMenuOption
+    OverflowMenu,
+    OverflowMenuItem
   } from 'carbon-components-svelte';
   import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import CopyFile from 'carbon-icons-svelte/lib/CopyFile.svelte';
-  import Share from 'carbon-icons-svelte/lib/Share.svelte';
-  import UserFollow from 'carbon-icons-svelte/lib/UserFollow.svelte';
   import { t } from '$lib/utils/functions/translations';
   import { COURSE_TYPE } from '$lib/utils/types';
   import RadioButtonChecked from 'carbon-icons-svelte/lib/RadioButtonChecked.svelte';
   import GrowthIcon from 'carbon-icons-svelte/lib/Growth.svelte';
   import UserProfileIcon from 'carbon-icons-svelte/lib/UserProfile.svelte';
   import { calcCourseDiscount } from '$lib/utils/functions/course';
+  import { goto } from '$app/navigation';
 
   export let bannerImage: string | undefined;
   export let id = '';
@@ -43,8 +40,6 @@
     cost: 0
   };
 
-  let target: any;
-
   $: formatter = getCurrencyFormatter(currency);
 
   function handleCloneCourse() {
@@ -53,24 +48,15 @@
   }
 
   function handleShareCourse() {
-    // TODO: Share course functionality
-    alert('WIP: Share course');
+    goto(`/courses/${id}/settings#share`);
   }
 
   function handleInvite() {
-    // TODO: Invite functionality
-    alert('WIP: Invite people to course');
+    goto(`/courses/${id}/people?add=true`);
   }
 
   function handleDeleteCourse() {
-    // TODO: Delete course functionality
-    alert('WIP: Delete course');
-  }
-
-  function getCourseUrl() {
-    return isOnLandingPage || isExplore
-      ? `/course/${slug}`
-      : `/courses/${id}${isLMS ? '/lessons?next=true' : ''}`;
+    goto(`/courses/${id}/settings#delete`);
   }
 
   const COURSE_TAG: Record<
@@ -106,49 +92,58 @@
     pricingData.cost ?? 0,
     !!pricingData.showDiscount
   );
+
+  $: courseUrl =
+    isOnLandingPage || isExplore
+      ? `/course/${slug}`
+      : `/courses/${id}${isLMS ? '/lessons?next=true' : ''}`;
 </script>
 
-{#if !isLMS && !isOnLandingPage}
-  <ContextMenu {target}>
-    <ContextMenuOption
-      indented
-      labelText={$t('courses.course_card.context_menu.clone')}
-      icon={CopyFile}
-      on:click={handleCloneCourse}
-    />
-    <ContextMenuOption
-      indented
-      labelText={$t('courses.course_card.context_menu.share')}
-      icon={Share}
-      on:click={handleShareCourse}
-    />
-    <ContextMenuOption
-      indented
-      labelText={$t('courses.course_card.context_menu.invite')}
-      icon={UserFollow}
-      on:click={handleInvite}
-    />
-    <ContextMenuDivider />
-    <ContextMenuOption
-      kind="danger"
-      labelText={$t('courses.course_card.context_menu.delete')}
-      on:click={handleDeleteCourse}
-    />
-  </ContextMenu>
-{/if}
-
-<a
-  rel="prefetch"
-  bind:this={target}
-  href={getCourseUrl()}
-  class="text-black border border-gray dark:border-neutral-600 rounded w-full max-w-[320px] relative hover:scale-95 transition-all ease-in-out"
+<div
+  role="button"
+  tabindex="0"
+  on:click={(e) => {
+    goto(courseUrl);
+  }}
+  on:keydown={(e) => {
+    if (e.key === 'Enter') {
+      goto(courseUrl);
+    }
+  }}
+  class="border-gray group relative w-full max-w-[320px] rounded border text-black dark:border-neutral-600"
 >
   <div class="p-4">
     <div class="relative mb-5">
+      {#if !isLMS && !isOnLandingPage}
+        <OverflowMenu
+          class="absolute right-2 top-2 z-50 hidden rounded-full bg-white group-hover:flex"
+          size="sm"
+          on:click={(e) => e.stopPropagation()}
+        >
+          <OverflowMenuItem
+            text={$t('courses.course_card.context_menu.clone')}
+            on:click={handleCloneCourse}
+          />
+          <OverflowMenuItem
+            text={$t('courses.course_card.context_menu.share')}
+            on:click={handleShareCourse}
+          />
+          <OverflowMenuItem
+            text={$t('courses.course_card.context_menu.invite')}
+            on:click={handleInvite}
+          />
+          <OverflowMenuItem
+            danger
+            text={$t('courses.course_card.context_menu.delete')}
+            on:click={handleDeleteCourse}
+          />
+        </OverflowMenu>
+      {/if}
+
       <ImageLoader
         src={bannerImage}
         alt="Course Logo"
-        class="h-[200px] w-full rounded dark:border dark:border-neutral-600 relative"
+        class="relative h-[200px] w-full rounded dark:border dark:border-neutral-600"
       >
         <svelte:fragment slot="loading">
           <SkeletonPlaceholder style="width: 100%; height: 200px;" />
@@ -158,7 +153,7 @@
       {#if type}
         {@const tag = COURSE_TAG[type]}
         <span
-          class="absolute bottom-2 left-2 z-10 text-xs capitalize bg-primary-50 rounded-sm p-1 flex items-center gap-1 font-mono"
+          class="bg-primary-50 absolute bottom-2 left-2 z-10 flex items-center gap-1 rounded-sm p-1 font-mono text-xs capitalize"
         >
           <svelte:component this={tag.icon} size={16} class={tag.iconStyle} />
           {tag.label}
@@ -166,14 +161,14 @@
       {/if}
     </div>
 
-    <h3 class="text-xl dark:text-white title">{title}</h3>
-    <p class="mt-2 text-sm text-gray-500 dark:text-gray-300 description">
+    <h3 class="title text-xl dark:text-white">{title}</h3>
+    <p class="description mt-2 text-sm text-gray-500 dark:text-gray-300">
       {description}
     </p>
   </div>
 
   <div
-    class="px-4 py-2 border border-gray dark:border-neutral-600 border-b-0 border-l-0 border-r-0 flex justify-between {isLMS &&
+    class="border-gray flex justify-between border border-b-0 border-l-0 border-r-0 px-4 py-2 dark:border-neutral-600 {isLMS &&
       'items-center'}"
   >
     <div>
@@ -181,7 +176,7 @@
         {totalLessons}
         {$t('courses.course_card.lessons_number')}
       </p>
-      <p class="text-xs py-2">
+      <p class="py-2 text-xs">
         {#if isOnLandingPage}
           <span class="px-2">
             {#if !cost}
@@ -198,10 +193,10 @@
         {:else if isLMS}
           {#if !isExplore}
             <div class="flex items-center gap-2">
-              <div class=" relative bg-[#EAEAEA] w-[50px] h-1">
+              <div class=" relative h-1 w-[50px] bg-[#EAEAEA]">
                 <div
                   style="width:{progressRate}%"
-                  class={`absolute top-0 left-0 bg-primary-700 h-full`}
+                  class={`bg-primary-700 absolute left-0 top-0 h-full`}
                 />
               </div>
               <p class="text-xs text-[#656565] dark:text-white">{progressRate}%</p>
@@ -229,7 +224,7 @@
       />
     {:else if !isOnLandingPage}
       <div class="flex flex-col justify-between">
-        <p class="text-xs pl-2 dark:text-white">
+        <p class="pl-2 text-xs dark:text-white">
           {totalStudents}
           {$t('courses.course_card.students')}
         </p>
@@ -237,7 +232,7 @@
       </div>
     {/if}
   </div>
-</a>
+</div>
 
 <style>
   a,

apps/dashboard/src/lib/components/Courses/index.svelte

@@ -32,7 +32,7 @@
 
 <!-- <CopyCourseModal /> -->
 
-<div class={`w-full my-4 mx-auto`}>
+<div class="mx-auto my-4 w-full">
   {#if $courseMetaDeta.isLoading}
     <section class={`${$courseMetaDeta.isLoading || courses ? 'cards-container' : ''} `}>
       <CardLoader />
@@ -79,7 +79,7 @@
       </StructuredListBody>
     </StructuredList>
   {:else}
-    <section class={`${$courseMetaDeta.isLoading || courses ? 'cards-container' : ''} `}>
+    <section class={`relative ${$courseMetaDeta.isLoading || courses ? 'cards-container' : ''} `}>
       {#each courses as courseData}
         {#key courseData.id}
           <Card
@@ -89,7 +89,6 @@
             title={courseData.title}
             description={courseData.description}
             isPublished={courseData.is_published}
-            cost={courseData.cost}
             type={courseData.type}
             currency={courseData.currency}
             totalLessons={courseData.total_lessons}
@@ -106,8 +105,8 @@
 {#if !$courseMetaDeta.isLoading && !courses.length}
   <Box className="w-full">
     <CoursesEmptyIcon />
-    <h3 class="dark:text-white text-2xl my-5">{emptyTitle}</h3>
-    <p class="dark:text-white w-1/3 text-center">
+    <h3 class="my-5 text-2xl dark:text-white">{emptyTitle}</h3>
+    <p class="w-1/3 text-center dark:text-white">
       {emptyDescription}
     </p>
   </Box>