ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Delete member

Browse Source
This commit is contained in:
rotimi-best
2021-08-29 07:23:19 +03:00
parent ddf4955d80
commit 1900583e5f
14 changed files with 234 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+15 -1
View File
@@ -23,7 +23,8 @@
"node-sass": "^6.0.0",
"polka": "next",
"sapper-environment": "^1.0.1",
"sirv": "^1.0.0"
"sirv": "^1.0.0",
"svelte-easy-crop": "^1.0.4"
},
"devDependencies": {
"@babel/core": "^7.0.0",
@@ -5754,6 +5755,14 @@
"integrity": "sha512-DuSfie7xukV3AXlA9vFnIkit97LYNSDpKFmUBgL0RansnBrFvJoFpnsnuUW2ULfsYR1NpqZGmHAsgKQUeBf6Lg==",
"dev": true
},
"node_modules/svelte-easy-crop": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/svelte-easy-crop/-/svelte-easy-crop-1.0.4.tgz",
"integrity": "sha512-YWbayjPenBYx1b8Usbh70jXXSy/e2ggY7fYBnemefyXhnrccS6Ke4h2uBB07uGDZdwxQNZvS5ruoXwxxZQVo0g==",
"engines": {
"node": "14"
}
},
"node_modules/svelte-loading-spinners": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.1.7.tgz",
@@ -10987,6 +10996,11 @@
"integrity": "sha512-DuSfie7xukV3AXlA9vFnIkit97LYNSDpKFmUBgL0RansnBrFvJoFpnsnuUW2ULfsYR1NpqZGmHAsgKQUeBf6Lg==",
"dev": true
},
"svelte-easy-crop": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/svelte-easy-crop/-/svelte-easy-crop-1.0.4.tgz",
"integrity": "sha512-YWbayjPenBYx1b8Usbh70jXXSy/e2ggY7fYBnemefyXhnrccS6Ke4h2uBB07uGDZdwxQNZvS5ruoXwxxZQVo0g=="
},
"svelte-loading-spinners": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.1.7.tgz",
package.json
+3 -2
View File
@@ -25,7 +25,8 @@
"node-sass": "^6.0.0",
"polka": "next",
"sapper-environment": "^1.0.1",
"sirv": "^1.0.0"
"sirv": "^1.0.0",
"svelte-easy-crop": "^1.0.4"
},
"devDependencies": {
"@babel/core": "^7.0.0",
@@ -59,4 +60,4 @@
"tslib": "^2.3.1",
"typescript": "^4.1.3"
}
}
}
src/components/Course/components/Lesson/Exercises/index.svelte
+7
View File
@@ -1,5 +1,7 @@
<script>
import { onMount } from 'svelte';
import AudioConsole32 from 'carbon-icons-svelte/lib/AudioConsole32';
import Box from '../../../../Box/index.svelte';
import PrimaryButton from '../../../../PrimaryButton/index.svelte';
import PageBody from '../../../../PageBody/index.svelte';
import Modal from '../../../../Modal/index.svelte';
@@ -144,6 +146,11 @@
<h3 class="text-xl">{exercise.title}</h3>
<p class="mt-4 text-sm">Created Jul 3, 2021</p>
</a>
{:else}
<Box>
<AudioConsole32 class="carbon-icon w-80" />
<h3 class="text-3xl text-gray-500">No Exercise Added</h3>
</Box>
{/each}
</div>
</PageBody>
src/components/Course/components/Lesson/Materials/constants.js
+3 -3
View File
@@ -1,14 +1,14 @@
export const tabs = [
{
label: 'Note',
label: 'Slide',
value: 1,
},
{
label: 'Video',
label: 'Note',
value: 2,
},
{
label: 'Slide',
label: 'Video',
value: 3,
},
];
src/components/Course/components/Lesson/Materials/index.svelte
+28 -27
View File
@@ -13,7 +13,6 @@
isLessonDirty,
} from '../store/lessons';
import { tabs } from './constants';
import { onMount } from 'svelte';
export let mode = MODES.view;
export let prevMode = null;
@@ -64,6 +63,32 @@
<Tabs {tabs} {currentTab} {onChange}>
<slot:fragment slot="content">
<TabContent value={tabs[0].value} index={currentTab}>
{#if mode === MODES.edit}
<TextField
label="Slide link"
bind:value={$lesson.materials.slide_url}
onChange={() => ($isLessonDirty = true)}
/>
{:else if $lesson.materials.slide_url}
<iframe
title="Embeded Slides"
src={$lesson.materials.slide_url}
frameborder="0"
width="100%"
height="569"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"
/>
{:else}
<Box>
<h3 class="text-3xl text-gray-500">No slide added</h3>
<img alt="Slide not found" src="/notfound.webp" class="w-80" />
</Box>
{/if}
</TabContent>
<TabContent value={tabs[1].value} index={currentTab}>
{#if mode === MODES.edit}
<EditContent
writeLabel="Note"
@@ -80,7 +105,8 @@
</Box>
{/if}
</TabContent>
<TabContent value={tabs[1].value} index={currentTab}>
<TabContent value={tabs[2].value} index={currentTab}>
{#if mode === MODES.edit}
<TextField
label="Youtube link"
@@ -108,30 +134,5 @@
</Box>
{/if}
</TabContent>
<TabContent value={tabs[2].value} index={currentTab}>
{#if mode === MODES.edit}
<TextField
label="Slide link"
bind:value={$lesson.materials.slide_url}
onChange={() => ($isLessonDirty = true)}
/>
{:else if $lesson.materials.slide_url}
<iframe
title="Embeded Slides"
src={$lesson.materials.slide_url}
frameborder="0"
width="100%"
height="569"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"
/>
{:else}
<Box>
<h3 class="text-3xl text-gray-500">No slide added</h3>
<img alt="Slide not found" src="/notfound.webp" class="w-80" />
</Box>
{/if}
</TabContent>
</slot:fragment>
</Tabs>
src/components/Course/components/People/DeleteConfirmation.svelte
+43
View File
@@ -0,0 +1,43 @@
<script>
import Modal from '../../../Modal/index.svelte';
import PrimaryButton from '../../../PrimaryButton/index.svelte';
import { VARIANTS } from '../../../PrimaryButton/constants';
import { deleteMemberModal } from './store';
export let email;
export let deletePerson = () => {};
async function handleDelete() {
deletePerson();
$deleteMemberModal.open = false;
}
</script>
<Modal
onClose={() => ($deleteMemberModal.open = false)}
bind:open={$deleteMemberModal.open}
width="w-96"
modalHeading="Delete"
>
<div>
<h1 class="text-lg">
Are you sure you want to delete <strong>{email}</strong>?
</h1>
<div class="mt-5 flex items-center justify-between">
<PrimaryButton
className="px-6 py-2"
variant={VARIANTS.OUTLINED}
label="No"
onClick={() => ($deleteMemberModal.open = false)}
/>
<PrimaryButton
className="px-6 py-2"
variant={VARIANTS.OUTLINED}
label="Yes"
onClick={handleDelete}
/>
</div>
</div>
</Modal>
src/components/Course/components/People/InviationModal.svelte
-1
View File
@@ -45,7 +45,6 @@
}
addGroupMember(membersStack).then(async (membersAdded) => {
console.log(`membersAdded`, membersAdded);
const group = await fetchGroup($course.group.id);
setCourseData(
src/components/Course/components/People/store.js
+4
View File
@@ -1,5 +1,9 @@
import { writable } from 'svelte/store';
export const deleteMemberModal = writable({
open: false,
});
export const invitationModal = writable({
open: false,
tutors: '',
src/components/Course/store.js
+1
View File
@@ -24,6 +24,7 @@ export const group = writable({
id: null,
tutors: [],
students: [],
people: [],
});
export async function setCourseData(data, setLesson = true) {
src/components/Courses/components/Card/index.svelte
+50
View File
@@ -0,0 +1,50 @@
<script>
export let logo = '';
export let id = '';
export let title = '';
export let description = '';
</script>
<a
rel="prefetch"
class="root w-72 border bg-gray-100 px-2 py-7 mr-4 mb-4 rounded-md hover:shadow-2xl transition ease-in-out"
href="/courses/{id}"
>
<img
class="w-24 h-24 rounded-full border mx-auto"
src={logo}
alt="Course Logo"
/>
<div class="pt-3 text-center space-y-4">
<h3 class="text-lg font-semibold">
{title}
</h3>
<div
class="description text-left font-small flex flex-col text-gray-500"
title={description}
>
{description}
</div>
</div>
</a>
<style>
.root {
min-height: 300px;
text-decoration: none;
}
.description {
line-height: 20px;
display: -webkit-box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
box-orient: vertical;
-webkit-line-clamp: 5;
-moz-line-clamp: 5;
-ms-line-clamp: 5;
line-clamp: 5;
overflow: hidden;
}
</style>
src/components/Courses/index.svelte
+13 -48
View File
@@ -1,55 +1,20 @@
<script>
import Education16 from 'carbon-icons-svelte/lib/Education16';
import Catalog16 from 'carbon-icons-svelte/lib/Catalog16';
// import Chip from '../Chip/index.svelte';
import Box from '../Box/index.svelte';
import Card from './components/Card/index.svelte';
import { courses } from './store';
</script>
<div class="courses">
<div class="flex items-center flex-wrap my-4 m-auto">
{#each $courses as courseData}
<div class="course">
<h4 class="course-title">
<a rel="prefetch" href="/courses/{courseData.id}">{courseData.title}</a>
<!-- <Chip
value={courseData.chipLabel}
className={courseData.chipClassName}
/> -->
</h4>
<p>{courseData.description}</p>
<!-- <div class="flex mt-3 mb-2">
<span class="flex mr-2"
><Education16 class="mr-2" />
5</span
>
<span class="flex"
><Catalog16 class="mr-2" />
20</span
>
</div> -->
</div>
<Card
id={courseData.id}
logo={courseData.logo}
title={courseData.title}
description={courseData.description}
/>
{:else}
<Box>
<h3 class="text-2xl text-gray-500">No Course Assigned</h3>
</Box>
{/each}
</div>
<style>
.courses {
max-width: 600px;
margin: 0 auto;
padding: 0 40px;
}
.course {
border-bottom: 1px solid var(--border-color);
padding: 5px 0 10px;
}
.course-title {
width: fit-content;
font-size: 18px;
}
span {
color: #586069;
font-size: 12px;
width: 40px;
}
</style>
src/routes/courses.svelte
+6 -6
View File
@@ -134,15 +134,15 @@
<title>Courses</title>
</svelte:head>
<div class="root">
<PageNav title="Courses">
<section class="w-11/12 m-auto">
<!-- <PageNav title="Courses">
<div slot="widget">
<PrimaryButton
label="New"
onClick={() => ($createCourseModal.open = true)}
/>
</div>
</PageNav>
</PageNav> -->
<Modal
onClose={() => ($createCourseModal.open = false)}
@@ -198,13 +198,13 @@
</Modal>
<Courses />
</div>
</section>
<style>
.root {
/* .root {
min-width: 600px;
margin: 0 auto;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
}
} */
</style>
src/routes/courses/[id]/people.svelte
+57 -13
View File
@@ -1,5 +1,8 @@
<script context="module">
import { fetchCourse } from '../../../utils/services/courses';
import {
fetchCourse,
deleteGroupMember,
} from '../../../utils/services/courses';
export async function preload({ params }) {
return { courseId: params.id };
@@ -9,24 +12,47 @@
<script lang="ts">
import { onMount } from 'svelte';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import Delete24 from 'carbon-icons-svelte/lib/Delete24';
import PageNav from '../../../components/PageNav/index.svelte';
import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
import IconButton from '../../../components/IconButton/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import { setCourseData, course } from '../../../components/Course/store';
import {
setCourseData,
course,
group,
} from '../../../components/Course/store';
import InviationModal from '../../../components/Course/components/People/InviationModal.svelte';
import { invitationModal } from '../../../components/Course/components/People/store';
import DeleteConfirmation from '../../../components/Course/components/People/DeleteConfirmation.svelte';
import {
invitationModal,
deleteMemberModal,
} from '../../../components/Course/components/People/store';
import type { Person } from '../../../components/Course/components/People/types';
import { ROLE_LABEL } from '../../../utils/constants/roles';
import { ROLE, ROLE_LABEL } from '../../../utils/constants/roles';
import { profile } from '../../../utils/store/user';
export let courseId: string = '';
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 } } = {};
function setPeople(group) {
if (!group) return;
people = (group.people || []).sort((a, b) => a.role_id - b.role_id);
console.log(`group changed`, group);
// 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() {
console.log(`member`, member);
console.log(`$group.people`, $group.people);
$group.people = $group.people.filter(
(person: { id: string }) => person.id !== member.id
);
await deleteGroupMember(member.id);
}
onMount(async () => {
@@ -35,10 +61,14 @@
setCourseData(data);
});
$: setPeople($course.group);
$: people = ($group.people || []).sort((a, b) => a.role_id - b.role_id);
</script>
<InviationModal />
<DeleteConfirmation
email={member.email || (member.profile && member.profile.email)}
{deletePerson}
/>
<CourseContainer>
<PageNav title="People" disableSticky={true}>
@@ -57,14 +87,15 @@
>
<span class="mr-2">No</span>
<!-- <span class="flex-grow" /> -->
<p class="text-lg w-1/4">Name</p>
<p class="text-lg w-1/4">Email</p>
<p class="text-lg w-1/4 ">Role</p>
<p class="text-lg text-center w-1/4">Name</p>
<p class="text-lg text-center w-1/4">Email</p>
<p class="text-lg text-center w-1/4 ">Role</p>
<p class="text-lg w-20 text-center" />
</div>
{#each people as person, index}
<div
class="flex items-center justify-evenly p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
class="flex text-center relative items-center justify-evenly p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
>
<span class="mr-2">{index + 1}</span>
<!-- <span class="flex-grow" /> -->
@@ -90,6 +121,19 @@
</a>
{/if}
<p class="text-lg w-1/4 ">{ROLE_LABEL[person.role_id]}</p>
<div class="w-20">
{#if person.profile && person.profile.id !== $profile.id}
<IconButton
onClick={() => {
member = person;
$deleteMemberModal.open = true;
}}
>
<Delete24 class="carbon-icon" />
</IconButton>
{/if}
</div>
</div>
{/each}
</div>
src/utils/services/courses/index.js
+4
View File
@@ -122,6 +122,10 @@ export function addGroupMember(member) {
});
}
export function deleteGroupMember(groupMemberId) {
return supabase.from('groupmember').delete().match({ id: groupMemberId });
}
export function fetchLesson(lessonId) {
return supabase
.from('lesson')