From 756b882b24ecdb0b70b3c7729e0dca12cceb5fa1 Mon Sep 17 00:00:00 2001
From: Gurpinder Singh <gsingh@caastle.com>
Date: Wed, 21 Sep 2022 18:23:57 +0530
Subject: [PATCH 1/6] #572 added simple user/script search

---
 .../history/executions-log-table.vue          | 126 ++++++++++++++++--
 1 file changed, 116 insertions(+), 10 deletions(-)

diff --git a/web-src/src/common/components/history/executions-log-table.vue b/web-src/src/common/components/history/executions-log-table.vue
index a38b15f8..769ca117 100644
--- a/web-src/src/common/components/history/executions-log-table.vue
+++ b/web-src/src/common/components/history/executions-log-table.vue
@@ -1,5 +1,17 @@
 <template>
   <div class="executions-log-table">
+    <div class="search-container">
+      <div class="search-panel">
+        <input ref="searchField" autocomplete="off" class="search-field"
+               name="searchField"
+               placeholder="Search"
+               v-model="searchText">
+        <input :alt="isClearSearchButton ? 'Clear search' : 'Search'" :src="searchImage"
+             class="search-button"
+             type="image"
+             @click="searchIconClickHandler">
+      </div>
+    </div>
     <table class="highlight striped">
       <thead>
       <tr>
@@ -11,7 +23,7 @@
       </tr>
       </thead>
       <tbody v-if="!loading">
-      <tr v-for="row in rows" :key="row.id" @click="rowClick(row)">
+      <tr v-for="row in filteredRows" :key="row.id" @click="rowClick(row)">
         <td>{{ row.id }}</td>
         <td>{{ row.startTimeString }}</td>
         <td>{{ row.user }}</td>
@@ -26,9 +38,15 @@
 
 <script>
 import {mapState} from 'vuex';
