Merge pull request #32 from mark-fajardo/feature/CMB-128

feat: implement dynamic page header image config
mark-fajardo · Nov 13, 2021 · a1e88ba · a1e88ba
2 parents 5782aea + 60fe204
commit a1e88ba
Show file tree

Hide file tree

Showing 27 changed files with 165 additions and 38 deletions.
diff --git a/app/Constants/AppConstants.php b/app/Constants/AppConstants.php
@@ -136,4 +136,7 @@ class AppConstants
     public const INT = 'int';
     public const REQUIRED_INT = 'required|int';
     public const NULLABLE = 'nullable';
+
+    /** Page Tags' Constants **/
+    public const PAGE_TAG_HOME = 'home_page';
 }
diff --git a/app/Services/PageConfigService.php b/app/Services/PageConfigService.php
@@ -22,13 +22,21 @@ class PageConfigService extends Service
      */
     private $oPageConfigRepository;
 
+    /**
+     * File utils
+     * @var FileUtils
+     */
+    private $oFileUtils;
+
     /**
      * PageConfigService constructor
      * @param PageConfigRepository $oPageConfigRepository
+     * @param FileUtils $oFileUtils
      */
-    public function __construct(PageConfigRepository $oPageConfigRepository)
+    public function __construct(PageConfigRepository $oPageConfigRepository, FileUtils $oFileUtils)
     {
         $this->oPageConfigRepository = $oPageConfigRepository;
+        $this->oFileUtils = $oFileUtils;
     }
 
     /**
@@ -51,6 +59,12 @@ public function pageConfig(Request $oRequest): PageConfigService
             return $this;
         }
 
+        if ($this->aRequest[AppConstants::PAGE_TAG] !== AppConstants::PAGE_TAG_HOME) {
+            $aJsonConfig = $this->manageCommonPageConfig($sPageConfig);
+            $this->aResponse = DBUtils::formatResponse(true, $aJsonConfig);
+            return $this;
+        }
+
         $aJsonConfig = $this->assignImage($sPageConfig);
         $this->aResponse = DBUtils::formatResponse(true, $aJsonConfig);
         return $this;
@@ -64,15 +78,30 @@ public function pageConfig(Request $oRequest): PageConfigService
     private function assignImage(string $sPageConfig): array
     {
         $aJsonConfig = json_decode($sPageConfig, true);
-        $oFileUtils = new FileUtils();
-        $aLandscapeImages = $oFileUtils->assignMultipleURL(data_get($aJsonConfig, 'sliders.*.image_url', []));
-        $aPortraitImages = $oFileUtils->assignMultipleURL(data_get($aJsonConfig, 'sliders.*.image_url_portrait', []));
-        data_set($aJsonConfig, 'mini_about.img', $oFileUtils->assignMultipleURL(data_get($aJsonConfig, 'mini_about.img', [])));
+        $aLandscapeImages = $this->oFileUtils->assignMultipleURL(data_get($aJsonConfig, 'sliders.*.image_url', []));
+        $aPortraitImages = $this->oFileUtils->assignMultipleURL(data_get($aJsonConfig, 'sliders.*.image_url_portrait', []));
+        data_set($aJsonConfig, 'mini_about.img', $this->oFileUtils->assignMultipleURL(data_get($aJsonConfig, 'mini_about.img', [])));
         foreach ($aJsonConfig['sliders'] as $iKey => $sValue) {
             data_set($aJsonConfig['sliders'], $iKey . '.image_url', data_get($aLandscapeImages, $iKey, ''));
             data_set($aJsonConfig['sliders'], $iKey . '.image_url_portrait', data_get($aPortraitImages, $iKey, ''));
         }
 
         return $aJsonConfig;
     }
+
+    /**
+     * Manage common page config.
+     * @param string $sPageConfig
+     * @return array
+     */
+    private function manageCommonPageConfig(string $sPageConfig): array
+    {
+        $aJsonConfig = json_decode($sPageConfig, true);
+        data_set(
+            $aJsonConfig['header'],
+            'img',
+            $this->oFileUtils->url(data_get($aJsonConfig, 'header.img', ''))
+        );
+        return $aJsonConfig;
+    }
 }
