feat(layouts): add page content for error pages (#19)

TYPO3-Headless · Mar 21, 2020 · d0ab1c7 · d0ab1c7
1 parent a313e63
commit d0ab1c7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/example/layouts/error.vue b/example/layouts/error.vue
@@ -1,6 +1,12 @@
 <template>
   <div>
     <h1>ERROR PAGE {{ error.statusCode }}</h1>
+    <be-dynamic
+      v-if="error.ssr"
+      :page="error.ssr.pageContent.page"
+      :content="error.ssr.pageContent.content"
+      :type="error.ssr.backendLayout"
+    />
   </div>
 </template>
 <script>

diff --git a/lib/middleware/context.js b/lib/middleware/context.js
@@ -3,26 +3,37 @@ import { isDynamicRoute } from '~typo3/lib/route'
 import { SET_PAGE } from '~typo3/store/mutation-types'
 import { getBackendLayout, getFrontendLayout } from '~typo3/lib/layouts'
 
+const setContext = (context, response) => {
+  if (response.data && response.data.page) {
+    context.layout = getFrontendLayout(
+      response.data.page.appearance.layout,
+      context.app.$typo3.options.layouts
+    )
+    context.backendLayout = getBackendLayout(
+      context.app.components,
+      response.data.page.appearance.backendLayout
+    )
+    context.pageContent = response.data
+    context.store.commit(SET_PAGE, response.data)
+  }
+}
+
 middleware.typo3Context = function(context) {
   const path = context.route.fullPath || context.route.path
   if (isDynamicRoute(context.route)) {
     return context.app.$typo3.api
       .getPage(path)
-      .then(resp => {
-        context.layout = getFrontendLayout(
-          resp.data.page.appearance.layout,
-          context.app.$typo3.options.layouts
-        )
-        context.backendLayout = getBackendLayout(
-          context.app.components,
-          resp.data.page.appearance.backendLayout
-        )
-        context.pageContent = resp.data
-        context.store.commit(SET_PAGE, resp.data)
-      })
+      .then(response => setContext(context, response))
       .catch(error => {
-        context.errorResponse = error.response
+        setContext(context, error.response)
         return context.error({
+          ssr: context.pageContent
+            ? {
+                layout: context.layout,
+                backendLayout: context.backendLayout,
+                pageContent: context.pageContent
+              }
+            : null,
           message: error.response.message,
           statusCode: error.response.status
         })