From 11fe3f071e590f24299fbb84c1c6c548d78ec9bf Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Tue, 2 Aug 2022 20:03:51 +0530 Subject: [PATCH] feat: Component for listing the portal (#5146) --- .../dashboard/i18n/locale/en/helpCenter.json | 37 ++- .../components/HelpCenterLayout.vue | 7 + .../helpcenter/components/PortalListItem.vue | 301 ++++++++++++++++++ .../components/PortalListItemTable.vue | 148 +++++++++ .../helpcenter/components/PortalPopover.vue | 18 +- .../components/Sidebar/SidebarHeader.vue | 6 +- .../stories/PortalListItem.stories.js | 145 +++++++++ .../pages/portals/ListAllPortals.vue | 164 +++++++++- 8 files changed, 815 insertions(+), 11 deletions(-) create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalListItem.stories.js diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json index 3188200a2..6004f4e29 100644 --- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json +++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json @@ -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": { diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue index 1ba016edd..c7c604646 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue @@ -31,6 +31,7 @@ v-if="showPortalPopover" :portals="portals" @close-popover="closePortalPopover" + @open-portal-page="openPortalPage" /> @@ -339,6 +340,12 @@ export default { closePortalPopover() { this.showPortalPopover = false; }, + openPortalPage() { + this.$router.push({ + name: 'list_all_portals', + }); + this.showPortalPopover = false; + }, }, }; diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue new file mode 100644 index 000000000..11de14069 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue @@ -0,0 +1,301 @@ + + + + + diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue new file mode 100644 index 000000000..d1f44faa7 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue @@ -0,0 +1,148 @@ + + + + + diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue index c424eb5de..b6659013f 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue @@ -5,12 +5,15 @@

{{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }}

- - - - {{ $t('HELP_CENTER.PORTAL.POPOVER.NEW_PORTAL_LINK') }} - - + + {{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }} +

{{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }} @@ -52,6 +55,9 @@ export default { closePortalPopover() { this.$emit('close-popover'); }, + openPortalPage() { + this.$emit('open-portal-page'); + }, }, }; diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue index dcccab5ca..bf1c36438 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue @@ -16,13 +16,13 @@ ({ + props: Object.keys(argTypes), + components: { PortalListItem }, + template: + '', +}); + +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, + }, + ], + }, + ], +}; diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue index 99f76d80a..50171635b 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue @@ -1,3 +1,165 @@ + + + +