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

<script lang="ts">
    // NEW NEW NEW: 2025-01-07
    import { liveQuery } from 'dexie';

    import type { key_val } from '$lib/stores/ae_stores';
    // import { ae_util } from '$lib/ae_utils/ae_utils';
    // import { api } from '$lib/api';
    // import Element_data_store from '$lib/element_data_store_v3.svelte';
    import Element_manage_hosted_file_li from '$lib/elements/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/stores/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 = $bindable(49),
        file_type = $bindable('all'),
        slct_hosted_file_kv = $bindable({}),
        slct_hosted_file_id = $bindable(null),
        slct_hosted_file_obj = $bindable(null)
    }: Props = $props();

    $effect(() => {
        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 = $derived(`${link_to_type}_id`); // no more _random ???
    let dq__where_eq_val = $derived(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/') === true)
                    // .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/') === true)
                    .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/') === true)
                    .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/') === true)
                    .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}
    <Element_manage_hosted_file_li
        {link_to_type}
        {link_to_id}
        {lq__hosted_file_obj_li}
        {class_li_default}
        {class_li}
        {display_mode}
        bind:max_file_count
        bind:file_type
        bind:slct_hosted_file_kv
        bind:slct_hosted_file_id
        bind:slct_hosted_file_obj
    />
    <!-- allow_basic={allow_basic} -->
    <!-- allow_moderator={allow_moderator} -->
{:else}
    <p>No files found</p>
{/if}