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

feat: Component for listing the portal (#5146)

Browse source
This commit is contained in:
Sivin Varghese 2022-08-02 20:03:51 +05:30 committed by GitHub
parent 5735a8e377
commit 11fe3f071e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 815 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -27,16 +27,51 @@
"SAVED": "Draft saved"
},
"PORTAL": {
"HEADER": "Portals",
"NEW_BUTTON": "New Portal",
"ACTIVE_BADGE": "active",
"CHOOSE_LOCALE_LABEL": "Choose a locale",
"ARTICLES_LABEL": "articles",
"ADD_NEW_LOCALE": "Add a new locale",
"POPOVER": {
"TITLE": "Portals",
"NEW_PORTAL_LINK": "New Portal",
"PORTAL_SETTINGS": "Portal settings",
"SUBTITLE": "You have multiple portals and can have different locales for each portal.",
"CANCEL_BUTTON_LABEL": "Cancel",
"CHOOSE_LOCALE_BUTTON": "Choose Locale"
},
"PORTAL_SETTINGS": {
"LIST_ITEM": {
"HEADER": {
"COUNT_LABEL": "articles",
"ADD": "Add locale",
"VISIT": "Visit site",
"SETTINGS": "Settings"
},
"PORTAL_CONFIG": {
"TITLE": "Portal Configurations",
"ITEMS": {
"NAME": "Name",
"DOMAIN": "Custom domain",
"SLUG": "Slug",
"TITLE": "Portal title",
"THEME": "Theme color",
"SUB_TEXT": "Portal sub text"
}
},
"AVAILABLE_LOCALES": {
"TITLE": "Available locales",
"TABLE": {
"NAME": "Locale name",
"CODE": "Locale code",
"ARTICLE_COUNT": "No. of articles",
"CATEGORIES": "No. of categories",
"SWAP": "Swap",
"DELETE": "Delete",
"DEFAULT_LOCALE": "Default"
}
}
}
}
},
"TABLE": {

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

@ -31,6 +31,7 @@
v-if="showPortalPopover"
:portals="portals"
@close-popover="closePortalPopover"
@open-portal-page="openPortalPage"
/>
</section>
</div>
@ -339,6 +340,12 @@ export default {
closePortalPopover() {
this.showPortalPopover = false;
},
openPortalPage() {
this.$router.push({
name: 'list_all_portals',
});
this.showPortalPopover = false;
},
},
};
</script>

301
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue Normal file
View file

