KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Opening and closing portal switch (#5126)

Browse source
This commit is contained in:
Sivin Varghese 2022-07-28 14:52:05 +05:30 committed by GitHub
parent 41df70fb96
commit ef9ea99b91
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 336 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
app/javascript/dashboard/i18n/locale/en/helpCenter.json
View file

@ -4,7 +4,18 @@
"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"
},
"TITLES": {
"ALL_ARTICLES": "All Articles",
"MINE": "My Articles",
"DRAFT": "Draft Articles",
"ARCHIVED": "Archived Articles"
}
},
"EDIT_HEADER": {
"PUBLISH_BUTTON": "Publish",
@ -27,11 +38,59 @@
"CANCEL_BUTTON_LABEL": "Cancel",
"CHOOSE_LOCALE_BUTTON": "Choose Locale"
}
}
},
"TABLE": {
"COLUMNS": {
"BY": "by"
},
"TABLE": {
"LOADING_MESSAGE": "Loading articles...",
"404": "No articles matches your search 🔍",
"NO_ARTICLES": "There are no available articles",
"HEADERS": {
"TITLE": "Title",
"CATEGORY": "Category",
"READ_COUNT": "Read count",
"STATUS": "Status",
"LAST_EDITED": "Last edited"
},
"COLUMNS": {
"BY": "by"
}
},
"EDIT_ARTICLE": {
"TITLE_PLACEHOLDER": "Article title goes here",
"CONTENT_PLACEHOLDER": "Write your article here"
},
"SIDEBAR": {
"SEARCH": {
"PLACEHOLDER": "Search for articles"
}
},
"CATEGORY": {
"ADD": {
"TITLE": "Create a category",
"SUB_TITLE": "The category will be used in the public facing portal to categorize articles.",
"PORTAL": "Portal",
"LOCALE": "Locale",
"NAME": {
"LABEL": "Name",
"PLACEHOLDER": "Category name",
"HELP_TEXT": "The category name will be used in the public facing portal to categorize articles.",
"ERROR": "Name is required"
},
"SLUG": {
"LABEL": "Slug",
"PLACEHOLDER": "Category slug for urls",
"HELP_TEXT": "app.chatwoot.com/portal/my-portal/en-US/categories/my-slug",
"ERROR": "Slug is required"
},
"DESCRIPTION": {
"LABEL": "Description",
"PLACEHOLDER": "Give a short description about the category.",
"ERROR": "Description is required"
},
"BUTTONS": {
"CREATE": "Create category",
"CANCEL": "Cancel"
}
}
}
}
}

0
app/javascript/dashboard/components/helpCenter/Header/ArticleHeader.vue → app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
View file

0
app/javascript/dashboard/components/helpCenter/Header/EditArticleHeader.vue → app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
View file

147
app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
View file

