From fbe4e53e50933518ba8b5e9f75caf0a6dad783de Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias@tobias-johansson.se>
Date: Wed, 13 Feb 2019 13:03:17 +0100
Subject: [PATCH] Regression fix: Highlight selected task "dot" in shots/assets
 table

Quick hack to restore functionality. Known limitations:
* A direct link to task will not highlight it
* When a new task is created it will not be highlighted
* Selected row will not be highlighted
---
 .../js/es6/common/vuecomponents/EventBus.js   |  7 +++++++
 .../attracttable/cells/renderer/CellTasks.js  | 21 ++++++++++++++++++-
 src/styles/components/_attract_table.sass     |  4 ++++
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 src/scripts/js/es6/common/vuecomponents/EventBus.js

diff --git a/src/scripts/js/es6/common/vuecomponents/EventBus.js b/src/scripts/js/es6/common/vuecomponents/EventBus.js
new file mode 100644
index 0000000..63031c4
--- /dev/null
+++ b/src/scripts/js/es6/common/vuecomponents/EventBus.js
@@ -0,0 +1,7 @@
+/**
+ * Temporary (cross my fingers) hack to restore "active" item in table
+ */
+export const Events = {
+    DESELECT_ITEMS: 'deselect_items',
+}
+export const EventBus = new Vue();
diff --git a/src/scripts/js/es6/common/vuecomponents/attracttable/cells/renderer/CellTasks.js b/src/scripts/js/es6/common/vuecomponents/attracttable/cells/renderer/CellTasks.js
index 6966cfe..b5188ae 100644
--- a/src/scripts/js/es6/common/vuecomponents/attracttable/cells/renderer/CellTasks.js
+++ b/src/scripts/js/es6/common/vuecomponents/attracttable/cells/renderer/CellTasks.js
@@ -1,3 +1,4 @@
+import {EventBus, Events} from '../../../EventBus'
 let CellDefault = pillar.vuecomponents.table.cells.renderer.CellDefault;
 
 const TEMPLATE =`
@@ -33,9 +34,22 @@ let CellTasks = Vue.component('attract-cell-tasks', {
             return attract.auth.AttractAuth.canUserCreateTask(projectId);
         }
     },
+    data() {
+        return {
+            selected_task_id: null
+        }
+    },
+    created() {
+        EventBus.$on(Events.DESELECT_ITEMS, this.deselectTask);
+    },
+    beforeDestroy() {
+        EventBus.$off(Events.DESELECT_ITEMS, this.deselectTask);
+    },
     methods: {
         taskClass(task) {
-            return `task status-${task.properties.status}`
+            let classes = {'active': this.selected_task_id === task._id};
+            classes[`task status-${task.properties.status}`] = true;
+            return classes;
         },
         taskLink(task) {
             let project_url = ProjectUtils.projectUrl();
@@ -49,9 +63,14 @@ let CellTasks = Vue.component('attract-cell-tasks', {
         },
         onTaskClicked(task) {
             task_open(task._id, ProjectUtils.projectUrl());
+            EventBus.$emit(Events.DESELECT_ITEMS);
+            this.selected_task_id = task._id;
         },
         onAddTask(event) {
             task_create(this.rowObject.getId(), this.column.taskType);
+        },
+        deselectTask() {
+            this.selected_task_id = null;
         }
     },
 });
diff --git a/src/styles/components/_attract_table.sass b/src/styles/components/_attract_table.sass
index 0a0fe42..c2f5ec9 100644
--- a/src/styles/components/_attract_table.sass
+++ b/src/styles/components/_attract_table.sass
@@ -141,6 +141,10 @@ $thumbnail-max-height: calc(110px * (9/16))
 
             &:hover
                 box-shadow: inset 0px 0px 5px $color-background-active-dark
+            
+            &.active
+                border: 2px solid white
+                box-shadow: 0 0 0 1px rgba($color-primary, .2), 1px 1px 0 rgba(black, .2)
 
     
 .pillar-table-menu