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

apps/dashboard/src/lib/components/Course/components/Settings/index.svelte

@@ -205,7 +205,7 @@
 <DeleteModal onDelete={handleDeleteCourse} bind:open={openDeleteModal} />
 
 <Grid class="border-c rounded border-gray-200 dark:border-neutral-600">
-  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+  <Row class="border-bottom-c flex flex-col py-7 lg:flex-row">
     <Column sm={8} md={8} lg={8}>
       <SectionTitle>{$t('course.navItem.settings.cover_image')}</SectionTitle>
       <p>
@@ -235,18 +235,18 @@
     </Column>
 
     <Column sm={8} md={8} lg={6}>
-      <div class="w-fit relative z-[20]">
+      <div class="relative z-[20] w-fit">
         <img
           style="min-width:280px; min-height:200px"
           alt="About us"
           src={$settings.logo ? $settings.logo : '/images/classroomio-course-img-template.jpg'}
-          class="mt-2 md:mt-0 w-[280px] h-[200px] rounded-md relative"
+          class="relative mt-2 h-[200px] w-[280px] rounded-md md:mt-0"
         />
       </div>
     </Column>
   </Row>
 
-  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+  <Row id="share" class="border-bottom-c flex flex-col py-7 lg:flex-row">
     <Column sm={8} md={8} lg={8}>
       <SectionTitle>{$t('course.navItem.settings.course_details')}</SectionTitle>
     </Column>
@@ -274,8 +274,8 @@
           hasUnsavedChanges = true;
         }}
       />
-      <div class="">
-        <p class="text-md flex items-center gap-2 mb-2">
+      <div id="share">
+        <p class="text-md mb-2 flex items-center gap-2">
           {$t('course.navItem.settings.link')}
           <IconButton contained={true} size="small" onClick={generateNewCourseLink}>
             <Restart size={16} />
@@ -306,7 +306,7 @@
     </Column>
   </Row> -->
 
-  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+  <Row class="border-bottom-c flex flex-col py-7 lg:flex-row">
     <Column sm={8} md={8} lg={8}>
       <SectionTitle>{$t('course.navItem.settings.order')}</SectionTitle>
       <p>{$t('course.navItem.settings.drag')}</p>
@@ -319,7 +319,7 @@
       />
     </Column>
   </Row>
-  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+  <Row class="border-bottom-c flex flex-col py-7 lg:flex-row">
     <Column sm={8} md={8} lg={8}>
       <SectionTitle>{$t('course.navItem.settings.lesson_download')}</SectionTitle>
       <p>{$t('course.navItem.settings.available')}</p>
@@ -341,7 +341,7 @@
       {/if}
     </Column>
   </Row>
-  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+  <Row class="border-bottom-c flex flex-col py-7 lg:flex-row">
     <Column sm={8} md={8} lg={8}>
       <SectionTitle>{$t('course.navItem.settings.course_download')}</SectionTitle>
       <p>{$t('course.navItem.settings.course_avail')}</p>
@@ -361,7 +361,7 @@
     </Column>
   </Row>
 
-  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+  <Row class="border-bottom-c flex flex-col py-7 lg:flex-row">
     <Column sm={8} md={8} lg={8}>
       <SectionTitle>{$t('course.navItem.settings.type')}</SectionTitle>
       <p>{$t('course.navItem.settings.course_type_desc')}</p>
@@ -386,7 +386,7 @@
     </Column>
   </Row>
 
-  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+  <Row class="border-bottom-c flex flex-col py-7 lg:flex-row">
     <Column sm={8} md={8} lg={8}>
       <SectionTitle>{$t('course.navItem.settings.allow')}</SectionTitle>
       <p>{$t('course.navItem.settings.access')}</p>
@@ -406,7 +406,7 @@
   </Row>
 
   <!-- Publish Course -->
-  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+  <Row class="border-bottom-c flex flex-col py-7 lg:flex-row">
     <Column sm={8} md={8} lg={8}>
       <SectionTitle>{$t('course.navItem.settings.publish')}</SectionTitle>
       <p>{$t('course.navItem.settings.determines')}</p>
@@ -429,7 +429,7 @@
     </Column>
   </Row>
 
