Obs/cms feat update (#2682)

* wip cms changes * feat: add rich-text for video * fix: review
betagouv · Dec 2, 2024 · 2955a72 · 2955a72
1 parent 097d6bb
commit 2955a72
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 51 deletions.
diff --git a/cms/src/api/article/content-types/article/schema.json b/cms/src/api/article/content-types/article/schema.json
@@ -43,6 +43,14 @@
     "slug": {
       "type": "uid",
       "targetField": "title"
+    },
+    "buttons": {
+      "type": "component",
+      "repeatable": true,
+      "component": "shared.button"
+    },
+    "video": {
+      "type": "blocks"
     }
   }
 }
diff --git a/cms/src/api/resource/content-types/resource/schema.json b/cms/src/api/resource/content-types/resource/schema.json
@@ -35,28 +35,37 @@
       "mappedBy": "resources"
     },
     "img": {
-      "allowedTypes": [
-        "images"
-      ],
       "type": "media",
       "multiple": false,
-      "required": true
+      "required": true,
+      "allowedTypes": [
+        "images"
+      ]
     },
     "link": {
       "type": "string"
     },
     "file": {
+      "type": "media",
+      "multiple": false,
+      "required": false,
       "allowedTypes": [
         "files"
-      ],
-      "type": "media",
-      "multiple": false
+      ]
     },
     "pages": {
       "type": "relation",
       "relation": "manyToMany",
       "target": "api::page.page",
       "mappedBy": "resources"
+    },
+    "buttons": {
+      "type": "component",
+      "repeatable": true,
+      "component": "shared.button"
+    },
+    "video": {
+      "type": "blocks"
     }
   }
 }