@ -0,0 +1,301 @@
<template>
<div>
<div v-for="portal in portals" :key="portal.id" class="portal">
<thumbnail :username="portal.name" variant="square" />
<div class="container">
<header>
<div>
<div class="title-status--wrap">
<h2 class="portal-title block-title">{{ portal.name }}</h2>
<Label
:title="status"
:color-scheme="labelColor"
:small="true"
class="status"
/>
</div>
<p class="portal-count">
{{ portal.articles_count }}
{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.COUNT_LABEL'
)
}}
</p>
</div>
<div>
<woot-button
variant="smooth"
size="small"
color-scheme="primary"
class="header-action-buttons"
@click="addLocale"
>
{{
$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.ADD')
}}
</woot-button>
<woot-button
variant="hollow"
size="small"
color-scheme="secondary"
class="header-action-buttons"
@click="openSite"
>
{{
$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.VISIT')
}}
</woot-button>
<woot-button
v-tooltip.top-end="
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.SETTINGS'
)
"
variant="hollow"
size="small"
icon="settings"
class="header-action-buttons"
color-scheme="secondary"
@click="openSettings"
/>
</div>
</header>
<div class="portal-locales">
<h2 class="locale-title sub-block-title">
{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.TITLE'
)
}}
</h2>
<div class="configuration-items--wrap">
<div class="configuration-items">
<div class="configuration-item">
<label>{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.NAME'
)
}}</label>
<span class="text-block-title">{{ portal.header_text }}</span>
</div>
<div class="configuration-item">
<label>{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.DOMAIN'
)
}}</label>
<span class="text-block-title">{{ portal.custom_domain }}</span>
</div>
</div>
<div class="configuration-items">
<div class="configuration-item">
<label>{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SLUG'
)
}}</label>
<span class="text-block-title">{{ portal.slug }}</span>
</div>
<div class="configuration-item">
<label>{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.TITLE'
)
}}</label>
<span class="text-block-title">{{ portal.page_title }}</span>
</div>
</div>
<div class="configuration-items">
<div class="configuration-item">
<label>{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.THEME'
)
}}</label>
<div class="content-theme-wrap">
<div
class="theme-color"
:style="{ background: portal.color }"
/>
<span class="text-block-title">{{ portal.page_title }}</span>
</div>
</div>
<div class="configuration-item">
<label>{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SUB_TEXT'
)
}}</label>
<span class="text-block-title">{{ portal.page_title }}</span>
</div>
</div>
</div>
</div>
<div class="portal-locales">
<h2 class="locale-title sub-block-title">
{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TITLE'
)
}}
</h2>
<locale-item-table
:portals="portal"
:selected-locale-code="selectedLocaleCode"
@swap="swapLocale"
@delete="deleteLocale"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import thumbnail from 'dashboard/components/widgets/Thumbnail';
import Label from 'dashboard/components/ui/Label';
import LocaleItemTable from './PortalListItemTable';
export default {
components: {
thumbnail,
Label,
LocaleItemTable,
},
props: {
portals: {
type: Array,
default: () => [],
},
status: {
type: String,
default: '',
values: ['archived', 'draft', 'published'],
},
selectedLocaleCode: {
type: String,
default: '',
},
},
computed: {
labelColor() {
switch (this.status) {
case 'archived':
return 'secondary';
case 'draft':
return 'warning';
default:
return 'success';
}
},
defaultLocale(code) {
return code === this.selectedLocaleCode;
},
},
methods: {
addLocale() {
this.$emit('add');
},
openSite() {
this.$emit('open-site');
},
openSettings() {
this.$emit('open');
},
swapLocale() {
this.$emit('swap');
},
deleteLocale() {
this.$emit('delete');
},
},
};
</script>
<style lang="scss" scoped>
.portal {
background-color: var(--white);
padding: var(--space-normal);
border: 1px solid var(--color-border-dark);
border-radius: var(--border-radius-medium);
position: relative;
display: flex;
margin-bottom: var(--space-slab);
.container {
margin-left: var(--space-small);
flex-grow: 1;
header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--space-normal);
.title-status--wrap {
display: flex;
align-items: center;
.status {
margin: 0 0 0 var(--space-small);
}
}
.portal-title {
color: var(--s-900);
margin-bottom: 0;
}
.portal-count {
font-size: var(--font-size-small);
margin-bottom: 0;
color: var(--s-700);
}
.header-action-buttons {
margin-left: var(--space-smaller);
}
}
.portal-locales {
margin-bottom: var(--space-small);
.locale-title {
color: var(--s-800);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-small);
}
}
}
.portal-settings--icon {
padding: var(--space-smaller);
margin-left: var(--space-small);
&:hover {
cursor: pointer;
background: var(--s-50);
border-radius: var(--border-radius-normal);
}
}
.configuration-items--wrap {
display: flex;
justify-content: space-between;
margin-right: var(--space-mega);
max-width: 80vw;
.configuration-items {
display: flex;
flex-direction: column;
}
.configuration-item {
display: flex;
align-items: flex-start;
flex-direction: column;
margin-bottom: var(--space-slab);
.content-theme-wrap {
display: flex;
align-items: center;
}
.theme-color {
width: var(--space-normal);
height: var(--space-normal);
border-radius: var(--border-radius-normal);
margin-right: var(--space-smaller);
border: 1px solid var(--color-border-light);
}
}
}
}
</style>

148
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue Normal file
View file

