From d14beeb654bd4d5b370d82b034e05f88a7098d31 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 30 Aug 2022 14:41:27 +0530
Subject: [PATCH] feat: Article settings sidebar in new article page (#5355)

---
 .../dashboard/i18n/locale/en/helpCenter.json  |  2 +-
 .../components/Header/EditArticleHeader.vue   |  5 ++
 .../pages/articles/ArticleSettings.vue        |  2 +-
 .../helpcenter/pages/articles/EditArticle.vue |  4 +-
 .../helpcenter/pages/articles/NewArticle.vue  | 65 ++++++++++++++-----
 5 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index f642814dc..03a425a9b 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -225,7 +225,7 @@
       }
     },
     "CREATE_ARTICLE": {
-      "ERROR_MESSAGE": "Something went wrong. Please try again."
+      "ERROR_MESSAGE": "Please add the article heading and content then only you can update the settings"
     },
     "SIDEBAR": {
       "SEARCH": {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
index 45389235b..f3e6218c1 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
@@ -44,6 +44,7 @@
         variant="hollow"
         size="small"
         color-scheme="secondary"
+        :is-disabled="enableOpenSidebarButton"
         @click="openSidebar"
       />
       <woot-button
@@ -82,6 +83,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    enableOpenSidebarButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
index 074c3b70c..6817c175b 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
@@ -154,7 +154,7 @@ export default {
     },
   },
   mounted() {
-    if (!isEmptyObject(this.article.meta)) {
+    if (!isEmptyObject(this.article.meta || {})) {
       const {
         meta: { title = '', description = '', tags = [] },
       } = this.article;
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
index 5b2b5b0f0..0aefc7902 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
@@ -119,12 +119,12 @@ export default {
   padding: var(--space-small) var(--space-normal);
   width: 100%;
   flex: 1;
-  overflow: scroll;
+  overflow: auto;
 
   .edit-article--container {
     flex: 1;
     flex-shrink: 0;
-    overflow: scroll;
+    overflow: auto;
   }
 
   .is-sidebar-open {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
index 1938a724a..778dc38cc 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
@@ -1,41 +1,60 @@
 <template>
   <div class="article-container">
-    <edit-article-header
-      :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
-      draft-state="saved"
-      @back="onClickGoBack"
-      @save-article="createNewArticle"
+    <div
+      class="new-article--container"
+      :class="{ 'is-sidebar-open': showArticleSettings }"
+    >
+      <edit-article-header
+        :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
+        draft-state="saved"
+        @back="onClickGoBack"
+        @open="openArticleSettings"
+        @close="closeArticleSettings"
+        @save-article="createNewArticle"
+      />
+      <article-editor :article="newArticle" @save-article="createNewArticle" />
+    </div>
+    <article-settings
+      v-if="showArticleSettings"
+      :article="article"
+      @save-article="saveArticle"
     />
-    <article-editor :article="article" @save-article="createNewArticle" />
   </div>
 </template>
-
 <script>
 import { mapGetters } from 'vuex';
 import EditArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader';
 import ArticleEditor from '../../components/ArticleEditor.vue';
 import portalMixin from '../../mixins/portalMixin';
 import alertMixin from 'shared/mixins/alertMixin.js';
+import ArticleSettings from './ArticleSettings.vue';
 export default {
   components: {
     EditArticleHeader,
     ArticleEditor,
+    ArticleSettings,
   },
   mixins: [portalMixin, alertMixin],
   data() {
     return {
       articleTitle: '',
       articleContent: '',
+      showOpenSidebarButton: false,
       showArticleSettings: false,
+      article: {},
     };
   },
   computed: {
     ...mapGetters({
       selectedPortal: 'portals/getSelectedPortal',
       currentUserID: 'getCurrentUserID',
+      articles: 'articles/articles',
       categories: 'categories/allCategories',
     }),
-    article() {
+    articleId() {
+      return this.$route.params.articleSlug;
+    },
+    newArticle() {
       return { title: this.articleTitle, content: this.articleContent };
     },
     selectedPortalSlug() {
@@ -79,25 +98,35 @@ export default {
         }
       }
     },
+    openArticleSettings() {
+      this.showArticleSettings = true;
+    },
+    closeArticleSettings() {
+      this.showArticleSettings = false;
+    },
+    saveArticle() {
+      this.alertMessage = this.$t('HELP_CENTER.CREATE_ARTICLE.ERROR_MESSAGE');
+      this.showAlert(this.alertMessage);
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .article-container {
+  display: flex;
   padding: var(--space-small) var(--space-normal);
   width: 100%;
   flex: 1;
+  overflow: auto;
+}
+.new-article--container {
+  flex: 1;
+  flex-shrink: 0;
   overflow: scroll;
-
-  .edit-article--container {
-    flex: 1;
-    flex-shrink: 0;
-    overflow: scroll;
-  }
-
-  .is-sidebar-open {
-    flex: 0.7;
-  }
+  overflow: auto;
+}
+.is-sidebar-open {
+  flex: 0.7;
 }
 </style>