Merge pull request #60 from CodeandoMexico/issue43

Adding filter for projects view

Author: mendozagioo

src/components/MenuTagsProject.svelte

@@ -0,0 +1,53 @@
+<script>
+  export let tags;
+  export let addToFilter;
+  export let removeFromFilter;
+  let tagsToShow = [...tags.map((tag = '') => ({ isActive: false, text: tag }))];
+
+  const handleAdd = (tag = '', index = 0) => {
+    tagsToShow[index] = {...tagsToShow[index], isActive: true};
+    addToFilter(tag);
+  }
+
+  const handleDelete = (e = event, tag = '', index = 0) => {
+    e?.stopPropagation();
+    tagsToShow[index] = {...tagsToShow[index], isActive: false};
+    removeFromFilter(tag);
+  }
+</script>
+
+{#each tagsToShow as tag, tagInd}
+  <a
+    href={null}
+    class={`flex rounded-full px-3 py-1 text-xs${tag.isActive ? ' active' : ''}`}
+    on:click={() => handleAdd(tag.text, tagInd)}
+  >
+    {tag.text.charAt(0).toUpperCase() + tag.text.slice(1)}
+    {#if (tag.isActive)}
+      <button
+        class="flex justify-center items-center w-4 h-4 rounded-full ml-2 text-cmxblack bg-gray-100"
+        on:click={(e) => handleDelete(e, tag.text, tagInd)}
+      >
+        <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    {/if}
+  </a>
+{/each}
+
+<!-- To avoid increase a lot the anchor's classes -->
+<style>
+  a {
+    color: #030304;
+    background-color: #f3f3f4;
+  }
+  a:hover {
+    cursor: pointer;
+    filter: brightness(0.95);
+  }
+  a.active {
+    color: #f3f3f4;
+    background-color: #030304;
+  }
+</style>

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

@@ -1,4 +1,5 @@
 import client from '$lib/apiClient'
+import { getFlatArrayUnrepeated } from '$lib/utilities';
 import { readItems } from '@directus/sdk'
 
 export async function load() {
@@ -11,8 +12,11 @@ export async function load() {
 		}
   }))
 
+  const tags = getFlatArrayUnrepeated(projects);
+
 	return {
-    projects
+    projects,
+    tags
 	}
 }
 

src/routes/proyectos/+page.svelte

@@ -3,10 +3,37 @@
   import Hero from '@/components/Hero.svelte';
   import IconTextAction from '@/components/IconTextAction.svelte';
   import SubscribeBox from '@/components/SubscribeBox.svelte';
-  import Badge from '@/components/Badge.svelte';
 	import ProjectCard from '@/components/Cards/ProjectCard.svelte';
-  export let data
-  const { projects } = data
+  import MenuTagsProject from '@/components/MenuTagsProject.svelte';
+  export let data;
+  const { projects, tags } = data;
+  let activeTags = [];
+  let filteredProjects = [...projects];
+
+  const getFilteredProjects = () => {
+    const setToLowerCase = (item = '') => item?.toLowerCase();
+    const areTagsIncluded = (item = '') => activeTags?.includes(item);
+
+    filteredProjects = Boolean(activeTags?.length)
+      ? projects.filter(project => project.tags?.map(setToLowerCase).some(areTagsIncluded))
+      : [...projects];
+  }
+
+  const addToFilter = (tag = '') => {
+    if (activeTags.includes(tag)) {
+      return false;
+    }
+
+    tag = tag.toLowerCase();
+    activeTags.push(tag);
+    getFilteredProjects();
+  }
+
+  const removeFromFilter = (tag = '') => {
+    tag = tag.toLowerCase();
+    activeTags = activeTags.filter(val => val !== tag);
+    getFilteredProjects();
+  }
 
   updateMenuSelector({url: '/proyectos'})
 </script>
@@ -30,17 +57,11 @@
 
 <section id="nuestros-proyectos" class="container mx-auto my-12 p-3">
   <h1 class="text-4xl font-bold my-3">Conoce nuestros proyectos</h1>
-  <!-- TODO: Habilitar Badges -->
-  <!-- <div class="flex gap-4 my-6 flex-wrap">
-    <Badge text="Movilidad" color="#F3F3F4"/>
-    <Badge text="Educación" color="#F2D301"/>
-    <Badge text="Legislativo" color="#F3F3F4"/>
-    <Badge text="Datos abiertos" color="#F3F3F4"/>
-    <Badge text="Código abierto" color="#F3F3F4"/>
-  </div> -->
-  <!-- <div class="flex flex-col basis-1/3 md:flex-row columns-3 container my-8 mx-auto gap-20"> -->
-    <div class="grid grid-cols-1 md:grid-cols-3 container my-8 mx-auto gap-20">
-    {#each projects as project}
+  <div class="flex gap-4 my-6 flex-wrap">
+    <MenuTagsProject tags={tags} addToFilter={addToFilter} removeFromFilter={removeFromFilter} />
+  </div>
+  <div class="grid grid-cols-1 md:grid-cols-3 container my-8 mx-auto gap-20">
+    {#each filteredProjects as project}
       <div class="my-5">
         <ProjectCard
         title={project.title}