Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now with a better file manager. It still needs work.

Browse Source
This commit is contained in:
Scott Idem
2024-06-27 18:19:29 -04:00
parent 37ac30c56c
commit 12c778c7e2
5 changed files with 226 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/lib/element_manage_event_file_li.svelte
View File

@@ -17,10 +17,22 @@ 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 container_class_li: string|Array<string> = [];
export let link_to_type: string;
export let link_to_id: string;
export let show_convert_btn: boolean = null;
export let allow_basic: boolean = false;
export let allow_moderator: boolean = false;
export let show_convert_btn: null|boolean = null;
// This more or less overrides the default access control. Some elements may have their own access control.
if ($ae_loc.administrator_access) {
allow_basic = true;
allow_moderator = true;
} else if ($ae_loc.trusted_access) {
allow_basic = true;
allow_moderator = true;
}
let ae_placeholder_li: key_val = {};
let ae_promises: key_val = {}; // Promise<any>;
@@ -41,7 +53,6 @@ onMount(() => {
$slct_trigger = 'load__event_file_obj_li';
});
</script>
@@ -68,20 +79,33 @@ onMount(() => {
{#if $lq__event_file_obj_li && $lq__event_file_obj_li.length}
<table class="table table-striped table-bordered event_file_list">
<table class="table-auto w-full">
<col width="35%"> <!-- 35% -->
<col width=""> <!-- 35% -->
<col width=""> <!-- 24% -->
<!-- <col width=""> -->
<col width="">
<col width="">
<thead>
<tr>
<th class="text-left">File</th>
<th class="text-left">Options</th>
<th class="text-left">Status</th>
<th class="text-left">Meta</th>
</tr>
</thead>
<tbody>
{#each $lq__event_file_obj_li as event_file_obj}
<tr class="ae_obj obj_event_file">
<td class="event_file_info">
<tr class="ae_obj obj_event_file border-t border-b border-gray-200 hover:bg-gray-50 hover:border-gray-300">
<td class="event_file_info align-middle">
<!-- <div
class="min-w-full"
> -->
<button
disabled={!allow_basic && !allow_moderator}
on:click={() => {
// ae_promises[event_file_obj.event_file_id_random]
ae_promises[event_file_obj.event_file_id_random] = api.download_hosted_file({
@@ -109,9 +133,9 @@ onMount(() => {
</span>
{:then}
<span class="fas fa-download mx-1"></span>
<span class="text-sm">
<!-- <span class="text-sm">
Download:
</span>
</span> -->
{/await}
<span class="grow">
@@ -126,22 +150,129 @@ onMount(() => {
</span>
</button>
<!-- </div> -->
</td>
<td class="event_file_info">
<div class="flex flex-col gap-1 text-sm">
<button
disabled={1==1 || !allow_basic && !allow_moderator}
class="btn btn-sm variant-glass-tertiary hover:variant-soft-success"
title="The rename function is not ready yet."
>
<span class="fas fa-edit mx-1"></span>
Rename
</button>
<button
disabled={!allow_basic && !allow_moderator}
class:hidden={!$ae_loc.administrator_access}
class="btn btn-sm variant-glass-tertiary hover:variant-soft-success"
title="Hide this file from the presentation launcher"
>
<span class="fas fa-eye mx-1"></span>
Hide
</button>
<button
disabled={!allow_moderator}
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});
ae_promises.delete__event_file_obj = await events_func.handle_delete_ae_obj_id__event_file({
api_cfg: $ae_api,
event_file_id: event_file_obj.event_file_id_random,
log_lvl: 2
})
}}
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>
</div>
</td>
<td class="event_file_info">
<div class="flex flex-col gap-1 items-center text-sm">
<div class="">
{#if event_file_obj.open_in_os == 'win'}
MS Windows <span class="fab fa-windows"></span>
{:else if event_file_obj.open_in_os == 'mac'}
Apple macOS <span class="fab fa-apple"></span>
{/if}
</div>
<!-- Select from options for the purpose of this file -->
<div>
<label
for="file_purpose"
class="text-sm mx-1 hidden"
>
Purpose:
</label>
<select
id="file_purpose"
name="file_purpose"
disabled={!allow_basic && !allow_moderator}
value={event_file_obj.file_purpose}
on:change={e => {
// ae_tmp[event_file_obj.event_file_id_random].file_purpose = e.target.value;
console.log(`Selected file_purpose: ${e.target.value}`);
let event_file_data = {
event_file_id_random: event_file_obj.event_file_id_random,
file_purpose: e.target.value,
};
events_func.handle_update_ae_obj__event_file({
api_cfg: $ae_api,
event_file_id: event_file_obj.event_file_id_random,
data_kv: event_file_data,
log_lvl: 1
})
.then (function (update_results) {
console.log(`Update results:`, update_results);
$slct_trigger = 'load__event_file_obj_li';
});
// ae_triggers.update_event_file_purpose = true;
}}
class="select min-w-fit max-w-fit text-sm mx-1"
>
<option value={null} selected={!event_file_obj.file_purpose}>-- purpose not set --</option>
<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>
</div>
</div>
</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">
<div class="flex flex-col text-sm">
<!-- {event_file_obj.hosted_file_content_type} -->
<span class="w-full flex flex-row justify-between">
<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'}
<!-- {#if event_file_obj.open_in_os == 'win'}
<strong>
MS Windows <span class="fab fa-windows"></span>
</strong>
@@ -149,27 +280,38 @@ onMount(() => {
<strong>
Apple macOS <span class="fab fa-apple"></span>
</strong>
{/if}
{/if} -->
</span>
<span>
Size:
<strong>{ae_util.format_bytes(event_file_obj.file_size)}</strong>
</span>
<span class="text-muted">
</span>
<span class="w-full flex flex-row justify-between">
<span class="">
Hash: <strong>{event_file_obj.hash_sha256.slice(0, 10)}&mldr;</strong>
</span>
<span class="text-muted">
<span class:hidden={!$ae_loc.administrator_access}>
ID:
<strong>{event_file_obj.hosted_file_id_random}</strong>
</span>
</span>
<span>
<!-- <span class="fas fa-upload mx-1"></span> -->
Uploaded:
{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_full')}
<!-- <span class="fas fa-cloud-upload-alt mx-1"></span> -->
<!-- Uploaded: -->
<!-- <span class="fas fa-calendar-day mx-1"></span> -->
<span class="fas fa-clock mx-1"></span>
<strong>
{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'dddd')}
</strong>
{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_iso')}
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>