feat: students can view org landing page from LMS

2024-04-25 06:51:39 +01:00
parent 648e15d88d
commit bd94594b56
18 changed files with 67 additions and 34 deletions
@@ -3,7 +3,7 @@
 </script>

 <div
-  class="{className} w-full max-w-[500px] mx-auto h-[350px] flex items-center justify-center flex-col border rounded border-gray-200 dark:border-neutral-600"
+  class="{className} w-full h-[517px] flex items-center justify-center flex-col border rounded border-gray-200 dark:border-neutral-600"
 >
  <slot />
 </div>
@@ -5,14 +5,22 @@
  import { currentOrgDomain } from '$lib/utils/store/org';
  import { isMobile } from '$lib/utils/store/useMobile';
  import { t } from '$lib/utils/functions/translations';
+  import { user } from '$lib/utils/store/user';

  export let className = '';
+  export let isLMS = false;
+
+  $: href = isLMS && $user.isLoggedIn ? `${$currentOrgDomain}/home` : $currentOrgDomain;
 </script>

-<a href={$currentOrgDomain} target="_blank" class="{className} ml-2 hover:no-underline">
+<a {href} target="_blank" class="{className} ml-2 hover:no-underline">
  <PrimaryButton variant={VARIANTS.CONTAINED_DARK}>
    {#if !$isMobile}
-      {$t('settings.subheadings.view_site')}
+      {#if isLMS}
+        {$t('dashboard.visit_site')}
+      {:else}
+        {$t('settings.subheadings.view_site')}
+      {/if}
    {/if}
    <ArrowUpRightIcon />
  </PrimaryButton>
@@ -5,9 +5,7 @@
    lesson,
    lessonByTranslation
  } from '$lib/components/Course/components/Lesson/store/lessons';
-  import Box from '$lib/components/Box/index.svelte';
  import { t } from '$lib/utils/functions/translations';
-  import AlignBoxTopLeft from 'carbon-icons-svelte/lib/AlignBoxTopLeft.svelte';
  import { lessonFallbackNote } from '$lib/utils/functions/translations';

  export let lessonId: string;
@@ -31,10 +29,9 @@
    </svelte:fragment>
  </HtmlRender>
 {:else if hasAtLeastOneTranslation}
-  <Box className="text-center">
-    <AlignBoxTopLeft class="carbon-icon" size={32} />
-    <h3 class="text-lg font-normal dark:text-white py-2">
+  <div class="flex items-center justify-center flex-col text-center">
+    <h3 class="text-lg font-normal italic dark:text-white py-2">
      {$t('course.navItem.lessons.materials.no_translation')}
    </h3>
-  </Box>
+  </div>
 {/if}
@@ -109,18 +109,22 @@
    return youtubeRegex.test(link.trim());
  }

