From 578adaf893118555ca85ecc3c7908a1f9e137744 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Phillip=20K=C3=BChne?= <phillipkhne@gmail.com>
Date: Wed, 15 Apr 2020 00:51:26 +0200
Subject: [PATCH] Updates to search page

---
 .../src/app/models/song.model.ts              |   6 +-
 .../song-search/song-search.component.html    |  76 ++++++-----
 .../song-search/song-search.component.scss    | 119 ++++++++++++++++++
 .../src/app/song-service.service.ts           |   2 +-
 4 files changed, 170 insertions(+), 33 deletions(-)

diff --git a/frontend/ng-karaoqueue/src/app/models/song.model.ts b/frontend/ng-karaoqueue/src/app/models/song.model.ts
index 5e5e818..a61cc07 100644
--- a/frontend/ng-karaoqueue/src/app/models/song.model.ts
+++ b/frontend/ng-karaoqueue/src/app/models/song.model.ts
@@ -4,7 +4,7 @@ import { Artist } from './artist.model';
 
 export class Song {
 
-  constructor(title: string, artist: Artist, karafun_id: number, duet: boolean, explicit: boolean, id: number, genres: Array<Genre>, languages: Array<Language>) {
+  constructor(title: string, artist: Artist, karafun_id: number, duet: boolean, explicit: boolean, id: number, genres: Array<String>, languages: Array<String>) {
     this.title=title;
     this.artist=artist;
     this.karafun_id=karafun_id;
@@ -21,6 +21,6 @@ export class Song {
   duet: boolean;
   explicit: boolean;
   id: number;
-  genres: Array<Genre>;
-  languages: Array<Language>;
+  genres: Array<String>;
+  languages: Array<String>;
 }
diff --git a/frontend/ng-karaoqueue/src/app/song-search/song-search.component.html b/frontend/ng-karaoqueue/src/app/song-search/song-search.component.html
index a6385bd..f1b6dfa 100644
--- a/frontend/ng-karaoqueue/src/app/song-search/song-search.component.html
+++ b/frontend/ng-karaoqueue/src/app/song-search/song-search.component.html
@@ -1,30 +1,48 @@
-<mat-form-field>
-  <mat-label>Suche...</mat-label>
-  <input matInput placeholder="Tippe einen Künstler oder Song..."
+<div class="content">
+  <mat-form-field class="search-input">
+    <mat-label>Suche...</mat-label>
+    <mat-icon matSuffix svgIcon="magnify"></mat-icon>
+    <input type="text" matInput placeholder="Tippe einen Künstler oder Song..."
     (keyup)="applyFilter($event.target.value)">
-</mat-form-field>
-<mat-list *ngFor="let song of songs">
-    <mat-card>
-      <mat-card-title>{{song.artist.name}} - {{song.title}}</mat-card-title>
-      <mat-card-content>
-        <ng-template [ngIf]="song.duet==true" [ngIfElse]="nonduet">
-          <mat-icon svgIcon="account-multiple"></mat-icon>
-        </ng-template>
-        <ng-template #nonduet>
-          <mat-icon svgIcon="account"></mat-icon>
-        </ng-template>
-        <ng-template [ngIf]="song.explicit==true" [ngIfElse]="nonexplicit">
-          <mat-icon svgIcon="alpha-e-box"></mat-icon>
-        </ng-template>
-        <ng-template #nonexplicit>
-          <mat-icon svgIcon="alpha-e-box" style="visibility: hidden;"></mat-icon>
-        </ng-template>
-        {{song.genres[0].name}}&nbsp;&nbsp;{{song.languages[0].name}}
-      </mat-card-content>
-      <button mat-flat-button color="accent">
-        <mat-icon svgIcon="playlist-plus"></mat-icon>
-      </button>
-      <mat-card-actions>
-      </mat-card-actions>
-    </mat-card>
-</mat-list>
+  </mat-form-field>
+  </div>
+  <div class="resultcontainer">
+    <mat-list *ngFor="let song of songs">
+        <mat-card class="result">
+          <div class="card-left">
+            <mat-card-title>{{song.artist}} - {{song.title}}</mat-card-title>
+            <div class="song-info">
+              <div class="info-icons">
+                <ng-template [ngIf]="song.duet==true" [ngIfElse]="nonduet">
+                  <mat-icon svgIcon="account-multiple"></mat-icon>
+                </ng-template>
+                <ng-template #nonduet>
+                  <mat-icon svgIcon="account"></mat-icon>
+                </ng-template>
+                <ng-template [ngIf]="song.explicit==true" [ngIfElse]="nonexplicit">
+                  <mat-icon svgIcon="alpha-e-box"></mat-icon>
+                </ng-template>
+                <ng-template #nonexplicit>
+                  <mat-icon svgIcon="alpha-e-box" class="icon-disabled"></mat-icon>
+                </ng-template>
+              </div>
+              <div class="genre-list">
+                <mat-icon svgIcon="music-circle"></mat-icon>
+                <mat-chip-list *ngFor="let genre of song.genres">
+                  <mat-chip>{{genre}}</mat-chip>
+                </mat-chip-list>
+              </div>
+              <div class="language-list">
+                <mat-icon svgIcon="account-voice"></mat-icon>
+                <mat-chip-list *ngFor="let language of song.languages">
+                  <mat-chip>{{language}}</mat-chip>
+                </mat-chip-list>
+              </div>
+            </div>
+          </div>
+          <button mat-flat-button color="accent" class="add-button">
+            <mat-icon svgIcon="playlist-plus"></mat-icon>
+          </button>
+        </mat-card>
+    </mat-list>
+  </div>
diff --git a/frontend/ng-karaoqueue/src/app/song-search/song-search.component.scss b/frontend/ng-karaoqueue/src/app/song-search/song-search.component.scss
index e69de29..7cd415c 100644
--- a/frontend/ng-karaoqueue/src/app/song-search/song-search.component.scss
+++ b/frontend/ng-karaoqueue/src/app/song-search/song-search.component.scss
@@ -0,0 +1,119 @@
+.search-input {
+  width: 95%;
+  margin-top: 1rem;
+}
+
+.add-button {
+  height: 3rem;
+}
+
+.content {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+}
+
+.resultcontainer {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.result {
+  margin-left: auto;
+  margin-right: auto;
+  width: 90%;
+  margin-top: 0.2rem;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  flex-direction: column;
+}
+
+.card-left {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.song-info {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.song-info > * {
+  margin-right: 0.5rem;
+}
+
+.icon-disabled {
+  opacity: 0.1;
+}
+
+.genre-list > mat-icon {
+  padding-right: 0.25rem;
+}
+
+.genre-list mat-chip-list {
+  margin-right: 0.15rem;
+}
+
+.genre-list {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  padding-bottom: 0.25rem;
+  align-items: center;
+  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 2px,rgba(0,0,0,1) calc(100% - 2px),rgba(0,0,0,0) 100%);
+  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 2px,rgba(0,0,0,1) calc(100% - 2px),rgba(0,0,0,0) 100%);
+  -ms-overflow-style: none;
+}
+
+.language-list > mat-icon {
+  padding-right: 0.25rem;
+}
+
+.language-list mat-chip-list {
+  margin-right: 0.15rem;
+}
+
+.genre-list::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+  display: none;
+}
+
+.language-list {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  padding-bottom: 0.25rem;
+  align-items: center;
+  -ms-overflow-style: none;
+}
+
+
+
+.language-list::-webkit-scrollbar {
+  display: none;
+}
+
+
+$breakpoint-tablet: 768px;
+@media (min-width: $breakpoint-tablet) {
+  .result {
+    flex-direction: row;
+
+  }
+
+  .add-button {
+    max-height: 100%;
+    align-self: center;
+  }
+}
diff --git a/frontend/ng-karaoqueue/src/app/song-service.service.ts b/frontend/ng-karaoqueue/src/app/song-service.service.ts
index bd84339..e8cbb9f 100644
--- a/frontend/ng-karaoqueue/src/app/song-service.service.ts
+++ b/frontend/ng-karaoqueue/src/app/song-service.service.ts
@@ -27,7 +27,7 @@ export class SongServiceService {
 
     this.http.get(this.api +"/songs/compl?search="+text).subscribe((data: Observable<JSON>) => {
       data.forEach(element => {
-        out.push(new Song(element["Title"],new Artist(42,element["Artist"]),element["Id"],element["Duo"],element["Explicit"],42,[new Genre(42,element["Styles"])],[new Language(42, element["Languages"])]));
+        out.push(new Song(element["title"],element["artist"],element["karafun_id"],element["duo"],element["explicit"],element["_id"],element["styles"],element["languages"]));
       });
     });