Working on new standalone event file manage element
This commit is contained in:
Scott Idem
194
src/lib/element_manage_event_file_li.svelte
Normal file
194
src/lib/element_manage_event_file_li.svelte
Normal file
@@ -0,0 +1,194 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { clipboard, FileDropzone } from '@skeletonlabs/skeleton';
|
||||
import { liveQuery } from "dexie";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
import type { key_val } from '$lib/ae_stores';
|
||||
import { ae_util } from '$lib/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.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_events } from "$lib/db_events";
|
||||
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
|
||||
import { events_func } from '$lib/ae_events_functions';
|
||||
|
||||
export let container_class_li = [];
|
||||
export let link_to_type: string;
|
||||
export let link_to_id: string;
|
||||
export let show_convert_btn: boolean = null;
|
||||
|
||||
let ae_placeholder_li: key_val = {};
|
||||
let ae_promises: key_val = {}; // Promise<any>;
|
||||
let ae_tmp: key_val = {};
|
||||
ae_tmp.show__file_li = true;
|
||||
let ae_triggers: key_val = {};
|
||||
|
||||
let dq__where_val: string = `${link_to_type}_id_random`;
|
||||
let dq__where_eq_val: string = link_to_id;
|
||||
|
||||
let lq__event_file_obj_li = liveQuery(
|
||||
async () => await db_events.files.where(dq__where_val).equals(dq__where_eq_val).toArray()
|
||||
);
|
||||
|
||||
onMount(() => {
|
||||
console.log('Element - Manage Event File List');
|
||||
console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
|
||||
|
||||
$slct_trigger = 'load__event_file_obj_li';
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<section class="svelte_component event_file_uploaded_manage {container_class_li.join(' ')}">
|
||||
|
||||
<h3 class="h4">
|
||||
Manage Files: {$lq__event_file_obj_li ? `${$lq__event_file_obj_li.length}x` : '-- none --'}
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
console.log('*** Refresh button clicked ***');
|
||||
ae_tmp.show__file_li = false;
|
||||
console.log(`$lq__event_file_obj_li:`, $lq__event_file_obj_li);
|
||||
$slct_trigger = 'load__event_file_obj_li';
|
||||
ae_tmp.show__file_li = true;
|
||||
}}
|
||||
class="btn btn-sm variant-soft-secondary hover:variant-ghost-warning float-right transition hover:transition-all"
|
||||
>
|
||||
<span class="fas fa-sync-alt mx-1"></span>
|
||||
Refresh Files
|
||||
</button>
|
||||
|
||||
|
||||
{#if $lq__event_file_obj_li && $lq__event_file_obj_li.length}
|
||||
|
||||
<table class="table table-striped table-bordered event_file_list">
|
||||
|
||||
<col width="35%"> <!-- 35% -->
|
||||
<col width=""> <!-- 24% -->
|
||||
<!-- <col width=""> -->
|
||||
<col width="">
|
||||
<col width="">
|
||||
|
||||
<tbody>
|
||||
|
||||
{#each $lq__event_file_obj_li as event_file_obj}
|
||||
<tr class="ae_obj obj_event_file">
|
||||
<td class="event_file_info">
|
||||
<button
|
||||
on:click={() => {
|
||||
// ae_promises[event_file_obj.event_file_id_random]
|
||||
ae_promises[event_file_obj.event_file_id_random] = api.download_hosted_file({
|
||||
api_cfg: $ae_api,
|
||||
hosted_file_id: event_file_obj.hosted_file_id_random,
|
||||
return_file: true,
|
||||
filename: event_file_obj.filename,
|
||||
auto_download: true,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
// window.postMessage({ type: 'download_event_file', event_file_id: event_file_obj.event_file_id_random, filename: event_file_obj.filename, auto_download: true }, '*');
|
||||
}}
|
||||
class="btn btn-md variant-soft-primary hover:variant-filled-primary min-w-96"
|
||||
title={`Download this file: ${event_file_obj.filename} [API] -- SHA256 hash: ${event_file_obj.hash_sha256.slice(0, 10)}...`}
|
||||
>
|
||||
{#await ae_promises[event_file_obj.event_file_id_random]}
|
||||
<span class="fas fa-spinner fa-spin mx-1"></span>
|
||||
<span class="">
|
||||
Downloading
|
||||
{#if $ae_sess.api_download_kv[event_file_obj.hosted_file_id_random]}
|
||||
{$ae_sess.api_download_kv[event_file_obj.hosted_file_id_random].percent_completed}%
|
||||
{/if}
|
||||
:
|
||||
</span>
|
||||
{:then}
|
||||
<span class="fas fa-download mx-1"></span>
|
||||
<span class="text-sm">
|
||||
Download:
|
||||
</span>
|
||||
{/await}
|
||||
|
||||
<span class="grow">
|
||||
{ae_util.shorten_filename({filename: event_file_obj.filename, max_length: 25})}
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="badge variant-glass-success hover:variant-filled-success text-sm"
|
||||
class:hidden={!event_file_obj.file_purpose}
|
||||
>
|
||||
{event_file_obj.file_purpose}
|
||||
</span>
|
||||
|
||||
</button>
|
||||
</td>
|
||||
<td class="event_file_info">
|
||||
|
||||
</td>
|
||||
<td class="event_file_info">
|
||||
{event_file_obj.open_in_os}
|
||||
{event_file_obj.file_purpose}
|
||||
</td>
|
||||
<td class="event_file_info file_meta text-gray-500">
|
||||
<div class="flex flex-col">
|
||||
<!-- {event_file_obj.hosted_file_content_type} -->
|
||||
<span>
|
||||
Type:
|
||||
<strong>{event_file_obj.extension} <span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)}"></span>
|
||||
</strong>
|
||||
{#if event_file_obj.open_in_os == 'win'}
|
||||
<strong>
|
||||
MS Windows <span class="fab fa-windows"></span>
|
||||
</strong>
|
||||
{:else if event_file_obj.open_in_os == 'mac'}
|
||||
<strong>
|
||||
Apple macOS <span class="fab fa-apple"></span>
|
||||
</strong>
|
||||
{/if}
|
||||
</span>
|
||||
<span>
|
||||
Size:
|
||||
<strong>{ae_util.format_bytes(event_file_obj.file_size)}</strong>
|
||||
</span>
|
||||
<span class="text-muted">
|
||||
Hash: <strong>{event_file_obj.hash_sha256.slice(0, 10)}…</strong>
|
||||
</span>
|
||||
<span class="text-muted">
|
||||
ID:
|
||||
<strong>{event_file_obj.hosted_file_id_random}</strong>
|
||||
</span>
|
||||
<span>
|
||||
<!-- <span class="fas fa-upload mx-1"></span> -->
|
||||
Uploaded:
|
||||
{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_full')}
|
||||
at
|
||||
<strong>{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'time_short_no_leading')}</strong>
|
||||
<!-- {event_file_obj.updated_on} -->
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{:else}
|
||||
|
||||
<p class="text-center text-muted">
|
||||
No files uploaded yet.
|
||||
</p>
|
||||
|
||||
{/if}
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -26,6 +26,7 @@ import { events_func } from '$lib/ae_events_functions';
|
||||
|
||||
import Form_agree from './form_agree.svelte';
|
||||
import Presenter_view from './presenter_view.svelte';
|
||||
import Element_manage_event_file_li from '$lib/element_manage_event_file_li.svelte';
|
||||
|
||||
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
|
||||
$slct.account_id = data.account_id;
|
||||
@@ -1690,6 +1691,11 @@ function send_sign_in_poc_email(
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<Element_manage_event_file_li
|
||||
link_to_type={'event_presentation'}
|
||||
link_to_id={event_presentation_obj.event_presentation_id_random}
|
||||
/>
|
||||
|
||||
<!-- Show files list for this presentation -->
|
||||
<!-- {#await event_presentation_obj.event_file_li}
|
||||
<p>Loading...</p>
|
||||
|
||||
@@ -10,7 +10,7 @@ import { liveQuery } from "dexie";
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
import type { key_val } from '$lib/ae_stores';
|
||||
import { ae_util, shorten_string } from '$lib/ae_utils';
|
||||
import { ae_util } from '$lib/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.svelte';
|
||||
|
||||
Reference in New Issue
Block a user