feat: Creates view for edit/new article page (#5061)

* feat: Creates view for edit/new article page

* chore: Minor fixes

* chore: Minor fixes

* Update HelpCenterLayout.vue

* chore: Minor fixes

* chore: Review fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/helpCenter/EditArticle.vue

@@ -7,15 +7,16 @@
       :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
       @focus="onFocus"
       @blur="onBlur"
+      @input="onTitleInput"
     />
     <woot-message-editor
       v-model="articleContent"
       class="article-content"
       :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
       :is-format-mode="true"
-      :min-height="24"
       @focus="onFocus"
       @blur="onBlur"
+      @input="onContentInput"
     />
   </div>
 </template>
@@ -49,6 +50,12 @@ export default {
     onBlur() {
       this.$emit('blur');
     },
+    onTitleInput() {
+      this.$emit('titleInput', this.articleTitle);
+    },
+    onContentInput() {
+      this.$emit('contentInput', this.articleContent);
+    },
   },
 };
 </script>

app/javascript/dashboard/components/helpCenter/Header/ArticleHeader.vue

@@ -42,7 +42,7 @@
               size="small"
               icon="send-clock"
             >
-              {{ 'Status' }}
+              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.PUBLISHED') }}
             </woot-button>
           </woot-dropdown-item>
           <woot-dropdown-item>
@@ -52,7 +52,7 @@
               size="small"
               icon="dual-screen-clock"
             >
-              {{ 'Created' }}
+              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.DRAFT') }}
             </woot-button>
           </woot-dropdown-item>
           <woot-dropdown-item>
@@ -62,7 +62,7 @@
               size="small"
               icon="calendar-clock"
             >
-              {{ 'Last edited' }}
+              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.ARCHIVED') }}
             </woot-button>
           </woot-dropdown-item>
         </woot-dropdown-menu>
@@ -79,6 +79,7 @@
         class-names="article--buttons"
         size="small"
         color-scheme="primary"
+        @click="onClickNewArticlePage"
       >
         {{ $t('HELP_CENTER.HEADER.NEW_BUTTON') }}
       </woot-button>
@@ -130,6 +131,9 @@ export default {
       this.$emit('close');
       this.showSortByDropdown = false;
     },
+    onClickNewArticlePage() {
+      this.$emit('newArticlePage');
+    },
   },
 };
 </script>
@@ -139,7 +143,6 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-small) var(--space-normal);
   width: 100%;
   height: var(--space-larger);
 }
@@ -154,6 +157,10 @@ export default {
 .count-view {
   margin-left: var(--space-smaller);
 }
+.dropdown-pane--open {
+  top: var(--space-larger);
+  right: 14.8rem;
+}
 .selected-value {
   display: inline-flex;
   margin-left: var(--space-smaller);

app/javascript/dashboard/components/helpCenter/Header/EditArticleHeader.vue

@@ -3,7 +3,7 @@
     <div class="header-left--wrap">
       <woot-button
         icon="chevron-left"
-        class-names="article--buttons"
+        class-names="article-back-buttons"
         variant="clear"
         color-scheme="primary"
         @click="onClickGoBack"
@@ -127,7 +127,6 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-small) var(--space-normal);
   width: 100%;
   height: var(--space-larger);
 }
@@ -139,6 +138,9 @@ export default {
   display: flex;
   align-items: center;
 }
+.article-back-buttons {
+  padding-left: 0;
+}
 .article--buttons {
   margin-left: var(--space-smaller);
 }

app/javascript/dashboard/components/helpCenter/Sidebar/SidebarHeader.vue

@@ -66,7 +66,7 @@ export default {
   height: var(--space-jumbo);
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-normal) 0;
+  padding: var(--space-small) 0 var(--space-normal) 0;
   border-bottom: 1px solid var(--color-border-light);
 }
 

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -134,6 +134,12 @@ export default {
         this.menuItem.toStateName === 'settings_applications'
       );
     },
+    isAllArticles() {
+      return (
+        this.$store.state.route.name === 'list_all_locale_articles' &&
+        this.menuItem.toStateName === 'all_locale_articles'
+      );
+    },
 
     computedClass() {
       // If active Inbox is present
@@ -151,6 +157,12 @@ export default {
         }
         return ' ';
       }
