271 lines
No EOL
12 KiB
Text
271 lines
No EOL
12 KiB
Text
<div class="container" id="app">
|
|
<form @submit="search">
|
|
<div class="field has-addons">
|
|
<div class="control">
|
|
<input class="input" type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory">
|
|
</div>
|
|
<div class="control">
|
|
<button class="button is-link" :disabled="loading">
|
|
<span class="icon">
|
|
<i class="fas fa-search"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<table class="table is-striped is-hoverable is-fullwidth">
|
|
<thead>
|
|
<tr>
|
|
<th>Pochette</th>
|
|
<th>Titre</th>
|
|
<th>Pays</th>
|
|
<th>Année</th>
|
|
<th>Format</th>
|
|
<th>Genres</th>
|
|
<th>Styles</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-if="loading">
|
|
<td colspan="7">
|
|
Chargement en cours…
|
|
</td>
|
|
</tr>
|
|
<tr v-for="item in items">
|
|
<td>
|
|
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
|
|
</td>
|
|
<td>
|
|
<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>
|
|
<td>
|
|
<ul>
|
|
<li v-for="format in item.format">{{ format }}</li>
|
|
</ul>
|
|
</td>
|
|
<td>
|
|
<ul>
|
|
<li v-for="genre in item.genre">{{ genre }}</li>
|
|
</ul>
|
|
</td>
|
|
<td>
|
|
<ul>
|
|
<li v-for="style in item.style">{{ style }}</li>
|
|
</ul>
|
|
</td>
|
|
</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({
|
|
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>
|
|
|