Skip to content

Commit

Permalink
optimize get projects by adding pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@khansadaoudi
khansadaoudi committed Jan 2, 2025
1 parent a58f294 commit 938576e
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 79 deletions.
4 changes: 2 additions & 2 deletions src/api/backend-api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ export default {
// ---------------------------------------------------- //
// --------------- Project --------------- //
// ---------------------------------------------------- //
getProjects() {
return API.get<getProjects_RV>('projects');
getProjects(page: number, projectType: string) {
return API.get(`projects?page=${page}&type=${projectType}`);
},
getUserProjects() {
return API.get<getProjects_RV>('projects/user-projects');
Expand Down
84 changes: 23 additions & 61 deletions src/pages/ProjectsHub.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@
:options="projectTypeOptions"
class="float-right"
:label="$t('projectHub.projectCategory')"
@update:model-value="getProjects"
/>
<q-btn round flat :icon="listMode ? 'grid_view' : 'fas fa-list'" @click="toggleProjectView()">
<q-tooltip v-if="listMode">
Expand Down Expand Up @@ -88,7 +89,7 @@
<q-card-section v-if="!listMode">
<q-virtual-scroll
v-if="$q.platform.is.mobile"
:items="filteredProjects"
:items="visibleProjects"
:virtual-scroll-slice-size="30"
:virtual-scroll-item-size="200"
>
Expand All @@ -100,33 +101,33 @@
</q-virtual-scroll>
<div v-if="!$q.platform.is.mobile" class="q-pa-md row q-gutter-md">
<ProjectCard
v-for="project in paginatedProjects"
v-for="project in visibleProjects"
:key="project.id"
:style="`max-width: ${projectCardWidth}px;`"
:project="project"
:parent-delete-project="deleteProject"
></ProjectCard>
</div>
<div class="q-pa-lg flex flex-center">
<q-pagination v-model="pageIndex" :min="currentPage" :max="Math.ceil(filteredProjects.length / totalItemPerPageCardView)" :input="true" />
<q-pagination v-model="pageIndex" :min="currentPage" :max="totalPages" :input="true" />
</div>
</q-card-section>
<!-- Here starts the list view -->
<q-card-section v-else>
<q-list style="width: 100%">
<q-virtual-scroll
:items="paginatedProjects"
:items="visibleProjects"
style="max-height: 100vh; width: 100%"
:virtual-scroll-slice-size="30"
:virtual-scroll-item-size="200"
>
<template #default="{ item }">
<ProjectItem v-if="isLoggedIn || !isOldProject(item)" :key="item.id" :project="item" :parent-delete-project="deleteProject"></ProjectItem>
<ProjectItem :key="item.id" :project="item" :parent-delete-project="deleteProject"></ProjectItem>
</template>
</q-virtual-scroll>
</q-list>
<div class="q-pa-lg flex flex-center">
<q-pagination v-model="pageIndex" :min="currentPage" :max="Math.ceil(filteredProjects.length / totalItemPerPageListView)" :input="true" />
<q-pagination v-model="pageIndex" :min="currentPage" :max="totalPages" :input="true" />
</div>
</q-card-section>
</q-card>
Expand Down Expand Up @@ -167,73 +168,33 @@ export default defineComponent({
projects,
visibleProjects,
projectTypeOptions: [
this.$t('projectHub.allProjects'),
this.$t('projectHub.myProjects'),
this.$t('projectHub.otherProjects'),
this.$t('projectHub.myOldProjects'),
this.$t('projectHub.otherOldProjects'),
{ value: 'all_projects', label: this.$t('projectHub.allProjects') },
{ value: 'my_projects', label: this.$t('projectHub.myProjects') },
{ value: 'other_projects', label: this.$t('projectHub.otherProjects') },
{ value: 'my_old_projects', label: this.$t('projectHub.myOldProjects') },
],
projectType: '',
projectType: { value: 'all_projects', label: this.$t('projectHub.allProjects') },
search: '',
listMode: true,
creaProjectDial: false,
initLoading: false,
skelNumber: [...Array(5).keys()],
ayear: -3600 * 24 * 365,
currentPage: 1,
pageIndex: 1,
totalItemPerPageListView: 10,
totalItemPerPageCardView: 24,
projectCardWidth: 0,
selectedLanguagesForFilter: [],
projectsLanguages,
totalPages: 1,
};
},
computed: {
...mapState(useUserStore, ['isLoggedIn', 'username', 'shareEmail']),
...mapWritableState(useProjectStore, ['reloadProjects']),
myProjects(): project_extended_t[] {
return this.visibleProjects.filter((project) => {
return this.isMyProject(project) && !this.isOldProject(project);
});
},
myOldProjects(): project_extended_t[] {
return this.visibleProjects.filter((project) => {
return this.isMyProject(project) && this.isOldProject(project);
});
},
otherProjects(): project_extended_t[] {
return this.visibleProjects.filter((project) => {
return !this.isMyProject(project) && !this.isOldProject(project);
});
},
otherOldProjects(): project_extended_t[] {
return this.visibleProjects.filter((project) => {
return !this.isMyProject(project) && this.isOldProject(project);
});
},
filteredProjects(): project_extended_t[] {
if (this.projectType === '' || this.projectType === this.$t('projectHub.allProjects')) {
return this.visibleProjects;
} else if (this.projectType === this.$t('projectHub.myProjects')) {
return this.myProjects;
} else if (this.projectType === this.$t('projectHub.otherProjects')) {
return this.otherProjects;
} else if (this.projectType === this.$t('projectHub.myOldProjects')) {
return this.myOldProjects;
} else {
return this.otherOldProjects;
}
},
paginatedProjects(): project_extended_t[] {
const totalItemPerPage = this.listMode ? this.totalItemPerPageListView : this.totalItemPerPageCardView;
return this.filteredProjects.slice(
(this.pageIndex - 1) * totalItemPerPage,
(this.pageIndex - 1) * totalItemPerPage + totalItemPerPage
);
},
},
watch: {
pageIndex() {
this.getProjects();
},
reloadProjects(newVal) {
if (newVal) {
this.getProjects();
Expand All @@ -255,23 +216,24 @@ export default defineComponent({
this.projectCardWidth = Math.trunc(window.innerWidth / 7);
},
methods: {
...mapActions(useProjectStore, ['isMyProject', 'isOldProject', 'sortProjects']),
...mapActions(useProjectStore, ['sortProjects']),
toggleProjectView() {
this.listMode = !this.listMode;
LocalStorage.set('project_view', this.listMode);
},
getProjects() {
api
.getProjects()
.getProjects(this.pageIndex, this.projectType.value)
.then((response) => {
this.projects = response.data as project_extended_t[];
this.visibleProjects = response.data as project_extended_t[];
this.projects = response.data.projects as project_extended_t[];
this.visibleProjects = this.projects;
this.totalPages = response.data.totalPages;
this.projectsLanguages = [...new Set(this.projects.map((project) => project.language))]
.filter((language) => language !== '' && language !== null)
.map((language, i) => ({ index: i + 1, name: language }));
this.sortProjects(this.visibleProjects)
this.sortProjects(this.projects)
this.initLoading = false;
})
})
.catch((error) => {
notifyError({ error });
});
Expand Down
34 changes: 26 additions & 8 deletions src/pages/Settings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,8 @@
hide-no-data
selection="single"
v-model:selected="table.selected"
v-model:pagination="table.pagination"
hide-pagination
>
<template #top>
<div class="row q-gutter-md">
Expand Down Expand Up @@ -111,6 +113,13 @@
</q-td>
</template>
</q-table>
<div class="row justify-center q-mt-md">
<q-pagination
v-model="table.pagination.page"
:max="totalPages"
size="sm"
/>
</div>
</q-card-section>
<q-card-section class="row q-gutter-x-md" v-if="superAdmin">
<q-card flat bordered class="col">
Expand Down Expand Up @@ -280,7 +289,7 @@ export default defineComponent({
sortBy: 'projectName',
descending: true,
page: 1,
rowsPerPage: 10,
rowsPerPage: 4,
},
loadingDelete: false,
exporting: false,
Expand All @@ -295,7 +304,9 @@ export default defineComponent({
table,
projects,
languages,
projectsType: 'All',
projectsType: 'all_projects',
page: 1,
totalPages: 1,
}
},
computed: {
Expand All @@ -310,6 +321,12 @@ export default defineComponent({
}
}
},
watch: {
'table.pagination.page'() {
this.page = this.table.pagination.page;
this.getProjects();
},
},
mounted() {
this.getUsers();
this.mismatchProjects();
Expand Down Expand Up @@ -396,20 +413,21 @@ export default defineComponent({
},
getProjects() {
api
.getProjects()
.getProjects(this.page, this.projectsType)
.then((response) => {
for (const project of response.data) {
this.totalPages = response.data.totalPages;
for (const project of response.data.projects) {
this.projects.push({
projectName: project.projectName,
visibility: project.visibility,
language: project.language ? project.language : 'Not specified',
language: project.language,
owner: project.owner,
contact: project.contactOwner ? project.contactOwner : 'Not specified',
contact: project.contactOwner,
samplesNumber: project.numberSamples,
lastAccess: project.lastAccess,
lastWriteAccess: project.lastWriteAccess,
syncRepo: project.syncGithub ? project.syncGithub: 'Not synchronized',
config: project.config ? project.config: 'Not specified',
syncRepo: project.syncGithub,
config: project.config,
isOld: this.isOld(project),
blindAnnotationMode: project.blindAnnotationMode,
});
Expand Down
8 changes: 0 additions & 8 deletions src/pinia/modules/project/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,14 +99,6 @@ export const useProjectStore = defineStore('project', {
},
},
actions: {
isMyProject(project: project_extended_t) {
const projectMember = [...project.admins, ...project.annotators, ...project.validators, ...project.guests];
return projectMember.includes(useUserStore().username) || project.users.includes(useUserStore().username);
},
isOldProject(project: project_extended_t) {
const ayear = -3600 * 24 * 365;
return project.lastAccess < ayear || (project.numberSamples < 1 && project.lastAccess < -3600);
},
sortProjects(projects: project_extended_t[]) {
projects.sort((a, b) => b.lastAccess - a.lastAccess);
},
Expand Down

0 comments on commit 938576e

Please sign in to comment.