LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Article list view page (#5122)

Browse Source
This commit is contained in:
Muhsin Keloth
2022-07-27 13:08:27 +05:30
committed by GitHub
parent 6295f5fd61
commit 6368f9106a
12 changed files with 123 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/dashboard/i18n/locale/en/helpCenter.json
View File

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

0
app/javascript/dashboard/components/helpCenter/ArticleItem.vue → app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
View File

1
app/javascript/dashboard/components/helpCenter/ArticleTable.vue → app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
View File

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

19
app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
View File

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

2
app/javascript/dashboard/components/helpCenter/ArticleItem.stories.js → app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleItem.stories.js
View File

@@ -1,4 +1,4 @@
import ArticleItemComponent from './ArticleItem.vue';
import ArticleItemComponent from '../ArticleItem.vue';
const STATUS_LIST = {
published: 'published',
draft: 'draft',

2
app/javascript/dashboard/components/helpCenter/ArticleTable.stories.js → app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleTable.stories.js
View File

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

34
app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
View File

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

90
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
View File

@@ -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>

3
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListArchivedArticles.vue
View File

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

3
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListDraftArticles.vue
View File

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

3
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListMyArticles.vue
View File

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

30
app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
View File

@@ -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>