wip: refactor sections

wp-content/themes/ccat/acf-json/acf-translations.php

@@ -23,7 +23,6 @@ __( "Billing", 'ccat' );
 __( "Billing is the same as contact", 'ccat' );
 __( "Builder", 'ccat' );
 __( "Cancelled", 'ccat' );
-__( "Categorie(s)", 'ccat' );
 __( "Collectif artistique", 'ccat' );
 __( "Collective profile", 'ccat' );
 __( "Complete", 'ccat' );
@@ -58,7 +57,6 @@ __( "Enfants", 'ccat' );
 __( "Entity", 'ccat' );
 __( "Event", 'ccat' );
 __( "Event type", 'ccat' );
-__( "Event type(s)", 'ccat' );
 __( "Exposition", 'ccat' );
 __( "Failed", 'ccat' );
 __( "Familial", 'ccat' );
@@ -85,7 +83,6 @@ __( "Language(s)", 'ccat' );
 __( "Locality", 'ccat' );
 __( "Location", 'ccat' );
 __( "Location type", 'ccat' );
-__( "MRC", 'ccat' );
 __( "Media type", 'ccat' );
 __( "Media(s)", 'ccat' );
 __( "Membership type", 'ccat' );

wp-content/themes/ccat/acf-json/group_abstract_builder.json

@@ -124,7 +124,7 @@
             "show_in_graphql": 1,
             "graphql_description": "",
             "graphql_field_name": "sections",
-            "graphql_non_null": 1,
+            "graphql_non_null": 0,
             "acfe_flexible_layouts_placeholder": false,
             "acfe_flexible_layouts_state": false,
             "acfe_flexible_grid_container": false
@@ -159,5 +159,5 @@
     "graphql_types": "",
     "acfe_meta": "",
     "acfe_note": "",
-    "modified": 1758719135
+    "modified": 1758740869
 }

wp-content/themes/ccat/app/components/nodes/ThePage.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { ThePageFragment } from "#graphql-operations";
 
-defineProps<{ node: ThePageFragment }>();
+const props = defineProps<ThePageFragment>();
+useSeoMeta({ title: props.title });
 </script>
 
 <template>
-  <TheSections :sections="node.groupPostPage?.sections || []" />
+  <TheSections :sections="groupPostPage?.sections || []" />
 </template>

wp-content/themes/ccat/app/composables/useNodeByUri.ts

@@ -1,37 +1,30 @@
-import type { ThePageFragment, TheArticleFragment, TheEventFragment, TheLocationFragment, TheMembershipFragment, TheProjectFragment, TheResourceFragment } from "#graphql-operations";
 import { ThePage, TheArticle, TheEvent, TheLocation, TheMembership, TheProject, TheResource } from "#components";
 
