Use api schema to fetch visualizations

galaxyproject · Oct 30, 2023 · 2dd2d25 · 2dd2d25
1 parent c39ca60
commit 2dd2d25
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 17 deletions.
diff --git a/client/src/components/Grid/GridList.vue b/client/src/components/Grid/GridList.vue
@@ -23,11 +23,11 @@ interface Props {
     // specifies the grid config identifier as specified in the registry
     id: string;
     // rows per page to be shown
-    perPage?: number;
+    limit?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    perPage: 25,
+    limit: 25,
 });
 
 // contains the current grid data provided by the corresponding api endpoint
@@ -79,12 +79,13 @@ function applyFilter(filter: string, value: string | boolean, quoted = false) {
 async function getGridData() {
     if (gridConfig.value) {
         try {
+            const offset = props.limit * (currentPage.value - 1);
             const [responseData, responseTotal] = await gridConfig.value.getData(
-                currentPage.value,
-                props.perPage,
+                offset,
+                props.limit,
+                searchTerm.value,
                 sortBy.value,
-                sortDesc.value,
-                searchTerm.value
+                sortDesc.value
             );
             gridData.value = responseData;
             totalRows.value = responseTotal;
@@ -240,7 +241,7 @@ watch(operationMessage, () => {
             <BPagination
                 v-model="currentPage"
                 :total-rows="totalRows"
-                :per-page="perPage"
+                :per-page="limit"
                 class="m-0"
                 size="sm"
                 aria-controls="grid-table" />

diff --git a/client/src/components/Grid/configs/types.ts b/client/src/components/Grid/configs/types.ts
@@ -31,7 +31,7 @@ export interface Config {
     actions: Array<Action>;
     fields: Array<Field>;
     filtering: Filtering<string>;
-    getData: (currentPage: number, perPage: number, sortBy: string, sortDesc: boolean, search: string) => Promise<any>;
+    getData: (offset: number, limit: number, search: string, sort_by: string, sort_desc: boolean) => Promise<any>;
     item: string;
     plural: string;
     sortBy: string;

diff --git a/client/src/components/Grid/configs/visualizations.js b/client/src/components/Grid/configs/visualizations.js
@@ -1,21 +1,25 @@
 import axios from "axios";
 
+import { fetcher } from "@/api/schema";
 import Filtering, { contains, equals, expandNameTagWithQuotes, toBool } from "@/utils/filtering";
 import { withPrefix } from "@/utils/redirect";
 import { errorMessageAsString, rethrowSimple } from "@/utils/simple-error";
 
+export const visualizationsDetailedFetcher = fetcher.path("/api/visualizations/detailed").method("get").create();
+
 /**
  * Request and return data from server
  */
-async function getData(currentPage, perPage, sortBy, sortDesc, searchTerm) {
-    const offset = perPage * (currentPage - 1);
-    let q = `/api/visualizations/detailed?limit=${perPage}&offset=${offset}&sort_by=${sortBy}&sort_desc=${sortDesc}`;
-    if (searchTerm) {
-        q += `&search=${searchTerm}`;
-    }
-    const response = await axios.get(withPrefix(q));
-    const responseTotal = parseInt(response.headers.total_matches);
-    return [response.data, responseTotal];
+async function getData(offset, limit, search, sort_by, sort_desc) {
+    const { data, headers } = await visualizationsDetailedFetcher({
+        limit,
+        offset,
+        search,
+        sort_by,
+        sort_desc,
+    });
+    const totalMatches = parseInt(headers.get("total_matches") ?? 0);
+    return [data, totalMatches];
 }
 
 /**