feat: Adds the ability to create a new article (#5255)

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

@@ -51,12 +51,14 @@ export default {
       isUpdating: false,
       isSaved: false,
       showArticleSettings: false,
+      alertMessage: '',
     };
   },
   computed: {
     ...mapGetters({
       isFetching: 'articles/isFetching',
       articles: 'articles/articles',
+      selectedPortal: 'portals/getSelectedPortal',
     }),
     article() {
       return this.$store.getters['articles/articleById'](this.articleId);
@@ -93,6 +95,7 @@ export default {
         this.alertMessage =
           error?.message ||
           this.$t('HELP_CENTER.EDIT_ARTICLE.API.ERROR_MESSAGE');
+        this.showAlert(this.alertMessage);
       } finally {
         setTimeout(() => {
           this.isUpdating = false;

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

@@ -1,22 +1,27 @@
 <template>
-  <div class="container">
+  <div class="article-container">
     <edit-article-header
-      back-button-label="All Articles"
+      :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
       draft-state="saved"
       @back="onClickGoBack"
+      @save-article="createNewArticle"
     />
-    <article-editor @titleInput="titleInput" @contentInput="contentInput" />
+    <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';
 export default {
   components: {
     EditArticleHeader,
     ArticleEditor,
   },
+  mixins: [portalMixin, alertMixin],
   data() {
     return {
       articleTitle: '',
@@ -24,21 +29,55 @@ export default {
       showArticleSettings: false,
     };
   },
+  computed: {
+    ...mapGetters({
+      selectedPortal: 'portals/getSelectedPortal',
+      currentUserID: 'getCurrentUserID',
+      categories: 'categories/allCategories',
+    }),
+    article() {
+      return { title: this.articleTitle, content: this.articleContent };
+    },
+    selectedPortalSlug() {
+      return this.portalSlug || this.selectedPortal?.slug;
+    },
+    categoryId() {
+      return this.categories.length ? this.categories[0].id : null;
+    },
+  },
   methods: {
     onClickGoBack() {
       this.$router.push({ name: 'list_all_locale_articles' });
     },
-    titleInput(value) {
-      this.articleTitle = value;
-    },
-    contentInput(value) {
-      this.articleContent = value;
-    },
-    openArticleSettings() {
-      this.showArticleSettings = true;
-    },
-    closeArticleSettings() {
-      this.showArticleSettings = false;
+    async createNewArticle({ ...values }) {
+      const { title, content } = values;
+      if (title) this.articleTitle = title;
+      if (content) this.articleContent = content;
+      if (this.articleTitle && this.articleContent) {
+        try {
+          const articleId = await this.$store.dispatch('articles/create', {
+            portalSlug: this.selectedPortalSlug,
+            content: this.articleContent,
+            title: this.articleTitle,
+            author_id: this.currentUserID,
+            // TODO: Change to un categorized later when API supports
+            category_id: this.categoryId,
+          });
+          this.$router.push({
+            name: 'edit_article',
+            params: {
+              articleSlug: articleId,
+              portalSlug: this.selectedPortalSlug,
+              locale: this.locale,
+            },
+          });
+        } catch (error) {
+          this.alertMessage =
+            error?.message ||
+            this.$t('HELP_CENTER.CREATE_ARTICLE.API.ERROR_MESSAGE');
+          this.showAlert(this.alertMessage);
+        }
+      }
     },
   },
 };
@@ -46,7 +85,6 @@ export default {
 
 <style lang="scss" scoped>
 .article-container {
-  display: flex;
   padding: var(--space-small) var(--space-normal);
   width: 100%;
   flex: 1;