272 lines
9.5 KiB
Svelte
272 lines
9.5 KiB
Svelte
<script lang="ts">
|
|
// 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 allow_basic: boolean = false;
|
|
|
|
interface Props {
|
|
log_lvl?: number;
|
|
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'
|
|
slct_hosted_file_kv?: key_val;
|
|
slct_hosted_file_id?: any;
|
|
slct_hosted_file_obj?: any;
|
|
}
|
|
|
|
let {
|
|
log_lvl = 0,
|
|
class_li_default = 'flex flex-col gap-1 items-center justify-center w-fit max-w-4xl 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',
|
|
max_file_count = 49,
|
|
file_type = 'all',
|
|
slct_hosted_file_kv = $bindable({}),
|
|
slct_hosted_file_id = $bindable(null),
|
|
slct_hosted_file_obj = $bindable(null)
|
|
}: Props = $props();
|
|
|
|
// export let show_convert_btn: null|boolean = null;
|
|
|
|
// let ae_placeholder_li: key_val = {};
|
|
let ae_promises: key_val = {};
|
|
let ae_tmp: key_val = $state({});
|
|
ae_tmp.show__file_li = true;
|
|
ae_tmp.show__direct_download = $ae_loc.core?.show__direct_download ?? false;
|
|
// let ae_triggers: key_val = {};
|
|
|
|
</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}×` : '-- none --'}
|
|
</span>
|
|
</h3>
|
|
|
|
<div
|
|
class="flex flex-row flex-wrap items-center justify-center gap-1"
|
|
>
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
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,
|
|
enabled: 'enabled',
|
|
hidden: 'not_hidden',
|
|
limit: 250,
|
|
// 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"
|
|
onclick={() => {
|
|
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>
|
|
|
|
|
|
|
|
|
|
{#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().slice(0, max_file_count) as hosted_file_obj}
|
|
<li>
|
|
<button
|
|
type="button"
|
|
disabled={!$ae_loc.trusted_access}
|
|
onclick={() => {
|
|
// This (uploaded_file_kv) is referenced by other AE components. Currently it is only used for the video clipper. This should be a toggle of Add/Remove.
|
|
if ($ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id]) {
|
|
delete $ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id];
|
|
$ae_loc.files.uploaded_file_kv = {...$ae_loc.files.uploaded_file_kv};
|
|
|
|
delete slct_hosted_file_kv[hosted_file_obj.hosted_file_id];
|
|
slct_hosted_file_id = null;
|
|
slct_hosted_file_obj = null;
|
|
} else {
|
|
$ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id] = hosted_file_obj;
|
|
lq__hosted_file_obj_li[hosted_file_obj.hosted_file_id] = hosted_file_obj;
|
|
|
|
slct_hosted_file_kv[hosted_file_obj.hosted_file_id] = hosted_file_obj;
|
|
slct_hosted_file_id = hosted_file_obj.hosted_file_id;
|
|
slct_hosted_file_obj = hosted_file_obj;
|
|
}
|
|
log_lvl = 1;
|
|
if (log_lvl) {
|
|
console.log(`slct_hosted_file_kv:`, slct_hosted_file_kv);
|
|
}
|
|
}}
|
|
class="btn btn-sm variant-soft-secondary hover:variant-filled-secondary"
|
|
title="Add/Remove file to/from the locally stored uploaded file list. This is referenced by other AE components."
|
|
>
|
|
{#if $ae_loc.files.uploaded_file_kv[hosted_file_obj.hosted_file_id]}
|
|
<span class="fas fa-minus-circle m-1"></span>
|
|
<span class="hidden">Remove</span>
|
|
{:else}
|
|
<span class="fas fa-plus-circle m-1"></span>
|
|
<span class="hidden">Add</span>
|
|
{/if}
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
disabled={!$ae_loc.administrator_access}
|
|
onclick={() => {
|
|
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"
|
|
title="Delete a file from the host server."
|
|
>
|
|
<span class="fas fa-trash-alt m-1"></span>
|
|
<span class="hidden">Delete</span>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
disabled={!$ae_loc.administrator_access}
|
|
class:hidden={!$ae_loc.administrator_access}
|
|
onclick={() => {
|
|
// This should show/hide the editable fields for the file. This might need to be in a little modal.
|
|
}}
|
|
|
|
class="btn btn-sm variant-soft-primary hover:variant-filled-primary"
|
|
title="Edit file details"
|
|
>
|
|
<span class="fas fa-edit m-1"></span>
|
|
<span class="hidden">Edit</span>
|
|
</button>
|
|
|
|
<span class="text-xs text-gray-500">
|
|
<span class="fas fa-calendar-day mx-1"></span>
|
|
<span class="hidden">Created on:</span>
|
|
{ae_util.iso_datetime_formatter(hosted_file_obj.created_on, 'datetime_medium_sec')}
|
|
{#if hosted_file_obj.updated_on}
|
|
<span class="fas fa-sync-alt mx-1"></span>
|
|
Updated on
|
|
{ae_util.iso_datetime_formatter(hosted_file_obj.updated_on, 'datetime_medium_sec')}
|
|
{/if}
|
|
</span>
|
|
|
|
<span class="text-sm font-semibold">
|
|
<!-- <a href="" class="underline text-blue-500"> -->
|
|
{hosted_file_obj.filename}
|
|
<!-- </a> -->
|
|
</span>
|
|
<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, 5)}...
|
|
</span>
|
|
|
|
</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> |