feat: org and course student analytics page (#509)
* UI initialization * feat: structure API * feat: audience & people analytics * feat: quick changes * feat: add comments * redesign course student page * chore: make requests to db more efficient * clean up analytics page for course * feat: finish up audience analytics page * chore: minor UI tweaks * translate all * replace inserts of log in events to update * catch error if last_login isn't inserted --------- Co-authored-by: Rotimi Best <best@classroomio.com>
This commit is contained in:
Adeyemi Adetunji
co-authored by
Rotimi Best
Rotimi Best
parent
381776f388
commit
f69bf920a9
@@ -1,14 +1,17 @@
|
||||
<script>
|
||||
import { page as pageStore } from '$app/stores';
|
||||
import Avatar from '$lib/components/Avatar/index.svelte';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { currentOrg, orgAudience } from '$lib/utils/store/org';
|
||||
import {
|
||||
DataTable,
|
||||
DataTableSkeleton,
|
||||
Link,
|
||||
Pagination,
|
||||
Toolbar,
|
||||
ToolbarContent,
|
||||
ToolbarSearch,
|
||||
Pagination,
|
||||
DataTableSkeleton
|
||||
ToolbarSearch
|
||||
} from 'carbon-components-svelte';
|
||||
import { orgAudience } from '$lib/utils/store/org';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
|
||||
export let isLoading = false;
|
||||
|
||||
@@ -32,6 +35,22 @@
|
||||
<ToolbarSearch persistent value={searchValue} shouldFilterRows bind:filteredRowIds />
|
||||
</ToolbarContent>
|
||||
</Toolbar>
|
||||
<svelte:fragment slot="cell-header" let:header>
|
||||
{header.value}
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="cell" let:row let:cell>
|
||||
{#if cell.key === 'name'}
|
||||
<Link
|
||||
class="flex items-center gap-2 text-black hover:text-black"
|
||||
href={`${$pageStore.url.href}/${row.id}/${$currentOrg.id}`}
|
||||
>
|
||||
<Avatar src={row.avatar_url} width="w-5" height="h-5" />
|
||||
{cell.value}
|
||||
</Link>
|
||||
{:else}
|
||||
{cell.value}
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</DataTable>
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
<script>
|
||||
import { Grid, Row, Column } from 'carbon-components-svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import SectionTitle from '../SectionTitle.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 PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { snackbar } from '$lib/components/Snackbar/store';
|
||||
import UploadImage from '$lib/components/UploadImage/index.svelte';
|
||||
import generateUUID from '$lib/utils/functions/generateUUID';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import LanguagePicker from './LanguagePicker.svelte';
|
||||
import { handleLocaleChange } from '$lib/utils/functions/translations';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import { handleLocaleChange, t } from '$lib/utils/functions/translations';
|
||||
import { updateProfileValidation } from '$lib/utils/functions/validator';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { Column, Grid, Row } from 'carbon-components-svelte';
|
||||
import SectionTitle from '../SectionTitle.svelte';
|
||||
import LanguagePicker from './LanguagePicker.svelte';
|
||||
|
||||
let avatar = '';
|
||||
let loading = false;
|
||||
@@ -38,6 +37,7 @@
|
||||
email: $profile.email,
|
||||
locale
|
||||
};
|
||||
console.log('updates', updates);
|
||||
|
||||
if (avatar) {
|
||||
const filename = `user/${generateUUID()}.webp`;
|
||||
|
||||
@@ -1,30 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';
|
||||
import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
|
||||
import { ChevronRight, SettingsAdjust } from 'carbon-icons-svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import OrgSelector from '$lib/components/OrgSelector/OrgSelector.svelte';
|
||||
import HomeIcon from '$lib/components/Icons/HomeIcon.svelte';
|
||||
import Avatar from '$lib/components/Avatar/index.svelte';
|
||||
import AudienceIcon from '$lib/components/Icons/AudienceIcon.svelte';
|
||||
import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
|
||||
import HomeIcon from '$lib/components/Icons/HomeIcon.svelte';
|
||||
import QuizIcon from '$lib/components/Icons/QuizIcon.svelte';
|
||||
import SiteSettingsIcon from '$lib/components/Icons/SiteSettingsIcon.svelte';
|
||||
import AudienceIcon from '$lib/components/Icons/AudienceIcon.svelte';
|
||||
import Avatar from '$lib/components/Avatar/index.svelte';
|
||||
import OrgSelector from '$lib/components/OrgSelector/OrgSelector.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { currentOrgPath, isFreePlan } from '$lib/utils/store/org';
|
||||
import { ChevronRight, SettingsAdjust } from 'carbon-icons-svelte';
|
||||
import ForumIcon from 'carbon-icons-svelte/lib/Forum.svelte';
|
||||
import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';
|
||||
|
||||
import { isOrgAdmin } from '$lib/utils/store/org';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { NavClasses } from '$lib/utils/constants/reusableClass';
|
||||
import { sideBar, profileMenu } from './store';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { goto } from '$app/navigation';
|
||||
import ProfileMenu from '$lib/components/Org/ProfileMenu/index.svelte';
|
||||
import { NavClasses } from '$lib/utils/constants/reusableClass';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { isOrgAdmin } from '$lib/utils/store/org';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { profileMenu, sideBar } from './store';
|
||||
|
||||
interface menuItems {
|
||||
label: string;
|
||||
path: string;
|
||||
show: boolean;
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
let menuItems: menuItems[] = [];
|
||||
@@ -51,26 +52,31 @@
|
||||
{
|
||||
path: '',
|
||||
label: $t('org_navigation.dashboard'),
|
||||
isActive: isActive($page.url.pathname, `${$currentOrgPath}`),
|
||||
show: true
|
||||
},
|
||||
{
|
||||
path: '/courses',
|
||||
label: $t('org_navigation.courses'),
|
||||
isActive: $page.url.pathname.includes(`${$currentOrgPath}/courses`),
|
||||
show: true
|
||||
},
|
||||
{
|
||||
path: '/community',
|
||||
label: $t('org_navigation.community'),
|
||||
isActive: $page.url.pathname.includes(`${$currentOrgPath}/community`),
|
||||
show: true
|
||||
},
|
||||
{
|
||||
path: '/audience',
|
||||
label: $t('org_navigation.audience'),
|
||||
isActive: $page.url.pathname.includes(`${$currentOrgPath}/audience`),
|
||||
show: true
|
||||
},
|
||||
{
|
||||
path: '/setup',
|
||||
label: $t('org_navigation.setup'),
|
||||
isActive: $page.url.pathname.includes(`${$currentOrgPath}/setup`),
|
||||
show: $isOrgAdmin
|
||||
}
|
||||
];
|
||||
@@ -80,15 +86,15 @@
|
||||
<aside
|
||||
class={`${
|
||||
$sideBar.hidden
|
||||
? 'absolute z-40 -translate-x-[100%] md:relative md:translate-x-0 top-[48px] md:top-0'
|
||||
: 'absolute z-40 translate-x-0 md:relative top-[48px] md:top-0'
|
||||
} border-r-1 h-[calc(100vh-48px)] w-[250px] min-w-[250px] overflow-y-auto border border-b-0 border-l-0 border-t-0 border-gray-100 dark:border-neutral-600 bg-gray-100 transition dark:bg-neutral-900`}
|
||||
? 'absolute top-[48px] z-40 -translate-x-[100%] md:relative md:top-0 md:translate-x-0'
|
||||
: 'absolute top-[48px] z-40 translate-x-0 md:relative md:top-0'
|
||||
} border-r-1 h-[calc(100vh-48px)] w-[250px] min-w-[250px] overflow-y-auto border border-b-0 border-l-0 border-t-0 border-gray-100 bg-gray-100 transition dark:border-neutral-600 dark:bg-neutral-900`}
|
||||
>
|
||||
<div class="flex h-full flex-col">
|
||||
<div class="">
|
||||
<OrgSelector />
|
||||
|
||||
<ul class="mt-4 my-2 px-4">
|
||||
<ul class="my-2 mt-4 px-4">
|
||||
{#each menuItems as menuItem}
|
||||
{#if menuItem.show}
|
||||
<a
|
||||
@@ -97,10 +103,7 @@
|
||||
on:click={toggleSidebar}
|
||||
>
|
||||
<li
|
||||
class="mb-1 flex items-center gap-2.5 px-2.5 py-2 {NavClasses.item} {isActive(
|
||||
$page.url.pathname,
|
||||
`${$currentOrgPath}${menuItem.path}`
|
||||
)
|
||||
class="mb-1 flex items-center gap-2.5 px-2.5 py-2 {NavClasses.item} {menuItem.isActive
|
||||
? NavClasses.active
|
||||
: 'dark:text-white'}"
|
||||
>
|
||||
@@ -130,7 +133,7 @@
|
||||
|
||||
{#if $isFreePlan}
|
||||
<div
|
||||
class="border-primary-700 mx-4 flex flex-col items-center justify-center gap-4 rounded-md border px-2 py-6 text-center hover:scale-95 transition-all ease-in-out"
|
||||
class="border-primary-700 mx-4 flex flex-col items-center justify-center gap-4 rounded-md border px-2 py-6 text-center transition-all ease-in-out hover:scale-95"
|
||||
>
|
||||
<img src="/upgrade.png" alt="upgrade" class="h-16 w-16" />
|
||||
<span class="flex flex-col gap-1">
|
||||
@@ -149,7 +152,7 @@
|
||||
<a href={$currentOrgPath} class="text-black no-underline" on:click={toggleSidebar}>
|
||||
<li class="mb-2 flex items-center rounded px-2.5 py-1.5">
|
||||
<HelpIcon size={20} class="carbon-icon dark:text-white" />
|
||||
<p class="ml-2.5 dark:text-white text-sm font-medium">{$t('org_navigation.help')}</p>
|
||||
<p class="ml-2.5 text-sm font-medium dark:text-white">{$t('org_navigation.help')}</p>
|
||||
</li>
|
||||
</a>
|
||||
|
||||
@@ -161,20 +164,20 @@
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="text-black no-underline cursor-pointer flex items-center justify-between gap-2.5 px-2.5 py-2 mb-2 {NavClasses.item} {$page.url.pathname.includes(
|
||||
class="mb-2 flex cursor-pointer items-center justify-between gap-2.5 px-2.5 py-2 text-black no-underline {NavClasses.item} {$page.url.pathname.includes(
|
||||
'settings'
|
||||
)
|
||||
? NavClasses.active
|
||||
: 'dark:text-white'}"
|
||||
>
|
||||
<div class="flex text-start items-center justify-start space-x-1 w-full">
|
||||
<div class="flex w-full items-center justify-start space-x-1 text-start">
|
||||
<Avatar
|
||||
src={$profile.avatar_url}
|
||||
name={$profile.username}
|
||||
width="w-[1.2rem]"
|
||||
height="h-[1.2rem]"
|
||||
/>
|
||||
<p class="text-sm dark:text-white font-medium truncate max-w-full">
|
||||
<p class="max-w-full truncate text-sm font-medium dark:text-white">
|
||||
{$profile.fullname}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user