Pull Request

music-app/app/adapters/album.js

@@ -0,0 +1,5 @@
+import DS from 'ember-data';
+
+export default DS.JSONAPIAdapter.extend({
+
+});

music-app/app/adapters/application.js

@@ -0,0 +1,5 @@
+import DS from 'ember-data';
+
+export default DS.JSONAPIAdapter.extend({
+
+});

music-app/app/components/album-detail/component.js

@@ -0,0 +1,47 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+
+export default Component.extend({
+
+    album: null,
+
+    showForm: false,
+
+    newSong: null,
+
+    genres: null,
+
+    artists: null,
+
+    store: service(),
+
+    init() {
+        this._super(...arguments);
+
+        this.set('genres', this.store.findAll('genre'));
+        this.set('artists', this.store.findAll('artist'));
+        this.set('newSong', {
+            title: undefined
+        });
+    },
+
+    actions: {
+        toggleForm() {
+            this.toggleProperty('showForm');
+        },
+
+        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');
+        }
+    }
+});

music-app/app/components/album-detail/template.hbs

@@ -0,0 +1,40 @@
+{{#link-to "application"}}Back{{/link-to}}
+Songs for {{album.name}} album:
+<br>
+<table>
+		<thead>
+				<tr>
+						<th>Title</th>
+						<th>Genre</th>
+						<th>Artists</th>
+				</tr>
+		</thead>
+		<tbody>
+				{{#each album.songs as |song|}}
+						{{song-detail song=song genres=genres}}
+				{{/each}}
+		</tbody>
+</table>
+
+<br>
+<button {{action "toggleForm"}}>Add song</button>
+	{{#if showForm}}
+			<br>
+			Name: {{input value=newSong.title}}
+			<br>
+			Genre:
+			<select id="selectGenre">
+					{{#each genres as |genre|}}
+							<option value={{genre.id}}>{{genre.name}}</option>
+					{{/each}}
+			</select>
+			<br>
+			Artists:
+			<br>
+			{{#each artists as |artist|}}
+					{{input type="checkbox" checked=foo}}
+					<option value={{artists.id}}>{{artist.name}}</option>
+			{{/each}}
+			<br>
+			<button {{action "addSong"}}>New</button>
+	{{/if}}

music-app/app/components/music-list/component.js

@@ -0,0 +1,21 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+
+    albums: null,
+
+    albumsToShow: null,
+
+    textToSearch: '',
+
+    init() {
+        this._super(...arguments);
+        this.set('albumsToShow', this.get('albums'));
+    },
+
+    actions: {
+        searchByText(textToSearch) {
+            this.set('albumsToShow', this.get('albums').filter((album) => album.name.toLowerCase().includes(textToSearch.toLowerCase())));
+        }
+    }
+});

music-app/app/components/music-list/template.hbs

@@ -0,0 +1,23 @@
+<div>
+		<div class="music-list-filter">
+				<label for="byName" class="Filter__label">Search</label>
+				{{input value=textToSearch}}
+				<button {{action "searchByText" textToSearch}}>Go</button>
+		</div>
+		<ul class="album-list">
+				{{#each albumsToShow as |album|}}
+						<li class="album">
+								{{#link-to "albums" album.id}}
+										<div>
+												<div>
+														<img src={{album.cover}} alt={{album.name}}>
+												</div>
+												<div>
+														<h3>{{album.name}}</h3>
+												</div>
+										</div>
+								{{/link-to}}
+						</li>
+				{{/each}}
+		</ul>
+</div>

music-app/app/components/song-detail/component.js

@@ -0,0 +1,59 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+
+export default Component.extend({
+
+    tagName: 'tr',
+
+    song: null,
+
+    songToEdit: null,
+
+    showForm: false,
+
+    store: service(),
+
+    artistNames: undefined,
+
+    init() {
+        this._super(...arguments);
+        this.set('artistNames', this.getArtistsNames(this.get('song.artists')));
+        this.set('songToEdit', {
+            title: undefined
+        });
+    },
+
+    getArtistsNames(artists) {
+        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');
+        }
+    }
+});

music-app/app/components/song-detail/template.hbs

@@ -0,0 +1,20 @@
+{{#if showForm}}
+		<td>{{input value=songToEdit.title placeholder=song.title}}</td>
+		<td>
+				<select id="selectGenre">
+						{{#each genres as |genre|}}
+								<option value={{genre.id}}>{{genre.name}}</option>
+						{{/each}}
+				</select>
+		</td>
+		<td>//TODO</td>
+		<td>
+				<button {{action "updateSong"}}>Save</button>
+				<button {{action "toggleForm"}}>Cancel</button>
+		</td>
+{{else}}
+		<td>{{song.title}}</td>
+		<td>{{song.genre.name}}</td>
+		<td>{{artistNames}}</td>
+		<td><button {{action "toggleForm"}}>Edit song</button></td>
+{{/if}}

music-app/app/models/album.js

@@ -1,5 +1,10 @@
-import Model from '@ember-data/model';
+import Model, { attr, hasMany } from '@ember-data/model';
 
 export default Model.extend({
 
+    name: attr('string'),
+
+    cover: attr('string'),
+
+    songs: hasMany('song')
 });

music-app/app/models/artist.js

@@ -1,5 +1,7 @@
-import Model from '@ember-data/model';
+import Model, { attr } from '@ember-data/model';
 
 export default Model.extend({
 
+    name: attr()
+
 });

music-app/app/models/genre.js

@@ -1,5 +1,7 @@
-import Model from '@ember-data/model';
+import Model, { attr } from '@ember-data/model';
 
 export default Model.extend({
 
+    name: attr()
+
 });

music-app/app/models/song.js

@@ -1,5 +1,12 @@
-import Model from '@ember-data/model';
+import Model, { attr, belongsTo, hasMany } from '@ember-data/model';
 
 export default Model.extend({
 
+    title: attr(),
+
+    album: belongsTo('album'),
+
+    genre: belongsTo('genre', { inverse: null }),
+
+    artists: hasMany('artist', { inverse: null })
 });

music-app/app/router.js

@@ -7,4 +7,5 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function() {
+  this.route('albums', { path: '/albums/:id' });
 });

music-app/app/routes/albums.js

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+    model(transition) {
+        return this.store.findRecord('album', transition.id);
+    }
+})

music-app/app/routes/application.js

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+    model() {
+        return this.store.findAll('album');
+    }
+})

music-app/app/serializers/application.js

@@ -0,0 +1,4 @@
+import JSONAPISerializer from '@ember-data/serializer/json-api';
+
+export default class ApplicationSerializer extends JSONAPISerializer {
+}

music-app/app/styles/app.scss

@@ -0,0 +1,26 @@
+.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;
+}
+
+.show {
+    display: block;
+}
+
+.hide {
+    display: none;
+}

music-app/app/templates/albums.hbs

@@ -0,0 +1 @@
+{{album-detail album=model}}

music-app/app/templates/application.hbs

@@ -1,3 +1,3 @@
-<MusicList />
-
+{{music-list albums=model}}
+<br>
 {{outlet}}

music-app/mirage/config.js

@@ -0,0 +1,39 @@
+export default function() {
+
+  this.namespace = '';
+
+  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');
+
+  // 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
+  */
+}