feat: redo settings and all org pages. (#601)
* feat: new components, deploy storybook * refactor: simplify component field definitions and enhance button loading state - Removed unnecessary type imports and simplified the FIELDS array definitions across multiple components in Storybook. - Updated button component to use a loading state instead of isLoading, improving clarity and consistency in props. - Adjusted button stories to reflect the new loading prop and enhanced the button's loading visual feedback. - Minor CSS adjustments for better layout and styling consistency. * chore: add field, card, password components * feat: improve page component & update AuthUI path * chore: update bits-ui to version 2.14.4 and all org related UI's - Updated bits-ui dependency in pnpm-lock.yaml and package.json to version 2.14.4. - Refactored imports for RoleBasedSecurity and UpgradeBanner components to use the new ui feature directory. - Removed unused Course components and related files to clean up the codebase. - Enhanced various components to improve consistency and maintainability. * chore: move all setting buttons to the top and update auth ui styles * chore: remove svelte-loading-spinners and replace with @cio/ui/base/spinner - Removed all instances of svelte-loading-spinners from the project. - Updated components to use the new Spinner from @cio/ui/base/spinner. - Cleaned up pnpm-lock.yaml and package.json to reflect the removal of svelte-loading-spinners. - Added new CSS animations for rocket launch effects in app.css. - Enhanced email change flow with updated verification messages in translations. * chore: remove supabase file upload from dashboard and move to r2 * chore: update organization API and UI components - Added new API methods for organization plan operations and team management. - Introduced middleware for API key authentication and organization admin checks. - Refactored organization-related components to utilize the new API structure. - Updated various UI components to improve consistency and maintainability. - Enhanced error handling and validation for organization-related actions. - Removed deprecated services and streamlined the codebase.
This commit is contained in:
Rotimi Best
@@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { goto } from '$app/navigation';
|
||||
import { currentOrgPath } from '$lib/utils/store/org';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { isMobileStore } from '@cio/ui/hooks/is-mobile.svelte';
|
||||
import PlusIcon from '@lucide/svelte/icons/plus';
|
||||
|
||||
function askCommunity() {
|
||||
goto(`${$currentOrgPath}/community/ask`);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if isMobileStore.current}
|
||||
<Button onclick={askCommunity}>
|
||||
<PlusIcon size={16} />
|
||||
</Button>
|
||||
{:else}
|
||||
<Button onclick={askCommunity}>
|
||||
{$t('community.ask_button')}
|
||||
</Button>
|
||||
{/if}
|
||||
@@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { Skeleton } from '@cio/ui/base/skeleton';
|
||||
</script>
|
||||
|
||||
<div class="relative flex h-[70px] w-full rounded-md border p-2 transition ease-in-out dark:border-neutral-600">
|
||||
<div class="mr-2 flex w-10 flex-col justify-evenly gap-2 rounded-md px-1">
|
||||
<Skeleton class="h-2/6 w-full rounded-sm" />
|
||||
<Skeleton class="h-2/6 w-full rounded-sm" />
|
||||
<Skeleton class="h-2/6 w-full rounded-sm" />
|
||||
</div>
|
||||
|
||||
<div class="flex w-9/12 flex-col gap-2 rounded-md">
|
||||
<!-- first text -->
|
||||
<Skeleton class="h-4 w-3/6 rounded-sm" />
|
||||
<!-- second text -->
|
||||
<Skeleton class="h-4 w-1/4 rounded-sm" />
|
||||
</div>
|
||||
|
||||
<div class="ml-auto w-10 flex-col justify-evenly rounded-md px-1">
|
||||
<Skeleton class="h-4 w-full rounded-sm" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script lang="ts">
|
||||
import Modal from '$lib/components/Modal/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
|
||||
interface Props {
|
||||
onDelete?: any;
|
||||
onCancel?: any;
|
||||
open?: boolean;
|
||||
isQuestion?: boolean;
|
||||
isDeleting?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
onDelete = () => {},
|
||||
onCancel = () => {},
|
||||
open = $bindable(false),
|
||||
isQuestion = false,
|
||||
isDeleting = false
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
onClose={() => (open = false)}
|
||||
bind:open
|
||||
width="w-96"
|
||||
modalHeading="{$t('community.delete.title')} {isQuestion
|
||||
? $t('community.delete.question')
|
||||
: $t('community.delete.comment')}"
|
||||
>
|
||||
<div>
|
||||
<p class="mt-0 text-base dark:text-white">
|
||||
{$t('community.delete.sure')}
|
||||
{isQuestion ? $t('community.delete.question') : $t('community.delete.comment')}?
|
||||
</p>
|
||||
|
||||
<div class="mt-5 flex items-center justify-between">
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
label={$t('community.delete.no')}
|
||||
onClick={onCancel}
|
||||
/>
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
variant={VARIANTS.CONTAINED}
|
||||
label={$t('community.delete.yes')}
|
||||
onClick={onDelete}
|
||||
isLoading={isDeleting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
@@ -0,0 +1,3 @@
|
||||
export { default as CommunityListLoader } from './community-list-loader.svelte';
|
||||
export { default as CommunityDeleteModal } from './delete-modal.svelte';
|
||||
export { default as AskCommunityButton } from './ask-community-button.svelte';
|
||||
@@ -0,0 +1,183 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import * as Select from '@cio/ui/base/select';
|
||||
import { Search } from '@cio/ui/custom/search';
|
||||
import MessageCirclePlusIcon from '@lucide/svelte/icons/message-circle-plus';
|
||||
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
import { courses } from '$lib/features/course/utils/store';
|
||||
import { calDateDiff } from '$lib/utils/functions/date';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import { fetchCourses } from '$lib/utils/services/courses';
|
||||
import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
|
||||
import MessageSquareMoreIcon from '@lucide/svelte/icons/message-square-more';
|
||||
|
||||
import { CommunityListLoader } from '../components';
|
||||
import Vote from '$lib/components/Vote/index.svelte';
|
||||
import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
|
||||
import { Empty } from '@cio/ui/custom/empty';
|
||||
import * as Page from '@cio/ui/base/page';
|
||||
|
||||
import { AskCommunityButton } from '../components';
|
||||
|
||||
interface Props {
|
||||
isLMS?: boolean;
|
||||
}
|
||||
|
||||
let { isLMS = false }: Props = $props();
|
||||
|
||||
let isLoading = $state(false);
|
||||
let discussions = $state([]);
|
||||
let searchValue = $state('');
|
||||
let allCourses: any[] = $state([]);
|
||||
let selectedId = $state('');
|
||||
|
||||
function fetchCommunityQuestions(orgId?: string, profileId?: string) {
|
||||
if (!orgId || !profileId) return;
|
||||
|
||||
untrack(async () => {
|
||||
isLoading = true;
|
||||
|
||||
if ($courses.length) {
|
||||
allCourses = [...$courses];
|
||||
} else {
|
||||
const courseResult = (await fetchCourses(profileId, orgId)) || { allCourses: [] };
|
||||
allCourses = courseResult.allCourses;
|
||||
}
|
||||
|
||||
const courseIds = allCourses.map((course) => course.id);
|
||||
const courseIdsFilter = `(${courseIds.join(',')})`;
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('community_question')
|
||||
.select(
|
||||
`
|
||||
organization_id,
|
||||
course_id,
|
||||
title,
|
||||
votes,
|
||||
created_at,
|
||||
slug,
|
||||
comments:community_answer(count),
|
||||
author:profile(
|
||||
fullname
|
||||
),
|
||||
course!inner (
|
||||
title
|
||||
)
|
||||
`
|
||||
)
|
||||
.filter('course_id', 'in', courseIdsFilter)
|
||||
.order('created_at', { ascending: false });
|
||||
console.log('data', data);
|
||||
console.log('error', error);
|
||||
|
||||
isLoading = false;
|
||||
|
||||
if (error) {
|
||||
console.error('Error loading community', error);
|
||||
return goto(isLMS ? '/lms' : $currentOrgPath);
|
||||
}
|
||||
|
||||
discussions =
|
||||
data?.map((discussion) => ({
|
||||
title: discussion.title,
|
||||
courseId: discussion.course_id,
|
||||
courseTitle: discussion.course?.title,
|
||||
slug: discussion.slug,
|
||||
author: discussion?.author?.fullname,
|
||||
comments: discussion.comments?.[0]?.count || 0,
|
||||
votes: discussion.votes,
|
||||
createdAt: calDateDiff(discussion.created_at)
|
||||
})) || [];
|
||||
});
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
fetchCommunityQuestions($currentOrg.id, $profile.id);
|
||||
});
|
||||
|
||||
let filteredDiscussions = $derived(
|
||||
discussions.filter(
|
||||
(discussion) =>
|
||||
discussion.title.toLowerCase().includes(searchValue.toLowerCase()) &&
|
||||
(!selectedId || discussion.courseId === selectedId)
|
||||
)
|
||||
);
|
||||
</script>
|
||||
|
||||
<Page.BodyHeader>
|
||||
<Search placeholder={$t('community.find_question')} bind:value={searchValue} />
|
||||
|
||||
<Select.Root type="single" bind:value={selectedId}>
|
||||
<Select.Trigger class="w-full bg-gray-100 dark:bg-neutral-800">
|
||||
<p class="truncate">
|
||||
{selectedId ? allCourses.find((course) => course.id === selectedId)?.title : $t('community.all')}
|
||||
</p>
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Item value="">{$t('community.all')}</Select.Item>
|
||||
{#each allCourses as course}
|
||||
<Select.Item value={course.id}>{course.title}</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</Page.BodyHeader>
|
||||
|
||||
{#if isLoading}
|
||||
<CommunityListLoader />
|
||||
<CommunityListLoader />
|
||||
<CommunityListLoader />
|
||||
<CommunityListLoader />
|
||||
{:else}
|
||||
{#each filteredDiscussions as discussion}
|
||||
<div
|
||||
class="border-c m-auto my-4 flex flex-wrap items-center justify-center rounded bg-gray-100 lg:justify-start dark:bg-neutral-800"
|
||||
>
|
||||
<div class="border-bottom-c flex w-full p-3">
|
||||
<Vote value={discussion.votes} />
|
||||
<div class="flex flex-col gap-y-0.5 text-sm">
|
||||
<h4 class="mt-0">
|
||||
<a class="text-black dark:text-white" href="{isLMS ? '/lms' : $currentOrgPath}/community/{discussion.slug}">
|
||||
{discussion.title}
|
||||
</a>
|
||||
</h4>
|
||||
<span class="text-gray-600 dark:text-white">
|
||||
{discussion.author} asked {discussion.createdAt}
|
||||
</span>
|
||||
<a class="m-0" href="/courses/{discussion.courseId}">
|
||||
<span class="text-primary-200 text-primary-700 p-0 text-xs dark:text-black">
|
||||
#{discussion.courseTitle}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-grow"></div>
|
||||
<div class="flex items-center">
|
||||
<MessageCirclePlusIcon size={16} />
|
||||
<span class="ml-1">{discussion.comments}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<Empty
|
||||
title={$t('community.no_question')}
|
||||
description={$t('community.ask_a_question')}
|
||||
icon={MessageSquareMoreIcon}
|
||||
variant="page"
|
||||
>
|
||||
<AskCommunityButton />
|
||||
</Empty>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
export { default as CommunityPage } from './community.svelte';
|
||||
Reference in New Issue
Block a user