@ -0,0 +1,148 @@
<template>
<table>
<thead>
<tr>
<th scope="col">
{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.NAME'
)
}}
</th>
<th scope="col">
{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.CODE'
)
}}
</th>
<th scope="col">
{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.ARTICLE_COUNT'
)
}}
</th>
<th scope="col">
{{
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.CATEGORIES'
)
}}
</th>
<th scope="col" />
</tr>
</thead>
<tr>
<td colspan="100%" class="horizontal-line" />
</tr>
<tbody>
<tr v-for="locale in portals.locales" :key="locale.code">
<td>
<span>{{ locale.name }}</span>
<Label
v-if="locale.code === selectedLocaleCode"
:title="
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.DEFAULT_LOCALE'
)
"
color-scheme="primary"
:small="true"
class="default-status"
/>
</td>
<td>
<span>{{ locale.code }}</span>
</td>
<td>
<span>{{ locale.articles_count }}</span>
</td>
<td>
<span>{{ locale.categories_count }}</span>
</td>
<td>
<woot-button
v-tooltip.top-end="
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.SWAP'
)
"
size="tiny"
variant="smooth"
icon="arrow-swap"
color-scheme="primary"
:disabled="locale.code === selectedLocaleCode"
@click="swapLocale"
/>
<woot-button
v-tooltip.top-end="
$t(
'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.DELETE'
)
"
size="tiny"
variant="smooth"
icon="delete"
color-scheme="secondary"
@click="deleteLocale"
/>
</td>
</tr>
</tbody>
</table>
</template>
<script>
import Label from 'dashboard/components/ui/Label';
export default {
components: {
Label,
},
props: {
portals: {
type: Object,
default: () => {},
},
selectedLocaleCode: {
type: String,
default: '',
},
},
methods: {
swapLocale() {
this.$emit('swap');
},
deleteLocale() {
this.$emit('delete');
},
},
};
</script>
<style lang="scss" scoped>
table {
thead tr th {
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
text-transform: none;
color: var(--s-600);
padding-left: 0;
padding-top: 0;
}
tbody tr {
border-bottom: 0;
td {
font-size: var(--font-size-small);
padding-left: 0;
.default-status {
margin: 0 0 0 var(--space-smaller);
}
}
}
}
.horizontal-line {
border-bottom: 1px solid var(--color-border);
}
</style>

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

