From 6efb82cd1088bc01a29ec80964ff1277bba2cded Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 26 Jul 2023 20:48:00 +0100
Subject: [PATCH] CLASSROOMIO-T-11: Refactoring

---
 .../components/Ceritficate/Design.svelte      | 33 +++++++++++++------
 .../Ceritficate/certificates/Plain.svelte     |  8 ++---
 .../certificates/Professional.svelte          | 10 +++---
 .../Course/components/Ceritficate/store.js    |  6 ----
 src/components/Course/store.ts                |  1 +
 src/routes/courses/[id]/certificates.svelte   | 22 +++++++------
 src/utils/types/index.ts                      |  1 +
 7 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/src/components/Course/components/Ceritficate/Design.svelte b/src/components/Course/components/Ceritficate/Design.svelte
index 8d2cbfb8..ae8e2147 100644
--- a/src/components/Course/components/Ceritficate/Design.svelte
+++ b/src/components/Course/components/Ceritficate/Design.svelte
@@ -6,8 +6,8 @@
   } from 'carbon-components-svelte';
   import UploadImage from './Upload.svelte';
   import PrimaryButton from '../../../PrimaryButton/index.svelte';
+  import { course } from '../../../Course/store';
   import TextArea from '../../../Form/TextArea.svelte';
-  import { certificateInfo } from './store';
   import Professional from './certificates/Professional.svelte';
   import Plain from './certificates/Plain.svelte';
 
@@ -20,9 +20,22 @@
   ];
 
   let Selectedtheme = themes[0];
