meetguru/src/pinia/popup.js

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import ShortUniqueId from 'short-unique-id';
const createId = new ShortUniqueId();
 
export const usePopupStore = defineStore('popups', () => {
    const availablePopups = computed(() => {
        const libraryId = wwLib.$store.getters['libraries/getLibrary'].id;
        return Object.values(wwLib.$store.getters['libraries/getComponents'])
            .filter(libraryComponent => libraryComponent.type === 'modal' && libraryComponent.libraryId === libraryId)
            .map(libraryComponent => {
                return {
                    name: libraryComponent.name,
                    libraryComponentBaseId: libraryComponent.id,
                    libraryId,
                };
            });
    });

    const onClosePromises = {};

    const instances = ref({});

    async function open(libraryComponentBaseId, content, { waitClosing = false } = {}) {
        const uid = `popup-${createId.rnd()}`;
        instances.value[uid] = {
            uid,
            libraryComponentBaseId,
            content,
        };
        if (waitClosing) {
            return new Promise(resolve => {
                onClosePromises[uid] = resolve;
            });
        }
        return Promise.resolve(uid);
    }

    function close(uid, data) {
        delete instances.value[uid];
        if (onClosePromises[uid]) {
            onClosePromises[uid](data);
            delete onClosePromises[uid];
        }
    }

    function closeAll(libraryComponentBaseId) {
        Object.keys(instances.value).forEach(uid => {
            if (instances.value[uid].libraryComponentBaseId === libraryComponentBaseId) {
                close(uid);
            }
        });
    }
 
    return {
        availablePopups,
        open,
        close,
        closeAll,
        instances,
        stackedPopupUids: computed(() => {
            const stacks = {};
            Object.values(instances.value).forEach(popup => {
                const isStacked =
                    wwLib.$store.getters['libraries/getComponents'][popup.libraryComponentBaseId]?.configuration?.popup
                        ?.isStacked &&
                    wwLib.$store.getters['libraries/getComponents'][popup.libraryComponentBaseId]?.configuration?.popup
                        ?.containerUid;
                if (!isStacked) return;
                const containerUid =
                    wwLib.$store.getters['libraries/getComponents'][popup.libraryComponentBaseId]?.configuration?.popup
                        ?.containerUid;
                if (!stacks[containerUid]) {
                    stacks[containerUid] = [];
                }
                stacks[containerUid].push(popup.uid);
            });

            return stacks;
        }),
        singlePopupUids: computed(() => {
            return Object.keys(instances.value).filter(uid => {
                const popup = instances.value[uid];
                return !wwLib.$store.getters['libraries/getComponents'][popup.libraryComponentBaseId]?.configuration
                    ?.popup?.isStacked;
            });
        }),
     };
});