From dfd43963bb7c22de260068f8fa07bec2b3153d9f Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 14 Nov 2024 15:17:40 -0500
Subject: [PATCH] Improved the linked content (files) list.

---
 src/lib/element_manage_event_file_li.svelte   |   5 +
 .../bb/ae_idaa_comp__post_obj_id_edit.svelte  | 255 ++++++++++++------
 .../bb/ae_idaa_comp__post_obj_li.svelte       |   7 +-
 3 files changed, 186 insertions(+), 81 deletions(-)

diff --git a/src/lib/element_manage_event_file_li.svelte b/src/lib/element_manage_event_file_li.svelte
index dc649548..27dd7d92 100644
--- a/src/lib/element_manage_event_file_li.svelte
+++ b/src/lib/element_manage_event_file_li.svelte
@@ -151,6 +151,7 @@ onMount(() => {
     <td class="event_file__file align-middle">
         {#if $events_sess.pres_mgmt?.show_field_edit__filename != event_file_obj.event_file_id_random}
         <button
+            type="button"
             disabled={!allow_basic && !allow_moderator && !$ae_loc.trusted_access}
             on:click={() => {
                 // ae_promises[event_file_obj.event_file_id_random]
@@ -300,6 +301,7 @@ onMount(() => {
                 >
             {#if $events_sess.pres_mgmt.tmp_val__filename_no_ext.trim() != event_file_obj.filename_no_ext}
             <button
+                type="button"
                 on:click={async () => {
                     let new_filename = $events_sess.pres_mgmt.tmp_val__filename_no_ext.trim()
                     // Remove possible double extension
@@ -350,6 +352,7 @@ onMount(() => {
         >
         <div class="flex flex-col gap-1 text-sm">
         <button
+            type="button"
             disabled={!allow_basic && !$ae_loc.trusted_access}
             on:click={() => {
                 if ($events_sess.pres_mgmt.show_field_edit__filename == event_file_obj.event_file_id_random) {
@@ -373,6 +376,7 @@ onMount(() => {
         </button>
 
         <button
+            type="button"
             disabled={!allow_basic && !$ae_loc.trusted_access}
             on:click={async () => {
                 let event_file_data = {
@@ -428,6 +432,7 @@ onMount(() => {
 
 
         <button
+            type="button"
             disabled={!allow_basic && !$ae_loc.trusted_access}
             on:click={async () => {
                 if (!confirm(`Are you sure you want to delete this file?\n${event_file_obj.filename} [${event_file_obj.event_file_id_random}]`)) {return false;}
diff --git a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
index 58c0c303..63f0aeb8 100644
--- a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
+++ b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_id_edit.svelte
@@ -176,12 +176,19 @@ $: if ($idaa_slct.post_obj.upload_complete && $idaa_slct.post_obj.hosted_file_id
 async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_file_obj_li: any[]) {
     console.log(`*** handle_hosted_files_uploaded() *** ${hosted_file_id_li}`);
 
-    // We need to update the post_obj with the new file (for now just the first one).
+    // We need to add the record to the $idaa_slct.post_obj.hosted_file_obj_li and then update the post_obj.linked_li_json with the new value.
+    if (!$idaa_slct.post_obj.linked_li_json) {
+        $idaa_slct.post_obj.linked_li_json = hosted_file_obj_li;
+    } else {
+        // $idaa_slct.post_obj.linked_li_json.append(hosted_file_obj_li);
+        $idaa_slct.post_obj.linked_li_json.push(...hosted_file_obj_li);
+    }
+
     prom_api__post_obj = posts_func.update_ae_obj__post({
         api_cfg: $ae_api,
         post_id: $idaa_slct.post_id,
         data_kv: {
-            linked_li_json: JSON.stringify(hosted_file_obj_li),
+            linked_li_json: JSON.stringify($idaa_slct.post_obj.linked_li_json),
             // hosted_file_id_random: hosted_file_obj_li[0].hosted_file_id_random,
             // filename: hosted_file_obj_li[0].filename,
             // file_extension: hosted_file_obj_li[0].extension,
@@ -189,7 +196,7 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
         log_lvl: log_lvl
         })
     .then(function (post_obj_update_result) {
-        $idaa_slct.post_obj = $lq__post_obj;
+        // $idaa_slct.post_obj = $lq__post_obj;
     })
     .catch(function (error) {
         console.log('Something went wrong.');
@@ -255,87 +262,175 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
 
         </label>
 
-        {#if !$idaa_slct.post_obj.linked_li_json && $ae_loc.trusted_access}
-            <Comp_hosted_files_upload
-                class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
-                link_to_type="post"
-                link_to_id={$idaa_slct.post_obj.post_id}
-                bind:hosted_file_id_li={$idaa_slct.post_obj.hosted_file_id_li}
-                bind:hosted_file_obj_li={$idaa_slct.post_obj.hosted_file_obj_li}
-                bind:upload_complete={$idaa_slct.post_obj.upload_complete}
-                log_lvl={log_lvl}
+        <div
+            class="flex flex-col gap-1 items-center justify-center"
+            >
+            <button
+                type="button"
+                class="btn btn-sm"
+                class:variant-filled-secondary={$idaa_sess.bb.show__inline_edit__file_upload}
+                class:variant-soft-secondary={!$idaa_sess.bb.show__inline_edit__file_upload}
+                on:click={() => {
+                    $idaa_sess.bb.show__inline_edit__file_upload = !$idaa_sess.bb.show__inline_edit__file_upload;
+                }}
                 >
-                <span slot="label">
-                    <div>
-                        <span class="fas fa-upload"></span>
-                        <strong class="bg-green-100 p-1">Upload post files</strong>
-                    </div>
-                    <span class="text-sm text-gray-600 dark:text-gray-400 italic">
-                        <strong>Aether hosted files only</strong><br>
-                        Recommended: documents (PDF), audio (mp3, m4a), and video (mp4, mkv)<br>
-                    </span>
-                </span>
-            </Comp_hosted_files_upload>
-        {/if}
+                <span class="fas fa-upload m-1"></span>
+                {$idaa_sess.bb.show__inline_edit__file_upload ? 'Hide' : 'Show'} File Upload
+            </button>
 
-        {#if $idaa_slct.post_obj.linked_li_json && $idaa_slct.post_obj.linked_li_json.length}
-            <div class="ae_section flex flex-row flex-wrap gap-1 items-center justify-center">
-                <span class="fas fa-paperclip"></span>
-                <span class="text-sm text-gray-600 dark:text-gray-400 italic">Linked files:</span>
-                {#each $idaa_slct.post_obj.linked_li_json as linked_obj, index}
-                    <!-- <a
-                        href={linked_obj.url}
-                        target="_blank"
-                        class="badge badge-info variant-filled-info"
+            <div
+                class:hidden={!$idaa_sess.bb.show__inline_edit__file_upload}
+                >
+                {#if $ae_loc.trusted_access}
+                    <Comp_hosted_files_upload
+                        class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
+                        link_to_type="post"
+                        link_to_id={$idaa_slct.post_obj.post_id}
+                        bind:hosted_file_id_li={$idaa_slct.post_obj.hosted_file_id_li}
+                        bind:hosted_file_obj_li={$idaa_slct.post_obj.hosted_file_obj_li}
+                        bind:upload_complete={$idaa_slct.post_obj.upload_complete}
+                        log_lvl={log_lvl}
                         >
-                        <span class="fas fa-paperclip m-1"></span>
-                        {linked_obj.filename}
-                        ({linked_obj.hosted_file_id_random})
-                    </a> -->
-
-                    {#if $ae_loc.authenticated_access && linked_obj?.hosted_file_id_random}
-                    <button
-                        type="button"
-                        disabled={!$ae_loc.trusted_access}
-                        on:click={() => {
-                            ae_promises[linked_obj.hosted_file_id_random] = api.download_hosted_file({
-                                api_cfg: $ae_api,
-                                hosted_file_id: linked_obj.hosted_file_id_random,
-                                return_file: true,
-                                filename: linked_obj.filename,
-                                auto_download: true,
-                                log_lvl: 0
-                            });
-
-                            // window.postMessage({ type: 'download_event_file', hosted_file_id: linked_obj.hosted_file_id_random, filename: linked_obj.filename, auto_download: true }, '*');
-                        }}
-                        class="btn btn-sm lg:btn-md variant-soft-primary hover:variant-filled-primary min-w-48"
-                        title={`Download this file:\n${linked_obj.filename}\n[API] SHA256: ${linked_obj?.hash_sha256.slice(0, 10)}... Hosted ID: ${linked_obj.hosted_file_id_random} Archive Content ID: ${linked_obj.archive_content_id}`}
-                        >
-                        {#await ae_promises[linked_obj.hosted_file_id_random]}
-                            <span class="fas fa-spinner fa-spin mx-1"></span>
-                            <span class="">
-                                Downloading
-                                {#if $ae_sess.api_download_kv[linked_obj.hosted_file_id_random]}
-                                    {$ae_sess.api_download_kv[linked_obj.hosted_file_id_random].percent_completed}%
-                                {/if}
-                                :
+                        <span slot="label">
+                            <div>
+                                <span class="fas fa-upload"></span>
+                                <strong class="bg-green-100 p-1">Upload post files</strong>
+                            </div>
+                            <span class="text-sm text-gray-600 dark:text-gray-400 italic">
+                                <strong>Aether hosted files only</strong><br>
+                                Recommended: documents (PDF), audio (mp3, m4a), and video (mp4, mkv)<br>
                             </span>
-                        {:then}
-                            <span class="fas fa-{ae_util.file_extension_icon(linked_obj?.extension)}"></span>
-                        {/await}
-
-                        <span class="grow">
-                        {ae_util.shorten_filename({filename: linked_obj?.filename, max_length: 30})}
                         </span>
-                    </button>
-                    {/if}
-
-
-
-                {/each}
+                    </Comp_hosted_files_upload>
+                {/if}
             </div>
-        {/if}
+        </div>
+
+            {#if $idaa_slct.post_obj.linked_li_json && $idaa_slct.post_obj.linked_li_json.length}
+                <div class="ae_section flex flex-row flex-wrap gap-1 items-center justify-center">
+                    <span class="fas fa-paperclip"></span>
+                    <span class="text-sm text-gray-600 dark:text-gray-400 italic">Linked files:</span>
+                    {#each $idaa_slct.post_obj.linked_li_json as linked_obj, index}
+                        <span>
+                        <!-- <a
+                            href={linked_obj.url}
+                            target="_blank"
+                            class="badge badge-info variant-filled-info"
+                            >
+                            <span class="fas fa-paperclip m-1"></span>
+                            {linked_obj.filename}
+                            ({linked_obj.hosted_file_id_random})
+                        </a> -->
+
+                        {#if $ae_loc.authenticated_access && linked_obj?.hosted_file_id_random}
+                        <button
+                            type="button"
+                            disabled={!$ae_loc.trusted_access}
+                            on:click={() => {
+                                ae_promises[linked_obj.hosted_file_id_random] = api.download_hosted_file({
+                                    api_cfg: $ae_api,
+                                    hosted_file_id: linked_obj.hosted_file_id_random,
+                                    return_file: true,
+                                    filename: linked_obj.filename,
+                                    auto_download: true,
+                                    log_lvl: 0
+                                });
+
+                                // window.postMessage({ type: 'download_event_file', hosted_file_id: linked_obj.hosted_file_id_random, filename: linked_obj.filename, auto_download: true }, '*');
+                            }}
+                            class="btn btn-sm lg:btn-md variant-ghost-primary hover:variant-filled-primary min-w-48"
+                            title={`Download this file:\n${linked_obj.filename}\n[API] SHA256: ${linked_obj?.hash_sha256.slice(0, 10)}... Hosted ID: ${linked_obj.hosted_file_id_random} Archive Content ID: ${linked_obj.archive_content_id}`}
+                            >
+                            {#await ae_promises[linked_obj.hosted_file_id_random]}
+                                <span class="fas fa-spinner fa-spin mx-1"></span>
+                                <span class="">
+                                    Downloading
+                                    {#if $ae_sess.api_download_kv[linked_obj.hosted_file_id_random]}
+                                        {$ae_sess.api_download_kv[linked_obj.hosted_file_id_random].percent_completed}%
+                                    {/if}
+                                    :
+                                </span>
+                            {:then}
+                                <span class="fas fa-{ae_util.file_extension_icon(linked_obj?.extension)}"></span>
+                            {/await}
+
+                            <span class="grow">
+                            {ae_util.shorten_filename({filename: linked_obj?.filename, max_length: 30})}
+                            </span>
+                        </button>
+
+                        <button
+                            type="button"
+                            disabled={!$ae_loc.trusted_access}
+                            on:click={async () => {
+                                if (!confirm(`Are you sure you want to delete this file?\n${linked_obj.filename} [${linked_obj.hosted_file_id_random}]`)) {return false;}
+
+                                // ae_promises[linked_obj.event_file_id_random] = handle_delete__event_file({event_file_id: linked_obj.event_file_id_random});
+
+                                // First - Attempt to delete the hosted file
+                                ae_promises.delete__linked_obj = await core_func.delete_ae_obj_id__hosted_file({
+                                    api_cfg: $ae_api,
+                                    hosted_file_id: linked_obj.hosted_file_id_random,
+                                    link_to_type: 'post',
+                                    link_to_id: $idaa_slct.post_id,
+                                    rm_orphan: true,
+                                    fake_delete: false,
+                                    log_lvl: 1
+                                })
+                                .then(function (delete_result) {
+                                    // Second - If deleted, then update the post_obj
+                                    console.log(`File removed. Now update the post_obj`);
+
+                                    // We need to remove the record from the $idaa_slct.post_obj.hosted_file_obj_li and then update the post_obj.linked_li_json with the new value.
+                                    let delete_result_li = $idaa_slct.post_obj.linked_li_json.filter(function (hosted_file_obj) {
+                                        console.log(`hosted_file_obj.hosted_file_id_random = ${hosted_file_obj.hosted_file_id_random}`);
+                                        return hosted_file_obj.hosted_file_id_random !== linked_obj.hosted_file_id_random;
+                                    });
+
+                                    $idaa_slct.post_obj.hosted_file_obj_li = delete_result_li;
+                                    $idaa_slct.post_obj.linked_li_json = delete_result_li;
+
+                                    prom_api__post_obj = posts_func.update_ae_obj__post({
+                                        api_cfg: $ae_api,
+                                        post_id: $idaa_slct.post_id,
+                                        data_kv: {
+                                            linked_li_json: JSON.stringify($idaa_slct.post_obj.linked_li_json),
+                                            },
+                                        log_lvl: log_lvl
+                                        })
+                                    .then(function (post_obj_update_result) {
+                                        // We need to do all of this since the DB object has changed and the SLCT object does automatically update (yet...??? Svelte 5?).
+                                        // $idaa_slct.post_obj = $lq__post_obj;
+                                    })
+                                    .catch(function (error) {
+                                        console.log('Something went wrong.');
+                                        console.log(error);
+                                        return false;
+                                    });
+                                })
+                                .catch(function (error) {
+                                    console.log('Something went wrong.');
+                                    console.log(error);
+                                    return false;
+                                })
+                                .finally(() => {
+                                });
+
+                            }}
+                            class="btn btn-sm variant-glass-tertiary hover:variant-soft-success"
+                            title="Delete this file"
+                            >
+                            <span class="fas fa-trash-alt mx-1"></span>
+                            <!-- <span class="fas fa-minus mx-1"></span> -->
+                            Delete
+                        </button>
+                        {/if}
+
+                        </span>
+                    {/each}
+                </div>
+            {/if}
+
 
         <div>
             <label class="">
@@ -452,7 +547,9 @@ async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_
     {#if $ae_loc.trusted_access}
     <button
         type="button"
-        class="btn btn-sm variant-soft-secondary float-right"
+        class="btn btn-sm float-right"
+        class:variant-filled-secondary={$idaa_loc.bb.show__admin_options}
+        class:variant-soft-secondary={!$idaa_loc.bb.show__admin_options}
         on:click={() => {
             $idaa_loc.bb.show__admin_options = !$idaa_loc.bb.show__admin_options;
         }}
diff --git a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte
index 7db7dbe8..a7c8f622 100644
--- a/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte
+++ b/src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_obj_li.svelte
@@ -29,7 +29,10 @@ onMount(() => {
 
         <header class="ae_header">
             <h3 class="post__title flex flex-row gap-2 items-center">
-                <span class="post__title h3">{@html idaa_post_obj.title}</span>
+                <span class="post__title h3">
+                    <span class="fas fa-comment-alt m-1"></span>
+                    {@html idaa_post_obj.title}
+                </span>
                 {#if idaa_post_obj.topic_name}<span class="badge badge-info variant-glass-secondary"><span class="fas fa-user-md m-1"></span> {idaa_post_obj.topic_name}</span>{/if}
             </h3>
         </header>
@@ -64,7 +67,7 @@ onMount(() => {
 
                 {#if idaa_post_obj?.post_comment_count}
                     <span class="ae_badge ae_info post__post_comment_count">
-                        <span class="fas fa-comment"></span> {(idaa_post_obj?.post_comment_count == 1 ? `${idaa_post_obj?.post_comment_count} comment` : `${idaa_post_obj?.post_comment_count} comments` )}
+                        <span class="fas fa-comments"></span> {(idaa_post_obj?.post_comment_count == 1 ? `${idaa_post_obj?.post_comment_count} comment` : `${idaa_post_obj?.post_comment_count} comments` )}
                     </span>
                 {/if}