LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Improved search-screen

Browse Source
This commit is contained in:
Mawoka
2022-06-19 19:21:39 +02:00
parent 5aad57d7cc
commit 2b8168ad5e
4 changed files with 71 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/search-card.svelte
+26
View File
@@ -0,0 +1,26 @@
<script>
import { getLocalization } from '$lib/i18n';
const { t } = getLocalization();
export let quiz;
</script>
<div class="flex justify-center">
<a href="/view/{quiz.id}" class="h-max w-fit">
<div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20 dark:bg-slate-800">
<!-- <div class='flex justify-center md:justify-end -mt-16'>
<img class='w-20 h-20 object-cover rounded-full border-2 border-indigo-500'
src='https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80'>
</div>-->
<div>
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">
{quiz.title}
</h2>
<p class="mt-2 text-gray-600 dark:text-gray-300">{quiz.description}</p>
</div>
<div class="flex mt-4">
<span>{$t('explore_page.made_by')} {quiz.user}</span>
</div>
</div>
</a>
</div>
frontend/src/lib/stores.ts
+35
View File
@@ -5,3 +5,38 @@ export const signedIn = writable(false);
export const pathname = writable('/');
export const alertModal = writable({ open: false, title: '', body: '' });
import { goto } from '$app/navigation';
import { page } from '$app/stores';
const URLSearchParamsToObject = (params: URLSearchParams) => {
let obj = {};
params.forEach((v: string, k: string) => {
obj[k] = v;
});
return obj;
};
export const createQueryParamsStore = (key: string) => {
let params;
page.subscribe((v) => {
params = URLSearchParamsToObject(v.url.searchParams);
});
return {
subscribe: (cb: Function) => {
return page.subscribe((p) => {
cb(p.url.searchParams.get(key));
});
},
set: (value: string) => {
params[key] = value;
const urlSearchParams = new URLSearchParams(params);
goto(`?${urlSearchParams.toString()}`, {
keepfocus: true,
replaceState: true,
noscroll: true
});
}
};
};
frontend/src/routes/explore.svelte
+2 -21
View File
@@ -12,6 +12,7 @@
<script lang="ts">
import { getLocalization } from '$lib/i18n';
const { t } = getLocalization();
import SearchCard from '$lib/search-card.svelte';
const getData = async () => {
const response = await fetch('/api/v1/search/', {
method: 'POST',
@@ -45,27 +46,7 @@
{:then quizzes}
<div class="grid lg:grid-cols-3 grid-cols-1">
{#each quizzes.hits as quiz}
<div class="flex justify-center">
<a href="/view/{quiz.id}" class="h-max w-fit">
<div
class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20 dark:bg-slate-800"
>
<!-- <div class='flex justify-center md:justify-end -mt-16'>
<img class='w-20 h-20 object-cover rounded-full border-2 border-indigo-500'
src='https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80'>
</div>-->
<div>
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">
{quiz.title}
</h2>
<p class="mt-2 text-gray-600 dark:text-gray-300">{quiz.description}</p>
</div>
<div class="flex mt-4">
<span>{$t('explore_page.made_by')} {quiz.user}</span>
</div>
</div>
</a>
</div>
<SearchCard {quiz} />
{/each}
</div>
{/await}
frontend/src/routes/search.svelte
+8 -28
View File
@@ -12,18 +12,20 @@
<script lang="ts">
import { getLocalization } from '$lib/i18n';
const { t } = getLocalization();
let search_term = '';
import { page } from '$app/stores';
import SearchCard from '$lib/search-card.svelte';
import { createQueryParamsStore } from '$lib/stores';
const search_term = createQueryParamsStore('q');
let resp_data = null;
const submit = async () => {
console.log('Submit!', search_term);
const res = await fetch('/api/v1/search/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
q: search_term,
q: $search_term,
attributesToHighlight: ['*']
})
});
@@ -56,12 +58,12 @@
placeholder={$t('search_page.at_least_3_characters')}
aria-label="Search"
aria-describedby="button-addon2"
bind:value={search_term}
bind:value={$search_term}
/>
<button
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out flex items-center disabled:opacity-50 disabled:cursor-not-allowed"
id="button-addon2"
disabled={search_term.length <= 2}
disabled={$search_term.length <= 2}
type="submit"
>
<svg
@@ -89,29 +91,7 @@
{#if resp_data.hits.length !== 0}
<div class="grid lg:grid-cols-3 grid-cols-1">
{#each resp_data.hits as quiz}
<div class="flex justify-center">
<a href="/view/{quiz.id}" class="h-max w-fit">
<div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20">
<!-- <div class='flex justify-center md:justify-end -mt-16'>
<img class='w-20 h-20 object-cover rounded-full border-2 border-indigo-500'
src='https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80'>
</div>-->
<div>
<h2 class="text-gray-800 text-3xl font-semibold">
{@html quiz._formatted.title}
</h2>
<p class="mt-2 text-gray-600">
{@html quiz._formatted.description}
</p>
</div>
<div class="flex mt-4">
<span
>{$t('explore_page.made_by')} {@html quiz._formatted.user}</span
>
</div>
</div>
</a>
</div>
<SearchCard {quiz} />
{/each}
</div>
{:else}