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

Updated css for ajouter-un-album

Browse source
This commit is contained in:
Damien Broqua 2022-02-18 19:24:10 +01:00
parent cb69a62603
commit c159495a59
6 changed files with 71 additions and 268 deletions
Download patch file Download diff file Expand all files Collapse all files

232
views/pages/ajouter-un-album.ejs Normal file
View file

@ -0,0 +1,232 @@
<section class="layout-maxed ajouter-un-album" id="app">
<div class="grid sm:grid-cols-2">
<div>
<form @submit="search">
<div class="field has-addons">
<input type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory)">
<button class="button is-link" :disabled="loading">
<span class="icon">
<i class="fas fa-search"></i>
</span>
</button>
</div>
</form>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 list">
<div class="item" v-if="!loading" v-for="item in items">
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
<div class="grid grid-cols-2 md:grid-cols-4">
<div>
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;" @click="loadDetails(item.id)"/>
</div>
<div class="md:col-span-3">
<span><strong>Année :</strong> {{ item.year }}</span>
<br />
<span><strong>Pays :</strong> {{ item.country }}</span>
<br />
<span class="items">
<strong>Format :</strong> <span v-for="format in item.format">{{ format }}</span>
</span>
<br />
<span class="items">
<strong>Genre :</strong> <span v-for="genre in item.genre">{{ genre }}</span>
</span>
<br />
<span class="items">
<strong>Style :</strong> <span v-for="style in item.style">{{ style }}</span>
</span>
</div>
</div>
</div>
</div>
<div class="modal" :class="{'is-visible': modalIsVisible}" id="addAlbum">
<div class="modal-background"></div>
<div class="modal-card">
<header>
<div>{{details.artists_sort}} - {{details.title}}</div>
<button aria-label="close" @click="toggleModal"></button>
</header>
<section>
<div class="grid grid-cols-2 gap-16">
<div>
<div class="text-center">
<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>
<div class="grid grid-cols-2 gap-10">
<div class="items">
<strong>Genres</strong>
<br />
<span v-for="genre in details.genres">{{genre}}</span>
</div>
<div class="items">
<strong>Styles</strong>
<br />
<span v-for="style in details.styles">{{style}}</span>
</div>
</div>
<hr />
<div class="grid grid-cols-3 gap-10">
<div>
<strong>Pays</strong>
<br />
<span>{{details.country}}</span>
</div>
<div>
<strong>Année</strong>
<br />
<span>{{details.year}}</span>
</div>
<div>
<strong>Date de sortie</strong>
<br />
<span>{{details.released}}</span>
</div>
</div>
<hr />
<div class="grid grid-cols-2 gap-10">
<div>
<strong>Format</strong>
<br />
<span v-for="format in details.formats">{{format.name}}</span>
</div>
</div>
<hr />
<div class="grid grid-cols-2 gap-10">
<div>
<strong>Codes barres</strong>
<ol>
<li v-for="identifier in details.identifiers">
{{identifier.value}} ({{identifier.type}})
</li>
</ol>
</div>
<div>
<strong>Label</strong>
<ol>
<li v-for="label in details.labels">
{{label.name}}
</li>
</ol>
<strong>Société</strong>
<ol>
<li v-for="company in details.companie">
{{company.name}}
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<footer>
<button class="button is-primary" @click="add">Ajouter</button>
<button class="button" @click="toggleModal">Annuler</button>
</footer>
</div>
</div>
</section>
<script>
Vue.createApp({
data() {
return {
q: '',
loading: false,
items: [],
details: {},
modalIsVisible: false,
}
},
methods: {
search(event) {
event.preventDefault();
if ( this.loading ) {
return false;
}
this.loading = true;
axios.get(`/api/v1/search?q=${this.q}`)
.then( response => {
const {
results,
} = response.data;
let items = [];
for (let i = 0 ; i < results.length ; i += 1 ) {
const {
id,
title,
thumb,
year,
country,
format,
genre,
style,
} = results[i];
items.push({
id,
title,
thumb,
year,
country,
format,
genre,
style,
});
}
this.items = items;
})
.catch((err) => {
showToastr(err.response?.data?.message || "Aucun résultat trouvé :/");
})
.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>