From 872080cf9e74abf11646dcb0bc9fcedf0569feb4 Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Fri, 1 Mar 2019 23:15:33 -0500
Subject: [PATCH] New: AlbumStudio Disambiguation and AlbumType

---
 frontend/src/AlbumStudio/AlbumStudio.js       |  2 +-
 frontend/src/AlbumStudio/AlbumStudioAlbum.css | 15 ++++++++++++++-
 frontend/src/AlbumStudio/AlbumStudioAlbum.js  | 17 +++++++++++++++--
 frontend/src/AlbumStudio/AlbumStudioRow.css   |  2 +-
 frontend/src/AlbumStudio/AlbumStudioRow.js    |  8 ++++----
 5 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/frontend/src/AlbumStudio/AlbumStudio.js b/frontend/src/AlbumStudio/AlbumStudio.js
index 6e775df5c..2506015a6 100644
--- a/frontend/src/AlbumStudio/AlbumStudio.js
+++ b/frontend/src/AlbumStudio/AlbumStudio.js
@@ -145,7 +145,7 @@ class AlbumStudio extends Component {
 
           {
             !isFetching && !!error &&
-              <div>Unable to load the calendar</div>
+              <div>Unable to load the Album Studio</div>
           }
 
           {
diff --git a/frontend/src/AlbumStudio/AlbumStudioAlbum.css b/frontend/src/AlbumStudio/AlbumStudioAlbum.css
index 1ef8e94f0..f3c9f6102 100644
--- a/frontend/src/AlbumStudio/AlbumStudioAlbum.css
+++ b/frontend/src/AlbumStudio/AlbumStudioAlbum.css
@@ -1,4 +1,4 @@
-.season {
+.album {
   display: flex;
   align-items: stretch;
   overflow: hidden;
@@ -13,6 +13,15 @@
   padding: 0 4px;
 }
 
+.albumType {
+  padding: 0 4px;
+  border-width: 0 1px;
+  border-style: solid;
+  border-color: $borderColor;
+  background-color: $white;
+  color: $defaultColor;
+}
+
 .tracks {
   padding: 0 4px;
   background-color: $white;
@@ -22,3 +31,7 @@
 .allTracks {
   background-color: #e0ffe0;
 }
+
+.missingWanted {
+  background-color: #ffe0e0;
+}
diff --git a/frontend/src/AlbumStudio/AlbumStudioAlbum.js b/frontend/src/AlbumStudio/AlbumStudioAlbum.js
index 947ec9565..8bec82840 100644
--- a/frontend/src/AlbumStudio/AlbumStudioAlbum.js
+++ b/frontend/src/AlbumStudio/AlbumStudioAlbum.js
@@ -24,6 +24,8 @@ class AlbumStudioAlbum extends Component {
   render() {
     const {
       title,
+      disambiguation,
+      albumType,
       monitored,
       statistics,
       isSaving
@@ -36,7 +38,7 @@ class AlbumStudioAlbum extends Component {
     } = statistics;
 
     return (
-      <div className={styles.season}>
+      <div className={styles.album}>
         <div className={styles.info}>
           <MonitorToggleButton
             monitored={monitored}
@@ -46,7 +48,15 @@ class AlbumStudioAlbum extends Component {
 
           <span>
             {
-              `${title}`
+              disambiguation ? `${title} (${disambiguation})` : `${title}`
+            }
+          </span>
+        </div>
+
+        <div className={styles.albumType}>
+          <span>
+            {
+              `${albumType}`
             }
           </span>
         </div>
@@ -54,6 +64,7 @@ class AlbumStudioAlbum extends Component {
         <div
           className={classNames(
             styles.tracks,
+            percentOfTracks < 100 && monitored && styles.missingWanted,
             percentOfTracks === 100 && styles.allTracks
           )}
           title={`${trackFileCount}/${totalTrackCount} tracks downloaded`}
@@ -70,6 +81,8 @@ class AlbumStudioAlbum extends Component {
 AlbumStudioAlbum.propTypes = {
   id: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
+  disambiguation: PropTypes.string,
+  albumType: PropTypes.string.isRequired,
   monitored: PropTypes.bool.isRequired,
   statistics: PropTypes.object.isRequired,
   isSaving: PropTypes.bool.isRequired,
diff --git a/frontend/src/AlbumStudio/AlbumStudioRow.css b/frontend/src/AlbumStudio/AlbumStudioRow.css
index a053c6bef..e158b423d 100644
--- a/frontend/src/AlbumStudio/AlbumStudioRow.css
+++ b/frontend/src/AlbumStudio/AlbumStudioRow.css
@@ -12,7 +12,7 @@
   white-space: nowrap;
 }
 
-.seasons {
+.albums {
   composes: cell from 'Components/Table/Cells/TableRowCell.css';
 
   display: flex;
diff --git a/frontend/src/AlbumStudio/AlbumStudioRow.js b/frontend/src/AlbumStudio/AlbumStudioRow.js
index e2ed18f12..f6a146999 100644
--- a/frontend/src/AlbumStudio/AlbumStudioRow.js
+++ b/frontend/src/AlbumStudio/AlbumStudioRow.js
@@ -61,13 +61,13 @@ class AlbumStudioRow extends Component {
           />
         </TableRowCell>
 
-        <TableRowCell className={styles.seasons}>
+        <TableRowCell className={styles.albums}>
           {
-            albums.map((season) => {
+            albums.map((album) => {
               return (
                 <AlbumStudioAlbum
-                  key={season.id}
-                  {...season}
+                  key={album.id}
+                  {...album}
                   onAlbumMonitoredPress={onAlbumMonitoredPress}
                 />
               );