feat: Added filtering by optional tags in the main page. Created TagFilter... #40

Merged
tt2022 merged 8 commits from feat/filter-by-tags into master 2025-06-11 02:45:24 +00:00
19 changed files with 277 additions and 440 deletions
Showing only changes of commit 201467c73a - Show all commits

View File

@@ -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;

View File

@@ -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