feat: Article table component (#5018)
This commit is contained in:
Muhsin Keloth
GitHub
parent
bba3475083
commit
21a8b79aa5
4 changed files with 202 additions and 26 deletions
|
|
@ -1,11 +1,12 @@
|
|||
<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>
|
||||
<router-link class="article-name" :to="articlePath">
|
||||
{{ title }}
|
||||
</router-link>
|
||||
</h6>
|
||||
<div class="author">
|
||||
<span class="by">{{ $t('HELP_CENTER.TABLE.COLUMNS.BY') }}</span>
|
||||
|
|
@ -17,13 +18,13 @@
|
|||
<td>{{ category }}</td>
|
||||
<td>{{ readCount }}</td>
|
||||
<td>
|
||||
<Label :title="status" color-scheme="success" />
|
||||
<Label :title="status" :color-scheme="labelColor" />
|
||||
</td>
|
||||
<td>{{ lastUpdatedAt }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</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;
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
};
|
||||
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue