Now with new file manager
This commit is contained in:
Scott Idem
@@ -14,6 +14,7 @@ import { ae_util } from '$lib/ae_utils';
|
|||||||
import { api } from '$lib/api';
|
import { api } from '$lib/api';
|
||||||
import Element_ae_crud from '$lib/element_ae_crud.svelte';
|
import Element_ae_crud from '$lib/element_ae_crud.svelte';
|
||||||
// import Element_data_store from '$lib/element_data_store.svelte';
|
// import Element_data_store from '$lib/element_data_store.svelte';
|
||||||
|
import Element_manage_event_file_li from '$lib/element_manage_event_file_li.svelte';
|
||||||
|
|
||||||
import { core_func } from '$lib/ae_core_functions';
|
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 { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
|
||||||
@@ -850,212 +851,12 @@ WARNING: The file upload and management is a work in progress. You can upload an
|
|||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
<Element_manage_event_file_li
|
||||||
{#if ae_tmp.show__file_li && $lq__event_file_obj_li && $lq__event_file_obj_li.length > 0}
|
link_to_type={'event_presenter'}
|
||||||
<ul
|
link_to_id={$lq__event_presenter_obj.event_presenter_id_random}
|
||||||
class="space-y-2 px-4 w-full"
|
allow_basic={$events_loc.auth__kv.session[$events_slct.event_session_id] || $events_loc.auth__kv.presenter[$events_slct.event_presenter_id]}
|
||||||
>
|
allow_moderator={$events_loc.auth__kv.session[$events_slct.event_session_id]}
|
||||||
{#each $lq__event_file_obj_li as event_file_obj}
|
/>
|
||||||
<li class="flex flex-col lg:flex-row border border-gray-200 rounded-md p-2">
|
|
||||||
<div class="flex flex-row max-h-8 w-full">
|
|
||||||
|
|
||||||
<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-ghost-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>
|
|
||||||
|
|
||||||
<!-- Select from options for the purpose of this file -->
|
|
||||||
{#if ae_tmp[event_file_obj.event_file_id_random] && ae_tmp[event_file_obj.event_file_id_random]?.show__edit_file_purpose === true}
|
|
||||||
<Element_ae_crud
|
|
||||||
trigger_patch={ae_triggers.update_event_file_purpose}
|
|
||||||
api_cfg={$ae_api}
|
|
||||||
object_type={'event_file'}
|
|
||||||
object_id={event_file_obj.event_file_id_random}
|
|
||||||
field_name={'file_purpose'}
|
|
||||||
field_type={'button'}
|
|
||||||
field_value={ae_tmp[event_file_obj.event_file_id_random].file_purpose}
|
|
||||||
allow_null={false}
|
|
||||||
hide_edit_btn={true}
|
|
||||||
outline_element={false}
|
|
||||||
show_crud={false}
|
|
||||||
display_inline={false}
|
|
||||||
class_li={'grow m-1 flex flex-row items-center'}
|
|
||||||
on:ae_crud_updated={e => {
|
|
||||||
console.log(`ae_crud_updated:`, e.detail);
|
|
||||||
|
|
||||||
events_func.handle_load_ae_obj_id__event_file({api_cfg: $ae_api, event_file_id: event_file_obj.event_file_id_random, log_lvl: 1})
|
|
||||||
.then(function (load_results) {
|
|
||||||
// We need to force reload the Indexed DB - Dexie.js?
|
|
||||||
// Sometimes the changes are not seen. The file disappears when the Save button is pressed.
|
|
||||||
|
|
||||||
// Maybe reload page?
|
|
||||||
// window.location.reload();
|
|
||||||
})
|
|
||||||
.finally(function () {
|
|
||||||
// ae_tmp[event_file_obj.event_file_id_random].file_purpose = null;
|
|
||||||
ae_tmp[event_file_obj.event_file_id_random].show__edit_file_purpose = false;
|
|
||||||
// Careful with the trigger_patch. It will keep firing if not reset.
|
|
||||||
ae_triggers.update_event_file_purpose = false;
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="text-sm mx-1"
|
|
||||||
>
|
|
||||||
Purpose:
|
|
||||||
<select
|
|
||||||
bind:value={ae_tmp[event_file_obj.event_file_id_random].file_purpose}
|
|
||||||
class="select min-w-fit max-w-fit text-sm mx-1"
|
|
||||||
>
|
|
||||||
<option value="outline" selected={event_file_obj.file_purpose === 'outline'}>1. Outline</option>
|
|
||||||
<option value="draft" selected={event_file_obj.file_purpose === 'draft'}>2. Draft</option>
|
|
||||||
<option value="final" selected={event_file_obj.file_purpose === 'final'}>3. Final</option>
|
|
||||||
<option value="supporting">X. Supporting File (audio, video, data, etc)</option>
|
|
||||||
<option value="handout">X. Handout</option>
|
|
||||||
<option value="other">X. Other</option>
|
|
||||||
<!-- <option value="poster">Final - Poster</option> -->
|
|
||||||
<!-- <option value="presentation">Final - Presentation</option> -->
|
|
||||||
<!-- Shows in session room -->
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
on:click={() => {
|
|
||||||
console.log('*** Save button clicked ***');
|
|
||||||
// if (!confirm('Are you sure you want to save this event_presenter?')) {return false;}
|
|
||||||
|
|
||||||
console.log(`Selected event_file_id: ${event_file_obj.event_file_id_random}`);
|
|
||||||
|
|
||||||
ae_triggers.update_event_file_purpose = true;
|
|
||||||
// ae_triggers.update_event_file_purpose = event_file_obj.event_file_id_random;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ae_tmp.show__file_li = false;
|
|
||||||
}}
|
|
||||||
class="btn btn-sm variant-soft-success hover:variant-ghost-success mx-1"
|
|
||||||
>
|
|
||||||
<span class="fas fa-save mx-1"></span>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
</Element_ae_crud>
|
|
||||||
{:else}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
title="Edit the purpose of this file"
|
|
||||||
on:click={() => {
|
|
||||||
ae_tmp[event_file_obj.event_file_id_random] = {
|
|
||||||
file_purpose: event_file_obj.file_purpose,
|
|
||||||
show__edit_file_purpose: true
|
|
||||||
}
|
|
||||||
|
|
||||||
// ae_tmp[event_file_obj.event_file_id_random].file_purpose = event_file_obj.file_purpose;
|
|
||||||
// ae_tmp[event_file_obj.event_file_id_random].show__edit_file_purpose = true;
|
|
||||||
}}
|
|
||||||
class="btn btn-sm variant-soft-primary hover:variant-ghost-primary mx-1"
|
|
||||||
>
|
|
||||||
<span class="fas fa-edit mx-1"></span>
|
|
||||||
Edit
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
<button type="button"
|
|
||||||
title="Delete this file"
|
|
||||||
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;}
|
|
||||||
|
|
||||||
ae_promises[event_file_obj.event_file_id_random] = handle_delete__event_file({event_file_id: event_file_obj.event_file_id_random});
|
|
||||||
}}
|
|
||||||
class="btn btn-sm variant-soft-warning event_file_delete_btn width_100"
|
|
||||||
>
|
|
||||||
<span class="fas fa-minus mx-1"></span>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col grow w-full text-xs">
|
|
||||||
<span>
|
|
||||||
Uploaded:
|
|
||||||
{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_full')}
|
|
||||||
{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'time_short')}
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
Size:
|
|
||||||
{ae_util.format_bytes(event_file_obj.file_size)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{:else}
|
|
||||||
<p>No files uploaded</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- <ul
|
|
||||||
class="space-y-2 px-4"
|
|
||||||
>
|
|
||||||
{#if $events_slct.presenter_obj.file_li}
|
|
||||||
{#each $events_slct.presenter_obj.file_li as file_obj}
|
|
||||||
<li>
|
|
||||||
<span class="fas fa-file"></span>
|
|
||||||
<a
|
|
||||||
href={file_obj.url}
|
|
||||||
class="text-blue-500"
|
|
||||||
>{file_obj.name}</a>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
{:else}
|
|
||||||
<li>
|
|
||||||
<span class="fas fa-file"></span>
|
|
||||||
No files uploaded
|
|
||||||
</li>
|
|
||||||
{/if}
|
|
||||||
</ul> -->
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user