From 31f9e04c256a43f1192885d0d3a2ad53263cc7fe Mon Sep 17 00:00:00 2001
From: Chris Veilleux <veilleux.chris@gmail.com>
Date: Mon, 22 Oct 2018 21:48:13 -0500
Subject: [PATCH] refactored to have all the things for a skill summary card in
 one directory, except for the install button which is shared with the skill
 detail component

---
 .../skill-card-header.component.html          | 26 ++++++++++++
 .../skill-card-header.component.scss          | 20 ++++++++++
 .../skill-card-header.component.ts            | 23 ++++++-----
 .../skill-card/skill-card.component.html      | 23 +++++++++++
 .../skill-card/skill-card.component.scss      | 40 +++++++++++++++++++
 .../skill-card/skill-card.component.ts        | 19 +++++++++
 6 files changed, 141 insertions(+), 10 deletions(-)
 create mode 100644 market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card-header.component.html
 create mode 100644 market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card-header.component.scss
 rename market/frontend/v1/market-ui/src/app/skills/skill-summary/{skill-card-header => skill-card}/skill-card-header.component.ts (55%)
 create mode 100644 market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card.component.html
 create mode 100644 market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card.component.scss
 create mode 100644 market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card.component.ts

diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card-header.component.html b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card-header.component.html
new file mode 100644
index 00000000..19090f80
--- /dev/null
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card-header.component.html
@@ -0,0 +1,26 @@
+<div fxLayout="row" fxLayoutAlign="space-between start" class="card-header">
+    <div class="mycroft-icon">
+        <img
+            src="../../../../assets/mycroft-logo.svg"
+            *ngIf="skill.isMycroftMade"
+            matTooltip="Mycroft Made"
+        >
+    </div>
+    <div class="skill-icon">
+        <fa
+            *ngIf="!skill.iconImage"
+            [ngStyle]="{'color': skill.icon.color}"
+            name={{skill.icon.icon}} size="2x"
+        >
+        </fa>
+        <img *ngIf="skill.iconImage" src={{skill.iconImage}} height="30" width="30">
+    </div>
+    <div class="installed-icon">
+        <fa-icon
+            *ngIf="isInstalled"
+            [icon]="installedIcon"
+             matTooltip="Skill Installed"
+        >
+        </fa-icon>
+    </div>
+</div>
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card-header.component.scss b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card-header.component.scss
new file mode 100644
index 00000000..71f79f95
--- /dev/null
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card-header.component.scss
@@ -0,0 +1,20 @@
+@import '../../../../stylesheets/global.scss';
+
+.card-header {
+    margin-bottom: 20px;
+}
+.mycroft-icon {
+    width: 20px;
+    img {
+        height: 20px;
+        width: 20px;
+    }
+}
+.installed-icon {
+    width: 20px;
+    fa-icon {
+        color: $mycroft-tertiary-green;
+        font-size: 20px;
+    }
+}
+
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.ts b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card-header.component.ts
similarity index 55%
rename from market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.ts
rename to market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card-header.component.ts
index c6aded72..aaac3356 100644
--- a/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card-header/skill-card-header.component.ts
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card-header.component.ts
@@ -3,7 +3,8 @@
  * for the skill and a Mycroft logo if the skill is authored by Mycroft AI.
  */
 import { Component, Input, OnInit } from '@angular/core';
