Files
OSIT-AE-App-Svelte/src/routes/events/ae_comp__event_file_obj_tbl.svelte
Scott Idem 9547da6da6 fix(events): Fix pres mgmt reports data loading and field mapping
- Fix session detail page params not being passed to component (causing undefined session_id)
- Fix wrapper components discarding API enriched data by re-fetching from IDB
- Fix event_file, event_session, event_presenter wrappers to preserve API data
- Add optional chaining for hash_sha256 field to prevent undefined crashes
- Fix search__event_file to always process API results before returning
- Ensures hosted_file_size -> file_size field mapping for reports
- All pres mgmt reports (files, sessions, presenters) now work on cold-start
2026-02-26 14:36:46 -05:00

685 lines
32 KiB
Svelte

<script lang="ts">
interface Props {
// Exports
container_class_li?: string | Array<string>;
event_file_id_random_li?: Array<string>;
lq__event_file_obj_li: any;
allow_basic?: boolean;
allow_moderator?: boolean;
// export let max_records: number = 100;
show_direct_download?: boolean;
show_location_fields?: boolean;
show_presentation_fields?: boolean;
// export let show_presenter_fields: boolean = false;
show_session_fields?: boolean;
hide_session_code?: boolean;
log_lvl?: number;
}
let {
container_class_li = [],
event_file_id_random_li = [],
lq__event_file_obj_li,
allow_basic = false,
allow_moderator = false,
show_direct_download = $bindable(false),
show_location_fields = false,
show_presentation_fields = false,
show_session_fields = false,
hide_session_code = false,
log_lvl = $bindable(0)
}: Props = $props();
// Imports
// import { liveQuery } from 'dexie';
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
// import { api } from '$lib/api/api';
// import { db_events } from '$lib/ae_events/db_events';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
// import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/stores/ae_events_stores';
// import { events_func } from '$lib/ae_events_functions';
import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';
import AE_Comp_Hosted_Files_Download_Button from '$lib/ae_core/ae_comp__hosted_files_download_button.svelte';
// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
// Variables
let ae_promises: key_val = $state({});
// *** Functions and Logic
// Define the list of unacceptable characters if not using the default.
// const unacceptable_chars = /[ <>:"/\\|?*]/g;
let horiz_scroll_warning: boolean = $state(false);
let horiz_check_element: HTMLElement | null = $state(null);
// Check if element is scrolling horizontally
$effect(() => {
if (
horiz_check_element &&
horiz_check_element.scrollWidth > horiz_check_element.offsetWidth
) {
horiz_scroll_warning = true;
// console.log('Element is too wide for the container. Horizontal scrolling detected.');
} else {
horiz_scroll_warning = false;
// console.log('Element fits within the container. No horizontal scrolling.', horiz_check_element);
}
});
function generate_file_export_csv(ae_obj_li: any[]) {
console.log(`*** generate_file_export_csv() ***`, ae_obj_li);
// We need to create a list with the column names and then a list of lists with the data.
let csv_data = [];
let csv_columns = [
'File ID',
'Filename',
'Extension',
'Size',
'SHA256 Hash',
'Uploaded On',
'Updated On',
'Session ID',
'Session Code',
'Session Name',
'Session Start Datetime',
'Presentation ID',
'Presentation Name',
'Presentation Time',
'Presenter ID',
'Name',
'Email',
'Download Link',
'Download Link - Session Code'
];
csv_data.push(csv_columns);
for (let i = 0; i < ae_obj_li.length; i++) {
let csv_row = [];
csv_row.push(ae_obj_li[i].event_file_id);
csv_row.push(
ae_obj_li[i].filename
? `"${ae_util.clean_filename(ae_obj_li[i].filename)}"`
: ''
);
csv_row.push(ae_obj_li[i].extension ? ae_obj_li[i].extension : '');
csv_row.push(
ae_obj_li[i].file_size || ae_obj_li[i].hosted_file_size
? ae_util.format_bytes(ae_obj_li[i].file_size || ae_obj_li[i].hosted_file_size)
: ''
);
csv_row.push(ae_obj_li[i].hash_sha256?.slice(0, 10) ?? 'N/A');
csv_row.push(
ae_obj_li[i].created_on
? ae_util.iso_datetime_formatter(
ae_obj_li[i].created_on,
'datetime_iso_12_no_seconds'
)
: ''
);
csv_row.push(
ae_obj_li[i].updated_on
? ae_util.iso_datetime_formatter(
ae_obj_li[i].updated_on,
'datetime_iso_12_no_seconds'
)
: ''
);
csv_row.push(
ae_obj_li[i].event_session_id
? ae_obj_li[i].event_session_id
: ''
);
csv_row.push(
ae_obj_li[i].event_session_code
? ae_obj_li[i].event_session_code
: ''
);
csv_row.push(ae_obj_li[i].event_session_name ?? '');
csv_row.push(
ae_obj_li[i].event_session_start_datetime
? ae_util.iso_datetime_formatter(
ae_obj_li[i].event_session_start_datetime,
'datetime_iso_12_no_seconds'
)
: ''
);
csv_row.push(
ae_obj_li[i].event_presentation_id
? ae_obj_li[i].event_presentation_id
: ''
);
csv_row.push(ae_obj_li[i].event_presentation_name ?? '');
csv_row.push(
ae_obj_li[i].event_presentation_start_datetime
? ae_util.iso_datetime_formatter(
ae_obj_li[i].event_presentation_start_datetime,
'datetime_iso_12_no_seconds'
)
: ''
);
csv_row.push(
ae_obj_li[i].event_presenter_id
? ae_obj_li[i].event_presenter_id
: ''
);
csv_row.push(ae_obj_li[i].event_presenter_full_name ?? '');
csv_row.push(
ae_obj_li[i].event_presenter_email
? ae_obj_li[i].event_presenter_email
: ''
);
csv_row.push(
encodeURI(
`${$ae_api.base_url}/event/file/${ae_obj_li[i]?.event_file_id}/download?filename=${ae_util.clean_filename(ae_obj_li[i]?.filename)}&key=${$ae_api.account_id}`
)
);
csv_row.push(
encodeURI(
`${$ae_api.base_url}/event/file/${ae_obj_li[i]?.event_file_id}/download?filename=${ae_obj_li[i]?.event_session_code}-${ae_util.clean_filename(ae_obj_li[i]?.filename)}&key=${$ae_api.account_id}`
)
);
csv_data.push(csv_row);
}
console.log('CSV Data:', csv_data);
let csv_content_str = '';
csv_data.forEach(function (row) {
csv_content_str += row.join(';');
csv_content_str += '\n';
});
const blob = new Blob([csv_content_str], {
type: 'text/csv;charset=utf-8;'
});
const obj_url = URL.createObjectURL(blob);
const download_link = document.createElement('a');
download_link.setAttribute('href', obj_url);
download_link.setAttribute(
'download',
`file_list_${ae_util.iso_datetime_formatter()}.csv`
);
download_link.setAttribute('style', 'display: none;');
download_link.textContent = 'Download CSV';
const container = document.getElementById('download_csv_container');
if (container) {
container.appendChild(download_link);
} else {
document.body.appendChild(download_link);
}
// Automatically download the file
download_link.click();
return csv_data;
}
</script>
<section
class:border-r-2={horiz_scroll_warning}
class:border-dashed={horiz_scroll_warning}
class:border-warning-900-100={horiz_scroll_warning}
class="ae_comp event_file_obj_tbl {container_class_li} container overflow-auto max-w-screen"
>
<!-- {#if event_file_id_random_li && $lq_kv__event_file_obj_li && $lq_kv__event_file_obj_li?.length > 0 && $lq_kv__event_file_obj_li?.length == event_file_id_random_li?.length} -->
{#if $lq__event_file_obj_li && $lq__event_file_obj_li?.length}
<div
bind:this={horiz_check_element}
id="tbl_container"
class="space-y-2 pb-8"
>
<header
class="flex flex-row flex-wrap gap-1 items-center justify-between"
>
<h2 class="h3">
<span class="text-base"> Results: </span>
{#if $lq__event_file_obj_li.length}
<span
class="text-3xl font-bold preset-filled-success-100-900 px-4 rounded-lg"
title="Count {$lq__event_file_obj_li.length ??
'None'}"
>
<span class="fas fa-list-ol mx-4"></span>
{$lq__event_file_obj_li.length ?? 'None'}&times;
</span>
{/if}
</h2>
<div
class="flex flex-row flex-wrap gap-1 items-center justify-end"
class:hidden={!$ae_loc.edit_mode}
>
<button
type="button"
class="btn btn-sm preset-tonal-warning border border-warning-500 mb-1 generate_csv_btn"
onclick={() => {
if (
!confirm(
'Generate and download a CSV file with the file list?'
)
) {
return false;
}
let csv_data = generate_file_export_csv(
$lq__event_file_obj_li
);
console.log('CSV Data:', csv_data);
}}
>
<span class="fas fa-file-csv mx-1"></span>
Export Files CSV
</button>
<span id="download_csv_container"></span>
{#if show_session_fields}
<button
type="button"
onclick={() => {
show_session_fields = !show_session_fields;
}}
class="btn btn-sm {show_session_fields
? 'ae_btn_surface'
: 'ae_btn_surface_outlined'}"
title="Show or hide the session-related column fields."
>
<span class="fas fa-toggle-on m-1"></span>
Showing Session Fields
</button>
{:else}
<button
type="button"
onclick={() => {
show_session_fields = !show_session_fields;
}}
class="btn btn-sm {show_session_fields
? 'ae_btn_surface'
: 'ae_btn_surface_outlined'}"
title="Show or hide the session-related column fields."
>
<span class="fas fa-toggle-off m-1"></span>
Show Session Fields
</button>
{/if}
<!-- Show or hide the session code -->
{#if !hide_session_code}
<button
type="button"
onclick={() => {
hide_session_code = true;
}}
class="btn btn-sm ae_btn_surface"
title="Hide the session code column from view. Currently showing the Session Code column."
>
<span class="fas fa-toggle-on m-1"></span>
Showing Session Code
</button>
{:else}
<button
type="button"
onclick={() => {
hide_session_code = false;
}}
class="btn btn-sm ae_btn_surface_outlined"
title="Show the session code column. Currently hiding the Session Code column from view."
>
<span class="fas fa-toggle-off m-1"></span>
Show Session Code
</button>
{/if}
{#if show_presentation_fields}
<button
type="button"
onclick={() => {
show_presentation_fields =
!show_presentation_fields;
}}
class="btn btn-sm {show_presentation_fields
? 'ae_btn_surface'
: 'ae_btn_surface_outlined'}"
title="Show or hide the extra presentation-related column fields."
>
<span class="fas fa-toggle-on m-1"></span>
Showing Presentation Fields
</button>
{:else}
<button
type="button"
onclick={() => {
show_presentation_fields =
!show_presentation_fields;
}}
class="btn btn-sm {show_presentation_fields
? 'ae_btn_surface'
: 'ae_btn_surface_outlined'}"
title="Show or hide the extra presentation-related column fields."
>
<span class="fas fa-toggle-off m-1"></span>
Show Presentation Fields
</button>
{/if}
</div>
</header>
<table
class="table table-auto table-striped w-full text-xs lg:text-sm"
>
<thead class="">
<tr>
<th class="px-4 py-2">
Filename
<!-- ({$lq__event_file_obj_li?.length}&times;) -->
</th>
<th
class="px-4 py-2"
class:hidden={!show_direct_download}
>
Link
</th>
<th class="px-4 py-2">Size</th>
<th class="px-4 py-2">Uploaded</th>
{#if show_location_fields}
<th class="px-4 py-2">Location</th>
{/if}
{#if show_session_fields}
<th
class="px-4 py-2"
class:hidden={hide_session_code}
>
Code
</th>
<th class="px-4 py-2"> Session </th>
<th class="px-4 py-2">Start datetime</th>
{/if}
{#if show_presentation_fields}
<th class="px-4 py-2">Presentation</th>
<th class="px-4 py-2">Presentation time</th>
{/if}
<th class="px-4 py-2">Name</th>
<!-- <th class="px-4 py-2">Email</th> -->
<!-- <th class="px-4 py-2">Agree</th> -->
</tr>
</thead>
<tbody class="">
{#each $lq__event_file_obj_li as event_file_obj}
<tr class:dim={event_file_obj?.hide}>
<td class="px-4 py-2">
<AE_Comp_Hosted_Files_Download_Button
hosted_file_id={event_file_obj?.hosted_file_id}
hosted_file_obj={event_file_obj}
show_divider={true}
{show_direct_download}
max_filename={50}
classes="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500 min-w-72"
/>
<!-- {event_file_obj?.filename} -->
</td>
<td
class="px-4 py-2 flex flex-col gap-0.5"
class:hidden={!show_direct_download}
>
<div
class:hidden={!show_direct_download}
class="flex flex-row gap-0.5"
>
<span class="text-xs text-gray-500 w-32">
Original:
</span>
<a
href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id}/download?filename={ae_util.clean_filename(
event_file_obj?.filename
)}&key={$ae_api.account_id}"
class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs underline"
title={`Download this file:\n${ae_util.clean_filename(event_file_obj?.filename)}\n[API] SHA256: ${event_file_obj?.hash_sha256?.slice(0, 10) ?? 'N/A'}\nHosted ID: ${event_file_obj?.hosted_file_id} Event File ID: ${event_file_obj?.event_file_id}`}
>
<span class="fas fa-download mx-1"
></span>
<span class="hidden"> Download </span>
</a>
<MyClipboard
value={encodeURI(
`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&key=${$ae_api.account_id}`
)}
btn_text="Copy Link"
btn_title="Copy the direct download file link: {ae_util.clean_filename(
event_file_obj?.filename ??
'unknown'
)}"
btn_class="btn btn-sm p-1 preset-tonal-secondary lg:text-xs"
></MyClipboard>
</div>
<div
class="flex flex-row gap-0.5"
class:hidden={!show_direct_download}
>
<span class="text-xs text-gray-500 w-32">
Session Name:
</span>
<a
href="{$ae_api.base_url}/v3/action/event_file/{event_file_obj?.event_file_id}/download?filename={event_file_obj?.event_session_code}-{ae_util
.clean_filename(
event_file_obj?.event_presentation_name
)
.substring(
0,
20
)}-{ae_util.clean_filename(
event_file_obj?.event_presenter_full_name
)}.{event_file_obj?.extension}&key={$ae_api.account_id}"
class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs underline"
title={`Download renamed with session name to: ${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}`}
>
<span class="fas fa-download mx-1"
></span>
<span class="hidden"> Renamed </span>
</a>
<MyClipboard
value={encodeURI(
`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&key=${$ae_api.account_id}`
)}
btn_text="Copy Renamed"
btn_title="Copy the renamed file link"
btn_class="btn btn-sm p-1 preset-tonal-secondary lg:text-xs"
></MyClipboard>
</div>
<div
class:hidden={!show_direct_download}
class="flex flex-row gap-0.5"
>
<span class="text-xs text-gray-500 w-32">
Presentation Name:
</span>
<a
href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id}/download?filename={event_file_obj?.event_session_code}-{ae_util
.clean_filename(
event_file_obj?.event_presentation_name
)
.substring(
0,
20
)}-{ae_util.clean_filename(
event_file_obj?.event_presenter_full_name
)}.{event_file_obj?.extension}&key=${$ae_api.account_id}"
class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs underline"
title={`Download renamed with presentation name to: ${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}`}
>
<span class="fas fa-download mx-1"
></span>
<span class="hidden"> Renamed </span>
</a>
<MyClipboard
value={encodeURI(
`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&key=${$ae_api.account_id}`
)}
btn_text="Copy Renamed"
btn_title="Copy the renamed file link"
btn_class="btn btn-sm p-1 preset-tonal-secondary lg:text-xs"
></MyClipboard>
</div>
</td>
<td class="px-4 py-2"
>{ae_util.format_bytes(
event_file_obj?.file_size || event_file_obj?.hosted_file_size
)}</td
>
<td class="px-4 py-2">
<div>
<span>
{ae_util.iso_datetime_formatter(
event_file_obj?.created_on,
'dddd'
)}
</span>
<span>
{ae_util.iso_datetime_formatter(
event_file_obj?.created_on,
'date_long_month_day'
)}
</span>
</div>
<span
class:bg-yellow-200={ae_util.is_datetime_recent(
{
datetime:
event_file_obj?.created_on,
minutes: 30
}
)}
class:bg-green-200={ae_util.is_datetime_recent(
{
datetime:
event_file_obj?.created_on,
minutes: 240
}
)}
class:bg-blue-200={ae_util.is_datetime_recent(
{
datetime:
event_file_obj?.created_on,
minutes: 2880
}
)}
>
{ae_util.iso_datetime_formatter(
event_file_obj?.created_on,
'time_12_short'
)}
</span>
</td>
{#if show_location_fields}
<td class="px-4 py-2 lg:text-xs">
{#if event_file_obj?.event_location_id}
<!-- <span class="fas fa-map-marker-alt"></span> -->
{event_file_obj?.event_location_name}
{:else}
{@html ae_snip.html__not_set}
{/if}
</td>
{/if}
{#if show_session_fields}
<td
class="px-4 py-2 lg:text-xs"
class:hidden={hide_session_code}
>
{event_file_obj?.event_session_code ??
'-- not set --'}
</td>
<td class="px-4 py-2 lg:text-xs">
<span class="fas fa-chalkboard-teacher"
></span>
<a
href="/events/{event_file_obj?.event_id}/session/{event_file_obj?.event_session_id}"
class="text-blue-500 underline hover:text-blue-800"
>
{event_file_obj?.event_session_name}
</a>
</td>
<td class="px-4 py-2"
>{ae_util.iso_datetime_formatter(
event_file_obj?.event_session_start_datetime,
'datetime_iso_12_no_seconds'
)}</td
>
{/if}
{#if show_presentation_fields}
<td class="px-4 py-2 lg:text-xs">
{#if event_file_obj?.event_presentation_id}
{event_file_obj?.event_presentation_name}
{:else}
{@html ae_snip.html__not_set}
{/if}
</td>
<td class="px-4 py-2">
{#if event_file_obj?.event_presentation_id}
{ae_util.iso_datetime_formatter(
event_file_obj?.event_presentation_start_datetime,
'time_12_short'
)}
{:else}
{@html ae_snip.html__not_set}
{/if}
</td>
{/if}
<td class="px-4 py-2">
{#if event_file_obj?.event_presenter_id}
<span class="fas fa-user"></span>
<a
href="/events/{event_file_obj?.event_id}/presenter/{event_file_obj?.event_presenter_id}"
class="text-blue-500 underline hover:text-blue-800"
>
{event_file_obj?.event_presenter_full_name}
</a>
{:else}
<!-- <span class="text-gray-500">--</span> -->
{@html ae_snip.html__not_set}
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{:else}
<p class="text-sm">No files available to show.</p>
{/if}
</section>
<style>
.dim {
opacity: 0.5;
color: #999;
}
</style>