Delete member
This commit is contained in:
rotimi-best
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -45,7 +45,6 @@
|
||||
}
|
||||
|
||||
addGroupMember(membersStack).then(async (membersAdded) => {
|
||||
console.log(`membersAdded`, membersAdded);
|
||||
const group = await fetchGroup($course.group.id);
|
||||
|
||||
setCourseData(
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export const deleteMemberModal = writable({
|
||||
open: false,
|
||||
});
|
||||
|
||||
export const invitationModal = writable({
|
||||
open: false,
|
||||
tutors: '',
|
||||
|
||||
@@ -24,6 +24,7 @@ export const group = writable({
|
||||
id: null,
|
||||
tutors: [],
|
||||
students: [],
|
||||
people: [],
|
||||
});
|
||||
|
||||
export async function setCourseData(data, setLesson = true) {
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user