OSIT-AE-App-Svelte/src/lib/element_manage_hosted_file_li_all.svelte

<script lang="ts">
// NEW NEW NEW: 2025-01-07
// 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 Element_manage_hosted_file_li from '$lib/element_manage_hosted_file_li.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 { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';

interface Props {
    // import { events_func } from '$lib/ae_events_functions';
    class_li_default?: string; // |Array<string>;
    class_li?: string; // |Array<string>;
    link_to_type: string;
    link_to_id: string;
    allow_basic?: boolean; // Not used yet
    allow_moderator?: boolean; // Not used yet
    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 {
    class_li_default,
    class_li,
    link_to_type,
    link_to_id,
    allow_basic = false,
    allow_moderator = false,
    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();

console.log(`HERE HERE HERE HERE: link_to_type: ${link_to_type} link_to_id: ${link_to_id}`);

// export let show_convert_btn: null|boolean = null;

// let ae_placeholder_li: key_val = {};
// let ae_promises: key_val = {};
let ae_tmp: key_val = {};
ae_tmp.show__file_li = true;
ae_tmp.show__direct_download = false;
// let ae_triggers: key_val = {};

let dq__where_val: string = `${link_to_type}_id`; // no more _random ???
let dq__where_eq_val: string = link_to_id;

// This should include all files that are associated with an object (event, location, session, presenter, etc.)
// I am not sure why, but doing reverse() and then sortBy() seems to sort in descending order.
let lq__hosted_file_obj_li = $derived(liveQuery(async () => {
    // console.log(`dq__where_val: ${dq__where_val}`);
    // console.log(`dq__where_eq_val: ${dq__where_eq_val}`);
    let results = null;
    if (file_type == 'all' || !file_type) {
        results = await db_core.file
            .where(dq__where_val)
            .equals(dq__where_eq_val)
            .sortBy('created_on');
    } else if (file_type == 'video') {
        // Handle video/mp4, video/mov, video/webm. If the content type is prefixed with "video/", then it is a video file.
        let extension = 'mp4';
        results = await db_core.file
            .where(dq__where_val)
            .equals(dq__where_eq_val)
            // .and((x) => (x.extension == extension))
            // .and((x) => (x.content_type == `video/${extension}`))
            .and((x) => (x.content_type.startsWith('video/')))
            // .reverse()
            .sortBy('created_on')
            // .toArray()
            ;
    } else if (file_type == 'audio') {
        // Handle audio/mp3, audio/wav, audio/ogg. If the content type is prefixed with "audio/", then it is an audio file.
        results = await db_core.file
            .where(dq__where_val)
            .equals(dq__where_eq_val)
            .and((x) => (x.content_type.startsWith('audio/')))
            .sortBy('created_on')
            ;
    } else if (file_type == 'image') {
        // Handle image/jpeg, image/png, image/gif. If the content type is prefixed with "image/", then it is an image file.
        results = await db_core.file
            .where(dq__where_val)
            .equals(dq__where_eq_val)
            .and((x) => (x.content_type.startsWith('image/')))
            .sortBy('created_on')
            ;
    } else if (file_type == 'document') {
        // Handle application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation. If the content type is prefixed with "application/", then it is a document file.
        results = await db_core.file
            .where(dq__where_val)
            .equals(dq__where_eq_val)
            .and((x) => (x.content_type.startsWith('application/')))
            .sortBy('created_on')
            ;
    } else {
        results = await db_core.file
            .where(dq__where_val)
            .equals(dq__where_eq_val)
            // .reverse()
            .sortBy('created_on')
        ;
    }

    return results;
}));
</script>



<!-- {#if lq__hosted_file_obj_li}
    <h3 class="h3">{lq__hosted_file_obj_li.length}&times; files clipped</h3>
    <div class="container">
    <ol>
    {#each lq__hosted_file_obj_li as hosted_file_obj}
        <li>
        {hosted_file_obj.filename}
        </li>
    {/each}
    </ol>
    </div>
{:else}
    <p>No files found</p>
{/if} -->


{#if lq__hosted_file_obj_li}
    <Element_manage_hosted_file_li
        link_to_type={link_to_type}
        link_to_id={link_to_id}
        lq__hosted_file_obj_li={lq__hosted_file_obj_li}
        class_li_default={class_li_default}
        class_li={class_li}
        display_mode={display_mode}
        bind:max_file_count={max_file_count}
        bind:file_type={file_type}
        bind:slct_hosted_file_kv={slct_hosted_file_kv}
        bind:slct_hosted_file_id={slct_hosted_file_id}
        bind:slct_hosted_file_obj={slct_hosted_file_obj}
        />
        <!-- allow_basic={allow_basic} -->
        <!-- allow_moderator={allow_moderator} -->
{:else}
    <p>No files found</p>
{/if}