+import SearchPanel from '../../../main-app/components/SearchPanel'
+import ClearIcon from '@/assets/clear.png'
+import SearchIcon from '@/assets/search.png'
 
 export default {
   name: 'executions-log-table',
+  components: {
+    SearchPanel
+  },
   props: {
     rows: Array,
     'sortColumn': {
@@ -44,6 +62,26 @@ export default {
     }
   },
 
+  data() {
+    return {
+      filteredRows: this.rows ? [...this.rows] : [],
+      searchText: ''
+    }
+  },
+
+  watch: {
+    rows: function(val, oldVal) {
+      this.searchText = '';
+      this.filterRows();
+      this.sort();
+    },
+
+    searchText: function(val, oldVal) {
+      this.filterRows();
+      this.sort();
+    }
+  },
+
   methods: {
     showSort: function (sortKey) {
       if (this.sortColumn === sortKey) {
@@ -59,23 +97,27 @@ export default {
         this.sortColumn = sortKey;
       }
 
+      this.sort();
+    },
+
+    sort: function() {
       let ascending = this.ascending;
       let column = this.sortColumn;
 
-      this.rows.sort((a, b) => {
+      this.filteredRows.sort((a, b) => {
         if (column === 'id') {
-          let id_a = a[sortKey];
-          let id_b = b[sortKey];
+          let id_a = a[column];
+          let id_b = b[column];
           return ascending ? id_a - id_b : id_b - id_a
 
         } else if (column === 'startTimeString') {
-          let date_a = new Date(a[sortKey]);
-          let date_b = new Date(b[sortKey]);
+          let date_a = new Date(a[column]);
+          let date_b = new Date(b[column]);
           return ascending ? date_a - date_b : date_b - date_a
 
         } else {
-          let other_a = a[sortKey].toLowerCase()
-          let other_b = b[sortKey].toLowerCase()
+          let other_a = a[column].toLowerCase()
+          let other_b = b[column].toLowerCase()
           if (other_a > other_b) {
             return ascending ? 1 : -1
           } else if (other_a < other_b) {
@@ -84,11 +126,43 @@ export default {
           return 0;
         }
       });
-    }
+    },
+
+    filterRows: function() {
+      let searchText = (this.searchText || '').toLowerCase();
+
+      if(this.rows === null) {
+        this.filteredRows = [];
+        return;
+      }
+
+      if(searchText === '') {
+        this.filteredRows = [...this.rows];
+      } else {
+        this.filteredRows = this.rows.filter((row) => {
+          return row.script.toLowerCase().includes(searchText) ||
+            row.user.toLowerCase().includes(searchText);
+        });
+      }
+    },
+
+    searchIconClickHandler() {
+      if (this.isClearSearchButton) {
+        this.searchText = '';
+      }
+    },
   },
 
   computed: {
-    ...mapState('history', ['loading'])
+    ...mapState('history', ['loading']),
+
+    isClearSearchButton() {
+      return this.searchText !== '';
+    },
+
+    searchImage() {
+      return this.isClearSearchButton ? ClearIcon : SearchIcon;
+    }
   }
 }
 </script>
@@ -149,4 +223,36 @@ export default {
   border-right: 4px solid transparent;
   border-top: 4px solid var(--font-color-main);
 }
+
+.search-container {
+  min-width: 200px;
+  width: 50%;
+}
+
+.search-panel {
+  display: flex;
+  padding: 5px;
+  border:  1px solid var(--primary-color);
+  border-radius: 4px;
+  background-color: var(--background-color-high-emphasis);
+}
+
+.search-button {
+  align-self: center;
+}
+
+input.search-field {
+  height: 1.5rem;
+  font-size: 1rem;
+  float: right;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  box-shadow: none;
+}
+
+input.search-field:not([type]):focus {
+  border-bottom: 0;
+  box-shadow: none;
+}
 </style>

From cdf8352891251e448b1858eaab0de8a62d608476 Mon Sep 17 00:00:00 2001
From: Gurpinder Singh <gsingh@caastle.com>
Date: Wed, 21 Sep 2022 18:50:35 +0530
Subject: [PATCH 2/6] #572 fixed vue warnings:'Prop being mutated'

---
 .../components/history/executions-log-table.vue    | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/web-src/src/common/components/history/executions-log-table.vue b/web-src/src/common/components/history/executions-log-table.vue
index 769ca117..666bff66 100644
--- a/web-src/src/common/components/history/executions-log-table.vue
+++ b/web-src/src/common/components/history/executions-log-table.vue
@@ -65,7 +65,9 @@ export default {
   data() {
     return {
       filteredRows: this.rows ? [...this.rows] : [],
-      searchText: ''
+      searchText: '',
+      mySortColumn: this.sortColumn,
+      myAscending: this.ascending
     }
   },
 
@@ -84,16 +86,16 @@ export default {
 
   methods: {
     showSort: function (sortKey) {
-      if (this.sortColumn === sortKey) {
-        return this.ascending ? 'sorted asc' : 'sorted desc'
+      if (this.mySortColumn === sortKey) {
+        return this.myAscending ? 'sorted asc' : 'sorted desc'
       }
     },
 
     sortBy: function (sortKey) {
       if (this.sortColumn === sortKey) {
-        this.ascending = !this.ascending;
+        this.myAscending = !this.myAscending;
       } else {
-        this.ascending = true;
+        this.myAscending = true;
         this.sortColumn = sortKey;
       }
 
@@ -101,7 +103,7 @@ export default {
     },
 
     sort: function() {
-      let ascending = this.ascending;
+      let ascending = this.myAscending;
       let column = this.sortColumn;
 
       this.filteredRows.sort((a, b) => {

From 765e055c68b61bba58c59067f32f231bf3487b4a Mon Sep 17 00:00:00 2001
From: Gurpinder Singh <gsingh@caastle.com>
Date: Sat, 1 Oct 2022 22:28:27 +0530
Subject: [PATCH 3/6] #572 using computed property for filteredRows instead of
 data + watch

---
 .../history/executions-log-table.vue          | 91 +++++++------------
 1 file changed, 35 insertions(+), 56 deletions(-)

diff --git a/web-src/src/common/components/history/executions-log-table.vue b/web-src/src/common/components/history/executions-log-table.vue
index 666bff66..99f4e070 100644
--- a/web-src/src/common/components/history/executions-log-table.vue
+++ b/web-src/src/common/components/history/executions-log-table.vue
@@ -64,26 +64,12 @@ export default {
 
   data() {
     return {
-      filteredRows: this.rows ? [...this.rows] : [],
       searchText: '',
       mySortColumn: this.sortColumn,
       myAscending: this.ascending
     }
   },
 
-  watch: {
-    rows: function(val, oldVal) {
-      this.searchText = '';
-      this.filterRows();
-      this.sort();
-    },
-
-    searchText: function(val, oldVal) {
-      this.filterRows();
-      this.sort();
-    }
-  },
-
   methods: {
     showSort: function (sortKey) {
       if (this.mySortColumn === sortKey) {
@@ -92,21 +78,50 @@ export default {
     },
 
     sortBy: function (sortKey) {
-      if (this.sortColumn === sortKey) {
+      if (this.mySortColumn === sortKey) {
         this.myAscending = !this.myAscending;
       } else {
         this.myAscending = true;
-        this.sortColumn = sortKey;
+        this.mySortColumn = sortKey;
       }
+    },
 
-      this.sort();
+    searchIconClickHandler() {
+      if (this.isClearSearchButton) {
+        this.searchText = '';
+      }
     },
+  },
+
+  computed: {
+    ...mapState('history', ['loading']),
+
+    isClearSearchButton() {
+      return this.searchText !== '';
+    },
+
+    searchImage() {
+      return this.isClearSearchButton ? ClearIcon : SearchIcon;
+    },
+
+    filteredRows() {
+      let searchText = (this.searchText || '').trim().toLowerCase();
+      let resultRows;
+      if(!this.rows) {
+        resultRows = [];
+      } else if(searchText === '') {
+        resultRows = [...this.rows];
+      } else {
+        resultRows = this.rows.filter((row) => {
+          return row.script.toLowerCase().includes(searchText) ||
+            row.user.toLowerCase().includes(searchText);
+        });
+      }
 
-    sort: function() {
       let ascending = this.myAscending;
-      let column = this.sortColumn;
+      let column = this.mySortColumn;
 
-      this.filteredRows.sort((a, b) => {
+      return resultRows.sort((a, b) => {
         if (column === 'id') {
           let id_a = a[column];
           let id_b = b[column];
@@ -128,42 +143,6 @@ export default {
           return 0;
         }
       });
-    },
-
-    filterRows: function() {
-      let searchText = (this.searchText || '').toLowerCase();
-
-      if(this.rows === null) {
-        this.filteredRows = [];
-        return;
-      }
-
-      if(searchText === '') {
-        this.filteredRows = [...this.rows];
-      } else {
-        this.filteredRows = this.rows.filter((row) => {
-          return row.script.toLowerCase().includes(searchText) ||
-            row.user.toLowerCase().includes(searchText);
-        });
-      }
-    },
-
-    searchIconClickHandler() {
-      if (this.isClearSearchButton) {
-        this.searchText = '';
-      }
-    },
-  },
-
-  computed: {
-    ...mapState('history', ['loading']),
-
-    isClearSearchButton() {
-      return this.searchText !== '';
-    },
-
-    searchImage() {
-      return this.isClearSearchButton ? ClearIcon : SearchIcon;
     }
   }
 }

From 9b4849a61b086d11da76b7a4d748084dff3c613b Mon Sep 17 00:00:00 2001
From: Gurpinder Singh <gsingh@caastle.com>
Date: Thu, 6 Oct 2022 12:18:03 +0530
Subject: [PATCH 4/6] #572 now defined sortColumn and ascending as data instead
 of properties

---
 .../history/executions-log-table.vue          | 32 ++++++-------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/web-src/src/common/components/history/executions-log-table.vue b/web-src/src/common/components/history/executions-log-table.vue
index 99f4e070..37ff7690 100644
--- a/web-src/src/common/components/history/executions-log-table.vue
+++ b/web-src/src/common/components/history/executions-log-table.vue
@@ -38,25 +38,13 @@
 
 <script>
 import {mapState} from 'vuex';
-import SearchPanel from '../../../main-app/components/SearchPanel'
 import ClearIcon from '@/assets/clear.png'
 import SearchIcon from '@/assets/search.png'
 
 export default {
   name: 'executions-log-table',
-  components: {
-    SearchPanel
-  },
   props: {
     rows: Array,
-    'sortColumn': {
-      type: String,
-      default: 'id'
-    },
-    'ascending': {
-      type: Boolean,
-      default: false
-    },
     rowClick: {
       type: Function
     }
@@ -65,24 +53,24 @@ export default {
   data() {
     return {
       searchText: '',
-      mySortColumn: this.sortColumn,
-      myAscending: this.ascending
+      sortColumn: 'id',
+      ascending: false
     }
   },
 
   methods: {
     showSort: function (sortKey) {
-      if (this.mySortColumn === sortKey) {
-        return this.myAscending ? 'sorted asc' : 'sorted desc'
+      if (this.sortColumn === sortKey) {
+        return this.ascending ? 'sorted asc' : 'sorted desc'
       }
     },
 
     sortBy: function (sortKey) {
-      if (this.mySortColumn === sortKey) {
-        this.myAscending = !this.myAscending;
+      if (this.sortColumn === sortKey) {
+        this.ascending = !this.ascending;
       } else {
-        this.myAscending = true;
-        this.mySortColumn = sortKey;
+        this.ascending = true;
+        this.sortColumn = sortKey;
       }
     },
 
@@ -118,8 +106,8 @@ export default {
         });
       }
 
-      let ascending = this.myAscending;
-      let column = this.mySortColumn;
+      let ascending = this.ascending;
+      let column = this.sortColumn;
 
       return resultRows.sort((a, b) => {
         if (column === 'id') {

From b68f45a5940aa6a3a94aaae8403c55205e58660d Mon Sep 17 00:00:00 2001
From: Gurpinder Singh Sandhu <gpsinghsandhu@yahoo.com>
Date: Wed, 12 Oct 2022 12:03:43 +0530
Subject: [PATCH 5/6] #572 Updated styling to match the overall theme

Co-authored-by: Iaroslav Shepilov <buggygm@gmail.com>
---
 .../history/executions-log-table.vue          | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/web-src/src/common/components/history/executions-log-table.vue b/web-src/src/common/components/history/executions-log-table.vue
index 37ff7690..d029cd5a 100644
--- a/web-src/src/common/components/history/executions-log-table.vue
+++ b/web-src/src/common/components/history/executions-log-table.vue
@@ -200,28 +200,9 @@ export default {
 
 .search-panel {
   display: flex;
-  padding: 5px;
-  border:  1px solid var(--primary-color);
-  border-radius: 4px;
-  background-color: var(--background-color-high-emphasis);
 }
 
 .search-button {
   align-self: center;
 }
-
-input.search-field {
-  height: 1.5rem;
-  font-size: 1rem;
-  float: right;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  box-shadow: none;
-}
-
-input.search-field:not([type]):focus {
-  border-bottom: 0;
-  box-shadow: none;
-}
 </style>

From 5a0fa09c5eecad8bfb5b8c48e95a3be9e9920081 Mon Sep 17 00:00:00 2001
From: Gurpinder Singh <gsingh@caastle.com>
Date: Wed, 12 Oct 2022 13:29:28 +0530
Subject: [PATCH 6/6] #572 updated logic for search and clear button

---
 .../src/common/components/history/executions-log-table.vue   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web-src/src/common/components/history/executions-log-table.vue b/web-src/src/common/components/history/executions-log-table.vue
index d029cd5a..2d3483c7 100644
--- a/web-src/src/common/components/history/executions-log-table.vue
+++ b/web-src/src/common/components/history/executions-log-table.vue
@@ -75,9 +75,12 @@ export default {
     },
 
     searchIconClickHandler() {
-      if (this.isClearSearchButton) {
+      if (this.searchText !== '') {
         this.searchText = '';
       }
+      this.$nextTick(() => {
+        this.$refs.searchField.focus();
+      });
     },
   },