Added language selection for topics

DataManagementLab · Sep 22, 2023 · 7cc379b · 7cc379b
1 parent 73a9b39
commit 7cc379b
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 50 deletions.
diff --git a/src/lib/components/MultiSelect.svelte b/src/lib/components/MultiSelect.svelte
@@ -67,7 +67,7 @@
 	<input
 		type="text"
 		{id}
-		class="input w-full mb-0 outline-0 bg-base-200 min-w-[25rem]"
+		class="input w-full mb-0 outline-0 bg-base-200"
 		{placeholder}
 		disabled={readonly}
 		bind:value

diff --git a/src/lib/components/TopicView.svelte b/src/lib/components/TopicView.svelte
@@ -3,6 +3,7 @@
 	import StarOutline from 'svelte-material-icons/StarOutline.svelte';
 	import Delete from 'svelte-material-icons/Delete.svelte';
 	import Archive from 'svelte-material-icons/Archive.svelte';
+	import { getLanguageIcon } from '$lib/utils';
 	import { enhance } from '$app/forms';
 
 	export let data;
@@ -144,6 +145,7 @@
 				<span class="text-sm text-neutral-content flex-1 text-right">Erstellt am {new Date(topic.createdAt).toLocaleDateString('de-DE')}</span>
 			</h2>
 			<div>
