LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Refactor sidebar components used in help center (#5695)

Browse Source 
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Nithin David Thomas
2022-10-22 05:13:43 +05:30
committed by GitHub
parent 4a299a9441
commit c3426929d7
10 changed files with 68 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/controllers/api/v1/accounts/articles_controller.rb
View File

@@ -38,7 +38,7 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
end end
def portal def portal
@portal ||= Current.account.portals.find_by(slug: params[:portal_id]) @portal ||= Current.account.portals.find_by!(slug: params[:portal_id])
end end
def article_params def article_params

17
app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
View File

@@ -26,7 +26,7 @@
:class="{ 'text-truncate': shouldTruncate }" :class="{ 'text-truncate': shouldTruncate }"
> >
{{ label }} {{ label }}
<span v-if="isHelpCenterSidebar && childItemCount" class="count-view"> <span v-if="showChildCount" class="count-view">
{{ childItemCount }} {{ childItemCount }}
</span> </span>
</span> </span>
@@ -76,7 +76,7 @@ export default {
type: String, type: String,
default: '', default: '',
}, },
isHelpCenterSidebar: { showChildCount: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
@@ -127,11 +127,16 @@ $label-badge-size: var(--space-slab);
color: var(--w-500); color: var(--w-500);
border-color: var(--w-25); border-color: var(--w-25);
} }
&.is-active .count-view {
background: var(--w-75);
color: var(--w-500);
}
} }
.menu-label { .menu-label {
flex-grow: 1; flex-grow: 1;
line-height: var(--space-two); display: inline-flex;
align-items: center;
} }
.inbox-icon { .inbox-icon {
@@ -175,10 +180,6 @@ $label-badge-size: var(--space-slab);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
margin-left: var(--space-smaller); margin-left: var(--space-smaller);
padding: var(--space-zero) var(--space-smaller); padding: var(--space-zero) var(--space-smaller);
line-height: var(--font-size-small);
&.is-active {
background: var(--w-50);
color: var(--w-500);
}
} }
</style> </style>

73
app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
View File

@@ -4,16 +4,15 @@
<span class="secondary-menu--header fs-small"> <span class="secondary-menu--header fs-small">
{{ $t(`SIDEBAR.${menuItem.label}`) }} {{ $t(`SIDEBAR.${menuItem.label}`) }}
</span> </span>
<div v-if="isHelpCenterSidebar" class="submenu-icons"> <div v-if="menuItem.showNewButton" class="submenu-icons">
<woot-button <woot-button
size="tiny" size="tiny"
variant="clear" variant="clear"
color-scheme="secondary" color-scheme="secondary"
icon="add"
class="submenu-icon" class="submenu-icon"
@click="onClickOpen" @click="onClickOpen"
> />
<fluent-icon icon="add" size="16" />
</woot-button>
</div> </div>
</div> </div>
<router-link <router-link
@@ -28,11 +27,7 @@
size="14" size="14"
/> />
{{ $t(`SIDEBAR.${menuItem.label}`) }} {{ $t(`SIDEBAR.${menuItem.label}`) }}
<span <span v-if="showChildCount(menuItem.count)" class="count-view">
v-if="isHelpCenterSidebar"
class="count-view"
:class="computedClass"
>
{{ `${menuItem.count}` }} {{ `${menuItem.count}` }}
</span> </span>
<span <span
@@ -55,7 +50,7 @@
:should-truncate="child.truncateLabel" :should-truncate="child.truncateLabel"
:icon="computedInboxClass(child)" :icon="computedInboxClass(child)"
:warning-icon="computedInboxErrorClass(child)" :warning-icon="computedInboxErrorClass(child)"
:is-help-center-sidebar="isHelpCenterSidebar" :show-child-count="showChildCount(child.count)"
:child-item-count="child.count" :child-item-count="child.count"
/> />
<router-link <router-link
@@ -64,10 +59,10 @@
:to="menuItem.toState" :to="menuItem.toState"
custom custom
> >
<li> <li class="menu-item--new">
<a <a
:href="href" :href="href"
class="button small clear menu-item--new secondary" class="button small link clear secondary"
:class="{ 'is-active': isActive }" :class="{ 'is-active': isActive }"
@click="e => newLinkClick(e, navigate)" @click="e => newLinkClick(e, navigate)"
> >
@@ -78,9 +73,6 @@
</a> </a>
</li> </li>
</router-link> </router-link>
<p v-if="isHelpCenterSidebar && isCategoryEmpty" class="empty-text">
{{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
</p>
</ul> </ul>
</li> </li>
</template> </template>
@@ -104,14 +96,6 @@ export default {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
isHelpCenterSidebar: {
type: Boolean,
default: false,
},
isCategoryEmpty: {
type: Boolean,
default: false,
},
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
@@ -161,8 +145,8 @@ export default {
this.menuItem.toStateName === 'settings_applications' this.menuItem.toStateName === 'settings_applications'
); );
}, },
isArticlesView() { isCurrentRoute() {
return this.$store.state.route.name === this.menuItem.toStateName; return this.$store.state.route.name.includes(this.menuItem.toStateName);
}, },
computedClass() { computedClass() {
@@ -181,12 +165,11 @@ export default {
} }
return ' '; return ' ';
} }
if (this.isHelpCenterSidebar) {
if (this.isArticlesView) { if (this.isCurrentRoute) {
return 'is-active'; return 'is-active';
} }
return ' ';
}
return ''; return '';
}, },
}, },
@@ -222,6 +205,9 @@ export default {
onClickOpen() { onClickOpen() {
this.$emit('open'); this.$emit('open');
}, },
showChildCount(count) {
return Number.isInteger(count);
},
}, },
}; };
</script> </script>
@@ -277,6 +263,11 @@ export default {
color: var(--w-500); color: var(--w-500);
border-color: var(--w-25); border-color: var(--w-25);
} }
&.is-active .count-view {
background: var(--w-75);
color: var(--w-600);
}
} }
.secondary-menu--icon { .secondary-menu--icon {
@@ -306,15 +297,12 @@ export default {
top: -1px; top: -1px;
} }
.sidebar-item .button.menu-item--new { .sidebar-item .menu-item--new {
display: inline-flex; padding: var(--space-small) 0;
height: var(--space-medium);
margin: var(--space-smaller) 0;
padding: var(--space-smaller);
color: var(--s-500);
&:hover { .button {
color: var(--w-500); display: inline-flex;
color: var(--s-500);
} }
} }
@@ -340,11 +328,6 @@ export default {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
margin-left: var(--space-smaller); margin-left: var(--space-smaller);
padding: var(--space-zero) var(--space-smaller); padding: var(--space-zero) var(--space-smaller);
&.is-active {
background: var(--w-50);
color: var(--w-500);
}
} }
.submenu-icons { .submenu-icons {
@@ -356,10 +339,4 @@ export default {
margin-left: var(--space-small); margin-left: var(--space-small);
} }
} }
.empty-text {
color: var(--s-500);
font-size: var(--font-size-small);
margin: var(--space-smaller);
}
</style> </style>