-  const saveCertificate = () => {};
-  const onToggle = (e) => {
-    console.log(e);
+  let isSaving = false;
+
+  const saveCertificate = () => {
+    // set isSaving to true
+    // Validation - make sure description isn't empty
+    // Upload the brand logo to give you a URL
+    // Update organisation logo (like in `src/components/Org/Settings/OrgSettings.svelte` line 25-51)
+    //    - Note from the file above both logo and name is updated, in this case we only want to update logo
+    /**
+     * Update only course description (like in src/components/Course/components/Settings/index.svelte)
+     * 
+     * await updateCourse($course.id, undefined, {
+        description: $course.description,
+      });
+     * */
+    // set isSaving to false
   };
 </script>
 
@@ -59,15 +72,14 @@
             rows={6}
             placeholder="a little description about the course"
             bgColor="bg-gray-100"
-            bind:value={$certificateInfo.Desc}
-            onChange={$certificateInfo.Desc}
+            bind:value={$course.description}
           />
         </span>
 
         <Toggle
-          labelText="Add date of completion"
-          on:toggle={(e) => onToggle(e)}
-          class="my-2"
+          labelText="Automatically send certificates on completion"
+          bind:toggled={$course.auto_send_certificate}
+          class="my-4"
           size="sm"
         >
           <span slot="labelA" style="color: #161616">Automatic</span>
@@ -94,7 +106,8 @@
     <PrimaryButton
       label="Save Changes"
       className="rounded-md"
-      onClick={() => saveCertificate()}
+      onClick={saveCertificate}
+      isLoading={isSaving}
     />
   </div>
 </main>
diff --git a/src/components/Course/components/Ceritficate/certificates/Plain.svelte b/src/components/Course/components/Ceritficate/certificates/Plain.svelte
index 0092c4b1..2cbf846e 100644
--- a/src/components/Course/components/Ceritficate/certificates/Plain.svelte
+++ b/src/components/Course/components/Ceritficate/certificates/Plain.svelte
@@ -1,7 +1,7 @@
 <script>
   import TextField from '../../../../Form/TextField.svelte';
   import TextArea from '../../../../Form/TextArea.svelte';
-  import { certificateInfo } from '../store';
+  import { course } from '../../../../Course/store';
 
   let borderwidth = 'border-4';
   let bordercolor = 'border-pink-700';
@@ -22,8 +22,8 @@
     </p>
     <div class="border-b border-gray-500 mb-4">
       <p class="text-xs text-black font-medium">This is to certify that</p>
+      <!-- TODO: Nothing in this file should be editable -->
       <TextField
-        bind:value={$certificateInfo.Name}
         inputClassName="text-center placeholder:text-black"
         placeholder="Name of student"
         bgColor="bg-transparent"
@@ -34,7 +34,7 @@
         has successfully completed a courses in
       </p>
       <TextArea
-        bind:value={$certificateInfo.Title}
+        bind:value={$course.title}
         inputClassName=""
         placeholder="Name of course"
         bgColor="clamp bg-transparent text-base font-semibold text-pink-700 text-center placeholder:text-black placeholder:text-base placeholder:font-semibold uppercase resize-none"
@@ -42,7 +42,7 @@
         maxRows="2"
       />
     </div>
-    <p class="desc text-center">{$certificateInfo.Desc}</p>
+    <p class="desc text-center">{$course.description}</p>
   </div>
 </div>
 
diff --git a/src/components/Course/components/Ceritficate/certificates/Professional.svelte b/src/components/Course/components/Ceritficate/certificates/Professional.svelte
index ae75d2ef..7041c132 100644
--- a/src/components/Course/components/Ceritficate/certificates/Professional.svelte
+++ b/src/components/Course/components/Ceritficate/certificates/Professional.svelte
@@ -1,7 +1,7 @@
 <script>
   import TextField from '../../../../Form/TextField.svelte';
   import TextArea from '../../../../Form/TextArea.svelte';
-  import { certificateInfo } from '../store';
+  import { course } from '../../../../Course/store';
 
   let borderwidth = 'border-l-8';
   let bordercolor = 'border-blue-800';
@@ -18,8 +18,8 @@
       </p>
       <div class="border-b border-gray-500 mb-4">
         <p class="text-xs text-black font-medium">This is to certify that</p>
+        <!-- TODO: Nothing in this file should be editable -->
         <TextField
-          bind:value={$certificateInfo.Name}
           inputClassName="text-center placeholder:text-black"
           placeholder="Name of student"
           bgColor="bg-transparent"
@@ -30,7 +30,7 @@
           has successfully completed introductory courses in
         </p>
         <TextArea
-          bind:value={$certificateInfo.Title}
+          bind:value={$course.title}
           inputClassName=""
           placeholder="Name of course"
           bgColor="clamp bg-transparent font-semibold text-blue-800 text-center placeholder:text-black placeholder:text-base placeholder:font-semibold uppercase resize-none border-none"
@@ -38,7 +38,9 @@
           maxRows="2"
         />
       </div>
-      <p class="desc mb-2 text-justify">{$certificateInfo.Desc}</p>
+      <p class="desc mb-2 text-justify">
+        {$course.description}
+      </p>
       <div>
         <img src={logo} alt="logo" class="my-2" />
       </div>
diff --git a/src/components/Course/components/Ceritficate/store.js b/src/components/Course/components/Ceritficate/store.js
index ebf95c95..91a32632 100644
--- a/src/components/Course/components/Ceritficate/store.js
+++ b/src/components/Course/components/Ceritficate/store.js
@@ -12,12 +12,6 @@ export const issueCertificateModal = writable({
   message: '',
 });
 
-export const certificateInfo = writable({
-  Name: 'Name of student',
-  Title: 'Desiging functional components',
-  Desc: '(Introduction to Digital Devices, The Internet Mobile Applications, Introduction to Social Media, Using social media for business, Digital Content Creation and Distribution,  Using mobile money in business, Digital financial management,Digital Empowerment,Digital Safety)',
-});
-
 export const resetForm = () =>
   issueCertificateModal.update(() => ({
     open: false,
diff --git a/src/components/Course/store.ts b/src/components/Course/store.ts
index 580cc315..0bbd11f6 100644
--- a/src/components/Course/store.ts
+++ b/src/components/Course/store.ts
@@ -10,6 +10,7 @@ export const course: Writable<Course> = writable({
   description: '',
   cost: 0,
   currency: '',
+  auto_send_certificate: false,
   metadata: {
     requirements: '',
     description: '',
diff --git a/src/routes/courses/[id]/certificates.svelte b/src/routes/courses/[id]/certificates.svelte
index d85081a8..2433c73b 100644
--- a/src/routes/courses/[id]/certificates.svelte
+++ b/src/routes/courses/[id]/certificates.svelte
@@ -1,7 +1,7 @@
 <script context="module">
   import { fetchCourse } from '../../../utils/services/courses';
 
-  export async function preload({ params }) {
+  export async function preload({ params = { id: '' } }) {
     return { courseId: params.id };
   }
 </script>
@@ -11,20 +11,22 @@
   import CourseContainer from '../../../components/CourseContainer/index.svelte';
 
   import PageNav from '../../../components/PageNav/index.svelte';
-  import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
+  // import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
   import PageBody from '../../../components/PageBody/index.svelte';
   import RoleBasedSecurity from '../../../components/RoleBasedSecurity/index.svelte';
-  import { setCourse, course, group } from '../../../components/Course/store';
+  import { setCourse, course } from '../../../components/Course/store';
   import IssueCertificateModal from '../../../components/Course/components/Ceritficate/IssueCertificateModal.svelte';
   // import DeleteConfirmation from '../../../components/Course/components/People/DeleteConfirmation.svelte';
   import Design from '../../../components/Course/components/Ceritficate/Design.svelte';
   import Reports from '../../../components/Course/components/Ceritficate/Reports.svelte';
 
-  import { issueCertificateModal } from '../../../components/Course/components/Ceritficate/store';
-  import { Tabs, Tab, TabContent } from 'carbon-components-svelte';
+  // import { issueCertificateModal } from '../../../components/Course/components/Ceritficate/store';
+  import { Tabs, Tab } from 'carbon-components-svelte';
+  import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
 
   export let courseId: string = '';
   let isStudent = false;
+
   onMount(async () => {
     if ($course.id) return;
     const { data } = await fetchCourse(courseId);
@@ -33,18 +35,21 @@
 </script>
 
 <IssueCertificateModal />
+
 <CourseContainer bind:isStudent>
   <PageNav title="Certificates" disableSticky={true}>
     <slot:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
-        <PrimaryButton
+        <!-- Hide Functionality For V1 -->
+        <!-- <PrimaryButton
           className="mr-2 rounded-md text-sm font-medium"
           label="Issue Cert"
           onClick={() => ($issueCertificateModal.open = true)}
-        />
+        /> -->
       </RoleBasedSecurity>
     </slot:fragment>
   </PageNav>
+
   <PageBody className="w-full mx-0" padding="px-0">
     <Tabs autoWidth class="border-b border-gray-200">
       <Tab label="Design" />
@@ -61,6 +66,3 @@
     </Tabs>
   </PageBody>
 </CourseContainer>
-
-<style>
-</style>
diff --git a/src/utils/types/index.ts b/src/utils/types/index.ts
index d1e10b0c..84c0731b 100644
--- a/src/utils/types/index.ts
+++ b/src/utils/types/index.ts
@@ -96,6 +96,7 @@ export interface Course {
   currency?: string;
   group?: Group;
   organization?: Organization;
+  auto_send_certificate?: boolean;
 }
 
 export interface Groupmember {