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);
 }