MusareFork/frontend/src/components/ModalManager.vue

<script setup lang="ts">
import { shallowRef } from "vue";
import { storeToRefs } from "pinia";
import { useModalsStore, useModalComponents } from "@/stores/modals";

const modalsStore = useModalsStore();
const { modals, activeModals } = storeToRefs(modalsStore);

const modalComponents = shallowRef(
	useModalComponents("components/modals", {
		editUser: "EditUser.vue",
		login: "Login.vue",
		register: "Register.vue",
		whatIsNew: "WhatIsNew.vue",
		createStation: "CreateStation.vue",
		editNews: "EditNews.vue",
		editArtist: "EditArtist.vue",
		editAlbum: "EditAlbum.vue",
		manageStation: "ManageStation/index.vue",
		importArtistMB: "ImportArtistMB.vue",
		editPlaylist: "EditPlaylist/index.vue",
		createPlaylist: "CreatePlaylist.vue",
		report: "Report.vue",
		viewReport: "ViewReport.vue",
		bulkActions: "BulkActions.vue",
		viewApiRequest: "ViewApiRequest.vue",
		viewPunishment: "ViewPunishment.vue",
		removeAccount: "RemoveAccount.vue",
		importAlbum: "ImportAlbum.vue",
		importArtist: "ImportArtist.vue",
		confirm: "Confirm.vue",
		editSong: "EditSong/index.vue",
		viewMedia: "ViewMedia.vue",
		bulkEditPlaylist: "BulkEditPlaylist.vue",
		convertSpotifySongs: "ConvertSpotifySongs.vue",
		replaceSpotifySongs: "ReplaceSpotifySongs.vue"
	})
);
</script>

<template>
	<div>
		<div v-for="activeModalUuid in activeModals" :key="activeModalUuid">
			<component
				:is="modalComponents[modals[activeModalUuid].modal]"
				:modal-uuid="activeModalUuid"
				v-bind="modals[activeModalUuid].props"
			/>
			<div
				v-if="!modalComponents[modals[activeModalUuid].modal]"
				class="modal-error"
			>
				<p>
					Modal "{{ modals[activeModalUuid].modal }}" does not exist
				</p>
			</div>
		</div>
	</div>
</template>

<style lang="less" scoped>
.modal-error {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: var(--dark-red);
	color: var(--white);
	z-index: 10000;
	padding: 32px;

	p {
		padding: 0;
		margin: 0;
		font-size: 3em;
	}
}
</style>