From 4a348eb809bebb9bdd950aeb9419eba4b86e7fd9 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Wed, 22 Aug 2018 14:12:04 -0500
Subject: [PATCH] add tag colors by tag

ref #65
---
 .../ListTagDtoMappingProfile.cs               | 14 ++++++++
 .../FilterList/Models/ListTagDto.cs           |  1 +
 .../FilterList/TagColors.cs                   | 33 +++++++++++++++++++
 .../ClientApp/components/Home.tsx             |  4 +--
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 src/FilterLists.Services/FilterList/MappingProfiles/ListTagDtoMappingProfile.cs
 create mode 100644 src/FilterLists.Services/FilterList/TagColors.cs

diff --git a/src/FilterLists.Services/FilterList/MappingProfiles/ListTagDtoMappingProfile.cs b/src/FilterLists.Services/FilterList/MappingProfiles/ListTagDtoMappingProfile.cs
new file mode 100644
index 000000000..5925950c8
--- /dev/null
+++ b/src/FilterLists.Services/FilterList/MappingProfiles/ListTagDtoMappingProfile.cs
@@ -0,0 +1,14 @@
+using AutoMapper;
+using FilterLists.Data.Entities;
+using FilterLists.Services.FilterList.Models;
+using JetBrains.Annotations;
+
+namespace FilterLists.Services.FilterList.MappingProfiles
+{
+    [UsedImplicitly]
+    public class ListTagDtoMappingProfile : Profile
+    {
+        public ListTagDtoMappingProfile() =>
+            CreateMap<Tag, ListTagDto>().ForMember(d => d.ColorHex, c => c.MapFrom(m => TagColors.Colors[(int)m.Id]));
+    }
+}
\ No newline at end of file
diff --git a/src/FilterLists.Services/FilterList/Models/ListTagDto.cs b/src/FilterLists.Services/FilterList/Models/ListTagDto.cs
index fdad8692d..4b8ba581c 100644
--- a/src/FilterLists.Services/FilterList/Models/ListTagDto.cs
+++ b/src/FilterLists.Services/FilterList/Models/ListTagDto.cs
@@ -7,5 +7,6 @@ public class ListTagDto
     {
         public string Name { get; set; }
         public string Description { get; set; }
+        public string ColorHex { get; set; }
     }
 }
\ No newline at end of file
diff --git a/src/FilterLists.Services/FilterList/TagColors.cs b/src/FilterLists.Services/FilterList/TagColors.cs
new file mode 100644
index 000000000..1e6c5e8f3
--- /dev/null
+++ b/src/FilterLists.Services/FilterList/TagColors.cs
@@ -0,0 +1,33 @@
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+
+namespace FilterLists.Services.FilterList
+{
+    public static class TagColors
+    {
+        //https://stackoverflow.com/a/4382138/2343739
+        public static readonly IList<string> Colors = new ReadOnlyCollection<string>(new List<string>
+        {
+            "FFB300", // Vivid Yellow
+            "803E75", // Strong Purple
+            "FF6800", // Vivid Orange
+            "A6BDD7", // Very Light Blue
+            "C10020", // Vivid Red
+            "CEA262", // Grayish Yellow
+            "817066", // Medium Gray
+            "007D34", // Vivid Green
+            "F6768E", // Strong Purplish Pink
+            "00538A", // Strong Blue
+            "FF7A5C", // Strong Yellowish Pink
+            "53377A", // Strong Violet
+            "FF8E00", // Vivid Orange Yellow
+            "B32851", // Strong Purplish Red
+            "F4C800", // Vivid Greenish Yellow
+            "7F180D", // Strong Reddish Brown
+            "93AA00", // Vivid Yellowish Green
+            "593315", // Deep Yellowish Brown
+            "F13A13", // Vivid Reddish Orange
+            "232C16" // Dark Olive Green
+        });
+    }
+}
\ No newline at end of file
diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index ea23beadc..9d620a5ba 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -100,8 +100,8 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                                .toUpperCase().includes(filter.value.toUpperCase()),
                            sortMethod: (a: any, b: any) => a.join().toUpperCase() > b.join().toUpperCase() ? 1 : -1,
                            Cell: (cell: any) => <div>{cell.value.map(
-                               (e: any) => <span className="badge badge-warning" title={e.description}>{e.name}</span>)
-                           }</div>,
+                               (e: any) => <span className="badge" style={{ color: "#{e.colorHex}" }} title={e
+                                   .description}>{e.name}</span>)}</div>,
                            width: 100,
                            headerClassName: "d-none d-lg-block",
                            className: "d-none d-lg-block"