diff --git a/cms/types/generated/contentTypes.d.ts b/cms/types/generated/contentTypes.d.ts
@@ -757,6 +757,7 @@ export interface ApiArticleArticle extends Schema.CollectionType {
       'api::categorie.categorie'
     >;
     slug: Attribute.UID<'api::article.article', 'title'>;
+    buttons: Attribute.Component<'shared.button', true>;
     createdAt: Attribute.DateTime;
     updatedAt: Attribute.DateTime;
     publishedAt: Attribute.DateTime;
@@ -915,6 +916,7 @@ export interface ApiResourceResource extends Schema.CollectionType {
       'manyToMany',
       'api::page.page'
     >;
+    buttons: Attribute.Component<'shared.button', true>;
     createdAt: Attribute.DateTime;
     updatedAt: Attribute.DateTime;
     publishedAt: Attribute.DateTime;

diff --git a/public/src/app/actualites/[slug]/page.tsx b/public/src/app/actualites/[slug]/page.tsx
@@ -1,11 +1,14 @@
+import MDContent from "@/components/common/MDContent";
 import PageTitle from "@/components/common/PageTitle";
 import Share from "@/components/common/Share";
 import { Config } from "@/config";
+import { fetchAPI, shorten } from "@/helpers/cms";
 import { fr } from "@codegouvfr/react-dsfr";
+import { ButtonProps } from '@codegouvfr/react-dsfr/Button';
+import ButtonsGroup from '@codegouvfr/react-dsfr/ButtonsGroup';
 import Tag from "@codegouvfr/react-dsfr/Tag";
 import Image from 'next/image';
-import { fetchAPI, shorten } from "@/helpers/cms";
-import MDContent from "@/components/common/MDContent";
+import { Button } from '../../../interfaces/cms/collectionsInterface';
 
 export async function generateMetadata({ params }: { params: { slug: string }}) {
   const query = {
@@ -123,6 +126,30 @@ export default async function ActuSingle({ params }: { params: { slug: string }}
           </div>
         </div>
       }
+      {
+        data.attributes.buttons && 
+        <ButtonsGroup
+          alignment={'right'}
+          inlineLayoutWhen={'always'}
+          buttons={data.attributes.buttons.map((b:Button) => {
+            return {
+              children:b.title,
+              linkProps: b.url.startsWith('http') ? {
+                href: b.url,
+                title:`${b.title} - nouvelle fenêtre` ,
+                "aria-label":`${b.title} - nouvelle fenêtre`,
+                target:'_blank',
+                rel: "noopener noreferrer"
+              } : {
+                href: b.url,
+              },
+              iconId: b.icon ?? '',
+              priority: b.color ?? 'primary',
+            } 
+          }) as [ButtonProps, ...ButtonProps[]]}
+          buttonsIconPosition={'right'}
+        />
+      }
       </div>
     </article>
   );

diff --git a/public/src/app/ressources/[slug]/page.tsx b/public/src/app/ressources/[slug]/page.tsx
@@ -1,12 +1,14 @@
+import MDContent from "@/components/common/MDContent";
 import PageTitle from "@/components/common/PageTitle";
 import Share from "@/components/common/Share";
 import { Config } from "@/config";
+import { fetchAPI, shorten } from "@/helpers/cms";
 import { fr } from "@codegouvfr/react-dsfr";
+import { ButtonProps } from "@codegouvfr/react-dsfr/Button";
+import ButtonsGroup from '@codegouvfr/react-dsfr/ButtonsGroup';
 import Tag from "@codegouvfr/react-dsfr/Tag";
 import Image from 'next/image';
-import { fetchAPI, shorten } from "@/helpers/cms";
-import MDContent from "@/components/common/MDContent";
-import { Button } from "@codegouvfr/react-dsfr/Button";
+import { Button } from '../../../interfaces/cms/collectionsInterface';
 
 export async function generateMetadata({ params }: { params: { slug: string }}) {
   const query = {
@@ -120,28 +122,37 @@ export default async function ResourceSingle({ params }: { params: { slug: strin
           <div>
             <MDContent source={data.attributes.content} />
           </div>
-          {data.attributes.link &&
-            <Button
-              linkProps={data.attributes.link.startsWith('http') ? {
-                  href: data.attributes.link,
-                  title:`En savoir plus - nouvelle fenêtre` ,
-                  "aria-label":`En savoir plus - nouvelle fenêtre`,
-                  target:'_blank'
-                }: {
-                  href: data.attributes.link,
-                }
-              }
-            >
-              En savoir plus
-            </Button>
+          {
+            data.attributes.buttons && 
+            <ButtonsGroup
+              alignment={'right'}
+              inlineLayoutWhen={'always'}
+              buttons={data.attributes.buttons.map((b:Button) => {
+                return {
+                  children:b.title,
+                  linkProps: b.url.startsWith('http') ? {
+                    href: b.url,
+                    title:`${b.title} - nouvelle fenêtre` ,
+                    "aria-label":`${b.title} - nouvelle fenêtre`,
+                    target:'_blank',
+                    rel: "noopener noreferrer"
+                  } : {
+                    href: b.url,
+                  },
+                  iconId: b.icon ?? '',
+                  priority: b.color ?? 'primary',
+                } 
+              }) as [ButtonProps, ...ButtonProps[]]}
+              buttonsIconPosition={'right'}
+            />
           }
           {data.attributes.file.data &&
             <div className={fr.cx('fr-card','fr-enlarge-link', 'fr-card--download')} style={{height:'8em'}}>
               <div className={fr.cx('fr-card__body')}>
                 <div className={fr.cx('fr-card__content')}>
                   <div className={fr.cx('fr-card__title')}>
                       <a download href={data.attributes.file.data.attributes.url}>
-                        {`Télécharger la ressource${data.attributes.file.data.attributes.name}`}
+                        {`Télécharger la ressource: ${data.attributes.file.data.attributes.name}`}
                       </a>
                   </div>
                   <div className={fr.cx('fr-card__end')}>

diff --git a/public/src/interfaces/actualites/componentsInterface.ts b/public/src/interfaces/actualites/componentsInterface.ts
@@ -1,18 +1,21 @@
+import { Button } from "../cms/collectionsInterface";
+
 export interface ActuCardProps {
-  title: string,
-  content: string,
-  date: string,
-  img: string,
-  img_legend?: string,
-  href: string,
-  horizontal?: false | undefined,
-  categories: CategorieProps[]
+  title: string;
+  content: string;
+  date: string;
+  img: string;
+  img_legend?: string;
+  href: string;
+  horizontal?: false | undefined;
+  categories: CategorieProps[];
+  buttons?: Button[];
 }
 
 export interface CategorieProps {
-  id: string | number,
-  attributes:{
-    label: string,
-    slug: string,
-  }
-}
+  id: string | number;
+  attributes: {
+    label: string;
+    slug: string;
+  };
+}
diff --git a/public/src/interfaces/ressources/componentsInterface.ts b/public/src/interfaces/ressources/componentsInterface.ts
@@ -1,10 +1,13 @@
- export interface RessourceCardProps {
-  title: string,
-  content: string,
-  date: string,
-  img: string,
-  href:string,
-  link?: string,
-  file?: string,
-  horizontal?: false | undefined
-}
+import { Button } from "../cms/collectionsInterface";
+
+export interface RessourceCardProps {
+  title: string;
+  content: string;
+  date: string;
+  img: string;
+  href: string;
+  link?: string;
+  file?: string;
+  horizontal?: false;
+  buttons?: Button[];
+}