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

<script lang="ts">
    import { onMount } from 'svelte';

    import { ae_util } from '$lib/ae_utils/ae_utils';

    // Should these slct_* be exported???
    let slct_obj_id = $state<any>(null);
    let slct_obj_li_type = '';
    let slct_obj_type = $state<string | null>(null);

    interface Props {
        row_header?: boolean;
        primary_obj_li_type?: string; // account, person, user, event, event_session, membership_person
        obj?: any;
    }

    let {
        row_header = false,
        primary_obj_li_type = $bindable(slct_obj_li_type),
        obj = null
    }: Props = $props();

    onMount(() => {
        console.log('** Element Mounted: ** Element Object Table Row');

        if (obj) {
            console.log('Table Row Object:', obj);
            console.log(typeof obj);
        } else {
            return false;
        }
    });
</script>

<tr>
    {#if obj != null && typeof obj == 'object'}
        {#each Object.entries(obj) as [obj_prop_name, obj_prop_value]}
            <!-- NEED TO ADD A CHECK IF:
            NOTE and WARNING:

            obj.id_random and obj.name then replace the ID field column with a link using obj.name

            This should probably go outside/before this tr loop.
            -->

            {#if obj_prop_name.endsWith('_id_random') || obj_prop_name == 'for_type' || obj_prop_name == 'for_id'}
                {#if row_header}
                    <th
                        data-obj_type={primary_obj_li_type}
                        data-obj_prop_name={obj_prop_name}
                        onclick={() =>
                            (primary_obj_li_type = obj_prop_name.replace('_id_random', ''))}
                    >
                        {ae_util.set_obj_prop_display_name({
                            prop_name: obj_prop_name,
                            obj_type: primary_obj_li_type
                        })}
                    </th>
                {:else}
                    <td
                        data-obj_type={primary_obj_li_type}
                        data-obj_prop_name={obj_prop_name}
                        onclick={() => {
                            slct_obj_type = obj_prop_name.replace('_id_random', '');
                            slct_obj_id = obj_prop_value;
                        }}
                        onkeypress={() => {
                            slct_obj_type = obj_prop_name.replace('_id_random', '');
                            slct_obj_id = obj_prop_value;
                        }}
                    >
                        <!-- {obj_prop_value} -->

                        <!-- {#if (obj_prop_value && obj_prop_value.length > 25)}
                    {obj_prop_value.substring(0,25)}
                {:else} -->
                        {#if obj_prop_value}
                            <a
                                href="/{ae_util.return_obj_type_path({
                                    obj_type_prop_name: obj_prop_name
                                })}/{obj_prop_value}"
                            >
                                {String(obj_prop_value).substring(0, 25)}
                            </a>
                        {:else}
                            <!-- {obj_prop_value} -->
                            <span class="fs_smaller">-- None --</span>
                        {/if}
                    </td>
                {/if}
            {:else if obj_prop_name.endsWith('[URL]')}
                {#if row_header}
                    <th
                        data-obj_type={primary_obj_li_type}
                        data-obj_prop_name={obj_prop_name}
                        onclick={() =>
                            (primary_obj_li_type = obj_prop_name.replaceAll('[URL]', ''))}
                    >
                        {ae_util.set_obj_prop_display_name({
                            prop_name: obj_prop_name.replaceAll('[URL]', ''),
                            obj_type: primary_obj_li_type
                        })}
                    </th>
                {:else}
                    <td
                        data-obj_type={primary_obj_li_type}
                        data-obj_prop_name={obj_prop_name}
                        onclick={() => {
                            slct_obj_type = obj_prop_name.replaceAll('[URL]', '');
                            slct_obj_id = obj_prop_value;
                        }}
                        onkeypress={() => {
                            slct_obj_type = obj_prop_name.replaceAll('[URL]', '');
                            slct_obj_id = obj_prop_value;
                        }}
                    >
                        <a href={String(obj_prop_value)}>{String(obj_prop_value)}</a>
                    </td>
                {/if}
            {:else if row_header}
                <th data-obj_type={primary_obj_li_type} data-obj_prop_name={obj_prop_name}>
                    {ae_util.set_obj_prop_display_name({
                        prop_name: obj_prop_name,
                        obj_type: primary_obj_li_type
                    })}
                </th>
            {:else}
                <td data-obj_type={primary_obj_li_type} data-obj_prop_name={obj_prop_name}>
                    {#if obj_prop_value}
                        {#if typeof obj_prop_value === 'string' && obj_prop_value.length > 25}
                            {obj_prop_value.substring(0, 25)} ...
                        {:else}
                            {obj_prop_value}
                        {/if}
                    {:else}
                        <span class="fs_smaller">-- None --</span>
                    {/if}
                </td>
            {/if}
        {/each}
    {:else}
        <!-- This should never happen -->
        <td class="fs_smaller" colspan="100"> -- Not Set -- </td>
    {/if}
</tr>

<style lang="postcss">
</style>