KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 68 additions and 80 deletions
Show stats 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
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

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

@ -26,7 +26,7 @@
:class="{ 'text-truncate': shouldTruncate }"
>
{{ label }}
<span v-if="isHelpCenterSidebar && childItemCount" class="count-view">
<span v-if="showChildCount" class="count-view">
{{ childItemCount }}
</span>
</span>
@ -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);
}
</style>

75
app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
View file

@ -4,16 +4,15 @@
<span class="secondary-menu--header fs-small">
{{ $t(`SIDEBAR.${menuItem.label}`) }}
</span>
<div v-if="isHelpCenterSidebar" class="submenu-icons">
<div v-if="menuItem.showNewButton" class="submenu-icons">
<woot-button
size="tiny"
variant="clear"
color-scheme="secondary"
icon="add"
class="submenu-icon"
@click="onClickOpen"
>
<fluent-icon icon="add" size="16" />
</woot-button>
/>
</div>
</div>
<router-link
@ -28,11 +27,7 @@
size="14"
/>
{{ $t(`SIDEBAR.${menuItem.label}`) }}
<span
v-if="isHelpCenterSidebar"
class="count-view"
:class="computedClass"
>
<span v-if="showChildCount(menuItem.count)" class="count-view">
{{ `${menuItem.count}` }}
</span>
<span
@ -55,7 +50,7 @@
:should-truncate="child.truncateLabel"
:icon="computedInboxClass(child)"
:warning-icon="computedInboxErrorClass(child)"
:is-help-center-sidebar="isHelpCenterSidebar"
:show-child-count="showChildCount(child.count)"
:child-item-count="child.count"
/>
<router-link
@ -64,10 +59,10 @@
:to="menuItem.toState"
custom
>
<li>
<li class="menu-item--new">
<a
:href="href"
class="button small clear menu-item--new secondary"
class="button small link clear secondary"
:class="{ 'is-active': isActive }"
@click="e => newLinkClick(e, navigate)"
>
@ -78,9 +73,6 @@
</a>
</li>
</router-link>
<p v-if="isHelpCenterSidebar && isCategoryEmpty" class="empty-text">
{{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
</p>
</ul>
</li>
</template>
@ -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);
},
},
};
</script>
@ -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);
}
</style>

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

@ -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,

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

@ -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);

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

@ -12,16 +12,20 @@
v-for="menuItem in accessibleMenuItems"
:key="menuItem.toState"
:menu-item="menuItem"
:is-help-center-sidebar="true"
/>
<secondary-nav-item
v-for="menuItem in additionalSecondaryMenuItems"
:key="menuItem.key"
:menu-item="menuItem"
:is-help-center-sidebar="true"
:is-category-empty="!hasCategory"
@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>
</div>
</template>
@ -123,4 +127,8 @@ export default {
overflow-y: auto;
}
}
.empty-text {
padding: var(--space-smaller) var(--space-normal);
}
</style>

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

@ -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);
}

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

@ -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,
});

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'
)
"
@submit="updateBasicSettings"
@submit="createPortal"
/>
</template>
@ -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 },
});
}
},
},

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

@ -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);