feat: Creates view for edit/new article page (#5061)
* feat: Creates view for edit/new article page * chore: Minor fixes * chore: Minor fixes * Update HelpCenterLayout.vue * chore: Minor fixes * chore: Review fixes Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese
@@ -9,7 +9,12 @@
|
||||
|
||||
<!-- TO BE REPLACED WITH HELPCENTER SIDEBAR -->
|
||||
<div class="margin-right-small">
|
||||
{{ `Place the help center sidebar here. ` }}
|
||||
<help-center-sidebar
|
||||
header-title="Help Center"
|
||||
sub-title="English"
|
||||
:accessible-menu-items="accessibleMenuItems"
|
||||
:additional-secondary-menu-items="additionalSecondaryMenuItems"
|
||||
/>
|
||||
</div>
|
||||
<!-- END: TO BE REPLACED WITH HELPCENTER SIDEBAR -->
|
||||
|
||||
@@ -29,7 +34,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
import { frontendURL } from '../../../../helper/URLHelper';
|
||||
import Sidebar from 'dashboard/components/layout/Sidebar';
|
||||
import HelpCenterSidebar from 'dashboard/components/helpCenter/Sidebar/Sidebar';
|
||||
import CommandBar from 'dashboard/routes/dashboard/commands/commandbar.vue';
|
||||
import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal';
|
||||
import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
|
||||
@@ -37,6 +46,7 @@ import NotificationPanel from 'dashboard/routes/dashboard/notifications/componen
|
||||
export default {
|
||||
components: {
|
||||
Sidebar,
|
||||
HelpCenterSidebar,
|
||||
CommandBar,
|
||||
WootKeyShortcutModal,
|
||||
NotificationPanel,
|
||||
@@ -48,6 +58,124 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
accountId: 'getCurrentAccountId',
|
||||
}),
|
||||
// For testing
|
||||
accessibleMenuItems() {
|
||||
return [
|
||||
{
|
||||
icon: 'book',
|
||||
label: 'HELP_CENTER.ALL_ARTICLES',
|
||||
key: 'helpcenter_all',
|
||||
count: 199,
|
||||
toState: frontendURL(
|
||||
`accounts/${this.accountId}/portals/:portalSlug/:locale/articles`
|
||||
),
|
||||
toolTip: 'All Articles',
|
||||
toStateName: 'all_locale_articles',
|
||||
},
|
||||
{
|
||||
icon: 'pen',
|
||||
label: 'HELP_CENTER.MY_ARTICLES',
|
||||
key: 'helpcenter_mine',
|
||||
count: 112,
|
||||
toState: frontendURL(
|
||||
`accounts/${this.accountId}/portals/:portalSlug/:locale/articles/mine`
|
||||
),
|
||||
toolTip: 'My articles',
|
||||
toStateName: 'mine_articles',
|
||||
},
|
||||
{
|
||||
icon: 'draft',
|
||||
label: 'HELP_CENTER.DRAFT',
|
||||
key: 'helpcenter_draft',
|
||||
count: 32,
|
||||
toState: frontendURL(
|
||||
`accounts/${this.accountId}/portals/:portalSlug/:locale/articles/draft`
|
||||
),
|
||||
toolTip: 'Draft',
|
||||
toStateName: 'draft_articles',
|
||||
},
|
||||
{
|
||||
icon: 'archive',
|
||||
label: 'HELP_CENTER.ARCHIVED',
|
||||
key: 'helpcenter_archive',
|
||||
count: 10,
|
||||
toState: frontendURL(
|
||||
`accounts/${this.accountId}/portals/:portalSlug/:locale/articles/archived`
|
||||
),
|
||||
toolTip: 'Archived',
|
||||
toStateName: 'archived_articles',
|
||||
},
|
||||
];
|
||||
},
|
||||
additionalSecondaryMenuItems() {
|
||||
return [
|
||||
{
|
||||
icon: 'folder',
|
||||
label: 'HELP_CENTER.CATEGORY',
|
||||
hasSubMenu: true,
|
||||
key: 'category',
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
label: 'Getting started',
|
||||
count: 12,
|
||||
truncateLabel: true,
|
||||
toState: frontendURL(
|
||||
`accounts/${this.accountId}/portals/:portalSlug/:locale/categories/getting-started`
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: 'Channel',
|
||||
count: 19,
|
||||
truncateLabel: true,
|
||||
toState: frontendURL(
|
||||
`accounts/${this.accountId}/portals/:portalSlug/:locale/categories/channel`
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: 'Feature',
|
||||
count: 24,
|
||||
truncateLabel: true,
|
||||
toState: frontendURL(
|
||||
`accounts/${this.accountId}/portals/:portalSlug/:locale/categories/feature`
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: 'Advanced',
|
||||
count: 8,
|
||||
truncateLabel: true,
|
||||
toState: frontendURL(
|
||||
`accounts/${this.accountId}/portals/:portalSlug/:locale/categories/advanced`
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: 'Mobile app',
|
||||
count: 3,
|
||||
truncateLabel: true,
|
||||
toState: frontendURL(
|
||||
`accounts/${this.accountId}/portals/:portalSlug/:locale/categories/mobile-app`
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: 'Others',
|
||||
count: 39,
|
||||
truncateLabel: true,
|
||||
toState: frontendURL(
|
||||
`accounts/${this.accountId}/portals/:portalSlug/:locale/categories/others`
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
},
|
||||
currentRoute() {
|
||||
return ' ';
|
||||
},
|
||||
|
||||
@@ -1,3 +1,39 @@
|
||||
<template>
|
||||
<div>Component to edit an article</div>
|
||||
<div class="container">
|
||||
<edit-article-header
|
||||
back-button-label="All Articles"
|
||||
draft-state="saved"
|
||||
@back="onClickGoBack"
|
||||
/>
|
||||
<edit-article-field :article="article" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EditArticleHeader from 'dashboard/components/helpCenter/Header/EditArticleHeader';
|
||||
import EditArticleField from 'dashboard/components/helpCenter/EditArticle';
|
||||
export default {
|
||||
components: {
|
||||
EditArticleHeader,
|
||||
EditArticleField,
|
||||
},
|
||||
props: {
|
||||
article: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClickGoBack() {
|
||||
this.$router.push({ name: 'list_all_locale_articles' });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: var(--space-small) var(--space-normal);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,31 @@
|
||||
<template>
|
||||
<div>Component to list all articles in a given locale in a portal</div>
|
||||
<div class="container">
|
||||
<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>
|
||||
|
||||
@@ -1,3 +1,46 @@
|
||||
<template>
|
||||
<div>Component for New Article</div>
|
||||
<div class="container">
|
||||
<edit-article-header
|
||||
back-button-label="All Articles"
|
||||
draft-state="saved"
|
||||
@back="onClickGoBack"
|
||||
/>
|
||||
<edit-article-field @titleInput="titleInput" @contentInput="contentInput" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EditArticleHeader from 'dashboard/components/helpCenter/Header/EditArticleHeader';
|
||||
import EditArticleField from 'dashboard/components/helpCenter/EditArticle';
|
||||
export default {
|
||||
components: {
|
||||
EditArticleHeader,
|
||||
EditArticleField,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
articleTitle: '',
|
||||
articleContent: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClickGoBack() {
|
||||
this.$router.push({ name: 'list_all_locale_articles' });
|
||||
},
|
||||
titleInput(value) {
|
||||
this.articleTitle = value;
|
||||
},
|
||||
contentInput(value) {
|
||||
this.articleContent = value;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding: var(--space-small) var(--space-normal);
|
||||
width: 100%;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,3 +1,31 @@
|
||||
<template>
|
||||
<div>Component to list all portals</div>
|
||||
<div class="container">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user