Merge pull request #4641 from Countly/SER-740

[SER-740] [guides] more improvements

plugins/guides/frontend/public/javascripts/countly.models.js

@@ -37,6 +37,12 @@
         return _entries;
     };
 
+    countlyGuides.getEntry = function(sectionID) {
+        return _entries.find(function(entry) {
+            return entry.sectionID === sectionID;
+        });
+    };
+
     countlyGuides.getWalkthroughs = function(sectionID) {
         let entries = _entries;
         if (sectionID) {

plugins/guides/frontend/public/javascripts/countly.views.js

@@ -69,8 +69,8 @@
     var OverviewComponent = countlyVue.views.create({
         template: CV.T('/guides/templates/overview-component.html'),
         props: {
-            title: {type: String, required: true},
-            description: {type: String, required: true},
+            title: {type: String, required: false},
+            description: {type: String, required: false},
             link: {type: String, required: false},
             items: {type: Array, required: false},
             type: {type: String, required: true, default: 'walkthroughs'},
@@ -80,14 +80,31 @@
             'walkthrough-component': WalkthroughComponent,
             'article-component': ArticleComponent
         },
+        data: function() {
+            return {
+                guideConfig: {}
+            };
+        },
         computed: {
+            titleContent: function() {
+                return this.title || (this.type === 'walkthroughs' ? this.guideConfig.walkthroughTitle : this.guideConfig.articleTitle);
+            },
+            descriptionContent: function() {
+                return this.description || (this.type === 'walkthroughs' ? this.guideConfig.walkthroughDescription : this.guideConfig.articleDescription);
+            },
             customClass: function() {
                 return this.max <= 2 ? 'bu-is-half' : 'bu-is-full';
             },
             wrapperStyle: function() {
                 return this.max > 0 ? `max-width:${100 / this.max}%;` : `max-width:50%;`;
             }
-        }
+        },
+        created: function() {
+            var self = this;
+            countlyCMS.fetchEntry("server-guide-config").then(function(config) {
+                self.guideConfig = (config && config.data && config.data[0] && config.data[0]) || {};
+            });
+        },
     });
 
     // GLOBAL COMPONENTS
@@ -163,11 +180,10 @@
             while (sections.length > 0 && !self.isButtonVisible) {
                 let sectionID = '/' + sections.join('/');
                 countlyGuides.fetchEntries({ sectionID }).then(function() {
-                    let walkthroughs = countlyGuides.getWalkthroughs(sectionID);
-                    let articles = countlyGuides.getArticles(sectionID);
-                    if (walkthroughs.length > 0 || articles.length > 0) {
+                    let entry = countlyGuides.getEntry(sectionID);
+                    if (entry.walkthroughs.length > 0 || entry.articles.length > 0) {
                         self.isButtonVisible = true;
-                        self.guideData = countlyGuides.getEntries()[0];
+                        self.guideData = entry;
                         countlyCMS.fetchEntry("server-guide-config").then(function(config) {
                             self.guideConfig = (config && config.data && config.data[0] && config.data[0]) || {};
                         });
@@ -387,20 +403,20 @@
         },
         data: function() {
             return {
-                onboardingWalkthroughs: [],
-                newWalkthroughs: [],
-                suggestionsWalkthroughs: [],
-                promotedArticles: []
+                onboardingEntry: {},
+                newEntry: {},
+                suggestionsEntry: {},
+                promotedEntry: {},
             };
         },
         created: function() {
             var self = this;
             countlyGuides.fetchEntries({ sectionID: { $in: ["/overview/getting-started", "/overview/whats-new", "/overview/suggestions", "/overview/promoted"] } })
                 .then(function() {
-                    self.onboardingWalkthroughs = countlyGuides.getWalkthroughs('/overview/getting-started').slice(0, 2);
-                    self.newWalkthroughs = countlyGuides.getWalkthroughs('/overview/whats-new').slice(0, 2);
-                    self.suggestionsWalkthroughs = countlyGuides.getWalkthroughs('/overview/suggestions').slice(0, 4);
-                    self.promotedArticles = countlyGuides.getArticles('/overview/promoted').slice(0, 3);
+                    self.onboardingEntry = countlyGuides.getEntry('/overview/getting-started');
+                    self.newEntry = countlyGuides.getEntry('/overview/whats-new');
+                    self.suggestionsEntry = countlyGuides.getEntry('/overview/suggestions');
+                    self.promotedEntry = countlyGuides.getEntry('/overview/promoted');
                 })
                 .catch(function() {
                     // console.log(error);

plugins/guides/frontend/public/localization/guides.properties

@@ -21,15 +21,6 @@ guides.feedback = Do you have any <span class="feedback__link">feedback</span>?
 guides.read-more = Read more
 guides.see-all = See all
 
-guides.get-started = Get started
-guides.get-started.desc = Run through out onboarding setup to get started
-guides.suggestions = Suggestions for you
-guides.suggestions.desc = First time here or just need a quick overview? Run through our onboarding setup to get started
-guides.promoted = Promoted Articles
-guides.promoted.desc = First time here or just need a quick overview? Run through our onboarding setup to get started
-guides.new = What's new?
-guides.new.desc = Run through our onboarding setup to get started
-
 guides.search.in-guides = Search in Guides
 guides.search.in-countly-guides = Search in Countly Guides
 guides.search.results-count = {0} results for "{1}"

plugins/guides/frontend/public/templates/dialog.html

@@ -31,12 +31,12 @@ <h2>{{ guideData.sectionTitle || "" }}</h2>
         </template>
         <div class="content">
             <vue-scroll :ops="scrollDialogContent">
-                <div v-if="guideData.description" class="description">
-                    {{ guideData.description }}
+                <div v-if="guideData.sectionDescription" class="description">
+                    {{ guideData.sectionDescription }}
                 </div>
                 <div v-if="guideData.walkthroughs && guideData.walkthroughs.length > 0" class="bu-is-flex bu-is-flex-direction-column bu-is-align-items-start" style="margin-bottom: 25px;">
-                    <div class="title">{{ guideConfig.walkthroughTitle }}</div>
-                    <div class="description">{{ guideConfig.walkthroughDescription }}</div>
+                    <div class="title">{{ guideData.walkthroughTitle || guideConfig.walkthroughTitle }}</div>
+                    <div class="description">{{ guideData.walkthroughDescription || guideConfig.walkthroughDescription }}</div>
                     <div style="width:100%;">
                         <vue-scroll ref="walkthroughSlider" :ops="scrollWalkthroughs" style="width:100%;">
                             <div class="bu-is-flex">
@@ -53,8 +53,8 @@ <h2>{{ guideData.sectionTitle || "" }}</h2>
                     </div>
                 </div>
                 <div v-if="guideData.articles && guideData.articles.length > 0" class="bu-is-flex bu-is-flex-direction-column bu-is-align-items-start">
-                    <div class="title">{{ guideConfig.articleTitle }}</div>
-                    <div class="description">{{ guideConfig.articleDescription }}</div>
+                    <div class="title">{{ guideData.articleTitle || guideConfig.articleTitle }}</div>
+                    <div class="description">{{ guideData.articleDescription || guideConfig.articleDescription }}</div>
                     <div class="bu-is-flex bu-is-flex-wrap-wrap" style="width: 100%;">
                         <article-component
                             v-for="(article, index) in guideData.articles"

plugins/guides/frontend/public/templates/overview-component.html

@@ -1,10 +1,10 @@
-<div class="bu-column" :class="customClass">
+<div class="bu-column" :class="customClass" v-if="items.length > 0">
     <div class="overview">
         <div class="bu-level">
             <div class="bu-level-left">
                 <div class="bu-level-item bu-is-flex bu-is-flex-direction-column bu-is-align-items-start">
-                    <div class="title">{{ title }}</div>
-                    <div class="description">{{ description }}</div>
+                    <div class="title">{{ titleContent }}</div>
+                    <div class="description">{{ descriptionContent }}</div>
                 </div>
             </div>
             <div class="bu-level-right" v-if="link">

plugins/guides/frontend/public/templates/overview-tab.html

@@ -1,36 +1,32 @@
 <div class="bu-columns bu-is-multiline bu-is-gapless">
     <overview-component
-        v-if="onboardingWalkthroughs && onboardingWalkthroughs.length > 0"
-        :title="i18n('guides.get-started')"
-        :description="i18n('guides.get-started.desc')"
+        :title="onboardingEntry.walkthroughTitle"
+        :description="onboardingEntry.walkthroughDescription"
         link="#/guides/walkthroughs/onboarding"
         type="walkthrough"
-        :items="onboardingWalkthroughs"
+        :items="onboardingEntry.walkthroughs.slice(0, 2)"
     ></overview-component>
     <overview-component
-        v-if="newWalkthroughs && newWalkthroughs.length > 0"
-        :title="i18n('guides.new')"
-        :description="i18n('guides.new.desc')"
+        :title="newEntry.walkthroughTitle"
+        :description="newEntry.walkthroughDescription"
         link="#/guides/walkthroughs/new"
         type="walkthrough"
-        :items="newWalkthroughs"
+        :items="newEntry.walkthroughs.slice(0, 2)"
     ></overview-component>
     <overview-component
-        v-if="suggestionsWalkthroughs && suggestionsWalkthroughs.length > 0"
-        :title="i18n('guides.suggestions')"
-        :description="i18n('guides.suggestions.desc')"
+        :title="suggestionsEntry.walkthroughTitle"
+        :description="suggestionsEntry.walkthroughDescription"
         link="#/guides/walkthroughs/suggestions"
         type="walkthrough"
-        :items="suggestionsWalkthroughs"
+        :items="suggestionsEntry.walkthroughs.slice(0, 4)"
         :max="4"
     ></overview-component>
     <overview-component
-        v-if="promotedArticles && promotedArticles.length > 0"
-        :title="i18n('guides.promoted')"
-        :description="i18n('guides.promoted.desc')"
+        :title="promotedEntry.articleTitle"
+        :description="promotedEntry.articleDescription"
         link="#/guides/articles/promoted"
         type="article"
-        :items="promotedArticles"
+        :items="promotedEntry.articles.slice(0, 3)"
         :max="3"
     ></overview-component>
 </div>