This is the code that runs https://bandolier.learnjsthehardway.com/ for you to review. It uses the https://git.learnjsthehardway.com/learn-javascript-the-hard-way/bandolier-template to create the documentation for the project.
https://bandolier.learnjsthehardway.com/
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.
72 lines
2.8 KiB
72 lines
2.8 KiB
2 years ago
|
<script>
|
||
|
|
import DataTable from "$/client/components/DataTable.svelte";
|
||
|
|
import Icon from "$/client/components/Icon.svelte";
|
||
|
|
import { link } from 'svelte-spa-router';
|
||
|
|
import { log } from "$/client/logging.js";
|
||
|
|
import { onMount } from "svelte";
|
||
|
|
|
||
|
|
let rows = [
|
||
|
|
{_url: "/", id: 1, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 2, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 3, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 4, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 5, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 7, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 7, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 8, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 9, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 10, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 11, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 12, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 13, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 14, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 15, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 16, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 17, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 18, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 19, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 20, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
{_url: "/", id: 21, name: "Zed", age: 100, eyes: "Blue", hair: "Bald"},
|
||
|
|
];
|
||
|
|
|
||
|
|
let column_names = Object.keys(rows[0]);
|
||
|
|
|
||
|
|
let pagination = { currentPage: 1, lastPage: 1 }
|
||
|
|
|
||
|
|
const full_query = async (event) => {
|
||
|
|
log.debug("QUERY", event.detail);
|
||
|
|
}
|
||
|
|
|
||
|
|
const search_query = async (event) => {
|
||
|
|
let search_text = event.detail;
|
||
|
|
|
||
|
|
log.debug("SEARCH", search_text);
|
||
|
|
}
|
||
|
|
|
||
|
|
const clear_search = async (event) => {
|
||
|
|
log.debug("CLEAR", event.detail);
|
||
|
|
}
|
||
|
|
|
||
|
|
const cell_click = (event) => {
|
||
|
|
log.debug("CELL", event.detail);
|
||
|
|
}
|
||
|
|
|
||
|
|
onMount(async () => {
|
||
|
|
await full_query();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<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 href="/admin/table/" use:link><Icon name="arrow-left" size="36" /></a>
|
||
|
|
<a href="/admin/table/create/table/" use:link><Icon name="file-plus" size="36" /></a>
|
||
|
|
|
||
|
|
</DataTable>
|