feat: Added filtering by optional tags in the main page. Created TagFilter... #40
@@ -76,15 +76,7 @@
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
.submit {
|
|
||||||
position: sticky;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
bottom: 0;
|
|
||||||
margin-left: -0.5rem;
|
|
||||||
width: calc(100% + 1rem);
|
|
||||||
}
|
|
||||||
.tagDisplay {
|
.tagDisplay {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.4rem;
|
gap: 0.4rem;
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
import Navbar from "$lib/components/Navbar.svelte";
|
import Navbar from "$lib/components/Navbar.svelte";
|
||||||
import TagFilter from "$lib/components/inputs/TagFilter.svelte";
|
import TagFilter from "$lib/components/inputs/TagFilter.svelte";
|
||||||
import {availableStudySpaceTags} from "$lib"
|
import {availableStudySpaceTags} from "$lib"
|
||||||
|
import {allTags} from "$lib"
|
||||||
|
|
||||||
const { data } = $props();
|
const { data } = $props();
|
||||||
const { studySpaces, supabase } = $derived(data);
|
const { studySpaces, supabase } = $derived(data);
|
||||||
@@ -13,20 +14,25 @@
|
|||||||
let tagFilter = $state("");
|
let tagFilter = $state("");
|
||||||
let tagFilterElem = $state<HTMLInputElement>()
|
let tagFilterElem = $state<HTMLInputElement>()
|
||||||
let filteredTags = $derived(
|
let filteredTags = $derived(
|
||||||
availableStudySpaceTags
|
allTags
|
||||||
.filter((tag) => tag.toLowerCase().includes(tagFilter.toLowerCase()))
|
.filter((tag) => tag.toLowerCase().includes(tagFilter.toLowerCase()))
|
||||||
.filter((tag) => availableStudySpaceTags.includes(tag))
|
.filter((tag) => allTags.includes(tag))
|
||||||
)
|
)
|
||||||
|
|
||||||
let filteredStudySpaces = $derived(() =>
|
let filteredStudySpaces = $derived(() =>
|
||||||
selectedTags.length == 0
|
selectedTags.length === 0
|
||||||
? studySpaces
|
? studySpaces
|
||||||
: studySpaces.filter(space =>
|
: studySpaces.filter(space => {
|
||||||
selectedTags.every(tag =>
|
const allTags = [
|
||||||
(space.tags || []).includes(tag)
|
...(space.tags || []),
|
||||||
)
|
space.volume,
|
||||||
)
|
space.wifi,
|
||||||
);
|
space.power
|
||||||
|
].filter(Boolean);
|
||||||
|
|
||||||
|
return selectedTags.every(tag => allTags.includes(tag));
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
let dropdownVisible = $state(false)
|
let dropdownVisible = $state(false)
|
||||||
|
|
||||||
@@ -62,10 +68,8 @@
|
|||||||
deleteTag={deleteTag}
|
deleteTag={deleteTag}
|
||||||
addTag={addTag}
|
addTag={addTag}
|
||||||
/>
|
/>
|
||||||
{#each studySpaces.filter(space =>
|
|
||||||
selectedTags.length === 0 ||
|
{#each filteredStudySpaces() as studySpace (studySpace.id)}
|
||||||
selectedTags.every(tag => (space.tags || []).includes(tag))
|
|
||||||
) as studySpace (studySpace.id)}
|
|
||||||
{@const imgUrl =
|
{@const imgUrl =
|
||||||
studySpace.study_space_images.length > 0
|
studySpace.study_space_images.length > 0
|
||||||
? supabase.storage
|
? supabase.storage
|
||||||
|
|||||||
Reference in New Issue
Block a user