From 2b1af7cfb16e273b0f33dc493e538f43592f45be Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Thu, 28 Jan 2021 16:10:55 +0100
Subject: [PATCH] #1670 modify UpdatableTagList component to include tag colour

---
 frontend/app/index.html                       |  1 +
 .../components/common/tag.component.js        | 22 ++++++++++++++-----
 frontend/app/styles/components/tag.css        |  6 +++++
 .../components/common/tag.component.html      |  2 +-
 .../views/directives/updatable-tag-list.html  |  4 +++-
 5 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 frontend/app/styles/components/tag.css

diff --git a/frontend/app/index.html b/frontend/app/index.html
index d244e6bc19..8e4642c44c 100644
--- a/frontend/app/index.html
+++ b/frontend/app/index.html
@@ -53,6 +53,7 @@
     <link rel="stylesheet" href="styles/custom-fields.css"/>
     <link rel="stylesheet" href="styles/directives/page-sizer.css"/>
     <link rel="stylesheet" href="styles/directives/user.css"/>
+    <link rel="stylesheet" href="styles/components/tag.css"/>
     <!-- endbuild -->
 
     <style>
diff --git a/frontend/app/scripts/components/common/tag.component.js b/frontend/app/scripts/components/common/tag.component.js
index 8876df5802..7a9317ab33 100644
--- a/frontend/app/scripts/components/common/tag.component.js
+++ b/frontend/app/scripts/components/common/tag.component.js
@@ -5,15 +5,25 @@
         .component('tag', {
             controller: function() {
                 this.$onInit = function() {
-                    this.tag = _.without([
-                        this.value.namespace,
-                        ':',
-                        this.value.predicate,
-                        this.value.value ? ("=\"" + this.value.value + "\"") : null
-                    ], null).join('');
+                    if(!this.value) {
+                        return;
+                    }                    
+                    if(_.isString(this.value)) {
+                        this.tag = this.value;
+                        this.bgColor = '#3c8dbc';
+                    } else {
+                        this.tag = _.without([
+                            this.value.namespace,
+                            ':',
+                            this.value.predicate,
+                            this.value.value ? ("=\"" + this.value.value + "\"") : null
+                        ], null).join('');
+                        this.bgColor = this.value.colour || '#3c8dbc';
+                    }
                 };
             },
             controllerAs: '$ctrl',
+            replace: true,
             templateUrl: 'views/components/common/tag.component.html',
             bindings: {
                 value: '<'
diff --git a/frontend/app/styles/components/tag.css b/frontend/app/styles/components/tag.css
new file mode 100644
index 0000000000..d231affb9e
--- /dev/null
+++ b/frontend/app/styles/components/tag.css
@@ -0,0 +1,6 @@
+.label.label-tag {
+    border-left-width: 8px;
+    border-left-style: solid;
+    /* border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px; */
+}
diff --git a/frontend/app/views/components/common/tag.component.html b/frontend/app/views/components/common/tag.component.html
index 9646fdddcf..a5da190b79 100644
--- a/frontend/app/views/components/common/tag.component.html
+++ b/frontend/app/views/components/common/tag.component.html
@@ -1 +1 @@
-<span class="label label-default label-lg">{{$ctrl.tag}}</span>
+<span class="label label-tag label-default label-lg" style="">{{$ctrl.tag}}</span>
diff --git a/frontend/app/views/directives/updatable-tag-list.html b/frontend/app/views/directives/updatable-tag-list.html
index 83a59e3e15..e3f094bf51 100644
--- a/frontend/app/views/directives/updatable-tag-list.html
+++ b/frontend/app/views/directives/updatable-tag-list.html
@@ -3,7 +3,9 @@
         ng-class="{'tags-list flexwrap': value.length > 0}">
         <span class="updatable-value text-warning" ng-show="!value || value.length === 0"><em>Not Specified</em></span>
 
-        <span ng-repeat="tag in value" class="label label-primary mb-xxxs mr-xxxs">{{tag.text}}</span>
+        <!-- <span ng-repeat="tag in value" class="label label-primary mb-xxxs mr-xxxs">{{tag.text}}</span> -->
+        <!-- <span ng-repeat="tag in value" class="label label-primary mb-xxxs mr-xxxs">{{tag.text}}</span> -->
+        <tag class=" mb-xxxs mr-xxxs" ng-repeat="tag in value" value="tag.text"></tag>
 
         <small class="updatable-input-icon" ng-class="{'lg': value.length > 0}">
             <i class="glyphicon glyphicon-pencil"></i>