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

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

    // This (ae) is only used for utilities
    // import { ae } from 'aether_npm_lib';
    import { ae_util } from '$lib/ae_utils/ae_utils';

    // These (slct_*) are only used internally for this component. Not needed???
    // import { slct_obj_id, slct_obj_li_type, slct_obj_type } from '../admin/stores_admin.js';

    // Should these slct_* be exported???
    let slct_obj_id = null;
    let slct_obj_li_type = null;
    let slct_obj_type = null;

    export let row_header: boolean = false;
    export let primary_obj_li_type: string = slct_obj_li_type; // account, person, user, event, event_session, membership_person
    export let obj = null;
    console.log(obj);
    console.log(typeof obj);

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

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

    /* BEGIN: Handle requests (archive, create, hide, remove, select, update, POST, PATCH, GET, DELETE) */
    /* END: Handle requests (archive, create, hide, remove, select, update, POST, PATCH, GET, DELETE) */

    /* BEGIN: Handle other local actions (show/hide form, process data) */
    /* END: Handle other local actions (show/hide form, process data) */

    /* BEGIN: Handle children events (archived, canceled, closed, created, deleted, hidden, updated) */
    /* END: Handle children events (archived, canceled, closed, created, deleted, hidden, updated) */
</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:
        NOTE:

        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.

        NOTE:
        NOTE:
    -->

            {#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}
                        on:click={() =>
                            (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}
                        on:click={() => {
                            slct_obj_type = obj_prop_name.replace('_id_random', '');
                            slct_obj_id = obj_prop_value;
                        }}
                        on:keypress={() => {
                            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}"
                            >
                                {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}
                        on:click={() =>
                            (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}
                        on:click={() => {
                            slct_obj_type = obj_prop_name.replaceAll('[URL]', '');
                            slct_obj_id = obj_prop_value;
                        }}
                        on:keypress={() => {
                            slct_obj_type = obj_prop_name.replaceAll('[URL]', '');
                            slct_obj_id = obj_prop_value;
                        }}
                    >
                        <a href={obj_prop_value}>{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 obj_prop_value && 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}
            <!-- <td data-obj_type={primary_obj_li_type} data-obj_prop_name={obj_prop_name}>{obj_prop_value}</td> -->
        {/each}
    {:else}
        <!-- This should never happen -->
        <td class="fs_smaller" colspan="100"> -- Not Set -- </td>
    {/if}
</tr>

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