lab4
This commit is contained in:
parent
9787e46afa
commit
2edfbc3238
@ -1,137 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-if="currentAlbum" class="edit-form">
|
|
||||||
<h4>Album</h4>
|
|
||||||
<form>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="albumName">Album Name</label>
|
|
||||||
<input type="text" class="form-control" id="albumName"
|
|
||||||
v-model="currentAlbum.albumName"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label >Song</label>
|
|
||||||
<div>
|
|
||||||
<select v-model="currentAlbum.song">
|
|
||||||
<option v-for="blog in songs" :key="blog.id" :value="blog">{{ blog.nickName }}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group prokrutka">
|
|
||||||
<label >Artists</label>
|
|
||||||
<div>
|
|
||||||
<template v-for="art in artists" v-bind:key="art.id">
|
|
||||||
<input type="checkbox" v-bind:value="art" v-model="currentAlbum.artistList"/>
|
|
||||||
<label>{{ art.albumName }}</label><br/>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<button class="badge badge-danger mr-2"
|
|
||||||
@click="deleteAlbum"
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button type="submit" class="badge badge-success"
|
|
||||||
@click="updateAlbum"
|
|
||||||
>
|
|
||||||
Update
|
|
||||||
</button>
|
|
||||||
<p>{{ message }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else>
|
|
||||||
<br />
|
|
||||||
<p>Please click on a Album...</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style>
|
|
||||||
.prokrutka {
|
|
||||||
height: 200px;
|
|
||||||
width: 100%;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #C1C1C1;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y:scroll;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
import AlbumDataService from '../services/AlbumDataService';
|
|
||||||
import ArtistDataService from '../services/ArtistDataService';
|
|
||||||
import SongDataService from '../services/SongDataService';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "album",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
currentAlbum: null,
|
|
||||||
artists : [],
|
|
||||||
songs : [],
|
|
||||||
message: ''
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
ArtistDataService.getAll()
|
|
||||||
.then(response => {
|
|
||||||
this.artists = response.data;
|
|
||||||
console.log(response.data);
|
|
||||||
});
|
|
||||||
SongDataService.getAll()
|
|
||||||
.then(response => {
|
|
||||||
this.songs = response.data;
|
|
||||||
console.log(response.data);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getAlbum(id) {
|
|
||||||
AlbumDataService.get(id)
|
|
||||||
.then(response => {
|
|
||||||
this.currentAlbum = response.data;
|
|
||||||
console.log(response.data);
|
|
||||||
})
|
|
||||||
.artch(e => {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
updateAlbum() {
|
|
||||||
AlbumDataService.update(this.currentAlbum.id, this.currentAlbum)
|
|
||||||
.then(response => {
|
|
||||||
console.log(response.data);
|
|
||||||
this.message = 'The album was updated successfully!';
|
|
||||||
})
|
|
||||||
.artch(e => {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
deleteAlbum() {
|
|
||||||
AlbumDataService.delete(this.currentAlbum.id)
|
|
||||||
.then(response => {
|
|
||||||
console.log(response.data);
|
|
||||||
this.$router.push({ name: "albums" });
|
|
||||||
})
|
|
||||||
.artch(e => {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.message = '';
|
|
||||||
this.getAlbum(this.$route.params.id);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.edit-form {
|
|
||||||
max-width: 300px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -1,25 +0,0 @@
|
|||||||
import axios from "../http-common";
|
|
||||||
class AlbumDataService {
|
|
||||||
|
|
||||||
getAll() {
|
|
||||||
return axios.get( "/albums");
|
|
||||||
}
|
|
||||||
|
|
||||||
get(id) {
|
|
||||||
return axios.get( `/albums/${id}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
create(data) {
|
|
||||||
return axios.post( `/albums`, data);
|
|
||||||
}
|
|
||||||
|
|
||||||
update(id, data) {
|
|
||||||
return axios.put(`/albums/${id}`, data);
|
|
||||||
}
|
|
||||||
|
|
||||||
delete(id) {
|
|
||||||
return axios.delete(`/albums/${id}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default new AlbumDataService();
|
|
@ -1,25 +0,0 @@
|
|||||||
import axios from "../http-common";
|
|
||||||
class ArtistDataService {
|
|
||||||
|
|
||||||
getAll() {
|
|
||||||
return axios.get( "/artists");
|
|
||||||
}
|
|
||||||
|
|
||||||
get(id) {
|
|
||||||
return axios.get( `/artists/${id}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
create(data) {
|
|
||||||
return axios.post( `/artists`, data);
|
|
||||||
}
|
|
||||||
|
|
||||||
update(id, data) {
|
|
||||||
return axios.put(`/artists/${id}`, data);
|
|
||||||
}
|
|
||||||
|
|
||||||
delete(id) {
|
|
||||||
return axios.delete(`/artists/${id}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default new ArtistDataService();
|
|
@ -1,25 +0,0 @@
|
|||||||
import axios from "../http-common";
|
|
||||||
class SongDataService {
|
|
||||||
|
|
||||||
getAll() {
|
|
||||||
return axios.get( "/songs");
|
|
||||||
}
|
|
||||||
|
|
||||||
get(id) {
|
|
||||||
return axios.get( `/songs/${id}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
create(data) {
|
|
||||||
return axios.post( `/songs`, data);
|
|
||||||
}
|
|
||||||
|
|
||||||
update(id, data) {
|
|
||||||
return axios.put(`/songs/${id}`, data);
|
|
||||||
}
|
|
||||||
|
|
||||||
delete(id) {
|
|
||||||
return axios.delete(`/songs/${id}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default new SongDataService();
|
|
Loading…
x
Reference in New Issue
Block a user