-  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+  <Row id="delete" class="border-bottom-c flex flex-col py-7 lg:flex-row">
     <Column sm={8} md={8} lg={8}>
       <SectionTitle>{$t('course.navItem.settings.delete')}</SectionTitle>
       <p>{$t('course.navItem.settings.delete_text')}</p>
@@ -444,7 +444,7 @@
       />
     </Column>
   </Row>
-  <Row class="p-5 w-full flex items-center justify-end">
+  <Row class="flex w-full items-center justify-end p-5">
     <PrimaryButton
       label={$t('course.navItem.settings.save')}
       isLoading={isSaving}

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>

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

@@ -37,7 +37,7 @@
 
   let label = $t('snackbar.landing_page_settings.error.label');
 
-  const onChange = (tabValue: string) => () => (currentTab = tabValue);
+  const onChange = (tabValue: string | number) => () => (currentTab = `${tabValue}`);
 
   async function handleImageClick(img: string) {
     dispatch('change');
@@ -107,7 +107,7 @@
   maxWidth=""
   modalHeading={$t('course.navItem.landing_page.upload_widget.title')}
 >
-  <div class="w-full bg-white dark:bg-inherit p-5">
+  <div class="w-full bg-white p-5 dark:bg-inherit">
     <Tabs {tabs} {currentTab} {onChange}>
       <slot:fragment slot="content">
         <TabContent value={tabs[1].value} index={currentTab}>
@@ -126,7 +126,7 @@
               isLoading={isUploading}
               className="w-full font-semibold m-auto"
             />
-            <p class="text-center text-sm text-gray-500 my-2">
+            <p class="my-2 text-center text-sm text-gray-500">
               {$t('course.navItem.landing_page.upload_widget.width')}
             </p>
             <p class="text-center text-sm text-gray-500">
@@ -137,37 +137,37 @@
         <TabContent value={tabs[0].value} index={currentTab}>
           <!-- Your Images content here -->
           <div class="h-full overflow-y-scroll">
-            <form on:submit|preventDefault={handleSubmit} class="flex gap-2 pb-3 mt-1">
+            <form on:submit|preventDefault={handleSubmit} class="mt-1 flex gap-2 pb-3">
               <input
                 type="text"
                 bind:value={searchQuery}
                 name=""
                 id=""
-                class="rounded-lg w-[85%] ml-2 dark:text-black"
+                class="ml-2 w-[85%] rounded-lg dark:text-black"
               />
               <button
                 type="submit"
-                class="px-3 py-1 bg-white rounded-lg border-[1px] border-gray-500 text-black"
+                class="rounded-lg border-[1px] border-gray-500 bg-white px-3 py-1 text-black"
                 >{$t('course.navItem.landing_page.upload_widget.submit')}</button
               >
             </form>
             {#if unsplashImages && unsplashImages.length > 0}
               <div
-                class="flex flex-row items-center flex-wrap gap-2 px-[10px] max-h-[300px] hide-scrollbar"
+                class="hide-scrollbar flex max-h-[300px] flex-row flex-wrap items-center gap-2 px-[10px]"
               >
                 {#each unsplashImages as unsplashImages (unsplashImages.id)}
                   <div>
-                    <div class="w-[195px] h-[130px] overflow-hidden relative">
+                    <div class="relative h-[130px] w-[195px] overflow-hidden">
                       <button on:click={() => handleImageClick(unsplashImages.urls.regular)}>
                         <img
                           src={unsplashImages.urls.regular}
                           alt={unsplashImages.alt_description}
-                          class="w-full h-full object-cover rounded-md hover:opacity-80 cursor-pointer"
+                          class="h-full w-full cursor-pointer rounded-md object-cover hover:opacity-80"
                         />
                       </button>
                     </div>
                     {#if unsplashImages.user.name}
-                      <p class="text-center text-xs mt-1 text-gray-500 font-light">
+                      <p class="mt-1 text-center text-xs font-light text-gray-500">
                         By <a
                           href={`https://unsplash.com/@${unsplashImages.user.username}`}
                           target="_blank"
@@ -179,7 +179,7 @@
                 {/each}
               </div>
             {:else}
-              <p class="text-center pt-7">
+              <p class="pt-7 text-center">
                 {$t('course.navItem.landing_page.upload_widget.no_images')}
               </p>
             {/if}