Files
OSIT-AE-App-Svelte/src/routes/events/ae_comp__event_file_obj_tbl.svelte

611 lines
27 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/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { api } from '$lib/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/ae_stores';
// import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
// import { events_func } from '$lib/ae_events_functions';
import MyClipboard from '$lib/e_app_clipboard.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) {
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_util.format_bytes(ae_obj_li[i].file_size) : '');
csv_row.push(ae_obj_li[i].hash_sha256.slice(0, 10) + '...');
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_random}/download?filename=${ae_util.clean_filename(ae_obj_li[i]?.filename)}&x_no_account_id_token=direct-download`));
csv_row.push(encodeURI(`${$ae_api.base_url}/event/file/${ae_obj_li[i]?.event_file_id_random}/download?filename=${ae_obj_li[i]?.event_session_code}-${ae_util.clean_filename(ae_obj_li[i]?.filename)}&x_no_account_id_token=direct-download`));
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';
// document.querySelector('body').appendChild(download_link);
document.getElementById('download_csv_container').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
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">
<button
disabled={!allow_basic && !allow_moderator && !$ae_loc.trusted_access}
onclick={() => {
// ae_promises[event_file_obj?.event_file_id_random]
ae_promises[event_file_obj?.event_file_id_random] = api.download_hosted_file({
api_cfg: $ae_api,
hosted_file_id: event_file_obj?.hosted_file_id_random,
return_file: true,
filename: event_file_obj?.filename,
auto_download: true,
log_lvl: 0
});
// window.postMessage({ type: 'download_event_file', event_file_id: event_file_obj?.event_file_id_random, filename: event_file_obj?.filename, auto_download: true }, '*');
}}
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500 min-w-72"
title={`Download this file: ${event_file_obj?.filename} [API] -- SHA256 hash: ${event_file_obj?.hash_sha256.slice(0, 10)}...`}
>
{#await ae_promises[event_file_obj?.event_file_id_random]}
<span class="fas fa-spinner fa-spin mx-1"></span>
<span class="">
Downloading
{#if $ae_sess.api_download_kv[event_file_obj?.hosted_file_id_random]}
{$ae_sess.api_download_kv[event_file_obj?.hosted_file_id_random].percent_completed}%
{/if}
:
</span>
{:then}
<!-- <span class="fas fa-download mx-1"></span> -->
<span class="fas fa-{ae_util.file_extension_icon(event_file_obj?.extension)}"></span>
<!-- <span class="text-sm">
Download:
</span> -->
{/await}
<span class="grow">
{ae_util.shorten_filename({filename: event_file_obj?.filename, max_length: 30})}
</span>
<span
class="badge preset-filled-success-600-400 hover:preset-filled-success-700-300 text-xs"
class:hidden={!event_file_obj?.file_purpose}
>
{event_file_obj?.file_purpose}
</span>
</button>
<!-- {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_random}/download?filename={ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download"
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)}...\nHosted ID: ${event_file_obj?.hosted_file_id_random} Event File ID: ${event_file_obj?.event_file_id_random}`}
>
<span class="fas fa-download mx-1"></span>
<span class="hidden">
Download
</span>
</a>
<!-- <button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download`)}
class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
title="Copy the direct download file link: {ae_util.clean_filename(event_file_obj?.filename ?? 'unknown')}"
>
<span class="fas fa-copy mx-1"></span>
<span class="hidden">
Copy Link
</span>
</button> -->
<MyClipboard
value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download`)}
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}/event/file/{event_file_obj?.event_file_id_random}/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}&x_no_account_id_token=direct-download"
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>
<!-- <button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/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}&x_no_account_id_token=direct-download`)}
class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
title="Copy the renamed file link"
>
<span class="fas fa-copy mx-1"></span>
<span class="hidden">
Copy Renamed
</span>
</button> -->
<MyClipboard
value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/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}&x_no_account_id_token=direct-download`)}
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_random}/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}&x_no_account_id_token=direct-download"
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>
<!-- <button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/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}&x_no_account_id_token=direct-download`)}
class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
title="Copy the renamed file link"
>
<span class="fas fa-copy mx-1"></span>
<span class="hidden">
Copy Renamed
</span>
</button> -->
<MyClipboard
value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/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}&x_no_account_id_token=direct-download`)}
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)}</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>
<!-- <td class="px-4 py-2">
<span class="fas fa-envelope"></span>
<a
href="mailto:{event_file_obj?.email}"
class="text-blue-500 underline hover:text-blue-800"
>
{event_file_obj?.email}
</a>
</td> -->
<!-- <td class="px-4 py-2">{event_file_obj?.agree ? 'Yes' : 'No'}</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>