-  onMount(async () => {
-    if (!orgSiteName) return;
+  $: loadData(orgSiteName);
+
+  async function loadData(siteName) {
+    if (!siteName) return;
+
    try {
-      console.log('sitename', orgSiteName);
+      console.log('sitename', siteName);
      $courseMetaDeta.isLoading = true;
-      const coursesResult = await getCourseBySiteName(orgSiteName);
+      const coursesResult = await getCourseBySiteName(siteName);
      courses.set(coursesResult);
      $courseMetaDeta.isLoading = false;
    } catch (error) {
      console.log('error', error);
    }
-  });
+  }
+
  function initPlyr(_player: any, _video: string | undefined) {
    if (!player) return;

@@ -162,7 +166,13 @@
    <!-- Header Section -->
    {#if $landingPageSettings.header.show}
      <header id="header" class="banner w-full h-[100vh] md:h-[90vh] mb-10 relative">
-        <Navigation logo={org.avatar_url} orgName={org.name} disableSignup={true} />
+        <Navigation
+          logo={org.avatar_url}
+          orgName={org.name}
+          disableSignup={true}
+          isOrgSite={true}
+        />
+
        <div class="absolute h-[100vh] md:h-[90vh] top-0 w-full opacity-80 z-10 bg-white" />
        {#if $landingPageSettings.header.banner.show}
          <div class="flex items-center justify-center md:h-full py-2">
@@ -1,6 +1,7 @@
 export const ROUTE = {
  HOME: '/',
  DASHBOARD: '/dashboard',
+  LMS_HOME: '/home',
  ONBOARDING: '/onboarding',
  COURSES: '/courses',
  PAGES: '/pages',
@@ -32,6 +33,7 @@ export const PUBLIC_ROUTES = [
 export const ROUTES_TO_HIDE_NAV = [
  ROUTE.LOGIN,
  ROUTE.SIGN_UP,
+  ROUTE.LMS_HOME,
  `^${ROUTE.INVITE_TEACHER}/.*`,
  `^${ROUTE.INVITE_STUDENT}/.*`,
  ROUTE.FORGOT,
@@ -397,7 +397,8 @@
    "lms_dashboard_hero": "Heute ist ein weiterer Tag, um Sie Ihren Lernzielen näher zu bringen. Geben Sie nicht auf, je mehr Sie lernen, desto besser werden Sie.",
    "dont": "Gib nicht auf",
    "lessons_completed": "Lektionen abgeschlossen",
-    "No_courses_started": "Es wurden keine Kurse gestartet"
+    "No_courses_started": "Es wurden keine Kurse gestartet",
+    "visit_site": "Besuche die Website"
  },
  "courses": {
    "heading": "Kurse",
@@ -392,6 +392,7 @@
    "evening_heading": "Good Evening",
    "create_course": "Create Course",
    "view_site": "View Site",
+    "visit_site": "Visit Website",
    "hero_content": "Thank you for what you do ❤️. You are changing lives one classroom at a time and thanks to you, the world is a better place. 😊",
    "hero_button": "Keep Building 🚀",
    "your_schedule": "Your Schedule",
@@ -397,7 +397,8 @@
    "lms_dashboard_hero": "Hoy es otro día para acercarte a tus objetivos de aprendizaje. No te rindas, cuanto más aprendas, mejor serás.",
    "dont": "no te rindas",
    "lessons_completed": "Lecciones completadas",
-    "No_courses_started": "No se iniciaron cursos"
+    "No_courses_started": "No se iniciaron cursos",
+    "visit_site": "Visita el sitio web"
  },
  "courses": {
    "heading": "Cursos",
@@ -397,7 +397,8 @@
    "lms_dashboard_hero": "Aujourd'hui est un autre jour pour vous rapprocher de vos objectifs d'apprentissage. N'abandonnez pas, plus vous apprenez, mieux vous vous améliorez.",
    "dont": "N'abandonne pas",
    "lessons_completed": "Leçons terminées",
-    "No_courses_started": "Aucun cours n'a commencé"
+    "No_courses_started": "Aucun cours n'a commencé",
+    "visit_site": "Visitez le site Web"
  },
  "courses": {
    "heading": "Cours",
@@ -397,7 +397,8 @@
    "lms_dashboard_hero": "आज का दिन आपको आपके सीखने के लक्ष्यों के करीब लाने का एक और दिन है। हार मत मानो, जितना अधिक सीखोगे उतना बेहतर हो जाओगे।",
    "dont": "हिम्मत मत हारो",
    "lessons_completed": "पाठ पूरा हुआ",
-    "No_courses_started": "कोई पाठ्यक्रम शुरू नहीं हुआ"
+    "No_courses_started": "कोई पाठ्यक्रम शुरू नहीं हुआ",
+    "visit_site": "बेवसाइट देखना"
  },
  "courses": {
    "heading": "पाठ्यक्रम",
@@ -397,7 +397,8 @@
    "lms_dashboard_hero": "Hoje é mais um dia para aproximar você de seus objetivos de aprendizagem. Não desista, quanto mais você aprende melhor você fica.",
    "dont": "Não desista",
    "lessons_completed": "Lições concluídas",
-    "No_courses_started": "Nenhum curso iniciado"
+    "No_courses_started": "Nenhum curso iniciado",
+    "visit_site": "Visite o site"
  },
  "courses": {
    "heading": "Cursos",
@@ -397,7 +397,8 @@
    "lms_dashboard_hero": "Сегодня еще один день, который приблизит вас к вашим целям обучения. Не сдавайтесь, чем больше вы узнаете, тем лучше у вас получится.",
    "dont": "Не сдавайся",
    "lessons_completed": "Уроки завершены",
-    "No_courses_started": "Курсы не начались"
+    "No_courses_started": "Курсы не начались",
+    "visit_site": "Посетите вебсайт"
  },
  "courses": {
    "heading": "Курсы",
@@ -397,7 +397,8 @@
    "lms_dashboard_hero": "Hôm nay là một ngày khác để đưa bạn đến gần hơn với mục tiêu học tập của mình. Đừng bỏ cuộc, bạn càng học nhiều thì bạn càng tiến bộ hơn.",
    "dont": "Đừng bỏ cuộc",
    "lessons_completed": "Bài học đã hoàn thành",
-    "No_courses_started": "Không có khóa học nào bắt đầu"
+    "No_courses_started": "Không có khóa học nào bắt đầu",
+    "visit_site": "Truy cập trang web"
  },
  "courses": {
    "heading": "Khóa học",
@@ -323,7 +323,7 @@
      {/if}
    {/if}

-    <div class="flex justify-between">
+    <div class={path.includes('home') ? '' : 'flex justify-between'}>
      <slot />

      {#if showAppsSideBar(path)}
@@ -11,10 +11,10 @@

  function handleClick() {
    if (!isOrg) {
-      return goto('/')
+      return goto('/');
    }

-    return goto('/home')
+    return goto('https://classroomio.com');
  }
 </script>

@@ -1,5 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-
-export const load = () => {
-  throw redirect(307, 'https://classroomio.com');
-};
@@ -0,0 +1,7 @@
+<script>
+  import OrgLandingPage from '$lib/components/Org/LandingPage/index.svelte';
+  import { globalStore } from '$lib/utils/store/app';
+  import { currentOrg } from '$lib/utils/store/org';
+</script>
+
+<OrgLandingPage orgSiteName={$globalStore.orgSiteName} org={$currentOrg} />
@@ -10,6 +10,7 @@
  import type { Course } from '$lib/utils/types';
  import { getGreeting } from '$lib/utils/functions/date';
  import { t } from '$lib/utils/functions/translations';
+  import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';

  let hasFetched = false;
  let progressPercentage = 0;
@@ -52,10 +53,15 @@

 <section class="max-w-6xl gap-5 mx-auto">
  <div class="m-5">
-    <h1 class="dark:text-white text-2xl md:text-3xl font-bold mb-3">
-      {$t(getGreeting())}
-      {$profile.fullname}!
-    </h1>
+    <div class="flex items-center justify-between mb-10">
+      <h1 class="dark:text-white text-2xl md:text-3xl font-bold">
+        {$t(getGreeting())}
+        {$profile.fullname}!
+      </h1>
+
+      <VisitOrgSiteButton isLMS={true} />
+    </div>
+
    <div
      class="w-full h-fit lg:h-[265px] flex md:items-center justify-between flex-col-reverse md:flex-row p-5 lg:p-10 rounded-md bg-primary-900 my-2"
    >