+const nodes = {
+  Event: TheEvent,
+  Location: TheLocation,
+  Membership: TheMembership,
+  Page: ThePage,
+  Post: TheArticle,
+  Project: TheProject,
+  Resource: TheResource,
+} as const;
+
 export async function useNodeByUri(uri: string) {
   const { data, error } = await useAsyncGraphqlQuery("nodeByUri", { uri }, { graphqlCaching: { client: true } });
   if (error.value) {
-    console.log(error.value);
     throw createError({ statusCode: 500, statusMessage: "Erreur interne", message: error.value.message });
   }
-  if (!data.value) {
+  if (data.value?.errors.length) {
+    throw createError({ statusCode: 500, statusMessage: "Erreur interne", message: data.value.errors.map((error) => error.message).join("\n") });
+  }
+  if (!data.value?.data.nodeByUri) {
     throw createError({ statusCode: 500, statusMessage: "Erreur interne", message: "La page n'a retourné aucunes données." });
   }
-  if (data.value.errors.length) {
-    console.log(data.value.errors);
-    throw createError({ statusCode: 500, statusMessage: "Erreur serveur", message: data.value.errors.map((error) => error.message).join("\n") });
-  }
-  const node = data.value.data.nodeByUri;
-  const breadcrumbs = node?.breadcrumbs?.map(({ label, to }) => ({ label, to: to || undefined })) || [];
-  switch (node?.__typename) {
-    case "Event":
-      return { component: TheEvent, node: node as TheEventFragment, breadcrumbs };
-    case "Location":
-      return { component: TheLocation, node: node as TheLocationFragment, breadcrumbs };
-    case "Membership":
-      return { component: TheMembership, node: node as TheMembershipFragment, breadcrumbs };
-    case "Page":
-      return { component: ThePage, node: node as ThePageFragment, breadcrumbs };
-    case "Post":
-      return { component: TheArticle, node: node as TheArticleFragment, breadcrumbs };
-    case "Project":
-      return { component: TheProject, node: node as TheProjectFragment, breadcrumbs };
-    case "Resource":
-      return { component: TheResource, node: node as TheResourceFragment, breadcrumbs };
-    default:
-      throw createError({ statusCode: 404, statusMessage: "Page non trouvée", message: "La page que vous cherchez n'existe pas." });
+  const { __typename, breadcrumbs, ...attrs } = data.value.data.nodeByUri;
+  const component = nodes[__typename as keyof typeof nodes] || null;
+  if (!component) {
+    throw createError({ statusCode: 500, statusMessage: "Erreur interne", message: "Le type de page est invalide." });
   }
+  return { component, breadcrumbs: breadcrumbs || [], attrs };
 }

wp-content/themes/ccat/app/composables/useSection.ts

@@ -0,0 +1,12 @@
+import type { TheSectionFragment } from "#graphql-operations";
+import { SectionTextBlock } from "#components";
+
+const sections = {
+  GroupAbstractBuilderSectionsTextBlockLayout: SectionTextBlock,
+} as const;
+
+export function useSection({ fieldGroupName, ...attrs }: TheSectionFragment) {
+  const component = sections[fieldGroupName as keyof typeof sections];
+  if (!component) throw createError({ statusCode: 500, statusMessage: "Erreur interne", message: "Type de section invalide." });
+  return { component, attrs };
+}

wp-content/themes/ccat/app/pages/[...uri].vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 const { path } = useRoute();
-const { node, component, breadcrumbs } = await useNodeByUri(path);
-useSeoMeta({ title: node?.title });
+const { component, attrs, breadcrumbs } = await useNodeByUri(path);
 </script>
 
 <template>
   <div id="page-node-by-uri">
     <SiteBreadcrumbs :breadcrumbs="breadcrumbs" />
-    <component :is="component" :node="node" />
+    <component :is="component" v-bind="attrs" />
   </div>
 </template>

wp-content/themes/ccat/server/api/preview.post.ts

@@ -3,11 +3,12 @@ import { createSSRApp, h } from "vue";
 import type { TheSectionFragment } from "#graphql-operations";
 
 export default defineEventHandler(async (event) => {
-  const { fieldGroupName, ...attrs } = await readBody<TheSectionFragment>(event);
   try {
+    const section = await readBody<TheSectionFragment>(event);
+    const { component, attrs } = useSection(section);
     const app = createSSRApp({
       render() {
-        return h(sectionsMap[fieldGroupName as FieldGroupName], attrs);
+        return h(component, attrs);
       },
     });
     const html = await renderToString(app);

wp-content/themes/ccat/server/schema.graphql

@@ -6659,7 +6659,7 @@ type GroupAbstractBuilder implements AcfFieldGroup & AcfFieldGroupFields & Group
   """
   Field of the "flexible_content" Field Type added to the schema as part of the "GroupAbstractBuilder" Field Group
   """
-  sections: [GroupAbstractBuilderSections_Layout]!
+  sections: [GroupAbstractBuilderSections_Layout]
 }
 
 """
@@ -6752,7 +6752,7 @@ interface GroupAbstractBuilder_Fields implements AcfFieldGroup & AcfFieldGroupFi
   """
   Field of the "flexible_content" Field Type added to the schema as part of the "GroupAbstractBuilder" Field Group
   """
-  sections: [GroupAbstractBuilderSections_Layout]!
+  sections: [GroupAbstractBuilderSections_Layout]
 }
 
 """
@@ -7363,7 +7363,7 @@ type GroupPostArticle implements AcfFieldGroup & AcfFieldGroupFields & GroupAbst
   """
   Field of the "flexible_content" Field Type added to the schema as part of the "GroupAbstractBuilder" Field Group
   """
-  sections: [GroupAbstractBuilderSections_Layout]!
+  sections: [GroupAbstractBuilderSections_Layout]
 }
 
 """
@@ -7376,7 +7376,7 @@ interface GroupPostArticle_Fields implements AcfFieldGroup & AcfFieldGroupFields
   """
   Field of the "flexible_content" Field Type added to the schema as part of the "GroupAbstractBuilder" Field Group
   """
-  sections: [GroupAbstractBuilderSections_Layout]!
+  sections: [GroupAbstractBuilderSections_Layout]
 }
 
 """
@@ -8177,7 +8177,7 @@ type GroupPostPage implements AcfFieldGroup & AcfFieldGroupFields & GroupAbstrac
   """
   Field of the "flexible_content" Field Type added to the schema as part of the "GroupAbstractBuilder" Field Group
   """
-  sections: [GroupAbstractBuilderSections_Layout]!
+  sections: [GroupAbstractBuilderSections_Layout]
 }
 
 """
@@ -8190,7 +8190,7 @@ interface GroupPostPage_Fields implements AcfFieldGroup & AcfFieldGroupFields &
   """
   Field of the "flexible_content" Field Type added to the schema as part of the "GroupAbstractBuilder" Field Group
   """
-  sections: [GroupAbstractBuilderSections_Layout]!
+  sections: [GroupAbstractBuilderSections_Layout]
 }
 
 """
@@ -8229,7 +8229,7 @@ type GroupPostProject implements AcfFieldGroup & AcfFieldGroupFields & GroupAbst
   """
   Field of the "flexible_content" Field Type added to the schema as part of the "GroupAbstractBuilder" Field Group
   """
-  sections: [GroupAbstractBuilderSections_Layout]!
+  sections: [GroupAbstractBuilderSections_Layout]
 }
 
 """
@@ -8294,7 +8294,7 @@ interface GroupPostProject_Fields implements AcfFieldGroup & AcfFieldGroupFields
   """
   Field of the "flexible_content" Field Type added to the schema as part of the "GroupAbstractBuilder" Field Group
   """
-  sections: [GroupAbstractBuilderSections_Layout]!
+  sections: [GroupAbstractBuilderSections_Layout]
 }
 
 """
@@ -8671,7 +8671,7 @@ type GroupPostTemplate implements AcfFieldGroup & AcfFieldGroupFields & GroupAbs
   """
   Field of the "flexible_content" Field Type added to the schema as part of the "GroupAbstractBuilder" Field Group
   """
-  sections: [GroupAbstractBuilderSections_Layout]!
+  sections: [GroupAbstractBuilderSections_Layout]
 }
 
 """
@@ -8684,7 +8684,7 @@ interface GroupPostTemplate_Fields implements AcfFieldGroup & AcfFieldGroupField
   """
   Field of the "flexible_content" Field Type added to the schema as part of the "GroupAbstractBuilder" Field Group
   """
-  sections: [GroupAbstractBuilderSections_Layout]!
+  sections: [GroupAbstractBuilderSections_Layout]
 }
 
 """