6
app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
View File

@@ -196,6 +196,7 @@ export default {
icon: 'folder', icon: 'folder',
label: 'HELP_CENTER.CATEGORY', label: 'HELP_CENTER.CATEGORY',
hasSubMenu: true, hasSubMenu: true,
showNewButton: true,
key: 'category', key: 'category',
children: this.categories.map(category => ({ children: this.categories.map(category => ({
id: category.id, id: category.id,
@@ -218,7 +219,7 @@ export default {
}, },
watch: { watch: {
selectedPortal() { '$route.params.portalSlug'() {
this.fetchPortalsAndItsCategories(); this.fetchPortalsAndItsCategories();
}, },
}, },
@@ -239,7 +240,7 @@ export default {
}, },
updated() { updated() {
const slug = this.$route.params.portalSlug; const slug = this.$route.params.portalSlug;
if (slug) { if (slug !== this.lastActivePortalSlug) {
this.lastActivePortalSlug = slug; this.lastActivePortalSlug = slug;
this.updateUISettings({ this.updateUISettings({
last_active_portal_slug: slug, last_active_portal_slug: slug,
@@ -260,7 +261,6 @@ export default {
}, },
async fetchPortalsAndItsCategories() { async fetchPortalsAndItsCategories() {
await this.$store.dispatch('portals/index'); await this.$store.dispatch('portals/index');
const selectedPortalParam = { const selectedPortalParam = {
portalSlug: this.selectedPortalSlug, portalSlug: this.selectedPortalSlug,
locale: this.selectedLocaleInPortal, locale: this.selectedLocaleInPortal,

8
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
View File

@@ -376,7 +376,6 @@ export default {
} }
} }
.portal-title { .portal-title {
color: var(--s-900);
margin-bottom: 0; margin-bottom: 0;
} }
.portal-count { .portal-count {
@@ -389,14 +388,17 @@ export default {
} }
} }
.portal-locales { .portal-locales {
margin-top: var(--space-medium); margin-bottom: var(--space-large);
margin-bottom: var(--space-small);
.locale-title { .locale-title {
color: var(--s-800); color: var(--s-800);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
margin-bottom: var(--space-small); margin-bottom: var(--space-small);
} }
} }
.portal--heading {
margin-bottom: var(--space-normal);
}
} }
.portal-settings--icon { .portal-settings--icon {
padding: var(--space-smaller); padding: var(--space-smaller);

14
app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
View File

@@ -12,16 +12,20 @@
v-for="menuItem in accessibleMenuItems" v-for="menuItem in accessibleMenuItems"
:key="menuItem.toState" :key="menuItem.toState"
:menu-item="menuItem" :menu-item="menuItem"
:is-help-center-sidebar="true"
/> />
<secondary-nav-item <secondary-nav-item
v-for="menuItem in additionalSecondaryMenuItems" v-for="menuItem in additionalSecondaryMenuItems"
:key="menuItem.key" :key="menuItem.key"
:menu-item="menuItem" :menu-item="menuItem"
:is-help-center-sidebar="true"
:is-category-empty="!hasCategory"
@open="onClickOpenAddCatogoryModal" @open="onClickOpenAddCatogoryModal"
/> />
<p
v-if="!hasCategory"
key="empty-category-nessage"
class="empty-text text-muted"
>
{{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
</p>
</transition-group> </transition-group>
</div> </div>
</template> </template>
@@ -123,4 +127,8 @@ export default {
overflow-y: auto; overflow-y: auto;
} }
} }
.empty-text {
padding: var(--space-smaller) var(--space-normal);
}
</style> </style>

2
app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
View File

@@ -76,7 +76,7 @@ export default {
justify-content: space-between; justify-content: space-between;
padding: var(--space-normal); padding: var(--space-normal);
margin: var(--space-minus-small); margin: var(--space-minus-small);
margin-bottom: var(--space-small); margin-bottom: var(--space-smaller);
border-bottom: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light);
} }

4
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
View File

@@ -13,7 +13,7 @@ export default {
} = this.uiSettings || {}; } = this.uiSettings || {};
if (lastActivePortalSlug) if (lastActivePortalSlug)
this.$router.push({ this.$router.replace({
name: 'list_all_locale_articles', name: 'list_all_locale_articles',
params: { params: {
portalSlug: lastActivePortalSlug, portalSlug: lastActivePortalSlug,
@@ -22,7 +22,7 @@ export default {
replace: true, replace: true,
}); });
else else
this.$router.push({ this.$router.replace({
name: 'list_all_portals', name: 'list_all_portals',
replace: true, replace: true,
}); });

12
app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
View File

@@ -6,7 +6,7 @@
'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.CREATE_BASIC_SETTING_BUTTON' 'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.CREATE_BASIC_SETTING_BUTTON'
) )
" "
@submit="updateBasicSettings" @submit="createPortal"
/> />
</template> </template>
@@ -37,7 +37,7 @@ export default {
}, },
methods: { methods: {
async updateBasicSettings(portal) { async createPortal(portal) {
try { try {
await this.$store.dispatch('portals/create', { await this.$store.dispatch('portals/create', {
portal, portal,
@@ -45,16 +45,16 @@ export default {
this.alertMessage = this.$t( this.alertMessage = this.$t(
'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_BASIC' 'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_BASIC'
); );
this.$router.push({
name: 'portal_customization',
params: { portalSlug: portal.slug },
});
} catch (error) { } catch (error) {
this.alertMessage = this.alertMessage =
error?.message || error?.message ||
this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_BASIC'); this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_BASIC');
} finally { } finally {
this.showAlert(this.alertMessage); this.showAlert(this.alertMessage);
this.$router.push({
name: 'portal_customization',
params: { portalSlug: portal.slug },
});
} }
}, },
}, },

8
app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
View File

@@ -45,10 +45,10 @@ export const mutations = {
[types.SET_PORTALS_META]: ($state, data) => { [types.SET_PORTALS_META]: ($state, data) => {
const { const {
all_articles_count: allArticlesCount, all_articles_count: allArticlesCount = 0,
mine_articles_count: mineArticlesCount, mine_articles_count: mineArticlesCount = 0,
draft_articles_count: draftArticlesCount, draft_articles_count: draftArticlesCount = 0,
archived_articles_count: archivedArticlesCount, archived_articles_count: archivedArticlesCount = 0,
} = data; } = data;
Vue.set($state.meta, 'allArticlesCount', allArticlesCount); Vue.set($state.meta, 'allArticlesCount', allArticlesCount);
Vue.set($state.meta, 'archivedArticlesCount', archivedArticlesCount); Vue.set($state.meta, 'archivedArticlesCount', archivedArticlesCount);