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

feat: Creates view for edit/new article page (#5061)

Browse Source 
* 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
2022-07-26 11:39:53 +05:30
committed by GitHub
parent 2082409657
commit 92bb84127b
11 changed files with 310 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/dashboard/components/helpCenter/EditArticle.vue
View File

@@ -7,15 +7,16 @@
:placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
@focus="onFocus"
@blur="onBlur"
@input="onTitleInput"
/>
<woot-message-editor
v-model="articleContent"
class="article-content"
:placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
:is-format-mode="true"
:min-height="24"
@focus="onFocus"
@blur="onBlur"
@input="onContentInput"
/>
</div>
</template>
@@ -49,6 +50,12 @@ export default {
onBlur() {
this.$emit('blur');
},
onTitleInput() {
this.$emit('titleInput', this.articleTitle);
},
onContentInput() {
this.$emit('contentInput', this.articleContent);
},
},
};
</script>

15
app/javascript/dashboard/components/helpCenter/Header/ArticleHeader.vue
View File

@@ -42,7 +42,7 @@
size="small"
icon="send-clock"
>
{{ 'Status' }}
{{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.PUBLISHED') }}
</woot-button>
</woot-dropdown-item>
<woot-dropdown-item>
@@ -52,7 +52,7 @@
size="small"
icon="dual-screen-clock"
>
{{ 'Created' }}
{{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.DRAFT') }}
</woot-button>
</woot-dropdown-item>
<woot-dropdown-item>
@@ -62,7 +62,7 @@
size="small"
icon="calendar-clock"
>
{{ 'Last edited' }}
{{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.ARCHIVED') }}
</woot-button>
</woot-dropdown-item>
</woot-dropdown-menu>
@@ -79,6 +79,7 @@
class-names="article--buttons"
size="small"
color-scheme="primary"
@click="onClickNewArticlePage"
>
{{ $t('HELP_CENTER.HEADER.NEW_BUTTON') }}
</woot-button>
@@ -130,6 +131,9 @@ export default {
this.$emit('close');
this.showSortByDropdown = false;
},
onClickNewArticlePage() {
this.$emit('newArticlePage');
},
},
};
</script>
@@ -139,7 +143,6 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-small) var(--space-normal);
width: 100%;
height: var(--space-larger);
}
@@ -154,6 +157,10 @@ export default {
.count-view {
margin-left: var(--space-smaller);
}
.dropdown-pane--open {
top: var(--space-larger);
right: 14.8rem;
}
.selected-value {
display: inline-flex;
margin-left: var(--space-smaller);

6
app/javascript/dashboard/components/helpCenter/Header/EditArticleHeader.vue
View File

@@ -3,7 +3,7 @@
<div class="header-left--wrap">
<woot-button
icon="chevron-left"
class-names="article--buttons"
class-names="article-back-buttons"
variant="clear"
color-scheme="primary"
@click="onClickGoBack"
@@ -127,7 +127,6 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-small) var(--space-normal);
width: 100%;
height: var(--space-larger);
}
@@ -139,6 +138,9 @@ export default {
display: flex;
align-items: center;
}
.article-back-buttons {
padding-left: 0;
}
.article--buttons {
margin-left: var(--space-smaller);
}

2
app/javascript/dashboard/components/helpCenter/Sidebar/SidebarHeader.vue
View File

@@ -66,7 +66,7 @@ export default {
height: var(--space-jumbo);
align-items: center;
justify-content: space-between;
padding: var(--space-normal) 0;
padding: var(--space-small) 0 var(--space-normal) 0;
border-bottom: 1px solid var(--color-border-light);
}

12
app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
View File

@@ -134,6 +134,12 @@ export default {
this.menuItem.toStateName === 'settings_applications'
);
},
isAllArticles() {
return (
this.$store.state.route.name === 'list_all_locale_articles' &&
this.menuItem.toStateName === 'all_locale_articles'
);
},
computedClass() {
// If active Inbox is present
@@ -151,6 +157,12 @@ export default {
}
return ' ';
}
if (this.isHelpCenterSidebar) {
if (this.isAllArticles) {
return 'is-active';
}
return ' ';
}
return '';
},
},

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

@@ -4,7 +4,12 @@
"FILTER": "Filter by",
"SORT": "Sort by",
"SETTINGS_BUTTON": "Settings",
"NEW_BUTTON": "New Article"
"NEW_BUTTON": "New Article",
"DROPDOWN_OPTIONS": {
"PUBLISHED": "Published",
"DRAFT": "Draft",
"ARCHIVED": "Archived"
}
},
"EDIT_HEADER": {
"PUBLISH_BUTTON": "Publish",

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

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

38
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
View File

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

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

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

45
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
View File

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

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

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