From 5da209ee1c75ae99d85541ecb286d220b6423bc2 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 18 Oct 2024 15:51:52 -0400
Subject: [PATCH] Now with more download and copy link options.

---
 src/lib/ae_utils/ae_utils.ts                  |   3 +-
 src/lib/ae_utils/ae_utils__files.ts           |  14 ++
 src/lib/element_manage_event_file_li.svelte   | 105 ++++++++++++---
 .../ae_comp__event_location_obj_li.svelte     |   1 -
 .../events/[event_id]/reports/+page.svelte    |   1 +
 .../reports/event_reports_page_menu.svelte    |  27 ++++
 .../ae_comp__event_file_obj_tbl.svelte        | 120 +++++++++++++++---
 7 files changed, 228 insertions(+), 43 deletions(-)

diff --git a/src/lib/ae_utils/ae_utils.ts b/src/lib/ae_utils/ae_utils.ts
index f711c6eb..445da06e 100644
--- a/src/lib/ae_utils/ae_utils.ts
+++ b/src/lib/ae_utils/ae_utils.ts
@@ -2,7 +2,7 @@
 import { process_permission_checks } from './ae_utils__perm_checks';
 import { iso_datetime_formatter } from './ae_utils__datetime_format';
 import { is_datetime_recent } from './ae_utils__is_datetime_recent';
