From 2e8bcad995e9c7326f8bbb0c4e227a7700c32639 Mon Sep 17 00:00:00 2001 From: josejesusgazquez Date: Thu, 30 Jan 2020 08:02:09 +0100 Subject: [PATCH 1/4] first version --- music-app/app/adapters/album.js | 7 +++ music-app/app/adapters/application.js | 5 +++ .../app/components/album-detail/component.js | 36 +++++++++++++++ .../album-detail/template.hbs} | 0 music-app/app/components/music-list.js | 6 +++ .../app/components/music-list/component.js | 36 +++++++++++++++ .../app/components/music-list/template.hbs | 22 ++++++++++ music-app/app/models/album.js | 8 +++- music-app/app/models/artist.js | 6 ++- music-app/app/models/genre.js | 6 ++- music-app/app/models/song.js | 13 +++++- music-app/app/router.js | 1 + music-app/app/routes/album.js | 7 +++ music-app/app/routes/application.js | 11 +++++ music-app/app/serializers/application.js | 13 ++++++ music-app/app/styles/app.scss | 18 ++++++++ music-app/app/templates/album.hbs | 5 +++ music-app/app/templates/application.hbs | 5 +-- .../app/templates/components/music-list.hbs | 1 - music-app/mirage/config.js | 44 +++++++++++++++++++ music-app/mirage/factories/album.js | 12 +++++ music-app/mirage/factories/song.js | 17 +++++++ music-app/mirage/models/album.js | 5 +++ music-app/mirage/models/artist.js | 4 ++ music-app/mirage/models/genre.js | 4 ++ music-app/mirage/models/song.js | 4 ++ music-app/mirage/scenarios/default.js | 24 ++++++++++ music-app/mirage/serializers/album.js | 12 +++++ music-app/mirage/serializers/application.js | 5 +++ music-app/mirage/serializers/song.js | 4 ++ music-app/package.json | 1 + 31 files changed, 333 insertions(+), 9 deletions(-) create mode 100644 music-app/app/adapters/album.js create mode 100644 music-app/app/adapters/application.js create mode 100644 music-app/app/components/album-detail/component.js rename music-app/app/{templates/components/.gitkeep => components/album-detail/template.hbs} (100%) create mode 100644 music-app/app/components/music-list/component.js create mode 100644 music-app/app/components/music-list/template.hbs create mode 100644 music-app/app/routes/album.js create mode 100644 music-app/app/routes/application.js create mode 100644 music-app/app/serializers/application.js create mode 100644 music-app/app/templates/album.hbs delete mode 100644 music-app/app/templates/components/music-list.hbs create mode 100644 music-app/mirage/config.js create mode 100644 music-app/mirage/factories/album.js create mode 100644 music-app/mirage/factories/song.js create mode 100644 music-app/mirage/models/album.js create mode 100644 music-app/mirage/models/artist.js create mode 100644 music-app/mirage/models/genre.js create mode 100644 music-app/mirage/models/song.js create mode 100644 music-app/mirage/scenarios/default.js create mode 100644 music-app/mirage/serializers/album.js create mode 100644 music-app/mirage/serializers/application.js create mode 100644 music-app/mirage/serializers/song.js diff --git a/music-app/app/adapters/album.js b/music-app/app/adapters/album.js new file mode 100644 index 0000000..236f537 --- /dev/null +++ b/music-app/app/adapters/album.js @@ -0,0 +1,7 @@ +import DS from 'ember-data'; +import RSVP from 'rsvp'; +import $ from 'jquery'; + +export default DS.JSONAPIAdapter.extend({ + +}); \ No newline at end of file diff --git a/music-app/app/adapters/application.js b/music-app/app/adapters/application.js new file mode 100644 index 0000000..3128ba5 --- /dev/null +++ b/music-app/app/adapters/application.js @@ -0,0 +1,5 @@ +import DS from 'ember-data'; + +export default DS.JSONAPIAdapter.extend({ + +}); \ No newline at end of file diff --git a/music-app/app/components/album-detail/component.js b/music-app/app/components/album-detail/component.js new file mode 100644 index 0000000..ac8e8ae --- /dev/null +++ b/music-app/app/components/album-detail/component.js @@ -0,0 +1,36 @@ +import Component from '@ember/component'; + +export default Component.extend({ + + updateAlbum() { + + }, + + actions: { + addSong() { + let song = this.store.createRecord('song', { + title: this.get('title'), + genre: this.get('genre') + }); + + song.save(); + + let album = this.store.findRecord('album', this.get('album.id')).then(function(data) { + data.songs.push(song); + }); + + album.save(); + }, + updateSong(selectedSong) { + let song = this.store.findRecord('song', selectedSong).then(function(songToUpdate) { + //songToUpdate + }); + + album.save(); + }, + + searchByText(textToSearch) { + this.set('albumsToShow', this.get('albums').filterBy('name', textToSearch)); + } + } +}); diff --git a/music-app/app/templates/components/.gitkeep b/music-app/app/components/album-detail/template.hbs similarity index 100% rename from music-app/app/templates/components/.gitkeep rename to music-app/app/components/album-detail/template.hbs diff --git a/music-app/app/components/music-list.js b/music-app/app/components/music-list.js index bb93d73..2d20202 100644 --- a/music-app/app/components/music-list.js +++ b/music-app/app/components/music-list.js @@ -1,4 +1,10 @@ import Component from '@ember/component'; export default Component.extend({ + + actions: { + sort(sortParam) { + console.log('eeeeeh'); + } + } }); diff --git a/music-app/app/components/music-list/component.js b/music-app/app/components/music-list/component.js new file mode 100644 index 0000000..8aa09e6 --- /dev/null +++ b/music-app/app/components/music-list/component.js @@ -0,0 +1,36 @@ +import Component from '@ember/component'; + +export default Component.extend({ + + albums: [], + + albumsToShow: [], + + sortByNameAsc: true, + + sortByIdAsc: true, + + init() { + this._super(...arguments); + this.set('albumsToShow', this.get('albums')); + }, + + actions: { + sort(sortParam) { + const albums = this.get('albums'); + if (sortParam === 'id') { + if (this.get('sortByIdAsc')) { + albums.sortBy('id'); + } else { + albums.sortBy('id').reverse(); + } + this.toggleProperty('sortByIdAsc'); + } + console.log('eeeeeh'); + }, + + searchByText(textToSearch) { + this.set('albumsToShow', this.get('albums').filterBy('name', textToSearch)); + } + } +}); diff --git a/music-app/app/components/music-list/template.hbs b/music-app/app/components/music-list/template.hbs new file mode 100644 index 0000000..5e247ce --- /dev/null +++ b/music-app/app/components/music-list/template.hbs @@ -0,0 +1,22 @@ +
+
+ + {{input value=searchByText key-press=(action "searchByText")}} +
+ +
\ No newline at end of file diff --git a/music-app/app/models/album.js b/music-app/app/models/album.js index 1f71205..918006e 100644 --- a/music-app/app/models/album.js +++ b/music-app/app/models/album.js @@ -1,5 +1,11 @@ -import Model from '@ember-data/model'; +import Model, { attr, hasMany } from '@ember-data/model'; +import DS from 'ember-data'; export default Model.extend({ + name: attr('string'), + + cover: attr(), + + songs: hasMany('song') }); diff --git a/music-app/app/models/artist.js b/music-app/app/models/artist.js index 1f71205..86b74fb 100644 --- a/music-app/app/models/artist.js +++ b/music-app/app/models/artist.js @@ -1,5 +1,9 @@ -import Model from '@ember-data/model'; +import Model, { attr } from '@ember-data/model'; export default Model.extend({ + id: attr(), + + name: attr() + }); diff --git a/music-app/app/models/genre.js b/music-app/app/models/genre.js index 1f71205..86b74fb 100644 --- a/music-app/app/models/genre.js +++ b/music-app/app/models/genre.js @@ -1,5 +1,9 @@ -import Model from '@ember-data/model'; +import Model, { attr } from '@ember-data/model'; export default Model.extend({ + id: attr(), + + name: attr() + }); diff --git a/music-app/app/models/song.js b/music-app/app/models/song.js index 1f71205..5e1c8ef 100644 --- a/music-app/app/models/song.js +++ b/music-app/app/models/song.js @@ -1,5 +1,14 @@ -import Model from '@ember-data/model'; - +import Model, { attr, belongsTo, hasMany } from '@ember-data/model'; +import DS from 'ember-data'; export default Model.extend({ + name: attr(), + + //album: DS.belongsTo('album'), + + //genre: belongsTo('genre', { inverse: 'id', async: false }), + + //artits: hasMany('artist', { inverse: 'id', async: false }) + + }); diff --git a/music-app/app/router.js b/music-app/app/router.js index 224ca42..4f2b9d9 100644 --- a/music-app/app/router.js +++ b/music-app/app/router.js @@ -7,4 +7,5 @@ export default class Router extends EmberRouter { } Router.map(function() { + this.route('album', { path: '/albums/:id' }); }); diff --git a/music-app/app/routes/album.js b/music-app/app/routes/album.js new file mode 100644 index 0000000..e6c52b0 --- /dev/null +++ b/music-app/app/routes/album.js @@ -0,0 +1,7 @@ +import Route from '@ember/routing/route'; + +export default Route.extend({ + model(transition) { + return this.store.findRecord('album', transition.id); + } +}) \ No newline at end of file diff --git a/music-app/app/routes/application.js b/music-app/app/routes/application.js new file mode 100644 index 0000000..1f1ad8f --- /dev/null +++ b/music-app/app/routes/application.js @@ -0,0 +1,11 @@ +import Route from '@ember/routing/route'; + +export default Route.extend({ + model() { + const mierda = this.store.findAll('album'); + + return mierda.then((data) => { + return data; + }); + } +}) \ No newline at end of file diff --git a/music-app/app/serializers/application.js b/music-app/app/serializers/application.js new file mode 100644 index 0000000..8a8a74f --- /dev/null +++ b/music-app/app/serializers/application.js @@ -0,0 +1,13 @@ +import JSONAPISerializer from '@ember-data/serializer/json-api'; + +export default class ApplicationSerializer extends JSONAPISerializer { + serialize(snapshot, options) { + let json = super.serialize(...arguments); + + return json; + } + + normalizeResponse(store, primaryModelClass, payload, id, requestType) { + return super.normalizeResponse(...arguments); + } +} \ No newline at end of file diff --git a/music-app/app/styles/app.scss b/music-app/app/styles/app.scss index e69de29..007db5a 100644 --- a/music-app/app/styles/app.scss +++ b/music-app/app/styles/app.scss @@ -0,0 +1,18 @@ +.music-list-filter { + text-align: center; +} + +.album-list { + display: grid; + margin: auto; + width: 400px; + grid-template-columns: 150px 150px; +} + +.album { + margin: 10px; + background-color: #fff; + box-shadow: 1px 0.5px 5px 1px hsla(0,0%,39.2%,.5); + border: 1px solid #bfc0bf; + list-style-type: none; +} \ No newline at end of file diff --git a/music-app/app/templates/album.hbs b/music-app/app/templates/album.hbs new file mode 100644 index 0000000..f57e41b --- /dev/null +++ b/music-app/app/templates/album.hbs @@ -0,0 +1,5 @@ +{{#link-to 'application'}}Back{{/link-to}} +{{#if model.name}}hola {{/if}} +{{#each model.songs as |song|}} + la cancon es: {{song.id}} + nombre + {{song.name}}
+{{/each}} \ No newline at end of file diff --git a/music-app/app/templates/application.hbs b/music-app/app/templates/application.hbs index 30941c3..9b9b8d8 100644 --- a/music-app/app/templates/application.hbs +++ b/music-app/app/templates/application.hbs @@ -1,3 +1,2 @@ - - -{{outlet}} \ No newline at end of file + +{{music-list albums=model}} \ No newline at end of file diff --git a/music-app/app/templates/components/music-list.hbs b/music-app/app/templates/components/music-list.hbs deleted file mode 100644 index 889d9ee..0000000 --- a/music-app/app/templates/components/music-list.hbs +++ /dev/null @@ -1 +0,0 @@ -{{yield}} diff --git a/music-app/mirage/config.js b/music-app/mirage/config.js new file mode 100644 index 0000000..ecdceb1 --- /dev/null +++ b/music-app/mirage/config.js @@ -0,0 +1,44 @@ +export default function() { + + this.namespace = ''; + + this.get('/albums', function(schema, request) { + //return schema.albums.all(); + let albums = schema.albums.all(); + let json = this.serialize(albums); + + //json.meta.size = albums.length; + + return json; + }); + this.get('/albums/:id'); + /*this.get('/albums/:id/songs', (schema, request) => { + let album = schema.albums.find(request.params.id); + + return album.songs; + })*/ + + // These comments are here to help you get started. Feel free to delete them. + + /* + Config (with defaults). + + Note: these only affect routes defined *after* them! + */ + + // this.urlPrefix = ''; // make this `http://localhost:8080`, for example, if your API is on a different server + // this.namespace = ''; // make this `/api`, for example, if your API is namespaced + // this.timing = 400; // delay for each request, automatically set to 0 during testing + + /* + Shorthand cheatsheet: + + this.get('/posts'); + this.post('/posts'); + this.get('/posts/:id'); + this.put('/posts/:id'); // or this.patch + this.del('/posts/:id'); + + https://www.ember-cli-mirage.com/docs/route-handlers/shorthands + */ +} diff --git a/music-app/mirage/factories/album.js b/music-app/mirage/factories/album.js new file mode 100644 index 0000000..48c7214 --- /dev/null +++ b/music-app/mirage/factories/album.js @@ -0,0 +1,12 @@ +import { Factory, trait } from 'ember-cli-mirage'; + +export default Factory.extend({ + + name(i) { + return `Album title ${i}`; + }/*, + + afterCreate(album, server) { + album.songs = server.createList('song', 2); + }*/ +}); diff --git a/music-app/mirage/factories/song.js b/music-app/mirage/factories/song.js new file mode 100644 index 0000000..1be5175 --- /dev/null +++ b/music-app/mirage/factories/song.js @@ -0,0 +1,17 @@ +import { Factory, association, trait, belongsTo } from 'ember-cli-mirage'; + +export default Factory.extend({ + + name(i) { + return `Song title ${i}`; + }, + + //album: association(), + + /*genre: trait({ + afterCreate(song, server) { + server.create('genre'); + } + })*/ + +}); diff --git a/music-app/mirage/models/album.js b/music-app/mirage/models/album.js new file mode 100644 index 0000000..149e299 --- /dev/null +++ b/music-app/mirage/models/album.js @@ -0,0 +1,5 @@ +import { Model, hasMany, faker } from 'ember-cli-mirage'; + +export default Model.extend({ + songs: hasMany('song') +}); diff --git a/music-app/mirage/models/artist.js b/music-app/mirage/models/artist.js new file mode 100644 index 0000000..1486a72 --- /dev/null +++ b/music-app/mirage/models/artist.js @@ -0,0 +1,4 @@ +import { Model } from 'ember-cli-mirage'; + +export default Model.extend({ +}); diff --git a/music-app/mirage/models/genre.js b/music-app/mirage/models/genre.js new file mode 100644 index 0000000..1486a72 --- /dev/null +++ b/music-app/mirage/models/genre.js @@ -0,0 +1,4 @@ +import { Model } from 'ember-cli-mirage'; + +export default Model.extend({ +}); diff --git a/music-app/mirage/models/song.js b/music-app/mirage/models/song.js new file mode 100644 index 0000000..8684031 --- /dev/null +++ b/music-app/mirage/models/song.js @@ -0,0 +1,4 @@ +import { Model, belongsTo } from 'ember-cli-mirage'; + +export default Model.extend({ +}); diff --git a/music-app/mirage/scenarios/default.js b/music-app/mirage/scenarios/default.js new file mode 100644 index 0000000..d00cf23 --- /dev/null +++ b/music-app/mirage/scenarios/default.js @@ -0,0 +1,24 @@ +export default function(server) { + + /* + Seed your development database using your factories. + This data will not be loaded in your tests. + */ + let songs = server.createList('song', 80); + let albums = server.createList('album', 10); + + let song = 0; + albums.forEach((album) => { + album.songs = songs.slice(song, song + 5); + song = song + 5; + }) + //server.createList('artist', 20); + //server.createList('genre', 8); + //server.createList('songs', 88); + /*for (let i = 0; i < 10; i++) { + let album = server.create('album'); + let numberOfSongs = Math.floor(Math.random() + 7) + 4; + + server.createList('song', numberOfSongs, { album }); + }*/ +} diff --git a/music-app/mirage/serializers/album.js b/music-app/mirage/serializers/album.js new file mode 100644 index 0000000..b1283ff --- /dev/null +++ b/music-app/mirage/serializers/album.js @@ -0,0 +1,12 @@ +import ApplicationSerializer from './application'; + +export default ApplicationSerializer.extend({ + normalizeResponse(store, primaryModelClass, payload, id, requestType) { + payload.data.attributes.amount = payload.data.attributes.cost.amount; + payload.data.attributes.currency = payload.data.attributes.cost.currency; + + delete payload.data.attributes.cost; + + return super.normalizeResponse(...arguments); + } +}); diff --git a/music-app/mirage/serializers/application.js b/music-app/mirage/serializers/application.js new file mode 100644 index 0000000..619bf2e --- /dev/null +++ b/music-app/mirage/serializers/application.js @@ -0,0 +1,5 @@ +import { JSONAPISerializer } from 'ember-cli-mirage'; + +export default JSONAPISerializer.extend({ + alwaysIncludeLinkageData: true +}); diff --git a/music-app/mirage/serializers/song.js b/music-app/mirage/serializers/song.js new file mode 100644 index 0000000..9678f19 --- /dev/null +++ b/music-app/mirage/serializers/song.js @@ -0,0 +1,4 @@ +import ApplicationSerializer from './application'; + +export default ApplicationSerializer.extend({ +}); diff --git a/music-app/package.json b/music-app/package.json index 2491ca3..1eb0113 100644 --- a/music-app/package.json +++ b/music-app/package.json @@ -29,6 +29,7 @@ "ember-cli-eslint": "^5.1.0", "ember-cli-htmlbars": "^4.0.5", "ember-cli-inject-live-reload": "^2.0.1", + "ember-cli-mirage": "^1.1.6", "ember-cli-sass": "^10.0.1", "ember-cli-sri": "^2.1.1", "ember-cli-template-lint": "^1.0.0-beta.3", From d9a56053baf258cbf91084537e683f857630819e Mon Sep 17 00:00:00 2001 From: josejesusgazquez Date: Fri, 31 Jan 2020 12:55:54 +0100 Subject: [PATCH 2/4] last version --- .../app/components/album-detail/component.js | 50 +++++++++------ .../app/components/album-detail/template.hbs | 28 +++++++++ .../app/components/music-list/component.js | 4 +- .../app/components/music-list/template.hbs | 7 ++- .../app/components/song-detail/component.js | 61 +++++++++++++++++++ .../app/components/song-detail/template.hbs | 20 ++++++ music-app/app/models/album.js | 3 +- music-app/app/models/artist.js | 2 - music-app/app/models/genre.js | 7 +-- music-app/app/models/song.js | 13 ++-- music-app/app/router.js | 2 +- music-app/app/routes/{album.js => albums.js} | 0 music-app/app/routes/application.js | 6 +- music-app/app/styles/app.scss | 8 +++ music-app/app/templates/album.hbs | 5 -- music-app/app/templates/albums.hbs | 1 + music-app/app/templates/application.hbs | 4 +- music-app/mirage/config.js | 18 +++--- music-app/mirage/factories/album.js | 12 ++-- music-app/mirage/factories/artist.js | 8 +++ music-app/mirage/factories/genre.js | 8 +++ music-app/mirage/factories/song.js | 20 +++--- music-app/mirage/models/album.js | 2 +- music-app/mirage/models/song.js | 5 +- music-app/mirage/scenarios/default.js | 25 +------- 25 files changed, 220 insertions(+), 99 deletions(-) create mode 100644 music-app/app/components/song-detail/component.js create mode 100644 music-app/app/components/song-detail/template.hbs rename music-app/app/routes/{album.js => albums.js} (100%) delete mode 100644 music-app/app/templates/album.hbs create mode 100644 music-app/app/templates/albums.hbs create mode 100644 music-app/mirage/factories/artist.js create mode 100644 music-app/mirage/factories/genre.js diff --git a/music-app/app/components/album-detail/component.js b/music-app/app/components/album-detail/component.js index ac8e8ae..402d8d4 100644 --- a/music-app/app/components/album-detail/component.js +++ b/music-app/app/components/album-detail/component.js @@ -1,36 +1,46 @@ import Component from '@ember/component'; +import { inject as service } from '@ember/service'; export default Component.extend({ - updateAlbum() { + album: null, + showForm: false, + + newSong: { + title: undefined }, - actions: { - addSong() { - let song = this.store.createRecord('song', { - title: this.get('title'), - genre: this.get('genre') - }); + genres: null, - song.save(); + artists: null, - let album = this.store.findRecord('album', this.get('album.id')).then(function(data) { - data.songs.push(song); - }); + store: service(), - album.save(); - }, - updateSong(selectedSong) { - let song = this.store.findRecord('song', selectedSong).then(function(songToUpdate) { - //songToUpdate - }); + init() { + this._super(...arguments); - album.save(); + this.set('genres', this.store.findAll('genre')); + this.set('artists', this.store.findAll('artist')); + }, + + actions: { + toggleForm() { + this.toggleProperty('showForm'); }, - searchByText(textToSearch) { - this.set('albumsToShow', this.get('albums').filterBy('name', textToSearch)); + addSong() { + const selectGenreId = document.getElementById('selectGenre'); + const selectGenre = this.get('genres').findBy('id', selectGenreId.options[selectGenreId.selectedIndex].value); + let song = this.store.createRecord('song', { + title: this.get('newSong.title'), + album: this.get('album'), + genre: selectGenre + }); + + song.save(); + this.set(this.get('newSong.title', undefined)); + this.toggleProperty('showForm'); } } }); diff --git a/music-app/app/components/album-detail/template.hbs b/music-app/app/components/album-detail/template.hbs index e69de29..ade7165 100644 --- a/music-app/app/components/album-detail/template.hbs +++ b/music-app/app/components/album-detail/template.hbs @@ -0,0 +1,28 @@ +{{#link-to 'application'}}Back{{/link-to}} +Songs for {{album.name}} album: +
+ + + + + + + {{#each album.songs as |song|}} + {{song-detail song=song genres=genres}} + {{/each}} +
TitleGenreArtists
+ +
+ +{{#if showForm}} +
+ Name: {{input value=newSong.title}} +
+ Genre: +
+ +{{/if}} \ No newline at end of file diff --git a/music-app/app/components/music-list/component.js b/music-app/app/components/music-list/component.js index 8aa09e6..c8c5b3d 100644 --- a/music-app/app/components/music-list/component.js +++ b/music-app/app/components/music-list/component.js @@ -10,6 +10,8 @@ export default Component.extend({ sortByIdAsc: true, + textToSearch: '', + init() { this._super(...arguments); this.set('albumsToShow', this.get('albums')); @@ -30,7 +32,7 @@ export default Component.extend({ }, searchByText(textToSearch) { - this.set('albumsToShow', this.get('albums').filterBy('name', textToSearch)); + this.set('albumsToShow', this.get('albums').filter((album) => album.name.toLowerCase().includes(textToSearch.toLowerCase()))); } } }); diff --git a/music-app/app/components/music-list/template.hbs b/music-app/app/components/music-list/template.hbs index 5e247ce..37c9ed5 100644 --- a/music-app/app/components/music-list/template.hbs +++ b/music-app/app/components/music-list/template.hbs @@ -1,12 +1,13 @@
- {{input value=searchByText key-press=(action "searchByText")}} + {{input value=textToSearch}} +
    {{#each albumsToShow as |album|}}
  • - {{#link-to 'album' album.id}} + {{#link-to 'albums' album.id}}
    {{album.name}} @@ -15,7 +16,7 @@

    {{album.name}}

    - {{/link-to}} + {{/link-to}}
    • {{/each}}
diff --git a/music-app/app/components/song-detail/component.js b/music-app/app/components/song-detail/component.js new file mode 100644 index 0000000..64fdf64 --- /dev/null +++ b/music-app/app/components/song-detail/component.js @@ -0,0 +1,61 @@ +import Component from '@ember/component'; +import { inject as service } from '@ember/service'; + +export default Component.extend({ + + tagName: 'tr', + + song: null, + + songToEdit: { + title: undefined + }, + + showForm: false, + + store: service(), + + artistNames: undefined, + + init() { + this._super(...arguments); + this.set('artistNames', this.getArtistsNames(this.get('song.artists'))); + }, + + getArtistsNames(artists) { + artists.then((data) => { + console.log('mierda'); + }); + let names = ''; + + if (artists && artists.length) { + artists.forEach((artist) => { + names = `${names}, ${artist.name}`; + }); + names = names.slice(0, -2); + } + + return names; + }, + + actions: { + toggleForm() { + this.toggleProperty('showForm'); + }, + + updateSong() { + const titleToUpdate = this.get('songToEdit.title'); + const selectGenreId = document.getElementById('selectGenre'); + const selectGenre = this.get('genres').findBy('id', selectGenreId.options[selectGenreId.selectedIndex].value); + + this.store.findRecord('song', this.get('song.id')).then(function(songToUpdate) { + songToUpdate.title = titleToUpdate; + songToUpdate.genre = selectGenre; + + songToUpdate.save(); + }); + this.set('songToEdit.title', null); + this.toggleProperty('showForm'); + } + } +}); diff --git a/music-app/app/components/song-detail/template.hbs b/music-app/app/components/song-detail/template.hbs new file mode 100644 index 0000000..5c4673f --- /dev/null +++ b/music-app/app/components/song-detail/template.hbs @@ -0,0 +1,20 @@ +{{#if showForm}} + {{input value=songToEdit.title placeholder=song.title}} + + + + Esto aun por implementar + + + + +{{else}} + {{song.title}} + {{song.genre.name}} + {{artistNames}} + +{{/if}} \ No newline at end of file diff --git a/music-app/app/models/album.js b/music-app/app/models/album.js index 918006e..6f1526b 100644 --- a/music-app/app/models/album.js +++ b/music-app/app/models/album.js @@ -1,11 +1,10 @@ import Model, { attr, hasMany } from '@ember-data/model'; -import DS from 'ember-data'; export default Model.extend({ name: attr('string'), - cover: attr(), + cover: attr('string'), songs: hasMany('song') }); diff --git a/music-app/app/models/artist.js b/music-app/app/models/artist.js index 86b74fb..139205b 100644 --- a/music-app/app/models/artist.js +++ b/music-app/app/models/artist.js @@ -2,8 +2,6 @@ import Model, { attr } from '@ember-data/model'; export default Model.extend({ - id: attr(), - name: attr() }); diff --git a/music-app/app/models/genre.js b/music-app/app/models/genre.js index 86b74fb..a9bf9c8 100644 --- a/music-app/app/models/genre.js +++ b/music-app/app/models/genre.js @@ -1,9 +1,8 @@ -import Model, { attr } from '@ember-data/model'; +import Model from '@ember-data/model'; +import DS from 'ember-data'; export default Model.extend({ - id: attr(), - - name: attr() + name: DS.attr() }); diff --git a/music-app/app/models/song.js b/music-app/app/models/song.js index 5e1c8ef..8e60fef 100644 --- a/music-app/app/models/song.js +++ b/music-app/app/models/song.js @@ -1,14 +1,13 @@ -import Model, { attr, belongsTo, hasMany } from '@ember-data/model'; +import Model from '@ember-data/model'; import DS from 'ember-data'; -export default Model.extend({ - - name: attr(), - //album: DS.belongsTo('album'), +export default Model.extend({ - //genre: belongsTo('genre', { inverse: 'id', async: false }), + title: DS.attr(), - //artits: hasMany('artist', { inverse: 'id', async: false }) + album: DS.belongsTo('album'), + genre: DS.belongsTo('genre', { inverse: null }), + artists: DS.hasMany('artist', { inverse: null }) }); diff --git a/music-app/app/router.js b/music-app/app/router.js index 4f2b9d9..0d4ad59 100644 --- a/music-app/app/router.js +++ b/music-app/app/router.js @@ -7,5 +7,5 @@ export default class Router extends EmberRouter { } Router.map(function() { - this.route('album', { path: '/albums/:id' }); + this.route('albums', { path: '/albums/:id' }); }); diff --git a/music-app/app/routes/album.js b/music-app/app/routes/albums.js similarity index 100% rename from music-app/app/routes/album.js rename to music-app/app/routes/albums.js diff --git a/music-app/app/routes/application.js b/music-app/app/routes/application.js index 1f1ad8f..88ffc5b 100644 --- a/music-app/app/routes/application.js +++ b/music-app/app/routes/application.js @@ -2,10 +2,6 @@ import Route from '@ember/routing/route'; export default Route.extend({ model() { - const mierda = this.store.findAll('album'); - - return mierda.then((data) => { - return data; - }); + return this.store.findAll('album'); } }) \ No newline at end of file diff --git a/music-app/app/styles/app.scss b/music-app/app/styles/app.scss index 007db5a..e80f7ca 100644 --- a/music-app/app/styles/app.scss +++ b/music-app/app/styles/app.scss @@ -15,4 +15,12 @@ box-shadow: 1px 0.5px 5px 1px hsla(0,0%,39.2%,.5); border: 1px solid #bfc0bf; list-style-type: none; +} + +.show { + display: block; +} + +.hide { + display: none; } \ No newline at end of file diff --git a/music-app/app/templates/album.hbs b/music-app/app/templates/album.hbs deleted file mode 100644 index f57e41b..0000000 --- a/music-app/app/templates/album.hbs +++ /dev/null @@ -1,5 +0,0 @@ -{{#link-to 'application'}}Back{{/link-to}} -{{#if model.name}}hola {{/if}} -{{#each model.songs as |song|}} - la cancon es: {{song.id}} + nombre + {{song.name}}
-{{/each}} \ No newline at end of file diff --git a/music-app/app/templates/albums.hbs b/music-app/app/templates/albums.hbs new file mode 100644 index 0000000..87cbbdc --- /dev/null +++ b/music-app/app/templates/albums.hbs @@ -0,0 +1 @@ +{{album-detail album=model}} \ No newline at end of file diff --git a/music-app/app/templates/application.hbs b/music-app/app/templates/application.hbs index 9b9b8d8..c7c0d35 100644 --- a/music-app/app/templates/application.hbs +++ b/music-app/app/templates/application.hbs @@ -1,2 +1,4 @@ -{{music-list albums=model}} \ No newline at end of file +{{music-list albums=model}} +
+{{outlet}} \ No newline at end of file diff --git a/music-app/mirage/config.js b/music-app/mirage/config.js index ecdceb1..0d3b19c 100644 --- a/music-app/mirage/config.js +++ b/music-app/mirage/config.js @@ -2,16 +2,16 @@ export default function() { this.namespace = ''; - this.get('/albums', function(schema, request) { - //return schema.albums.all(); - let albums = schema.albums.all(); - let json = this.serialize(albums); - - //json.meta.size = albums.length; - - return json; - }); + this.get('/albums'); this.get('/albums/:id'); + this.get('/songs'); + this.get('/songs/:id'); + this.post('/songs'); + this.patch('/songs/:id'); + this.get('/genres'); + this.get('/genres/:id'); + this.get('/artists'); + this.get('/artists/:id'); /*this.get('/albums/:id/songs', (schema, request) => { let album = schema.albums.find(request.params.id); diff --git a/music-app/mirage/factories/album.js b/music-app/mirage/factories/album.js index 48c7214..1402ce0 100644 --- a/music-app/mirage/factories/album.js +++ b/music-app/mirage/factories/album.js @@ -1,12 +1,12 @@ -import { Factory, trait } from 'ember-cli-mirage'; +import { Factory } from 'ember-cli-mirage'; export default Factory.extend({ name(i) { - return `Album title ${i}`; - }/*, - + return `Album title ${i+1}`; + }, + afterCreate(album, server) { - album.songs = server.createList('song', 2); - }*/ + album.update({ songs: server.createList('song', Math.floor(Math.random() * 10) + 3) }); + } }); diff --git a/music-app/mirage/factories/artist.js b/music-app/mirage/factories/artist.js new file mode 100644 index 0000000..2b21be6 --- /dev/null +++ b/music-app/mirage/factories/artist.js @@ -0,0 +1,8 @@ +import { Factory } from 'ember-cli-mirage'; + +export default Factory.extend({ + + name(i) { + return `Artist name ${i+1}`; + } +}); diff --git a/music-app/mirage/factories/genre.js b/music-app/mirage/factories/genre.js new file mode 100644 index 0000000..207c31c --- /dev/null +++ b/music-app/mirage/factories/genre.js @@ -0,0 +1,8 @@ +import { Factory, association } from 'ember-cli-mirage'; + +export default Factory.extend({ + + name(i) { + return `Genre name ${i+1}`; + } +}); diff --git a/music-app/mirage/factories/song.js b/music-app/mirage/factories/song.js index 1be5175..daad04f 100644 --- a/music-app/mirage/factories/song.js +++ b/music-app/mirage/factories/song.js @@ -2,16 +2,18 @@ import { Factory, association, trait, belongsTo } from 'ember-cli-mirage'; export default Factory.extend({ - name(i) { - return `Song title ${i}`; + title(i) { + return `Song title ${i+1}`; }, - //album: association(), - - /*genre: trait({ - afterCreate(song, server) { - server.create('genre'); - } - })*/ + afterCreate(song, server) { + const genres = server.schema.genres.all(); + const randomGenre = genres.models[Math.floor(Math.random() * genres.length)]; + const artists = server.schema.artists.all(); + const selectedArtists = artists.filter((artist) => + Math.floor(Math.random() * 2) % 2 === 0 + ); + song.update({ genre: randomGenre, artists: selectedArtists }); + } }); diff --git a/music-app/mirage/models/album.js b/music-app/mirage/models/album.js index 149e299..54058e9 100644 --- a/music-app/mirage/models/album.js +++ b/music-app/mirage/models/album.js @@ -1,4 +1,4 @@ -import { Model, hasMany, faker } from 'ember-cli-mirage'; +import { Model, hasMany } from 'ember-cli-mirage'; export default Model.extend({ songs: hasMany('song') diff --git a/music-app/mirage/models/song.js b/music-app/mirage/models/song.js index 8684031..3fa0358 100644 --- a/music-app/mirage/models/song.js +++ b/music-app/mirage/models/song.js @@ -1,4 +1,7 @@ -import { Model, belongsTo } from 'ember-cli-mirage'; +import { Model, belongsTo, hasMany } from 'ember-cli-mirage'; export default Model.extend({ + genre: belongsTo(), + + artists: hasMany() }); diff --git a/music-app/mirage/scenarios/default.js b/music-app/mirage/scenarios/default.js index d00cf23..7eb0d27 100644 --- a/music-app/mirage/scenarios/default.js +++ b/music-app/mirage/scenarios/default.js @@ -1,24 +1,5 @@ export default function(server) { - - /* - Seed your development database using your factories. - This data will not be loaded in your tests. - */ - let songs = server.createList('song', 80); - let albums = server.createList('album', 10); - - let song = 0; - albums.forEach((album) => { - album.songs = songs.slice(song, song + 5); - song = song + 5; - }) - //server.createList('artist', 20); - //server.createList('genre', 8); - //server.createList('songs', 88); - /*for (let i = 0; i < 10; i++) { - let album = server.create('album'); - let numberOfSongs = Math.floor(Math.random() + 7) + 4; - - server.createList('song', numberOfSongs, { album }); - }*/ + server.createList('genre', 7); + server.createList('artist', 15); + server.createList('album', 10); } From f7890b6a1b1d3229108333e5bb7030af4c04b79a Mon Sep 17 00:00:00 2001 From: josejesusgazquez Date: Fri, 31 Jan 2020 13:03:56 +0100 Subject: [PATCH 3/4] updated --- music-app/app/components/album-detail/template.hbs | 7 +++++++ music-app/app/components/song-detail/template.hbs | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/music-app/app/components/album-detail/template.hbs b/music-app/app/components/album-detail/template.hbs index ade7165..167dac6 100644 --- a/music-app/app/components/album-detail/template.hbs +++ b/music-app/app/components/album-detail/template.hbs @@ -24,5 +24,12 @@ Songs for {{album.name}} album: {{/each}}
+ Artists: +
+ {{#each artists as |artist|}} + {{input type='checkbox' checked=foo}} + + {{/each}} +
{{/if}} \ No newline at end of file diff --git a/music-app/app/components/song-detail/template.hbs b/music-app/app/components/song-detail/template.hbs index 5c4673f..c7c69ce 100644 --- a/music-app/app/components/song-detail/template.hbs +++ b/music-app/app/components/song-detail/template.hbs @@ -7,7 +7,7 @@ {{/each}} - Esto aun por implementar + //TODO From a8771eca866a4b446d88aec6369f367e8e568f8a Mon Sep 17 00:00:00 2001 From: josejesusgazquez Date: Fri, 31 Jan 2020 20:31:39 +0100 Subject: [PATCH 4/4] fix templates --- music-app/app/adapters/album.js | 2 - .../app/components/album-detail/component.js | 7 +- .../app/components/album-detail/template.hbs | 67 ++++++++++--------- music-app/app/components/music-list.js | 10 --- .../app/components/music-list/component.js | 21 +----- .../app/components/music-list/template.hbs | 42 ++++++------ .../app/components/song-detail/component.js | 10 ++- .../app/components/song-detail/template.hbs | 34 +++++----- music-app/app/models/genre.js | 5 +- music-app/app/models/song.js | 11 ++- music-app/app/serializers/application.js | 9 --- music-app/app/templates/application.hbs | 1 - music-app/mirage/config.js | 5 -- music-app/mirage/factories/genre.js | 2 +- music-app/mirage/factories/song.js | 4 +- music-app/mirage/serializers/album.js | 12 ---- music-app/mirage/serializers/song.js | 4 -- 17 files changed, 94 insertions(+), 152 deletions(-) delete mode 100644 music-app/app/components/music-list.js delete mode 100644 music-app/mirage/serializers/album.js delete mode 100644 music-app/mirage/serializers/song.js diff --git a/music-app/app/adapters/album.js b/music-app/app/adapters/album.js index 236f537..a68370b 100644 --- a/music-app/app/adapters/album.js +++ b/music-app/app/adapters/album.js @@ -1,6 +1,4 @@ import DS from 'ember-data'; -import RSVP from 'rsvp'; -import $ from 'jquery'; export default DS.JSONAPIAdapter.extend({ diff --git a/music-app/app/components/album-detail/component.js b/music-app/app/components/album-detail/component.js index 402d8d4..8475a5b 100644 --- a/music-app/app/components/album-detail/component.js +++ b/music-app/app/components/album-detail/component.js @@ -7,9 +7,7 @@ export default Component.extend({ showForm: false, - newSong: { - title: undefined - }, + newSong: null, genres: null, @@ -22,6 +20,9 @@ export default Component.extend({ this.set('genres', this.store.findAll('genre')); this.set('artists', this.store.findAll('artist')); + this.set('newSong', { + title: undefined + }); }, actions: { diff --git a/music-app/app/components/album-detail/template.hbs b/music-app/app/components/album-detail/template.hbs index 167dac6..c8a2d53 100644 --- a/music-app/app/components/album-detail/template.hbs +++ b/music-app/app/components/album-detail/template.hbs @@ -1,35 +1,40 @@ -{{#link-to 'application'}}Back{{/link-to}} +{{#link-to "application"}}Back{{/link-to}} Songs for {{album.name}} album: -
+
- - - - - - {{#each album.songs as |song|}} - {{song-detail song=song genres=genres}} - {{/each}} + + + + + + + + + {{#each album.songs as |song|}} + {{song-detail song=song genres=genres}} + {{/each}} +
TitleGenreArtists
TitleGenreArtists
-
- -{{#if showForm}} -
- Name: {{input value=newSong.title}} -
- Genre: -
- Artists: -
- {{#each artists as |artist|}} - {{input type='checkbox' checked=foo}} - - {{/each}} -
- -{{/if}} \ No newline at end of file +
+ + {{#if showForm}} +
+ Name: {{input value=newSong.title}} +
+ Genre: + +
+ Artists: +
+ {{#each artists as |artist|}} + {{input type="checkbox" checked=foo}} + + {{/each}} +
+ + {{/if}} \ No newline at end of file diff --git a/music-app/app/components/music-list.js b/music-app/app/components/music-list.js deleted file mode 100644 index 2d20202..0000000 --- a/music-app/app/components/music-list.js +++ /dev/null @@ -1,10 +0,0 @@ -import Component from '@ember/component'; - -export default Component.extend({ - - actions: { - sort(sortParam) { - console.log('eeeeeh'); - } - } -}); diff --git a/music-app/app/components/music-list/component.js b/music-app/app/components/music-list/component.js index c8c5b3d..d34f9cd 100644 --- a/music-app/app/components/music-list/component.js +++ b/music-app/app/components/music-list/component.js @@ -2,13 +2,9 @@ import Component from '@ember/component'; export default Component.extend({ - albums: [], + albums: null, - albumsToShow: [], - - sortByNameAsc: true, - - sortByIdAsc: true, + albumsToShow: null, textToSearch: '', @@ -18,19 +14,6 @@ export default Component.extend({ }, actions: { - sort(sortParam) { - const albums = this.get('albums'); - if (sortParam === 'id') { - if (this.get('sortByIdAsc')) { - albums.sortBy('id'); - } else { - albums.sortBy('id').reverse(); - } - this.toggleProperty('sortByIdAsc'); - } - console.log('eeeeeh'); - }, - searchByText(textToSearch) { this.set('albumsToShow', this.get('albums').filter((album) => album.name.toLowerCase().includes(textToSearch.toLowerCase()))); } diff --git a/music-app/app/components/music-list/template.hbs b/music-app/app/components/music-list/template.hbs index 37c9ed5..6739545 100644 --- a/music-app/app/components/music-list/template.hbs +++ b/music-app/app/components/music-list/template.hbs @@ -1,23 +1,23 @@
-
- - {{input value=textToSearch}} - -
-
    - {{#each albumsToShow as |album|}} -
  • - {{#link-to 'albums' album.id}} -
    -
    - {{album.name}} -
    -
    -

    {{album.name}}

    -
    -
    - {{/link-to}} -
    • - {{/each}} -
+
+ + {{input value=textToSearch}} + +
+
    + {{#each albumsToShow as |album|}} +
  • + {{#link-to "albums" album.id}} +
    +
    + {{album.name}} +
    +
    +

    {{album.name}}

    +
    +
    + {{/link-to}} +
    • + {{/each}} +
\ No newline at end of file diff --git a/music-app/app/components/song-detail/component.js b/music-app/app/components/song-detail/component.js index 64fdf64..5b4caa3 100644 --- a/music-app/app/components/song-detail/component.js +++ b/music-app/app/components/song-detail/component.js @@ -7,9 +7,7 @@ export default Component.extend({ song: null, - songToEdit: { - title: undefined - }, + songToEdit: null, showForm: false, @@ -20,12 +18,12 @@ export default Component.extend({ init() { this._super(...arguments); this.set('artistNames', this.getArtistsNames(this.get('song.artists'))); + this.set('songToEdit', { + title: undefined + }); }, getArtistsNames(artists) { - artists.then((data) => { - console.log('mierda'); - }); let names = ''; if (artists && artists.length) { diff --git a/music-app/app/components/song-detail/template.hbs b/music-app/app/components/song-detail/template.hbs index c7c69ce..19913ef 100644 --- a/music-app/app/components/song-detail/template.hbs +++ b/music-app/app/components/song-detail/template.hbs @@ -1,20 +1,20 @@ {{#if showForm}} - {{input value=songToEdit.title placeholder=song.title}} - - - - //TODO - - - - + {{input value=songToEdit.title placeholder=song.title}} + + + + //TODO + + + + {{else}} - {{song.title}} - {{song.genre.name}} - {{artistNames}} - + {{song.title}} + {{song.genre.name}} + {{artistNames}} + {{/if}} \ No newline at end of file diff --git a/music-app/app/models/genre.js b/music-app/app/models/genre.js index a9bf9c8..139205b 100644 --- a/music-app/app/models/genre.js +++ b/music-app/app/models/genre.js @@ -1,8 +1,7 @@ -import Model from '@ember-data/model'; -import DS from 'ember-data'; +import Model, { attr } from '@ember-data/model'; export default Model.extend({ - name: DS.attr() + name: attr() }); diff --git a/music-app/app/models/song.js b/music-app/app/models/song.js index 8e60fef..bc59513 100644 --- a/music-app/app/models/song.js +++ b/music-app/app/models/song.js @@ -1,13 +1,12 @@ -import Model from '@ember-data/model'; -import DS from 'ember-data'; +import Model, { attr, belongsTo, hasMany } from '@ember-data/model'; export default Model.extend({ - title: DS.attr(), + title: attr(), - album: DS.belongsTo('album'), + album: belongsTo('album'), - genre: DS.belongsTo('genre', { inverse: null }), + genre: belongsTo('genre', { inverse: null }), - artists: DS.hasMany('artist', { inverse: null }) + artists: hasMany('artist', { inverse: null }) }); diff --git a/music-app/app/serializers/application.js b/music-app/app/serializers/application.js index 8a8a74f..5fc2c6c 100644 --- a/music-app/app/serializers/application.js +++ b/music-app/app/serializers/application.js @@ -1,13 +1,4 @@ import JSONAPISerializer from '@ember-data/serializer/json-api'; export default class ApplicationSerializer extends JSONAPISerializer { - serialize(snapshot, options) { - let json = super.serialize(...arguments); - - return json; - } - - normalizeResponse(store, primaryModelClass, payload, id, requestType) { - return super.normalizeResponse(...arguments); - } } \ No newline at end of file diff --git a/music-app/app/templates/application.hbs b/music-app/app/templates/application.hbs index c7c0d35..b53239e 100644 --- a/music-app/app/templates/application.hbs +++ b/music-app/app/templates/application.hbs @@ -1,4 +1,3 @@ - {{music-list albums=model}}
{{outlet}} \ No newline at end of file diff --git a/music-app/mirage/config.js b/music-app/mirage/config.js index 0d3b19c..08982c0 100644 --- a/music-app/mirage/config.js +++ b/music-app/mirage/config.js @@ -12,11 +12,6 @@ export default function() { this.get('/genres/:id'); this.get('/artists'); this.get('/artists/:id'); - /*this.get('/albums/:id/songs', (schema, request) => { - let album = schema.albums.find(request.params.id); - - return album.songs; - })*/ // These comments are here to help you get started. Feel free to delete them. diff --git a/music-app/mirage/factories/genre.js b/music-app/mirage/factories/genre.js index 207c31c..3c8ece9 100644 --- a/music-app/mirage/factories/genre.js +++ b/music-app/mirage/factories/genre.js @@ -1,4 +1,4 @@ -import { Factory, association } from 'ember-cli-mirage'; +import { Factory } from 'ember-cli-mirage'; export default Factory.extend({ diff --git a/music-app/mirage/factories/song.js b/music-app/mirage/factories/song.js index daad04f..b125fc2 100644 --- a/music-app/mirage/factories/song.js +++ b/music-app/mirage/factories/song.js @@ -1,4 +1,4 @@ -import { Factory, association, trait, belongsTo } from 'ember-cli-mirage'; +import { Factory } from 'ember-cli-mirage'; export default Factory.extend({ @@ -10,7 +10,7 @@ export default Factory.extend({ const genres = server.schema.genres.all(); const randomGenre = genres.models[Math.floor(Math.random() * genres.length)]; const artists = server.schema.artists.all(); - const selectedArtists = artists.filter((artist) => + const selectedArtists = artists.filter(() => Math.floor(Math.random() * 2) % 2 === 0 ); diff --git a/music-app/mirage/serializers/album.js b/music-app/mirage/serializers/album.js deleted file mode 100644 index b1283ff..0000000 --- a/music-app/mirage/serializers/album.js +++ /dev/null @@ -1,12 +0,0 @@ -import ApplicationSerializer from './application'; - -export default ApplicationSerializer.extend({ - normalizeResponse(store, primaryModelClass, payload, id, requestType) { - payload.data.attributes.amount = payload.data.attributes.cost.amount; - payload.data.attributes.currency = payload.data.attributes.cost.currency; - - delete payload.data.attributes.cost; - - return super.normalizeResponse(...arguments); - } -}); diff --git a/music-app/mirage/serializers/song.js b/music-app/mirage/serializers/song.js deleted file mode 100644 index 9678f19..0000000 --- a/music-app/mirage/serializers/song.js +++ /dev/null @@ -1,4 +0,0 @@ -import ApplicationSerializer from './application'; - -export default ApplicationSerializer.extend({ -});