refactor(layouts): adjust layout matching to new API response (#3)

TYPO3-Headless · Oct 25, 2019 · 531664b · 531664b
1 parent eaaf05c
commit 531664b
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 20 deletions.
diff --git a/example/layouts/backend/BeSinglecolumn.vue b/example/layouts/backend/BeSinglecolumn.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <strong>Custom 1 column backend layout</strong>
+    <ce-renderer :content="content.colPos0" />
+  </div>
+</template>
+<script>
+import BeDefault from '~typo3/layouts/backend/BeDefault'
+export default {
+  functional: false,
+  extends: BeDefault
+}
+</script>
diff --git a/example/layouts/layout-1.vue b/example/layouts/layout-1.vue
@@ -0,0 +1,3 @@
+<template>
+  <nuxt />
+</template>
diff --git a/example/nuxt.config.js b/example/nuxt.config.js
@@ -30,9 +30,6 @@ module.exports = {
     api: {
       baseURL: 'https://api.t3pwa.com'
     },
-    layouts: {
-      1: 'simple'
-    },
     i18n: {
       locales: ['en', 'pl', 'de'],
       locale: 'en',

diff --git a/example/plugins/layouts.js b/example/plugins/layouts.js
@@ -1,15 +1,17 @@
 import Vue from 'vue'
 import { registerBackendLayouts } from '~typo3/plugins/layouts'
 import BeDefault from '~/layouts/backend/default'
+import BeSinglecolumn from '~/layouts/backend/BeSinglecolumn'
 
 const layouts = {
   BeDefault,
+  BeSinglecolumn
   // beLayout2Columns,
   // example of async use
-  BeTwoColumns: () =>
-    import(
-      /* webpackChunkName: 'layouts/backend/2-columns.vue' */ '~/layouts/backend/2-columns.vue'
-    )
+  // BeSinglecolumn: () =>
+  //   import(
+  //     /* webpackChunkName: 'layouts/backend/BeSinglecolumn.vue' */ '~/layouts/backend/BeSinglecolumn.vue'
+  //   )
 }
 
 export default ({ app }) => {

diff --git a/lib/options.js b/lib/options.js
@@ -6,11 +6,7 @@ export default {
       initialData: '?type=834'
     }
   },
-  // map your frontend layouts
-  // by default TYPO3 returns integer value
-  layouts: {
-    0: 'default'
-  },
+  layouts: {},
   i18n: {
     locale: 'en',
     fallbackLocale: 'en'

diff --git a/lib/templates/lib/layouts.js b/lib/templates/lib/layouts.js
@@ -6,15 +6,14 @@
  */
 function getBackendLayout(components, layout) {
   const backendLayout = 'default'
-  if (layout && layout.length && layout.includes('pagets__')) {
-    const _backendLayout = layout.split('pagets__').pop()
+  if (layout && layout.length) {
     if (
       Object.prototype.hasOwnProperty.call(
         components,
-        `Be${_backendLayout[0].toUpperCase() + _backendLayout.slice(1)}`
+        `Be${layout[0].toUpperCase()}${layout.slice(1)}`
       )
     ) {
-      return _backendLayout
+      return layout
     }
   }
   return backendLayout
@@ -26,8 +25,11 @@ function getBackendLayout(components, layout) {
  * @param {Object} layoutList Available list of layouts
  * @param {String} layout Name of frontend layout
  */
-function getFrontendLayout(layoutList, layout) {
-  return layoutList[layout] || 'default'
+function getFrontendLayout(layout, layoutList) {
+  if (layoutList && typeof layoutList === 'object' && layoutList[layout]) {
+    return layoutList[layout]
+  }
+  return layout || 'default'
 }
 
 export { getBackendLayout, getFrontendLayout }
diff --git a/lib/templates/middleware/context.js b/lib/templates/middleware/context.js
@@ -10,8 +10,8 @@ middleware.context = function(context) {
       .getPage(path)
       .then(resp => {
         context.layout = getFrontendLayout(
-          context.app.$typo3.options.layouts,
-          resp.data.page.appearance.layout
+          resp.data.page.appearance.layout,
+          context.app.$typo3.options.layouts
         )
         context.backendLayout = getBackendLayout(
           context.app.components,