feat: Add the ability to delete/archive articles (#5319)

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

@@ -10,7 +10,7 @@
           color-scheme="secondary"
           icon="settings"
           size="small"
-          @click="openPortalPage"
+          @click="openPortalArticles"
         >
           {{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }}
         </woot-button>
@@ -62,10 +62,16 @@ export default {
     closePortalPopover() {
       this.$emit('close-popover');
     },
-    openPortalPage() {
+    openPortalArticles({ slug, locale }) {
       this.$emit('close-popover');
+      const portal = this.portals.find(p => p.slug === slug);
+      this.$store.dispatch('portals/setPortalId', portal.id);
       this.$router.push({
-        name: 'list_all_portals',
+        name: 'list_all_locale_articles',
+        params: {
+          portalSlug: slug,
+          locale: locale,
+        },
       });
     },
   },

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

@@ -127,7 +127,7 @@ export default {
   props: {
     article: {
       type: Object,
-      required: true,
+      default: () => ({}),
     },
   },
   data() {

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

@@ -27,6 +27,17 @@
       v-if="showArticleSettings"
       :article="article"
       @save-article="saveArticle"
+      @delete-article="openDeletePopup"
+      @archive-article="archiveArticle"
+    />
+    <woot-delete-modal
+      :show.sync="showDeleteConfirmationPopup"
+      :on-close="closeDeletePopup"
+      :on-confirm="confirmDeletion"
+      :title="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.TITLE')"
+      :message="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.MESSAGE')"
+      :confirm-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.YES')"
+      :reject-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.NO')"
     />
   </div>
 </template>
@@ -52,6 +63,7 @@ export default {
       isSaved: false,
       showArticleSettings: false,
       alertMessage: '',
+      showDeleteConfirmationPopup: false,
     };
   },
   computed: {
@@ -82,6 +94,16 @@ export default {
         portalSlug: this.selectedPortalSlug,
       });
     },
+    openDeletePopup() {
+      this.showDeleteConfirmationPopup = true;
+    },
+    closeDeletePopup() {
+      this.showDeleteConfirmationPopup = false;
+    },
+    confirmDeletion() {
+      this.closeDeletePopup();
+      this.deleteArticle();
+    },
     async saveArticle({ ...values }) {
       this.isUpdating = true;
       try {
@@ -92,8 +114,7 @@ export default {
         });
       } catch (error) {
         this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.EDIT_ARTICLE.API.ERROR_MESSAGE');
+          error?.message || this.$t('HELP_CENTER.EDIT_ARTICLE.API.ERROR');
         this.showAlert(this.alertMessage);
       } finally {
         setTimeout(() => {
@@ -102,6 +123,45 @@ export default {
         }, 1500);
       }
     },
+    async deleteArticle() {
+      try {
+        await this.$store.dispatch('articles/delete', {
+          portalSlug: this.selectedPortalSlug,
+          articleId: this.articleId,
+        });
+        this.alertMessage = this.$t(
+          'HELP_CENTER.DELETE_ARTICLE.API.SUCCESS_MESSAGE'
+        );
+        this.$router.push({
+          name: 'list_all_locale_articles',
+          params: {
+            portalSlug: this.selectedPortalSlug,
+            locale: this.locale,
+          },
+        });
+      } catch (error) {
+        this.alertMessage =
+          error?.message ||
+          this.$t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE');
+      } finally {
+        this.showAlert(this.alertMessage);
+      }
+    },
+    async archiveArticle() {
+      try {
+        await this.$store.dispatch('articles/update', {
+          portalSlug: this.selectedPortalSlug,
+          articleId: this.articleId,
+          status: 2,
+        });
+        this.alertMessage = this.$t('HELP_CENTER.ARCHIVE_ARTICLE.API.SUCCESS');
+      } catch (error) {
+        this.alertMessage =
+          error?.message || this.$t('HELP_CENTER.ARCHIVE_ARTICLE.API.ERROR');
+      } finally {
+        this.showAlert(this.alertMessage);
+      }
+    },
     openArticleSettings() {
       this.showArticleSettings = true;
     },