CLASSROOMIO-T-123:Implemented the settings tab in the LMS'

CLASSROOMIO-T-123:changed the width value'

CLASSROOMIO-T-123:Deleted unused Imports and also changed the width value'

CLASSROOMIO-T-123:Implemented the settings tab in the LMS'


Co-authored-by: Ifeanyi Nwosu <[email protected]>


Merge-request: CLASSROOMIO-MR-54
Merged-by: Best Admin <[email protected]>

src/lib/components/LMS/components/Profile.svelte

@@ -0,0 +1,102 @@
+<script>
+  import { goto } from '$app/navigation';
+  import { Grid, Row, Column } from 'carbon-components-svelte';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import UploadImage from '$lib/components/UploadImage/index.svelte';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { profile } from '$lib/utils/store/user';
+  import { snackbarStore } from '$lib/components/Snackbar/store';
+  import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
+
+  let avatar;
+  let loading = false;
+
+  async function logout() {
+    const { error } = await supabase.auth.signOut();
+    console.log('error logout', error);
+    goto('/login');
+  }
+
+  async function handleUpdate() {
+    try {
+      loading = true;
+
+      const updates = {
+        fullname: $profile.fullname,
+        username: $profile.username
+      };
+
+      if (avatar) {
+        const filename = `user/${$profile.username + Date.now()}.webp`;
+
+        const { data } = await supabase.storage.from('avatars').upload(filename, avatar, {
+          cacheControl: '3600',
+          upsert: false
+        });
+        if (data) {
+          const { data: response } = await supabase.storage.from('avatars').getPublicUrl(filename);
+
+          updates.avatar_url = response.publicUrl;
+          $profile.avatar_url = response.publicUrl;
+        }
+        avatar = undefined;
+      }
+
+      let { error } = await supabase.from('profile').update(updates).match({ id: $profile.id });
+
+      profile.update((_profile) => ({
+        ..._profile,
+        ...updates
+      }));
+      $snackbarStore.open = true;
+      $snackbarStore.message = 'Update successful';
+      $snackbarStore.severity = SNACKBAR_SEVERITY.SUCCESS;
+
+      if (error) throw error;
+    } catch (error) {
+      let message = error.message;
+      if (message.includes('profile_username_key')) {
+        message = 'username already exists';
+      }
+      $snackbarStore.open = true;
+      $snackbarStore.message = `Update failed: ${message}`;
+      $snackbarStore.severity = SNACKBAR_SEVERITY.ERROR;
+      loading = false;
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<Grid class="border-c rounded border-gray-200 w-full mt-5">
+  <Row class="py-7 border-bottom-c">
+    <Column sm={2} md={2} lg={4}>
+      <p class="dark:text-white font-bold">Profile Picture</p>
+    </Column>
+    <Column sm={2} md={6} lg={8}>
+      <UploadImage bind:avatar src={$profile.avatar_url} widthHeight="w-24 h-24" />
+    </Column>
+  </Row>
+  <Row class="py-7 border-bottom-c">
+    <Column sm={2} md={2} lg={4}>
+      <p class="dark:text-white font-bold">Personal Information</p>
+    </Column>
+    <Column sm={2} md={6} lg={8}>
+      <TextField label="Full Name" bind:value={$profile.fullname} className="w-60 mb-4" />
+      <TextField label="Username" bind:value={$profile.username} className="w-60 mb-4" />
+      <TextField label="Email" bind:value={$profile.email} className="w-60 mb-4" />
+    </Column>
+  </Row>
+  <Row class="m-5 w-full flex items-center justify-center">
+    <PrimaryButton
+      label="Update Profile"
+      className="mr-5"
+      isLoading={loading}
+      isDisabled={loading}
+      onClick={handleUpdate}
+    />
+    <PrimaryButton variant={VARIANTS.OUTLINED} label="Log out" onClick={logout} />
+  </Row>
+</Grid>

src/routes/lms/+page.svelte

@@ -16,7 +16,7 @@
   <title>Student Dashboard - ClassroomIO</title>
 </svelte:head>
 
-<section class="max-w-[1240px] gap-5 mx-auto">
+<section class="max-w-6xl gap-5 mx-auto">
   <div class="m-5">
     <h1 class="text-3xl font-semibold">Dashboard</h1>
     <div

src/routes/lms/exercises/+page.svelte

@@ -155,7 +155,7 @@
   }
 </script>
 
-<section class="max-w-[1240px] mx-auto">
+<section class="max-w-6xl mx-auto">
   <div class="m-5">
     <h1 class="text-3xl font-semibold my-4">Exercises</h1>
     <div class="flex items-center w-full">

src/routes/lms/mylearning/+page.svelte

@@ -31,7 +31,7 @@
       (currentTab = tab);
 </script>
 
-<section class="max-w-[1240px] mx-auto">
+<section class="max-w-6xl mx-auto">
   <div class="m-2 md:m-5">
     <div role="searchbox" class=" bg-gray-100 w-full md:w-[60%] lg:w-[30%]">
       <Search placeholder="Search courses" class="dark:text-black" />

src/routes/lms/settings/+page.svelte

@@ -1 +1,30 @@
-Settings Page
+<script>
+  import { page } from '$app/stores';
+  import { Tabs, Tab, TabContent } from 'carbon-components-svelte';
+  import Profile from '$lib/components/LMS/components/Profile.svelte';
+
+  let selected = 0;
+  const tabs = [
+    {
+      key: 0,
+      label: 'Profile',
+      tabKey: '',
+      href: $page.url.pathname
+    }
+  ];
+</script>
+
+<section class="max-w-6xl mx-auto">
+  <div class="m-2 md:m-5">
+    <Tabs autoWidth bind:selected>
+      {#each tabs as tab}
+        <Tab label={tab.label} href={tab.href} />
+      {/each}
+      <svelte:fragment slot="content">
+        <TabContent>
+          <Profile />
+        </TabContent>
+      </svelte:fragment>
+    </Tabs>
+  </div>
+</section>