+				<span class="badge badge-primary">{getLanguageIcon(topic.language ?? 'de')}</span>
 				{#each topic.thesisType as tt}
 					<span class="badge badge-primary">{tt}</span>
 				{/each}

diff --git a/src/lib/utils/index.js b/src/lib/utils/index.js
@@ -0,0 +1,12 @@
+export function getLanguageIcon(language){
+    switch(language){
+        case 'de':
+            return '🇩🇪';
+        case 'en':
+            return '🇬🇧';
+        case 'de_en':
+            return '🇩🇪/🇬🇧';
+        default:
+            return language;
+    }
+}
diff --git a/src/routes/(protectedRoutes)/api/suggestions/+server.js b/src/routes/(protectedRoutes)/api/suggestions/+server.js
@@ -8,7 +8,7 @@ export async function POST({ request }) {
 	for (let sub of query) {
 		if (sub.length == 0 && query != '') continue;
 		let result = await db.query(
-			`SELECT * FROM topics WHERE string::lowercase($value) INSIDE string::lowercase(${field}) LIMIT 5`,
+			`SELECT * FROM topics WHERE ${field} ?~ $value LIMIT 5`,
 			{
 				value: sub
 			}

diff --git a/src/routes/(protectedRoutes)/create/+page.server.js b/src/routes/(protectedRoutes)/create/+page.server.js
@@ -14,6 +14,7 @@ const filterSchema = z.object({
 	specialization: z
 		.array(z.string({ required_error: 'Eine Spezialisierung wird benötigt' }).trim())
 		.min(1, { message: 'Eine Spezialisierung wird benötigt' }),
+	language: z.string(),
 	thesisType: z
 		.array(z.string({ required_error: 'Thesistyp(en) wird benötigt' }))
 		.min(1, { message: 'Thesistyp(en) wird benötigt' })

diff --git a/src/routes/(protectedRoutes)/create/+page.svelte b/src/routes/(protectedRoutes)/create/+page.svelte
@@ -2,7 +2,7 @@
 	export let data;
 	export let form;
 
-	import { Input, Textarea } from '$lib/components';
+	import { Input, Textarea, Select } from '$lib/components';
 
 	let thesisType = [
 		{ id: 'Bachelor', text: 'Bachelor Thesis' },
@@ -59,7 +59,7 @@
 				errorMsg={form?.errors?.areaOfExpertise ?? ''}
 				required />
 		</div>
-		<div>
+		<div class="mr-5">
 			<Input
 				id="specialization"
 				label="Keywords"
@@ -70,6 +70,9 @@
 				errorMsg={form?.errors?.specialization ?? ''}
 				required />
 		</div>
+		<div>
+			<Select id="language" label="Sprache" options={[{ text: '🇩🇪', id: 'de'}, { text: '🇬🇧', id: 'en'}, { text: '🇩🇪/🇬🇧', id: 'de_en'}]}/>
+		</div>
 	</div>
 
 	<Input

diff --git a/src/routes/(protectedRoutes)/overview/+page.svelte b/src/routes/(protectedRoutes)/overview/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Input, TopicView, Pagination } from '$lib/components';
+	import { Input, TopicView, Pagination, Select } from '$lib/components';
 	import Search from 'svelte-material-icons/Magnify.svelte';
 	import ArrowDown from 'svelte-material-icons/ChevronDown.svelte';
 	import ArrowUp from 'svelte-material-icons/ChevronUp.svelte';
@@ -105,6 +105,9 @@
 				suggestions
 				bind:value={formData.technologies} />
 		</div>
+		<div>
+			<Select id="language" label="Sprache" options={[{ text: '🇩🇪', id: 'de'}, { text: '🇬🇧', id: 'en'}, { text: '🇩🇪/🇬🇧', id: 'de_en'}]}/>
+		</div>
 	</div>
 </form>
 

diff --git a/src/routes/(protectedRoutes)/search/+page.server.js b/src/routes/(protectedRoutes)/search/+page.server.js
@@ -18,29 +18,28 @@ export const load = async ({ locals, url }) => {
 			delete formData[key];
 		}
 	}
+	formData.language = formData.language.split(',').map((x) => x.trim()).filter((x) => x.length > 0);
 	let data = await db.query(
 		`SELECT * FROM topics WHERE 
-			draft = false AND (archived = undefined OR archived = false) AND (
-			(array::len($thesisType) == 0 OR thesisType CONTAINSANY $thesisType) AND
-			(array::len($specialization) == 0 OR specialization CONTAINSANY $specialization) AND
-			(string::len($areaOfExpertise) == 0 OR 
-				string::lowercase(areaOfExpertise) = string::lowercase($areaOfExpertise)) AND
-			(string::len($person) == 0 OR 
-				string::lowercase(professor) CONTAINS string::lowercase($person) OR
-				supervisor CONTAINS $person) AND
-			(array::len($technologies) == 0 OR technologies CONTAINSANY $technologies) AND
-			(array::len($query) == 0 OR 
-				$query ?~ string::lowercase(title) OR
-				$query ?~ string::lowercase(description) OR
-				$query ?~ thesisType OR
-				$query ?~ specialization OR
-				$query ?~ string::lowercase(subjectArea) OR
-				$query ?~ string::lowercase(areaOfExpertise) OR
-				$query ?~ string::lowercase(professor) OR
-				$query ?~ technologies OR
-				$query ?~ string::lowercase(supervisor)
-			)
-		) ORDER BY createdAt DESC LIMIT 25 START $offset
+			draft = false AND (archived = undefined OR archived = false)
+			${formData.thesisType.length > 0 ? 'AND thesisType CONTAINSANY $thesisType' : ''}
+			${formData.specialization.length > 0 ? 'AND specialization CONTAINSANY $specialization' : ''}
+			${formData.areaOfExpertise.length > 0 ? 'AND string::lowercase(areaOfExpertise) = string::lowercase($areaOfExpertise)' : ''}
+			${formData.person.length > 0 ? 'AND (string::lowercase(professor) CONTAINS string::lowercase($person) OR supervisor CONTAINS $person)' : ''}
+			${formData.technologies.length > 0 ? 'AND technologies CONTAINSANY $technologies' : ''}
+			${formData.language.length > 0 ? 'AND $language CONTAINS language' : ''}
+			${formData.query.length > 0 ? `AND ( 
+				$query ANYINSIDE string::words(title) OR
+				$query ANYINSIDE string::words(description) OR
+				$query ANYINSIDE thesisType OR
+				$query ANYINSIDE specialization OR
+				$query ?~ subjectArea OR
+				$query ?~ areaOfExpertise OR
+				$query ANYINSIDE string::words(professor) OR
+				$query ANYINSIDE technologies OR
+				$query ?~ supervisor
+			)` : ''}
+		ORDER BY createdAt DESC LIMIT 25 START $offset
 		`,
 		{
 			query: formData.query
@@ -59,32 +58,31 @@ export const load = async ({ locals, url }) => {
 				.split(',')
 				.map((x) => x.trim())
 				.filter((x) => x.length > 0),
+			language: formData.language,
 			offset
 		}
 	);
 	let topicCount = await db.query(
 		`SELECT count() as count, draft FROM topics WHERE 
-			draft = false AND (archived = undefined OR archived = false) AND (
-			(array::len($thesisType) == 0 OR thesisType CONTAINSANY $thesisType) AND
-			(array::len($specialization) == 0 OR specialization CONTAINSANY $specialization) AND
-			(string::len($areaOfExpertise) == 0 OR 
-				string::lowercase(areaOfExpertise) = string::lowercase($areaOfExpertise)) AND
-			(string::len($person) == 0 OR 
-				string::lowercase(professor) CONTAINS string::lowercase($person) OR
-				supervisor CONTAINS $person) AND
-			(array::len($technologies) == 0 OR technologies CONTAINSANY $technologies) AND
-			(array::len($query) == 0 OR 
-				$query ?~ string::lowercase(title) OR
-				$query ?~ string::lowercase(description) OR
-				$query ?~ thesisType OR
-				$query ?~ specialization OR
-				$query ?~ string::lowercase(subjectArea) OR
-				$query ?~ string::lowercase(areaOfExpertise) OR
-				$query ?~ string::lowercase(professor) OR
-				$query ?~ technologies OR
-				$query ?~ string::lowercase(supervisor)
-			)
-		) GROUP BY draft
+			draft = false AND (archived = undefined OR archived = false)
+			${formData.thesisType.length > 0 ? 'AND thesisType CONTAINSANY $thesisType' : ''}
+			${formData.specialization.length > 0 ? 'AND specialization CONTAINSANY $specialization' : ''}
+			${formData.areaOfExpertise.length > 0 ? 'AND string::lowercase(areaOfExpertise) = string::lowercase($areaOfExpertise)' : ''}
+			${formData.person.length > 0 ? 'AND (string::lowercase(professor) CONTAINS string::lowercase($person) OR supervisor CONTAINS $person)' : ''}
+			${formData.technologies.length > 0 ? 'AND technologies CONTAINSANY $technologies' : ''}
+			${formData.language.length > 0 ? 'AND $language CONTAINS language' : ''}
+			${formData.query.length > 0 ? `AND ( 
+				$query ANYINSIDE string::words(title) OR
+				$query ANYINSIDE string::words(description) OR
+				$query ANYINSIDE thesisType OR
+				$query ANYINSIDE specialization OR
+				$query ?~ subjectArea OR
+				$query ?~ areaOfExpertise OR
+				$query ANYINSIDE string::words(professor) OR
+				$query ANYINSIDE technologies OR
+				$query ?~ supervisor
+			)` : ''}
+		GROUP BY draft
 		`,
 		{
 			query: formData.query
@@ -102,7 +100,8 @@ export const load = async ({ locals, url }) => {
 			technologies: formData.technologies
 				.split(',')
 				.map((x) => x.trim())
-				.filter((x) => x.length > 0)
+				.filter((x) => x.length > 0),
+			language: formData.language,
 		}
 	);
 

diff --git a/src/routes/(protectedRoutes)/search/+page.svelte b/src/routes/(protectedRoutes)/search/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Input, TopicView, Pagination } from '$lib/components';
+	import { Input, TopicView, Pagination, MultiSelect } from '$lib/components';
 	import Search from 'svelte-material-icons/Magnify.svelte';
 	import ArrowDown from 'svelte-material-icons/ChevronDown.svelte';
 	import ArrowUp from 'svelte-material-icons/ChevronUp.svelte';
@@ -15,7 +15,8 @@
 		areaOfExpertise: data.searchData?.areaOfExpertise ?? '',
 		specialization: data.searchData?.specialization ?? '',
 		person: data.searchData?.person ?? '',
-		technologies: data.searchData?.technologies ?? ''
+		technologies: data.searchData?.technologies ?? '',
+		language: data.searchData?.language ?? []
 	};
 
 	export const snapshot = {
@@ -114,6 +115,9 @@
 				suggestions
 				bind:value={formData.technologies} />
 		</div>
+		<div class="w-48">
+			<MultiSelect id="language" label="Sprache" data={[{ text: '🇩🇪', id: 'de'}, { text: '🇬🇧', id: 'en'}, { text: '🇩🇪/🇬🇧', id: 'de_en'}]} bind:value={formData.language}/>
+		</div>
 	</div>
 </form>
 

diff --git a/src/routes/(protectedRoutes)/topic/[id]/+page.svelte b/src/routes/(protectedRoutes)/topic/[id]/+page.svelte
@@ -6,6 +6,7 @@
 	import StarOutline from 'svelte-material-icons/StarOutline.svelte';
 	import CalendarMonth from 'svelte-material-icons/CalendarMonth.svelte';
 	import CalendarSync from 'svelte-material-icons/CalendarSync.svelte';
+	import { getLanguageIcon } from '$lib/utils';
 	import { enhance } from '$app/forms';
 	import md from 'markdown-it';
 	import hljs from 'highlight.js';
@@ -82,6 +83,7 @@
 					{/if}
 				</h1>
 				<div>
+					<span class="badge badge-primary">{getLanguageIcon(data.topic.language ?? 'de')}</span>
 					{#each data.topic.thesisType as tt}
 						<span class="badge badge-primary badge-lg mb-2">{tt}</span>
 					{/each}