CLASSROOMIO-T-167:Allow user upload image in the landing page

Merge branch 'main' into CLASSROOMIO-T-167

CLASSROOMIO-T-186:Allow user upload image in the landing page


Co-authored-by: Ifeanyi Nwosu <ifeanyi@digdippa.com>


Merge-request: CLASSROOMIO-MR-84
Merged-by: Best Admin <best@digdippa.com>

src/lib/components/CourseLandingPage/components/Editor/HeaderForm.svelte

@@ -1,16 +1,58 @@
-<script>
+<script lang="ts">
+  import { settings } from '$lib/components/Course/components/Settings/store';
   import TextArea from '$lib/components/Form/TextArea.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { updateCourse } from '$lib/utils/services/courses';
+  import { landingPage } from '../../store';
 
   export let course = {};
+  let fileInput;
+  let imageBuffer;
+  let avatar;
+
+  const uploadImage = async (image: File) => {
+    if (image) {
+      const filename = `landingpage/${Date.now()}` + image.name;
+      const { data } = await supabase.storage.from('avatars').upload(filename, image, {
+        cacheControl: '3600',
+        upsert: false
+      });
+
+      if (data) {
+        const { data: response } = await supabase.storage.from('avatars').getPublicUrl(filename);
+
+        $landingPage.imageUrl = response.publicUrl;
+        $settings.image = $landingPage.imageUrl;
+
+        await updateCourse(course.id, avatar, {
+          logo: $settings.image
+        });
+
+        course.logo = $settings.image;
+
+        $landingPage.uploadingImage = false;
+      }
+    }
+  };
+
+  const onFileSelected = () => {
+    $landingPage.uploadingImage = true;
+    const image = fileInput.files[0];
+    if (image) {
+      let reader = new FileReader();
+      reader.readAsDataURL(image);
+      reader.onload = (e) => {
+        imageBuffer = image;
+        uploadImage(image);
+      };
+    }
+  };
 </script>
 
-<TextField
+<TextField className="mt-5" labelClassName="font-bold" label="Title" bind:value={course.title} />
-  className="mt-5"
-  labelClassName="font-bold"
-  label="Title"
-  bind:value={course.title}
-/>
 
 <TextArea
   label="Description"
@@ -29,3 +71,18 @@
   type="text"
   bind:value={course.metadata.videoUrl}
 />
+<div>
+  <PrimaryButton
+    variant={VARIANTS.LINK}
+    label="Replace Banner image"
+    className="-ml-6"
+    onClick={() => fileInput.click()}
+  />
+  <input
+    type="file"
+    accept=".jpg, .jpeg, .png"
+    style="display: none;"
+    bind:this={fileInput}
+    on:change={onFileSelected}
+  />
+</div>

src/lib/components/CourseLandingPage/index.svelte

@@ -22,7 +22,8 @@
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
   import { calDateDiff } from '$lib/utils/functions/date';
-
+  import { landingPage } from './store';
+  import { Loading } from 'carbon-components-svelte';
   export let editMode = false;
   export let courseData: Course;
   const ratingsImg = [
@@ -85,6 +86,7 @@
   });
 
   $: video = get(courseData, 'metadata.videoUrl');
+  $: bannerImage = get(courseData, 'logo');
   $: lessons = get(courseData, 'lessons', []);
   $: instructor = courseData?.metadata?.instructor || {};
   $: initPlyr(player, video);
@@ -144,6 +146,18 @@
           />
         </div> -->
       {:else}