@ -12,6 +12,7 @@
sub-title="English"
:accessible-menu-items="accessibleMenuItems"
:additional-secondary-menu-items="additionalSecondaryMenuItems"
@open-popover="openPortalPopover"
/>
</div>
<section class="app-content columns">
@ -26,6 +27,11 @@
v-if="showNotificationPanel"
@close="closeNotificationPanel"
/>
<portal-popover
v-if="showPortalPopover"
:portals="portals"
@close-popover="closePortalPopover"
/>
</section>
</div>
</template>
@ -34,7 +40,8 @@ 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 PortalPopover from 'dashboard/routes/dashboard/helpcenter/components/PortalPopover';
import HelpCenterSidebar from 'dashboard/routes/dashboard/helpcenter/components/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';
@ -46,11 +53,13 @@ export default {
CommandBar,
WootKeyShortcutModal,
NotificationPanel,
PortalPopover,
},
data() {
return {
showShortcutModal: false,
showNotificationPanel: false,
showPortalPopover: false,
};
},
computed: {
@ -171,6 +180,136 @@ export default {
},
];
},
portals() {
return [
{
name: 'Chatwoot Help Center',
id: 1,
color: null,
custom_domain: 'doc',
articles_count: 123,
header_text: null,
homepage_link: null,
page_title: null,
slug: 'first_portal',
archived: false,
config: {
allowed_locales: [
{
code: 'en',
name: 'English',
articles_count: 123,
},
{
code: 'fr',
name: 'Français',
articles_count: 123,
},
{
code: 'de',
name: 'Deutsch',
articles_count: 32,
},
{
code: 'es',
name: 'Español',
articles_count: 12,
},
{
code: 'it',
name: 'Italiano',
articles_count: 8,
},
],
},
locales: [
{
name: 'English',
code: 'en',
articles_count: 12,
},
{
name: 'Español',
code: 'es',
articles_count: 42,
},
{
name: 'French',
code: 'fr',
articles_count: 29,
},
{
name: 'Italian',
code: 'it',
articles_count: 4,
},
{
name: 'German',
code: 'de',
articles_count: 66,
},
],
},
{
name: 'Chatwoot Docs',
id: 2,
color: null,
custom_domain: 'doc',
articles_count: 124,
header_text: null,
homepage_link: null,
page_title: null,
slug: 'second_portal',
archived: false,
config: {
allowed_locales: [
{
code: 'en',
name: 'English',
articles_count: 123,
},
{
code: 'fr',
name: 'Français',
articles_count: 123,
},
{
code: 'de',
name: 'Deutsch',
articles_count: 32,
},
{
code: 'es',
name: 'Español',
articles_count: 12,
},
{
code: 'it',
name: 'Italiano',
articles_count: 8,
},
],
},
locales: [
{
name: 'English',
code: 'en',
articles_count: 12,
},
{
name: 'Japanese',
code: 'jp',
articles_count: 4,
},
{
name: 'Mandarin',
code: 'CH',
articles_count: 6,
},
],
},
];
},
currentRoute() {
return ' ';
},
@ -188,6 +327,12 @@ export default {
closeNotificationPanel() {
this.showNotificationPanel = false;
},
openPortalPopover() {
this.showPortalPopover = !this.showPortalPopover;
},
closePortalPopover() {
this.showPortalPopover = false;
},
},
};
</script>

14
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="portal-popover__container">
<div v-on-clickaway="closePortalPopover" class="portal-popover__container">
<header>
<div class="actions">
<h2 class="block-title">
@ -24,7 +24,7 @@
/>
</div>
<footer>
<woot-button variant="link">
<woot-button variant="link" @click="closePortalPopover">
{{ $t('HELP_CENTER.PORTAL.POPOVER.CANCEL_BUTTON_LABEL') }}
</woot-button>
<woot-button>
@ -35,22 +35,32 @@
</template>
<script>
import { mixin as clickaway } from 'vue-clickaway';
import PortalSwitch from './PortalSwitch.vue';
export default {
components: {
PortalSwitch,
},
mixins: [clickaway],
props: {
portals: {
type: Array,
default: () => [],
},
},
methods: {
closePortalPopover() {
this.$emit('close-popover');
},
},
};
</script>
<style lang="scss" scoped>
.portal-popover__container {
position: absolute;
overflow: scroll;
max-height: 96vh;
padding: var(--space-normal);
background-color: var(--white);
border-radius: var(--border-radius-normal);

12
app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.vue → app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
View file

@ -4,26 +4,23 @@
:thumbnail-src="thumbnailSrc"
:header-title="headerTitle"
:sub-title="subTitle"
@open-popover="openPortalPopover"
/>
<sidebar-search @input="onSearch" />
<!-- <transition-group name="menu-list" tag="ul" class="menu vertical"> -->
<div name="menu-list" tag="ul" class="menu vertical">
<transition-group name="menu-list" tag="ul" class="menu vertical">
<secondary-nav-item
v-for="menuItem in accessibleMenuItems"
:key="menuItem.toState"
:menu-item="menuItem"
:is-help-center-sidebar="true"
/>
</div>
<div name="menu-list" tag="ul" class="menu vertical">
<secondary-nav-item
v-for="menuItem in additionalSecondaryMenuItems"
:key="menuItem.key"
:menu-item="menuItem"
:is-help-center-sidebar="true"
/>
</div>
<!-- </transition-group> -->
</transition-group>
</div>
</template>
@ -67,6 +64,9 @@ export default {
onSearch(value) {
this.$emit('input', value);
},
openPortalPopover() {
this.$emit('open-popover');
},
},
};
</script>

37
app/javascript/dashboard/components/helpCenter/Sidebar/SidebarHeader.vue → app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
View file

