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

Merge branch 'feat/articles-store-integration' of https://github.com/chatwoot/chatwoot into feat/articles-store-integration

Browse source
This commit is contained in:
Muhsin Keloth 2022-07-28 15:49:13 +05:30
commit 8cfee73361
14 changed files with 271 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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: {
@ -177,6 +186,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 ' ';
},
@ -194,6 +333,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

@ -27,8 +27,8 @@
import { mapGetters } from 'vuex';
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: {