Trying to improve the hosted file manage.

src/lib/element_manage_hosted_file_li.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+export let log_lvl: number = 0;
+import { onMount } from 'svelte';
+import { clipboard } from '@skeletonlabs/skeleton';
+// 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 Element_ae_crud from '$lib/element_ae_crud.svelte';
+// import Element_data_store from '$lib/element_data_store_v2.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_core } from "$lib/ae_core/db_core";
+import { core_func } from '$lib/ae_core/ae_core_functions';
+
+export let container_class_li: string|Array<string> = [];
+export let lq__hosted_file_obj_li: any;
+export let link_to_type: string;
+export let link_to_id: string;
+export let allow_basic: boolean = false;
+export let allow_moderator: boolean = false;
+export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
+
+// export let show_convert_btn: null|boolean = null;
+
+// let ae_placeholder_li: key_val = {};
+let ae_promises: key_val = {};
+let ae_tmp: key_val = {};
+ae_tmp.show__file_li = true;
+ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
+// let ae_triggers: key_val = {};
+
+</script>
+
+
+<div
+    class="float-right flex flex-row items-center"
+    >
+    <button
+        type="button"
+        on:click={() => {
+            console.log('*** Refresh button clicked ***');
+
+            db_core.file.clear();
+
+            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,
+                try_cache: true
+            });
+
+            // ae_tmp.show__file_li = false;
+            // console.log(`$lq__hosted_file_obj_li:`, $lq__hosted_file_obj_li);
+            // $slct_trigger = 'load__hosted_file_obj_li';
+            // ae_tmp.show__file_li = true;
+        }}
+        class="btn btn-sm p-1 m-1 variant-soft-tertiary hover:variant-ghost-warning transition hover:transition-all *:hover:inline"
+        class:hidden={!$ae_loc.edit_mode || !$ae_loc.authenticated_access}
+        title="Refresh the list of files"
+        >
+        <span class="fas fa-sync-alt m-1"></span>
+        <div class="hidden">
+        Files
+        </div>
+    </button>
+
+    <button
+        type="button"
+        on:click={() => {
+            console.log('*** Show Alt Download button clicked ***');
+            ae_tmp.show__direct_download = !ae_tmp.show__direct_download;
+        }}
+        class="btn btn-sm p-1 m-1 variant-soft-tertiary hover:variant-ghost-warning transition hover:transition-all *:hover:inline"
+        class:hidden={!$ae_loc.edit_mode || !$ae_loc.trusted_access}
+        title="Toggle direct download link and copy link button"
+        >
+        <span class="fas fa-download m-1"></span>
+        <div class="hidden">
+        {ae_tmp.show__direct_download ? 'Alt On' : 'Alt Download Off'}
+        </div>
+    </button>
+</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>
+{#each $lq__hosted_file_obj_li as hosted_file_obj}
+    <li>
+    {hosted_file_obj.filename}
+    </li>
+{/each}
+</ol>
+
+</div>
+
+{:else}
+
+<p
+    class="w-96 text-center text-gray-500"
+    class:hidden={display_mode != 'default'}
+    >
+    No files available to display
+</p>
+
+{/if}
+
+</section>
+
+
+<style>
+
+</style>