feat: customize the LMS from dashboard (#304)

* Done with the customization of the LMS task

* generated custom_lms migration file

* updated the migration file

* copy improvements

* update wording

* made updates based on reviews,i hope i didnt miss anything

* updated the translations and migration files

* refactoring

* disabled improvements for apps

* more improvements

* more custom improvements

* pr refactoring

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/lib/components/Org/Settings/CustomizeLms.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+  import { Grid, Row, Column } from 'carbon-components-svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import Save from 'carbon-icons-svelte/lib/Save.svelte';
+  import IconButton from '$lib/components/IconButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import SectionTitle from '../SectionTitle.svelte';
+  import { Toggle } from 'carbon-components-svelte';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { getSupabase } from '$lib/utils/functions/supabase';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import UploadWidget from '$lib/components/UploadWidget/index.svelte';
+  import { handleOpenWidget } from '$lib/components/CourseLandingPage/store';
+  import { t } from '$lib/utils/functions/translations';
+
+  const supabase = getSupabase();
+
+  let widgetKey = '';
+  let isSaving = false;
+
+  function widgetControl(key: string) {
+    widgetKey = key;
+    $handleOpenWidget.open = true;
+  }
+
+  async function handleSave() {
+    isSaving = true;
+
+    const { error } = await supabase
+      .from('organization')
+      .update({ customization: $currentOrg.customization })
+      .match({ id: $currentOrg.id });
+
+    if (error) {
+      const message = error?.message || 'snackbar.lms.error.try_again';
+      console.error('Error updating customizations', message);
+      snackbar.error('snackbar.lms.error.update');
+    } else {
+      snackbar.success('snackbar.success_update');
+    }
+
+    isSaving = false;
+  }
+</script>
+
+<Grid class="border-c rounded border-gray-200 dark:border-neutral-600 w-full mt-5 relative">
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <Column sm={4} md={4} lg={4}>
+      <SectionTitle>{$t('components.settings.customize_lms.dashboard.title')}</SectionTitle>
+    </Column>
+    <Column sm={8} md={8} lg={8} class="mt-4 lg:mt-0">
+      <div>
+        <p>{$t('components.settings.customize_lms.dashboard.community')}</p>
+        <Toggle size="sm" class="mb-3" bind:toggled={$currentOrg.customization.dashboard.community}>
+          <span slot="labelA" style="color: gray"
+            >{$t('components.settings.customize_lms.disabled')}</span
+          >
+          <span slot="labelB" style="color: gray"
+            >{$t('components.settings.customize_lms.enabled')}</span
+          >
+        </Toggle>
+      </div>
+
+      <div>
+        <p>{$t('components.settings.customize_lms.dashboard.exercises')}</p>
+        <Toggle size="sm" class="mb-3" bind:toggled={$currentOrg.customization.dashboard.exercise}>
+          <span slot="labelA" style="color: gray"
+            >{$t('components.settings.customize_lms.disabled')}</span
+          >
+          <span slot="labelB" style="color: gray"
+            >{$t('components.settings.customize_lms.enabled')}</span
+          >
+        </Toggle>
+      </div>
+
+      <div class="mb-3">
+        <p>{$t('components.settings.customize_lms.dashboard.banner_image')}</p>
+        <PrimaryButton
+          variant={VARIANTS.OUTLINED}
+          label={$t('components.settings.customize_lms.dashboard.banner_image_btn')}
+          className="mt-3"
+          onClick={() => widgetControl('banner-image')}
+        />
+        {#if $currentOrg.customization.dashboard.bannerImage}
+          <img
+            alt="Banner"
+            src={$currentOrg.customization.dashboard.bannerImage}
+            class="mt-2 rounded-md w-full"
+          />
+        {/if}
+        {#if $handleOpenWidget.open && widgetKey === 'banner-image'}
+          <UploadWidget bind:imageURL={$currentOrg.customization.dashboard.bannerImage} />
+        {/if}
+      </div>
+
+      <div>
+        <p>{$t('components.settings.customize_lms.dashboard.banner_text')}</p>
+        <TextField
+          label={$t('components.settings.customize_lms.dashboard.banner_text_label')}
+          placeholder={$t('components.settings.customize_lms.dashboard.banner_text_placeholder')}
+          className="mb-5"
+          bind:value={$currentOrg.customization.dashboard.bannerText}
+        />
+      </div>
+    </Column>
+  </Row>
+
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <Column sm={4} md={4} lg={4}
+      ><SectionTitle>{$t('components.settings.customize_lms.course.title')}</SectionTitle></Column
+    >
+    <Column sm={8} md={8} lg={8} class="mt-4 lg:mt-0">
+      <div>
+        <p>{$t('components.settings.customize_lms.course.newsfeed')}</p>
+        <Toggle size="sm" class="mb-3" bind:toggled={$currentOrg.customization.course.newsfeed}>
+          <span slot="labelA" style="color: gray"
+            >{$t('components.settings.customize_lms.disabled')}</span
+          >
+          <span slot="labelB" style="color: gray"
+            >{$t('components.settings.customize_lms.enabled')}</span
+          >
+        </Toggle>
+      </div>
+
+      <div>
+        <p>{$t('components.settings.customize_lms.course.grading')}</p>
+        <Toggle size="sm" class="mb-3" bind:toggled={$currentOrg.customization.course.grading}>
+          <span slot="labelA" style="color: gray"
+            >{$t('components.settings.customize_lms.disabled')}</span
+          >
+          <span slot="labelB" style="color: gray"
+            >{$t('components.settings.customize_lms.enabled')}</span
+          >
+        </Toggle>
+      </div>
+    </Column>
+  </Row>
+
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <Column sm={4} md={4} lg={4}
+      ><SectionTitle>{$t('components.settings.customize_lms.apps.title')}</SectionTitle></Column
+    >
+    <Column sm={8} md={8} lg={8} class="mt-4 lg:mt-0">
+      <div>
+        <p>{$t('components.settings.customize_lms.apps.poll')}</p>
+        <Toggle size="sm" class="mb-3" bind:toggled={$currentOrg.customization.apps.poll}>
+          <span slot="labelA" style="color: gray"
+            >{$t('components.settings.customize_lms.disabled')}</span
+          >
+          <span slot="labelB" style="color: gray"
+            >{$t('components.settings.customize_lms.enabled')}</span
+          >
+        </Toggle>
+      </div>
+      <div>
+        <p>{$t('components.settings.customize_lms.apps.live_comment')}</p>
+        <Toggle size="sm" class="mb-3" bind:toggled={$currentOrg.customization.apps.comments}>
+          <span slot="labelA" style="color: gray"
+            >{$t('components.settings.customize_lms.disabled')}</span
+          >
+          <span slot="labelB" style="color: gray"
+            >{$t('components.settings.customize_lms.enabled')}</span
+          >
+        </Toggle>
+      </div>
+    </Column>
+  </Row>
+
+  <div class="hidden md:block sticky float-right bottom-12 mr-2 z-[120]">
+    <PrimaryButton
+      label={$t('components.settings.customize_lms.save')}
+      onClick={handleSave}
+      isLoading={isSaving}
+      isDisabled={isSaving}
+    />
+  </div>
+</Grid>
+
+<div class="absolute block md:hidden right-6 bottom-8 z-[120]">
+  <PrimaryButton onClick={handleSave} isLoading={isSaving} isDisabled={isSaving}>
+    <Save size={24} class="" />
+  </PrimaryButton>
+</div>

apps/dashboard/src/lib/components/Org/Settings/LandingpageSettings.svelte

@@ -96,7 +96,7 @@
       snackbar.error(`snackbar.lms.error.update ${message}`);
     } else {
       $currentOrg.landingpage = $landingPageSettings;
-      snackbar.success();
+      snackbar.success('snackbar.success_update');
     }
 
     isSaving = false;
@@ -115,7 +115,7 @@
     }
   }
 
