Getting ready to make the new hosted file management and tools live on dev. Then on prod...

src/lib/element_manage_hosted_file_li.svelte

@@ -18,21 +18,27 @@ import { core_func } from '$lib/ae_core/ae_core_functions';
 
 interface Props {
     log_lvl?: number;
-    container_class_li?: string|Array<string>;
+    class_li_default?: string;
+    class_li?: string;
     lq__hosted_file_obj_li: any;
     link_to_type: string;
     link_to_id: string;
     // export let allow_moderator: boolean = false;
     display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
+    max_file_count?: number;
+    file_type?: string; // 'image', 'video', 'audio', 'document', 'other'
 }
 
 let {
     log_lvl = 0,
-    container_class_li = [],
+    class_li_default = 'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1 max-h-96 overflow-auto',
+    class_li = '',
     lq__hosted_file_obj_li = $bindable([]),
     link_to_type,
     link_to_id,
-    display_mode = 'default'
+    display_mode = 'default',
+    max_file_count = 19,
+    file_type = 'all'
 }: Props = $props();
 
 // export let show_convert_btn: null|boolean = null;
@@ -47,8 +53,25 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
 </script>
 
 
+<section
+    class="{class_li_default} {class_li}"
+    >
+
+<h3
+    class="h3"
+    class:hidden={!$lq__hosted_file_obj_li?.length || display_mode != 'default'}
+    >
+    Manage Files:
+    <span class="font-bold bg-success-100 px-4 border rounded-lg border-success-200"
+        title="Files for {link_to_type ?? '-- not set --'}: {link_to_id ?? '-- not set --'} (files: {$lq__hosted_file_obj_li?.length ?? 'None'})"
+        >
+        <span class="fas fa-folder-open mx-1"></span>
+        {@html $lq__hosted_file_obj_li ? `${$lq__hosted_file_obj_li.length}&times;` : '-- none --'}
+    </span>
+</h3>
+
 <div
-    class="float-right flex flex-row items-center"
+    class="flex flex-row flex-wrap items-center justify-center gap-1"
     >
     <button
         type="button"
@@ -57,16 +80,19 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
 
             db_core.file.clear();
 
-            let params = {
-                qry__enabled: 'all',
-                qry__hidden: 'all',
-            }
+            // let params = {
+            //     qry__enabled: 'all',
+            //     qry__hidden: 'all',
+            // }
 
             core_func.load_ae_obj_li__hosted_file({
                 api_cfg: $ae_api,
                 for_obj_type: link_to_type,
                 for_obj_id: link_to_id,
-                params: params,
+                enabled: 'enabled',
+                hidden: 'not_hidden',
+                limit: 250,
+                // params: params,
                 try_cache: true
             });
 
@@ -103,30 +129,14 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
 </div>
 
 
-<section class="svelte_component event_file_uploaded_manage {container_class_li}"
-    class:text-sm={display_mode != 'default'}
-    >
 
 
-<h3
-    class="h6"
-    class:hidden={!$lq__hosted_file_obj_li?.length || display_mode != 'default'}
-    >
-    Manage Files:
-    <span class="font-bold bg-success-100 px-4 border rounded-lg border-success-200"
-        title="Files for {link_to_type ?? '-- not set --'}: {link_to_id ?? '-- not set --'} (files: {$lq__hosted_file_obj_li?.length ?? 'None'})"
-        >
-        <span class="fas fa-folder-open mx-1"></span>
-        {@html $lq__hosted_file_obj_li ? `${$lq__hosted_file_obj_li.length}&times;` : '-- none --'}
-    </span>
-</h3>
-
 {#if $lq__hosted_file_obj_li && $lq__hosted_file_obj_li.length}
 <div class="overflow-auto w-full">
 
 
 <ol class="list-decimal list-inside">
-{#each [...$lq__hosted_file_obj_li].reverse() as hosted_file_obj}
+{#each [...$lq__hosted_file_obj_li].reverse().slice(0, max_file_count) as hosted_file_obj}
     <li>
         <button
             type="button"
@@ -157,9 +167,17 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
             type="button"
             disabled={!$ae_loc.administrator_access}
             onclick={() => {
-                // This (uploaded_file_kv) is referenced by other AE components. Currently it is only used for the video clipper.
-                $ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id] = hosted_file_obj;
+                if (!confirm(`Are you sure you want to delete this hosted file?\n${hosted_file_obj.filename} [${hosted_file_obj.hosted_file_id_random}]`)) {return false;}
 
+                ae_promises.delete__hosted_file_obj = core_func.delete_ae_obj_id__hosted_file({
+                    api_cfg: $ae_api,
+                    hosted_file_id: hosted_file_obj.hosted_file_id_random,
+                    link_to_type: link_to_type,
+                    link_to_id: link_to_id,
+                    rm_orphan: true,
+                    fake_delete: false,
+                    log_lvl: 1
+                })
             }}
             class:hidden={!$ae_loc.administrator_access}
             class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary"
@@ -201,6 +219,14 @@ ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
          <span class="text-xs text-gray-500">
             {ae_util.format_bytes(hosted_file_obj.size)}
         </span>
+
+        <span
+            class:hidden={!$ae_loc.edit_mode}
+            class="text-xs text-gray-500"
+            >
+            {hosted_file_obj.hash_sha256?.slice(0, 6)}...
+        </span>
+
     </li>
 {/each}
 </ol>