From e84caafec32e4e629533cd65c39f571ec653d024 Mon Sep 17 00:00:00 2001
From: Jean Piere Rodriguez <jeanpiere.dev@gmail.com>
Date: Mon, 16 Jun 2025 05:25:16 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20show=20carousel=20with=20project=C2=B4s?=
 =?UTF-8?q?=20update?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/imgs/placeholder-project-update.jpg  | Bin 0 -> 6797 bytes
 src/components/Carousel.svelte              |  94 +++++++++---------
 src/components/project/ProjectUpdate.svelte | 102 +++++++++++++++++++-
 src/components/project/SingleProject.svelte |   2 -
 src/components/project/Tabs.svelte          |  24 +++--
 src/i18n/locales/es.json                    |  11 ++-
 6 files changed, 176 insertions(+), 57 deletions(-)
 create mode 100644 public/imgs/placeholder-project-update.jpg

diff --git a/public/imgs/placeholder-project-update.jpg b/public/imgs/placeholder-project-update.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6c3183576ac294a0d13c8ef1ce37e12affd8491e
GIT binary patch
literal 6797
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
WBWd;x!Q9Zbg!ta^1K{h!@_zv#L5N=f

literal 0
HcmV?d00001

diff --git a/src/components/Carousel.svelte b/src/components/Carousel.svelte
index 47127799..ebd93054 100644
--- a/src/components/Carousel.svelte
+++ b/src/components/Carousel.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
     import ArrowSliderIcon from "../svgs/ArrowSliderIcon.svelte";
-    import { onMount } from "svelte";
+    import { onMount, tick } from "svelte";
     import { writable } from "svelte/store";
 
     export let itemsPerGroup: number = 1;
     export let gap: number = 16;
     export let showDots: boolean = true;
+    export let highlightActive: boolean = false;
+    export let dimNext: boolean = false;
 
     let container: HTMLDivElement;
     let totalItems = 0;
+    let activeGroupValue = 0;
     const activeGroup = writable(0);
 
     let totalGroups = 0;
@@ -29,8 +32,7 @@
     function handleMove(x: number, event: Event) {
         if (!isDragging) return;
         event.preventDefault();
-        const currentX = x - container.offsetLeft;
-        const walk = (currentX - startX) * 1.5;
+        const walk = (x - container.offsetLeft - startX) * 1.5;
         container.scrollLeft = scrollLeft - walk;
     }
 
@@ -39,33 +41,17 @@
         container.classList.remove("dragging");
     }
 
