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

chore: Improve article list pagination logic (#7737)

Browse Source
This commit is contained in:
Sivin Varghese
2023-08-17 22:02:29 +05:30
committed by GitHub
parent 961c911c26
commit ab039e14fd
4 changed files with 32 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@
<router-link :to="articleUrl(id)">
<h6
:title="title"
class="text-base text-slate-800 dark:text-slate-100 mb-0 leading-6 h-6 hover:underline overflow-hidden whitespace-nowrap text-ellipsis"
class="text-base ltr:text-left rtl:text-right text-slate-800 dark:text-slate-100 mb-0 leading-6 h-6 hover:underline overflow-hidden whitespace-nowrap text-ellipsis"
>
{{ title }}
</h6>

82
app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
View File

@@ -1,28 +1,38 @@
<template>
<div class="article-container">
<div class="w-full">
<div
class="article-container--header"
class="my-0 py-0 px-4 grid grid-cols-6 md:grid-cols-7 lg:grid-cols-8 gap-4 border-b border-slate-100 dark:border-slate-700 sticky top-16 bg-white dark:bg-slate-900"
:class="{ draggable: onCategoryPage }"
>
<div class="heading-item heading-title">
<div
class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 ltr:text-left rtl:text-right col-span-4"
>
{{ $t('HELP_CENTER.TABLE.HEADERS.TITLE') }}
</div>
<div class="heading-item heading-category">
<div
class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-right"
>
{{ $t('HELP_CENTER.TABLE.HEADERS.CATEGORY') }}
</div>
<div class="heading-item heading-read-count">
<div
class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-right hidden lg:block"
>
{{ $t('HELP_CENTER.TABLE.HEADERS.READ_COUNT') }}
</div>
<div class="heading-item heading-status">
<div
class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-right"
>
{{ $t('HELP_CENTER.TABLE.HEADERS.STATUS') }}
</div>
<div class="heading-item heading-last-edited">
<div
class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-right hidden md:block"
>
{{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}
</div>
</div>
<draggable
tag="div"
class="border-t-0"
class="border-t-0 px-4"
:disabled="!dragEnabled"
:list="localArticles"
ghost-class="article-ghost-class"
@@ -44,11 +54,11 @@
</draggable>
<table-footer
v-if="articles.length"
v-if="showArticleFooter"
:current-page="currentPage"
:total-count="totalCount"
:page-size="pageSize"
class="dark:bg-slate-900 border-t-0 pl-0 pr-0"
class="dark:bg-slate-900 sticky bottom-0 border-t-0 px-4"
@page-change="onPageChange"
/>
</div>
@@ -98,6 +108,11 @@ export default {
onCategoryPage() {
return this.$route.name === 'show_category';
},
showArticleFooter() {
return this.currentPage === 1
? this.totalCount > 25
: this.articles.length > 0;
},
},
watch: {
articles() {
@@ -140,53 +155,6 @@ export default {
};
</script>
<style lang="scss" scoped>
.article-container {
@apply w-full;
.article-container--header {
@apply my-0 -mx-4 py-0 px-4 grid grid-cols-8 gap-4 border-b border-slate-100 dark:border-slate-700;
@media (max-width: 1024px) {
@apply grid-cols-7;
}
@media (max-width: 768px) {
@apply grid-cols-6;
}
&.draggable {
div.heading-item.heading-title {
@apply py-2 px-3.5;
}
}
div.heading-item {
@apply font-semibold capitalize text-sm text-right py-2 px-0 text-slate-700 dark:text-slate-100;
&.heading-title {
@apply text-left col-span-4;
}
@media (max-width: 1024px) {
&.heading-read-count {
@apply hidden;
}
}
@media (max-width: 768px) {
&.heading-read-count,
&.heading-last-edited {
@apply hidden;
}
}
}
}
.footer {
@apply p-0 border-0;
}
}
.article-ghost-class {
@apply opacity-50 bg-slate-50 dark:bg-slate-800;
}

4
app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
View File

@@ -1,5 +1,7 @@
<template>
<div class="flex items-center justify-between w-full h-16 pt-2">
<div
class="flex px-4 items-center justify-between w-full h-16 pt-2 sticky top-0 bg-white dark:bg-slate-900"
>
<div class="flex items-center">
<woot-sidemenu-icon />
<div class="flex items-center my-0 mx-2">

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

@@ -1,5 +1,7 @@
<template>
<div class="py-0 px-4 w-full max-w-full overflow-auto">
<div
class="py-0 px-0 w-full max-w-full overflow-auto bg-white dark:bg-slate-900"
>
<article-header
:header-title="headerTitle"
:count="meta.count"