diff --git a/public/css/front.css b/public/css/front.css
diff --git a/public/js/aboutMe.js b/public/js/aboutMe.js
diff --git a/public/js/contact.js b/public/js/contact.js
diff --git a/public/js/gallery.js b/public/js/gallery.js
diff --git a/public/js/home.js b/public/js/home.js
diff --git a/public/js/notFound.js b/public/js/notFound.js
diff --git a/public/js/recipe.js b/public/js/recipe.js
diff --git a/public/js/recipeList.js b/public/js/recipeList.js
diff --git a/public/js/timeline.js b/public/js/timeline.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,14 +1,14 @@
 {
-    "/js/aboutMe.js": "/js/aboutMe.js?id=dde3471de76bdb40cb5f",
-    "/js/contact.js": "/js/contact.js?id=85e49f8df9a2750ece07",
-    "/js/gallery.js": "/js/gallery.js?id=100802fead61b2f8e05d",
-    "/js/home.js": "/js/home.js?id=cd7ff3f3d93997986b3d",
+    "/js/aboutMe.js": "/js/aboutMe.js?id=cc4c8d3857c662630872",
+    "/js/contact.js": "/js/contact.js?id=9d7b68851c9996faf939",
+    "/js/gallery.js": "/js/gallery.js?id=0406988388a5f52b170e",
+    "/js/home.js": "/js/home.js?id=7451d3186ebb6329b902",
     "/js/main.js": "/js/main.js?id=854411fbff00fb88e082",
     "/js/maintenance.js": "/js/maintenance.js?id=88edd1f4e1664776f5a5",
     "/css/maintenance.css": "/css/maintenance.css?id=117c1b2d2d14734e56c0",
-    "/css/front.css": "/css/front.css?id=16a0bf9d2863e42aac51",
-    "/js/notFound.js": "/js/notFound.js?id=f7b8ede3bdefba896bc6",
-    "/js/recipe.js": "/js/recipe.js?id=0534b9b3bf6bb5c840f2",
-    "/js/recipeList.js": "/js/recipeList.js?id=1473aafb3d07f45a568d",
-    "/js/timeline.js": "/js/timeline.js?id=826049b253ca7a3c672f"
+    "/css/front.css": "/css/front.css?id=c4ee18684d8999bfe090",
+    "/js/notFound.js": "/js/notFound.js?id=024809506ee623c9eb8c",
+    "/js/recipe.js": "/js/recipe.js?id=91953d525343abefbd4c",
+    "/js/recipeList.js": "/js/recipeList.js?id=50c8290af994d3fdd95b",
+    "/js/timeline.js": "/js/timeline.js?id=d845e30ff1a2441d91da"
 }
diff --git a/resources/css/common/app.css b/resources/css/common/app.css
@@ -1738,7 +1738,7 @@ option {
 }
 
 .about-page .page-barner-bg {
-    background: rgba(0, 0, 0, 0) url("/img/chef_morris/far_with_pepper_landscape_cropped.jpg") no-repeat scroll center center / cover;
+    /*background: rgba(0, 0, 0, 0) url("/img/chef_morris/far_with_pepper_landscape_cropped.jpg") no-repeat scroll center center / cover;*/
 }
 
 .count-area-bg:after,
