Vue.createApp({ data() { return { q: "", year: "", country: "", format: "", loading: false, items: [], details: {}, modalIsVisible: false, submitting: false, formats: [ "Vinyl", "Acetate", "Flexi-disc", "Lathe Cut", "Mighty Tiny", "Shellac", "Sopic", "Pathé Disc", "Edison Disc", "Cylinder", "CD", "CDr", "CDV", "DVD", "DVDr", "HD DVD", "HD DVD-R", "Blu-ray", "Blu-ray-R", "Ultra HD Blu-ray", "SACD", "4-Track Cartridge", "8-Track Cartridge", "Cassette", "DC-International", "Elcaset", "PlayTape", "RCA Tape Cartridge", "DAT", "DCC", "Microcassette", "NT Cassette", "Pocket Rocker", "Revere Magnetic Stereo Tape Ca", "Tefifon", "Reel-To-Reel", "Sabamobil", "Betacam", "Betacam SP", "Betamax", "Cartrivision", "MiniDV", "Super VHS", "U-matic", "VHS", "Video 2000", "Video8", "Film Reel", "HitClips", "Laserdisc", "SelectaVision", "VHD", "Wire Recording", "Minidisc", "MVD", "UMD", "Floppy Disk", "File", "Memory Stick", "Hybrid", "All Media", "Box Set", ], }; }, methods: { search(event) { event.preventDefault(); if (this.loading) { return false; } this.loading = true; let url = `/api/v1/search?q=${this.q}`; if (this.year) { url += `&year=${this.year}`; } if (this.country) { url += `&country=${this.country}`; } if (this.format) { url += `&format=${this.format}`; } return axios .get(url) .then((response) => { const { results } = response.data; const 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) { 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() { if (this.submitting) { return true; } this.submitting = true; return axios .post("/api/v1/albums", this.details) .then(() => { window.location.href = "/ma-collection"; }) .catch((err) => { this.submitting = false; showToastr( err.response?.data?.message || "Impossible d'ajouter cet album pour le moment…" ); }); }, orderedItems(items) { return items.sort(); }, }, }).mount("#ajouter-album");