Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/frontend/modals #28

Merged
merged 2 commits into from
Jun 1, 2024
Merged

Feature/frontend/modals #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
520c9ec
edit organisation modal added
bukhosi-eugene-mpande Jun 1, 2024
f5389d5
added organisation modals
bukhosi-eugene-mpande Jun 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified src/client/bun.lockb
View file
Open in desktop
Binary file not shown.
247 changes: 107 additions & 140 deletions src/client/src/lib/components/admin/+Organisation.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,154 +1,121 @@
<script lang="ts">
import { Button } from 'flowbite-svelte';
const organisation = {
organisationname: 'University of Pretoria',
module: [
{
name: 'Operating Systems',
code: 'CSOS101',
description:
'Introduction to operating systems, covering topics such as process management, memory management, and file systems.'
},
{
name: 'Database Management Systems',
code: 'CSDB202',
description:
'Study of database models, relational databases, SQL, and database design and implementation.'
},
{
name: 'Network Security',
code: 'CSNS303',
description:
'Fundamentals of network security, including encryption, firewalls, intrusion detection, and secure protocols.'
},
{
name: 'Software Engineering',
code: 'CSSE404',
description:
'Principles of software engineering, including software development life cycle, methodologies, and project management.'
},
{
name: 'Artificial Intelligence',
code: 'CSAI505',
description:
'Introduction to artificial intelligence concepts, including machine learning, neural networks, and natural language processing.'
},
{
name: 'Cloud Computing',
code: 'CSCC606',
description:
'Overview of cloud computing technologies, cloud service models, and deployment strategies.'
},
{
name: 'Cybersecurity',
code: 'CSCY707',
description:
'Comprehensive study of cybersecurity principles, risk management, and techniques to protect information systems.'
import { onMount } from 'svelte';
import EditOrg from '$lib/components/modals/+EditOrg.svelte';
import AddOrg from '$lib/components/modals/+AddOrg.svelte';
import RemoveOrg from '$lib/components/modals/+RemoveOrg.svelte';
import { organisationName } from '$lib/stores/store';

let org_exists: boolean = false;

async function getOrgName() {
const formData = new URLSearchParams();
const orgID = localStorage.getItem('organisationID') || 'non-existent';
formData.append('organisationID', orgID);

const response = await fetch('/organisation?/getOrganisationDetails', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
{
name: 'Data Structures and Algorithms',
code: 'CSDA808',
description:
'In-depth analysis of data structures and algorithms, including their design, implementation, and complexity analysis.'
body: formData
});

if (response.ok) {
const res = await response.json();
const dataString = JSON.parse(res.data); // This will parse the outer array
const dataObject = JSON.parse(dataString[0]); // This will parse the inner object
organisationName.set(dataObject.body.organisationName);
}
}

function checkOrganisationID() {
if (typeof window !== 'undefined') {
const organisationID = localStorage.getItem('organisationID');
org_exists = organisationID !== null;
if (org_exists === true) {
getOrgName();
}
]
};
}
}

// Call the function when the component is initialized
onMount(checkOrganisationID);

// Reactive statement that watches for changes in organisationName
$: {
organisationName.subscribe(() => {
checkOrganisationID();
});
}
</script>

<section class="container mx-auto px-4">
<div class="sm:flex sm:items-center sm:justify-between">
<div>
<div class="flex items-center gap-x-3">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Organisation</h2>
{#if org_exists}
<section class="container mx-auto px-4">
<div class="sm:flex sm:items-center sm:justify-between">
<div>
<div class="flex items-center gap-x-3">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Organisation</h2>
</div>
</div>
</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>Upload New Organisation Image</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>Edit Organisation</span>
</Button>
<div class="mt-4 flex items-center gap-x-3">
<RemoveOrg />
<EditOrg />
</div>
</div>
</div>

<div class="mt-6 flex flex-col">
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
<div class="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th
scope="col"
class="px-4 py-3.5 text-left text-sm font-normal text-gray-500 dark:text-gray-400 rtl:text-right"
>
<button class="flex items-center gap-x-3 focus:outline-none"> Feild </button>
</th>
<div class="mt-6 flex flex-col">
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
<div class="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th
scope="col"
class="px-4 py-3.5 text-left text-sm font-normal text-gray-500 dark:text-gray-400 rtl:text-right"
>
<button class="flex items-center gap-x-3 focus:outline-none"> Feild </button>
</th>

<th
scope="col"
class="px-12 py-3.5 text-left text-sm font-normal text-gray-500 dark:text-gray-400 rtl:text-right"
>
Value
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
<tr>
<td class="whitespace-nowrap px-4 py-4 text-sm font-medium">
<div>
<h2 class="font-medium text-gray-800 dark:text-white">Orgnisation Name</h2>
</div>
</td>
<td class="whitespace-nowrap px-12 py-4 text-sm font-medium">
{organisation.organisationname}
</td>
</tr>
</tbody>
</table>
<th
scope="col"
class="px-12 py-3.5 text-left text-sm font-normal text-gray-500 dark:text-gray-400 rtl:text-right"
>
Value
</th>
</tr>
</thead>
<tbody
class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900"
>
<tr>
<td class="whitespace-nowrap px-4 py-4 text-sm font-medium">
<div>
<h2 class="font-medium text-gray-800 dark:text-white">Orgnisation Name</h2>
</div>
</td>
<td class="whitespace-nowrap px-12 py-4 text-sm font-medium">
{$organisationName}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
{:else}
<div class="sm:flex sm:items-center sm:justify-between">
<div>
<div class="flex items-center gap-x-3">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">{$organisationName}</h2>
</div>
</div>

<div class="mt-4 flex items-center gap-x-3">
<AddOrg />
</div>
</div>
</section>
{/if}
Empty file added src/client/src/lib/components/modals/+AddLecturer.svelte
View file
Open in desktop
Empty file.
96 changes: 96 additions & 0 deletions src/client/src/lib/components/modals/+AddOrg.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<script>
import { Button, Modal, Label, Input } from 'flowbite-svelte';
import { organisationName } from '$lib/stores/store';

let formModal = false;

async function updateOrgName() {
const formData = new URLSearchParams();
const orgID = localStorage.getItem('organisationID') || 'non-existent';
formData.append('organisationID', orgID);

const response = await fetch('/organisation?/getOrganisationDetails', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: formData
});

if (response.ok) {
const res = await response.json();
const dataString = JSON.parse(res.data); // This will parse the outer array
const dataObject = JSON.parse(dataString[0]); // This will parse the inner object
organisationName.set(dataObject.body.organisationName);
}
}

// Function to store the access token in local storage
function storeOrgID(id) {
localStorage.setItem('organisationID', id);
}

// Function to handle form submission
async function handleSubmit(event) {
console.log('add is being handled');
// Prevent the default form submission behavior
event.preventDefault();

// Create a FormData object from the form
const formData = new FormData(event.target);

// Send a request to your server-side action
const response = await fetch('/organisation?/create', {
method: 'POST',
body: formData
});

// If the request was successful, store the org id in local storage
if (response.ok) {
const res = await response.json();
const dataString = JSON.parse(res.data); // This will parse the outer array
const dataObject = JSON.parse(dataString[0]); // This will parse the inner object
storeOrgID(dataObject.body.organisationID);
updateOrgName();
}
}
</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">Create Organisation</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">Create New Organisation</h3>

<Label for="org_name" class="mb-2 mt-2 space-y-2">Organisation Name</Label>
<Input
type="text"
id="org_name"
name="org_name"
placeholder="Example University"
size="md"
required
/>

<Label for="upload_image" class="mb-2 mt-2 space-y-2">Upload image:</Label>
<Input type="file" id="image" name="image" />

<Button type="submit" class="w-full1">Create Account</Button>
</form>
</Modal>
Empty file added src/client/src/lib/components/modals/+EditLecturer.svelte
View file
Open in desktop
Empty file.
Loading
Loading