Introduce reusable GTable component

client/src/api/datasets.ts

@@ -6,10 +6,54 @@ import {
     GalaxyApi,
     type GalaxyApiPaths,
     type HDADetailed,
+    type HDASummary,
 } from "@/api";
 import { withPrefix } from "@/utils/redirect";
 import { rethrowSimple } from "@/utils/simple-error";
 
+export interface LoadDatasetsOptions {
+    limit?: number;
+    offset?: number;
+    sortBy?: string;
+    sortDesc?: boolean;
+    search?: string;
+}
+
+export interface LoadDatasetsResult {
+    data: HDASummary[];
+    totalMatches: number;
+}
+
+export async function loadDatasets(options: LoadDatasetsOptions): Promise<LoadDatasetsResult> {
+    const { limit = 24, offset = 0, sortBy = "update_time", sortDesc = true, search = "" } = options;
+
+    const {
+        response,
+        data: datasets,
+        error,
+    } = await GalaxyApi().GET("/api/datasets", {
+        params: {
+            query: {
+                q: search ? ["name-contains"] : undefined,
+                qv: search ? [search] : undefined,
+                limit,
+                offset,
+                order: `${sortBy}${sortDesc ? "-dsc" : "-asc"}`,
+                view: "summary",
+            },
+        },
+    });
+
+    if (error) {
+        rethrowSimple(error);
+    }
+
+    const totalMatches = parseInt(response.headers.get("total_matches") ?? "0", 10) || 0;
+    const data = datasets as unknown as HDASummary[];
+
+    return { data, totalMatches };
+}
+
 export async function fetchDatasetTextContentDetails(params: { id: string }): Promise<DatasetTextContentDetails> {
     const { data, error } = await GalaxyApi().GET("/api/datasets/{dataset_id}/get_content_as_text", {
         params: {
@@ -56,11 +100,11 @@ export async function undeleteDataset(datasetId: string) {
     return data;
 }
 
-export async function purgeDataset(datasetId: string) {
+export async function deleteDataset(datasetId: string, purge: boolean = false) {
     const { data, error } = await GalaxyApi().DELETE("/api/datasets/{dataset_id}", {
         params: {
             path: { dataset_id: datasetId },
-            query: { purge: true },
+            query: { purge },
         },
     });
     if (error) {
@@ -69,6 +113,10 @@ export async function purgeDataset(datasetId: string) {
     return data;
 }
 
+export async function purgeDataset(datasetId: string) {
+    return deleteDataset(datasetId, true);
+}
+
 type CopyDatasetParamsType = GalaxyApiPaths["/api/histories/{history_id}/contents/{type}s"]["post"]["parameters"];
 type CopyDatasetBodyType = components["schemas"]["CreateHistoryContentPayload"];
 

client/src/components/Common/GTable.types.ts

@@ -0,0 +1,119 @@
+import type { SizeProp } from "@fortawesome/fontawesome-svg-core";
+import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+
+import type { BootstrapVariant } from "@/components/Common";
+
+/** Bootstrap component sizes */
+export type BootstrapSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+/** Table field sorting order */
+export type SortOrder = "asc" | "desc";
+
+/** Table field alignment options */
+export type FieldAlignment = "left" | "center" | "right";
+
+/** Table field definition */
+export interface TableField {
+    /** Unique key for the field (matches data property name) */
+    key: string;
+    /** Display label for the column header */
+    label?: string;
+    /** Whether the column is sortable */
+    sortable?: boolean;
+    /** Custom CSS classes for the column */
+    class?: string;
+    /** Custom CSS classes for the header cell */
+    headerClass?: string;
+    /** Custom CSS classes for data cells */
+    cellClass?: string;
+    /** Column alignment */
+    align?: FieldAlignment;
+    /** Width of the column (CSS value) */
+    width?: string;
+    /** Whether to hide the column on small screens */
+    hideOnSmall?: boolean;
+    /** Custom formatter function for cell values */
+    formatter?: (value: any, key: string, item: any) => string;
+}
+
+/** Sort change event payload */
+export interface SortChangeEvent {
+    /** The field key being sorted */
+    sortBy: string;
+    /** Whether sorting in descending order */
+    sortDesc: boolean;
+}
+
+/** Row click event payload */
+export interface RowClickEvent<T = any> {
+    /** The row item data */
+    item: T;
+    /** The row index */
+    index: number;
+    /** The original mouse/keyboard event */
+    event: MouseEvent | KeyboardEvent;
+}
+
+/** Row selection event payload */
+export interface RowSelectEvent<T = any> {
+    /** The selected row item */
+    item: T;
+    /** The row index */
+    index: number;
+    /** Whether the row is now selected */
+    selected: boolean;
+}
+
+/** Table action button configuration */
+export interface TableAction {
+    /** Unique identifier for the action */
+    id: string;
+    /** Display label for the action */
+    label: string;
+    /** Tooltip text */
+    title: string;
+    /** FontAwesome icon */
+    icon?: IconDefinition;
+    /** Bootstrap variant */
+    variant?: BootstrapVariant;
+    /** Whether the action is disabled */
+    disabled?: boolean;
+    /** Whether the action is visible */
+    visible?: boolean;
+    /** Bootstrap component size */
+    size?: BootstrapSize;
+    /** Vue Router route to navigate to */
+    to?: string;
+    /** Hyperlink reference */
+    href?: string;
+    /** Link target attribute */
+    target?: string;
+    /** Whether link opens in new tab/window */
+    externalLink?: boolean;
+    /** Click handler function */
+    handler?: (item: any, index: number) => void;
+}
+
+/** Empty state configuration */
+export interface TableEmptyState {
+    /** Message to display when no data */
+    message: string;
+    /** Optional icon to display */
+    icon?: IconDefinition;
+    /** Bootstrap variant for styling */
+    variant?: BootstrapVariant;
+}
+
+/** Row status icon configuration */
+export interface RowIcon {
+    /** FontAwesome icon (required) */
+    icon: IconDefinition;
+    /** Additional CSS classes */
+    class?: string;
+    /** Icon size (FontAwesome SizeProp) */
+    size?: SizeProp;
+    /** Tooltip text */
+    title?: string;
+    /** Whether icon should spin (loading state) */
+    spin?: boolean;
+}