Skip to content

Commit

Permalink
[ui] Sort organizations table
Browse files Browse the repository at this point in the history
Makes the column headers in the organizations table
actionable to sort by any of its fields. The default
order is '-enrollments_count' to show the organizations
with the most enrollments first.

Signed-off-by: Eva Millán <[email protected]>
evamillan committed Nov 20, 2024
1 parent 42aeef4 commit 324cc5e
Showing 7 changed files with 86 additions and 23 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Sort organizations by number of enrollments
category: added
author: Eva Millán <[email protected]>
issue: 940
notes: >
Organizations are now sorted by the number of enrollments
they have by default. Clicking on a column header sorts the
table results by that field.
2 changes: 1 addition & 1 deletion tests/test_schema.py
Original file line number Diff line number Diff line change
@@ -220,7 +220,7 @@
}
}
}"""
SH_ORGS_QUERY_ORDER_BY= """{
SH_ORGS_QUERY_ORDER_BY = """{
organizations (orderBy: "%s"){
entities {
name
17 changes: 15 additions & 2 deletions ui/src/apollo/queries.js
Original file line number Diff line number Diff line change
@@ -108,8 +108,14 @@ const GET_PAGINATED_ORGANIZATIONS = gql`
$page: Int!
$pageSize: Int!
$filters: OrganizationFilterType
$orderBy: String
) {
organizations(page: $page, pageSize: $pageSize, filters: $filters) {
organizations(
page: $page
pageSize: $pageSize
filters: $filters
orderBy: $orderBy
) {
entities {
id
name
@@ -364,13 +370,20 @@ const getProfileByUuid = (apollo, uuid) => {
return response;
};

const getPaginatedOrganizations = (apollo, currentPage, pageSize, filters) => {
const getPaginatedOrganizations = (
apollo,
currentPage,
pageSize,
filters,
orderBy
) => {
let response = apollo.query({
query: GET_PAGINATED_ORGANIZATIONS,
variables: {
page: currentPage,
pageSize: pageSize,
filters: filters,
orderBy: orderBy,
},
fetchPolicy: "no-cache",
});
32 changes: 27 additions & 5 deletions ui/src/components/OrganizationsTable.vue
Original file line number Diff line number Diff line change
@@ -43,6 +43,7 @@
hover
return-object
@update:expanded="($event) => (expandedItems = $event)"
@update:sortBy="sortItems($event)"
>
<template v-slot:item="{ item, internalItem, toggleExpand, isExpanded }">
<organization-entry
@@ -241,12 +242,12 @@ export default {
data() {
return {
headers: [
{ value: "name", title: "Name", sortable: false },
{ value: "name", title: "Name", sortable: true },
{
value: "enrollments",
value: "enrollments_count",
title: "Enrollments",
align: "end",
sortable: false,
sortable: true,
},
{ value: "actions", sortable: false },
],
@@ -278,17 +279,27 @@ export default {
},
loading: false,
error: null,
sortBy: "-enrollments_count",
};
},
created() {
this.getTableItems(1);
},
methods: {
async getTableItems(page = this.page, filters = this.filters) {
async getTableItems(
page = this.page,
filters = this.filters,
sortBy = this.sortBy
) {
this.loading = true;
this.error = null;
try {
let response = await this.fetchPage(page, this.itemsPerPage, filters);
let response = await this.fetchPage(
page,
this.itemsPerPage,
filters,
sortBy
);
if (response) {
this.items = response.entities;
this.pageCount = response.pageInfo.numPages;
@@ -528,6 +539,17 @@ export default {
this.$logger.error(`Error merging ${fromOrg} with ${toOrg}: ${error}`);
}
},
sortItems(options) {
if (options[0]) {
const key = options[0].key;
const order = options[0].order === "asc" ? "-" : "";
this.sortBy = `${order}${key}`;
} else {
this.sortBy = "-enrollments_count";
}
this.getTableItems();
},
},
};
</script>
5 changes: 3 additions & 2 deletions ui/src/views/Dashboard.vue
Original file line number Diff line number Diff line change
@@ -153,12 +153,13 @@ export default {
);
return response;
},
async getOrganizationsPage(page, items, filters) {
async getOrganizationsPage(page, items, filters, orderBy) {
const response = await getPaginatedOrganizations(
this.$apollo,
page,
items,
filters
filters,
orderBy
);
return response.data.organizations;
},
42 changes: 30 additions & 12 deletions ui/tests/unit/__snapshots__/storybook.spec.js.snap
Original file line number Diff line number Diff line change
@@ -29779,7 +29779,7 @@ exports[`Storybook Tests OrganizationsTable Groups 1`] = `
<tr>

<th
class="v-data-table__td v-data-table-column--align-start v-data-table__th"
class="v-data-table__td v-data-table-column--align-start v-data-table__th v-data-table__th--sortable"
colspan="1"
rowspan="1"
>
@@ -29790,13 +29790,16 @@ exports[`Storybook Tests OrganizationsTable Groups 1`] = `
<span>
Name
</span>
<!---->
<i
aria-hidden="true"
class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon"
/>
<!---->
</div>

</th>
<th
class="v-data-table__td v-data-table-column--align-end v-data-table__th"
class="v-data-table__td v-data-table-column--align-end v-data-table__th v-data-table__th--sortable"
colspan="1"
rowspan="1"
>
@@ -29807,7 +29810,10 @@ exports[`Storybook Tests OrganizationsTable Groups 1`] = `
<span>
Enrollments
</span>
<!---->
<i
aria-hidden="true"
class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon"
/>
<!---->
</div>

@@ -30769,7 +30775,7 @@ exports[`Storybook Tests OrganizationsTable OnError 1`] = `
<tr>

<th
class="v-data-table__td v-data-table-column--align-start v-data-table__th"
class="v-data-table__td v-data-table-column--align-start v-data-table__th v-data-table__th--sortable"
colspan="1"
rowspan="1"
>
@@ -30780,13 +30786,16 @@ exports[`Storybook Tests OrganizationsTable OnError 1`] = `
<span>
Name
</span>
<!---->
<i
aria-hidden="true"
class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon"
/>
<!---->
</div>

</th>
<th
class="v-data-table__td v-data-table-column--align-end v-data-table__th"
class="v-data-table__td v-data-table-column--align-end v-data-table__th v-data-table__th--sortable"
colspan="1"
rowspan="1"
>
@@ -30797,7 +30806,10 @@ exports[`Storybook Tests OrganizationsTable OnError 1`] = `
<span>
Enrollments
</span>
<!---->
<i
aria-hidden="true"
class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon"
/>
<!---->
</div>

@@ -31362,7 +31374,7 @@ exports[`Storybook Tests OrganizationsTable Organizations 1`] = `
<tr>

<th
class="v-data-table__td v-data-table-column--align-start v-data-table__th"
class="v-data-table__td v-data-table-column--align-start v-data-table__th v-data-table__th--sortable"
colspan="1"
rowspan="1"
>
@@ -31373,13 +31385,16 @@ exports[`Storybook Tests OrganizationsTable Organizations 1`] = `
<span>
Name
</span>
<!---->
<i
aria-hidden="true"
class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon"
/>
<!---->
</div>

</th>
<th
class="v-data-table__td v-data-table-column--align-end v-data-table__th"
class="v-data-table__td v-data-table-column--align-end v-data-table__th v-data-table__th--sortable"
colspan="1"
rowspan="1"
>
@@ -31390,7 +31405,10 @@ exports[`Storybook Tests OrganizationsTable Organizations 1`] = `
<span>
Enrollments
</span>
<!---->
<i
aria-hidden="true"
class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon"
/>
<!---->
</div>

2 changes: 1 addition & 1 deletion ui/tests/unit/queries.spec.js
Original file line number Diff line number Diff line change
@@ -474,7 +474,7 @@ describe("OrganizationsTable", () => {
},
});

expect(query).toHaveBeenCalledWith(1, 10, { term: "Bitergia" });
expect(query).toHaveBeenCalledWith(1, 10, { term: "Bitergia" }, "-enrollments_count");
});
});

0 comments on commit 324cc5e

Please sign in to comment.