Making more fields us the LiveQuery. Migrated format bytes function. General clean up.

This commit is contained in:
Scott Idem
2024-06-27 10:57:19 -04:00
parent 20e1c46461
commit 8c8748b571
5 changed files with 176 additions and 64 deletions

View File

@@ -269,6 +269,7 @@ export function handle_db_save_ae_obj_li__event_file(
filename_no_ext: obj.filename_no_ext,
filename_w_ext: obj.filename_w_ext,
hosted_file_content_type: obj.hosted_file_content_type,
file_size: obj.file_size,
hosted_file_size: obj.hosted_file_size,
});
// console.log(`Put obj with ID: ${obj.event_file_id_random} or ${id_random}`);

View File

@@ -137,6 +137,22 @@ export let iso_datetime_formatter = function iso_datetime_formatter(
}
function format_bytes(
bytes: number,
decimals: number = 2
) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}
/* This utility function will add commas to a number. */
function number_w_commas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
@@ -993,6 +1009,7 @@ function return_obj_type_path({obj_type=null, obj_type_prop_name=null}) {
export let ae_util = {
iso_datetime_formatter: iso_datetime_formatter,
format_bytes: format_bytes,
number_w_commas: number_w_commas,
extract_prefixed_form_data: extract_prefixed_form_data,
process_data_string: process_data_string,

View File

@@ -204,39 +204,40 @@ export interface File {
hosted_file_id_random: string;
hash_sha256: string;
for_type: string;
for_id: string;
for_id_random: string;
for_type?: string;
for_id?: string;
for_id_random?: string;
event_id_random: string;
event_session_id_random: string;
event_presentation_id_random: string;
event_presenter_id_random: string;
event_location_id_random: string;
event_session_id_random?: string;
event_presentation_id_random?: string;
event_presenter_id_random?: string;
event_location_id_random?: string;
filename: string;
extension: string;
open_in_os: null|string; // null, empty, 'mac', or 'win'
open_in_os?: null|string; // null, empty, 'mac', or 'win'
lu_file_purpose_id: string;
lu_event_file_purpose_name: string;
file_purpose: string;
enable: null|boolean;
hide: null|boolean;
priority: null|boolean
sort: null|number;
group: null|string;
notes: null|string;
hide?: null|boolean;
priority?: null|boolean
sort?: null|number;
group?: null|string;
notes?: null|string;
created_on: Date;
updated_on: null|Date;
updated_on?: null|Date;
// Additional fields for convenience (database views)
filename_no_ext: string;
filename_w_ext: string;
hosted_file_content_type: string;
hosted_file_size: number; // In bytes
file_size: number; // In bytes
hosted_file_size?: number; // In bytes
}

View File

@@ -446,7 +446,7 @@ function send_sign_in_poc_email(
{:else}
Show
{/if}
Help
Help?
</button>
</div>
@@ -1675,6 +1675,14 @@ function send_sign_in_poc_email(
<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>
</li>
{/if}

View File

@@ -318,10 +318,10 @@ async function handle_delete__event_file({event_file_id}) {
<h2 class="h3">
Presenter Details for:<br>
<strong>
{$events_slct.presenter_obj.full_name}
{$lq__event_presenter_obj.full_name}
</strong>
<span class="text-sm">
({$events_slct.presenter_obj.email})
({$lq__event_presenter_obj.email})
</span>
{#if $ae_loc.trusted_access}
@@ -331,7 +331,7 @@ async function handle_delete__event_file({event_file_id}) {
type="button"
use:clipboard={encodeURI(`${$ae_loc.url_origin}/events_pres_mgmt/session/${$events_slct.event_session_id}?person_id=${$events_slct.presenter_obj.person_id_random}&person_pass=${$events_slct.presenter_obj.person_passcode}&presentation_id=${$events_slct.presentation_obj.event_presentation_id_random}&presenter_id=${$events_slct.presenter_obj.event_presenter_id_random}`)}
use:clipboard={encodeURI(`${$ae_loc.url_origin}/events_pres_mgmt/session/${$events_slct.event_session_id}?person_id=${$lq__event_presenter_obj.person_id_random}&person_pass=${$lq__event_presenter_obj.person_passcode}&presentation_id=${$events_slct.presentation_obj.event_presentation_id_random}&presenter_id=${$lq__event_presenter_obj.event_presenter_id_random}`)}
class="btn btn-sm variant-ghost-warning float-right m-1"
title="Copy the presenter access link to the clipboard."
>
@@ -376,10 +376,10 @@ async function handle_delete__event_file({event_file_id}) {
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$events_slct.presenter_obj.event_presenter_id_random}
object_id={$lq__event_presenter_obj.event_presenter_id_random}
field_name={'given_name'}
field_type={'text'}
field_value={$events_slct.presenter_obj.given_name}
field_value={$lq__event_presenter_obj.given_name}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
@@ -387,24 +387,42 @@ async function handle_delete__event_file({event_file_id}) {
display_inline={true}
display_block_edit={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.handle_load_ae_obj_id__event_presenter({api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj.event_presenter_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
{$events_slct.presenter_obj.given_name}
{$lq__event_presenter_obj.given_name}
</Element_ae_crud>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$events_slct.presenter_obj.event_presenter_id_random}
object_id={$lq__event_presenter_obj.event_presenter_id_random}
field_name={'family_name'}
field_type={'text'}
field_value={$events_slct.presenter_obj.family_name}
field_value={$lq__event_presenter_obj.family_name}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.handle_load_ae_obj_id__event_presenter({api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj.event_presenter_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
{$events_slct.presenter_obj.family_name}
{$lq__event_presenter_obj.family_name}
</Element_ae_crud>
<!-- </div> -->
<!-- {/if} -->
@@ -424,48 +442,66 @@ async function handle_delete__event_file({event_file_id}) {
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$events_slct.presenter_obj.event_presenter_id_random}
object_id={$lq__event_presenter_obj.event_presenter_id_random}
field_name={'email'}
field_type={'text'}
field_value={$events_slct.presenter_obj.email}
field_value={$lq__event_presenter_obj.email}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.handle_load_ae_obj_id__event_presenter({api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj.event_presenter_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-envelope"></span>
<a
href="mailto:{$events_slct.presenter_obj.email}"
href="mailto:{$lq__event_presenter_obj.email}"
class="text-blue-500"
title="Presenter's email address"
>{$events_slct.presenter_obj.email}</a>
>{$lq__event_presenter_obj.email}</a>
</Element_ae_crud>
{#if $events_slct.presenter_obj.person_primary_email != $events_slct.presenter_obj.email}
{#if $lq__event_presenter_obj.person_primary_email != $lq__event_presenter_obj.email}
<div>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$events_slct.presenter_obj.person_id_random}
object_id={$lq__event_presenter_obj.person_id_random}
field_name={'primary_email'}
field_type={'text'}
field_value={$events_slct.presenter_obj.person_primary_email}
field_value={$lq__event_presenter_obj.person_primary_email}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.handle_load_ae_obj_id__event_presenter({api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj.event_presenter_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-star-of-life"></span>
<span class="fas fa-envelope"></span>
<a
href="mailto:{$events_slct.presenter_obj.person_primary_email}"
href="mailto:{$lq__event_presenter_obj.person_primary_email}"
class="text-blue-500"
title="Person's primary email address"
>{$events_slct.presenter_obj.person_primary_email}</a>
>{$lq__event_presenter_obj.person_primary_email}</a>
</Element_ae_crud>
<!-- We need a way to let them re-sync the email addresses. The update here should flow back to the person.primary_email. -->
@@ -473,10 +509,10 @@ async function handle_delete__event_file({event_file_id}) {
trigger_patch={ae_triggers.update_person_primary_email}
api_cfg={$ae_api}
object_type={'person'}
object_id={$events_slct.presenter_obj.person_id_random}
object_id={$lq__event_presenter_obj.person_id_random}
field_name={'primary_email'}
field_type={'text'}
field_value={$events_slct.presenter_obj.email}
field_value={$lq__event_presenter_obj.email}
allow_null={false}
hide_edit_btn={true}
outline_element={false}
@@ -516,62 +552,89 @@ async function handle_delete__event_file({event_file_id}) {
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$events_slct.presenter_obj.event_presenter_id_random}
object_id={$lq__event_presenter_obj.event_presenter_id_random}
field_name={'affiliations'}
field_type={'text'}
field_value={$events_slct.presenter_obj.affiliations}
field_value={$lq__event_presenter_obj.affiliations}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.handle_load_ae_obj_id__event_presenter({api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-building"></span>
{$events_slct.presenter_obj.affiliations ?? '-- affiliations not set --'}
{$lq__event_presenter_obj.affiliations ?? '-- affiliations not set --'}
</Element_ae_crud>
</li>
<li>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$events_slct.presenter_obj.event_presenter_id_random}
object_id={$lq__event_presenter_obj.event_presenter_id_random}
field_name={'professional_title'}
field_type={'text'}
field_value={$events_slct.presenter_obj.professional_title}
field_value={$lq__event_presenter_obj.professional_title}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.handle_load_ae_obj_id__event_presenter({api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-user-tag"></span>
{$events_slct.presenter_obj.professional_title && $events_slct.presenter_obj.professional_title.length ? $events_slct.presenter_obj.professional_title : '-- professional title not set --'}
{$lq__event_presenter_obj.professional_title && $lq__event_presenter_obj.professional_title.length ? $lq__event_presenter_obj.professional_title : '-- professional title not set --'}
</Element_ae_crud>
</li>
<li>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'person'}
object_id={$events_slct.presenter_obj.person_id_random}
object_id={$lq__event_presenter_obj.person_id_random}
field_name={'passcode'}
field_type={'text'}
field_value={$events_slct.presenter_obj.person_passcode}
field_value={$lq__event_presenter_obj.person_passcode}
allow_null={true}
hide_edit_btn={!$ae_loc.trusted_access}
outline_element={false}
show_crud={false}
display_inline={false}
class_li={''}
on:ae_crud_updated={e => {
console.log(`ae_crud_updated:`, e.detail);
events_func.handle_load_ae_obj_id__event_presenter({api_cfg: $ae_api, event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random, log_lvl: 1})
.then(function (load_results) {
// Maybe reload page?
// window.location.reload();
});
}}
>
<span class="fas fa-user-secret"></span>
Passcode:
{$events_slct.presenter_obj.person_passcode ?? '-- passcode not set --'}
{$lq__event_presenter_obj.person_passcode ?? '-- passcode not set --'}
</Element_ae_crud>
<!-- <span class="fas fa-user-secret"></span>
{$events_slct.presenter_obj.person_passcode} (your passcode)
{$lq__event_presenter_obj.person_passcode} (your passcode)
<button
title="Edit your passcode"
@@ -591,10 +654,10 @@ async function handle_delete__event_file({event_file_id}) {
trigger_patch={ae_triggers.update_person}
api_cfg={$ae_api}
object_type={'event_presenter'}
object_id={$events_slct.presenter_obj?.event_presenter_id_random}
object_id={$lq__event_presenter_obj?.event_presenter_id_random}
field_name={'person_id_random'}
field_type={'select'}
field_value={$events_slct.presenter_obj.person_id_random}
field_value={$lq__event_presenter_obj.person_id_random}
select_option_li={$slct.person_obj_kv}
allow_null={$ae_loc.administrator_access}
hide_edit_btn={true}
@@ -615,9 +678,9 @@ async function handle_delete__event_file({event_file_id}) {
<span class="fas fa-user-check"></span>
<!-- <span class="fas fa-link"></span> -->
Person link
{#if $events_slct.presenter_obj.person_id_random}
{#if $lq__event_presenter_obj.person_id_random}
<span class="fas fa-link"></span>
{$events_slct.presenter_obj.person_id_random}
{$lq__event_presenter_obj.person_id_random}
{:else}
<span class="fas fa-unlink"></span>
-- person not set --
@@ -680,7 +743,7 @@ async function handle_delete__event_file({event_file_id}) {
return load_results;
});
ae_tmp.person_id = $events_slct.presenter_obj?.person_id_random;
ae_tmp.person_id = $lq__event_presenter_obj?.person_id_random;
ae_tmp.show__edit_person = true;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
@@ -697,7 +760,7 @@ async function handle_delete__event_file({event_file_id}) {
</ul>
<h3 class="h4">
Files: {$events_slct.presenter_obj.file_count ? `${$events_slct.presenter_obj.file_count}x` : '-- none --'}
Files: {$lq__event_presenter_obj.file_count ? `${$lq__event_presenter_obj.file_count}x` : '-- none --'}
</h3>
<button
type="button"
@@ -715,10 +778,10 @@ async function handle_delete__event_file({event_file_id}) {
</button>
<div class="text-sm text-center bg-orange-100 rounded-md p-2">
WARNING: The file upload and management is a work in progress. You can upload and delete files, but not yet rename them.
WARNING: The file upload and management is a work in progress. You can upload and delete files, but not yet rename them. You may need to refresh the page if your changes are not showing up.
</div>
<form
class="modal-form {$ae_loc.hub.classes__form}"
class="modal-form {$ae_loc.hub.classes__form} flex flex-col space-y-2 items-center w-full"
on:submit|preventDefault={handle_submit_form_files}
>
@@ -737,6 +800,7 @@ WARNING: The file upload and management is a work in progress. You can upload an
ae_placeholder_li.new_file = `Ready to upload: ${e.target.files[0].name}`;
$events_sess.pres_mgmt.disable_submit__event_file_obj = false;
} else {
$events_sess.pres_mgmt.disable_submit__event_file_obj = true;
ae_placeholder_li.new_file = null;
}
}}
@@ -789,15 +853,11 @@ WARNING: The file upload and management is a work in progress. You can upload an
{#if ae_tmp.show__file_li && $lq__event_file_obj_li && $lq__event_file_obj_li.length > 0}
<ul
class="space-y-2 px-4"
class="space-y-2 px-4 w-full"
>
{#each $lq__event_file_obj_li as event_file_obj}
<li>
<!-- <span class="fas fa-file"></span> -->
<!-- <a
href={file_obj.url}
class="text-blue-500"
>{file_obj.filename}</a> -->
<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={() => {
@@ -835,6 +895,13 @@ WARNING: The file upload and management is a work in progress. You can upload an
<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 -->
@@ -851,8 +918,8 @@ WARNING: The file upload and management is a work in progress. You can upload an
hide_edit_btn={true}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={'m-1'}
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);
@@ -872,7 +939,10 @@ WARNING: The file upload and management is a work in progress. You can upload an
});
}}
>
<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"
@@ -887,6 +957,7 @@ WARNING: The file upload and management is a work in progress. You can upload an
<!-- <option value="presentation">Final - Presentation</option> -->
<!-- Shows in session room -->
</select>
</label>
<button
type="button"
@@ -942,6 +1013,20 @@ WARNING: The file upload and management is a work in progress. You can upload an
<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>