-import { format_bytes, guess_file_name, guess_file_extension, get_file_hash } from './ae_utils__files';
+import { clean_filename, format_bytes, guess_file_name, guess_file_extension, get_file_hash } from './ae_utils__files';
 
 type key_str = {
     [key: string]: string;
@@ -710,6 +710,7 @@ export let ae_util = {
     is_datetime_recent: is_datetime_recent,
     process_permission_checks: process_permission_checks,
     iso_datetime_formatter: iso_datetime_formatter,
+    clean_filename: clean_filename,
     format_bytes: format_bytes,
     number_w_commas: number_w_commas,
     guess_file_name: guess_file_name,
diff --git a/src/lib/ae_utils/ae_utils__files.ts b/src/lib/ae_utils/ae_utils__files.ts
index 71551fea..65e1a24d 100644
--- a/src/lib/ae_utils/ae_utils__files.ts
+++ b/src/lib/ae_utils/ae_utils__files.ts
@@ -1,5 +1,19 @@
 // These are all file related functions.
 
+// Use a defined list of unacceptable characters to remove from a filename.
+// Updated 2024-10-18
+export let clean_filename = function clean_filename(filename: any|string, unacceptable_chars: RegExp = /[ <>:"/\\|?*]/g, replacement_char: string = '_') {
+    // console.log('*** clean_filename() ***');
+    if (!filename) {
+        return '';
+    }
+
+    let cleaned_filename = filename.replace(unacceptable_chars, replacement_char);
+    // console.log(cleaned_filename);
+    return cleaned_filename;
+}
+
+
 export let format_bytes = function format_bytes(
         bytes: number,
         decimals: number = 2
diff --git a/src/lib/element_manage_event_file_li.svelte b/src/lib/element_manage_event_file_li.svelte
index 3d53474f..dc649548 100644
--- a/src/lib/element_manage_event_file_li.svelte
+++ b/src/lib/element_manage_event_file_li.svelte
@@ -30,7 +30,7 @@ export let display_mode: string = 'default'; // 'default', 'compact', 'minimal',
 let ae_promises: key_val = {};
 let ae_tmp: key_val = {};
 ae_tmp.show__file_li = true;
-ae_tmp.show__direct_download = false;
+ae_tmp.show__direct_download = $events_loc.pres_mgmt.show__direct_download;
 // let ae_triggers: key_val = {};
 
 onMount(() => {
@@ -196,30 +196,95 @@ onMount(() => {
                 {event_file_obj.file_purpose}
             </span>
         </button>
-        <a
-            href="{$ae_api.base_url}/event/file/{event_file_obj.event_file_id_random}/download?filename={event_file_obj.filename}&x_no_account_id_token=direct-download"
-            class="btn btn-sm variant-soft-secondary m-0.5 *:hover:inline"
+
+        <span
+            class="px-4 py-2 flex flex-col gap-0.5"
             class:hidden={!ae_tmp.show__direct_download}
-            title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}... Hosted 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>
-            <div class="hidden">
-            Download
+            <div 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 variant-soft-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 variant-soft-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>
             </div>
-        </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.filename}&x_no_account_id_token=direct-download`)}
-            class="btn btn-sm variant-soft-secondary m-0.5 *:hover:inline"
-            class:hidden={!ae_tmp.show__direct_download}
-            title="Copy the direct download file link to the clipboard."
-            >
-            <span class="fas fa-copy mx-1"></span>
-            <div class="hidden">
-            Copy Link
+
+            <div class="flex flex-row gap-0.5">
+                <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 variant-soft-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 variant-soft-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>
             </div>
-        </button>
+
+            <div 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 variant-soft-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 variant-soft-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>
+            </div>
+        </span>
+
         {:else}
+
         <!-- Show change filename input field here -->
          <span
             class="flex flex-col gap-1 text-sm"
diff --git a/src/routes/events/[event_id]/locations/ae_comp__event_location_obj_li.svelte b/src/routes/events/[event_id]/locations/ae_comp__event_location_obj_li.svelte
index 4f74c134..0cb8acb8 100644
--- a/src/routes/events/[event_id]/locations/ae_comp__event_location_obj_li.svelte
+++ b/src/routes/events/[event_id]/locations/ae_comp__event_location_obj_li.svelte
@@ -6,7 +6,6 @@ import { events_func } from '$lib/ae_events_functions';
 
 import Comp_event_session_obj_li from '../../../events_pres_mgmt/ae_comp__event_session_obj_li_wrapper.svelte';
 import Element_ae_crud from '$lib/element_ae_crud.svelte';
-import Element_manage_event_file_li_wrap from '$lib/element_manage_event_file_li_all.svelte';
 import Comp_event_device_obj_li from './../device/ae_comp__event_device_obj_li_wrapper.svelte';
 
 // Exports
diff --git a/src/routes/events/[event_id]/reports/+page.svelte b/src/routes/events/[event_id]/reports/+page.svelte
index 51ad1c4a..030591c4 100644
--- a/src/routes/events/[event_id]/reports/+page.svelte
+++ b/src/routes/events/[event_id]/reports/+page.svelte
@@ -901,6 +901,7 @@ async function handle_qry__event_session(
 
 <Comp_event_file_obj_tbl
     bind:event_file_id_random_li={event_file_id_random_li}
+    bind:show_direct_download={$events_loc.pres_mgmt.show__direct_download}
     show_location_fields={true}
     show_presenter_fields={true}
     show_presentation_fields={true}
diff --git a/src/routes/events/[event_id]/reports/event_reports_page_menu.svelte b/src/routes/events/[event_id]/reports/event_reports_page_menu.svelte
index 7b5afa69..8ac85546 100644
--- a/src/routes/events/[event_id]/reports/event_reports_page_menu.svelte
+++ b/src/routes/events/[event_id]/reports/event_reports_page_menu.svelte
@@ -224,6 +224,33 @@ let ae_triggers: key_val = {};
 
         {#if $ae_loc.authenticated_access}
             <div class="flex flex-col gap-1 items-center">
+            <!-- Button to toggle between the showing additional hidden download buttons -->
+            {#if $events_loc.pres_mgmt.show__direct_download}
+                <button
+                    type="button"
+                    on:click={() => {
+                        $events_loc.pres_mgmt.show__direct_download = !$events_loc.pres_mgmt.show__direct_download;
+                    }}
+                    class="btn btn-sm variant-ghost-success"
+                    title="Hide additional direct download and copy link buttons?"
+                    >
+                    <span class="fas fa-eye-slash m-1"></span>
+                    Hide Download Buttons?
+                </button>
+            {:else}
+                <button
+                    type="button"
+                    on:click={() => {
+                        $events_loc.pres_mgmt.show__direct_download = !$events_loc.pres_mgmt.show__direct_download;
+                    }}
+                    class="btn btn-sm variant-ghost-warning"
+                    title="Show additional direct download and copy link buttons?"
+                    >
+                    <span class="fas fa-eye m-1"></span>
+                    Show Download Buttons?
+                </button>
+            {/if}
+
             <!-- Button to toggle between the showing hidden sessions -->
             {#if $events_loc.pres_mgmt.qry_hidden == 'all'}
                 <button
diff --git a/src/routes/events_pres_mgmt/ae_comp__event_file_obj_tbl.svelte b/src/routes/events_pres_mgmt/ae_comp__event_file_obj_tbl.svelte
index f050467d..66829363 100644
--- a/src/routes/events_pres_mgmt/ae_comp__event_file_obj_tbl.svelte
+++ b/src/routes/events_pres_mgmt/ae_comp__event_file_obj_tbl.svelte
@@ -16,6 +16,7 @@ export let event_file_id_random_li: Array<string> = [];
 export let allow_basic: boolean = false;
 export let allow_moderator: boolean = false;
 // export let max_records: number = 100;
+export let show_direct_download: boolean = false;
 export let show_location_fields: boolean = false;
 export let show_presentation_fields: boolean = false;
 export let show_presenter_fields: boolean = false;
@@ -35,6 +36,9 @@ let lq_kv__event_file_obj_li = liveQuery(
     () => db_events.files
     .bulkGet(event_file_id_random_li)
 );
+
+// Define the list of unacceptable characters
+const unacceptable_chars = /[ <>:"/\\|?*]/g;
 </script>
 
 
@@ -70,7 +74,10 @@ let lq_kv__event_file_obj_li = liveQuery(
                 Filename
                 <!-- ({$lq_kv__event_file_obj_li?.length}&times;) -->
             </th>
-            <th class="px-4 py-2">
+            <th
+                class="px-4 py-2"
+                class:hidden={!show_direct_download}
+                >
                 Link
             </th>
             <th class="px-4 py-2">Size</th>
@@ -152,28 +159,99 @@ let lq_kv__event_file_obj_li = liveQuery(
                 </button>
                 <!-- {event_file_obj?.filename} -->
             </td>
-            <td class="px-4 py-2">
-                <a
-                    href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id_random}/download?filename={event_file_obj?.filename}&x_no_account_id_token=direct-download"
-                    class="btn btn-sm variant-soft-secondary m-0.5 *:hover:inline lg:text-xs"
-                    title={`Download this file:\n${event_file_obj?.filename}\n[API] SHA256: ${event_file_obj?.hash_sha256.slice(0, 10)}... Hosted ID: ${event_file_obj?.hosted_file_id_random} Event File ID: ${event_file_obj?.event_file_id_random}`}
+            <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 variant-soft-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 variant-soft-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>
+                </div>
+
+                <div
+                    class="flex flex-row gap-0.5"
+                    class:hidden={!show_direct_download}
                     >
-                    <span class="fas fa-download mx-1"></span>
-                    <div class="hidden">
-                    Download
-                    </div>
-                </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?.filename}&x_no_account_id_token=direct-download`)}
-                    class="btn btn-sm variant-soft-secondary m-0.5 *:hover:inline lg:text-xs"
-                    title="Copy the direct download file link to the clipboard."
+                    <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 variant-soft-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 variant-soft-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>
+                </div>
+
+                <div
+                    class:hidden={!show_direct_download}
+                    class="flex flex-row gap-0.5"
                     >
-                    <span class="fas fa-copy mx-1"></span>
-                    <div class="hidden">
-                    Copy Link
-                    </div>
-                </button>
+                    <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 variant-soft-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 variant-soft-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>
+                </div>
+
             </td>
             <td class="px-4 py-2">{ae_util.format_bytes(event_file_obj?.file_size)}</td>
             <td