From c3426929d7589fa90801a569e8da1e4ef1236855 Mon Sep 17 00:00:00 2001 From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com> Date: Sat, 22 Oct 2022 05:13:43 +0530 Subject: [PATCH] chore: Refactor sidebar components used in help center (#5695) Co-authored-by: Pranav Raj S --- .../api/v1/accounts/articles_controller.rb | 2 +- .../SecondaryChildNavItem.vue | 17 +++-- .../sidebarComponents/SecondaryNavItem.vue | 75 +++++++------------ .../components/HelpCenterLayout.vue | 6 +- .../helpcenter/components/PortalListItem.vue | 8 +- .../helpcenter/components/Sidebar/Sidebar.vue | 14 +++- .../components/Sidebar/SidebarHeader.vue | 2 +- .../pages/articles/DefaultPortalArticles.vue | 4 +- .../pages/portals/PortalDetails.vue | 12 +-- .../modules/helpCenterPortals/mutations.js | 8 +- 10 files changed, 68 insertions(+), 80 deletions(-) diff --git a/app/controllers/api/v1/accounts/articles_controller.rb b/app/controllers/api/v1/accounts/articles_controller.rb index 50c960206..a7891ffd4 100644 --- a/app/controllers/api/v1/accounts/articles_controller.rb +++ b/app/controllers/api/v1/accounts/articles_controller.rb @@ -38,7 +38,7 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController end def portal - @portal ||= Current.account.portals.find_by(slug: params[:portal_id]) + @portal ||= Current.account.portals.find_by!(slug: params[:portal_id]) end def article_params diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue index de10dda4a..2dd23544f 100644 --- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue +++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue @@ -26,7 +26,7 @@ :class="{ 'text-truncate': shouldTruncate }" > {{ label }} - + {{ childItemCount }} @@ -76,7 +76,7 @@ export default { type: String, default: '', }, - isHelpCenterSidebar: { + showChildCount: { type: Boolean, default: false, }, @@ -127,11 +127,16 @@ $label-badge-size: var(--space-slab); color: var(--w-500); border-color: var(--w-25); } + &.is-active .count-view { + background: var(--w-75); + color: var(--w-500); + } } .menu-label { flex-grow: 1; - line-height: var(--space-two); + display: inline-flex; + align-items: center; } .inbox-icon { @@ -175,10 +180,6 @@ $label-badge-size: var(--space-slab); font-weight: var(--font-weight-bold); margin-left: var(--space-smaller); padding: var(--space-zero) var(--space-smaller); - - &.is-active { - background: var(--w-50); - color: var(--w-500); - } + line-height: var(--font-size-small); } diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue index 8661a488f..644258f50 100644 --- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue +++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue @@ -4,16 +4,15 @@ {{ $t(`SIDEBAR.${menuItem.label}`) }} -
+
- - + />
{{ $t(`SIDEBAR.${menuItem.label}`) }} - + {{ `${menuItem.count}` }} -
  • +
  • @@ -78,9 +73,6 @@
    • -

    - {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }} -

    @@ -104,14 +96,6 @@ export default { type: Object, default: () => ({}), }, - isHelpCenterSidebar: { - type: Boolean, - default: false, - }, - isCategoryEmpty: { - type: Boolean, - default: false, - }, }, computed: { ...mapGetters({ @@ -161,8 +145,8 @@ export default { this.menuItem.toStateName === 'settings_applications' ); }, - isArticlesView() { - return this.$store.state.route.name === this.menuItem.toStateName; + isCurrentRoute() { + return this.$store.state.route.name.includes(this.menuItem.toStateName); }, computedClass() { @@ -181,12 +165,11 @@ export default { } return ' '; } - if (this.isHelpCenterSidebar) { - if (this.isArticlesView) { - return 'is-active'; - } - return ' '; + + if (this.isCurrentRoute) { + return 'is-active'; } + return ''; }, }, @@ -222,6 +205,9 @@ export default { onClickOpen() { this.$emit('open'); }, + showChildCount(count) { + return Number.isInteger(count); + }, }, }; @@ -277,6 +263,11 @@ export default { color: var(--w-500); border-color: var(--w-25); } + + &.is-active .count-view { + background: var(--w-75); + color: var(--w-600); + } } .secondary-menu--icon { @@ -306,15 +297,12 @@ export default { top: -1px; } -.sidebar-item .button.menu-item--new { - display: inline-flex; - height: var(--space-medium); - margin: var(--space-smaller) 0; - padding: var(--space-smaller); - color: var(--s-500); +.sidebar-item .menu-item--new { + padding: var(--space-small) 0; - &:hover { - color: var(--w-500); + .button { + display: inline-flex; + color: var(--s-500); } } @@ -340,11 +328,6 @@ export default { font-weight: var(--font-weight-bold); margin-left: var(--space-smaller); padding: var(--space-zero) var(--space-smaller); - - &.is-active { - background: var(--w-50); - color: var(--w-500); - } } .submenu-icons { @@ -356,10 +339,4 @@ export default { margin-left: var(--space-small); } } - -.empty-text { - color: var(--s-500); - font-size: var(--font-size-small); - margin: var(--space-smaller); -} diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue index bda19b764..44754694e 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue @@ -196,6 +196,7 @@ export default { icon: 'folder', label: 'HELP_CENTER.CATEGORY', hasSubMenu: true, + showNewButton: true, key: 'category', children: this.categories.map(category => ({ id: category.id, @@ -218,7 +219,7 @@ export default { }, watch: { - selectedPortal() { + '$route.params.portalSlug'() { this.fetchPortalsAndItsCategories(); }, }, @@ -239,7 +240,7 @@ export default { }, updated() { const slug = this.$route.params.portalSlug; - if (slug) { + if (slug !== this.lastActivePortalSlug) { this.lastActivePortalSlug = slug; this.updateUISettings({ last_active_portal_slug: slug, @@ -260,7 +261,6 @@ export default { }, async fetchPortalsAndItsCategories() { await this.$store.dispatch('portals/index'); - const selectedPortalParam = { portalSlug: this.selectedPortalSlug, locale: this.selectedLocaleInPortal, diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue index 0354ad22b..045bd77cd 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue @@ -376,7 +376,6 @@ export default { } } .portal-title { - color: var(--s-900); margin-bottom: 0; } .portal-count { @@ -389,14 +388,17 @@ export default { } } .portal-locales { - margin-top: var(--space-medium); - margin-bottom: var(--space-small); + margin-bottom: var(--space-large); .locale-title { color: var(--s-800); font-weight: var(--font-weight-medium); margin-bottom: var(--space-small); } } + + .portal--heading { + margin-bottom: var(--space-normal); + } } .portal-settings--icon { padding: var(--space-smaller); diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue index 355ffc0a1..a88121eb3 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue @@ -12,16 +12,20 @@ v-for="menuItem in accessibleMenuItems" :key="menuItem.toState" :menu-item="menuItem" - :is-help-center-sidebar="true" /> +

    + {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }} +

    @@ -123,4 +127,8 @@ export default { overflow-y: auto; } } + +.empty-text { + padding: var(--space-smaller) var(--space-normal); +} 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 044efafd6..d526787bf 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue @@ -76,7 +76,7 @@ export default { justify-content: space-between; padding: var(--space-normal); margin: var(--space-minus-small); - margin-bottom: var(--space-small); + margin-bottom: var(--space-smaller); border-bottom: 1px solid var(--color-border-light); } diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue index a9033b6ac..6381ebe7b 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue @@ -13,7 +13,7 @@ export default { } = this.uiSettings || {}; if (lastActivePortalSlug) - this.$router.push({ + this.$router.replace({ name: 'list_all_locale_articles', params: { portalSlug: lastActivePortalSlug, @@ -22,7 +22,7 @@ export default { replace: true, }); else - this.$router.push({ + this.$router.replace({ name: 'list_all_portals', replace: true, }); diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue index 78876f630..385eb44ca 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue @@ -6,7 +6,7 @@ 'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.CREATE_BASIC_SETTING_BUTTON' ) " - @submit="updateBasicSettings" + @submit="createPortal" /> @@ -37,7 +37,7 @@ export default { }, methods: { - async updateBasicSettings(portal) { + async createPortal(portal) { try { await this.$store.dispatch('portals/create', { portal, @@ -45,16 +45,16 @@ export default { this.alertMessage = this.$t( 'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_BASIC' ); + this.$router.push({ + name: 'portal_customization', + params: { portalSlug: portal.slug }, + }); } catch (error) { this.alertMessage = error?.message || this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_BASIC'); } finally { this.showAlert(this.alertMessage); - this.$router.push({ - name: 'portal_customization', - params: { portalSlug: portal.slug }, - }); } }, }, diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js index dcce09854..9ece174cd 100644 --- a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js +++ b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js @@ -45,10 +45,10 @@ export const mutations = { [types.SET_PORTALS_META]: ($state, data) => { const { - all_articles_count: allArticlesCount, - mine_articles_count: mineArticlesCount, - draft_articles_count: draftArticlesCount, - archived_articles_count: archivedArticlesCount, + all_articles_count: allArticlesCount = 0, + mine_articles_count: mineArticlesCount = 0, + draft_articles_count: draftArticlesCount = 0, + archived_articles_count: archivedArticlesCount = 0, } = data; Vue.set($state.meta, 'allArticlesCount', allArticlesCount); Vue.set($state.meta, 'archivedArticlesCount', archivedArticlesCount);