@ -5,12 +5,15 @@
<h2 class="block-title">
{{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }}
</h2>
<router-link to="#" class="new-popover-link">
<fluent-icon icon="add" size="16" />
<span>
{{ $t('HELP_CENTER.PORTAL.POPOVER.NEW_PORTAL_LINK') }}
</span>
</router-link>
<woot-button
variant="smooth"
color-scheme="secondary"
icon="settings"
size="small"
@click="openPortalPage"
>
{{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }}
</woot-button>
</div>
<p class="subtitle">
{{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
@ -52,6 +55,9 @@ export default {
closePortalPopover() {
this.$emit('close-popover');
},
openPortalPage() {
this.$emit('open-portal-page');
},
},
};
</script>

6
app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
View file

@ -16,13 +16,13 @@
<woot-button
variant="link"
color-scheme="secondary"
@click="popOutHelpCenter"
@click="popoutHelpCenter"
>
<fluent-icon
icon="arrow-up-right"
size="28px"
class="pop-out--icon"
@click="popOutHelpCenter"
@click="popoutHelpCenter"
/>
</woot-button>
<woot-button
@ -61,7 +61,7 @@ export default {
},
},
methods: {
popOutHelpCenter() {
popoutHelpCenter() {
this.$emit('pop-out');
},
openPortalPopover() {

145
app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalListItem.stories.js Normal file
View file

@ -0,0 +1,145 @@
import { action } from '@storybook/addon-actions';
import PortalListItem from '../PortalListItem';
export default {
title: 'Components/Help Center/Portal List',
component: PortalListItem,
argTypes: {
portals: { control: 'array' },
status: {
control: {
type: 'string',
options: ['archived', 'draft', 'published'],
},
},
selectedLocaleCode: { control: 'string' },
},
};
const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { PortalListItem },
template:
'<portal-list-item v-bind="$props" @add="addLocale" @open-site="openSite" @open="openSettings" @swap="swapLocale" @delete="deleteLocale" ></portal-list-item>',
});
export const PortalListItemView = Template.bind({});
PortalListItemView.args = {
addLocale: action('addLocale'),
openSite: action('openSite'),
openSettings: action('openSettings'),
swapLocale: action('swapLocale'),
deleteLocale: action('deleteLocale'),
status: 'published',
selectedLocaleCode: 'en-US',
portals: [
{
name: 'Chatwoot Help Center',
id: 1,
color: 'red',
custom_domain: 'help-center.chatwoot.com',
articles_count: 123,
header_text: 'Help center',
homepage_link: null,
page_title: 'English',
slug: 'help-center',
archived: false,
config: {
allowed_locales: [
{
code: 'en-US',
name: 'English',
articles_count: 123,
categories_count: 42,
},
{
code: 'fr-FR',
name: 'Français',
articles_count: 23,
categories_count: 11,
},
{
code: 'de-DE',
name: 'Deutsch',
articles_count: 32,
categories_count: 12,
},
{
code: 'es-ES',
name: 'Español',
articles_count: 12,
categories_count: 4,
},
],
},
locales: [
{
code: 'en-US',
name: 'English',
articles_count: 123,
categories_count: 42,
},
{
code: 'fr-FR',
name: 'Français',
articles_count: 23,
categories_count: 11,
},
{
code: 'de-DE',
name: 'Deutsch',
articles_count: 32,
categories_count: 12,
},
{
code: 'es-ES',
name: 'Español',
articles_count: 12,
categories_count: 4,
},
],
},
{
name: 'Chatwoot Docs',
id: 2,
color: 'green',
custom_domain: 'doc-chatwoot.com',
articles_count: 67,
header_text: 'Docs',
homepage_link: null,
page_title: 'Portal',
slug: 'second_portal',
archived: false,
config: {
allowed_locales: [
{
name: 'English',
code: 'en-EN',
articles_count: 12,
categories_count: 66,
},
{
name: 'Mandarin',
code: 'ch-CH',
articles_count: 6,
categories_count: 23,
},
],
},
locales: [
{
name: 'English',
code: 'en-EN',
articles_count: 12,
categories_count: 66,
},
{
name: 'Mandarin',
code: 'ch-CH',
articles_count: 6,
categories_count: 23,
},
],
},
],
};

164
app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
View file

@ -1,3 +1,165 @@
<template>
<div>List of portals</div>
<div class="container">
<div class="header-wrap">
<h1 class="page-title">{{ $t('HELP_CENTER.PORTAL.HEADER') }}</h1>
<woot-button color-scheme="primary" size="small" @click="createPortal">
{{ $t('HELP_CENTER.PORTAL.NEW_BUTTON') }}
</woot-button>
</div>
<div class="portal-container">
<portal-list-item
:portals="portals"
status="published"
selected-locale-code="en-US"
/>
</div>
</div>
</template>
<script>
import PortalListItem from 'dashboard/routes/dashboard/helpcenter/components/PortalListItem';
export default {
components: {
PortalListItem,
},
data() {
return {
// Dummy data for testing will remove once the state is implemented.
portals: [
{
name: 'Chatwoot Help Center',
id: 1,
color: 'red',
custom_domain: 'help-center.chatwoot.com',
articles_count: 123,
header_text: 'Help center',
homepage_link: null,
page_title: 'English',
slug: 'help-center',
archived: false,
config: {
allowed_locales: [
{
code: 'en-US',
name: 'English',
articles_count: 123,
categories_count: 42,
},
{
code: 'fr-FR',
name: 'Français',
articles_count: 23,
categories_count: 11,
},
{
code: 'de-DE',
name: 'Deutsch',
articles_count: 32,
categories_count: 12,
},
{
code: 'es-ES',
name: 'Español',
articles_count: 12,
categories_count: 4,
},
],
},
locales: [
{
code: 'en-US',
name: 'English',
articles_count: 123,
categories_count: 42,
},
{
code: 'fr-FR',
name: 'Français',
articles_count: 23,
categories_count: 11,
},
{
code: 'de-DE',
name: 'Deutsch',
articles_count: 32,
categories_count: 12,
},
{
code: 'es-ES',
name: 'Español',
articles_count: 12,
categories_count: 4,
},
],
},
{
name: 'Chatwoot Docs',
id: 2,
color: 'green',
custom_domain: 'doc-chatwoot.com',
articles_count: 67,
header_text: 'Docs',
homepage_link: null,
page_title: 'Portal',
slug: 'second_portal',
archived: false,
config: {
allowed_locales: [
{
name: 'English',
code: 'en-EN',
articles_count: 12,
categories_count: 66,
},
{
name: 'Mandarin',
code: 'ch-CH',
articles_count: 6,
categories_count: 23,
},
],
},
locales: [
{
name: 'English',
code: 'en-EN',
articles_count: 12,
categories_count: 66,
},
{
name: 'Mandarin',
code: 'ch-CH',
articles_count: 6,
categories_count: 23,
},
],
},
],
};
},
methods: {
createPortal() {
this.$emit('create-portal');
},
},
};
</script>
<style lang="scss" scoped>
.container {
padding: var(--space-small) var(--space-normal);
width: 100%;
.header-wrap {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 var(--space-small) 0;
height: var(--space-larger);
}
.portal-container {
height: 90vh;
overflow-y: scroll;
}
}
</style>