feat: Article list view page (#5122)

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",

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

@@ -79,6 +79,7 @@ export default {
   }
   .footer {
     padding: 0;
+    border: 0;
   }
 }
 </style>

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',
         },
       ];
     },

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',

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',

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,
+    component: ListAllArticles,
-  },
-  {
-    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,
   },
+
   {
     path: getPortalRoute(':portalSlug/:locale/articles/:articleSlug'),
     name: 'edit_article',

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

@@ -1,19 +1,96 @@
 <template>
   <div class="container">
     <article-header
-      header-title="All Articles"
+      :header-title="headerTitle"
-      :count="199"
+      :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>

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

@@ -1,3 +0,0 @@
-<template>
-  <div>Component to list archived articles in a portal</div>
-</template>

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

@@ -1,3 +0,0 @@
-<template>
-  <div>Component to list all drafts articles in a portal</div>
-</template>

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

@@ -1,3 +0,0 @@
-<template>
-  <div>Component to list my articles in a portal</div>
-</template>

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

@@ -1,31 +1,3 @@
 <template>
-  <div class="container">
+  <div>List of portals</div>
-    <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>