@@ -25068,9 +25068,6 @@ enum UserRoleEnum {
 
   """User role with specific capabilities"""
   SUBSCRIBER
-
-  """User role with specific capabilities"""
-  TRANSLATOR
 }
 
 """Connection between the User type and the Comment type"""

wp-content/themes/ccat/server/utils/useSection.ts

@@ -1,15 +1,12 @@
-import SectionTextBlock from "~/components/sections/SectionTextBlock.vue";
 import type { TheSectionFragment } from "#graphql-operations";
+import SectionTextBlock from "~/components/sections/SectionTextBlock.vue";
 
-export const sectionsMap = {
+const sections = {
   GroupAbstractBuilderSectionsTextBlockLayout: SectionTextBlock,
 } as const;
 
-export type FieldGroupName = keyof typeof sectionsMap;
-
-export function useSection(section: TheSectionFragment) {
-  const { fieldGroupName, ...attrs } = section;
-  const component = sectionsMap[fieldGroupName as FieldGroupName];
-  if (!component) throw createError({ statusCode: 500, statusMessage: "Erreur interne", message: "Section invalide." });
+export function useSection({ fieldGroupName, ...attrs }: TheSectionFragment) {
+  const component = sections[fieldGroupName as keyof typeof sections];
+  if (!component) throw createError({ statusCode: 500, statusMessage: "Erreur interne", message: "Type de section invalide." });
   return { component, attrs };
 }