75 lines
1.6 KiB
Vue
75 lines
1.6 KiB
Vue
<template>
|
|
<div class="tracks-page">
|
|
<div class="header-section">
|
|
<h1>Библиотека треков</h1>
|
|
<button class="btn-primary" @click="showUpload = true">Загрузить трек</button>
|
|
</div>
|
|
|
|
<div v-if="tracksStore.loading" class="loading">Загрузка...</div>
|
|
|
|
<div v-else-if="tracksStore.tracks.length === 0" class="empty">
|
|
<p>Нет треков. Загрузите первый!</p>
|
|
</div>
|
|
|
|
<div v-else class="tracks-list card">
|
|
<TrackList
|
|
:tracks="tracksStore.tracks"
|
|
@delete="handleDelete"
|
|
/>
|
|
</div>
|
|
|
|
<Modal v-if="showUpload" title="Загрузить трек" @close="showUpload = false">
|
|
<UploadTrack @uploaded="showUpload = false" />
|
|
</Modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useTracksStore } from '../stores/tracks'
|
|
import TrackList from '../components/tracks/TrackList.vue'
|
|
import UploadTrack from '../components/tracks/UploadTrack.vue'
|
|
import Modal from '../components/common/Modal.vue'
|
|
|
|
const tracksStore = useTracksStore()
|
|
|
|
const showUpload = ref(false)
|
|
|
|
onMounted(() => {
|
|
tracksStore.fetchTracks()
|
|
})
|
|
|
|
async function handleDelete(track) {
|
|
if (confirm(`Удалить трек "${track.title}"?`)) {
|
|
await tracksStore.deleteTrack(track.id)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tracks-page {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.header-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.header-section h1 {
|
|
margin: 0;
|
|
}
|
|
|
|
.tracks-list {
|
|
padding: 16px;
|
|
}
|
|
|
|
.loading, .empty {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #aaa;
|
|
}
|
|
</style>
|