125 lines
3.1 KiB
Svelte
125 lines
3.1 KiB
Svelte
<script>
|
|
import Dialog from "../ui/Dialog.svelte";
|
|
import TableCudButtons from "../shorts/TableCUDButtons.svelte";
|
|
import Button from "../ui/Button.svelte";
|
|
import Table from "../table/Table.svelte";
|
|
import Field from "../form/Field.svelte";
|
|
import TextInput from "../form/TextInput.svelte";
|
|
import Search from "../ui/Search.svelte";
|
|
|
|
/**
|
|
* @typedef {Object} Props
|
|
* @property {boolean} [is_item_dialog_open]
|
|
* @property {boolean} [is_dialog_item_add]
|
|
* @property {string} [cur_dialog_name]
|
|
* @property {any} current_table
|
|
* @property {any} current_item
|
|
* @property {any} query
|
|
* @property {any} db
|
|
* @property {any} [toggle_add_dialog]
|
|
* @property {any} [open_item_edit]
|
|
* @property {any} [sql_insert_short]
|
|
* @property {any} [sql_update_short]
|
|
* @property {any} [sql_delete_short]
|
|
* @property {string} [second_col_name]
|
|
* @property {any} [columns]
|
|
* @property {any} [columns_display]
|
|
* @property {boolean} [is_searching] - export let is_searching = false;
|
|
* @property {import('svelte').Snippet} [second_value_input]
|
|
*/
|
|
|
|
/** @type {Props} */
|
|
let {
|
|
is_item_dialog_open = $bindable(false),
|
|
is_dialog_item_add = $bindable(false),
|
|
cur_dialog_name = "__example__",
|
|
current_table,
|
|
current_item = $bindable(),
|
|
query,
|
|
db,
|
|
toggle_add_dialog = () => {},
|
|
open_item_edit = (/** @type {any} */ item) => {},
|
|
sql_insert_short = async (
|
|
/** @type {any} */ arg1,
|
|
/** @type {any} */ arg2,
|
|
) => {},
|
|
sql_update_short = async (
|
|
/** @type {any} */ arg1,
|
|
/** @type {any} */ arg2,
|
|
) => {},
|
|
sql_delete_short = () => {},
|
|
second_col_name = "name",
|
|
columns = ["id", "name"],
|
|
columns_display = columns,
|
|
is_searching = $bindable(false),
|
|
second_value_input
|
|
} = $props();
|
|
|
|
let search_query_result = $state("");
|
|
</script>
|
|
|
|
<Dialog
|
|
bind:is_open={is_item_dialog_open}
|
|
on_close={() => {
|
|
is_dialog_item_add = false;
|
|
}}
|
|
name={cur_dialog_name}>
|
|
{#snippet children({ form })}
|
|
{#if !is_dialog_item_add}
|
|
<h1>{columns_display[0]} {current_item.id}</h1>
|
|
{/if}
|
|
|
|
<Field name={columns_display[1]}>
|
|
{#if second_value_input}{@render second_value_input()}{:else}
|
|
<TextInput bind:value={current_item[second_col_name]}></TextInput>
|
|
{/if}
|
|
</Field>
|
|
|
|
<TableCudButtons {form} bind:is_dialog_item_add
|
|
on_add={async () => {
|
|
await sql_insert_short(current_table, [second_col_name]);
|
|
}}
|
|
on_save={async () => {
|
|
await sql_update_short(current_table, [second_col_name]);
|
|
}}
|
|
on_delete={sql_delete_short}
|
|
></TableCudButtons>
|
|
{/snippet}
|
|
</Dialog>
|
|
|
|
<div class="m-2 flex space-x-2">
|
|
<Button
|
|
is_visible={!is_searching}
|
|
on_click={() => {
|
|
current_item = {id: 0};
|
|
current_item[second_col_name] = "";
|
|
toggle_add_dialog();
|
|
}}>
|
|
Добавить
|
|
</Button>
|
|
|
|
<Search
|
|
bind:is_searching
|
|
bind:current_item
|
|
bind:search_query_result
|
|
{columns}
|
|
{current_table}
|
|
></Search>
|
|
<!-- <Button -->
|
|
<!-- on_click={async () => { -->
|
|
<!-- await export_csv(data); -->
|
|
<!-- }} -->
|
|
<!-- > -->
|
|
<!-- CSV -->
|
|
<!-- </Button> -->
|
|
</div>
|
|
|
|
<Table
|
|
bind:is_searching
|
|
search_query={db.select(search_query_result)}
|
|
{open_item_edit}
|
|
{query}
|
|
{columns}
|
|
{columns_display}
|
|
></Table>
|