-    function handleMouseDown(e: MouseEvent) {
-        handleStart(e.pageX);
-    }
-    function handleMouseMove(e: MouseEvent) {
-        handleMove(e.pageX, e);
-    }
-
-    function handleTouchStart(e: TouchEvent) {
-        handleStart(e.touches[0].pageX);
-    }
-    function handleTouchMove(e: TouchEvent) {
-        handleMove(e.touches[0].pageX, e);
-    }
-
-    function scrollToGroup(groupIndex: number) {
+    function scrollToGroup(index: number) {
         const children = Array.from(container.children) as HTMLElement[];
-        const firstItemIndex = groupIndex * itemsPerGroup;
-        const firstItem = children[firstItemIndex];
-
-        if (!firstItem) return;
+        const first = children[index * itemsPerGroup];
+        if (!first) return;
 
         container.scrollTo({
-            left: firstItem.offsetLeft - container.offsetLeft,
+            left: first.offsetLeft - container.offsetLeft,
             behavior: "smooth",
         });
 
-        activeGroup.set(groupIndex);
+        activeGroup.set(index);
     }
 
     function scroll(direction: "left" | "right") {
@@ -86,11 +72,9 @@
         for (let i = 0; i < totalGroups; i++) {
             const firstIndex = i * itemsPerGroup;
             const firstItem = children[firstIndex];
-
             if (!firstItem) continue;
 
             const itemLeft = firstItem.getBoundingClientRect().left;
-
             if (itemLeft >= containerLeft - 1) {
                 activeGroup.set(i);
                 break;
@@ -103,7 +87,6 @@
         const paddingLeft = parseFloat(styles.paddingLeft);
         const paddingRight = parseFloat(styles.paddingRight);
         const availableWidth = container.clientWidth - paddingLeft - paddingRight;
-
         const childWidth = (availableWidth - gap * (itemsPerGroup - 1)) / itemsPerGroup;
 
         for (const child of Array.from(container.children) as HTMLElement[]) {
@@ -113,49 +96,72 @@
         }
     }
 
-    onMount(() => {
-        totalItems = container.children.length;
-        totalGroups = Math.ceil(totalItems / itemsPerGroup);
+    function updateChildrenClasses() {
+        const children = Array.from(container.children) as HTMLElement[];
+        children.forEach((child, i) => {
+            child.classList.remove("carousel-primary", "carousel-next");
+            if (highlightActive && i === activeGroupValue) {
+                child.classList.add("carousel-primary");
+            }
+            if (dimNext && i === activeGroupValue + 1) {
+                child.classList.add("carousel-next");
+            }
+        });
+    }
 
+    onMount(async () => {
+        await tick();
         updateChildrenWidth();
 
         const resizeObserver = new ResizeObserver(() => {
             updateChildrenWidth();
         });
-
         resizeObserver.observe(container);
 
         const unsubscribe = activeGroup.subscribe((index) => {
+            activeGroupValue = index;
             isAtStart = index === 0;
             isAtEnd = index === totalGroups - 1;
+            updateChildrenClasses();
         });
 
+        const mutationObserver = new MutationObserver(() => {
+            totalItems = container.children.length;
+            totalGroups = Math.ceil(totalItems / itemsPerGroup);
+            if (totalItems > 0) {
+                activeGroup.set(0);
+                mutationObserver.disconnect();
+            }
+        });
+        mutationObserver.observe(container, { childList: true });
+
         return () => {
             resizeObserver.disconnect();
+            mutationObserver.disconnect();
             unsubscribe();
         };
     });
 </script>
 
-<div class="relative w-full overflow-hidden">
+<div class="relative w-full">
     <button
         on:click={() => scroll("left")}
-        class="absolute top-1/2 left-2 z-10 h-10 w-10 -translate-y-1/2 rounded-full bg-[#e6e5f7] p-2 shadow disabled:cursor-not-allowed disabled:opacity-50"
+        class="absolute top-1/2 -left-4 z-10 h-10 w-10 -translate-y-1/2 cursor-pointer rounded-full bg-[#e6e5f7] p-2 shadow-md disabled:cursor-not-allowed disabled:opacity-50"
         aria-label="Scroll left"
         disabled={isAtStart}
     >
-        <ArrowSliderIcon direction={"left"} />
+        <ArrowSliderIcon direction="left" />
     </button>
 
     <div
         bind:this={container}
-        class="no-select hide-scrollbar flex cursor-grab touch-none snap-x snap-mandatory gap-[16px] overflow-x-auto px-8 py-8"
-        on:mousedown={handleMouseDown}
-        on:mousemove={handleMouseMove}
+        class="no-select hide-scrollbar flex cursor-grab touch-none snap-x snap-mandatory gap-[16px] overflow-hidden overflow-x-auto"
+        on:mousedown={(e) => handleStart(e.pageX)}
+        on:mousemove={(e) => handleMove(e.pageX, e)}
         on:mouseup={endDrag}
         on:mouseleave={endDrag}
-        on:touchstart={handleTouchStart}
-        on:touchmove={handleTouchMove}
+        on:touchstart={(e) => handleStart(e.touches[0].pageX)}
+        on:touchmove={(e) => handleMove(e.touches[0].pageX, e)}
         on:touchend={endDrag}
         on:scroll={handleScroll}
     >
@@ -164,21 +170,21 @@
 
     <button
         on:click={() => scroll("right")}
-        class="absolute top-1/2 right-2 z-10 h-10 w-10 -translate-y-1/2 rounded-full bg-[#e6e5f7] p-2 shadow disabled:cursor-not-allowed disabled:opacity-50"
+        class="absolute top-1/2 -right-4 z-10 h-10 w-10 -translate-y-1/2 cursor-pointer rounded-full bg-[#e6e5f7] p-2 shadow-md disabled:cursor-not-allowed disabled:opacity-50"
         aria-label="Scroll right"
         disabled={isAtEnd}
     >
         <ArrowSliderIcon />
     </button>
 
-    {#if showDots}
+    {#if showDots && totalGroups > 1}
         <div class="mt-4 flex justify-center gap-2">
             {#each Array(totalGroups) as _, i}
                 <button
                     on:click={() => scrollToGroup(i)}
                     class="h-2 w-2 rounded-full transition-all"
-                    class:bg-indigo-500={i === $activeGroup}
-                    class:bg-gray-300={i !== $activeGroup}
+                    class:bg-indigo-500={i === activeGroupValue}
+                    class:bg-gray-300={i !== activeGroupValue}
                 />
             {/each}
         </div>
@@ -191,6 +197,7 @@
         -webkit-user-select: none;
         -ms-user-select: none;
     }
+
     .dragging {
         cursor: grabbing;
     }
@@ -199,6 +206,7 @@
         scrollbar-width: none;
         -ms-overflow-style: none;
     }
+
     .hide-scrollbar::-webkit-scrollbar {
         display: none;
     }
diff --git a/src/components/project/ProjectUpdate.svelte b/src/components/project/ProjectUpdate.svelte
index d490f642..19d8388b 100644
--- a/src/components/project/ProjectUpdate.svelte
+++ b/src/components/project/ProjectUpdate.svelte
@@ -1,20 +1,116 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { t } from "../../i18n/store";
+    import ActiveFilterIcon from "../../svgs/ActiveFilterIcon.svelte";
+    import { Modal } from "flowbite-svelte";
+
     import type { Project, ProjectUpdate } from "../../openapi/client/index";
     import { apiProjectUpdatesGetCollection } from "../../openapi/client/index";
-    import Slider from "./Slider.svelte";
+    import Carousel from "../Carousel.svelte";
 
     const { project } = $props<{ project: Project }>();
     let projectsUpdates: ProjectUpdate[] = $state([]);
+    let openModal = $state(false);
+    let selectedProject: ProjectUpdate | null = $state(null);
+
+    function formatDate(date: string): string {
+        const options: Intl.DateTimeFormatOptions = {
+            day: "2-digit",
+            month: "short",
+            year: "numeric",
+        };
+        return new Date(date).toLocaleDateString(undefined, options);
+    }
+
+    function cleanCloseButton() {
+        const closeBtn = document.querySelector('button[aria-label="Close"]');
+        if (!closeBtn) return;
+
+        closeBtn.removeAttribute("aria-label");
+        closeBtn.classList.remove("sr-only");
+
+        closeBtn.querySelectorAll("span").forEach((el) => {
+            if (el.textContent?.trim() === "Close") {
+                el.remove();
+            }
+        });
+    }
 
     onMount(async () => {
         const { data } = await apiProjectUpdatesGetCollection({
             query: { project: `/v4/projects/${project.id}` },
         });
-        console.log("DATA:", data);
         projectsUpdates = data || [];
     });
+
+    $effect(() => {
+        if (openModal) cleanCloseButton();
+        if (!openModal) selectedProject = null;
+    });
 </script>
 
-<Slider slides={projectsUpdates} />
+<div class="flex flex-col gap-10">
+    <h2 class="text-tertiary line-clamp-2 flex max-w-2xl text-[40px] leading-tight font-bold">
+        {$t("project.tabs.updates.content.title")}
+    </h2>
+    <Carousel gap={16} showDots={true} itemsPerGroup={2}>
+        {#if projectsUpdates.length === 0}
+            <div
+                class="flex h-[140px] w-full items-center justify-center rounded bg-indigo-100 font-bold"
+            >
+                {$t("project.tabs.updates.content.empty")}
+            </div>
+        {/if}
+
+        {#each projectsUpdates as project}
+            <div
+                class="flex w-full flex-col justify-between gap-6 rounded-4xl bg-white p-6 font-bold"
+            >
+                <div class="flex flex-col gap-4">
+                    <div class="text-tertiary flex flex-row items-center gap-2">
+                        {formatDate(project.date ?? "")}
+                        <ActiveFilterIcon />
+                    </div>
+                    <img
+                        src="/imgs/placeholder-project-update.jpg"
+                        alt="Imagen de project update"
+                        class="no-select rounded-3xl"
+                        draggable="false"
+                    />
+                </div>
+                <div class="flex flex-col gap-4">
+                    <h2 class="text-tertiary text-lg font-semibold">{project.title}</h2>
+                    <div class="flex flex-col gap-2">
+                        <p class="text-secondary text-sm">{project.subtitle}</p>
+                        <p class="line-clamp-2 text-sm text-[#575757]">{project.body}</p>
+                    </div>
+                </div>
+                <div class="flex w-full items-center justify-end">
+                    <button
+                        class="text-tertiary border-tertiary flex cursor-pointer items-start truncate rounded-3xl border px-6 py-4 whitespace-nowrap"
+                        onclick={() => {
+                            selectedProject = project;
+                            openModal = true;
+                        }}
+                    >
+                        {$t("project.tabs.updates.content.btn.read-more")}
+                    </button>
+                </div>
+            </div>
+        {/each}
+    </Carousel>
+
+    <Modal
+        bind:open={openModal}
+        closeBtnClass="top-7 end-7 bg-transparent text-[#462949] hover:bg-transparent hover:text-[#462949] hover:scale-110 transition-transform duration-200 transform focus:ring-0 shadow-none dark:text-[#462949] dark:hover:text-[#462949] dark:hover:bg-transparent"
+        class="!left-1/2 max-w-[800px] p-4 backdrop:bg-[#878282B2] backdrop:backdrop-blur-[5px]"
+        title={selectedProject?.title}
+        headerClass="py-2"
+    >
+        {#if selectedProject}
+            <div class="flex flex-col gap-4">
+                <p class="text-sm text-[#575757]">{selectedProject.body}</p>
+            </div>
+        {/if}
+    </Modal>
+</div>
diff --git a/src/components/project/SingleProject.svelte b/src/components/project/SingleProject.svelte
index cfe7cd2a..ad8898f7 100644
--- a/src/components/project/SingleProject.svelte
+++ b/src/components/project/SingleProject.svelte
@@ -10,7 +10,6 @@
     import { getTerritoryTag } from "../../utils/getTerritoryTag";
     import Countdown from "../Countdown.svelte";
     import LanguagesDropdown from "../LanguagesDropdown.svelte";
-    // import TestSlider from "../TestSlider.svelte";
 
     import { languagesList } from "../../i18n/locales";
     import Tabs from "./Tabs.svelte";
@@ -115,7 +114,6 @@
 
     <Rewards {project} {limit} />
     <Banner {ownerName} />
-    <!-- <TestSlider /> -->
     <Slider {slides} />
     <Tabs {project} />
 </section>
diff --git a/src/components/project/Tabs.svelte b/src/components/project/Tabs.svelte
index 3cd772dd..7ce19b2c 100644
--- a/src/components/project/Tabs.svelte
+++ b/src/components/project/Tabs.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    // import TestSlider from "../TestSlider.svelte";
     import { onMount } from "svelte";
     import { t } from "../../i18n/store";
     import { renderMarkdown } from "../../utils/renderMarkdown";
@@ -13,7 +12,7 @@
         { id: "rewards", label: $t("project.tabs.rewards") },
         { id: "project", label: $t("project.tabs.project") },
         { id: "budget", label: $t("project.tabs.budget") },
-        { id: "updates", label: $t("project.tabs.updates") },
+        { id: "updates", label: $t("project.tabs.updates.title") },
         { id: "community", label: $t("project.tabs.community") },
     ];
 
@@ -46,15 +45,20 @@
 
 <div class="flex w-full justify-center bg-[#E6E5F7] py-20">
     {#if activeTab === "rewards"}
-        <div id="tab-rewards" role="tabpanel" aria-labelledby="tab-button-rewards" class="w-full">
-            <ProjectUpdate {project} />
+        <div
+            id="tab-rewards"
+            role="tabpanel"
+            aria-labelledby="tab-button-rewards"
+            class="w-full px-4"
+        >
+            Contenido de rewards
         </div>
     {:else if activeTab === "project"}
         <div
             id="tab-project"
             role="tabpanel"
             aria-labelledby="tab-button-project"
-            class="flex max-w-4xl flex-col items-center gap-4 px-4"
+            class="flex max-w-4xl flex-col items-center gap-4 px-8"
         >
             {@html contentDescription}
         </div>
@@ -63,9 +67,13 @@
             Contenido de necesidades del presupuesto
         </div>
     {:else if activeTab === "updates"}
-        <div id="tab-updates" role="tabpanel" aria-labelledby="tab-button-updates" class="w-full">
-            <!-- <TestSlider /> -->
-            <!-- <ProjectUpdate {project} active /> -->
+        <div
+            id="tab-updates"
+            role="tabpanel"
+            aria-labelledby="tab-button-updates"
+            class="w-full px-10"
+        >
+            <ProjectUpdate {project} />
         </div>
     {:else if activeTab === "community"}
         <div
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index f3e97a7e..5958cacf 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -39,7 +39,16 @@
       "project": "Información de campaña",
       "budget": "Presupuesto",
       "rewards": "Recompensas",
-      "updates": "Actualizaciones",
+      "updates": {
+        "title": "Actualizaciones",
+        "content": {
+          "title": "No pierdas detalle de los avances de esta campaña",
+          "empty": "No existen más actualizaciones previstas.",
+          "btn": {
+            "read-more": "Seguir leyendo"
+          }
+        }
+      },
       "community": "Comunidad"
     },
     "actions": {