-import { Skill } from "../../skills.service";
+import { AvailableSkill } from "../../skills.service";
+import { InstallService } from "../../install.service";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
 
 @Component({
@@ -12,22 +13,24 @@ import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
     styleUrls: ['./skill-card-header.component.scss']
 })
 export class SkillCardHeaderComponent implements OnInit {
-    @Input() public skill: Skill;
-    public isMycroftMade: boolean;
     public isInstalled: boolean;
     public installedIcon = faCheckCircle;
+    @Input() public skill: AvailableSkill;
 
-    constructor() { }
+    constructor(private installService: InstallService) { }
 
     /**
      * Include the Mycroft AI logo in the card header if Mycroft authored the skill
      */
     ngOnInit() {
-        if (this.skill.credits) {
-            this.isMycroftMade = this.skill.credits[0]['name'] == 'Mycroft AI';
-        }
-        if (this.skill.installStatus === 'installed') {
-            this.isInstalled = true;
-        }
+        this.installService.installStatuses.subscribe(
+            (installStatuses) => {
+                let installStatus = this.installService.getSkillInstallStatus(
+                    this.skill,
+                    installStatuses
+                );
+                this.isInstalled = ['system', 'installed'].includes(installStatus);
+            }
+        );
     }
 }
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card.component.html b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card.component.html
new file mode 100644
index 00000000..8db516e5
--- /dev/null
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card.component.html
@@ -0,0 +1,23 @@
+<!-- This represents a single skill on the skill summary page -->
+<mat-card>
+    <!-- Make the entire card a clickable button that routes to the details -->
+    <div [routerLink]="['/skill', skill.name]">
+        <market-skill-card-header [skill]="skill"></market-skill-card-header>
+        <mat-card-title align="center">
+            {{skill.title ? skill.title : '&nbsp;'}}
+        </mat-card-title>
+        <mat-card-subtitle fxLayoutAlign="center">
+            <div class="skill-trigger">
+                <fa-icon [icon]="voiceIcon"></fa-icon>
+                {{skill.trigger}}
+            </div>
+        </mat-card-subtitle>
+        <mat-card-content [innerHTML]="skill.summary ? skill.summary : '&nbsp;'">
+        </mat-card-content>
+    </div>
+    <mat-card-actions>
+        <skill-install-button [skill]="skill" [component]="'skillSummary'">
+
+        </skill-install-button>
+    </mat-card-actions>
+</mat-card>
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card.component.scss b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card.component.scss
new file mode 100644
index 00000000..cb84ce8c
--- /dev/null
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card.component.scss
@@ -0,0 +1,40 @@
+@import '../../../../stylesheets/global.scss';
+
+@mixin card-width {
+    width: 320px;
+}
+
+mat-card {
+    @include card-width;
+    border-radius: 10px;
+    cursor: pointer;
+    margin: 10px;
+    padding: 18px;
+    mat-card-title {
+        @include ellipsis-overflow;
+        color: $mycroft-secondary;
+        font-family: 'Roboto Mono', monospace;
+        font-weight: bold;
+        padding-bottom: 5px;
+        text-align: center;
+    }
+    mat-card-subtitle {
+        .skill-trigger {
+            @include ellipsis-overflow;
+            @include skill-trigger;
+        }
+    }
+    mat-card-content {
+        color: $mycroft-secondary;
+        @include ellipsis-overflow;
+        text-align: center;
+    }
+    mat-card-actions {
+        margin-left: 0;
+        margin-bottom: 0;
+    }
+}
+
+mat-card:hover{
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
+}
diff --git a/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card.component.ts b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card.component.ts
new file mode 100644
index 00000000..2ad14e5a
--- /dev/null
+++ b/market/frontend/v1/market-ui/src/app/skills/skill-summary/skill-card/skill-card.component.ts
@@ -0,0 +1,19 @@
+/**
+ * Format the header portion of a skill summary card.  This includes the icon
+ * for the skill and a Mycroft logo if the skill is authored by Mycroft AI.
+ */
+import { Component, Input } from '@angular/core';
+import { AvailableSkill } from "../../skills.service";
+import { faComment } from "@fortawesome/free-solid-svg-icons";
+
+@Component({
+    selector: 'market-skill-card',
+    templateUrl: './skill-card.component.html',
+    styleUrls: ['./skill-card.component.scss']
+})
+export class SkillCardComponent {
+    @Input() public skill: AvailableSkill;
+    public voiceIcon = faComment;
+
+    constructor() { }
+}