@@ -2252,7 +2252,7 @@ ul.page-pagination li a {
 =================================*/
 
 .blog-page .page-barner-bg {
-    background: rgba(0, 0, 0, 0) url("/img/chef_morris/tinola_noodles.jpg") no-repeat scroll center center / cover;
+    /*background: rgba(0, 0, 0, 0) url("/img/chef_morris/tinola_noodles.jpg") no-repeat scroll center center / cover;*/
 }
 
 .blog-page.section-padding {
@@ -2588,7 +2588,7 @@ ul.blog-instagram-feed-widget li {
 */
 
 .gallery-page .page-barner-bg {
-    background: rgba(0, 0, 0, 0) url("/img/chef_morris/rana_1_landscape.jpg") no-repeat scroll center center / cover;
+    /*background: rgba(0, 0, 0, 0) url("/img/chef_morris/rana_1_landscape.jpg") no-repeat scroll center center / cover;*/
 }
 
 .gallery-page .title-and-meta::after {
@@ -2652,7 +2652,7 @@ ul.blog-instagram-feed-widget li {
 ================================*/
 
 .menu-page .page-barner-bg {
-    background: rgba(0, 0, 0, 0) url("/img/chef_morris/recipe_book.jpg") no-repeat scroll center center / cover;
+    /*background: rgba(0, 0, 0, 0) url("/img/chef_morris/recipe_book.jpg") no-repeat scroll center center / cover;*/
 }
 
 .style-three .promotion-area-bg {
@@ -2738,7 +2738,7 @@ ul.blog-instagram-feed-widget li {
 ==================================*/
 
 .contact-us-page .page-barner-bg {
-    background: rgba(0, 0, 0, 0) url("/img/chef_morris/tiramisu_2_landscape.jpg") no-repeat scroll center center / cover;
+    /*background: rgba(0, 0, 0, 0) url("/img/chef_morris/tiramisu_2_landscape.jpg") no-repeat scroll center center / cover;*/
 }
 
 .single-contact-widget {

diff --git a/resources/js/Components/AboutMe/Header.vue b/resources/js/Components/AboutMe/Header.vue
@@ -1,6 +1,6 @@
 <template>
     <header class="top-area single-page about-page" id="home">
-        <div class="page-barner-bg"></div>
+        <div class="page-barner-bg" :style="'background: rgba(0, 0, 0, 0) url(\'' + this.header_img + '\') no-repeat scroll center center / cover'"></div>
         <Nav/>
         <PageBanner banner-for="about_me"/>
     </header>
@@ -9,9 +9,13 @@
 <script>
     import Nav from '../../Common/Nav';
     import PageBanner from '../../Common/PageBanner';
+    import { mapGetters } from 'vuex';
 
     export default {
         name: 'Header',
+        computed: {
+            ...mapGetters('PageConfig', ['header_img']),
+        },
         components: { PageBanner, Nav }
     }
 </script>
diff --git a/resources/js/Components/Contact/Header.vue b/resources/js/Components/Contact/Header.vue
@@ -1,6 +1,6 @@
 <template>
     <header class="top-area single-page contact-us-page" id="home">
-        <div class="page-barner-bg"></div>
+        <div class="page-barner-bg" :style="'background: rgba(0, 0, 0, 0) url(\'' + this.header_img + '\') no-repeat scroll center center / cover'"></div>
         <Nav/>
         <PageBanner banner-for="contact"/>
     </header>
@@ -9,9 +9,13 @@
 <script>
     import Nav from '../../Common/Nav';
     import PageBanner from '../../Common/PageBanner';
+    import { mapGetters } from 'vuex';
 
     export default {
         name: 'Header',
+        computed: {
+            ...mapGetters('PageConfig', ['header_img']),
+        },
         components: { PageBanner, Nav }
     }
 </script>
diff --git a/resources/js/Components/Gallery/Header.vue b/resources/js/Components/Gallery/Header.vue
@@ -1,6 +1,6 @@
 <template>
     <header class="top-area single-page gallery-page" id="home">
-        <div class="page-barner-bg"></div>
+        <div class="page-barner-bg" :style="'background: rgba(0, 0, 0, 0) url(\'' + this.header_img + '\') no-repeat scroll center center / cover'"></div>
         <Nav/>
         <PageBanner banner-for="gallery"/>
     </header>
@@ -9,9 +9,13 @@
 <script>
     import Nav from '../../Common/Nav';
     import PageBanner from '../../Common/PageBanner';
+    import { mapGetters } from 'vuex';
 
     export default {
         name: 'Header',
+        computed: {
+            ...mapGetters('PageConfig', ['header_img']),
+        },
         components: { PageBanner, Nav }
     }
 </script>
diff --git a/resources/js/Components/Modules/AboutMe.vue b/resources/js/Components/Modules/AboutMe.vue
@@ -12,6 +12,7 @@
     import { mapActions } from 'vuex';
     import Content from '../AboutMe/Content';
     import SocialMediaFeed from '../../Common/SocialMediaFeed';
+    import { PageTags } from '../../constants';
 
     export default {
         components: { SocialMediaFeed, Content, Footer },
@@ -28,7 +29,8 @@
              */
             async prepareData() {
                 Promise.all([
-                    await this.getPageConfig('home_page')
+                    await this.getPageConfig(PageTags.HOME),
+                    await this.getPageConfig(PageTags.ABOUT_ME),
                 ]).then(() => {
                     jQueryMixin.method.loadSticky();
                     jQueryMixin.method.loadSearch();

diff --git a/resources/js/Components/Modules/Contact.vue b/resources/js/Components/Modules/Contact.vue
@@ -17,13 +17,21 @@
     import Content from '../Contact/Content';
     import ContactDetails from '../Contact/ContactDetails';
     import ContactFormHeader from '../Contact/ContactFormHeader';
+    import { mapActions } from 'vuex';
+    import { PageTags } from '../../constants';
 
     export default {
         components: { ContactFormHeader, ContactDetails, Content, Footer },
         async created() {
             jQueryMixin.method.loadSticky();
             jQueryMixin.method.loadSearch();
             jQueryMixin.method.removeLoader();
+            await this.getPageConfig(PageTags.CONTACT);
+        },
+        methods: {
+            ...mapActions('PageConfig', {
+                getPageConfig: 'getPageConfig'
+            }),
         }
     }
 </script>
diff --git a/resources/js/Components/Modules/Gallery.vue b/resources/js/Components/Modules/Gallery.vue
@@ -13,13 +13,21 @@
     import SocialMediaFeed from '../../Common/SocialMediaFeed';
     import GalleryView from '../Gallery/GalleryView';
     import Promotions from '../Home/Promotions';
+    import { mapActions } from 'vuex';
+    import { PageTags } from '../../constants';
 
     export default {
         components: { Promotions, GalleryView, SocialMediaFeed, Footer },
         async created() {
             jQueryMixin.method.loadSticky();
             jQueryMixin.method.loadSearch();
             jQueryMixin.method.removeLoader();
+            await this.getPageConfig(PageTags.GALLERY);
+        },
+        methods: {
+            ...mapActions('PageConfig', {
+                getPageConfig: 'getPageConfig'
+            }),
         }
     }
 </script>
diff --git a/resources/js/Components/Modules/Home.vue b/resources/js/Components/Modules/Home.vue
@@ -18,6 +18,7 @@
     import SocialMediaFeed from '../../Common/SocialMediaFeed';
     import Vlogs from '../../Common/Vlogs';
     import { jQueryMixin } from '../../main';
+    import { PageTags } from '../../constants';
 
     export default {
         components: { Vlogs, SocialMediaFeed, Footer, RecipeList, Promotions, MiniAbout },
@@ -34,7 +35,7 @@
              */
             async prepareData() {
                 Promise.all([
-                    await this.getPageConfig('home_page')
+                    await this.getPageConfig(PageTags.HOME),
                 ]).then(() => {
                     jQueryMixin.method.init();
                 })

diff --git a/resources/js/Components/Modules/RecipeList.vue b/resources/js/Components/Modules/RecipeList.vue
@@ -15,13 +15,20 @@
     import RecommendedRecipes from '../RecipeList/RecommendedRecipes';
     import SocialMediaFeed from '../../Common/SocialMediaFeed';
     import RecipeListView from "../RecipeList/RecipeListView";
+    import { mapActions } from 'vuex';
+    import { PageTags } from '../../constants';
 
     export default {
         components: { RecipeListView, SocialMediaFeed, RecommendedRecipes, Promotions, Footer },
         async created() {
             await this.prepareData();
+            await this.getPageConfig(PageTags.RECIPES);
         },
         methods: {
+            ...mapActions('PageConfig', {
+                getPageConfig: 'getPageConfig'
+            }),
+
             /**
              * Prepare data for the components config.
              */

diff --git a/resources/js/Components/Modules/Timeline.vue b/resources/js/Components/Modules/Timeline.vue
@@ -21,13 +21,21 @@
     import Content from '../../Components/Timeline/Content';
     import TimelineSidebar from '../Timeline/TimelineSidebar';
     import Promotions from '../Home/Promotions';
+    import { mapActions } from 'vuex';
+    import { PageTags } from '../../constants';
 
     export default {
         components: { Promotions, TimelineSidebar, SocialMediaFeed, Footer, Content },
         async created() {
             jQueryMixin.method.loadSticky();
             jQueryMixin.method.loadSearch();
             jQueryMixin.method.removeLoader();
+            await this.getPageConfig(PageTags.TIMELINE);
+        },
+        methods: {
+            ...mapActions('PageConfig', {
+                getPageConfig: 'getPageConfig'
+            }),
         }
     }
 </script>
diff --git a/resources/js/Components/RecipeList/Header.vue b/resources/js/Components/RecipeList/Header.vue
@@ -1,6 +1,6 @@
 <template>
     <header class="top-area single-page menu-page" id="home">
-        <div class="page-barner-bg"></div>
+        <div class="page-barner-bg" :style="'background: rgba(0, 0, 0, 0) url(\'' + this.header_img + '\') no-repeat scroll center center / cover'"></div>
         <Nav/>
         <PageBanner banner-for="recipe_list"/>
     </header>
@@ -9,9 +9,13 @@
 <script>
     import Nav from '../../Common/Nav';
     import PageBanner from '../../Common/PageBanner';
+    import { mapGetters } from 'vuex';
 
     export default {
         name: 'Header',
+        computed: {
+            ...mapGetters('PageConfig', ['header_img']),
+        },
         components: { PageBanner, Nav }
     }
 </script>
diff --git a/resources/js/Components/Timeline/Header.vue b/resources/js/Components/Timeline/Header.vue
@@ -1,6 +1,6 @@
 <template>
     <header class="top-area single-page blog-page" id="home">
-        <div class="page-barner-bg"></div>
+        <div class="page-barner-bg" :style="'background: rgba(0, 0, 0, 0) url(\'' + this.header_img + '\') no-repeat scroll center center / cover'"></div>
         <Nav/>
         <PageBanner banner-for="timeline"/>
     </header>
@@ -9,9 +9,13 @@
 <script>
     import Nav from '../../Common/Nav';
     import PageBanner from '../../Common/PageBanner';
+    import { mapGetters } from 'vuex';
 
     export default {
         name: 'Header',
+        computed: {
+            ...mapGetters('PageConfig', ['header_img']),
+        },
         components: { PageBanner, Nav }
     }
 </script>