michael/MusicTopus
1
0
Fork 0
forked from dbroqua/MusicTopus
Code Pull requests Activity

nodecdtheque => MyMusicLibrary & new UI for adding album

Browse source
This commit is contained in:
Damien Broqua 2022-02-17 09:37:25 +01:00
parent a35c8899ac
commit a502fe9088
14 changed files with 231 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

152
views/pages/ajouter-un-album/search.ejs
View file

@ -36,7 +36,8 @@
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
</td>
<td>
<a :href="'/ajouter-un-album/' + item.id">{{ item.title }}</a>
<a @click="loadDetails(item.id)">{{ item.title }}</a>
<!-- <a :href="'/ajouter-un-album/' + item.id">{{ item.title }}</a> -->
</td>
<td>{{ item.year }}</td>
<td>{{ item.country }}</td>
@ -58,6 +59,120 @@
</tr>
</tbody>
</table>
<div class="modal" :class="{'is-active': modalIsVisible}" id="addAlbum">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{details.artists_sort}} - {{details.title}}</p>
<button class="delete" aria-label="close" @click="toggleModal"></button>
</header>
<section class="modal-card-body">
<div class="columns is-mobile">
<div class="column is-12-mobile is-4-desktop">
<div class="has-text-centered">
<img :src="details.thumb %>" alt="Miniature" />
<hr />
<img v-for="image in details.images" :src="image.uri150" alt="Miniature" style="max-width: 60px;" />
<hr />
</div>
<ol class="ml-4">
<li v-for="track in details.tracklist">{{ track.title }} ({{track.duration}})</li>
</ol>
</div>
<div class="column is-12-mobile is-8-desktop">
<div class="column is-12">
<div class="columns is-mobile is-multiline">
<div class="column is-12-mobile is-6-desktop" v-for="genre in details.genres">
<div class="field">
<label class="label" for="company">Genre</label>
<div class="control">
<input type="text" id="genres" name="genres" class="input" v-model="genre" disabled />
</div>
</div>
</div>
<div class="column is-12-mobile is-6-desktop" v-for="style in details.styles">
<div class="field">
<label class="label" for="company">Style</label>
<div class="control">
<input type="text" id="style" name="style" class="input" v-model="style" disabled />
</div>
</div>
</div>
</div>
<hr />
<div class="columns is-mobile">
<div class="column is-12-mobile is-6-desktop">
<div class="field">
<label class="label" for="year">Année</label>
<div class="control">
<input type="text" id="year" name="year" class="input" v-model="details.year" disabled />
</div>
</div>
</div>
<div class="column is-12-mobile is-6-desktop">
<div class="field">
<label class="label" for="released">Date de sortie</label>
<div class="control">
<input type="text" id="released" name="released" class="input" v-model="details.released" disabled />
</div>
</div>
</div>
</div>
<hr />
<div class="columns is-mobile">
<div class="column is-12-mobile is-6-desktop">
<div class="field">
<label class="label" for="country">Pays</label>
<div class="control">
<input type="text" id="country" name="country" class="input" v-model="details.country" disabled />
</div>
</div>
</div>
<div class="column is-12-mobile is-6-desktop" v-for="format in details.formats">
<div class="field">
<label class="label" for="format">Format</label>
<div class="control">
<input type="text" id="format" name="format" class="input" v-model="format.name" disabled />
</div>
</div>
</div>
</div>
<hr />
<div class="columns is-mobile">
<div class="column is-12-mobile is-6-desktop">
<span class="label">Codes barres</span>
<ol>
<li v-for="identifier in details.identifiers">
{{identifier.value}} ({{identifier.type}})
</li>
</ol>
</div>
<div class="column is-12-mobile is-6-desktop">
<span class="label">Label</span>
<div class="field" v-for="label in details.labels">
<div class="control">
<input type="text" name="label" class="input" v-model="label.name" disabled />
</div>
</div>
<span class="label">Société</span>
<div class="field" v-for="company in details.companies">
<div class="control">
<input type="text" name="company" class="input" v-model="company.name" disabled />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success" @click="add">Ajouter</button>
<button class="button" @click="toggleModal">Annuler</button>
</footer>
</div>
<button class="modal-close is-large" aria-label="close" @click="toggleModal"></button>
</div>
</div>
<script>
Vue.createApp({
@ -66,6 +181,8 @@
q: '',
loading: false,
items: [],
details: {},
modalIsVisible: false,
}
},
methods: {
@ -116,7 +233,38 @@
.finally(() => {
this.loading = false;
});
}
},
toggleModal() {
this.modalIsVisible = !this.modalIsVisible;
},
loadDetails(discogsId) {
console.log('discogsId:', discogsId);
axios.get(`/api/v1/search/${discogsId}`)
.then( response => {
const {
data,
} = response;
this.details = data;
this.toggleModal();
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible de charger les détails de cet album");
})
.finally(() => {
this.loading = false;
});
},
add() {
axios.post('/api/v1/albums', this.details)
.then(() => {
window.location.href = '/ma-collection';
})
.catch((err) => {
showToastr(err.response?.data?.message || "Impossible d'ajouter ce album pour le moment…");
});
},
}
}).mount('#app')
</script>