@ -13,18 +13,29 @@
</div>
</div>
<div class="header-right--side">
<fluent-icon
icon="arrow-up-right"
size="28px"
class="pop-out--icon"
<woot-button
variant="link"
color-scheme="secondary"
@click="popOutHelpCenter"
/>
<fluent-icon
icon="arrow-swap"
size="28px"
class="portal-switch--icon"
@click="openSwitchPortalModal"
/>
>
<fluent-icon
icon="arrow-up-right"
size="28px"
class="pop-out--icon"
@click="popOutHelpCenter"
/>
</woot-button>
<woot-button
variant="link"
color-scheme="secondary"
@click="openPortalPopover"
>
<fluent-icon
icon="arrow-swap"
size="28px"
class="portal-switch--icon"
/>
</woot-button>
</div>
</div>
</template>
@ -53,8 +64,8 @@ export default {
popOutHelpCenter() {
this.$emit('pop-out');
},
openSwitchPortalModal() {
this.$emit('open');
openPortalPopover() {
this.$emit('open-popover');
},
},
};

0
app/javascript/dashboard/components/helpCenter/Sidebar/SidebarSearch.vue → app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarSearch.vue
View file

2
app/javascript/dashboard/components/helpCenter/Header/ArticleHeader.stories.js → app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleHeader.stories.js
View file

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import ArticleHeader from './ArticleHeader';
import ArticleHeader from '../Header/ArticleHeader';
export default {
title: 'Components/Help Center/Header',

2
app/javascript/dashboard/components/helpCenter/Header/EditArticleHeader.stories.js → app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/EditArticleHeader.stories.js
View file

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import EditArticleHeader from './EditArticleHeader';
import EditArticleHeader from '../Header/EditArticleHeader';
export default {
title: 'Components/Help Center/Header',

78
app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalPopover.stories.js
View file

@ -26,7 +26,44 @@ Primary.args = {
portals: [
{
name: 'Chatwoot Help Center',
articles_count: 124,
id: 1,
color: null,
custom_domain: 'doc',
articles_count: 123,
header_text: null,
homepage_link: null,
page_title: null,
slug: 'first_portal',
archived: false,
config: {
allowed_locales: [
{
code: 'en',
name: 'English',
articles_count: 123,
},
{
code: 'fr',
name: 'Français',
articles_count: 123,
},
{
code: 'de',
name: 'Deutsch',
articles_count: 32,
},
{
code: 'es',
name: 'Español',
articles_count: 12,
},
{
code: 'it',
name: 'Italiano',
articles_count: 8,
},
],
},
locales: [
{
name: 'English',
@ -57,7 +94,44 @@ Primary.args = {
},
{
name: 'Chatwoot Docs',
articles_count: 16,
id: 2,
color: null,
custom_domain: 'doc',
articles_count: 124,
header_text: null,
homepage_link: null,
page_title: null,
slug: 'second_portal',
archived: false,
config: {
allowed_locales: [
{
code: 'en',
name: 'English',
articles_count: 123,
},
{
code: 'fr',
name: 'Français',
articles_count: 123,
},
{
code: 'de',
name: 'Deutsch',
articles_count: 32,
},
{
code: 'es',
name: 'Español',
articles_count: 12,
},
{
code: 'it',
name: 'Italiano',
articles_count: 8,
},
],
},
locales: [
{
name: 'English',

2
app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.stories.js → app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/Sidebar.stories.js
View file

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import Sidebar from './Sidebar';
import Sidebar from '../Sidebar/Sidebar';
import Thumbnail from 'dashboard/components/widgets/Thumbnail';
export default {

2
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
View file

@ -10,7 +10,7 @@
</template>
<script>
import EditArticleHeader from 'dashboard/components/helpCenter/Header/EditArticleHeader';
import EditArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader';
import EditArticleField from 'dashboard/components/helpCenter/EditArticle';
export default {
components: {

4
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
View file

@ -23,8 +23,8 @@
</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 ArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader';
import EmptyState from 'dashboard/components/widgets/EmptyState';
import ArticleTable from '../../components/ArticleTable';
export default {
components: {

2
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
View file

@ -10,7 +10,7 @@
</template>
<script>
import EditArticleHeader from 'dashboard/components/helpCenter/Header/EditArticleHeader';
import EditArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader';
import EditArticleField from 'dashboard/components/helpCenter/EditArticle';
export default {
components: {