+      if (this.isHelpCenterSidebar) {
+        if (this.isAllArticles) {
+          return 'is-active';
+        }
+        return ' ';
+      }
       return '';
     },
   },

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -4,7 +4,12 @@
       "FILTER": "Filter by",
       "SORT": "Sort by",
       "SETTINGS_BUTTON": "Settings",
-      "NEW_BUTTON": "New Article"
+      "NEW_BUTTON": "New Article",
+      "DROPDOWN_OPTIONS": {
+        "PUBLISHED": "Published",
+        "DRAFT": "Draft",
+        "ARCHIVED": "Archived"
+      }
     },
     "EDIT_HEADER": {
       "PUBLISH_BUTTON": "Publish",

app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue

@@ -9,7 +9,12 @@
 
     <!-- TO BE REPLACED WITH HELPCENTER SIDEBAR -->
     <div class="margin-right-small">
-      {{ `Place the help center sidebar here.  ` }}
+      <help-center-sidebar
+        header-title="Help Center"
+        sub-title="English"
+        :accessible-menu-items="accessibleMenuItems"
+        :additional-secondary-menu-items="additionalSecondaryMenuItems"
+      />
     </div>
     <!-- END: TO BE REPLACED WITH HELPCENTER SIDEBAR -->
 
@@ -29,7 +34,11 @@
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex';
+
+import { frontendURL } from '../../../../helper/URLHelper';
 import Sidebar from 'dashboard/components/layout/Sidebar';
+import HelpCenterSidebar from 'dashboard/components/helpCenter/Sidebar/Sidebar';
 import CommandBar from 'dashboard/routes/dashboard/commands/commandbar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
@@ -37,6 +46,7 @@ import NotificationPanel from 'dashboard/routes/dashboard/notifications/componen
 export default {
   components: {
     Sidebar,
+    HelpCenterSidebar,
     CommandBar,
     WootKeyShortcutModal,
     NotificationPanel,
@@ -48,6 +58,124 @@ export default {
     };
   },
   computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+    }),
+    // For testing
+    accessibleMenuItems() {
+      return [
+        {
+          icon: 'book',
+          label: 'HELP_CENTER.ALL_ARTICLES',
+          key: 'helpcenter_all',
+          count: 199,
+          toState: frontendURL(
+            `accounts/${this.accountId}/portals/:portalSlug/:locale/articles`
+          ),
+          toolTip: 'All Articles',
+          toStateName: 'all_locale_articles',
+        },
+        {
+          icon: 'pen',
+          label: 'HELP_CENTER.MY_ARTICLES',
+          key: 'helpcenter_mine',
+          count: 112,
+          toState: frontendURL(
+            `accounts/${this.accountId}/portals/:portalSlug/:locale/articles/mine`
+          ),
+          toolTip: 'My articles',
+          toStateName: 'mine_articles',
+        },
+        {
+          icon: 'draft',
+          label: 'HELP_CENTER.DRAFT',
+          key: 'helpcenter_draft',
+          count: 32,
+          toState: frontendURL(
+            `accounts/${this.accountId}/portals/:portalSlug/:locale/articles/draft`
+          ),
+          toolTip: 'Draft',
+          toStateName: 'draft_articles',
+        },
+        {
+          icon: 'archive',
+          label: 'HELP_CENTER.ARCHIVED',
+          key: 'helpcenter_archive',
+          count: 10,
+          toState: frontendURL(
+            `accounts/${this.accountId}/portals/:portalSlug/:locale/articles/archived`
+          ),
+          toolTip: 'Archived',
+          toStateName: 'archived_articles',
+        },
+      ];
+    },
+    additionalSecondaryMenuItems() {
+      return [
+        {
+          icon: 'folder',
+          label: 'HELP_CENTER.CATEGORY',
+          hasSubMenu: true,
+          key: 'category',
+          children: [
+            {
+              id: 1,
+              label: 'Getting started',
+              count: 12,
+              truncateLabel: true,
+              toState: frontendURL(
+                `accounts/${this.accountId}/portals/:portalSlug/:locale/categories/getting-started`
+              ),
+            },
+            {
+              id: 2,
+              label: 'Channel',
+              count: 19,
+              truncateLabel: true,
+              toState: frontendURL(
+                `accounts/${this.accountId}/portals/:portalSlug/:locale/categories/channel`
+              ),
+            },
+            {
+              id: 3,
+              label: 'Feature',
+              count: 24,
+              truncateLabel: true,
+              toState: frontendURL(
+                `accounts/${this.accountId}/portals/:portalSlug/:locale/categories/feature`
+              ),
+            },
+            {
+              id: 4,
+              label: 'Advanced',
+              count: 8,
+              truncateLabel: true,
+              toState: frontendURL(
+                `accounts/${this.accountId}/portals/:portalSlug/:locale/categories/advanced`
+              ),
+            },
+            {
+              id: 5,
+              label: 'Mobile app',
+              count: 3,
+              truncateLabel: true,
+              toState: frontendURL(
+                `accounts/${this.accountId}/portals/:portalSlug/:locale/categories/mobile-app`
+              ),
+            },
+            {
+              id: 6,
+              label: 'Others',
+              count: 39,
+              truncateLabel: true,
+              toState: frontendURL(
+                `accounts/${this.accountId}/portals/:portalSlug/:locale/categories/others`
+              ),
+            },
+          ],
+        },
+      ];
+    },
     currentRoute() {
       return ' ';
     },

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue

