refactor: bloc components management and allow markdown inside accordion (#871)

Author: ThibaudDauce

components/Pages/AccordionBlocEditor.vue

@@ -97,24 +97,9 @@
                     />
                   </div>
 
-                  <DatasetsListBloc
-                    v-if="contentBloc.class === 'DatasetsListBloc'"
-                    v-model="(item.content[contentIndex] as DatasetsListBlocType)"
-                    :edit
-                  />
-                  <DataservicesListBloc
-                    v-if="contentBloc.class === 'DataservicesListBloc'"
-                    v-model="(item.content[contentIndex] as DataservicesListBlocType)"
-                    :edit
-                  />
-                  <ReusesListBloc
-                    v-if="contentBloc.class === 'ReusesListBloc'"
-                    v-model="(item.content[contentIndex] as ReusesListBlocType)"
-                    :edit
-                  />
-                  <LinksListBloc
-                    v-if="contentBloc.class === 'LinksListBloc'"
-                    v-model="(item.content[contentIndex] as LinksListBlocType)"
+                  <component
+                    :is="contentBlocsTypes[contentBloc.class].component"
+                    v-model="(item.content[contentIndex] as any)"
                     :edit
                   />
                 </div>
@@ -179,18 +164,9 @@ import { RiAddLine, RiArrowDownLine, RiArrowUpLine, RiDeleteBinLine } from '@rem
 import BlocWithTitleAndSubtitle from './BlocWithTitleAndSubtitle.vue'
 import EditableText from './EditableText.vue'
 import AddBlocDropdown from './AddBlocDropdown.vue'
-import DatasetsListBloc from './DatasetsListBloc.vue'
-import DataservicesListBloc from './DataservicesListBloc.vue'
-import ReusesListBloc from './ReusesListBloc.vue'
-import LinksListBloc from './LinksListBloc.vue'
-import type {
-  AccordionListBloc,
-  ContentBloc,
-  DatasetsListBloc as DatasetsListBlocType,
-  DataservicesListBloc as DataservicesListBlocType,
-  ReusesListBloc as ReusesListBlocType,
-  LinksListBloc as LinksListBlocType,
-} from '~/types/pages'
+import type { AccordionListBloc, ContentBloc } from '~/types/pages'
+
+const contentBlocsTypes = useContentBlocsTypes()
 
 const props = defineProps<{
   edit: boolean

components/Pages/PageShow.vue

@@ -49,54 +49,26 @@
         />
       </div>
 
-      <!-- HeroBloc has its own full-width layout -->
-      <HeroBloc
-        v-if="bloc.class === 'HeroBloc'"
-        v-model="(workingPage.blocs[index] as HeroBlocType)"
+      <!-- Full-width blocs (like HeroBloc) -->
+      <component
+        :is="blocsTypes[bloc.class].component"
+        v-if="'fullWidth' in blocsTypes[bloc.class]"
+        v-model="(workingPage.blocs[index] as any)"
         :edit
+        :main-color="mainColor"
       />
 
       <!-- Other blocs use container layout -->
       <div
         v-else
         class="container"
       >
-        <DatasetsListBloc
-          v-if="bloc.class === 'DatasetsListBloc'"
-          v-model="(workingPage.blocs[index] as DatasetsListBlocType)"
-          :edit
-        />
-
-        <DataservicesListBloc
-          v-if="bloc.class === 'DataservicesListBloc'"
-          v-model="(workingPage.blocs[index] as DataservicesListBlocType)"
-          :edit
-        />
-
-        <ReusesListBloc
-          v-if="bloc.class === 'ReusesListBloc'"
-          v-model="(workingPage.blocs[index] as ReusesListBlocType)"
-          :edit
-        />
-
-        <LinksListBloc
-          v-if="bloc.class === 'LinksListBloc'"
-          v-model="(workingPage.blocs[index] as LinksListBlocType)"
+        <component
+          :is="blocsTypes[bloc.class].component"
+          v-model="(workingPage.blocs[index] as any)"
           :edit
           :main-color="mainColor"
         />
-
-        <AccordionBlocEditor
-          v-if="bloc.class === 'AccordionListBloc'"
-          v-model="(workingPage.blocs[index] as AccordionListBlocType)"
-          :edit
-        />
-
-        <MarkdownBloc
-          v-if="bloc.class === 'MarkdownBloc'"
-          v-model="(workingPage.blocs[index] as MarkdownBlocType)"
-          :edit
-        />
       </div>
 
       <!-- Add button below the last bloc -->
@@ -157,23 +129,9 @@ import type { ComponentProps } from 'vue-component-type-helpers'
 import { BrandedButton } from '@datagouv/components-next'
 import { RiAddLine, RiArrowDownLine, RiArrowUpLine, RiDeleteBinLine } from '@remixicon/vue'
 import AddBlocDropdown from './AddBlocDropdown.vue'
-import DatasetsListBloc from './DatasetsListBloc.vue'
-import DataservicesListBloc from './DataservicesListBloc.vue'
-import ReusesListBloc from './ReusesListBloc.vue'
-import LinksListBloc from './LinksListBloc.vue'
-import AccordionBlocEditor from './AccordionBlocEditor.vue'
-import MarkdownBloc from './MarkdownBloc.vue'
-import HeroBloc from './HeroBloc.vue'
-import type {
-  Page,
-  DatasetsListBloc as DatasetsListBlocType,
-  DataservicesListBloc as DataservicesListBlocType,
-  ReusesListBloc as ReusesListBlocType,
-  LinksListBloc as LinksListBlocType,
-  AccordionListBloc as AccordionListBlocType,
-  MarkdownBloc as MarkdownBlocType,
-  HeroBloc as HeroBlocType,
-} from '~/types/pages'
+import type { Page } from '~/types/pages'
+
+const blocsTypes = useBlocsTypes()
 
 const props = withDefaults(defineProps<{
   page: Page

types/pages.ts

@@ -37,7 +37,12 @@ export type LinksListBloc = {
   links: Array<LinkInBloc>
 } & BlocWithTitle & { id: string }
 
-export type ContentBloc = DatasetsListBloc | DataservicesListBloc | ReusesListBloc | LinksListBloc
+export type MarkdownBloc = {
+  class: 'MarkdownBloc'
+  content: string
+} & BlocWithTitle & { id: string }
+
+export type ContentBloc = DatasetsListBloc | DataservicesListBloc | ReusesListBloc | LinksListBloc | MarkdownBloc
 
 export type AccordionItemBloc = {
   title: string
@@ -51,16 +56,11 @@ export type AccordionListBloc = {
   items: Array<AccordionItemBloc>
 } & { id: string }
 
-export type MarkdownBloc = {
-  class: 'MarkdownBloc'
-  content: string
-} & BlocWithTitle & { id: string }
-
 export type HeroBloc = {
   class: 'HeroBloc'
   title: string
   description: string | null
   color: 'primary' | 'green' | 'purple'
 } & { id: string }
 
-export type PageBloc = ContentBloc | AccordionListBloc | MarkdownBloc | HeroBloc
+export type PageBloc = ContentBloc | AccordionListBloc | HeroBloc

utils/pages.ts

@@ -1,5 +1,12 @@
 import { RiDatabase2Line, RiLineChartLine, RiLink, RiListCheck2, RiMarkdownLine, RiRobot2Line, RiWindow2Line } from '@remixicon/vue'
 import type { AccordionListBloc, DataservicesListBloc, DatasetsListBloc, HeroBloc, LinksListBloc, MarkdownBloc, ReusesListBloc } from '~/types/pages'
+import DatasetsListBlocComponent from '~/components/Pages/DatasetsListBloc.vue'
+import DataservicesListBlocComponent from '~/components/Pages/DataservicesListBloc.vue'
+import ReusesListBlocComponent from '~/components/Pages/ReusesListBloc.vue'
+import LinksListBlocComponent from '~/components/Pages/LinksListBloc.vue'
+import MarkdownBlocComponent from '~/components/Pages/MarkdownBloc.vue'
+import AccordionBlocEditorComponent from '~/components/Pages/AccordionBlocEditor.vue'
+import HeroBlocComponent from '~/components/Pages/HeroBloc.vue'
 
 export function useContentBlocsTypes() {
   const { t } = useTranslation()
@@ -9,26 +16,37 @@ export function useContentBlocsTypes() {
       icon: RiDatabase2Line,
       name: t('Données à la une'),
       description: t('Mettre en avant jusqu\'à 4 jeux de données'),
+      component: DatasetsListBlocComponent,
       default: (): Omit<DatasetsListBloc, 'id'> => ({ class: 'DatasetsListBloc', title: t('Mes jeux de données'), subtitle: null, datasets: [] }),
     },
     DataservicesListBloc: {
       icon: RiRobot2Line,
       name: t('APIs à la une'),
       description: t('Mettre en avant jusqu\'à 4 APIs'),
+      component: DataservicesListBlocComponent,
       default: (): Omit<DataservicesListBloc, 'id'> => ({ class: 'DataservicesListBloc', title: t('Mes APIs'), subtitle: null, dataservices: [] }),
     },
     ReusesListBloc: {
       icon: RiLineChartLine,
       name: t('Réutilisations à la une'),
       description: t('Mettre en avant jusqu\'à 4 réutilisations'),
+      component: ReusesListBlocComponent,
       default: (): Omit<ReusesListBloc, 'id'> => ({ class: 'ReusesListBloc', title: t('Mes réutilisations'), subtitle: null, reuses: [] }),
     },
     LinksListBloc: {
       icon: RiLink,
       name: t('Liens à la une'),
       description: t('Mettre en avant jusqu\'à 4 liens'),
+      component: LinksListBlocComponent,
       default: (): Omit<LinksListBloc, 'id'> => ({ class: 'LinksListBloc', title: t('Mes liens'), subtitle: null, paragraph: null, main_link_title: null, main_link_url: null, links: [] }),
     },
+    MarkdownBloc: {
+      icon: RiMarkdownLine,
+      name: t('Bloc Markdown'),
+      description: t('Ajouter du contenu texte riche'),
+      component: MarkdownBlocComponent,
+      default: (): Omit<MarkdownBloc, 'id'> => ({ class: 'MarkdownBloc', title: 'Titre', subtitle: null, content: '' }),
+    },
   }
 }
 
@@ -42,18 +60,15 @@ export function useBlocsTypes() {
       icon: RiListCheck2,
       name: t('Accordéon'),
       description: t('Liste dépliable de contenus (FAQ, etc.)'),
+      component: AccordionBlocEditorComponent,
       default: (): Omit<AccordionListBloc, 'id'> => ({ class: 'AccordionListBloc', title: t('Mon accordéon'), description: null, items: [] }),
     },
-    MarkdownBloc: {
-      icon: RiMarkdownLine,
-      name: t('Bloc Markdown'),
-      description: t('Ajouter du contenu texte riche'),
-      default: (): Omit<MarkdownBloc, 'id'> => ({ class: 'MarkdownBloc', title: 'Titre', subtitle: null, content: '' }),
-    },
     HeroBloc: {
       icon: RiWindow2Line,
       name: t('Hero'),
       description: t('Bandeau d\'en-tête avec titre et description'),
+      component: HeroBlocComponent,
+      fullWidth: true,
       default: (): Omit<HeroBloc, 'id'> => ({ class: 'HeroBloc', title: 'Titre', description: null, color: 'primary' }),
     },
   }