add admin stuff to userlandingpage

ssciwr · Oct 23, 2024 · a680200 · a680200
1 parent 2daf248
commit a680200
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 15 deletions.
diff --git a/frontend/src/lib/components/Admin/AdminSection.svelte b/frontend/src/lib/components/Admin/AdminSection.svelte
@@ -0,0 +1,56 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { adminUser } from '$lib/admin.svelte';
+	import Languages from '$lib/components/Admin/Languages.svelte';
+	import Login from '$lib/components/Admin/Login.svelte';
+	import MilestoneGroups from '$lib/components/Admin/MilestoneGroups.svelte';
+	import Translations from '$lib/components/Admin/Translations.svelte';
+	import Questions from '$lib/components/Admin/UserQuestions.svelte';
+	import { TabItem, Tabs } from 'flowbite-svelte';
+	import { BadgeCheckOutline, ClipboardListOutline, LanguageOutline } from 'flowbite-svelte-icons';
+	import { onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { currentUser } from '$lib/stores/userStore';
+
+	onMount(async () => {
+		adminUser.refresh();
+	});
+</script>
+
+{#if !adminUser.value || !adminUser.value.is_superuser}
+	<div class="flex w-full flex-col items-center justify-center">
+		<Login />
+	</div>
+{:else}
+	<Tabs tabStyle="underline">
+		<TabItem open>
+			<div slot="title" class="flex items-center gap-2">
+				<BadgeCheckOutline size="md" />
+				{$_('admin.milestones')}
+			</div>
+			<MilestoneGroups />
+		</TabItem>
+		<TabItem>
+			<div slot="title" class="flex items-center gap-2">
+				<ClipboardListOutline size="md" />
+				{$_('admin.user-questions')}
+			</div>
+			<Questions />
+		</TabItem>
+		<TabItem>
+			<div slot="title" class="flex items-center gap-2">
+				<LanguageOutline size="md" />
+				{$_('admin.translations')}
+			</div>
+			<Translations />
+		</TabItem>
+		<TabItem>
+			<div slot="title" class="flex items-center gap-2">
+				<LanguageOutline size="md" />
+				{$_('admin.languages')}
+			</div>
+			<Languages />
+		</TabItem>
+	</Tabs>
+{/if}
diff --git a/frontend/src/lib/components/Admin/EditUserQuestionModal.svelte b/frontend/src/lib/components/Admin/EditUserQuestionModal.svelte
@@ -1,27 +1,27 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
+	import { refreshUserQuestions } from '$lib/admin.svelte';
+	import { updateUserQuestion } from '$lib/client/services.gen';
+	import type { UserQuestionAdmin } from '$lib/client/types.gen';
+	import CancelButton from '$lib/components/Admin/CancelButton.svelte';
+	import InputPreview from '$lib/components/Admin/InputPreview.svelte';
+	import SaveButton from '$lib/components/Admin/SaveButton.svelte';
+	import { languages } from '$lib/stores/langStore';
 	import {
-		Button,
 		Badge,
+		Button,
+		ButtonGroup,
 		Card,
-		InputAddon,
-		Textarea,
 		Input,
+		InputAddon,
 		Label,
-		ButtonGroup,
 		Modal,
 		Select,
+		Textarea,
 		type SelectOptionType
 	} from 'flowbite-svelte';
 	import { _ } from 'svelte-i18n';
-	import { languages } from '$lib/stores/langStore';
-	import { updateUserQuestion } from '$lib/client/services.gen';
-	import InputPreview from '$lib/components/Admin/InputPreview.svelte';
-	import SaveButton from '$lib/components/Admin/SaveButton.svelte';
-	import CancelButton from '$lib/components/Admin/CancelButton.svelte';
-	import type { UserQuestionAdmin } from '$lib/client/types.gen';
-	import { refreshUserQuestions } from '$lib/admin.svelte';
 
 	let {
 		open = $bindable(false),
@@ -63,6 +63,7 @@
 			await refreshUserQuestions();
 		}
 	}
+	console.log('UserQuestion: ', userQuestion);
 </script>
 
 <Modal title="Edit user question" bind:open autoclose size="xl">

diff --git a/frontend/src/lib/components/Researcher/ResearcherSection.svelte b/frontend/src/lib/components/Researcher/ResearcherSection.svelte
diff --git a/frontend/src/lib/components/UserLandingPage.svelte b/frontend/src/lib/components/UserLandingPage.svelte
@@ -3,17 +3,22 @@
 	import { currentUser } from '$lib/stores/userStore';
 	import { TabItem, Tabs } from 'flowbite-svelte';
 	import { GridPlusSolid, ProfileCardSolid } from 'flowbite-svelte-icons';
+	import { onDestroy } from 'svelte';
 	import { get } from 'svelte/store';
 	import UserVerify from './UserVerify.svelte';
 
-	import { onDestroy } from 'svelte';
-
 	console.log('user: ', get(currentUser));
 	const isVerifed = get(currentUser)?.is_verified;
 	let currentPersonal = 'userDataInput';
 	let currentChildren = 'childrenGallery';
+	let adminSection = 'adminSection';
+	let researchSection = 'researcherSection';
 	export let userData: any[];
 
+	// const unsubscribeUser = currentUser.subscribe((value) => {
+	// 	currentUser.update(value);
+	// });
+
 	const unsubscribePersonal = activeTabPersonal.subscribe((value) => {
 		currentPersonal = value;
 	});
@@ -45,6 +50,24 @@
 				</div>
 				<svelte:component this={componentTable[currentChildren]} />
 			</TabItem>
+			{#if get(currentUser)?.is_superuser}
+				<TabItem>
+					<div slot="title" class="flex items-center gap-2 text-lg">
+						<GridPlusSolid size="lg" />
+						Administration
+					</div>
+					<svelte:component this={componentTable[adminSection]} />
+				</TabItem>
+			{/if}
+			{#if get(currentUser)?.is_researcher}
+				<TabItem>
+					<div slot="title" class="flex items-center gap-2 text-lg">
+						<GridPlusSolid size="lg" />
+						Wissenschaft
+					</div>
+					<svelte:component this={componentTable[researchSection]} />
+				</TabItem>
+			{/if}
 		</Tabs>
 	</div>
 {:else}

diff --git a/frontend/src/lib/stores/componentStore.ts b/frontend/src/lib/stores/componentStore.ts
@@ -5,7 +5,8 @@ import Milestone from '$lib/components/Milestone.svelte';
 import MilestoneGroup from '$lib/components/MilestoneGroup.svelte';
 import MilestoneOverview from '$lib/components/MilestoneOverview.svelte';
 import UserDataInput from '$lib/components/UserDataInput.svelte';
-
+import AdminSection from '$lib/components/Admin/AdminSection.svelte';
+import ResearcherSection from '$lib/components/Researcher/ResearcherSection.svelte';
 import { Fileupload, Input, MultiSelect, Select, Textarea } from 'flowbite-svelte';
 import { writable } from 'svelte/store';
 
@@ -22,7 +23,9 @@ export const componentTable = {
 	multiSelect: MultiSelect,
 	select: Select,
 	fileupload: Fileupload,
-	textarea: Textarea
+	textarea: Textarea, 
+	researcherSection: ResearcherSection, 
+	adminSection: AdminSection
 };
 export const activeTabPersonal = writable('userDataInput');
 export const activeTabChildren = writable('childrenGallery');