This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bandolier-template/admin/pages/Table.svelte

98 lines
2.8 KiB

<script>
import { link } from 'svelte-spa-router';
import Icon from "$/client/components/Icon.svelte";
import Spinner from "$/client/components/Spinner.svelte";
import Layout from "$/admin/Layout.svelte";
import api from "$/client/api.js";
import DataTable from "$/client/components/DataTable.svelte";
import { defer } from "$/client/helpers.js";
import { onMount } from "svelte";
let rows = [];
let column_names = [];
let pagination = { currentPage: 1 }
const load_promise = defer("datatable load promise");
export let params = {};
// BUG: this works around stupid in DataTable where
// paginating causes the link to id be invalid
const link_url = r => `/admin/#/table/${params.table}/${r.id}/`;
const update_data = async (url, options) => {
const { currentPage } = pagination;
options.currentPage = currentPage;
let [status, results] = await api.get(url, options);
if(status == 200) {
// generates the _url used by the DataTabe component
rows = results.data.map(r => {
r._url = link_url(r);
return r;
});
pagination = Object.assign(pagination, results.pagination);
if(rows.length > 0) {
column_names = Object.keys(rows[0]);
}
load_promise.resolve();
} else {
window.location = "/client/#/login";
}
}
const full_query = async () => {
await update_data('/api/admin/table', {name: params.table});
}
const search_query = async (event) => {
let search_text = event.detail;
await update_data('/api/admin/table', {name: params.table, search: search_text});
}
const clear_search = async () => {
await update_data('/api/admin/table', {name: params.table});
}
const cell_click = () => {
// I was going to the record when you click but that prevents people from
// copy-pasting the data. I think I'll leave it alone.
}
onMount(async () => {
await full_query();
});
</script>
<style>
content {
flex-direction: column;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
</style>
<Layout fullwidth={ true } authenticated={ true } testid="page-admin-table">
<content>
<h1><a href="/" use:link><Icon name="arrow-left-circle" size="36"/></a> { params.table } Table</h1>
{#await load_promise}
<Spinner />
{:then}
<DataTable rows={ rows }
columns={ column_names }
bind:pagination
on:full_query={ full_query }
on:search_query={ search_query }
on:clear_search={ clear_search }
on:cell_click={ cell_click }>
<a data-testid="link-create" href="/table/create/{params.table}/" use:link><Icon name="file-plus" size="36" tooltip="Create." /></a>
</DataTable>
{/await}
</content>
</Layout>