List of Tjsdocuments

<script>
    import { getContext, onDestroy } from "svelte";

    import { ApplicationShell } from "#runtime/svelte/component/core";
    import { TJSDocument } from "#runtime/svelte/store/fvtt/document";
    import { DynMapReducer } from "#runtime/svelte/store/reducer";
    import { TJSInput } from "#standard/component";

    import CompendiumFilters from "../components/CompendiumFilters.svelte";
    import CompendiumItemList from "../components/CompendiumItemList.svelte";
    import Spinner from "../components/Spinner.svelte";

    import {
        addTJSDocumentSearchFilter,
        removeSearchFilter,
    } from "../handlers/handleSearchFilter";

    async function getDocuments(docList) {
        // Sort the documents into alphabetical order
        docList.sort((a, b) => a.name.localeCompare(b.name));

        const validDocs = new Map();

        // Create a TJSDocument for each document in the compendium. Filter out invalid docs.
        await Promise.all(
            docList.map(async ({ _id, uuid }) => {
                const doc = new TJSDocument();
                const setSuccessfully = await doc.setFromUUID(uuid);

                if (setSuccessfully) validDocs.set(_id, doc);
            })
        );

        return validDocs;
    }

    export let { compendiumType, document, sheet } =
        getContext("#external").application;

    export let elementRoot;

    let reducer = new DynMapReducer();
    let loading = true;

    const searchInput = addTJSDocumentSearchFilter(reducer);
    onDestroy(() => removeSearchFilter(reducer));

    // Fake an async operation in svelte to get around the fact that we can't await in the script tag
    Promise.resolve(getDocuments([...document.index])).then((docs) => {
        reducer.setData(docs, true);
        reducer.index.update();
        loading = false;
    });
</script>

<ApplicationShell bind:elementRoot>
    <main>
        <CompendiumFilters {compendiumType} />

        <div class="search-field">
            <TJSInput
                input={searchInput}
                --tjs-input-placeholder-color="#555"
                --tjs-input-text-margin="0"
                --tjs-input-text-width="100%"
            />
        </div>

        {#if loading}
            <div class="spinner-wrapper">
                <Spinner />
            </div>
        {:else}
            <CompendiumItemList documents={[...$reducer]} {compendiumType} />
        {/if}
    </main>
</ApplicationShell>

<script>
    import { getContext, onDestroy } from "svelte";

    import { ApplicationShell } from "#runtime/svelte/component/core";
    import { TJSDocument } from "#runtime/svelte/store/fvtt/document";
    import { DynMapReducer } from "#runtime/svelte/store/reducer";
    import { TJSInput } from "#standard/component";

    import CompendiumFilters from "../components/CompendiumFilters.svelte";
    import CompendiumItemList from "../components/CompendiumItemList.svelte";
    import Spinner from "../components/Spinner.svelte";

    import {
        addTJSDocumentSearchFilter,
        removeSearchFilter,
    } from "../handlers/handleSearchFilter";

    async function getDocuments(docList) {
        // Sort the documents into alphabetical order
        docList.sort((a, b) => a.name.localeCompare(b.name));

        const validDocs = new Map();

        // Create a TJSDocument for each document in the compendium. Filter out invalid docs.
        await Promise.all(
            docList.map(async ({ _id, uuid }) => {
                const doc = new TJSDocument();
                const setSuccessfully = await doc.setFromUUID(uuid);

                if (setSuccessfully) validDocs.set(_id, doc);
            })
        );

        return validDocs;
    }

    export let { compendiumType, document, sheet } =
        getContext("#external").application;

    export let elementRoot;

    let reducer = new DynMapReducer();
    let loading = true;

    const searchInput = addTJSDocumentSearchFilter(reducer);
    onDestroy(() => removeSearchFilter(reducer));

    // Fake an async operation in svelte to get around the fact that we can't await in the script tag
    Promise.resolve(getDocuments([...document.index])).then((docs) => {
        reducer.setData(docs, true);
        reducer.index.update();
        loading = false;
    });
</script>

<ApplicationShell bind:elementRoot>
    <main>
        <CompendiumFilters {compendiumType} />

        <div class="search-field">
            <TJSInput
                input={searchInput}
                --tjs-input-placeholder-color="#555"
                --tjs-input-text-margin="0"
                --tjs-input-text-width="100%"
            />
        </div>

        {#if loading}
            <div class="spinner-wrapper">
                <Spinner />
            </div>
        {:else}
            <CompendiumItemList documents={[...$reducer]} {compendiumType} />
        {/if}
    </main>
</ApplicationShell>

    const sidebarHook = Hooks.on("collapseSidebar", () => {
        sidebarStartPosition = getRightPosition();
    });

    function getRightPosition() {
        const uiRight = document.querySelector("#ui-right");
        const uiRightRect = uiRight.getBoundingClientRect();
        return uiRightRect.left;
    }

    onDestroy(() => {
        console.log("Destroying A5EEffectsPanel");
        Hooks.off("collapseSidebar", sidebarHook);
    });

    let sidebarStartPosition = getRightPosition();

    const position = application.position;
    const panelWidth = position.stores.width;
    position.stores.top.set(20);

    $: position.stores.left.set(sidebarStartPosition - $panelWidth - 5);

    const sidebarHook = Hooks.on("collapseSidebar", () => {
        sidebarStartPosition = getRightPosition();
    });

    function getRightPosition() {
        const uiRight = document.querySelector("#ui-right");
        const uiRightRect = uiRight.getBoundingClientRect();
        return uiRightRect.left;
    }

    onDestroy(() => {
        console.log("Destroying A5EEffectsPanel");
        Hooks.off("collapseSidebar", sidebarHook);
    });

    let sidebarStartPosition = getRightPosition();

    const position = application.position;
    const panelWidth = position.stores.width;
    position.stores.top.set(20);

    $: position.stores.left.set(sidebarStartPosition - $panelWidth - 5);