mdb to bulma + view my collection
This commit is contained in:
parent
f08e70eb7c
commit
68fa736a91
21 changed files with 617 additions and 292 deletions
|
|
@ -1,117 +1,166 @@
|
|||
<div class="container-fluid" id="app">
|
||||
<form class="bg-white rounded shadow-5-strong p-5" method="POST" @submit="add">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-3 p-2 text-center">
|
||||
<img src="<%= page.values.thumb %>" alt="Miniature" />
|
||||
<hr />
|
||||
<img v-for="image in album.images" :src="image.uri150" alt="Miniature" style="max-width: 60px;" />
|
||||
<hr />
|
||||
<div class="container" id="app">
|
||||
<form method="POST" @submit="add">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-12-mobile is-4-desktop">
|
||||
<div class="has-text-centered">
|
||||
<img src="<%= page.values.thumb %>" alt="Miniature" />
|
||||
<hr />
|
||||
<img v-for="image in album.images" :src="image.uri150" alt="Miniature" style="max-width: 60px;" />
|
||||
<hr />
|
||||
</div>
|
||||
<ol>
|
||||
<li v-for="track in album.tracklist">{{ track.title }} ({{track.duration}})</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="col-12 col-sm-9 p-2">
|
||||
<div class="row">
|
||||
<div class="col-12 p-2">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="title" name="title" class="form-control" v-model="album.title" disabled />
|
||||
<label class="form-label" for="artists">Titre</label>
|
||||
<div class="column is-12-mobile is-8-desktop">
|
||||
<div class="column is-12">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-12">
|
||||
<div class="field">
|
||||
<label class="label" for="artists">Titre</label>
|
||||
<div class="control">
|
||||
<input type="text" id="title" name="title" class="input" v-model="album.title" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field" v-for="artist in album.artists">
|
||||
<label class="label" for="artists">Artiste</label>
|
||||
<div class="control">
|
||||
<input type="text" id="artists" name="artists" class="input" v-model="artist.name" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="columns is-mobile is-multiline">
|
||||
<div class="column is-12-mobile is-6-desktop" v-for="genre in album.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="form-outline mb-4" v-for="artist in album.artists">
|
||||
<input type="text" id="artists" name="artists" class="form-control" v-model="artist.name" disabled />
|
||||
<label class="form-label" for="artists">Artiste</label>
|
||||
<div class="column is-12-mobile is-6-desktop" v-for="style in album.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="album.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="album.released" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2" v-for="genre in album.genres">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="genres" name="genres" class="form-control" v-model="genre" disabled />
|
||||
<label class="form-label" for="company">Genre</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 p-2" v-for="style in album.styles">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="style" name="style" class="form-control" v-model="style" disabled />
|
||||
<label class="form-label" for="company">Style</label>
|
||||
<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="album.country" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="year" name="year" class="form-control" v-model="album.year" disabled />
|
||||
<label class="form-label" for="year">Année</label>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-12">
|
||||
<span class="label">Codes barres</span>
|
||||
<ol>
|
||||
<li v-for="identifier in album.identifiers">
|
||||
{{identifier.value}} ({{identifier.type}})
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 p-2">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="released" name="released" class="form-control" v-model="album.released" disabled />
|
||||
<label class="form-label" for="released">Date de sortie</label>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-12">
|
||||
<div class="field">
|
||||
<label class="label" for="country">Notes</label>
|
||||
<div class="control">
|
||||
<textarea id="notes" id="notes" name="notes" class="textarea" rows="8" v-model="album.notes" disabled></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="country" name="country" class="form-control" v-model="album.country" disabled />
|
||||
<label class="form-label" for="country">Pays</label>
|
||||
<div class="columns is-mobile is-multiline">
|
||||
<div class="column is-12-mobile is-6-desktop" v-for="format in album.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="col-12 col-sm-6 p-2">
|
||||
<ol>
|
||||
<li v-for="identifier in album.identifiers">
|
||||
{{identifier.value}} ({{identifier.type}})
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 p-2">
|
||||
<div class="form-outline mb-4">
|
||||
<textarea id="notes" id="notes" name="notes" class="form-control" v-model="album.notes" disabled></textarea>
|
||||
<label class="form-label" for="country">Notes</label>
|
||||
<div class="columns is-mobile is-multiline">
|
||||
<div class="column is-12-mobile is-6-desktop" v-for="label in album.labels">
|
||||
<div class="field">
|
||||
<label class="label" for="label">Label</label>
|
||||
<div class="control">
|
||||
<input type="text" id="label" name="label" class="input" v-model="label.name" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2" v-for="format in album.formats">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="format" name="format" class="form-control" v-model="format.name" disabled />
|
||||
<label class="form-label" for="format">Format</label>
|
||||
<div class="columns is-mobile is-multiline">
|
||||
<div class="column is-12-mobile is-6-desktop" v-for="company in album.companies">
|
||||
<div class="field">
|
||||
<label class="label" for="label">Société</label>
|
||||
<div class="control">
|
||||
<input type="text" id="company" name="company" class="input" v-model="company.name" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2" v-for="label in album.labels">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="label" name="label" class="form-control" v-model="label.name" disabled />
|
||||
<label class="form-label" for="label">Label</label>
|
||||
<div class="columns is-mobile is-multiline">
|
||||
<div class="column is-12-mobile">
|
||||
<span class="label">Vidéos</span>
|
||||
<ol>
|
||||
<li v-for="video in album.videos">
|
||||
<a :href="video.uri" target="_blank">{{video.title}}</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2" v-for="company in album.companies">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="company" name="company" class="form-control" v-model="company.name" disabled />
|
||||
<label class="form-label" for="company">Société</label>
|
||||
<div class="columns is-mobile is-multiline">
|
||||
<div class="column is-12-mobile">
|
||||
<span class="label">Artistes</span>
|
||||
<ul>
|
||||
<li v-for="extraartist in album.extraartists">
|
||||
{{extraartist.name}} ({{extraartist.role}})
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2">
|
||||
<ol>
|
||||
<li v-for="video in album.videos">
|
||||
<a :href="video.uri" target="_blank">{{video.title}}</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2">
|
||||
<ol>
|
||||
<li v-for="extraartist in album.extraartists">
|
||||
{{extraartist.name}} ({{extraartist.role}})
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-block">Ajouter</button>
|
||||
<button type="submit" class="button is-primary is-fullwidth">Ajouter</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
@ -134,7 +183,6 @@
|
|||
window.location.href = '/ma-collection';
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('ERR:', err.response);
|
||||
showToastr(err.response?.data?.message || "Impossible d'ajouter ce album pour le moment…");
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
<div class="container-fluid" id="app">
|
||||
<div class="container" id="app">
|
||||
<form @submit="search">
|
||||
<div class="input-group mb-3">
|
||||
<div class="form-outline">
|
||||
<input v-model="q" type="search" id="q" class="form-control" />
|
||||
<label class="form-label" for="q">Nom de l'album ou code barre</label>
|
||||
<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>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<table class="table table-striped table-hover table-sm align-middle">
|
||||
<table class="table is-striped is-hoverable is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pochette</th>
|
||||
|
|
@ -23,6 +26,11 @@
|
|||
</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;"/>
|
||||
|
|
@ -56,6 +64,7 @@
|
|||
data() {
|
||||
return {
|
||||
q: '',
|
||||
loading: false,
|
||||
items: [],
|
||||
}
|
||||
},
|
||||
|
|
@ -63,6 +72,12 @@
|
|||
search(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if ( this.loading ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
|
||||
axios.get(`/api/v1/search?q=${this.q}`)
|
||||
.then( response => {
|
||||
const {
|
||||
|
|
@ -95,8 +110,11 @@
|
|||
|
||||
this.items = items;
|
||||
})
|
||||
.catch( err => {
|
||||
console.log('err:', err);
|
||||
.catch((err) => {
|
||||
showToastr(err.response?.data?.message || "Aucun résultat trouvé :/");
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue