Merge pull request #29 from COS301-SE-2024/feature/frontend/modals

Modals completed

Author: Ashley-Kapaso

src/client/src/lib/components/admin/+Admins.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { Button } from 'flowbite-svelte';
+	import AddAdmin from '$lib/components/modals/+AddAdmin.svelte';
+	import EditAdmin from '$lib/components/modals/+EditAdmin.svelte';
+	import Remove from '$lib/components/modals/+Remove.svelte';
 	const admins = [
 		{
 			name: 'Katlego Tau',
@@ -103,52 +105,7 @@
 		</div>
 
 		<div class="mt-4 flex items-center gap-x-3">
-			<button
-				class="flex w-1/2 items-center justify-center gap-x-2 rounded-lg border bg-white px-5 py-2 text-sm text-gray-700 transition-colors duration-200 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800 sm:w-auto"
-			>
-				<svg
-					width="20"
-					height="20"
-					viewBox="0 0 20 20"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<g clip-path="url(#clip0_3098_154395)">
-						<path
-							d="M13.3333 13.3332L9.99997 9.9999M9.99997 9.9999L6.66663 13.3332M9.99997 9.9999V17.4999M16.9916 15.3249C17.8044 14.8818 18.4465 14.1806 18.8165 13.3321C19.1866 12.4835 19.2635 11.5359 19.0351 10.6388C18.8068 9.7417 18.2862 8.94616 17.5555 8.37778C16.8248 7.80939 15.9257 7.50052 15 7.4999H13.95C13.6977 6.52427 13.2276 5.61852 12.5749 4.85073C11.9222 4.08295 11.104 3.47311 10.1817 3.06708C9.25943 2.66104 8.25709 2.46937 7.25006 2.50647C6.24304 2.54358 5.25752 2.80849 4.36761 3.28129C3.47771 3.7541 2.70656 4.42249 2.11215 5.23622C1.51774 6.04996 1.11554 6.98785 0.935783 7.9794C0.756025 8.97095 0.803388 9.99035 1.07431 10.961C1.34523 11.9316 1.83267 12.8281 2.49997 13.5832"
-							stroke="currentColor"
-							stroke-width="1.67"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</g>
-					<defs>
-						<clipPath id="clip0_3098_154395">
-							<rect width="20" height="20" fill="white" />
-						</clipPath>
-					</defs>
-				</svg>
-
-				<span>Import</span>
-			</button>
-
-			<Button>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					class="h-5 w-5"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
-					/>
-				</svg>
-				<span>Add Admin</span>
-			</Button>
+			<AddAdmin />
 		</div>
 	</div>
 
@@ -249,24 +206,8 @@
 									>
 									<td class="whitespace-nowrap px-4 py-4 text-sm">
 										<div class="flex items-center gap-x-6">
-											<button
-												class="text-gray-500 transition-colors duration-200 hover:text-yellow-500 focus:outline-none dark:text-gray-300 dark:hover:text-yellow-500"
-											>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													fill="none"
-													viewBox="0 0 24 24"
-													stroke-width="1.5"
-													stroke="currentColor"
-													class="h-5 w-5"
-												>
-													<path
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-													/>
-												</svg>
-											</button>
+											<Remove />
+											<EditAdmin />
 										</div>
 									</td>
 								</tr>

src/client/src/lib/components/admin/+Lectures.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { Button } from 'flowbite-svelte';
+	import AddLecturer from '$lib/components/modals/+AddLecturer.svelte';
+	import EditLecturer from '$lib/components/modals/+EditLecturer.svelte';
+	import Remove from '$lib/components/modals/+Remove.svelte';
 	const lecturers = [
 		{
 			name: 'Azola Lukhozi',
@@ -104,52 +106,7 @@
 		</div>
 
 		<div class="mt-4 flex items-center gap-x-3">
-			<button
-				class="flex w-1/2 items-center justify-center gap-x-2 rounded-lg border bg-white px-5 py-2 text-sm text-gray-700 transition-colors duration-200 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800 sm:w-auto"
-			>
-				<svg
-					width="20"
-					height="20"
-					viewBox="0 0 20 20"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<g clip-path="url(#clip0_3098_154395)">
-						<path
-							d="M13.3333 13.3332L9.99997 9.9999M9.99997 9.9999L6.66663 13.3332M9.99997 9.9999V17.4999M16.9916 15.3249C17.8044 14.8818 18.4465 14.1806 18.8165 13.3321C19.1866 12.4835 19.2635 11.5359 19.0351 10.6388C18.8068 9.7417 18.2862 8.94616 17.5555 8.37778C16.8248 7.80939 15.9257 7.50052 15 7.4999H13.95C13.6977 6.52427 13.2276 5.61852 12.5749 4.85073C11.9222 4.08295 11.104 3.47311 10.1817 3.06708C9.25943 2.66104 8.25709 2.46937 7.25006 2.50647C6.24304 2.54358 5.25752 2.80849 4.36761 3.28129C3.47771 3.7541 2.70656 4.42249 2.11215 5.23622C1.51774 6.04996 1.11554 6.98785 0.935783 7.9794C0.756025 8.97095 0.803388 9.99035 1.07431 10.961C1.34523 11.9316 1.83267 12.8281 2.49997 13.5832"
-							stroke="currentColor"
-							stroke-width="1.67"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</g>
-					<defs>
-						<clipPath id="clip0_3098_154395">
-							<rect width="20" height="20" fill="white" />
-						</clipPath>
-					</defs>
-				</svg>
-
-				<span>Import</span>
-			</button>
-
-			<Button>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					class="h-5 w-5"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
-					/>
-				</svg>
-				<span>Add Lecturer</span>
-			</Button>
+			<AddLecturer />
 		</div>
 	</div>
 
@@ -250,24 +207,8 @@
 									>
 									<td class="whitespace-nowrap px-4 py-4 text-sm">
 										<div class="flex items-center gap-x-6">
-											<button
-												class="text-gray-500 transition-colors duration-200 hover:text-yellow-500 focus:outline-none dark:text-gray-300 dark:hover:text-yellow-500"
-											>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													fill="none"
-													viewBox="0 0 24 24"
-													stroke-width="1.5"
-													stroke="currentColor"
-													class="h-5 w-5"
-												>
-													<path
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-													/>
-												</svg>
-											</button>
+											<Remove />
+											<EditLecturer />
 										</div>
 									</td>
 								</tr>

src/client/src/lib/components/admin/+Students.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { Button } from 'flowbite-svelte';
+	import AddStudent from '$lib/components/modals/+AddStudent.svelte';
+	import EditStudent from '$lib/components/modals/+EditStudent.svelte';
+	import Remove from '$lib/components/modals/+Remove.svelte';
 	const students = [
 		{
 			name: 'Azola Lukhozi',
@@ -103,52 +105,7 @@
 		</div>
 
 		<div class="mt-4 flex items-center gap-x-3">
-			<button
-				class="flex w-1/2 items-center justify-center gap-x-2 rounded-lg border bg-white px-5 py-2 text-sm text-gray-700 transition-colors duration-200 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800 sm:w-auto"
-			>
-				<svg
-					width="20"
-					height="20"
-					viewBox="0 0 20 20"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<g clip-path="url(#clip0_3098_154395)">
-						<path
-							d="M13.3333 13.3332L9.99997 9.9999M9.99997 9.9999L6.66663 13.3332M9.99997 9.9999V17.4999M16.9916 15.3249C17.8044 14.8818 18.4465 14.1806 18.8165 13.3321C19.1866 12.4835 19.2635 11.5359 19.0351 10.6388C18.8068 9.7417 18.2862 8.94616 17.5555 8.37778C16.8248 7.80939 15.9257 7.50052 15 7.4999H13.95C13.6977 6.52427 13.2276 5.61852 12.5749 4.85073C11.9222 4.08295 11.104 3.47311 10.1817 3.06708C9.25943 2.66104 8.25709 2.46937 7.25006 2.50647C6.24304 2.54358 5.25752 2.80849 4.36761 3.28129C3.47771 3.7541 2.70656 4.42249 2.11215 5.23622C1.51774 6.04996 1.11554 6.98785 0.935783 7.9794C0.756025 8.97095 0.803388 9.99035 1.07431 10.961C1.34523 11.9316 1.83267 12.8281 2.49997 13.5832"
-							stroke="currentColor"
-							stroke-width="1.67"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</g>
-					<defs>
-						<clipPath id="clip0_3098_154395">
-							<rect width="20" height="20" fill="white" />
-						</clipPath>
-					</defs>
-				</svg>
-
-				<span>Import</span>
-			</button>
-
-			<Button>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					class="h-5 w-5"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
-					/>
-				</svg>
-				<span>Add Student</span>
-			</Button>
+			<AddStudent />
 		</div>
 	</div>
 
@@ -249,24 +206,8 @@
 									>
 									<td class="whitespace-nowrap px-4 py-4 text-sm">
 										<div class="flex items-center gap-x-6">
-											<button
-												class="text-gray-500 transition-colors duration-200 hover:text-yellow-500 focus:outline-none dark:text-gray-300 dark:hover:text-yellow-500"
-											>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													fill="none"
-													viewBox="0 0 24 24"
-													stroke-width="1.5"
-													stroke="currentColor"
-													class="h-5 w-5"
-												>
-													<path
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-													/>
-												</svg>
-											</button>
+											<Remove />
+											<EditStudent />
 										</div>
 									</td>
 								</tr>

src/client/src/lib/components/modals/+AddAdmin.svelte

@@ -0,0 +1,45 @@
+<script>
+	import { Button, Modal, Label, Input } from 'flowbite-svelte';
+
+	let formModal = false;
+
+	// Function to handle form submission
+	async function handleSubmit(event) {
+		event.preventDefault();
+	}
+</script>
+
+<Button on:click={() => (formModal = true)} class="mx-2">
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="h-5 w-5"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+		/>
+	</svg>
+	<span class="px-2">Add Admin</span>
+</Button>
+
+<Modal bind:open={formModal} size="xs" autoclose={false} class="w-full">
+	<form class="flex flex-col space-y-6" on:submit={handleSubmit}>
+		<h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Add New Admin</h3>
+
+		<Label for="name" class="mb-2 mt-2 space-y-2">Name</Label>
+		<Input type="text" id="name" name="name" placeholder="Example University" size="md" required />
+
+		<Label for="email" class="mb-2 mt-2 space-y-2">Email</Label>
+		<Input type="text" id="email" name="email" placeholder="[email protected]" size="md" required />
+
+		<Label for="email" class="mb-2 mt-2 space-y-2">Department</Label>
+		<Input type="text" id="department" name="department" placeholder="Arts" size="md" required />
+
+		<Button type="submit" class="w-full1">Add Admin</Button>
+	</form>
+</Modal>

src/client/src/lib/components/modals/+AddLecturer.svelte

@@ -0,0 +1,45 @@
+<script>
+	import { Button, Modal, Label, Input } from 'flowbite-svelte';
+
+	let formModal = false;
+
+	// Function to handle form submission
+	async function handleSubmit(event) {
+		event.preventDefault();
+	}
+</script>
+
+<Button on:click={() => (formModal = true)} class="mx-2">
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="h-5 w-5"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+		/>
+	</svg>
+	<span class="px-2">Add Lecturer</span>
+</Button>
+
+<Modal bind:open={formModal} size="xs" autoclose={false} class="w-full">
+	<form class="flex flex-col space-y-6" on:submit={handleSubmit}>
+		<h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Add Lecturer</h3>
+
+		<Label for="name" class="mb-2 mt-2 space-y-2">Name</Label>
+		<Input type="text" id="name" name="name" placeholder="Example University" size="md" required />
+
+		<Label for="email" class="mb-2 mt-2 space-y-2">Email</Label>
+		<Input type="text" id="email" name="email" placeholder="[email protected]" size="md" required />
+
+		<Label for="email" class="mb-2 mt-2 space-y-2">Role</Label>
+		<Input type="text" id="role" name="role" placeholder="Lecturer" size="md" required />
+
+		<Button type="submit" class="w-full1">Add Lecturer</Button>
+	</form>
+</Modal>