@@ -1,3 +1,39 @@
 <template>
-  <div>Component to edit an article</div>
+  <div class="container">
+    <edit-article-header
+      back-button-label="All Articles"
+      draft-state="saved"
+      @back="onClickGoBack"
+    />
+    <edit-article-field :article="article" />
+  </div>
 </template>
+
+<script>
+import EditArticleHeader from 'dashboard/components/helpCenter/Header/EditArticleHeader';
+import EditArticleField from 'dashboard/components/helpCenter/EditArticle';
+export default {
+  components: {
+    EditArticleHeader,
+    EditArticleField,
+  },
+  props: {
+    article: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  methods: {
+    onClickGoBack() {
+      this.$router.push({ name: 'list_all_locale_articles' });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: var(--space-small) var(--space-normal);
+  width: 100%;
+}
+</style>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue

@@ -1,3 +1,31 @@
 <template>
-  <div>Component to list all articles in a given locale in a portal</div>
+  <div class="container">
+    <article-header
+      header-title="All Articles"
+      :count="199"
+      selected-value="Published"
+      @newArticlePage="newArticlePage"
+    />
+  </div>
 </template>
+
+<script>
+import ArticleHeader from 'dashboard/components/helpCenter/Header/ArticleHeader';
+export default {
+  components: {
+    ArticleHeader,
+  },
+  methods: {
+    newArticlePage() {
+      this.$router.push({ name: 'new_article' });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: var(--space-small) var(--space-normal);
+  width: 100%;
+}
+</style>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue

@@ -1,3 +1,46 @@
 <template>
-  <div>Component for New Article</div>
+  <div class="container">
+    <edit-article-header
+      back-button-label="All Articles"
+      draft-state="saved"
+      @back="onClickGoBack"
+    />
+    <edit-article-field @titleInput="titleInput" @contentInput="contentInput" />
+  </div>
 </template>
+
+<script>
+import EditArticleHeader from 'dashboard/components/helpCenter/Header/EditArticleHeader';
+import EditArticleField from 'dashboard/components/helpCenter/EditArticle';
+export default {
+  components: {
+    EditArticleHeader,
+    EditArticleField,
+  },
+  data() {
+    return {
+      articleTitle: '',
+      articleContent: '',
+    };
+  },
+  methods: {
+    onClickGoBack() {
+      this.$router.push({ name: 'list_all_locale_articles' });
+    },
+    titleInput(value) {
+      this.articleTitle = value;
+    },
+    contentInput(value) {
+      this.articleContent = value;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: var(--space-small) var(--space-normal);
+  width: 100%;
+  overflow: scroll;
+}
+</style>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue

@@ -1,3 +1,31 @@
 <template>
-  <div>Component to list all portals</div>
+  <div class="container">
+    <article-header
+      header-title="All Articles"
+      :count="199"
+      selected-value="Published"
+      @newArticlePage="newArticlePage"
+    />
+  </div>
 </template>
+
+<script>
+import ArticleHeader from 'dashboard/components/helpCenter/Header/ArticleHeader';
+export default {
+  components: {
+    ArticleHeader,
+  },
+  methods: {
+    newArticlePage() {
+      this.$router.push({ name: 'new_article' });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: var(--space-small) var(--space-normal);
+  width: 100%;
+}
+</style>