Add new org improvements
This commit is contained in:
Rotimi Best
@@ -0,0 +1,146 @@
|
||||
<script lang="ts">
|
||||
import Modal from '$lib/components/Modal/index.svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { supabase } from '$lib/utils/functions/supabase';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { generateSitename } from '$lib/utils/functions/org';
|
||||
import { getOrganizations } from '$lib/utils/services/org';
|
||||
import { blockedSubdomain } from '$lib/utils/constants/app';
|
||||
import { newOrgModal } from '../store';
|
||||
import { snackbarStore } from '$lib/components/Snackbar/store';
|
||||
import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
|
||||
import { createOrgValidation } from '$lib/utils/functions/validator';
|
||||
|
||||
type Error = {
|
||||
orgName: string;
|
||||
siteName: string;
|
||||
};
|
||||
let loading = false;
|
||||
let orgName = '';
|
||||
let siteName = '';
|
||||
|
||||
let errors: Error = {
|
||||
orgName: '',
|
||||
siteName: ''
|
||||
};
|
||||
|
||||
function resetForm() {
|
||||
orgName = '';
|
||||
siteName = '';
|
||||
loading = false;
|
||||
|
||||
errors = {
|
||||
orgName: '',
|
||||
siteName: ''
|
||||
};
|
||||
}
|
||||
|
||||
async function createNewOrg() {
|
||||
errors = createOrgValidation({
|
||||
orgName,
|
||||
siteName
|
||||
}) as Error;
|
||||
|
||||
if (Object.values(errors).length) {
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
// Validate if domain is among our seculeded subdomains
|
||||
if (blockedSubdomain.includes(siteName || '')) {
|
||||
errors.siteName = 'Sitename already exists.';
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const { data: org, error } = await supabase
|
||||
.from('organization')
|
||||
.insert({
|
||||
name: orgName,
|
||||
siteName: siteName
|
||||
})
|
||||
.select();
|
||||
console.log('Create organisation', org);
|
||||
|
||||
if (error) {
|
||||
console.log('Error: create organisation', error);
|
||||
errors.siteName = 'Sitename already exists.';
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (Array.isArray(org) && org.length) {
|
||||
const orgData = org[0];
|
||||
const { data, error } = await supabase
|
||||
.from('organizationmember')
|
||||
.insert({
|
||||
organization_id: orgData.id,
|
||||
profile_id: $profile.id,
|
||||
role_id: 1
|
||||
})
|
||||
.select();
|
||||
|
||||
console.log('Create organisation member', data);
|
||||
|
||||
if (error) {
|
||||
console.log('Error: create organisation member', error);
|
||||
errors.siteName =
|
||||
'Something went wrong while creating this organization. Please reload and try again';
|
||||
|
||||
// Delete organization so it can be recreated.
|
||||
await supabase.from('organization').delete().match({ siteName });
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
$snackbarStore.open = true;
|
||||
$snackbarStore.message = 'Org created Successfully';
|
||||
$snackbarStore.severity = SNACKBAR_SEVERITY.SUCCESS;
|
||||
|
||||
await getOrganizations($profile.id);
|
||||
|
||||
resetForm();
|
||||
|
||||
$newOrgModal.open = false;
|
||||
}
|
||||
}
|
||||
|
||||
$: siteName = generateSitename(orgName);
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
onClose={() => ($newOrgModal.open = false)}
|
||||
bind:open={$newOrgModal.open}
|
||||
width="w-96"
|
||||
modalHeading="Create Organization"
|
||||
>
|
||||
<form on:submit|preventDefault={createNewOrg} class="px-2">
|
||||
<TextField
|
||||
label="Name of Organization"
|
||||
bind:value={orgName}
|
||||
autoFocus={true}
|
||||
placeholder="e.g Pepsi Co"
|
||||
className="mb-4"
|
||||
isRequired={true}
|
||||
errorMessage={errors.orgName}
|
||||
autoComplete={false}
|
||||
/>
|
||||
<!-- Org Site Name -->
|
||||
<TextField
|
||||
label="Organisation Site name"
|
||||
helperMessage={`https://${siteName || ''}.classroomio.com`}
|
||||
bind:value={siteName}
|
||||
name="sitename"
|
||||
type="text"
|
||||
placeholder="e.g edforall"
|
||||
className="mb-5 w-full"
|
||||
labelClassName="text-lg font-normal"
|
||||
errorMessage={errors.siteName}
|
||||
isRequired={true}
|
||||
/>
|
||||
|
||||
<div class="mt-5 flex items-center flex-row-reverse">
|
||||
<PrimaryButton className="px-6 py-3" label="Create" type="submit" isLoading={loading} />
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
@@ -270,12 +270,14 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-container my-4 mx-2">
|
||||
{#if $courseMetaDeta.isLoading}
|
||||
{#if $courseMetaDeta.isLoading}
|
||||
<div class="cards-container my-4 mx-2">
|
||||
<CardLoader />
|
||||
<CardLoader />
|
||||
<CardLoader />
|
||||
{:else}
|
||||
</div>
|
||||
{:else if $courses.length > 0}
|
||||
<div class="cards-container my-4 mx-2">
|
||||
{#each $courses.slice(0, viewAll ? $courses.length : 3) as courseData}
|
||||
<Card
|
||||
id={courseData.id}
|
||||
@@ -290,17 +292,17 @@
|
||||
totalLessons={get(courseData, 'lessons[0].count', 0)}
|
||||
isOnLandingPage={true}
|
||||
/>
|
||||
{:else}
|
||||
<Box>
|
||||
<CoursesEmptyIcon />
|
||||
<h3 class="dark:text-white text-2xl my-5">No Course Published</h3>
|
||||
<p class="dark:text-white w-1/3 text-center">
|
||||
We've got great courses coming your way, stay tuned!!!
|
||||
</p>
|
||||
</Box>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<Box>
|
||||
<CoursesEmptyIcon />
|
||||
<h3 class="dark:text-white text-2xl my-5">No Course Published</h3>
|
||||
<p class="dark:text-white w-1/3 text-center">
|
||||
We've got great courses coming your way, stay tuned!!!
|
||||
</p>
|
||||
</Box>
|
||||
{/if}
|
||||
|
||||
{#if $courses.length > 3}
|
||||
<div class="w-full flex justify-center">
|
||||
|
||||
@@ -74,16 +74,16 @@ export let landingPageSettings: Writable<OrgLandingPageJson> = writable({
|
||||
},
|
||||
video: {
|
||||
show: true,
|
||||
link: 'https://www.youtube.com/watch?v=bbVZo4Yw7pI'
|
||||
link: 'https://www.youtube.com/watch?v=qqAYW7uxErI'
|
||||
},
|
||||
show: false
|
||||
show: true
|
||||
},
|
||||
aboutUs: {
|
||||
title: 'Our Story',
|
||||
content:
|
||||
'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae, quaerat cum. Ullam similique quae dicta ipsum atque quam fugit iusto eligendi magni voluptatum aut, exercitationem deserunt vitae iste rem sunt!\nLorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores obcaecati veritatis tenetur in, nihil repellat quasi cumque sed molestias id reiciendis harum doloremque minus fugit quia cum dolores quas pariatur.',
|
||||
imageUrl: '',
|
||||
show: false
|
||||
show: true
|
||||
},
|
||||
courses: {
|
||||
title: 'Explore our',
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<script>
|
||||
<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';
|
||||
@@ -43,7 +43,7 @@
|
||||
}
|
||||
];
|
||||
|
||||
function isActive(pagePath, itemPath) {
|
||||
function isActive(pagePath: string, itemPath: string) {
|
||||
const pageLinkItems = pagePath.split('/');
|
||||
const itemLinkItems = itemPath.split('/');
|
||||
|
||||
@@ -61,8 +61,8 @@
|
||||
<aside
|
||||
class={`${
|
||||
$menu.hidden
|
||||
? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[9999]'
|
||||
: 'translate-x-0 absolute md:relative z-[9999]'
|
||||
? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
|
||||
: 'translate-x-0 absolute md:relative z-40'
|
||||
} transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-48px)] md:h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
|
||||
>
|
||||
<div class="h-full flex flex-col">
|
||||
@@ -97,13 +97,13 @@
|
||||
: 'dark:text-white'}"
|
||||
>
|
||||
{#if menuItem.path === ''}
|
||||
<HomeIcon color="#7A797D" />
|
||||
<HomeIcon />
|
||||
{:else if menuItem.path === '/courses'}
|
||||
<CourseIcon color="#7A797D" />
|
||||
<CourseIcon />
|
||||
{:else if menuItem.path === '/site'}
|
||||
<SiteSettingsIcon />
|
||||
{:else if menuItem.path === '/community'}
|
||||
<ForumIcon size={24} class="carbon-icon dark:text-white fill-[#7A797D]" />
|
||||
<ForumIcon size={24} class="carbon-icon dark:fill-[#fff] fill-[#000]" />
|
||||
{:else if menuItem.path === '/quiz'}
|
||||
<QuizIcon />
|
||||
{:else if menuItem.path === '/audience'}
|
||||
|
||||
@@ -3,3 +3,7 @@ import { writable } from 'svelte/store';
|
||||
export const menu = writable({
|
||||
hidden: true
|
||||
});
|
||||
|
||||
export const newOrgModal = writable({
|
||||
open: false
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user