CLASSROOMIO-T-11: Refactoring

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>

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>
 

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>

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,

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: '',

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>

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 {