From 98a20bbc6f9dea8891bcd0f147015aaf4749c3ce Mon Sep 17 00:00:00 2001
From: Julien MARGAIL <jmargail@neogeo.fr>
Date: Mon, 17 Feb 2025 17:27:22 +0100
Subject: [PATCH] add Sections in News pages

---
 CHANGELOG.md           | 12 +++++++-
 package.json           |  2 +-
 src/templates/news.tsx | 67 +++++++++++++++++++++++++++++++++++-------
 3 files changed, 68 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c9f45cc..4393bd0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.12.0] - 2024-11-15
+## [0.14.0] - 2024-11-15 (WIP)
+
+### Changed
+
+-   require Datamodel >= 0.7.0
+
+### New
+
+-   News can add Sections in the page
+
+## [0.12.0] - 2024-11-15 (1.3)
 
 ### Fix
 
diff --git a/package.json b/package.json
index c72d0f9..d96ae54 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "license": "MIT",
     "onegeosuite": {
         "portal": {
-            "datamodel": ">=0.6.1"
+            "datamodel": ">=0.7.0"
         }
     },
     "peerDependencies": {
diff --git a/src/templates/news.tsx b/src/templates/news.tsx
index dfdfdb2..5e8ea45 100644
--- a/src/templates/news.tsx
+++ b/src/templates/news.tsx
@@ -13,8 +13,13 @@ import {
     Content,
     Link,
     SideBar,
+    Sections,
 } from "@onegeo-suite/gatsby-theme-onegeo"
 
+interface ISection {
+    sections_id: string[] | []
+}
+
 interface Idata {
     directus: {
         news: {
@@ -47,6 +52,7 @@ interface Idata {
                 name: string
             }
             content: string
+            sections: ISection[] | []
             link: string
         }
     }
@@ -61,11 +67,22 @@ const News = ({ pageContext, data, location }: PageProps<Idata>) => {
     const urlImage = data.directus.news[0].image?.imageFile?.publicURL
     const categoryName = data.directus.news[0].categories?.name
 
-    const { content, title, author, links, documents, date_published } = news
+    const {
+        content,
+        title,
+        author,
+        links,
+        documents,
+        date_published,
+        sections,
+    } = news
 
+    const idsSections = sections.map((section: any) => section.sections_id.id)
     const dataPub = dayjs(date_published).format("DD/MM/YYYY")
 
-    let position = "right"
+    const options = news.options ?? {}
+    const sectionsPosition = options.sectionsPosition ?? "center"
+    const sidebarPosition = options.sidebarPosition ?? "right"
 
     return (
         <Layout>
@@ -94,23 +111,44 @@ const News = ({ pageContext, data, location }: PageProps<Idata>) => {
 
                 <div className="mb-8 mt-8 flex flex-wrap gap-6 lg:flex-nowrap">
                     {/* Todo Fix mobile mode */}
-                    {position === "left" ? (
+                    {sidebarPosition === "left" ? (
                         <SideBar documents={documents} links={links} />
                     ) : null}
 
-                    <div className="bg-base-100 w-full rounded-xl p-6 lg:shadow-lg">
-                        <div
-                            className="prose max-w-4xl"
-                            dangerouslySetInnerHTML={{
-                                __html: content,
-                            }}
-                        ></div>
+                    <div>
+                        {sectionsPosition === "top" &&
+                            Object.keys(idsSections).length !== 0 && (
+                                <div className="mt-8">
+                                    <Sections ids={idsSections} />
+                                </div>
+                            )}
+
+                        <div className="bg-base-100 w-full rounded-xl p-6 lg:shadow-lg">
+                            <div
+                                className="prose max-w-4xl"
+                                dangerouslySetInnerHTML={{
+                                    __html: content,
+                                }}
+                            ></div>
+                            {sectionsPosition === "center" &&
+                                Object.keys(idsSections).length !== 0 && (
+                                    <Sections ids={idsSections} />
+                                )}
+                        </div>
+
+                        {sectionsPosition === "bottom" &&
+                            Object.keys(idsSections).length !== 0 && (
+                                <div className="mt-8">
+                                    <Sections ids={idsSections} />
+                                </div>
+                            )}
                     </div>
 
-                    {position === "right" ? (
+                    {sidebarPosition === "right" ? (
                         <SideBar documents={documents} links={links} />
                     ) : null}
                 </div>
+
                 <div className="mb-24 flex justify-center">
                     <div className="flex w-5/6 space-x-4">
                         {pageContext.prev ? (
@@ -187,6 +225,13 @@ export const query = graphql`
                 categories {
                     name
                 }
+                sections(sort: "sort") {
+                    sections_id {
+                        id
+                    }
+                    sort
+                }
+                options
             }
         }
     }
-- 
GitLab