svelte 5 components
This commit is contained in:
relaxed
parent
14f7b1231f
commit
c6ef8ebe3a
6584
package-lock.json
generated
6584
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
32
package.json
32
package.json
@ -13,23 +13,23 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tauri-apps/api": "^2.1.1",
|
||||
"@tauri-apps/plugin-opener": "^2.2.2",
|
||||
"@tauri-apps/plugin-fs": "~2.0.4",
|
||||
"@tauri-apps/plugin-shell": "^2.2.0",
|
||||
"@tauri-apps/plugin-sql": "~2.0.2"
|
||||
"@tauri-apps/api": "2.2.0",
|
||||
"@tauri-apps/plugin-fs": "2.0.4",
|
||||
"@tauri-apps/plugin-opener": "2.2.3",
|
||||
"@tauri-apps/plugin-shell": "2.2.0",
|
||||
"@tauri-apps/plugin-sql": "2.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-static": "^3.0.8",
|
||||
"@sveltejs/kit": "^2.15.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
||||
"svelte": "^5.15.0",
|
||||
"svelte-check": "^4.1.1",
|
||||
"typescript": "~5.6.3",
|
||||
"vite": "^6.0.5",
|
||||
"@tauri-apps/cli": "^2.1.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^3.4.17"
|
||||
"@sveltejs/adapter-static": "3.0.8",
|
||||
"@sveltejs/kit": "2.15.2",
|
||||
"@sveltejs/vite-plugin-svelte": "5.0.3",
|
||||
"svelte": "5.17.3",
|
||||
"svelte-check": "4.1.3",
|
||||
"typescript": "5.6.3",
|
||||
"vite": "6.0.7",
|
||||
"@tauri-apps/cli": "2.2.2",
|
||||
"autoprefixer": "10.4.20",
|
||||
"postcss": "8.4.49",
|
||||
"tailwindcss": "3.4.17"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
<script>
|
||||
export let value;
|
||||
export let is_required = true;
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {any} value
|
||||
* @property {boolean} [is_required]
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let { value = $bindable(), is_required = true } = $props();
|
||||
</script>
|
||||
|
||||
{#if is_required}
|
||||
|
||||
@ -1,6 +1,17 @@
|
||||
<script>
|
||||
export let name = "";
|
||||
export let is_vertical = false;
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {string} [name]
|
||||
* @property {boolean} [is_vertical]
|
||||
* @property {import('svelte').Snippet} [children]
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let {
|
||||
name = $bindable(""),
|
||||
is_vertical = false,
|
||||
children
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
@ -9,5 +20,5 @@
|
||||
flex justify-start"
|
||||
>
|
||||
<h1>{name}</h1>
|
||||
<slot />
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
||||
@ -2,25 +2,25 @@
|
||||
import Select from "./Select.svelte";
|
||||
import Button from "../ui/Button.svelte";
|
||||
import x from "$lib/components/ui/x.svg";
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {Array<number>} [value]
|
||||
* @property {any} [on_change]
|
||||
* @property {any} item_list_query
|
||||
*/
|
||||
|
||||
/** @type {Array<number>} */
|
||||
export let value = [];
|
||||
|
||||
export let on_change = () => {};
|
||||
|
||||
export let item_list_query;
|
||||
/** @type {Props} */
|
||||
let { value = $bindable([]), on_change = () => {}, item_list_query } = $props();
|
||||
</script>
|
||||
|
||||
{#each value as _, item_index}
|
||||
<div class="w-full mb-2 space-x-2 flex justify-center items-center">
|
||||
<Select
|
||||
bind:value={value[item_index]}
|
||||
query={item_list_query}
|
||||
{on_change}
|
||||
let:vtype
|
||||
>
|
||||
{vtype.name}
|
||||
{vtype.id}
|
||||
<Select bind:value={value[item_index]}
|
||||
query={item_list_query} {on_change}>
|
||||
{#snippet children({ vtype })}
|
||||
{vtype.name}
|
||||
{vtype.id}
|
||||
{/snippet}
|
||||
</Select>
|
||||
<Button
|
||||
type={"second"}
|
||||
@ -29,8 +29,7 @@
|
||||
value.splice(item_index, 1);
|
||||
value = value;
|
||||
await on_change();
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<img src={x} class="w-[30px] invert" alt="x close img" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,23 @@
|
||||
<script>
|
||||
export let value = 0;
|
||||
export let is_float = false;
|
||||
export let min = 0;
|
||||
export let max = 999999999;
|
||||
export let step = "0.1";
|
||||
export let is_required = true;
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {number} [value]
|
||||
* @property {boolean} [is_float]
|
||||
* @property {number} [min]
|
||||
* @property {number} [max]
|
||||
* @property {string} [step]
|
||||
* @property {boolean} [is_required]
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let {
|
||||
value = $bindable(),
|
||||
is_float = false,
|
||||
min = 0,
|
||||
max = 999999999,
|
||||
step = "0.1",
|
||||
is_required = true
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#if is_float && is_required}
|
||||
@ -15,7 +28,7 @@
|
||||
{step}
|
||||
{value}
|
||||
required
|
||||
on:input={(e) => (value = parseFloat(e.target.value))}
|
||||
oninput={(e) => (value = parseFloat(e.target.value))}
|
||||
class="w-full p-2 mx-2
|
||||
border-2 border-black dark:border-none
|
||||
bg-white dark:bg-black
|
||||
@ -28,7 +41,7 @@
|
||||
{max}
|
||||
{step}
|
||||
{value}
|
||||
on:input={(e) => (value = parseFloat(e.target.value))}
|
||||
oninput={(e) => (value = parseFloat(e.target.value))}
|
||||
class="w-full p-2 mx-2
|
||||
border-2 border-black dark:border-none
|
||||
bg-white dark:bg-black
|
||||
@ -43,7 +56,7 @@
|
||||
{max}
|
||||
{value}
|
||||
required
|
||||
on:input={(e) => (value = Number(e.target.value))}
|
||||
oninput={(e) => (value = Number(e.target.value))}
|
||||
class="w-full p-2 mx-2
|
||||
border-2 border-black dark:border-none
|
||||
bg-white dark:bg-black
|
||||
@ -55,7 +68,7 @@
|
||||
{min}
|
||||
{max}
|
||||
{value}
|
||||
on:input={(e) => (value = Number(e.target.value))}
|
||||
oninput={(e) => (value = Number(e.target.value))}
|
||||
class="w-full p-2 mx-2
|
||||
border-2 border-black dark:border-none
|
||||
bg-white dark:bg-black
|
||||
|
||||
@ -72,8 +72,14 @@
|
||||
});
|
||||
|
||||
const pattern = ".{22,}";
|
||||
export let phone = "+7 ";
|
||||
export let is_required = true;
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {string} [phone]
|
||||
* @property {boolean} [is_required]
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let { phone = $bindable("+7 "), is_required = true } = $props();
|
||||
</script>
|
||||
|
||||
{#if is_required}
|
||||
|
||||
@ -1,32 +1,42 @@
|
||||
<script>
|
||||
export let value;
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {any} value
|
||||
* @property {any} query
|
||||
* @property {boolean} [is_required]
|
||||
* @property {any} [on_change]
|
||||
* @property {import('svelte').Snippet<[any]>} [children]
|
||||
*/
|
||||
|
||||
export let query;
|
||||
export let is_required = true;
|
||||
|
||||
export let on_change = () => {};
|
||||
/** @type {Props} */
|
||||
let {
|
||||
value = $bindable(),
|
||||
query,
|
||||
is_required = true,
|
||||
on_change = () => {},
|
||||
children
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#if is_required}
|
||||
<select
|
||||
required
|
||||
bind:value
|
||||
on:change={on_change}
|
||||
onchange={on_change}
|
||||
class="w-full h-min p-2
|
||||
border-2 border-black dark:border-none
|
||||
bg-white dark:bg-black
|
||||
text-black dark:text-white
|
||||
appearance-none"
|
||||
>
|
||||
appearance-none">
|
||||
{#await query then vtypes}
|
||||
{#each vtypes as vtype}
|
||||
{#if vtype.id === value}
|
||||
<option selected value={vtype.id}>
|
||||
<slot {vtype} />
|
||||
{@render children?.({ vtype, })}
|
||||
</option>
|
||||
{:else}
|
||||
<option value={vtype.id}>
|
||||
<slot {vtype} />
|
||||
{@render children?.({ vtype, })}
|
||||
</option>
|
||||
{/if}
|
||||
{/each}
|
||||
@ -39,17 +49,16 @@
|
||||
border-2 border-black dark:border-none
|
||||
bg-white dark:bg-black
|
||||
text-black dark:text-white
|
||||
appearance-none"
|
||||
>
|
||||
appearance-none">
|
||||
{#await query then vtypes}
|
||||
{#each vtypes as vtype}
|
||||
{#if vtype.id === value}
|
||||
<option selected value={vtype.id}>
|
||||
<slot {vtype} />
|
||||
{@render children?.({ vtype, })}
|
||||
</option>
|
||||
{:else}
|
||||
<option value={vtype.id}>
|
||||
<slot {vtype} />
|
||||
{@render children?.({ vtype, })}
|
||||
</option>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
@ -1,9 +1,21 @@
|
||||
<script>
|
||||
export let is_input = true;
|
||||
export let value = "";
|
||||
export let min_len = 0;
|
||||
export let max_len = 100;
|
||||
export let is_required = true;
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {boolean} [is_input]
|
||||
* @property {string} [value]
|
||||
* @property {number} [min_len]
|
||||
* @property {number} [max_len]
|
||||
* @property {boolean} [is_required]
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let {
|
||||
is_input = true,
|
||||
value = $bindable(),
|
||||
min_len = 0,
|
||||
max_len = 100,
|
||||
is_required = true
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#if is_input && is_required}
|
||||
@ -13,7 +25,7 @@
|
||||
maxlength={max_len}
|
||||
{value}
|
||||
required
|
||||
on:input={(e) => (value = e.target.value)}
|
||||
oninput={(e) => (value = e.target.value)}
|
||||
class="w-full p-2 mx-2
|
||||
border-2 border-black dark:border-none
|
||||
bg-white dark:bg-black
|
||||
@ -25,7 +37,7 @@
|
||||
minlength={min_len}
|
||||
maxlength={max_len}
|
||||
{value}
|
||||
on:input={(e) => (value = e.target.value)}
|
||||
oninput={(e) => (value = e.target.value)}
|
||||
class="w-full p-2 mx-2
|
||||
border-2 border-black dark:border-none
|
||||
bg-white dark:bg-black
|
||||
@ -37,7 +49,7 @@
|
||||
<textarea
|
||||
required
|
||||
{value}
|
||||
on:input={(e) => (value = e.target.value)}
|
||||
oninput={(e) => (value = e.target.value)}
|
||||
class="w-full p-2 mx-2
|
||||
border-2 border-black dark:border-none
|
||||
bg-white dark:bg-black
|
||||
@ -46,7 +58,7 @@
|
||||
{:else if !is_input}
|
||||
<textarea
|
||||
{value}
|
||||
on:input={(e) => (value = e.target.value)}
|
||||
oninput={(e) => (value = e.target.value)}
|
||||
class="w-full p-2 mx-2
|
||||
border-2 border-black dark:border-none
|
||||
bg-white dark:bg-black
|
||||
|
||||
@ -1,27 +1,40 @@
|
||||
<script>
|
||||
import Button from "../ui/Button.svelte";
|
||||
import Search from "../ui/Search.svelte";
|
||||
export let is_searching = false;
|
||||
|
||||
/** @type {any} */
|
||||
export let current_item;
|
||||
export let search_query_result = "";
|
||||
export let columns = ["id", "name"];
|
||||
export let current_table;
|
||||
|
||||
export let on_add_click = () => {};
|
||||
|
||||
export let toggle_add_dialog = () => {};
|
||||
|
||||
export let joins = "";
|
||||
|
||||
/** @typedef SearchParam
|
||||
* @property {string} name
|
||||
* @property {boolean} is_number
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {boolean} [is_searching]
|
||||
* @property {any} current_item
|
||||
* @property {string} [search_query_result]
|
||||
* @property {any} [columns]
|
||||
* @property {any} current_table
|
||||
* @property {any} [on_add_click]
|
||||
* @property {any} [toggle_add_dialog]
|
||||
* @property {string} [joins]
|
||||
* @property {string} [search_names]
|
||||
* @property {Array<SearchParam>} [ex_params]
|
||||
* @property {import('svelte').Snippet<[any]>} [children]
|
||||
*/
|
||||
|
||||
/** @type {Array<SearchParam>}*/
|
||||
export let ex_params = [];
|
||||
/** @type {Props} */
|
||||
let {
|
||||
is_searching = $bindable(false),
|
||||
current_item = $bindable(),
|
||||
search_query_result = $bindable(""),
|
||||
columns = ["id", "name"],
|
||||
current_table,
|
||||
on_add_click = () => {},
|
||||
toggle_add_dialog = () => {},
|
||||
joins = "",
|
||||
search_names = "*",
|
||||
ex_params = [],
|
||||
children
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div class="m-2 flex space-x-2">
|
||||
@ -30,8 +43,7 @@
|
||||
on_click={() => {
|
||||
on_add_click();
|
||||
toggle_add_dialog();
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
Добавить
|
||||
</Button>
|
||||
<Search
|
||||
@ -46,4 +58,4 @@
|
||||
></Search>
|
||||
</div>
|
||||
|
||||
<slot {is_searching} {search_query_result} />
|
||||
{@render children?.({ is_searching, search_query_result, })}
|
||||
|
||||
@ -1,12 +1,22 @@
|
||||
<script>
|
||||
import Button from "../ui/Button.svelte";
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {boolean} [is_dialog_item_add]
|
||||
* @property {any} [on_add]
|
||||
* @property {any} [on_save]
|
||||
* @property {any} [on_delete]
|
||||
* @property {any} [form]
|
||||
*/
|
||||
|
||||
export let is_dialog_item_add = false;
|
||||
export let on_add = async () => {};
|
||||
export let on_save = async () => {};
|
||||
export let on_delete = async () => {};
|
||||
|
||||
export let form = null;
|
||||
/** @type {Props} */
|
||||
let {
|
||||
is_dialog_item_add = $bindable(false),
|
||||
on_add = async () => {},
|
||||
on_save = async () => {},
|
||||
on_delete = async () => {},
|
||||
form = null
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#if is_dialog_item_add}
|
||||
@ -15,9 +25,8 @@
|
||||
if (form === null || form.checkValidity()) {
|
||||
await on_add();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Добавить
|
||||
}}>
|
||||
Добавить
|
||||
</Button>
|
||||
{:else}
|
||||
<div class="flex w-max space-x-2">
|
||||
@ -26,9 +35,8 @@
|
||||
if (form === null || form.checkValidity()) {
|
||||
await on_save();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Сохранить
|
||||
}}>
|
||||
Сохранить
|
||||
</Button>
|
||||
<Button on_click={on_delete}>Удалить</Button>
|
||||
</div>
|
||||
|
||||
@ -7,40 +7,55 @@
|
||||
import TextInput from "../form/TextInput.svelte";
|
||||
import Search from "../ui/Search.svelte";
|
||||
|
||||
export let is_item_dialog_open = false;
|
||||
export let is_dialog_item_add = false;
|
||||
/**
|
||||
* @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]
|
||||
*/
|
||||
|
||||
export let cur_dialog_name = "__example__";
|
||||
export let current_table;
|
||||
|
||||
/** @type {any} */
|
||||
export let current_item;
|
||||
|
||||
export let query;
|
||||
|
||||
export let db;
|
||||
|
||||
export let toggle_add_dialog = () => {};
|
||||
export let open_item_edit = (/** @type {any} */ item) => {};
|
||||
|
||||
export let sql_insert_short = async (
|
||||
/** @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,
|
||||
) => {};
|
||||
export let sql_update_short = async (
|
||||
) => {},
|
||||
sql_update_short = async (
|
||||
/** @type {any} */ arg1,
|
||||
/** @type {any} */ arg2,
|
||||
) => {};
|
||||
export let sql_delete_short = () => {};
|
||||
) => {},
|
||||
sql_delete_short = () => {},
|
||||
second_col_name = "name",
|
||||
columns = ["id", "name"],
|
||||
columns_display = columns,
|
||||
is_searching = $bindable(false),
|
||||
second_value_input
|
||||
} = $props();
|
||||
|
||||
export let second_col_name = "name";
|
||||
export let columns = ["id", "name"];
|
||||
export let columns_display = columns;
|
||||
|
||||
// export let is_searching = false;
|
||||
export let is_searching = false;
|
||||
|
||||
let search_query_result = "";
|
||||
let search_query_result = $state("");
|
||||
</script>
|
||||
|
||||
<Dialog
|
||||
@ -48,43 +63,38 @@
|
||||
on_close={() => {
|
||||
is_dialog_item_add = false;
|
||||
}}
|
||||
name={cur_dialog_name}
|
||||
let:form
|
||||
>
|
||||
{#if !is_dialog_item_add}
|
||||
<h1>{columns_display[0]} {current_item.id}</h1>
|
||||
{/if}
|
||||
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]}>
|
||||
<slot name="second_value_input">
|
||||
<TextInput bind:value={current_item[second_col_name]}></TextInput>
|
||||
</slot>
|
||||
</Field>
|
||||
<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>
|
||||
<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 = {id: 0};
|
||||
current_item[second_col_name] = "";
|
||||
toggle_add_dialog();
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
Добавить
|
||||
</Button>
|
||||
|
||||
|
||||
@ -1,20 +1,22 @@
|
||||
<script>
|
||||
import Spinner from "../ui/Spinner.svelte";
|
||||
import Table from "../table/Table.svelte";
|
||||
import Tr from "../table/Tr.svelte";
|
||||
import Atd from "../table/Atd.svelte";
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {any} query
|
||||
* @property {Array<string>} [columns]
|
||||
* @property {Array<string>} [names]
|
||||
*/
|
||||
|
||||
export let query;
|
||||
|
||||
/** @type {Array<string>} */
|
||||
export let columns = [];
|
||||
|
||||
/** @type {Array<string>} */
|
||||
export let names = [];
|
||||
/** @type {Props} */
|
||||
let { query, columns = [], names = [] } = $props();
|
||||
</script>
|
||||
|
||||
<Table {columns} {query} let:item let:index>
|
||||
<Tr {index}>
|
||||
<Atd {item} {names}></Atd>
|
||||
</Tr>
|
||||
<Table {columns} {query} >
|
||||
{#snippet children({ item, index })}
|
||||
<Tr {index}>
|
||||
<Atd {item} {names}></Atd>
|
||||
</Tr>
|
||||
{/snippet}
|
||||
</Table>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<script>
|
||||
import Td from "./Td.svelte";
|
||||
/** @type {any} */
|
||||
export let item = {};
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {any} [item]
|
||||
* @property {Array<string>} [names]
|
||||
*/
|
||||
|
||||
/** @type {Array<string>} */
|
||||
export let names = [];
|
||||
/** @type {Props} */
|
||||
let { item = {}, names = [] } = $props();
|
||||
</script>
|
||||
|
||||
{#each names as name}
|
||||
<Td>
|
||||
{item[name]}
|
||||
</Td>
|
||||
<Td>{item[name]}</Td>
|
||||
{/each}
|
||||
|
||||
@ -2,15 +2,30 @@
|
||||
import Atd from "./Atd.svelte";
|
||||
import Tr from "./Tr.svelte";
|
||||
import Spinner from "../ui/Spinner.svelte";
|
||||
// export let data;
|
||||
export let columns = ["__empty__"];
|
||||
export let columns_display = columns;
|
||||
export let class_name = "";
|
||||
export let query;
|
||||
export let open_item_edit = (/** @type {any} */ item) => {};
|
||||
|
||||
export let is_searching = false;
|
||||
export let search_query;
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {any} [columns] - export let data;
|
||||
* @property {any} [columns_display]
|
||||
* @property {string} [class_name]
|
||||
* @property {any} query
|
||||
* @property {any} [open_item_edit]
|
||||
* @property {boolean} [is_searching]
|
||||
* @property {any} search_query
|
||||
* @property {import('svelte').Snippet<[any]>} [children]
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let {
|
||||
columns = ["__empty__"],
|
||||
columns_display = columns,
|
||||
class_name = "",
|
||||
query,
|
||||
open_item_edit = (/** @type {any} */ item) => {},
|
||||
is_searching = $bindable(),
|
||||
search_query,
|
||||
children
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#if !is_searching}
|
||||
@ -21,9 +36,8 @@
|
||||
<tbody>
|
||||
<tr
|
||||
class="w-full sticky
|
||||
bg-black text-white"
|
||||
style="inset-block-start: 0;"
|
||||
>
|
||||
bg-black text-white"
|
||||
style="inset-block-start: 0;">
|
||||
{#each columns_display as column_name}
|
||||
<td class="w-max p-2 text-center">
|
||||
{column_name}
|
||||
@ -31,17 +45,18 @@
|
||||
{/each}
|
||||
</tr>
|
||||
{#each data as item, i}
|
||||
<slot {item} index={i}>
|
||||
{#if children}{@render children({ item, index: i, })}{:else}
|
||||
<Tr on_click={() => open_item_edit(item)} index={i}>
|
||||
<Atd {item} names={columns}></Atd>
|
||||
</Tr>
|
||||
</slot>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{:catch}
|
||||
<h1>Не удалось загрузить данные</h1>
|
||||
{/await}
|
||||
|
||||
{:else if search_query !== ""}
|
||||
{#await search_query}
|
||||
<Spinner></Spinner>
|
||||
@ -50,9 +65,8 @@
|
||||
<tbody>
|
||||
<tr
|
||||
class="w-full sticky
|
||||
bg-black text-white"
|
||||
style="inset-block-start: 0;"
|
||||
>
|
||||
bg-black text-white"
|
||||
style="inset-block-start: 0;">
|
||||
{#each columns_display as column_name}
|
||||
<td class="w-max p-2 text-center">
|
||||
{column_name}
|
||||
@ -60,11 +74,11 @@
|
||||
{/each}
|
||||
</tr>
|
||||
{#each data as item, i}
|
||||
<slot {item} index={i}>
|
||||
{#if children}{@render children({ item, index: i, })}{:else}
|
||||
<Tr on_click={() => open_item_edit(item)} index={i}>
|
||||
<Atd {item} names={columns}></Atd>
|
||||
</Tr>
|
||||
</slot>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -1,5 +1,13 @@
|
||||
<td
|
||||
class="p-2 border-[1px] border-black overflow-hidden text-ellipsis break-words"
|
||||
>
|
||||
<slot />
|
||||
<script>
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {import('svelte').Snippet} [children]
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<td class="p-2 border-[1px] border-black overflow-hidden text-ellipsis break-words">
|
||||
{@render children?.()}
|
||||
</td>
|
||||
|
||||
@ -1,18 +1,19 @@
|
||||
<script>
|
||||
export let index = 0;
|
||||
export let on_click = () => {};
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {number} [index]
|
||||
* @property {any} [on_click]
|
||||
* @property {import('svelte').Snippet} [children]
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let { index = 0, on_click = () => {}, children } = $props();
|
||||
</script>
|
||||
|
||||
<!-- class="bg-white dark:bg-gray-800" -->
|
||||
<!-- {index % 2 == 0 ? 'text-white' : 'text-black'} -->
|
||||
<!-- {index % 2 == 0 ? 'bg-[#444]' : 'bg-[#dcdcdc]'}" -->
|
||||
<tr
|
||||
on:click={on_click}
|
||||
class="
|
||||
text-black dark:text-white
|
||||
{index % 2 == 0
|
||||
? 'bg-[#fff] dark:bg-gray-800'
|
||||
: 'bg-[#e0e0e0] dark:bg-gray-700'}"
|
||||
>
|
||||
<slot />
|
||||
<tr onclick={on_click}
|
||||
class="text-black dark:text-white
|
||||
{index % 2 == 0
|
||||
? 'bg-[#fff] dark:bg-gray-800'
|
||||
: 'bg-[#e0e0e0] dark:bg-gray-700'}">
|
||||
{@render children?.()}
|
||||
</tr>
|
||||
|
||||
@ -1,12 +1,23 @@
|
||||
<script>
|
||||
export let is_visible = true;
|
||||
export let on_click = () => {};
|
||||
export let on_submit = () => {};
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {boolean} [is_visible]
|
||||
* @property {any} [on_click]
|
||||
* @property {any} [on_submit]
|
||||
* @property {'primary' | 'regular' | 'second'} [type]
|
||||
* @property {string} [class_name]
|
||||
* @property {import('svelte').Snippet} [children]
|
||||
*/
|
||||
|
||||
/** @type {'primary' | 'regular' | 'second'} */
|
||||
export let type = "primary";
|
||||
|
||||
export let class_name = "";
|
||||
/** @type {Props} */
|
||||
let {
|
||||
is_visible = true,
|
||||
on_click = () => {},
|
||||
on_submit = () => {},
|
||||
type = "primary",
|
||||
class_name = "",
|
||||
children
|
||||
} = $props();
|
||||
|
||||
let styles = {
|
||||
// bg-[#6664AF] dark:bg-[#6664AF] text-white text-2xl
|
||||
@ -29,7 +40,7 @@ shadow-[-2px_-2px_#000] dark:shadow-[-2px_-2px_var(--b-border)] ${class_name}`,
|
||||
</script>
|
||||
|
||||
{#if is_visible}
|
||||
<button type="submit" class={styles[type]} on:click={on_click}>
|
||||
<slot />
|
||||
<button type="submit" class={styles[type]} onclick={on_click}>
|
||||
{@render children?.()}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
@ -1,18 +1,31 @@
|
||||
<script>
|
||||
// import ThemeSwitch from "./ThemeSwitch.svelte";
|
||||
import x from "./x.svg";
|
||||
export let is_open = false;
|
||||
export let is_name_editable = false;
|
||||
export let name = "";
|
||||
export let class_name = "";
|
||||
export let on_close = () => {
|
||||
is_open = false;
|
||||
};
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {boolean} [is_open]
|
||||
* @property {boolean} [is_name_editable]
|
||||
* @property {string} [name]
|
||||
* @property {string} [class_name]
|
||||
* @property {any} [on_close]
|
||||
* @property {import('svelte').Snippet<[any]>} [children]
|
||||
*/
|
||||
|
||||
let dialog;
|
||||
/** @type {Props} */
|
||||
let {
|
||||
is_open = $bindable(false),
|
||||
is_name_editable = false,
|
||||
name = $bindable(""),
|
||||
class_name = "",
|
||||
on_close = () => {
|
||||
is_open = false;
|
||||
},
|
||||
children
|
||||
} = $props();
|
||||
|
||||
let dialog = $state();
|
||||
let local_open = false;
|
||||
|
||||
function toggle_dialog(_) {
|
||||
function toggle_dialog(/** @type {any} */_) {
|
||||
if (is_open && local_open) {
|
||||
dialog.showModal();
|
||||
document.addEventListener("keydown", (event) => {
|
||||
@ -36,9 +49,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
$: _ = toggle_dialog(is_open);
|
||||
let _ = $derived(toggle_dialog(is_open));
|
||||
|
||||
let form;
|
||||
let form = $state();
|
||||
</script>
|
||||
|
||||
<dialog
|
||||
@ -50,16 +63,14 @@
|
||||
{is_open ? 'visible opacity-100' : 'invisible opacity-0'}
|
||||
backdrop-blur-sm
|
||||
bg-[#000000aa]
|
||||
transition-all duration-300"
|
||||
>
|
||||
transition-all duration-300">
|
||||
<div
|
||||
class="w-[700px] h-[800px] mx-4 px-2 flex flex-col
|
||||
border-[var(--w-border)] dark:border-[var(--b-border)] border-2 rounded-xl
|
||||
bg-[var(--w-bg-second)] dark:bg-[var(--b-bg-second)]
|
||||
text-[var(--w-text)] dark:text-[var(--b-text)] text-2xl
|
||||
overflow-hidden
|
||||
{class_name}"
|
||||
>
|
||||
{class_name}">
|
||||
<div class=" relative flex flex-initial justify-between items-center">
|
||||
{#if is_name_editable}
|
||||
<input
|
||||
@ -72,27 +83,16 @@
|
||||
{name}
|
||||
</p>
|
||||
{/if}
|
||||
<button
|
||||
on:click={() => {
|
||||
<button class="size-[60px] m-2 pb-3">
|
||||
onclick={() => {
|
||||
is_open = false;
|
||||
on_close();
|
||||
}}
|
||||
class="size-[60px] m-2 pb-3"
|
||||
>
|
||||
<img
|
||||
src={x}
|
||||
class="size-[40px] dark:invert"
|
||||
alt="x close img"
|
||||
/>
|
||||
<img src={x} class="size-[40px] dark:invert" alt="x close img"/>
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
bind:this={form}
|
||||
action="/"
|
||||
target="_self"
|
||||
class="overflow-y-auto"
|
||||
>
|
||||
<slot {form}></slot>
|
||||
<form bind:this={form} action="/" target="_self" class="overflow-y-auto">
|
||||
{@render children?.({ form, })}
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
@ -1,25 +1,28 @@
|
||||
<script>
|
||||
import Button from "./Button.svelte";
|
||||
let form;
|
||||
let login = "";
|
||||
let passoword = "";
|
||||
let form = $state();
|
||||
let login = $state("");
|
||||
let passoword = $state("");
|
||||
|
||||
export let is_logedin = false;
|
||||
export let access_level = "";
|
||||
export let check_login = async (l, p) => [false, ""];
|
||||
let is_error = false;
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {boolean} [is_logedin]
|
||||
* @property {string} [access_level]
|
||||
* @property {any} [check_login]
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let { is_logedin = $bindable(false), access_level = $bindable(""), check_login = async (l, p) => [false, ""] } = $props();
|
||||
let is_error = $state(false);
|
||||
</script>
|
||||
|
||||
{#if !is_logedin}
|
||||
<div
|
||||
class="w-full h-full pr-4 overflow-y-auto
|
||||
flex justify-center items-center
|
||||
bg-[var(--w-bg-second)] dark:bg-[#111]"
|
||||
>
|
||||
<form
|
||||
bind:this={form}
|
||||
class="flex flex-col justify-center items-center"
|
||||
>
|
||||
bg-[var(--w-bg-second)] dark:bg-[#111]">
|
||||
<form bind:this={form}
|
||||
class="flex flex-col justify-center items-center">
|
||||
<h1 class="text-4xl">Вход</h1>
|
||||
<input
|
||||
type="text"
|
||||
@ -68,9 +71,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
Войти
|
||||
}}>Войти
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -1,35 +1,38 @@
|
||||
<script>
|
||||
import ThemeSwitch from "./ThemeSwitch.svelte";
|
||||
import Button from "./Button.svelte";
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {'tables' | 'viewes'} [current_page]
|
||||
* @property {any} [db_scheme]
|
||||
* @property {boolean} [is_view_open]
|
||||
* @property {any} [check_access]
|
||||
* @property {boolean} [is_logedin]
|
||||
* @property {boolean} [is_loaded]
|
||||
* @property {any} [on_logout]
|
||||
*/
|
||||
|
||||
// /** @type {'tables' | 'viewes'} */
|
||||
export let current_page = "";
|
||||
|
||||
/** @type {any} */
|
||||
export let db_scheme = {};
|
||||
|
||||
export let is_view_open = false;
|
||||
|
||||
export let check_access = (name) => false;
|
||||
|
||||
export let is_logedin = false;
|
||||
|
||||
export let is_loaded = false;
|
||||
|
||||
export let on_logout = () => {};
|
||||
/** @type {Props} */
|
||||
let {
|
||||
current_page = $bindable(""),
|
||||
db_scheme = {},
|
||||
is_view_open = $bindable(false),
|
||||
check_access = (name) => false,
|
||||
is_logedin = false,
|
||||
is_loaded = false,
|
||||
on_logout = () => {}
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="w-full h-[80px] mb-2 pr-4 text-xl flex-initial
|
||||
flex justify-between items-center
|
||||
bg-[var(--w-bg-second)] dark:bg-[#111]"
|
||||
>
|
||||
<div class="w-full h-[80px] mb-2 pr-4 text-xl flex-initial
|
||||
flex justify-between items-center
|
||||
bg-[var(--w-bg-second)] dark:bg-[#111]">
|
||||
<div class="flex">
|
||||
{#if is_logedin && is_loaded}
|
||||
{#each Object.entries(db_scheme) as page_name}
|
||||
{#if check_access(page_name[0])}
|
||||
<button
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
is_view_open = false;
|
||||
current_page = page_name[0];
|
||||
}}
|
||||
@ -48,10 +51,7 @@
|
||||
<div class="space-x-4 flex justify-center items-center">
|
||||
<ThemeSwitch></ThemeSwitch>
|
||||
{#if is_logedin && is_loaded}
|
||||
<Button
|
||||
on_click={on_logout}
|
||||
class_name={"!text-black hover:!text-white dark:!text-white bg-[var(--w-red)] dark:bg-[var(--b-red)]"}
|
||||
>
|
||||
<Button on_click={on_logout} class_name={"!text-black hover:!text-white dark:!text-white bg-[var(--w-red)] dark:bg-[var(--b-red)]"}>
|
||||
Выход
|
||||
</Button>
|
||||
{/if}
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
async function sql_delete_short() {
|
||||
await db.execute(
|
||||
await db?.execute(
|
||||
`delete from ${current_table} where id = ${current_item.id}`,
|
||||
);
|
||||
is_item_dialog_open = false;
|
||||
@ -56,15 +56,15 @@
|
||||
.map((el) => format_type_insert(current_item[el]))
|
||||
.filter((el) => el !== null)
|
||||
.join(", ")}) ${ex ? ex : ""}`;
|
||||
const res = await db.execute(q);
|
||||
const res = await db?.execute(q);
|
||||
is_item_dialog_open = false;
|
||||
toggle_update();
|
||||
return res;
|
||||
}
|
||||
/**
|
||||
@param {string} name
|
||||
@param {any} an
|
||||
*/
|
||||
* @param {string} name
|
||||
* @param {any} an
|
||||
*/
|
||||
function format_type_update(name, an) {
|
||||
if (typeof an === "string") {
|
||||
return `${name} = "${an}"`;
|
||||
@ -81,57 +81,56 @@
|
||||
* @param {Array<string>} columns
|
||||
*/
|
||||
async function sql_update_short(table_name, columns) {
|
||||
// let q = `UPDATE ${table_name} SET
|
||||
// ${columns.map((el) => (typeof current_item[el] === "string" ? `${el} = "${current_item[el]}"` : `${el} = ${current_item[el]}`)).join(", ")}
|
||||
// WHERE id = ${current_item.id}`;
|
||||
let q = `UPDATE ${table_name} SET
|
||||
${columns
|
||||
let q = `UPDATE ${table_name} SET ${columns
|
||||
.map((el) => format_type_update(el, current_item[el]))
|
||||
.filter((el) => el !== null)
|
||||
.join(", ")}
|
||||
WHERE id = ${current_item.id}`;
|
||||
// console.log(q);
|
||||
await db.execute(q);
|
||||
await db?.execute(q);
|
||||
is_item_dialog_open = false;
|
||||
toggle_update();
|
||||
}
|
||||
|
||||
export let db_scheme;
|
||||
let current_table = $state("");
|
||||
let current_view = $state("");
|
||||
let is_view_open = $state(false);
|
||||
|
||||
/** @type {any} */
|
||||
export let current_item = {};
|
||||
let is_logedin = $state(false);
|
||||
|
||||
/** @type {Database} */
|
||||
export let db;
|
||||
let access_level = $state("");
|
||||
|
||||
let is_loaded = $state(false);
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {any} db_scheme
|
||||
* @property {any} [current_item]
|
||||
* @property {Database | undefined} db
|
||||
* @property {boolean} [is_item_dialog_open]
|
||||
* @property {boolean} [is_dialog_item_add]
|
||||
* @property {boolean} [is_login_requied]
|
||||
* @property {any} [check_access]
|
||||
* @property {any} [check_login]
|
||||
* @property {any} [load_db]
|
||||
* @property {import('svelte').Snippet<[any]>} [children]
|
||||
*/
|
||||
|
||||
/** @type {Props} */
|
||||
let {
|
||||
db_scheme,
|
||||
current_item = $bindable({}),
|
||||
db,
|
||||
is_item_dialog_open = $bindable(false),
|
||||
is_dialog_item_add = $bindable(false),
|
||||
is_login_requied = true,
|
||||
check_access = $bindable((access_level, tab_name, name) => false),
|
||||
check_login = $bindable(async (login, passowrd) => [false, ""]),
|
||||
load_db = async () => {},
|
||||
children
|
||||
} = $props();
|
||||
|
||||
/** @type {string} */
|
||||
let current_page = Object.entries(db_scheme)[0][0];
|
||||
let current_page = $state(Object.entries(db_scheme)[0][0]);
|
||||
|
||||
let current_table = "";
|
||||
let current_view = "";
|
||||
let is_view_open = false;
|
||||
|
||||
export let is_item_dialog_open = false;
|
||||
export let is_dialog_item_add = false;
|
||||
|
||||
let is_logedin = false;
|
||||
export let is_login_requied = true;
|
||||
|
||||
let access_level = "";
|
||||
/**
|
||||
* @param {string} access_level
|
||||
* @param {string} tab_name
|
||||
* @param {string | null} name
|
||||
*/
|
||||
export let check_access = (access_level, tab_name, name) => false;
|
||||
/**
|
||||
* @param {string} login
|
||||
* @param {string} passowrd
|
||||
*/
|
||||
export let check_login = async (login, passowrd) => [false, ""];
|
||||
|
||||
let is_loaded = false;
|
||||
export let load_db = async () => {};
|
||||
onMount(async () => {
|
||||
await load_db();
|
||||
is_loaded = true;
|
||||
@ -141,9 +140,10 @@ WHERE id = ${current_item.id}`;
|
||||
check_login = async () => [true, ""];
|
||||
}
|
||||
});
|
||||
$: cur_dialog_name = is_dialog_item_add
|
||||
|
||||
let cur_dialog_name = $derived(is_dialog_item_add
|
||||
? `Добавить в ${db_scheme[current_page].tables[current_table]}`
|
||||
: `Изменить ${db_scheme[current_page].tables[current_table]}`;
|
||||
: `Изменить ${db_scheme[current_page].tables[current_table]}`);
|
||||
</script>
|
||||
|
||||
<NavBar
|
||||
@ -175,28 +175,14 @@ WHERE id = ${current_item.id}`;
|
||||
bind:current_view
|
||||
bind:is_view_open
|
||||
db_scheme={db_scheme[current_page]}
|
||||
check_access={(name) => check_access(access_level, current_page, name)}
|
||||
check_access={(/** @type {any} */name) => check_access(access_level, current_page, name)}
|
||||
></SideMenu>
|
||||
|
||||
<div
|
||||
class="w-full pr-4 overflow-y-auto rounded-tl-xl
|
||||
bg-[var(--w-bg-second)] dark:bg-[#111]"
|
||||
>
|
||||
<div class="w-full pr-4 overflow-y-auto rounded-tl-xl
|
||||
bg-[var(--w-bg-second)] dark:bg-[#111]">
|
||||
<LoginForm bind:is_logedin bind:access_level {check_login}></LoginForm>
|
||||
{#if is_loaded && is_logedin}
|
||||
<slot
|
||||
{current_page}
|
||||
{current_table}
|
||||
{current_view}
|
||||
{is_view_open}
|
||||
{cur_dialog_name}
|
||||
{toggle_update}
|
||||
{toggle_add_dialog}
|
||||
{open_item_edit}
|
||||
{sql_update_short}
|
||||
{sql_insert_short}
|
||||
{sql_delete_short}
|
||||
/>
|
||||
{@render children?.({ current_page, current_table, current_view, is_view_open, cur_dialog_name, toggle_update, toggle_add_dialog, open_item_edit, sql_update_short, sql_insert_short, sql_delete_short })}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,29 +1,37 @@
|
||||
<script>
|
||||
import Button from "./Button.svelte";
|
||||
|
||||
export let is_searching = false;
|
||||
|
||||
export let search_value = "";
|
||||
export let search_query_result = "";
|
||||
|
||||
/** @type {any} */
|
||||
export let current_item;
|
||||
|
||||
export let columns = ["id", "name"];
|
||||
|
||||
export let current_table = "";
|
||||
|
||||
export let joins = "";
|
||||
|
||||
/** @typedef SearchParam
|
||||
* @property {string} name
|
||||
* @property {boolean} is_number
|
||||
*/
|
||||
|
||||
/** @type {Array<SearchParam>}*/
|
||||
export let ex_params = [];
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {boolean} [is_searching]
|
||||
* @property {string} [search_value]
|
||||
* @property {string} [search_query_result]
|
||||
* @property {any} current_item
|
||||
* @property {any} [columns]
|
||||
* @property {string} [current_table]
|
||||
* @property {string} [joins]
|
||||
* @property {string} [search_names]
|
||||
* @property {Array<SearchParam>} [ex_params]
|
||||
* @property {boolean} [is_contains]
|
||||
*/
|
||||
|
||||
export let is_contains = true;
|
||||
/** @type {Props} */
|
||||
let {
|
||||
is_searching = $bindable(false),
|
||||
search_value = $bindable(""),
|
||||
search_query_result = $bindable(""),
|
||||
current_item = $bindable(),
|
||||
columns = ["id", "name"],
|
||||
current_table = "",
|
||||
joins = "",
|
||||
search_names = "*",
|
||||
ex_params = [],
|
||||
is_contains = $bindable(true)
|
||||
} = $props();
|
||||
|
||||
/**
|
||||
* @param {string} thing
|
||||
@ -71,7 +79,7 @@
|
||||
|
||||
const search_splitted = search_purified.split(" ");
|
||||
|
||||
columns.forEach((el) => {
|
||||
columns.forEach((/** @type {any} */ el) => {
|
||||
const param = make_sql_param(el, current_item[el], search_purified);
|
||||
|
||||
if (param !== null) {
|
||||
@ -88,21 +96,13 @@
|
||||
|
||||
if (ex_params.length !== 0) {
|
||||
ex_params.forEach((el) => {
|
||||
const param = make_sql_param(
|
||||
el.name,
|
||||
el.is_number ? null : "",
|
||||
search_purified,
|
||||
);
|
||||
const param = make_sql_param(el.name, el.is_number ? null : "", search_purified,);
|
||||
|
||||
if (param !== null) {
|
||||
params.push(param);
|
||||
}
|
||||
search_splitted.forEach((sp) => {
|
||||
const param = make_sql_param(
|
||||
el.name,
|
||||
el.is_number ? null : "",
|
||||
sp,
|
||||
);
|
||||
const param = make_sql_param(el.name,el.is_number ? null : "",sp);
|
||||
if (param !== null && !params.includes(param)) {
|
||||
params.push(param);
|
||||
}
|
||||
@ -113,21 +113,17 @@
|
||||
if (params.length === 0) {
|
||||
search_query_result = "";
|
||||
} else {
|
||||
search_query_result = `SELECT * FROM ${current_table} ${joins} WHERE ${params.join(" OR ")}`;
|
||||
search_query_result = `SELECT ${search_names} FROM ${current_table} ${joins} WHERE ${params.join(" OR ")}`;
|
||||
}
|
||||
|
||||
// console.log(`SELECT * FROM ${current_table} \n${joins} \nWHERE \n${params.join(" OR ")}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="">
|
||||
<div class=" flex justify-start items-center">
|
||||
<Button
|
||||
<Button type={is_searching ? "second" : "primary"}
|
||||
on_click={() => {
|
||||
is_searching = !is_searching;
|
||||
}}
|
||||
type={is_searching ? "second" : "primary"}
|
||||
>
|
||||
}}>
|
||||
{#if is_searching}
|
||||
{"<-"}
|
||||
{:else}
|
||||
@ -136,15 +132,12 @@
|
||||
</Button>
|
||||
|
||||
{#if is_searching}
|
||||
<input
|
||||
type="text"
|
||||
<input type="text"
|
||||
bind:value={search_value}
|
||||
on:input={on_input}
|
||||
oninput={on_input}
|
||||
class=" w-full mx-4 p-2 text-xl border-black border-2
|
||||
bg-[#fff] dark:bg-gray-800
|
||||
dark:text-white
|
||||
"
|
||||
/>
|
||||
bg-[#fff] dark:bg-gray-800
|
||||
dark:text-white"/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if is_searching}
|
||||
@ -153,11 +146,11 @@
|
||||
type="checkbox"
|
||||
class="size-7 mr-4"
|
||||
checked
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
is_contains = !is_contains;
|
||||
on_input("");
|
||||
}}
|
||||
/> похоже?
|
||||
/>похоже?
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -1,34 +1,41 @@
|
||||
<script>
|
||||
export let current_table = "";
|
||||
export let current_view = "";
|
||||
export let is_view_open = false;
|
||||
/**
|
||||
* @typedef {Object} Props
|
||||
* @property {string} [current_table]
|
||||
* @property {string} [current_view]
|
||||
* @property {boolean} [is_view_open]
|
||||
* @property {any} [db_scheme]
|
||||
* @property {any} [check_access]
|
||||
* @property {boolean} [is_logedin]
|
||||
* @property {boolean} [is_loaded]
|
||||
*/
|
||||
|
||||
export let db_scheme = { tables: {}, viewes: {} };
|
||||
|
||||
export let check_access = (name) => false;
|
||||
|
||||
export let is_logedin = false;
|
||||
|
||||
export let is_loaded = false;
|
||||
/** @type {Props} */
|
||||
let {
|
||||
current_table = $bindable(""),
|
||||
current_view = $bindable(""),
|
||||
is_view_open = $bindable(false),
|
||||
db_scheme = { tables: {}, viewes: {} },
|
||||
check_access = (/** @type {any} */ name) => false,
|
||||
is_logedin = false,
|
||||
is_loaded = false
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="w-[240px] h-full text-xl p-3 mr-2 flex-initial rounded-tr-xl
|
||||
bg-[var(--w-bg-second)] dark:bg-[var(--b-bg-second)]"
|
||||
>
|
||||
<div class="w-[240px] h-full text-xl p-3 mr-2 flex-initial rounded-tr-xl
|
||||
bg-[var(--w-bg-second)] dark:bg-[var(--b-bg-second)]">
|
||||
{#if is_logedin && is_loaded}
|
||||
{#if Object.entries(db_scheme.viewes).length !== 0 && Object.entries(db_scheme.viewes).some( (el) => check_access(el[0]), )}
|
||||
<button
|
||||
on:click={() => {
|
||||
onclick={() => {
|
||||
is_view_open = !is_view_open;
|
||||
}}
|
||||
class="py-2 my-1 w-full
|
||||
{is_view_open
|
||||
? 'bg-[#d8efff] dark:bg-[#114040]'
|
||||
: 'bg-[var(--w-button-bg)] dark:bg-black text-[var(--w-accent-text)] dark:text-[var(--b-accent-text)]'}
|
||||
border-2 border-[var(--w-border)] dark:border-[var(--b-border)]"
|
||||
>
|
||||
Отчеты
|
||||
border-2 border-[var(--w-border)] dark:border-[var(--b-border)]">
|
||||
Отчеты
|
||||
</button>
|
||||
|
||||
<div class="my-3 border-b-4 rounded-xl border-cyan-500"></div>
|
||||
@ -36,11 +43,8 @@
|
||||
{#each !is_view_open ? Object.entries(db_scheme.tables) : Object.entries(db_scheme.viewes) as item_name}
|
||||
{#if check_access(item_name[0])}
|
||||
<button
|
||||
on:click={() => {
|
||||
if (
|
||||
`${current_table}` === item_name[0] ||
|
||||
current_view === item_name[0]
|
||||
) {
|
||||
onclick={() => {
|
||||
if (`${current_table}` === item_name[0] || current_view === item_name[0]) {
|
||||
current_table = "";
|
||||
current_view = "";
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let is_resize = false;
|
||||
let is_transparent = false;
|
||||
let is_dark = true;
|
||||
let is_update = false;
|
||||
let is_resize = $state(false);
|
||||
let is_transparent = $state(false);
|
||||
let is_dark = $state(true);
|
||||
let is_update = $state(false);
|
||||
|
||||
function handleSwitchDarkMode() {
|
||||
setTimeout(() => {
|
||||
@ -40,13 +40,13 @@
|
||||
|
||||
{#if !is_update}
|
||||
<div class="min-w-[40px] min-h-[40px] flex justify-center items-center">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="group min-h-[50px] min-w-[50px] rounded-full flex justify-center items-center
|
||||
{is_dark ? 'bg-[var(--w-bg)]' : 'bg-[var(--b-bg)]'}
|
||||
"
|
||||
on:click={handleSwitchDarkMode}
|
||||
onclick={handleSwitchDarkMode}
|
||||
>
|
||||
<div
|
||||
class=" rounded-full
|
||||
|
||||
@ -4,15 +4,10 @@ import { sveltekit } from "@sveltejs/kit/vite";
|
||||
// @ts-expect-error process is a nodejs global
|
||||
const host = process.env.TAURI_DEV_HOST;
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig(async () => ({
|
||||
plugins: [sveltekit()],
|
||||
|
||||
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
|
||||
//
|
||||
// 1. prevent vite from obscuring rust errors
|
||||
clearScreen: false,
|
||||
// 2. tauri expects a fixed port, fail if that port is not available
|
||||
server: {
|
||||
port: 1420,
|
||||
strictPort: true,
|
||||
@ -25,7 +20,6 @@ export default defineConfig(async () => ({
|
||||
}
|
||||
: undefined,
|
||||
watch: {
|
||||
// 3. tell vite to ignore watching `src-tauri`
|
||||
ignored: ["**/src-tauri/**"],
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user