CLASSROOMIO-T-5: Educators Settings CRUD
Co-authored-by: Rotimi Best <[email protected]> Merge-request: CLASSROOMIO-MR-7 Merged-by: Digdippa Team <[email protected]>
This commit is contained in:
Rotimi Best
committed by
Space Cloud
Space Cloud
co-authored by
Rotimi Best
Rotimi Best
parent
01a1f0f907
commit
5f14b36ef8
@@ -0,0 +1,47 @@
|
||||
<script>
|
||||
import {
|
||||
DataTable,
|
||||
Toolbar,
|
||||
ToolbarContent,
|
||||
ToolbarSearch,
|
||||
Pagination,
|
||||
DataTableSkeleton,
|
||||
} from 'carbon-components-svelte';
|
||||
import { orgAudience } from '../../../utils/store/org';
|
||||
|
||||
export let isLoading = false;
|
||||
|
||||
const headers = [
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'email', value: 'Email' },
|
||||
{ key: 'date_joined', value: 'Date Joined' },
|
||||
];
|
||||
let pageSize = 5;
|
||||
let page = 1;
|
||||
let filteredRowIds = [];
|
||||
let searchValue = '';
|
||||
</script>
|
||||
|
||||
{#if isLoading}
|
||||
<DataTableSkeleton {headers} rows={pageSize} />
|
||||
{:else}
|
||||
<DataTable size="tall" {headers} rows={$orgAudience} {pageSize} {page}>
|
||||
<Toolbar>
|
||||
<ToolbarContent>
|
||||
<ToolbarSearch
|
||||
persistent
|
||||
value={searchValue}
|
||||
shouldFilterRows
|
||||
bind:filteredRowIds
|
||||
/>
|
||||
</ToolbarContent>
|
||||
</Toolbar>
|
||||
</DataTable>
|
||||
{/if}
|
||||
|
||||
<Pagination
|
||||
bind:pageSize
|
||||
bind:page
|
||||
totalItems={filteredRowIds.length}
|
||||
pageSizeInputDisabled
|
||||
/>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import Box from '../../Box/index.svelte';
|
||||
import AudienceList from './AudienceList.svelte';
|
||||
import AudienceEmptyIcon from '../../Icons/AudienceEmptyIcon.svelte';
|
||||
import { getOrgAudience } from '../../../utils/services/org';
|
||||
import { orgAudience, currentOrg } from '../../../utils/store/org';
|
||||
|
||||
let isLoading = false;
|
||||
onMount(async () => {
|
||||
isLoading = true;
|
||||
await getOrgAudience($currentOrg.id);
|
||||
isLoading = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto"
|
||||
>
|
||||
{#if $orgAudience.length || isLoading}
|
||||
<AudienceList {isLoading} />
|
||||
{:else}
|
||||
<Box>
|
||||
<AudienceEmptyIcon />
|
||||
<h3 class="text-2xl my-5">No audience to manage!</h3>
|
||||
<p class="w-1/3 text-center">
|
||||
Manage all your students here and stay connected with them.
|
||||
</p>
|
||||
</Box>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,98 @@
|
||||
<script>
|
||||
import { goto } from '@sapper/app';
|
||||
import { Grid, Row, Column } from 'carbon-components-svelte';
|
||||
import TextField from '../../Form/TextField.svelte';
|
||||
import ComingSoon from '../../ComingSoon/index.svelte';
|
||||
import PrimaryButton from '../../PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '../../PrimaryButton/constants';
|
||||
import { currentOrg } from '../../../utils/store/org';
|
||||
import { supabase } from '../../../utils/functions/supabase';
|
||||
import { snackbarStore } from '../../Snackbar/store';
|
||||
import { SNACKBAR_SEVERITY } from '../../Snackbar/constants';
|
||||
|
||||
let siteName;
|
||||
let errors = '';
|
||||
let isLoading = false;
|
||||
|
||||
async function handleChangeDomain() {
|
||||
isLoading = true;
|
||||
|
||||
const { data: org, error } = await supabase
|
||||
.from('organization')
|
||||
.update(
|
||||
{ siteName },
|
||||
{
|
||||
returning: 'minimal', // Don't return the value after inserting
|
||||
}
|
||||
)
|
||||
.match({ id: $currentOrg.id });
|
||||
|
||||
console.log('Updating organisation', org);
|
||||
if (error) {
|
||||
console.log('Error: create organisation', error);
|
||||
errors = 'Sitename already exists.';
|
||||
} else {
|
||||
$snackbarStore.open = true;
|
||||
$snackbarStore.message = 'Success';
|
||||
$snackbarStore.severity = SNACKBAR_SEVERITY.SUCCESS;
|
||||
$currentOrg.siteName = siteName;
|
||||
|
||||
goto(`/org/${$currentOrg.siteName}/settings/domains`);
|
||||
}
|
||||
|
||||
isLoading = false;
|
||||
}
|
||||
|
||||
function setSiteName(_siteName) {
|
||||
if (!siteName) {
|
||||
siteName = _siteName;
|
||||
}
|
||||
}
|
||||
|
||||
$: setSiteName($currentOrg.siteName);
|
||||
</script>
|
||||
|
||||
<Grid class="border rounded border-gray-200 w-full mt-5">
|
||||
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
|
||||
<Column sm={2} md={2} lg={4} class="text-lg"><strong>Add</strong></Column>
|
||||
<Column sm={2} md={6} lg={8}>
|
||||
<p class="text-md text-gray-500 mb-5">
|
||||
Add your team mates or collaborators to your organization. Start working
|
||||
together
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<!-- Org Site Name -->
|
||||
<TextField
|
||||
label="URL"
|
||||
helperMessage={`https://${siteName || ''}.classroomio.com`}
|
||||
bind:value={siteName}
|
||||
type="text"
|
||||
placeholder="e.g traversymedia"
|
||||
className="mb-5 w-full"
|
||||
labelClassName=""
|
||||
errorMessage={errors}
|
||||
/>
|
||||
<PrimaryButton
|
||||
label="Change Domain"
|
||||
className="mb-6 py-4"
|
||||
variant={VARIANTS.CONTAINED}
|
||||
onClick={handleChangeDomain}
|
||||
isDisabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
|
||||
<Column sm={2} md={2} lg={4} class="text-lg"
|
||||
><strong>Custom domain</strong></Column
|
||||
>
|
||||
<Column sm={2} md={6} lg={8}>
|
||||
<div class="flex items-center">
|
||||
<p class="mr-3">Add your own domain name</p>
|
||||
<ComingSoon />
|
||||
</div>
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
@@ -0,0 +1,141 @@
|
||||
<script>
|
||||
import { goto } from '@sapper/app';
|
||||
import { Grid, Row, Column } from 'carbon-components-svelte';
|
||||
import TextField from '../../Form/TextField.svelte';
|
||||
import PrimaryButton from '../../PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '../../PrimaryButton/constants';
|
||||
import UploadImage from '../../UploadImage/index.svelte';
|
||||
import { supabase } from '../../../utils/functions/supabase';
|
||||
import { snackbarStore } from '../../Snackbar/store';
|
||||
import { SNACKBAR_SEVERITY } from '../../Snackbar/constants';
|
||||
import { currentOrg } from '../../../utils/store/org';
|
||||
|
||||
let avatar;
|
||||
let loading = false;
|
||||
|
||||
async function handleUpdate() {
|
||||
try {
|
||||
loading = true;
|
||||
|
||||
const updates = {
|
||||
name: $currentOrg.name,
|
||||
};
|
||||
|
||||
if (avatar) {
|
||||
const filename = `user/${$currentOrg.name + Date.now()}.webp`;
|
||||
|
||||
const { data } = await supabase.storage
|
||||
.from('avatars')
|
||||
.upload(filename, avatar, {
|
||||
cacheControl: '3600',
|
||||
upsert: false,
|
||||
});
|
||||
|
||||
if (data && data.Key) {
|
||||
const { publicURL } = supabase.storage
|
||||
.from('avatars')
|
||||
.getPublicUrl(filename);
|
||||
|
||||
updates.avatar_url = publicURL;
|
||||
$currentOrg.avatar_url = publicURL;
|
||||
}
|
||||
avatar = undefined;
|
||||
}
|
||||
|
||||
let { error } = await supabase
|
||||
.from('organization')
|
||||
.update(updates, {
|
||||
returning: 'minimal', // Don't return the value after inserting
|
||||
})
|
||||
.match({ id: $currentOrg.id });
|
||||
|
||||
currentOrg.update((_currentOrg) => ({
|
||||
..._currentOrg,
|
||||
...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;
|
||||
}
|
||||
}
|
||||
|
||||
function gotoSetting(pathname) {
|
||||
goto(`/org/${$currentOrg.siteName}/settings${pathname}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Grid class="border rounded border-gray-200 w-full mt-5">
|
||||
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
|
||||
<Column sm={2} md={2} lg={4}><strong>Organization Profile</strong></Column>
|
||||
<Column sm={2} md={6} lg={8}>
|
||||
<TextField
|
||||
label="Organization Name"
|
||||
bind:value={$currentOrg.name}
|
||||
className="w-60 mb-5"
|
||||
/>
|
||||
<UploadImage
|
||||
bind:avatar
|
||||
src={$currentOrg.avatar_url}
|
||||
shape="rounded-md"
|
||||
widthHeight="w-24 h-24"
|
||||
/>
|
||||
<PrimaryButton
|
||||
label="Update Organization"
|
||||
className="px-6 py-3 mr-5 mt-5"
|
||||
isLoading={loading}
|
||||
isDisabled={loading}
|
||||
onClick={handleUpdate}
|
||||
/>
|
||||
</Column>
|
||||
</Row>
|
||||
<!-- <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
|
||||
<Column sm={2} md={2} lg={4}><strong>Theme</strong></Column>
|
||||
<Column sm={2} md={6} lg={8}>
|
||||
<h4>Set your brand</h4>
|
||||
</Column>
|
||||
</Row> -->
|
||||
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
|
||||
<Column sm={2} md={2} lg={4}><strong>Custom Domain</strong></Column>
|
||||
<Column sm={2} md={6} lg={8}>
|
||||
<h4>Customise your Domain</h4>
|
||||
<p class="text-sm text-gray-500">
|
||||
Create a custom URL so your audience can get to your organization easily
|
||||
</p>
|
||||
<PrimaryButton
|
||||
label="Edit domain"
|
||||
className="my-7 py-5 px-10 text-blue-700"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
onClick={() => gotoSetting('/domains')}
|
||||
/>
|
||||
</Column>
|
||||
</Row>
|
||||
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
|
||||
<Column sm={2} md={2} lg={4}><strong>Team</strong></Column>
|
||||
<Column sm={2} md={6} lg={8}>
|
||||
<h4>Set up your website</h4>
|
||||
<p class="text-sm text-gray-500">
|
||||
Add team mates to your organization so you can both collaborate on
|
||||
projects.
|
||||
</p>
|
||||
<PrimaryButton
|
||||
label="Manage Team"
|
||||
className="my-7 py-5 px-10 text-blue-700"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
onClick={() => gotoSetting('/teams')}
|
||||
/>
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
@@ -0,0 +1,129 @@
|
||||
<script>
|
||||
import { goto } from '@sapper/app';
|
||||
import { Grid, Row, Column } from 'carbon-components-svelte';
|
||||
import TextField from '../../Form/TextField.svelte';
|
||||
import PrimaryButton from '../../PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '../../PrimaryButton/constants';
|
||||
import UploadImage from '../../UploadImage/index.svelte';
|
||||
import { supabase } from '../../../utils/functions/supabase';
|
||||
import { profile } from '../../../utils/store/user';
|
||||
import { snackbarStore } from '../../Snackbar/store';
|
||||
import { SNACKBAR_SEVERITY } from '../../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 && data.Key) {
|
||||
const { publicURL } = supabase.storage
|
||||
.from('avatars')
|
||||
.getPublicUrl(filename);
|
||||
|
||||
updates.avatar_url = publicURL;
|
||||
$profile.avatar_url = publicURL;
|
||||
}
|
||||
avatar = undefined;
|
||||
}
|
||||
|
||||
let { error } = await supabase
|
||||
.from('profile')
|
||||
.update(updates, {
|
||||
returning: 'minimal', // Don't return the value after inserting
|
||||
})
|
||||
.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 rounded border-gray-200 w-full mt-5">
|
||||
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
|
||||
<Column sm={2} md={2} lg={4}><strong>Profile Picture</strong></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 border-t-0 border-l-0 border-r-0 border-gray-300">
|
||||
<Column sm={2} md={2} lg={4}><strong>Personal Information</strong></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="px-6 py-3 mr-5"
|
||||
isLoading={loading}
|
||||
isDisabled={loading}
|
||||
onClick={handleUpdate}
|
||||
/>
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
variant={VARIANTS.CONTAINED_DANGER}
|
||||
label="Log out"
|
||||
onClick={logout}
|
||||
/>
|
||||
</Row>
|
||||
</Grid>
|
||||
@@ -0,0 +1,205 @@
|
||||
<script>
|
||||
import {
|
||||
Grid,
|
||||
Row,
|
||||
Column,
|
||||
Select,
|
||||
SelectItem,
|
||||
} from 'carbon-components-svelte';
|
||||
import { Moon } from 'svelte-loading-spinners';
|
||||
import TextField from '../../Form/TextField.svelte';
|
||||
import TextChip from '../../Chip/Text.svelte';
|
||||
import ComingSoon from '../../ComingSoon/index.svelte';
|
||||
import PrimaryButton from '../../PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '../../PrimaryButton/constants';
|
||||
import { validateEmailInString } from '../../../utils/functions/validator';
|
||||
import { ROLE_LABEL, ROLE } from '../../../utils/constants/roles';
|
||||
import { currentOrg, orgTeam } from '../../../utils/store/org';
|
||||
import { snackbarStore } from '../../Snackbar/store';
|
||||
import { SNACKBAR_SEVERITY } from '../../Snackbar/constants';
|
||||
import { getOrgTeam } from '../../../utils/services/org';
|
||||
import { profile } from '../../../utils/store/user';
|
||||
import { supabase } from '../../../utils/functions/supabase';
|
||||
|
||||
let emailsStr = '';
|
||||
let errorMessage = '';
|
||||
let role = ROLE.ADMIN;
|
||||
let isFetching = false;
|
||||
let isLoading = false;
|
||||
let isRemoving = false;
|
||||
|
||||
async function onSendInvite() {
|
||||
const {
|
||||
hasError,
|
||||
error: _error,
|
||||
emails,
|
||||
} = validateEmailInString(emailsStr);
|
||||
|
||||
if (hasError) {
|
||||
errorMessage = _error;
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading = true;
|
||||
let apiError = '';
|
||||
emails.forEach(async (email, index) => {
|
||||
if (apiError) return;
|
||||
const { data, error } = await supabase.from('organizationmember').insert({
|
||||
organization_id: $currentOrg.id,
|
||||
email,
|
||||
role_id: role,
|
||||
verified: false,
|
||||
});
|
||||
console.log('data', data);
|
||||
|
||||
if (error) {
|
||||
apiError = error;
|
||||
console.error('onSendInvite:', error);
|
||||
$snackbarStore.open = true;
|
||||
$snackbarStore.message = `Failed to send invite, please try again`;
|
||||
$snackbarStore.severity = SNACKBAR_SEVERITY.ERROR;
|
||||
|
||||
isLoading = false;
|
||||
return;
|
||||
}
|
||||
const [newMember] = data || [];
|
||||
|
||||
if (newMember) {
|
||||
orgTeam.update((team) => [
|
||||
{
|
||||
id: newMember.id,
|
||||
email: newMember?.email,
|
||||
verified: newMember?.verified,
|
||||
role: ROLE_LABEL[newMember?.role_id] || '',
|
||||
isAdmin: newMember?.role_id === ROLE.ADMIN,
|
||||
},
|
||||
...team,
|
||||
]);
|
||||
}
|
||||
|
||||
const isLast = index === emails.length - 1;
|
||||
if (isLast) {
|
||||
$snackbarStore.open = true;
|
||||
$snackbarStore.message = 'Success';
|
||||
$snackbarStore.severity = SNACKBAR_SEVERITY.SUCCESS;
|
||||
|
||||
emailsStr = '';
|
||||
isLoading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function onRemove(id) {
|
||||
console.error('onRemove called');
|
||||
isRemoving = true;
|
||||
const { data, error } = await supabase
|
||||
.from('organizationmember')
|
||||
.delete()
|
||||
.match({ id });
|
||||
|
||||
if (error) {
|
||||
console.error('onRemove:', error);
|
||||
$snackbarStore.open = true;
|
||||
$snackbarStore.message = `Failed to remove user, please try again`;
|
||||
$snackbarStore.severity = SNACKBAR_SEVERITY.ERROR;
|
||||
} else if (data) {
|
||||
orgTeam.update((team) => team.filter((member) => member.id !== id));
|
||||
}
|
||||
|
||||
isRemoving = false;
|
||||
}
|
||||
|
||||
const fetchTeam = async (id) => {
|
||||
if (!id) return;
|
||||
|
||||
isFetching = true;
|
||||
await getOrgTeam(id);
|
||||
isFetching = false;
|
||||
};
|
||||
|
||||
const isTeamMemberAdmin = (members, profileId) => {
|
||||
return members.some(
|
||||
(member) => member.profileId === profileId && member.isAdmin
|
||||
);
|
||||
};
|
||||
|
||||
$: fetchTeam($currentOrg.id);
|
||||
</script>
|
||||
|
||||
<Grid class="border rounded border-gray-200 w-full mt-5">
|
||||
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
|
||||
<Column sm={2} md={2} lg={4} class="text-lg"><strong>Add</strong></Column>
|
||||
<Column sm={2} md={6} lg={8}>
|
||||
<p class="text-md text-gray-500 mb-5">
|
||||
Add your team mates or collaborators to your organization. Start working
|
||||
together
|
||||
</p>
|
||||
|
||||
<div class="">
|
||||
<TextField
|
||||
label="Invite"
|
||||
placeholder="email comma separated"
|
||||
bind:value={emailsStr}
|
||||
className="mb-3"
|
||||
{errorMessage}
|
||||
/>
|
||||
|
||||
<Select labelText="Role" bind:selected={role} class="mb-5 w-40">
|
||||
<SelectItem value={ROLE.ADMIN} text={ROLE_LABEL[ROLE.ADMIN]} />
|
||||
<SelectItem value={ROLE.TUTOR} text={ROLE_LABEL[ROLE.TUTOR]} />
|
||||
</Select>
|
||||
|
||||
<PrimaryButton
|
||||
label="Send Invite"
|
||||
onClick={onSendInvite}
|
||||
{isLoading}
|
||||
isDisabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
|
||||
<Column sm={2} md={2} lg={4} class="text-lg"
|
||||
><strong>Members</strong></Column
|
||||
>
|
||||
<Column sm={2} md={6} lg={8}>
|
||||
{#if isFetching}
|
||||
<Moon />
|
||||
{:else}
|
||||
{#each $orgTeam as teamMember}
|
||||
<div class="flex justify-between items-center mb-5">
|
||||
<div class="flex">
|
||||
<p class="text-sm text-gray-500 mr-3">
|
||||
{teamMember.email}
|
||||
</p>
|
||||
<TextChip
|
||||
value={teamMember.role}
|
||||
className="text-xs mr-3"
|
||||
size="sm"
|
||||
/>
|
||||
{#if !teamMember.verified}
|
||||
<TextChip
|
||||
value="Invite Sent"
|
||||
className="text-xs bg-yellow-200 text-yellow-700"
|
||||
size="sm"
|
||||
/>
|
||||
{:else if teamMember.profileId === $profile.id}
|
||||
<ComingSoon label="You" />
|
||||
{/if}
|
||||
</div>
|
||||
{#if teamMember.profileId !== $profile.id && isTeamMemberAdmin($orgTeam, $profile.id)}
|
||||
<PrimaryButton
|
||||
label="Remove"
|
||||
variant={VARIANTS.TEXT_DANGER}
|
||||
onClick={() => onRemove(teamMember.id)}
|
||||
isLoading={isRemoving}
|
||||
isDisabled={isRemoving}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script>
|
||||
import { Tabs, Tab, TabContent } from 'carbon-components-svelte';
|
||||
import Profile from './Profile.svelte';
|
||||
// import Account from './Account.svelte';
|
||||
import OrgSettings from './OrgSettings.svelte';
|
||||
</script>
|
||||
|
||||
<Tabs autoWidth>
|
||||
<Tab label="Profile" />
|
||||
<!-- <Tab label="Account" /> -->
|
||||
<Tab label="Organization Settings" />
|
||||
<svelte:fragment slot="content">
|
||||
<TabContent>
|
||||
<Profile />
|
||||
</TabContent>
|
||||
<!-- <TabContent>
|
||||
<Account />
|
||||
</TabContent> -->
|
||||
<TabContent>
|
||||
<OrgSettings />
|
||||
</TabContent>
|
||||
</svelte:fragment>
|
||||
</Tabs>
|
||||
@@ -1,6 +1,5 @@
|
||||
<script>
|
||||
import { stores } from '@sapper/app';
|
||||
import UserAvatar from 'carbon-icons-svelte/lib/UserAvatar20';
|
||||
import Help from 'carbon-icons-svelte/lib/Help20';
|
||||
|
||||
import TextChip from '../../components/Chip/Text.svelte';
|
||||
@@ -9,7 +8,9 @@
|
||||
import CourseIcon from '../../components/Icons/CourseIcon.svelte';
|
||||
import SiteSettingsIcon from '../../components/Icons/SiteSettingsIcon.svelte';
|
||||
import AudienceIcon from '../../components/Icons/AudienceIcon.svelte';
|
||||
import Avatar from '../../components/Avatar/index.svelte';
|
||||
import { currentOrg } from '../../utils/store/org';
|
||||
import { profile } from '../../utils/store/user';
|
||||
|
||||
let orgSiteName = '';
|
||||
let activeClass = 'bg-gray-200';
|
||||
@@ -32,10 +33,20 @@
|
||||
<aside class="root bg-gray-100 h-full">
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="border-b border-gray-200 pt-5 px-4">
|
||||
<TextChip
|
||||
value={$currentOrg.shortName}
|
||||
className="bg-blue-200 font-bold"
|
||||
/>
|
||||
{#if $currentOrg.avatar_url}
|
||||
<Avatar
|
||||
src={$currentOrg.avatar_url}
|
||||
name={$currentOrg.name}
|
||||
shape="rounded-md"
|
||||
width="w-7"
|
||||
height="h-7"
|
||||
/>
|
||||
{:else}
|
||||
<TextChip
|
||||
value={$currentOrg.shortName}
|
||||
className="bg-blue-200 font-bold"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<OrgSelector />
|
||||
|
||||
@@ -101,7 +112,12 @@
|
||||
`/org/${orgSiteName}/settings`
|
||||
) && activeClass}"
|
||||
>
|
||||
<UserAvatar />
|
||||
<Avatar
|
||||
src={$profile.avatar_url}
|
||||
name={$profile.username}
|
||||
width="w-7"
|
||||
height="h-7"
|
||||
/>
|
||||
<p class="ml-2">Settings</p>
|
||||
</li>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user