2022-05-08 12:02:37 +00:00
|
|
|
<script>
|
2022-05-24 14:31:52 +00:00
|
|
|
import { createEventDispatcher } from 'svelte';
|
2022-06-09 10:08:14 +00:00
|
|
|
import Icon from "./Icon.svelte"
|
2022-05-24 14:31:52 +00:00
|
|
|
|
2022-05-23 17:17:44 +00:00
|
|
|
export let alltopics;
|
2022-05-30 11:18:19 +00:00
|
|
|
export let hideTopic = false;
|
2022-05-23 17:17:44 +00:00
|
|
|
|
2022-06-09 10:08:14 +00:00
|
|
|
let showForm = true;
|
|
|
|
|
2022-05-23 17:17:44 +00:00
|
|
|
let query = {
|
2022-05-24 14:31:52 +00:00
|
|
|
text: "",
|
|
|
|
topic: "",
|
|
|
|
level: "",
|
2022-06-01 06:20:01 +00:00
|
|
|
sortby: "rating",
|
|
|
|
tag: ""
|
2022-05-23 17:17:44 +00:00
|
|
|
};
|
2022-05-08 12:02:37 +00:00
|
|
|
|
2022-05-24 14:31:52 +00:00
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
|
|
|
|
$: dispatch('queryChanged', query);
|
|
|
|
|
2022-05-08 12:02:37 +00:00
|
|
|
</script>
|
|
|
|
|
2022-06-11 12:51:37 +00:00
|
|
|
<div class="sticky z-10 top-[50px] lg:-ml-10 bg-gradient-to-r from-lightGradOne to-lightGradTwo dark:bg-gradient-to-r dark:from-neutral_light dark:to-neutral_light rounded">
|
2022-06-09 12:07:09 +00:00
|
|
|
<div class="relative pt-1">
|
|
|
|
{#if showForm == false}
|
|
|
|
<div class="bg-primary rounded absolute top-0 right-0">
|
|
|
|
<button on:click={e => showForm = true} type="button" class=" p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
|
|
|
|
<span class="sr-only">Open search form</span>
|
|
|
|
<Icon kind="search"/>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
{/if}
|
2022-06-09 10:08:14 +00:00
|
|
|
|
2022-06-09 12:07:09 +00:00
|
|
|
{#if showForm}
|
|
|
|
<div class="bg-primary rounded absolute top-0 right-0">
|
|
|
|
<button on:click={e => showForm = false} type="button" class="p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
|
|
|
|
<span class="sr-only">Close search form</span>
|
|
|
|
<Icon kind="close"/>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
{/if}
|
2022-06-09 10:08:14 +00:00
|
|
|
|
2022-06-09 12:07:09 +00:00
|
|
|
{#if showForm}
|
|
|
|
<form class="w-full p-2 gap-3 mt-10 flex flex-col xl:flex-row" on:submit|preventDefault>
|
|
|
|
<sl-input type="search" placeholder="Search by keywords" size="medium" clearable class="w-full flex-1 border-0 p-0 focus:ring-0" value={query.text} on:sl-input="{e => query.text = e.target.value}">
|
|
|
|
<sl-icon name="search" slot="prefix"></sl-icon>
|
|
|
|
</sl-input>
|
2022-06-09 10:08:14 +00:00
|
|
|
|
2022-06-09 12:07:09 +00:00
|
|
|
{#if !hideTopic}
|
|
|
|
<fluent-combobox autocomplete="both" placeholder="Any topic" class="ml-2 mt-1 outline-none border-2 border-grey-600" on:change="{e => query.topic = e.target.value}">
|
|
|
|
{#each alltopics.sort((a,b) => a.display_name.localeCompare(b.display_name)) as topic}
|
|
|
|
<fluent-option value={topic.name}>{topic.display_name}</fluent-option>
|
|
|
|
{/each}
|
|
|
|
</fluent-combobox>
|
|
|
|
{/if}
|
2022-06-09 10:08:14 +00:00
|
|
|
|
2022-06-09 12:07:09 +00:00
|
|
|
<div class="flex flex-col md:flex-row justify-center items-center gap-3 w-full">
|
|
|
|
<sl-select class="w-full" on:sl-change="{e => query.tag = e.target.value}" value={query.tag}>
|
|
|
|
<sl-menu-item value="">Any tag</sl-menu-item>
|
|
|
|
<sl-menu-item value="inspirational">Inspirational</sl-menu-item>
|
|
|
|
<sl-menu-item value="educational">Educational</sl-menu-item>
|
|
|
|
<sl-menu-item value="challenging">Challenging</sl-menu-item>
|
|
|
|
<sl-menu-item value="entertaining">Entertaining</sl-menu-item>
|
|
|
|
<sl-menu-item value="visual">Visual</sl-menu-item>
|
|
|
|
<sl-menu-item value="interactive">Interactive</sl-menu-item>
|
|
|
|
<sl-menu-item value="oer">Open (no login or pay)</sl-menu-item>
|
|
|
|
</sl-select>
|
2022-06-08 12:41:55 +00:00
|
|
|
|
2022-06-09 12:07:09 +00:00
|
|
|
<sl-select class="w-full" on:sl-change="{e => query.level = e.target.value}" value={query.level}>
|
|
|
|
<sl-menu-item value="">Any level</sl-menu-item>
|
|
|
|
<sl-menu-item value="childlike">Childlike</sl-menu-item>
|
|
|
|
<sl-menu-item value="beginner">Beginner</sl-menu-item>
|
|
|
|
<sl-menu-item value="intermediate">Intermediate</sl-menu-item>
|
|
|
|
<sl-menu-item value="advanced">Advanced</sl-menu-item>
|
|
|
|
<sl-menu-item value="research">Research</sl-menu-item>
|
|
|
|
</sl-select>
|
|
|
|
</div>
|
2022-05-08 12:02:37 +00:00
|
|
|
|
2022-06-09 12:07:09 +00:00
|
|
|
<sl-select class="w-full md:w-2/5" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
|
|
|
|
<sl-icon name="sort-down-alt" slot="prefix"></sl-icon>
|
|
|
|
<sl-menu-item value="rating">Sort by Rating</sl-menu-item>
|
|
|
|
<sl-menu-item value="year">Sort by Year</sl-menu-item>
|
|
|
|
<sl-menu-item value="name">Sort by Name</sl-menu-item>
|
|
|
|
</sl-select>
|
|
|
|
</form>
|
|
|
|
{/if}
|
|
|
|
</div>
|
2022-06-09 10:08:14 +00:00
|
|
|
</div>
|