mirror of
https://github.com/koel/koel
synced 2024-12-30 06:23:05 +00:00
76 lines
2.7 KiB
Vue
76 lines
2.7 KiB
Vue
<template>
|
|
<div class="modal-wrapper" :class="{ overlay: showingModalName }">
|
|
<CreateSmartPlaylistForm v-if="showingModalName === 'create-smart-playlist-form'" @close="close"/>
|
|
<EditSmartPlaylistForm
|
|
v-if="showingModalName === 'edit-smart-playlist-form'"
|
|
@close="close"
|
|
:playlist="boundData.playlist"
|
|
/>
|
|
<AddUserForm v-if="showingModalName === 'add-user-form'" @close="close"/>
|
|
<EditUserForm v-if="showingModalName === 'edit-user-form'" :user="boundData.user" @close="close"/>
|
|
<EditSongForm
|
|
:songs="boundData.songs"
|
|
:initialTab="boundData.initialTab"
|
|
@close="close"
|
|
v-if="showingModalName === 'edit-song-form'"
|
|
/>
|
|
<AboutDialog v-if="showingModalName === 'about-dialog'" @close="close"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { eventBus } from '@/utils'
|
|
import { defineAsyncComponent, ref } from 'vue'
|
|
|
|
interface ModalWrapperBoundData {
|
|
playlist?: Playlist
|
|
user?: User
|
|
songs?: Song[]
|
|
initialTab?: string
|
|
}
|
|
|
|
declare type ModalName =
|
|
| 'create-smart-playlist-form'
|
|
| 'edit-smart-playlist-form'
|
|
| 'add-user-form'
|
|
| 'edit-user-form'
|
|
| 'edit-song-form'
|
|
| 'about-dialog'
|
|
|
|
const CreateSmartPlaylistForm = defineAsyncComponent(() => import('@/components/playlist/smart-playlist/SmartPlaylistCreateForm.vue'))
|
|
const EditSmartPlaylistForm = defineAsyncComponent(() => import('@/components/playlist/smart-playlist/SmartPlaylistEditForm.vue'))
|
|
const AddUserForm = defineAsyncComponent(() => import('@/components/user/UserAddForm.vue'))
|
|
const EditUserForm = defineAsyncComponent(() => import('@/components/user/UserEditForm.vue'))
|
|
const EditSongForm = defineAsyncComponent(() => import('@/components/song/SongEditForm.vue'))
|
|
const AboutDialog = defineAsyncComponent(() => import('@/components/meta/about-dialog.vue'))
|
|
|
|
const showingModalName = ref<ModalName | null>(null)
|
|
const boundData = ref<ModalWrapperBoundData>({})
|
|
|
|
const close = () => {
|
|
showingModalName.value = null
|
|
boundData.value = {}
|
|
}
|
|
|
|
eventBus.on({
|
|
'MODAL_SHOW_ABOUT_DIALOG': () => (showingModalName.value = 'about-dialog'),
|
|
'MODAL_SHOW_ADD_USER_FORM': () => (showingModalName.value = 'add-user-form'),
|
|
'MODAL_SHOW_CREATE_SMART_PLAYLIST_FORM': () => (showingModalName.value = 'create-smart-playlist-form'),
|
|
|
|
'MODAL_SHOW_EDIT_SMART_PLAYLIST_FORM': (playlist: Playlist) => {
|
|
boundData.value.playlist = playlist
|
|
showingModalName.value = 'edit-smart-playlist-form'
|
|
},
|
|
|
|
'MODAL_SHOW_EDIT_USER_FORM': (user: User) => {
|
|
boundData.value.user = user
|
|
showingModalName.value = 'edit-user-form'
|
|
},
|
|
|
|
'MODAL_SHOW_EDIT_SONG_FORM': (songs: Song[], initialTab: string = 'details'): void => {
|
|
boundData.value.songs = songs
|
|
boundData.value.initialTab = initialTab
|
|
showingModalName.value = 'edit-song-form'
|
|
}
|
|
})
|
|
</script>
|