Working on new standalone event file manage element

src/lib/element_manage_event_file_li.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+import { createEventDispatcher, onMount } from 'svelte';
+import { clipboard, FileDropzone } from '@skeletonlabs/skeleton';
+import { liveQuery } from "dexie";
+
+const dispatch = createEventDispatcher();
+
+import type { key_val } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils';
+import { api } from '$lib/api';
+import Element_ae_crud from '$lib/element_ae_crud.svelte';
+// import Element_data_store from '$lib/element_data_store.svelte';
+
+import { core_func } from '$lib/ae_core_functions';
+import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { db_events } from "$lib/db_events";
+import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
+import { events_func } from '$lib/ae_events_functions';
+
+export let container_class_li = [];
+export let link_to_type: string;
+export let link_to_id: string;
+export let show_convert_btn: boolean = null;
+
+let ae_placeholder_li: key_val = {};
+let ae_promises: key_val = {}; // Promise<any>;
+let ae_tmp: key_val = {};
+ae_tmp.show__file_li = true;
+let ae_triggers: key_val = {};
+
+let dq__where_val: string = `${link_to_type}_id_random`;
+let dq__where_eq_val: string = link_to_id;
+
+let lq__event_file_obj_li = liveQuery(
+    async () => await db_events.files.where(dq__where_val).equals(dq__where_eq_val).toArray()
+);
+
+onMount(() => {
+    console.log('Element - Manage Event File List');
+    console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
+
+    $slct_trigger = 'load__event_file_obj_li';
+});
+
+</script>
+
+
+<section class="svelte_component event_file_uploaded_manage {container_class_li.join(' ')}">
+
+<h3 class="h4">
+    Manage Files: {$lq__event_file_obj_li ? `${$lq__event_file_obj_li.length}x` : '-- none --'}
+</h3>
+<button
+    type="button"
+    on:click={() => {
+        console.log('*** Refresh button clicked ***');
+        ae_tmp.show__file_li = false;
+        console.log(`$lq__event_file_obj_li:`, $lq__event_file_obj_li);
+        $slct_trigger = 'load__event_file_obj_li';
+        ae_tmp.show__file_li = true;
+    }}
+    class="btn btn-sm variant-soft-secondary hover:variant-ghost-warning float-right transition hover:transition-all"
+    >
+    <span class="fas fa-sync-alt mx-1"></span>
+    Refresh Files
+</button>
+
+
+{#if $lq__event_file_obj_li && $lq__event_file_obj_li.length}
+
+<table class="table table-striped table-bordered event_file_list">
+
+    <col width="35%"> <!-- 35% -->
+    <col width=""> <!-- 24% -->
+    <!-- <col width=""> -->
+    <col width="">
+    <col width="">
+
+    <tbody>
+
+{#each $lq__event_file_obj_li as event_file_obj}
+<tr class="ae_obj obj_event_file">
+    <td class="event_file_info">
+        <button
+            on:click={() => {
+                // 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: 1
+                });
+
+                // 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-md variant-soft-primary hover:variant-filled-primary min-w-96"
+            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="text-sm">
+                Download:
+                </span>
+            {/await}
+
+            <span class="grow">
+            {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: 25})}
+            </span>
+
+            <span
+                class="badge variant-glass-success hover:variant-filled-success text-sm"
+                class:hidden={!event_file_obj.file_purpose}
+                >
+                {event_file_obj.file_purpose}
+            </span>
+
+        </button>
+    </td>
+    <td class="event_file_info">
+
+    </td>
+    <td class="event_file_info">
+        {event_file_obj.open_in_os}
+        {event_file_obj.file_purpose}
+    </td>
+    <td class="event_file_info file_meta text-gray-500">
+        <div class="flex flex-col">
+        <!-- {event_file_obj.hosted_file_content_type} -->
+        <span>
+            Type:
+            <strong>{event_file_obj.extension} <span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)}"></span>
+            </strong>
+            {#if event_file_obj.open_in_os == 'win'}
+                <strong>
+                MS Windows <span class="fab fa-windows"></span>
+                </strong>
+            {:else if event_file_obj.open_in_os == 'mac'}
+                <strong>
+                Apple macOS <span class="fab fa-apple"></span>
+                </strong>
+            {/if}
+        </span>
+        <span>
+            Size:
+            <strong>{ae_util.format_bytes(event_file_obj.file_size)}</strong>
+        </span>
+        <span class="text-muted">
+            Hash: <strong>{event_file_obj.hash_sha256.slice(0, 10)}&mldr;</strong>
+        </span>
+        <span class="text-muted">
+            ID:
+            <strong>{event_file_obj.hosted_file_id_random}</strong>
+        </span>
+        <span>
+            <!-- <span class="fas fa-upload mx-1"></span> -->
+            Uploaded:
+            {ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_full')}
+            at
+            <strong>{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'time_short_no_leading')}</strong>
+            <!-- {event_file_obj.updated_on} -->
+        </span>
+        </div>
+    </td>
+</tr>
+{/each}
+
+    </tbody>
+</table>
+
+{:else}
+
+<p class="text-center text-muted">
+    No files uploaded yet.
+</p>
+
+{/if}
+
+</section>
+
+
+<style>
+
+</style>

src/routes/events_pres_mgmt/session/[slug]/+page.svelte

@@ -26,6 +26,7 @@ import { events_func } from '$lib/ae_events_functions';
 
 import Form_agree from './form_agree.svelte';
 import Presenter_view from './presenter_view.svelte';
+import Element_manage_event_file_li from '$lib/element_manage_event_file_li.svelte';
 
 // Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
 $slct.account_id = data.account_id;
@@ -1690,6 +1691,11 @@ function send_sign_in_poc_email(
             </ul>
             {/if}
 
+            <Element_manage_event_file_li
+                link_to_type={'event_presentation'}
+                link_to_id={event_presentation_obj.event_presentation_id_random}
+                />
+
             <!-- Show files list for this presentation -->
             <!-- {#await event_presentation_obj.event_file_li}
                 <p>Loading...</p>

src/routes/events_pres_mgmt/session/[slug]/presenter_view.svelte

@@ -10,7 +10,7 @@ import { liveQuery } from "dexie";
 const dispatch = createEventDispatcher();
 
 import type { key_val } from '$lib/ae_stores';
-import { ae_util, shorten_string } from '$lib/ae_utils';
+import { ae_util } from '$lib/ae_utils';
 import { api } from '$lib/api';
 import Element_ae_crud from '$lib/element_ae_crud.svelte';
 // import Element_data_store from '$lib/element_data_store.svelte';