-  $: setDefault($currentOrg?.landingpage as OrgLandingPageJson);
+  $: setDefault($currentOrg?.landingpage as unknown as OrgLandingPageJson);
 </script>
 
 <Grid class="border-c rounded border-gray-200 dark:border-neutral-600 w-full mt-5 relative">

apps/dashboard/src/lib/components/Org/Settings/OrgSettings.svelte

@@ -177,6 +177,28 @@
       </div>
     </Column>
   </Row>
+  <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
+    <Column sm={4} md={4} lg={4}
+      ><SectionTitle
+        >{$t('settings.organization.organization_profile.customize_lms.heading')}</SectionTitle
+      ></Column
+    >
+    <Column sm={8} md={8} lg={8}>
+      <h4 class="dark:text-white lg:mt-0">
+        {$t('settings.organization.organization_profile.customize_lms.sub_heading')}
+      </h4>
+      <p class="text-sm text-gray-500 dark:text-white">
+        {$t('settings.organization.organization_profile.customize_lms.body')}
+      </p>
+      <PrimaryButton
+        className="my-7 py-5 px-10 flex items-center gap-2 justify-center"
+        variant={VARIANTS.OUTLINED}
+        onClick={() => gotoSetting('/customize-lms')}
+      >
+        {$t('settings.organization.organization_profile.customize_lms.button')}
+      </PrimaryButton>
+    </Column>
+  </Row>
   <Row class="flex lg:flex-row flex-col py-7 border-bottom-c">
     <Column sm={4} md={4} lg={4}
       ><SectionTitle

apps/dashboard/src/lib/components/Org/Settings/store.ts

@@ -63,6 +63,7 @@ export interface OrgLandingPageJson {
     show: boolean;
   };
 }
+
 export let landingPageSettings: Writable<OrgLandingPageJson> = writable({
   header: {
     title: 'Web Development Courses for',