PIbd-22_Artamonova_T.V._IP/front/src/pages/songs.vue

<template>
    <div class="container mt-4">
        <h1 class="text-center mb-4">Песни</h1>
        <button class="btn btn-primary mr-2" @click="openModal('create')">Добавить</button>
        <table class="table table-striped">
            <thead class="thead-inverse">
            <tr>
                <th>Название</th>
                <th>Продолжительность</th>
                <th>Альбом</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="son in songs" :key="son.id">
                <td>{{ son.songName }}</td>
                <td>{{ son.duration }}</td>
                <td>{{ son.albumName || 'No Album'}}</td>
                <td>
                    <td>
                        <button class="btn btn-primary mr-2" @click="openModal('edit', son)">Изменить</button>
                    </td>
                    <td>
                        <button class="btn btn-danger" @click="deleteSong(son.id)">Удалить</button>
                    </td>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="modal" tabindex="-1" id="editModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Песня</h5>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="songName">Название:</label>
                            <input type="text" class="form-control" id="songName" name="songName" v-model="editedSong.songName">
                        </div>
                        <div class="form-group">
                            <label for="duration">Продолжительность:</label>
                            <input type="number" class="form-control" id="duration" name="duration" step="0.1" v-model="editedSong.duration">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="editModal" @click="closeModal()">Закрыть</button>
                    <button type="button" class="btn btn-primary" v-if="editedSong.status === 'create'" @click="addSong(editedSong)">Создать</button>
                    <button type="button" class="btn btn-primary" v-else @click="editSong(editedSong)">Сохранить</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'axios';
import axios from "axios";
import Song from "@/models/Song";
export default {
    created() {
        this.getSongs();
        this.getAlbums();
    },
    mounted() {
        const addModal = document.getElementById('editModal');
        addModal.addEventListener('shown.bs.modal', function () {
        })
    },

    data() {
        return{
            songs: [],
            albums: [],
            URL: "http://localhost:8080/",
            song: new Song(),
            editedSong: new Song(),
        }
    },
    methods: {
        getSongs(){
            axios.get(this.URL + "song")
                .then(response => {
                    this.songs = response.data;
                    console.log(response.data);
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getAlbums() {
            axios.get(this.URL + "song/albums")
                .then(response => {
                    this.albums = response.data;
                    console.log(response.data);
                })
                .catch(error => {
                    console.log(error);
                });
        },
        addSong(song) {
            console.log(song);
            song.album = null;
            console.log(song);
            axios
                .post(this.URL + "song", song)
                .then(() => {
                    this.getSongs();
                    this.closeModal();
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        deleteSong(id){
            axios.delete(this.URL + `song/${id}`)
                .then(() =>{
                    this.getSongs();
                })
        },
        openModal(status, song = null) {
            if (status === "create") {
                this.editedSong = new Song();
                this.editedSong.status = "create";
            } else if (status === "edit" && song) {
                this.editedSong = { ...song };
                this.editedSong.status = "edit";
            }

            document.getElementById("editModal").style.display = "block";
        },
        closeModal() {
            document.getElementById("editModal").style.display = "none";
        },
        editSong(song) {
            axios.put(this.URL + `song/${song.id}`, song)
                .then(() => {
                    const index = this.songs.findIndex((s) => s.id === song.id);
                    if (index !== -1) {
                        this.songs[index] = { ...song };
                    }
                    this.closeModal();
                    this.getSongs();
                })
                .catch((error) => {
                    console.log(error);
                });
        },
    }
}
</script>
<style>

</style>