85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
|
<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>
|