[ui] Sort organizations table

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]>
chaoss · Nov 20, 2024 · 324cc5e · 324cc5e
1 parent 42aeef4
commit 324cc5e
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 23 deletions.
diff --git a/releases/unreleased/order-organizations-by-number-of-enrollments.yml b/releases/unreleased/order-organizations-by-number-of-enrollments.yml
@@ -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.
diff --git a/tests/test_schema.py b/tests/test_schema.py
@@ -220,7 +220,7 @@
     }
   }
 }"""
-SH_ORGS_QUERY_ORDER_BY= """{
+SH_ORGS_QUERY_ORDER_BY = """{
   organizations (orderBy: "%s"){
     entities {
       name

diff --git a/ui/src/apollo/queries.js b/ui/src/apollo/queries.js
@@ -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",
   });

diff --git a/ui/src/components/OrganizationsTable.vue b/ui/src/components/OrganizationsTable.vue
@@ -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>

diff --git a/ui/src/views/Dashboard.vue b/ui/src/views/Dashboard.vue
@@ -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;
     },

diff --git a/ui/tests/unit/__snapshots__/storybook.spec.js.snap b/ui/tests/unit/__snapshots__/storybook.spec.js.snap
@@ -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>
 

diff --git a/ui/tests/unit/queries.spec.js b/ui/tests/unit/queries.spec.js
@@ -474,7 +474,7 @@ describe("OrganizationsTable", () => {
       },
     });
 
-    expect(query).toHaveBeenCalledWith(1, 10, { term: "Bitergia" });
+    expect(query).toHaveBeenCalledWith(1, 10, { term: "Bitergia" }, "-enrollments_count");
   });
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -474,7 +474,7 @@ describe("OrganizationsTable", () => { @@
           },
         });
-        expect(query).toHaveBeenCalledWith(1, 10, { term: "Bitergia" });
+        expect(query).toHaveBeenCalledWith(1, 10, { term: "Bitergia" }, "-enrollments_count");
       });
     });
@@ Expand Down @@