page setting

src/mixin/PageOptions.js

@@ -1,5 +1,4 @@
-import { PageSeo } from 'src/models/PageSeo.js'
-import { APIGateway } from 'src/api/APIGateway.js'
+import { APIGateway } from 'src/api/APIGateway'
 
 const mixinPageOptions = {
   data() {
@@ -44,95 +43,35 @@ const mixinPageOptions = {
     prefetchServerDataPromise () {
       return this.getPageConfigRequest()
     },
-    prefetchServerDataPromiseThen () {
+    prefetchServerDataPromiseThen (pageSetting) {
+      const sections = pageSetting.value.sections
+      const seo = pageSetting.value.seo
+
+      // PageBuilder
+      this.$store.commit('PageBuilder/updateCurrentSections', sections)
+
+      // SEO
+      this.$store.commit('SEO/updateTitle', seo.title)
+      this.$store.commit('SEO/updateDescription', seo.description)
+      this.$store.commit('SEO/updateRobots', seo.robots)
+      this.$store.commit('SEO/updateOgTitle', seo.ogTitle)
+      this.$store.commit('SEO/updateOgDescription', seo.ogDescription)
+      this.$store.commit('SEO/updateOgUrl', seo.ogUrl)
+      this.$store.commit('SEO/updateOgImage', seo.ogImage)
+
+      this.pageBuilderLoading = false
+
       this.$store.commit('PageBuilder/updatePageDataLoaded', true)
     },
     prefetchServerDataPromiseCatch () {
       this.pageBuilderLoading = false
     },
     getPageConfigRequest() {
-      // this.pageBuilderLoading = true
-      // const params = JSON.stringify(this.$route.params)
-      // const routeName = this.$route.name
-      // const key = 'route_name:' + routeName + (this.hasDynamicSettingWithParams ? ('-params:' + params) : '')
-      // return APIGateway.pageSetting.get(key)
-
-      return Promise.all([this.getPageBuilderConfigPromise(), this.getSeoPromise()])
-    },
-
-    getPageBuilderConfigPromise () {
       this.pageBuilderLoading = true
-      return new Promise((resolve, reject) => {
-        const params = JSON.stringify(this.$route.params)
-        const routeName = this.$route.name
-        const key = 'route_name:' + routeName + (this.hasDynamicSettingWithParams ? ('-params:' + params) : '')
-        APIGateway.pageSetting.get(key)
-          .then((pageSetting) => {
-            const sections = pageSetting.value.sections
-            const seo = pageSetting.value.seo
-
-            // PageBuilder
-            this.$store.commit('PageBuilder/updateCurrentSections', sections)
-
-            this.pageBuilderLoading = false
-            this.$store.commit('PageBuilder/updatePageDataLoaded', true)
-
-            const target = this.getDynamicSeoPageTarget()
-            if (!target) {
-              this.commitSeo(seo)
-            }
-
-            resolve(pageSetting)
-          })
-          .catch(() => {
-            this.pageBuilderLoading = false
-            reject()
-          })
-      })
-    },
-    getDynamicSeoPageTarget () {
+      const params = JSON.stringify(this.$route.params)
       const routeName = this.$route.name
-      const dynamicSeoPage = [{
-        routeName: 'Public.Product.Show',
-        entityType: 'product'
-      }, {
-        routeName: 'Public.Home',
-        entityType: 'content'
-      }, {
-        routeName: 'Public.Home',
-        entityType: 'content-set'
-      }]
-      return dynamicSeoPage.find(item => item.routeName === routeName)
-    },
-    commitSeo (seoData) {
-      const pageSeoData = (new PageSeo(seoData)).getFormattedStyle()
-      // SEO
-      this.$store.commit('SEO/updateTitle', pageSeoData.title)
-      this.$store.commit('SEO/updateDescription', pageSeoData.description)
-      this.$store.commit('SEO/updateRobots', pageSeoData.robots)
-      this.$store.commit('SEO/updateOgTitle', pageSeoData.ogTitle)
-      this.$store.commit('SEO/updateOgDescription', pageSeoData.ogDescription)
-      this.$store.commit('SEO/updateOgUrl', pageSeoData.ogUrl)
-      this.$store.commit('SEO/updateOgImage', pageSeoData.ogImage)
-    },
-    getSeoPromise () {
-      return new Promise((resolve, reject) => {
-        const target = this.getDynamicSeoPageTarget()
-        if (target) {
-          const type = target.entityType
-          const id = this.$route.params.id
-          APIGateway.seo.show({ type, id })
-            .then((pageSeo) => {
-              this.commitSeo(pageSeo)
-              resolve(pageSeo)
-            })
-            .catch(() => {
-              reject()
-            })
-        } else {
-          resolve(null)
-        }
-      })
+      const key = 'route_name:' + routeName + (this.hasDynamicSettingWithParams ? ('-params:' + params) : '')
+      return APIGateway.pageSetting.get(key)
     }
   }
 }

src/pages/Public/index.vue

@@ -6,19 +6,19 @@
 </template>
 
 <script>
-import { mixinPageOptions } from 'src/mixin/Mixins.js'
+import { mixinPageOptions, mixinPrefetchServerData, mixinSEO } from 'src/mixin/Mixins.js'
 
 export default {
   name: 'index',
-  mixins: [mixinPageOptions],
+  mixins: [mixinPrefetchServerData, mixinPageOptions, mixinSEO],
   data () {
     return {
       sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'HomePageFirstSection' }] }], options: { boxed: true } }] }, options: { fullHeight: true, backgrounds: { xs: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, sm: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, md: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, lg: { size: null, color: null, image: null, repeat: null, position: null, attachment: null }, xl: { size: null, color: null, image: null, repeat: null, position: null, attachment: null } }, verticalAlign: 'center', background: { image: 'assets/images/web/homepage-first-section-background.png', position: 'center', size: 'cover', repeat: 'no-repeat', attachment: 'fixed' }, style: { marginTop: '-120px', minHeight: '100vh', backgroundImage: "url('assets/images/web/homepage-first-section-background.png')", backgroundAttachment: 'fixed' } } }, { data: { rows: [{ cols: [{ widgets: [{ name: 'ClassroomCarousel' }] }], options: { boxed: true } }] }, options: { background: { color: '#F6F6F6' } } }]
     }
-  },
-  mounted () {
-    this.currenSections = this.sections
-    this.pageBuilderLoading = false
   }
+  // mounted () {
+  //   this.currenSections = this.sections
+  //   this.pageBuilderLoading = false
+  // }
 }
 </script>