Prettier for Event Badges
This commit is contained in:
Scott Idem
@@ -1,77 +1,76 @@
|
||||
<script lang="ts">
|
||||
import { liveQuery } from 'dexie';
|
||||
import { Pencil, Plus, Trash2 } from '@lucide/svelte';
|
||||
import { events_func } from '$lib/ae_events/ae_events_functions';
|
||||
import { ae_api } from '$lib/stores/ae_stores';
|
||||
import { Modal } from 'flowbite-svelte';
|
||||
import Comp_badge_template_form from './ae_comp__badge_template_form.svelte';
|
||||
import { liveQuery } from 'dexie';
|
||||
import { Pencil, Plus, Trash2 } from '@lucide/svelte';
|
||||
import { events_func } from '$lib/ae_events/ae_events_functions';
|
||||
import { ae_api } from '$lib/stores/ae_stores';
|
||||
import { Modal } from 'flowbite-svelte';
|
||||
import Comp_badge_template_form from './ae_comp__badge_template_form.svelte';
|
||||
|
||||
interface Props {
|
||||
data: any; // PageData from SvelteKit
|
||||
}
|
||||
interface Props {
|
||||
data: any; // PageData from SvelteKit
|
||||
}
|
||||
|
||||
let { data }: Props = $props();
|
||||
let { data }: Props = $props();
|
||||
|
||||
let event_id = $derived(data.params.event_id);
|
||||
let event_id = $derived(data.params.event_id);
|
||||
|
||||
let show_create_template_modal: boolean = $state(false);
|
||||
let selected_template_id: string | null = $state(null);
|
||||
let show_edit_template_modal: boolean = $state(false);
|
||||
let show_create_template_modal: boolean = $state(false);
|
||||
let selected_template_id: string | null = $state(null);
|
||||
let show_edit_template_modal: boolean = $state(false);
|
||||
|
||||
let lq__badge_templates = $derived(
|
||||
liveQuery(async () => {
|
||||
const result =
|
||||
await events_func.load_ae_obj_li__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_id: event_id,
|
||||
log_lvl: 0
|
||||
});
|
||||
return result || [];
|
||||
})
|
||||
);
|
||||
let lq__badge_templates = $derived(
|
||||
liveQuery(async () => {
|
||||
const result = await events_func.load_ae_obj_li__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_id: event_id,
|
||||
log_lvl: 0
|
||||
});
|
||||
return result || [];
|
||||
})
|
||||
);
|
||||
|
||||
function handle_create_success() {
|
||||
show_create_template_modal = false;
|
||||
// Trigger a refresh of the list (by updating a store or re-fetching)
|
||||
// For now, relying on liveQuery to react to DB changes
|
||||
}
|
||||
function handle_create_success() {
|
||||
show_create_template_modal = false;
|
||||
// Trigger a refresh of the list (by updating a store or re-fetching)
|
||||
// For now, relying on liveQuery to react to DB changes
|
||||
}
|
||||
|
||||
function handle_edit_success() {
|
||||
show_edit_template_modal = false;
|
||||
selected_template_id = null;
|
||||
// Trigger a refresh of the list
|
||||
}
|
||||
function handle_edit_success() {
|
||||
show_edit_template_modal = false;
|
||||
selected_template_id = null;
|
||||
// Trigger a refresh of the list
|
||||
}
|
||||
|
||||
function handle_cancel() {
|
||||
show_create_template_modal = false;
|
||||
show_edit_template_modal = false;
|
||||
selected_template_id = null;
|
||||
}
|
||||
function handle_cancel() {
|
||||
show_create_template_modal = false;
|
||||
show_edit_template_modal = false;
|
||||
selected_template_id = null;
|
||||
}
|
||||
|
||||
function edit_template(template_id: string) {
|
||||
selected_template_id = template_id;
|
||||
show_edit_template_modal = true;
|
||||
}
|
||||
function edit_template(template_id: string) {
|
||||
selected_template_id = template_id;
|
||||
show_edit_template_modal = true;
|
||||
}
|
||||
|
||||
async function delete_template(template_id: string) {
|
||||
if (
|
||||
confirm(
|
||||
'Are you sure you want to delete this badge template? This action cannot be undone.'
|
||||
)
|
||||
) {
|
||||
try {
|
||||
await events_func.delete_ae_obj_id__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_id: event_id,
|
||||
event_badge_template_id: template_id
|
||||
});
|
||||
// Rely on liveQuery to refresh list
|
||||
} catch (error) {
|
||||
console.error('Error deleting template:', error);
|
||||
alert('Failed to delete template.');
|
||||
}
|
||||
async function delete_template(template_id: string) {
|
||||
if (
|
||||
confirm(
|
||||
'Are you sure you want to delete this badge template? This action cannot be undone.'
|
||||
)
|
||||
) {
|
||||
try {
|
||||
await events_func.delete_ae_obj_id__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_id: event_id,
|
||||
event_badge_template_id: template_id
|
||||
});
|
||||
// Rely on liveQuery to refresh list
|
||||
} catch (error) {
|
||||
console.error('Error deleting template:', error);
|
||||
alert('Failed to delete template.');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -85,8 +84,7 @@
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onclick={() => (show_create_template_modal = true)}
|
||||
>
|
||||
onclick={() => (show_create_template_modal = true)}>
|
||||
<Plus size="1em" class="mr-2" /> Add New Template
|
||||
</button>
|
||||
</div>
|
||||
@@ -97,8 +95,7 @@
|
||||
<ul class="list-group">
|
||||
{#each $lq__badge_templates as template (template.event_badge_template_id)}
|
||||
<li
|
||||
class="list-group-item flex justify-between items-center"
|
||||
>
|
||||
class="list-group-item flex items-center justify-between">
|
||||
<span>{template.name}</span>
|
||||
<div>
|
||||
<button
|
||||
@@ -107,8 +104,7 @@
|
||||
onclick={() =>
|
||||
edit_template(
|
||||
template.event_badge_template_id
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
<Pencil size="1em" aria-hidden="true" /> Edit
|
||||
</button>
|
||||
<button
|
||||
@@ -117,8 +113,7 @@
|
||||
onclick={() =>
|
||||
delete_template(
|
||||
template.event_badge_template_id
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
<Trash2 size="1em" aria-hidden="true" /> Delete
|
||||
</button>
|
||||
</div>
|
||||
@@ -143,8 +138,7 @@
|
||||
<Comp_badge_template_form
|
||||
{event_id}
|
||||
onsuccess={handle_create_success}
|
||||
oncancel={handle_cancel}
|
||||
/>
|
||||
oncancel={handle_cancel} />
|
||||
</div>
|
||||
</Modal>
|
||||
{/if}
|
||||
@@ -156,8 +150,7 @@
|
||||
{event_id}
|
||||
template_id={selected_template_id}
|
||||
onsuccess={handle_edit_success}
|
||||
oncancel={handle_cancel}
|
||||
/>
|
||||
oncancel={handle_cancel} />
|
||||
</div>
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
@@ -1,151 +1,150 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
import { Loader2 } from '@lucide/svelte';
|
||||
import type { key_val } from '$lib/stores/ae_stores';
|
||||
import { events_func } from '$lib/ae_events/ae_events_functions';
|
||||
import { ae_api } from '$lib/stores/ae_stores';
|
||||
import { untrack } from 'svelte';
|
||||
import { Loader2 } from '@lucide/svelte';
|
||||
import type { key_val } from '$lib/stores/ae_stores';
|
||||
import { events_func } from '$lib/ae_events/ae_events_functions';
|
||||
import { ae_api } from '$lib/stores/ae_stores';
|
||||
|
||||
interface Props {
|
||||
event_id: string;
|
||||
template_id?: string | null; // Null for creation, string for editing
|
||||
onsuccess?: (result: any) => void;
|
||||
onerror?: (error: any) => void;
|
||||
oncancel?: () => void;
|
||||
interface Props {
|
||||
event_id: string;
|
||||
template_id?: string | null; // Null for creation, string for editing
|
||||
onsuccess?: (result: any) => void;
|
||||
onerror?: (error: any) => void;
|
||||
oncancel?: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
event_id,
|
||||
template_id = null,
|
||||
onsuccess,
|
||||
onerror,
|
||||
oncancel
|
||||
}: Props = $props();
|
||||
|
||||
function prevent_default(fn: () => void) {
|
||||
return function (event: Event) {
|
||||
event.preventDefault();
|
||||
fn();
|
||||
};
|
||||
}
|
||||
|
||||
// Form fields (Runes)
|
||||
let name = $state('');
|
||||
let header_path = $state('');
|
||||
let logo_path = $state('');
|
||||
let header_row_1 = $state('');
|
||||
let header_row_2 = $state('');
|
||||
let secondary_header_path = $state('');
|
||||
let footer_text = $state('');
|
||||
let show_qr_front = $state(true);
|
||||
let show_qr_back = $state(true);
|
||||
let wireless_ssid = $state('');
|
||||
let wireless_password = $state('');
|
||||
let ticket_1_text = $state('');
|
||||
let ticket_2_text = $state('');
|
||||
let ticket_3_text = $state('');
|
||||
|
||||
let submit_status = $state('idle'); // idle, loading, success, error
|
||||
|
||||
// Load template data if in edit mode
|
||||
$effect(() => {
|
||||
if (template_id) {
|
||||
untrack(() => {
|
||||
load_template(template_id);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
let {
|
||||
event_id,
|
||||
template_id = null,
|
||||
onsuccess,
|
||||
onerror,
|
||||
oncancel
|
||||
}: Props = $props();
|
||||
|
||||
function prevent_default(fn: () => void) {
|
||||
return function (event: Event) {
|
||||
event.preventDefault();
|
||||
fn();
|
||||
};
|
||||
async function load_template(id: string) {
|
||||
submit_status = 'loading';
|
||||
try {
|
||||
const template_obj =
|
||||
await events_func.load_ae_obj_id__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_badge_template_id: id
|
||||
});
|
||||
if (template_obj) {
|
||||
name = template_obj.name || '';
|
||||
header_path = template_obj.header_path || '';
|
||||
logo_path = template_obj.logo_path || '';
|
||||
header_row_1 = template_obj.header_row_1 || '';
|
||||
header_row_2 = template_obj.header_row_2 || '';
|
||||
secondary_header_path = template_obj.secondary_header_path || '';
|
||||
footer_text = template_obj.footer_text || '';
|
||||
show_qr_front = template_obj.show_qr_front ?? true;
|
||||
show_qr_back = template_obj.show_qr_back ?? true;
|
||||
wireless_ssid = template_obj.wireless_ssid || '';
|
||||
wireless_password = template_obj.wireless_password || '';
|
||||
ticket_1_text = template_obj.ticket_1_text || '';
|
||||
ticket_2_text = template_obj.ticket_2_text || '';
|
||||
ticket_3_text = template_obj.ticket_3_text || '';
|
||||
submit_status = 'idle';
|
||||
} else {
|
||||
submit_status = 'error';
|
||||
console.error('Template not found for editing.');
|
||||
}
|
||||
} catch (error) {
|
||||
submit_status = 'error';
|
||||
console.error('Error loading template for editing:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Form fields (Runes)
|
||||
let name = $state('');
|
||||
let header_path = $state('');
|
||||
let logo_path = $state('');
|
||||
let header_row_1 = $state('');
|
||||
let header_row_2 = $state('');
|
||||
let secondary_header_path = $state('');
|
||||
let footer_text = $state('');
|
||||
let show_qr_front = $state(true);
|
||||
let show_qr_back = $state(true);
|
||||
let wireless_ssid = $state('');
|
||||
let wireless_password = $state('');
|
||||
let ticket_1_text = $state('');
|
||||
let ticket_2_text = $state('');
|
||||
let ticket_3_text = $state('');
|
||||
async function handle_submit() {
|
||||
submit_status = 'loading';
|
||||
const data_to_save: key_val = {
|
||||
name,
|
||||
header_path,
|
||||
logo_path,
|
||||
header_row_1,
|
||||
header_row_2,
|
||||
secondary_header_path,
|
||||
footer_text,
|
||||
show_qr_front,
|
||||
show_qr_back,
|
||||
wireless_ssid,
|
||||
wireless_password,
|
||||
ticket_1_text,
|
||||
ticket_2_text,
|
||||
ticket_3_text
|
||||
};
|
||||
|
||||
let submit_status = $state('idle'); // idle, loading, success, error
|
||||
|
||||
// Load template data if in edit mode
|
||||
$effect(() => {
|
||||
try {
|
||||
let result;
|
||||
if (template_id) {
|
||||
untrack(() => {
|
||||
load_template(template_id);
|
||||
result = await events_func.update_ae_obj__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_id: event_id,
|
||||
event_badge_template_id: template_id,
|
||||
data_kv: data_to_save
|
||||
});
|
||||
} else {
|
||||
result = await events_func.create_ae_obj__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_id: event_id,
|
||||
data_kv: data_to_save
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
async function load_template(id: string) {
|
||||
submit_status = 'loading';
|
||||
try {
|
||||
const template_obj =
|
||||
await events_func.load_ae_obj_id__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_badge_template_id: id
|
||||
});
|
||||
if (template_obj) {
|
||||
name = template_obj.name || '';
|
||||
header_path = template_obj.header_path || '';
|
||||
logo_path = template_obj.logo_path || '';
|
||||
header_row_1 = template_obj.header_row_1 || '';
|
||||
header_row_2 = template_obj.header_row_2 || '';
|
||||
secondary_header_path =
|
||||
template_obj.secondary_header_path || '';
|
||||
footer_text = template_obj.footer_text || '';
|
||||
show_qr_front = template_obj.show_qr_front ?? true;
|
||||
show_qr_back = template_obj.show_qr_back ?? true;
|
||||
wireless_ssid = template_obj.wireless_ssid || '';
|
||||
wireless_password = template_obj.wireless_password || '';
|
||||
ticket_1_text = template_obj.ticket_1_text || '';
|
||||
ticket_2_text = template_obj.ticket_2_text || '';
|
||||
ticket_3_text = template_obj.ticket_3_text || '';
|
||||
submit_status = 'idle';
|
||||
} else {
|
||||
submit_status = 'error';
|
||||
console.error('Template not found for editing.');
|
||||
}
|
||||
} catch (error) {
|
||||
if (result) {
|
||||
submit_status = 'success';
|
||||
if (onsuccess) onsuccess(result);
|
||||
} else {
|
||||
submit_status = 'error';
|
||||
console.error('Error loading template for editing:', error);
|
||||
if (onerror) onerror('Failed to save template');
|
||||
}
|
||||
} catch (error) {
|
||||
submit_status = 'error';
|
||||
console.error('Error saving template:', error);
|
||||
if (onerror) onerror(error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_submit() {
|
||||
submit_status = 'loading';
|
||||
const data_to_save: key_val = {
|
||||
name,
|
||||
header_path,
|
||||
logo_path,
|
||||
header_row_1,
|
||||
header_row_2,
|
||||
secondary_header_path,
|
||||
footer_text,
|
||||
show_qr_front,
|
||||
show_qr_back,
|
||||
wireless_ssid,
|
||||
wireless_password,
|
||||
ticket_1_text,
|
||||
ticket_2_text,
|
||||
ticket_3_text
|
||||
};
|
||||
|
||||
try {
|
||||
let result;
|
||||
if (template_id) {
|
||||
result = await events_func.update_ae_obj__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_id: event_id,
|
||||
event_badge_template_id: template_id,
|
||||
data_kv: data_to_save
|
||||
});
|
||||
} else {
|
||||
result = await events_func.create_ae_obj__event_badge_template({
|
||||
api_cfg: $ae_api,
|
||||
event_id: event_id,
|
||||
data_kv: data_to_save
|
||||
});
|
||||
}
|
||||
|
||||
if (result) {
|
||||
submit_status = 'success';
|
||||
if (onsuccess) onsuccess(result);
|
||||
} else {
|
||||
submit_status = 'error';
|
||||
if (onerror) onerror('Failed to save template');
|
||||
}
|
||||
} catch (error) {
|
||||
submit_status = 'error';
|
||||
console.error('Error saving template:', error);
|
||||
if (onerror) onerror(error);
|
||||
}
|
||||
}
|
||||
|
||||
function handle_cancel() {
|
||||
if (oncancel) oncancel();
|
||||
}
|
||||
function handle_cancel() {
|
||||
if (oncancel) oncancel();
|
||||
}
|
||||
</script>
|
||||
|
||||
<form onsubmit={prevent_default(handle_submit)} class="p-4 space-y-4">
|
||||
<form onsubmit={prevent_default(handle_submit)} class="space-y-4 p-4">
|
||||
<h3 class="h3">{template_id ? 'Edit' : 'Create New'} Badge Template</h3>
|
||||
|
||||
<label class="label">
|
||||
@@ -220,13 +219,11 @@
|
||||
type="button"
|
||||
class="btn preset-tonal-surface"
|
||||
onclick={handle_cancel}
|
||||
disabled={submit_status === 'loading'}>Cancel</button
|
||||
>
|
||||
disabled={submit_status === 'loading'}>Cancel</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn preset-filled-primary"
|
||||
disabled={submit_status === 'loading'}
|
||||
>
|
||||
disabled={submit_status === 'loading'}>
|
||||
{#if submit_status === 'loading'}
|
||||
<Loader2 size="1em" class="animate-spin" aria-hidden="true" />
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user