Skip to content

Commit 9e96cae

Browse files
authored
Merge pull request #60 from CodeandoMexico/issue43
Adding filter for projects view
2 parents 3bb9b19 + 91917ed commit 9e96cae

File tree

3 files changed

+93
-15
lines changed

3 files changed

+93
-15
lines changed

src/components/MenuTagsProject.svelte

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<script>
2+
export let tags;
3+
export let addToFilter;
4+
export let removeFromFilter;
5+
let tagsToShow = [...tags.map((tag = '') => ({ isActive: false, text: tag }))];
6+
7+
const handleAdd = (tag = '', index = 0) => {
8+
tagsToShow[index] = {...tagsToShow[index], isActive: true};
9+
addToFilter(tag);
10+
}
11+
12+
const handleDelete = (e = event, tag = '', index = 0) => {
13+
e?.stopPropagation();
14+
tagsToShow[index] = {...tagsToShow[index], isActive: false};
15+
removeFromFilter(tag);
16+
}
17+
</script>
18+
19+
{#each tagsToShow as tag, tagInd}
20+
<a
21+
href={null}
22+
class={`flex rounded-full px-3 py-1 text-xs${tag.isActive ? ' active' : ''}`}
23+
on:click={() => handleAdd(tag.text, tagInd)}
24+
>
25+
{tag.text.charAt(0).toUpperCase() + tag.text.slice(1)}
26+
{#if (tag.isActive)}
27+
<button
28+
class="flex justify-center items-center w-4 h-4 rounded-full ml-2 text-cmxblack bg-gray-100"
29+
on:click={(e) => handleDelete(e, tag.text, tagInd)}
30+
>
31+
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor" aria-hidden="true">
32+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
33+
</svg>
34+
</button>
35+
{/if}
36+
</a>
37+
{/each}
38+
39+
<!-- To avoid increase a lot the anchor's classes -->
40+
<style>
41+
a {
42+
color: #030304;
43+
background-color: #f3f3f4;
44+
}
45+
a:hover {
46+
cursor: pointer;
47+
filter: brightness(0.95);
48+
}
49+
a.active {
50+
color: #f3f3f4;
51+
background-color: #030304;
52+
}
53+
</style>

src/routes/proyectos/+page.server.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import client from '$lib/apiClient'
2+
import { getFlatArrayUnrepeated } from '$lib/utilities';
23
import { readItems } from '@directus/sdk'
34

45
export async function load() {
@@ -11,8 +12,11 @@ export async function load() {
1112
}
1213
}))
1314

15+
const tags = getFlatArrayUnrepeated(projects);
16+
1417
return {
15-
projects
18+
projects,
19+
tags
1620
}
1721
}
1822

src/routes/proyectos/+page.svelte

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,37 @@
33
import Hero from '@/components/Hero.svelte';
44
import IconTextAction from '@/components/IconTextAction.svelte';
55
import SubscribeBox from '@/components/SubscribeBox.svelte';
6-
import Badge from '@/components/Badge.svelte';
76
import ProjectCard from '@/components/Cards/ProjectCard.svelte';
8-
export let data
9-
const { projects } = data
7+
import MenuTagsProject from '@/components/MenuTagsProject.svelte';
8+
export let data;
9+
const { projects, tags } = data;
10+
let activeTags = [];
11+
let filteredProjects = [...projects];
12+
13+
const getFilteredProjects = () => {
14+
const setToLowerCase = (item = '') => item?.toLowerCase();
15+
const areTagsIncluded = (item = '') => activeTags?.includes(item);
16+
17+
filteredProjects = Boolean(activeTags?.length)
18+
? projects.filter(project => project.tags?.map(setToLowerCase).some(areTagsIncluded))
19+
: [...projects];
20+
}
21+
22+
const addToFilter = (tag = '') => {
23+
if (activeTags.includes(tag)) {
24+
return false;
25+
}
26+
27+
tag = tag.toLowerCase();
28+
activeTags.push(tag);
29+
getFilteredProjects();
30+
}
31+
32+
const removeFromFilter = (tag = '') => {
33+
tag = tag.toLowerCase();
34+
activeTags = activeTags.filter(val => val !== tag);
35+
getFilteredProjects();
36+
}
1037
1138
updateMenuSelector({url: '/proyectos'})
1239
</script>
@@ -30,17 +57,11 @@
3057
3158
<section id="nuestros-proyectos" class="container mx-auto my-12 p-3">
3259
<h1 class="text-4xl font-bold my-3">Conoce nuestros proyectos</h1>
33-
<!-- TODO: Habilitar Badges -->
34-
<!-- <div class="flex gap-4 my-6 flex-wrap">
35-
<Badge text="Movilidad" color="#F3F3F4"/>
36-
<Badge text="Educación" color="#F2D301"/>
37-
<Badge text="Legislativo" color="#F3F3F4"/>
38-
<Badge text="Datos abiertos" color="#F3F3F4"/>
39-
<Badge text="Código abierto" color="#F3F3F4"/>
40-
</div> -->
41-
<!-- <div class="flex flex-col basis-1/3 md:flex-row columns-3 container my-8 mx-auto gap-20"> -->
42-
<div class="grid grid-cols-1 md:grid-cols-3 container my-8 mx-auto gap-20">
43-
{#each projects as project}
60+
<div class="flex gap-4 my-6 flex-wrap">
61+
<MenuTagsProject tags={tags} addToFilter={addToFilter} removeFromFilter={removeFromFilter} />
62+
</div>
63+
<div class="grid grid-cols-1 md:grid-cols-3 container my-8 mx-auto gap-20">
64+
{#each filteredProjects as project}
4465
<div class="my-5">
4566
<ProjectCard
4667
title={project.title}

0 commit comments

Comments
 (0)