+        <div class="w-2/3 relative rounded-md overflow-hidden">
+          <img
+            style="min-width:280px; min-height:200px"
+            alt="About us"
+            src={bannerImage ? bannerImage : '/images/classroomio-course-img-template.jpg'}
+            class="mt-2 md:mt-0 rounded-md w-full relative"
+          />
+          {#if $landingPage.uploadingImage}
+            <Loading withOverlay={true} small class="absolute top-0 w-full h-full" />
+          {/if}
+        </div>
+
         <!-- <div
           class="banner-image w-2/3 h-96 relative cursor-pointer"
           on:click={playVideo}

src/lib/components/CourseLandingPage/store.js

@@ -8,40 +8,40 @@ export const landingPageStore = writable({
     duration: 'Estimated 8 weeks',
     cost: 300,
     currency: '$',
-    buttonLabel: 'Enrol',
+    buttonLabel: 'Enrol'
   },
   requirement: {
     content:
-      "You don't need any experience creating an online business or digital product. \nYou don't need an online presence, website, or following - but it will help kickstart your online business if you do.",
+      "You don't need any experience creating an online business or digital product. \nYou don't need an online presence, website, or following - but it will help kickstart your online business if you do."
   },
   description: {
     content:
-      "### Have you ever dreamed of starting your own online business?. \n\nOf course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. \n### Enroll today and get instant access to. \n\nOf course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though.\n ### You will learn many types of digital marketing:\n\n Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though.",
+      "### Have you ever dreamed of starting your own online business?. \n\nOf course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. \n### Enroll today and get instant access to. \n\nOf course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though.\n ### You will learn many types of digital marketing:\n\n Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though. Hello, thank you for reply. Of course I know that :-) I was just thinking if there is some way to do same as getStaticProps for other components too. I don't think such feature is completely necessary, though."
   },
   syllabus: {
     lessons: [
       {
-        title: 'What is FinTech?',
+        title: 'What is FinTech?'
       },
       {
-        title: 'Payments, Cryptocurrencies and Blockchain',
+        title: 'Payments, Cryptocurrencies and Blockchain'
       },
       {
-        title: 'Digital Finance and Alternative Finance',
+        title: 'Digital Finance and Alternative Finance'
       },
       {
-        title: 'FinTech Regulation and RegTech',
+        title: 'FinTech Regulation and RegTech'
       },
       {
-        title: 'Data & TechFin',
+        title: 'Data & TechFin'
-      },
+      }
-    ],
+    ]
   },
   aboutUs: {
     companyName: 'The Brad School',
     logoUrl: 'https://img-c.udemycdn.com/user/200_H/19701574_95d1_13.jpg',
     description:
-      '*Learn creative skills, from absolute beginner to advanced mastery.*\nVideo School exists to help you succeed in life. Each course has been hand-tailored to teach a specific skill from photography and video to art, design and business.\n**Whether you’re trying to learn a new skill from scratch, or want to refresh your memory on something you’ve learned in the past, you’ve come to the right place.**\nEducation makes the world a better place. Make your world better with new skills!\nOur courses can be watched 24/7 wherever you are. Most are fully downloadable so you can take them with you. You can also view them on mobile devices with the Udemy mobile app.\nAll courses have a 30-day money-back guarantee so that you can check it out, make sure it’s the right course for you, and get a refund if it’s not!',
+      '*Learn creative skills, from absolute beginner to advanced mastery.*\nVideo School exists to help you succeed in life. Each course has been hand-tailored to teach a specific skill from photography and video to art, design and business.\n**Whether you’re trying to learn a new skill from scratch, or want to refresh your memory on something you’ve learned in the past, you’ve come to the right place.**\nEducation makes the world a better place. Make your world better with new skills!\nOur courses can be watched 24/7 wherever you are. Most are fully downloadable so you can take them with you. You can also view them on mobile devices with the Udemy mobile app.\nAll courses have a 30-day money-back guarantee so that you can check it out, make sure it’s the right course for you, and get a refund if it’s not!'
   },
   reviews: [
     {
@@ -51,12 +51,16 @@ export const landingPageStore = writable({
       avatar_url: '/logo-192.png',
       rating: 1,
       created_at: new Date(),
-      description:
+      description: 'rice ventore officiis maxime laudantium recusandae sit dolor.'
-        'rice ventore officiis maxime laudantium recusandae sit dolor.',
+    }
-    },
+  ]
-  ],
 });
 
 export const reviewsModalStore = writable({
-  open: false,
+  open: false
+});
+
+export const landingPage = writable({
+  uploadingImage: false,
+  imageUrl: ''
 });