CLASSROOMIO-T-80: Replace sapper with sveltekit
This commit is contained in:
Rotimi Best
@@ -0,0 +1,5 @@
|
||||
export const load = ({ params = { id: '' } }) => {
|
||||
return {
|
||||
courseId: params.id,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,253 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
|
||||
import {
|
||||
fetchCourse,
|
||||
deleteGroupMember,
|
||||
updatedGroupMember,
|
||||
} from '$lib/utils/services/courses';
|
||||
import EditIcon from 'carbon-icons-svelte/lib/Edit.svelte';
|
||||
import CopyIcon from 'carbon-icons-svelte/lib/Copy.svelte';
|
||||
import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
|
||||
import Avatar from '$lib/components/Avatar/index.svelte';
|
||||
import PageNav from '$lib/components/PageNav/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
import Select from '$lib/components/Form/Select.svelte';
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
import PageBody from '$lib/components/PageBody/index.svelte';
|
||||
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
|
||||
import { setCourse, course, group } from '$lib/components/Course/store';
|
||||
import InviationModal from '$lib/components/Course/components/People/InviationModal.svelte';
|
||||
import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
|
||||
import {
|
||||
invitationModal,
|
||||
deleteMemberModal,
|
||||
} from '$lib/components/Course/components/People/store';
|
||||
import type {
|
||||
Person,
|
||||
ProfileRole,
|
||||
} from '$lib/components/Course/components/People/types';
|
||||
import { ROLE_LABEL, ROLES } from '$lib/utils/constants/roles';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
import { snackbarStore } from '$lib/components/Snackbar/store';
|
||||
|
||||
export let data;
|
||||
const { courseId } = data;
|
||||
|
||||
let people: Array<Person> = [];
|
||||
let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
|
||||
let member: { id?: string; email?: string; profile?: { email: string } } = {};
|
||||
let shouldEditMemberId: string | null = null;
|
||||
let filterBy: ProfileRole = ROLES[0];
|
||||
let isStudent = false;
|
||||
|
||||
// function setPeople(people: Array<Person>) {
|
||||
// if (!Array.isArray(people)) return;
|
||||
|
||||
// people = (people || []).sort((a, b) => a.role_id - b.role_id);
|
||||
// console.log(`people changed`, people);
|
||||
// }
|
||||
|
||||
async function deletePerson() {
|
||||
$group.people = $group.people.filter(
|
||||
(person: { id: string }) => person.id !== member.id
|
||||
);
|
||||
|
||||
await deleteGroupMember(member.id);
|
||||
}
|
||||
|
||||
async function editMemberId(person: Person) {
|
||||
await updatedGroupMember(
|
||||
{ assigned_student_id: person.assigned_student_id },
|
||||
{ id: person.id }
|
||||
);
|
||||
shouldEditMemberId = null;
|
||||
}
|
||||
|
||||
function sortAndFilterPeople(_people: Array<Person>, filterBy: ProfileRole) {
|
||||
people = (_people || [])
|
||||
.filter((person) => {
|
||||
if (filterBy.value === 'all') return true;
|
||||
|
||||
return person.role_id === filterBy.value;
|
||||
})
|
||||
.sort((a: Person, b: Person) => a.role_id - b.role_id);
|
||||
}
|
||||
|
||||
function handleEditStudentIdMode(personId: string) {
|
||||
shouldEditMemberId = personId;
|
||||
}
|
||||
|
||||
function copyToClipboard(studentAssignedId: string | null) {
|
||||
$snackbarStore.open = true;
|
||||
$snackbarStore.message = `Copied to clipboard`;
|
||||
|
||||
if (studentAssignedId) {
|
||||
copy(studentAssignedId);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if ($course.id) return;
|
||||
const { data } = await fetchCourse(courseId);
|
||||
setCourse(data);
|
||||
});
|
||||
|
||||
$: sortAndFilterPeople($group.people, filterBy);
|
||||
</script>
|
||||
|
||||
<InviationModal />
|
||||
<DeleteConfirmation
|
||||
email={member.email || (member.profile && member.profile.email)}
|
||||
{deletePerson}
|
||||
/>
|
||||
|
||||
<CourseContainer bind:isStudent>
|
||||
<PageNav title="People" disableSticky={true}>
|
||||
<slot:fragment slot="widget">
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<PrimaryButton
|
||||
className="mr-2"
|
||||
label="Add"
|
||||
onClick={() => ($invitationModal.open = true)}
|
||||
/>
|
||||
</RoleBasedSecurity>
|
||||
</slot:fragment>
|
||||
</PageNav>
|
||||
<PageBody className="">
|
||||
<div class="mb-3">
|
||||
<Select
|
||||
label="Filter by"
|
||||
bind:value={filterBy}
|
||||
options={ROLES}
|
||||
className="flex items-center dark:text-black"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="table rounded-md border border-gray-300 w-full">
|
||||
<div
|
||||
class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3"
|
||||
>
|
||||
<span class="dark:text-white w-1/4 text-center">ID</span>
|
||||
<!-- <span class="flex-grow" /> -->
|
||||
<p class="dark:text-white text-lg w-2/4">Name</p>
|
||||
<p class="dark:text-white text-lg w-1/4">Role</p>
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<p class="dark:text-white hidden lg:block text-lg w-20" />
|
||||
</RoleBasedSecurity>
|
||||
</div>
|
||||
|
||||
{#each people as person}
|
||||
<div class="flex relative items-center p-3 {borderBottomGrey}">
|
||||
{#if shouldEditMemberId === person.id}
|
||||
<TextField
|
||||
bind:value={person.assigned_student_id}
|
||||
type="string"
|
||||
placeholder="Unique ID"
|
||||
className="w-1/4"
|
||||
onChange={() => editMemberId(person)}
|
||||
/>
|
||||
{:else}
|
||||
<div class="student-id flex items-center justify-between relative">
|
||||
<p class="dark:text-white w-11/12">
|
||||
{person.assigned_student_id || '-'}
|
||||
</p>
|
||||
{#if !isStudent}
|
||||
<div class="absolute edit-btn">
|
||||
<IconButton
|
||||
onClick={() => handleEditStudentIdMode(person.id)}
|
||||
>
|
||||
<EditIcon size={16} class="carbon-icon active" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={() => copyToClipboard(person.assigned_student_id)}
|
||||
>
|
||||
<CopyIcon size={16} class="carbon-icon active" />
|
||||
</IconButton>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<!-- <span class="flex-grow" /> -->
|
||||
{#if person.profile}
|
||||
<div class="w-2/4 mx-2 flex items-center">
|
||||
<Avatar
|
||||
src={person.profile.avatar_url}
|
||||
name={person.profile.fullname}
|
||||
/>
|
||||
<div class="ml-2 break-all">
|
||||
<p class="dark:text-white text-lg">{person.profile.fullname}</p>
|
||||
{#if !isStudent}
|
||||
<a
|
||||
href="mailto:{person.profile.email}"
|
||||
class="text-md text-blue-600"
|
||||
>
|
||||
{person.profile.email}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="break-all w-2/4 mx-2">
|
||||
<p
|
||||
class="bg-yellow-500 pending text-sm text-center rounded-xl text-white"
|
||||
>
|
||||
Pending Invite
|
||||
</p>
|
||||
<a href="mailto:{person.email}" class="text-md text-blue-600">
|
||||
{person.email}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<p class="dark:text-white text-lg w-1/4">
|
||||
{ROLE_LABEL[person.role_id]}
|
||||
</p>
|
||||
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
<div class="hidden lg:block w-20">
|
||||
{#if person.profile_id !== $profile.id}
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
member = person;
|
||||
$deleteMemberModal.open = true;
|
||||
}}
|
||||
>
|
||||
<TrashCanIcon size={24} class="carbon-icon" />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</div>
|
||||
</RoleBasedSecurity>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</PageBody>
|
||||
</CourseContainer>
|
||||
|
||||
<style>
|
||||
.pending {
|
||||
width: fit-content;
|
||||
padding: 1px 15px;
|
||||
}
|
||||
|
||||
.student-id {
|
||||
width: 155px;
|
||||
}
|
||||
|
||||
.student-id p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
display: none;
|
||||
}
|
||||
.student-id:hover .edit-btn {
|
||||
display: flex;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user