feat: Article table component (#5018)

app/javascript/dashboard/components/helpCenter/ArticleItem.vue

@@ -1,29 +1,30 @@
 <template>
-  <tbody>
-    <tr>
-      <td>
-        <div class="row--article-block">
-          <div class="article-block">
-            <h6 class="sub-block-title text-truncate">
-              <router-link class="article-name"> {{ title }} </router-link>
-            </h6>
-            <div class="author">
-              <span class="by">{{ $t('HELP_CENTER.TABLE.COLUMNS.BY') }}</span>
-              <span class="name">{{ articleAuthorName }}</span>
-            </div>
+  <tr>
+    <td>
+      <div class="row--article-block">
+        <div class="article-block">
+          <h6 class="sub-block-title text-truncate">
+            <router-link class="article-name" :to="articlePath">
+              {{ title }}
+            </router-link>
+          </h6>
+          <div class="author">
+            <span class="by">{{ $t('HELP_CENTER.TABLE.COLUMNS.BY') }}</span>
+            <span class="name">{{ articleAuthorName }}</span>
           </div>
         </div>
-      </td>
-      <td>{{ category }}</td>
-      <td>{{ readCount }}</td>
-      <td>
-        <Label :title="status" color-scheme="success" />
-      </td>
-      <td>{{ lastUpdatedAt }}</td>
-    </tr>
-  </tbody>
+      </div>
+    </td>
+    <td>{{ category }}</td>
+    <td>{{ readCount }}</td>
+    <td>
+      <Label :title="status" :color-scheme="labelColor" />
+    </td>
+    <td>{{ lastUpdatedAt }}</td>
+  </tr>
 </template>
 <script>
+import { frontendURL } from 'dashboard/helper/URLHelper';
 import Label from 'dashboard/components/ui/Label';
 import timeMixin from 'dashboard/mixins/time';
 export default {
@@ -31,6 +32,7 @@ export default {
     Label,
   },
   mixins: [timeMixin],
+
   props: {
     title: {
       type: String,
@@ -52,13 +54,14 @@ export default {
     status: {
       type: String,
       default: 'draft',
-      values: ['archived', 'draft', 'archived'],
+      values: ['archived', 'draft', 'published'],
     },
     updatedAt: {
       type: Number,
       default: 0,
     },
   },
+
   computed: {
     lastUpdatedAt() {
       return this.dynamicTime(this.updatedAt);
@@ -66,19 +69,29 @@ export default {
     articleAuthorName() {
       return this.author.name;
     },
+    labelColor() {
+      switch (this.status) {
+        case 'archived':
+          return 'secondary';
+        case 'draft':
+          return 'warning';
+        default:
+          return 'success';
+      }
+    },
+    articlePath() {
+      return frontendURL(`accounts/${this.accountId}/hc/articles/${this.id}`);
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-tbody {
-  width: 100%;
-  display: table;
-}
 td {
   font-weight: var(--font-weight-normal);
   color: var(--s-700);
   font-size: var(--font-size-mini);
+  padding-left: 0;
 }
 .row--article-block {
   align-items: center;

app/javascript/dashboard/components/helpCenter/ArticleTable.stories.js

@@ -0,0 +1,72 @@
+import ArticleTableComponent from './ArticleTable.vue';
+import { action } from '@storybook/addon-actions';
+export default {
+  title: 'Components/Help Center',
+  component: ArticleTableComponent,
+  argTypes: {
+    articles: {
+      defaultValue: [],
+      control: {
+        type: 'array',
+      },
+    },
+    articleCount: {
+      defaultValue: 10,
+      control: {
+        type: 'number',
+      },
+    },
+    currentPage: {
+      defaultValue: 1,
+      control: {
+        type: 'number',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ArticleTableComponent },
+  template:
+    '<article-table-component @onPageChange="onPageChange" v-bind="$props" ></article-table-component>',
+});
+
+export const ArticleTable = Template.bind({});
+ArticleTable.args = {
+  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: 10,
+  currentPage: 1,
+  onPageChange: action('onPageChange'),
+};

app/javascript/dashboard/components/helpCenter/ArticleTable.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="article-container">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">{{ $t('HELP_CENTER.TABLE.HEADERS.TITLE') }}</th>
+          <th scope="col">{{ $t('HELP_CENTER.TABLE.HEADERS.CATEGORY') }}</th>
+          <th scope="col">{{ $t('HELP_CENTER.TABLE.HEADERS.READ_COUNT') }}</th>
+          <th scope="col">{{ $t('HELP_CENTER.TABLE.HEADERS.STATUS') }}</th>
+          <th scope="col">{{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}</th>
+        </tr>
+      </thead>
+      <tr>
+        <td colspan="100%" class="horizontal-line" />
+      </tr>
+      <tbody>
+        <ArticleItem
+          v-for="article in articles"
+          :key="article.id"
+          :title="article.title"
+          :author="article.author"
+          :category="article.category"
+          :read-count="article.readCount"
+          :status="article.status"
+          :updated-at="article.updatedAt"
+        />
+      </tbody>
+    </table>
+    <table-footer
+      :on-page-change="onPageChange"
+      :current-page="Number(currentPage)"
+      :total-count="articleCount"
+    />
+  </div>
+</template>
+
+<script>
+import ArticleItem from './ArticleItem.vue';
+import TableFooter from 'dashboard/components/widgets/TableFooter';
+export default {
+  components: {
+    ArticleItem,
+    TableFooter,
+  },
+  props: {
+    articles: {
+      type: Array,
+      default: () => {},
+    },
+    articleCount: {
+      type: Number,
+      default: 0,
+    },
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+  },
+  methods: {
+    onPageChange() {
+      this.$emit('onPageChange');
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.article-container {
+  width: 100%;
+
+  table thead th {
+    font-weight: var(--font-weight-bold);
+    text-transform: capitalize;
+    color: var(--s-700);
+    font-size: var(--font-size-small);
+    padding-left: 0;
+  }
+  .horizontal-line {
+    border-bottom: 1px solid var(--color-border);
+  }
+  .footer {
+    padding: 0;
+  }
+}
+</style>

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -16,6 +16,13 @@
       "SAVED": "Draft saved"
     },
     "TABLE": {
+      "HEADERS": {
+        "TITLE": "Title",
+        "CATEGORY": "Category",
+        "READ_COUNT": "Read count",
+        "STATUS": "Status",
+        "LAST_EDITED": "Last edited"
+      },
       "COLUMNS": {
         "BY": "by"
       }