CLASSROOMIO-T-11: More refactoring

src/components/Course/components/Ceritficate/Design.svelte

@@ -6,34 +6,28 @@
   } from 'carbon-components-svelte';
   import { goto } from '@sapper/app';
   import PrimaryButton from '../../../PrimaryButton/index.svelte';
-  import { VARIANTS } from '../../../PrimaryButton/constants';
   import TextArea from '../../../Form/TextArea.svelte';
   import Professional from './certificates/Professional.svelte';
   import Plain from './certificates/Plain.svelte';
   import { course } from '../../store';
   import { currentOrg } from '../../../../utils/store/org';
 
-  const professional = './professional.svg';
+  const studentNamePlaceholder = 'Name of student';
-  const plain = './plain.svg';
-  const student = 'Name of student';
 
-  const themes = [
+  const themes = ['professional', 'plain'];
-    { label: 'professional', src: professional },
-    { label: 'plain', src: plain },
-  ];
 
-  let Selectedtheme = themes[0];
   let isSaving = false;
 
   const saveCertificate = () => {
     // set isSaving to true
     // Validation - make sure description isn't empty
     /**
-     * Update course description and is_certificate_downloadable (like in src/components/Course/components/Settings/index.svelte)
+     * Update course description, is_certificate_downloadable and certificate_theme (like in src/components/Course/components/Settings/index.svelte)
      * 
      * await updateCourse($course.id, undefined, {
         description: $course.description,
-        is_certificate_downloadable: $course.is_certificate_downloadable
+        is_certificate_downloadable: $course.is_certificate_downloadable,
+        certificate_theme: $course.certificate_theme
       });
      * */
     // set isSaving to false
@@ -58,11 +52,11 @@
         >Certificate settings</strong
       >
       <p class="text-xs font-normal my-4">Choose a theme</p>
-      <RadioButtonGroup bind:selected={Selectedtheme} class="mb-10">
+      <RadioButtonGroup bind:selected={$course.certificate_theme} class="mb-10">
-        {#each themes as value}
+        {#each themes as theme}
           <div class="flex mr-3">
-            <RadioButton {value} size="sm" />
+            <RadioButton value={theme} size="sm" />
-            <img src={value.src} alt="themes" />
+            <img src={`./${theme}.svg`} alt="themes" />
           </div>
         {/each}
       </RadioButtonGroup>
@@ -76,8 +70,7 @@
           </p>
           <PrimaryButton
             label="Go to Settings"
-            className="rounded-md mt-1"
+            className="rounded-md mt-3"
-            variant={VARIANTS.TEXT}
             onClick={() => goto(`org/${$currentOrg.siteName}/settings`)}
           />
         </div>
@@ -97,19 +90,19 @@
           class="my-4"
           size="sm"
         >
-          <span slot="labelA" style="color: #161616">Student access</span>
+          <span slot="labelA" style="color: #161616">Locked</span>
-          <span slot="labelB" style="color: green">Student access</span>
+          <span slot="labelB" style="color: green">Unlocked</span>
         </Toggle>
       </div>
     </section>
     <section
-      class="certbg flex justify-center items-center rounded-md w-full md:w-3/5"
+      class="certificate-bg flex justify-center items-center rounded-md w-full md:w-3/5"
     >
-      <div class="certContainer flex justify-center items-center h-5/6">
+      <div class="certificate-container flex justify-center items-center h-5/6">
-        {#if Selectedtheme.label == 'professional'}
+        {#if $course.certificate_theme === 'professional'}
-          <Professional studentName={student} />
+          <Professional studentName={studentNamePlaceholder} />
         {:else}
-          <Plain studentName={student} />
+          <Plain studentName={studentNamePlaceholder} />
         {/if}
       </div>
     </section>
@@ -128,11 +121,11 @@
   p {
     color: #262626;
   }
-  .certContainer {
+  .certificate-container {
     width: 95%;
     max-width: 95%;
   }
-  .certbg {
+  .certificate-bg {
     background-color: #f5f8fe;
   }
 </style>

src/components/Course/store.ts

@@ -11,6 +11,7 @@ export const course: Writable<Course> = writable({
   cost: 0,
   currency: '',
   is_certificate_downloadable: false,
+  certificate_theme: 'professional',
   metadata: {
     requirements: '',
     description: '',
@@ -129,5 +130,9 @@ export async function setCourse(data: Course, setLesson = true) {
       },
     };
   }
+
+  if (!data.certificate_theme) {
+    data.certificate_theme = 'professional';
+  }
   course.set(data);
 }

src/routes/courses/[id]/certificates.svelte

@@ -18,8 +18,8 @@
   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 } from 'carbon-components-svelte';
+  // import { Tabs, Tab } from 'carbon-components-svelte';
-  import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
+  // import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
 
   export let courseId: string = '';
   let isStudent = false;
@@ -47,20 +47,21 @@
     </slot:fragment>
   </PageNav>
 
-  <PageBody className="w-full mx-0" padding="px-0">
+  <PageBody className="w-full mx-0" padding="px-3">
-    <Tabs autoWidth class="border-b border-gray-200">
+    <Design />
+    <!-- <Tabs autoWidth class="border-b border-gray-200">
       <Tab label="Design" />
-      <!-- <Tab label="Reports" /> -->
+      <Tab label="Reports" />
       <svelte:fragment slot="content">
         <TabContent>
           <Design />
         </TabContent>
 
-        <!-- Temp disable Reports tab for V2 -->
+        Temp disable Reports tab for V2
-        <!-- <TabContent>
+        <TabContent>
           <Reports />
-        </TabContent> -->
+        </TabContent>
       </svelte:fragment>
-    </Tabs>
+    </Tabs> -->
   </PageBody>
 </CourseContainer>

src/utils/types/index.ts

@@ -97,6 +97,7 @@ export interface Course {
   group?: Group;
   organization?: Organization;
   is_certificate_downloadable?: boolean;
+  certificate_theme?: string;
 }
 
 export interface Groupmember {