From 6368f9106a8ae5faab6020fe1dcd0a8dabf67a1d Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 27 Jul 2022 13:08:27 +0530
Subject: [PATCH] feat: Article list view page (#5122)

---
 .../dashboard/i18n/locale/en/helpCenter.json  |  9 ++
 .../helpcenter/components}/ArticleItem.vue    |  0
 .../helpcenter/components}/ArticleTable.vue   |  1 +
 .../components/HelpCenterLayout.vue           | 19 ++--
 .../stories}/ArticleItem.stories.js           |  2 +-
 .../stories}/ArticleTable.stories.js          |  2 +-
 .../dashboard/helpcenter/helpcenter.routes.js | 34 ++++---
 .../pages/articles/ListAllArticles.vue        | 90 ++++++++++++++++++-
 .../pages/articles/ListArchivedArticles.vue   |  3 -
 .../pages/articles/ListDraftArticles.vue      |  3 -
 .../pages/articles/ListMyArticles.vue         |  3 -
 .../pages/portals/ListAllPortals.vue          | 30 +------
 12 files changed, 123 insertions(+), 73 deletions(-)
 rename app/javascript/dashboard/{components/helpCenter => routes/dashboard/helpcenter/components}/ArticleItem.vue (100%)
 rename app/javascript/dashboard/{components/helpCenter => routes/dashboard/helpcenter/components}/ArticleTable.vue (99%)
 rename app/javascript/dashboard/{components/helpCenter => routes/dashboard/helpcenter/components/stories}/ArticleItem.stories.js (95%)
 rename app/javascript/dashboard/{components/helpCenter => routes/dashboard/helpcenter/components/stories}/ArticleTable.stories.js (96%)
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListArchivedArticles.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListDraftArticles.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListMyArticles.vue

diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index 278558db0..9fe1ed65c 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -9,6 +9,12 @@
         "PUBLISHED": "Published",
         "DRAFT": "Draft",
         "ARCHIVED": "Archived"
