acazares
e8b8599335
- Added API client for OMA units of measure with CRUD operations. - Created API client for general unit measures with CRUD functionality. - Developed UI components for displaying and managing locations in a data table format. - Implemented data table actions for unit measures, including create, edit, and delete functionalities. - Integrated pagination and refresh capabilities in the data tables for both customs and general unit measures. - Enhanced user experience with dialogs for creating and editing units of measure. - Added server-side loading logic for fetching locations and units of measure with error handling.
77 lines
1.8 KiB
Svelte
77 lines
1.8 KiB
Svelte
<script lang="ts" generics="TData, TValue">
|
|
import {
|
|
type ColumnDef,
|
|
getCoreRowModel,
|
|
} from "@tanstack/table-core";
|
|
import { createSvelteTable, FlexRender } from "$lib/components/ui/data-table/index.js";
|
|
import * as Table from "$lib/components/ui/table/index.js";
|
|
|
|
type DataTableProps<TData, TValue> = {
|
|
columns: ColumnDef<TData, TValue>[];
|
|
data: TData[];
|
|
pageCount: number;
|
|
totalItems: number;
|
|
};
|
|
|
|
let {
|
|
data,
|
|
columns,
|
|
totalItems
|
|
}: DataTableProps<TData, TValue> = $props();
|
|
|
|
const table = createSvelteTable({
|
|
get data() {
|
|
return data;
|
|
},
|
|
columns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
});
|
|
</script>
|
|
|
|
<div class="rounded-md border">
|
|
<Table.Root>
|
|
<Table.Header>
|
|
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
|
|
<Table.Row>
|
|
{#each headerGroup.headers as header (header.id)}
|
|
<Table.Head>
|
|
{#if !header.isPlaceholder}
|
|
<FlexRender
|
|
content={header.column.columnDef.header}
|
|
context={header.getContext()}
|
|
/>
|
|
{/if}
|
|
</Table.Head>
|
|
{/each}
|
|
</Table.Row>
|
|
{/each}
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{#each table.getRowModel().rows as row (row.id)}
|
|
<Table.Row data-state={row.getIsSelected() && "selected"}>
|
|
{#each row.getVisibleCells() as cell (cell.id)}
|
|
<Table.Cell>
|
|
<FlexRender
|
|
content={cell.column.columnDef.cell}
|
|
context={cell.getContext()}
|
|
/>
|
|
</Table.Cell>
|
|
{/each}
|
|
</Table.Row>
|
|
{:else}
|
|
<Table.Row>
|
|
<Table.Cell colspan={columns.length} class="h-24 text-center">
|
|
No hay resultados.
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
{/each}
|
|
</Table.Body>
|
|
</Table.Root>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end space-x-2 py-4">
|
|
<div class="flex-1 text-sm text-muted-foreground">
|
|
Total: {totalItems} ubicaciones únicas
|
|
</div>
|
|
</div>
|