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.
98 lines
2.8 KiB
98 lines
2.8 KiB
2 years ago
|
<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>
|