+      },
+      "TITLES": {
+        "ALL_ARTICLES": "All Articles",
+        "MINE": "My Articles",
+        "DRAFT": "Draft Articles",
+        "ARCHIVED": "Archived Articles"
       }
     },
     "EDIT_HEADER": {
@@ -21,6 +27,9 @@
       "SAVED": "Draft saved"
     },
     "TABLE": {
+      "LOADING_MESSAGE": "Loading articles...",
+      "404": "No articles matches your search 🔍",
+      "NO_ARTICLES": "There are no available articles",
       "HEADERS": {
         "TITLE": "Title",
         "CATEGORY": "Category",
diff --git a/app/javascript/dashboard/components/helpCenter/ArticleItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
similarity index 100%
rename from app/javascript/dashboard/components/helpCenter/ArticleItem.vue
rename to app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
diff --git a/app/javascript/dashboard/components/helpCenter/ArticleTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
similarity index 99%
rename from app/javascript/dashboard/components/helpCenter/ArticleTable.vue
rename to app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
index b6b0f34fe..6d397c92e 100644
--- a/app/javascript/dashboard/components/helpCenter/ArticleTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
@@ -79,6 +79,7 @@ export default {
   }
   .footer {
     padding: 0;
+    border: 0;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
index 3095af8c2..99ef53fcb 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
@@ -6,8 +6,6 @@
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
     />
-
-    <!-- TO BE REPLACED WITH HELPCENTER SIDEBAR -->
     <div class="margin-right-small">
       <help-center-sidebar
         header-title="Help Center"
@@ -16,8 +14,6 @@
         :additional-secondary-menu-items="additionalSecondaryMenuItems"
       />
     </div>
-    <!-- END: TO BE REPLACED WITH HELPCENTER SIDEBAR -->
-
     <section class="app-content columns">
       <router-view />
       <command-bar />
@@ -61,24 +57,23 @@ export default {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
     }),
-    // For testing
     accessibleMenuItems() {
       return [
         {
           icon: 'book',
           label: 'HELP_CENTER.ALL_ARTICLES',
-          key: 'helpcenter_all',
+          key: 'list_all_locale_articles',
           count: 199,
           toState: frontendURL(
             `accounts/${this.accountId}/portals/:portalSlug/:locale/articles`
           ),
           toolTip: 'All Articles',
-          toStateName: 'all_locale_articles',
+          toStateName: 'list_all_locale_articles',
         },
         {
           icon: 'pen',
           label: 'HELP_CENTER.MY_ARTICLES',
-          key: 'helpcenter_mine',
+          key: 'mine_articles',
           count: 112,
           toState: frontendURL(
             `accounts/${this.accountId}/portals/:portalSlug/:locale/articles/mine`
@@ -89,24 +84,24 @@ export default {
         {
           icon: 'draft',
           label: 'HELP_CENTER.DRAFT',
-          key: 'helpcenter_draft',
+          key: 'list_draft_articles',
           count: 32,
           toState: frontendURL(
             `accounts/${this.accountId}/portals/:portalSlug/:locale/articles/draft`
           ),
           toolTip: 'Draft',
-          toStateName: 'draft_articles',
+          toStateName: 'list_draft_articles',
         },
         {
           icon: 'archive',
           label: 'HELP_CENTER.ARCHIVED',
-          key: 'helpcenter_archive',
+          key: 'list_archived_articles',
           count: 10,
           toState: frontendURL(
             `accounts/${this.accountId}/portals/:portalSlug/:locale/articles/archived`
           ),
           toolTip: 'Archived',
-          toStateName: 'archived_articles',
+          toStateName: 'list_archived_articles',
         },
       ];
     },
diff --git a/app/javascript/dashboard/components/helpCenter/ArticleItem.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleItem.stories.js
similarity index 95%
rename from app/javascript/dashboard/components/helpCenter/ArticleItem.stories.js
rename to app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleItem.stories.js
index 18dc8295c..7f7c819e3 100644
--- a/app/javascript/dashboard/components/helpCenter/ArticleItem.stories.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleItem.stories.js
@@ -1,4 +1,4 @@
-import ArticleItemComponent from './ArticleItem.vue';
+import ArticleItemComponent from '../ArticleItem.vue';
 const STATUS_LIST = {
   published: 'published',
   draft: 'draft',
diff --git a/app/javascript/dashboard/components/helpCenter/ArticleTable.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleTable.stories.js
similarity index 96%
rename from app/javascript/dashboard/components/helpCenter/ArticleTable.stories.js
rename to app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleTable.stories.js
index f921c7eb1..7b0a692f9 100644
--- a/app/javascript/dashboard/components/helpCenter/ArticleTable.stories.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleTable.stories.js
@@ -1,4 +1,4 @@
-import ArticleTableComponent from './ArticleTable.vue';
+import ArticleTableComponent from '../ArticleTable.vue';
 import { action } from '@storybook/addon-actions';
 export default {
   title: 'Components/Help Center',
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
index 635735f55..83064278e 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
@@ -14,10 +14,7 @@ const ListCategoryArticles = () =>
   import('./pages/articles/ListCategoryArticles');
 
 const ListAllArticles = () => import('./pages/articles/ListAllArticles');
-const ListArchivedArticles = () =>
-  import('./pages/articles/ListArchivedArticles');
-const ListDraftArticles = () => import('./pages/articles/ListDraftArticles');
-const ListMyArticles = () => import('./pages/articles/ListMyArticles');
+
 const NewArticle = () => import('./pages/articles/NewArticle');
 const EditArticle = () => import('./pages/articles/EditArticle');
 
@@ -55,31 +52,32 @@ const articleRoutes = [
     roles: ['administrator', 'agent'],
     component: ListAllArticles,
   },
+  {
+    path: getPortalRoute(':portalSlug/:locale/articles/new'),
+    name: 'new_article',
+    roles: ['administrator', 'agent'],
+    component: NewArticle,
+  },
+  {
+    path: getPortalRoute(':portalSlug/:locale/articles/mine'),
+    name: 'list_mine_articles',
+    roles: ['administrator', 'agent'],
+    component: ListAllArticles,
+  },
   {
     path: getPortalRoute(':portalSlug/:locale/articles/archived'),
     name: 'list_archived_articles',
     roles: ['administrator', 'agent'],
-    component: ListArchivedArticles,
+    component: ListAllArticles,
   },
 
   {
     path: getPortalRoute(':portalSlug/:locale/articles/draft'),
     name: 'list_draft_articles',
     roles: ['administrator', 'agent'],
-    component: ListDraftArticles,
-  },
-  {
-    path: getPortalRoute(':portalSlug/:locale/articles/mine'),
-    name: 'list_mine_articles',
-    roles: ['administrator', 'agent'],
-    component: ListMyArticles,
-  },
-  {
-    path: getPortalRoute(':portalSlug/:locale/articles/new'),
-    name: 'new_article',
-    roles: ['administrator', 'agent'],
-    component: NewArticle,
+    component: ListAllArticles,
   },
+
   {
     path: getPortalRoute(':portalSlug/:locale/articles/:articleSlug'),
     name: 'edit_article',
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
index 042199e25..8cdf907e2 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
@@ -1,19 +1,96 @@
 <template>
   <div class="container">
     <article-header
-      header-title="All Articles"
-      :count="199"
+      :header-title="headerTitle"
+      :count="articleCount"
       selected-value="Published"
       @newArticlePage="newArticlePage"
     />
+    <article-table :articles="articles" :article-count="articles.length" />
+    <empty-state
+      v-if="showSearchEmptyState"
+      :title="$t('HELP_CENTER.TABLE.404')"
+    />
+    <empty-state
+      v-else-if="!isLoading && !articles.length"
+      :title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
+    />
+    <div v-if="isLoading" class="articles--loader">
+      <spinner />
+      <span>{{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}</span>
+    </div>
   </div>
 </template>
-
 <script>
+import Spinner from 'shared/components/Spinner.vue';
 import ArticleHeader from 'dashboard/components/helpCenter/Header/ArticleHeader';
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+import ArticleTable from '../../components/ArticleTable';
 export default {
   components: {
     ArticleHeader,
+    ArticleTable,
+    EmptyState,
+    Spinner,
+  },
+  data() {
+    return {
+      // Dummy data will remove once the state is implemented.
+      articles: [
+        {
+          title: 'Setup your account',
+          author: {
+            name: 'John Doe',
+          },
+          readCount: 13,
+          category: 'Getting started',
+          status: 'published',
+          updatedAt: 1657255863,
+        },
+        {
+          title: 'Docker Configuration',
+          author: {
+            name: 'Sam Manuel',
+          },
+          readCount: 13,
+          category: 'Engineering',
+          status: 'draft',
+          updatedAt: 1656658046,
+        },
+        {
+          title: 'Campaigns',
+          author: {
+            name: 'Sam Manuel',
+          },
+          readCount: 28,
+          category: 'Engineering',
+          status: 'archived',
+          updatedAt: 1657590446,
+        },
+      ],
+      articleCount: 12,
+      isLoading: false,
+    };
+  },
+  computed: {
+    showSearchEmptyState() {
+      return this.articles.length === 0;
+    },
+    articleType() {
+      return this.$route.path.split('/').pop();
+    },
+    headerTitle() {
+      switch (this.articleType) {
+        case 'mine':
+          return this.$t('HELP_CENTER.HEADER.TITLES.MINE');
+        case 'draft':
+          return this.$t('HELP_CENTER.HEADER.TITLES.DRAFT');
+        case 'archived':
+          return this.$t('HELP_CENTER.HEADER.TITLES.ARCHIVED');
+        default:
+          return this.$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES');
+      }
+    },
   },
   methods: {
     newArticlePage() {
@@ -27,5 +104,12 @@ export default {
 .container {
   padding: var(--space-small) var(--space-normal);
   width: 100%;
+  .articles--loader {
+    align-items: center;
+    display: flex;
+    font-size: var(--font-size-default);
+    justify-content: center;
+    padding: var(--space-big);
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListArchivedArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListArchivedArticles.vue
deleted file mode 100644
index 9b8b26fa1..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListArchivedArticles.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Component to list archived articles in a portal</div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListDraftArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListDraftArticles.vue
deleted file mode 100644
index c869f048a..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListDraftArticles.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Component to list all drafts articles in a portal</div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListMyArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListMyArticles.vue
deleted file mode 100644
index 1d029cd51..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListMyArticles.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>Component to list my articles in a portal</div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
index 042199e25..99f76d80a 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
@@ -1,31 +1,3 @@
 <template>
-  <div class="container">
-    <article-header
-      header-title="All Articles"
-      :count="199"
-      selected-value="Published"
-      @newArticlePage="newArticlePage"
-    />
-  </div>
+  <div>List of portals</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>