From 0f8f1c98d890fc79a96a34b335997cb10da462c6 Mon Sep 17 00:00:00 2001
From: Tioluwani Kolawole <kolawole8tiolu@gmail.com>
Date: Wed, 20 Dec 2023 18:44:00 +0100
Subject: [PATCH] feat: add course card context menu on course page (#118)

* feat: add context menu for course card component

* chore: add functions for context menu options

* chore: replace console.log statements with alert

* chore: revert changes to package.json

* chore: function declaration cleanup

* chore: fix package.json space formatting
---
 .../Courses/components/Card/index.svelte      | 38 ++++++++++++++++++-
 .../src/lib/components/Courses/index.svelte   |  1 +
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/lib/components/Courses/components/Card/index.svelte b/apps/dashboard/src/lib/components/Courses/components/Card/index.svelte
index 44886a59..6fba2e7c 100644
--- a/apps/dashboard/src/lib/components/Courses/components/Card/index.svelte
+++ b/apps/dashboard/src/lib/components/Courses/components/Card/index.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
-  import { Tag, ImageLoader, SkeletonPlaceholder } from 'carbon-components-svelte';
+  import { Tag, ImageLoader, SkeletonPlaceholder, ContextMenu, ContextMenuDivider, ContextMenuOption, } 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";
 
   export let bannerImage: string | undefined;
   export let id = '';
@@ -17,12 +20,45 @@
   export let isOnLandingPage = false;
   export let isLMS = false;
   export let progressRate = 45;
+  export let showContextMenu = false;
+  let target: any;
 
   $: formatter = getCurrencyFormatter(currency);
+
+  function handleCloneCourse() {
+    // TODO: Clone course functionality
+    alert('WIP: Clone course');
+  }
+
+  function handleShareCourse() {
+    // TODO: Share course functionality
+    alert('WIP: Share course');
+  }
+
+  function handleInvite() {
+    // TODO: Invite functionality
+    alert('WIP: Invite people to course');
+  }
+
+  function handleDeleteCourse() {
+    // TODO: Delete course functionality
+    alert('WIP: Delete course');
+  }
 </script>
 
+{#if showContextMenu}
+  <ContextMenu {target}>
+    <ContextMenuOption indented labelText="Clone" icon={CopyFile} on:click={handleCloneCourse} />
+    <ContextMenuOption indented labelText="Share" icon={Share} on:click={handleShareCourse} />
+    <ContextMenuOption indented labelText="Invite" icon={UserFollow} on:click={handleInvite} />
+    <ContextMenuDivider />
+    <ContextMenuOption kind="danger" labelText="Delete"  on:click={handleDeleteCourse} />
+  </ContextMenu>
+{/if}
+
 <a
   rel="prefetch"
+  bind:this={target}
   href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`}
   class="text-black border border-gray rounded w-full max-w-[320px] relative hover:scale-95 transition-all ease-in-out"
 >
diff --git a/apps/dashboard/src/lib/components/Courses/index.svelte b/apps/dashboard/src/lib/components/Courses/index.svelte
index bc920ef7..b6cbc307 100644
--- a/apps/dashboard/src/lib/components/Courses/index.svelte
+++ b/apps/dashboard/src/lib/components/Courses/index.svelte
@@ -32,6 +32,7 @@
     {#each courses as courseData}
       {#key courseData.id}
         <Card
+          showContextMenu
           id={courseData.id}
           bannerImage={courseData.logo || '/images/classroomio-course-img-template.jpg'}
           title={courseData.title}