From 49abdaaed082e9c43ecfb3a8ce3160e21e2bae3f Mon Sep 17 00:00:00 2001
From: Anya Wallace <aswallace98@gmail.com>
Date: Wed, 16 Feb 2022 17:11:03 -0800
Subject: [PATCH 1/8] #97: Initial commit of search header panel tabs

---
 app/src/assets/css/modules/_pages.scss       | 25 +++++++++++++
 app/src/components/explorer/SearchHeader.vue | 38 ++++++++++++++++++++
 app/src/pages/explorer/Home.vue              |  5 ++-
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 app/src/components/explorer/SearchHeader.vue

diff --git a/app/src/assets/css/modules/_pages.scss b/app/src/assets/css/modules/_pages.scss
index a5a423f9..584a45c0 100644
--- a/app/src/assets/css/modules/_pages.scss
+++ b/app/src/assets/css/modules/_pages.scss
@@ -47,6 +47,31 @@
 }
 
 .explorer_page {
+    &_header {
+        margin: 5rem;
+        text-align: center;
+        .md-tabs.md-theme-default .md-tabs-indicator {
+            background-color: $primary-white !important;
+        }
+        .md-tab-nav-button {
+            background-color: $primary !important;
+            padding: 12px 24px;
+            transition: background-color 0.2s;
+            border: 1px solid $primary;
+            border-radius: 10px 10px 0 0;
+            margin-right: 5px;
+            .md-button-content{
+                color: $primary-white !important;
+            }
+        }
+        .md-active {
+            background-color: transparent !important;
+            border-bottom-color: $primary-white !important;
+            .md-button-content {
+                color: $primary !important;
+            }
+        }
+    }
     &_footer {
         color: $primary;
         margin-top: 5rem;
diff --git a/app/src/components/explorer/SearchHeader.vue b/app/src/components/explorer/SearchHeader.vue
new file mode 100644
index 00000000..e7fae057
--- /dev/null
+++ b/app/src/components/explorer/SearchHeader.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="explorer_page_header">
+        <md-tabs class="btn--primary">
+            <md-tab :md-label="'Images (' + images + ')'"> Image Tab </md-tab>
+            <md-tab :md-label="'Samples (' + samples + ')'"> Sample Tab </md-tab>
+            <md-tab :md-label="'Articles (' + articles + ')'"> Article Tab </md-tab>
+            <md-tab :md-label="'Charts (' + charts + ')'"> Chart Tab </md-tab>
+            <!-- <md-tab :md-label="'Datasets (' + datasets + ')'"> Dataset Tab </md-tab>
+            <md-tab :md-label="'Other (' + other + ')'"> Other Tab </md-tab> -->
+        </md-tabs>
+    </div>
+</template>
+<script>
+export default {
+  name: 'SearchHeader',
+  props: ['searchEnabled'],
+  computed: {
+    images () {
+      return 0
+    },
+    samples () {
+      return 0
+    },
+    articles () {
+      return 0
+    },
+    charts () {
+      return 0
+    }
+    // datasets () {
+    //     return 0
+    // },
+    // other () {
+    //     return 0
+    // },
+  }
+}
+</script>
diff --git a/app/src/pages/explorer/Home.vue b/app/src/pages/explorer/Home.vue
index 1d8d05e8..f3b6718f 100644
--- a/app/src/pages/explorer/Home.vue
+++ b/app/src/pages/explorer/Home.vue
@@ -34,6 +34,7 @@
 				</div>
 			</div>
 		</div>
+		<search-header v-if="searchEnabled"/>
 		<div class="explorer_page_footer">
 			<span class="explorer_page_footer-text">&copy; 2022 MaterialsMine Project</span>
 		</div>
@@ -43,6 +44,7 @@
 <script>
 import { mapMutations } from 'vuex'
 import FacetPanel from '@/components/explorer/Facet.vue'
+import SearchHeader from '@/components/explorer/SearchHeader.vue'
 export default {
   name: 'ExplorerHome',
   data () {
@@ -68,7 +70,8 @@ export default {
     }
   },
   components: {
-    FacetPanel
+    FacetPanel,
+    SearchHeader
   },
   methods: {
     ...mapMutations('explorer', ['setSearching'])

From 25563b28649b88194596be1e248c37dd9e3e95e1 Mon Sep 17 00:00:00 2001
From: Anya Wallace <aswallace98@gmail.com>
Date: Wed, 16 Feb 2022 17:21:26 -0800
Subject: [PATCH 2/8] #97: Add search bar to header

---
 app/src/components/explorer/SearchHeader.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/app/src/components/explorer/SearchHeader.vue b/app/src/components/explorer/SearchHeader.vue
index e7fae057..f4d976eb 100644
--- a/app/src/components/explorer/SearchHeader.vue
+++ b/app/src/components/explorer/SearchHeader.vue
@@ -1,5 +1,14 @@
 <template>
     <div class="explorer_page_header">
+        <div class="search_box_form">
+            <div class="form__group search_box_form-item-1">
+                <input type="text" ref="search_input" class="form__input form__input--adjust" placeholder="Search" name="search" id="search" required v-model="searchWord" />
+                <label htmlFor="search" class="form__label search_box_form_label">Search</label>
+            </div>
+            <div class="form__group search_box_form-item-2">
+                <button type="submit" class="btn btn--primary btn--noradius search_box_form_btn">Search</button>
+            </div>
+        </div>
         <md-tabs class="btn--primary">
             <md-tab :md-label="'Images (' + images + ')'"> Image Tab </md-tab>
             <md-tab :md-label="'Samples (' + samples + ')'"> Sample Tab </md-tab>
@@ -15,6 +24,14 @@ export default {
   name: 'SearchHeader',
   props: ['searchEnabled'],
   computed: {
+    searchWord: {
+      get () {
+        return this.$store.getters['explorer/getSearchKeyword']
+      },
+      set (payload) {
+        return this.$store.commit('explorer/setSearchKeyword', payload)
+      }
+    },
     images () {
       return 0
     },

From 1cf5c9c02e2724d48f8ef86904a5135e02d636cd Mon Sep 17 00:00:00 2001
From: Anya Wallace <aswallace98@gmail.com>
Date: Thu, 17 Feb 2022 11:46:31 -0800
Subject: [PATCH 3/8] #97: Fix tab styling, rearrange to match UI presentation

---
 app/src/assets/css/modules/_pages.scss       | 18 ++++++++++------
 app/src/components/explorer/SearchHeader.vue | 22 ++++++++++----------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/app/src/assets/css/modules/_pages.scss b/app/src/assets/css/modules/_pages.scss
index 584a45c0..99560cca 100644
--- a/app/src/assets/css/modules/_pages.scss
+++ b/app/src/assets/css/modules/_pages.scss
@@ -48,20 +48,26 @@
 
 .explorer_page {
     &_header {
-        margin: 5rem;
-        text-align: center;
+        margin: 5rem 10rem;
+        .md-tabs-navigation {
+            border-bottom: 1px solid $primary !important;
+        }
         .md-tabs.md-theme-default .md-tabs-indicator {
             background-color: $primary-white !important;
+            height: 0.5rem;
+            bottom: -0.25rem;
         }
         .md-tab-nav-button {
             background-color: $primary !important;
-            padding: 12px 24px;
+            padding: 0.5rem;
             transition: background-color 0.2s;
-            border: 1px solid $primary;
-            border-radius: 10px 10px 0 0;
-            margin-right: 5px;
+            border: 1px solid $primary !important;
+            border-radius: 0.7rem 0.7rem 0 0;
+            margin-right: 1rem;
+            height: max-content;
             .md-button-content{
                 color: $primary-white !important;
+                font-size: 1.4rem;
             }
         }
         .md-active {
diff --git a/app/src/components/explorer/SearchHeader.vue b/app/src/components/explorer/SearchHeader.vue
index f4d976eb..5ef1693f 100644
--- a/app/src/components/explorer/SearchHeader.vue
+++ b/app/src/components/explorer/SearchHeader.vue
@@ -10,12 +10,12 @@
             </div>
         </div>
         <md-tabs class="btn--primary">
-            <md-tab :md-label="'Images (' + images + ')'"> Image Tab </md-tab>
-            <md-tab :md-label="'Samples (' + samples + ')'"> Sample Tab </md-tab>
             <md-tab :md-label="'Articles (' + articles + ')'"> Article Tab </md-tab>
+            <md-tab :md-label="'Samples (' + samples + ')'"> Sample Tab </md-tab>
+            <md-tab :md-label="'Images (' + images + ')'"> Image Tab </md-tab>
             <md-tab :md-label="'Charts (' + charts + ')'"> Chart Tab </md-tab>
-            <!-- <md-tab :md-label="'Datasets (' + datasets + ')'"> Dataset Tab </md-tab>
-            <md-tab :md-label="'Other (' + other + ')'"> Other Tab </md-tab> -->
+            <md-tab :md-label="'Materials (' + materials + ')'"> Materials Tab </md-tab>
+            <md-tab :md-label="'Other (' + other + ')'"> Other Tab </md-tab>
         </md-tabs>
     </div>
 </template>
@@ -43,13 +43,13 @@ export default {
     },
     charts () {
       return 0
-    }
-    // datasets () {
-    //     return 0
-    // },
-    // other () {
-    //     return 0
-    // },
+    },
+    materials () {
+        return 0
+    },
+    other () {
+        return 0
+    },
   }
 }
 </script>

From 0caa9f70233203515007e1ae4af9fa9e29d8257d Mon Sep 17 00:00:00 2001
From: Anya Wallace <aswallace98@gmail.com>
Date: Thu, 17 Feb 2022 12:52:06 -0800
Subject: [PATCH 4/8] #97: Remove top right search field

---
 app/src/components/explorer/Header.vue       | 4 ----
 app/src/components/explorer/SearchHeader.vue | 6 +++---
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/src/components/explorer/Header.vue b/app/src/components/explorer/Header.vue
index 7061f132..0c7fdbf5 100644
--- a/app/src/components/explorer/Header.vue
+++ b/app/src/components/explorer/Header.vue
@@ -11,10 +11,6 @@
         </div>
 
         <div class="md-toolbar-section-end">
-          <div class="u_margin-top-small u_width--small u_margin-right-small" v-if="searchEnabled">
-            <input type="text" class="form__input form__input--flat" placeholder="Searching..." name="search" id="search" v-model="searchTerm"  />
-            <label htmlFor="search" class="form__label form__input--flat-label">Searching...</label>
-          </div>
           <md-badge id="header-badge" class="md-primary" md-content="12">
             <md-avatar>
               <img src="@/assets/img/brinson.jpeg" alt="Avatar">
diff --git a/app/src/components/explorer/SearchHeader.vue b/app/src/components/explorer/SearchHeader.vue
index 5ef1693f..228d7de9 100644
--- a/app/src/components/explorer/SearchHeader.vue
+++ b/app/src/components/explorer/SearchHeader.vue
@@ -45,11 +45,11 @@ export default {
       return 0
     },
     materials () {
-        return 0
+      return 0
     },
     other () {
-        return 0
-    },
+      return 0
+    }
   }
 }
 </script>

From aeffefe4a1250be46c663abd0d9bb73e71d4b75e Mon Sep 17 00:00:00 2001
From: Anya Wallace <aswallace98@gmail.com>
Date: Thu, 17 Feb 2022 14:48:34 -0800
Subject: [PATCH 5/8] #97: Remove test content from tabs

---
 app/src/components/explorer/SearchHeader.vue | 21 +++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/src/components/explorer/SearchHeader.vue b/app/src/components/explorer/SearchHeader.vue
index 228d7de9..e4ed8f12 100644
--- a/app/src/components/explorer/SearchHeader.vue
+++ b/app/src/components/explorer/SearchHeader.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="explorer_page_header">
+        <md-card style="padding:2rem; margin:2rem;">
         <div class="search_box_form">
             <div class="form__group search_box_form-item-1">
                 <input type="text" ref="search_input" class="form__input form__input--adjust" placeholder="Search" name="search" id="search" required v-model="searchWord" />
@@ -9,13 +10,15 @@
                 <button type="submit" class="btn btn--primary btn--noradius search_box_form_btn">Search</button>
             </div>
         </div>
+        <div style="text-align:right"> Query "{{searchWord}}" found 12345 results </div>
+        </md-card>
         <md-tabs class="btn--primary">
-            <md-tab :md-label="'Articles (' + articles + ')'"> Article Tab </md-tab>
-            <md-tab :md-label="'Samples (' + samples + ')'"> Sample Tab </md-tab>
-            <md-tab :md-label="'Images (' + images + ')'"> Image Tab </md-tab>
-            <md-tab :md-label="'Charts (' + charts + ')'"> Chart Tab </md-tab>
-            <md-tab :md-label="'Materials (' + materials + ')'"> Materials Tab </md-tab>
-            <md-tab :md-label="'Other (' + other + ')'"> Other Tab </md-tab>
+            <md-tab :md-label="'Articles (' + articles + ')'"></md-tab>
+            <md-tab :md-label="'Samples (' + samples + ')'"></md-tab>
+            <md-tab :md-label="'Images (' + images + ')'"></md-tab>
+            <md-tab :md-label="'Charts (' + charts + ')'"></md-tab>
+            <md-tab :md-label="'Materials (' + materials + ')'"></md-tab>
+            <!-- <md-tab :md-label="'Other (' + other + ')'"></md-tab> -->
         </md-tabs>
     </div>
 </template>
@@ -46,10 +49,10 @@ export default {
     },
     materials () {
       return 0
-    },
-    other () {
-      return 0
     }
+    // other () {
+    //   return 0
+    // }
   }
 }
 </script>

From 2d0fe8d8e3262a17f147226fe7cac513e7091f9f Mon Sep 17 00:00:00 2001
From: Anya Wallace <aswallace98@gmail.com>
Date: Thu, 17 Feb 2022 15:10:18 -0800
Subject: [PATCH 6/8] #97: Unit test for search header panel

---
 .../components/explorer/SearchHeader.spec.js   | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 app/tests/unit/components/explorer/SearchHeader.spec.js

diff --git a/app/tests/unit/components/explorer/SearchHeader.spec.js b/app/tests/unit/components/explorer/SearchHeader.spec.js
new file mode 100644
index 00000000..9bd614dd
--- /dev/null
+++ b/app/tests/unit/components/explorer/SearchHeader.spec.js
@@ -0,0 +1,18 @@
+import createWrapper from '../../../jest/script/wrapper'
+import SearchHeader from '@/components/explorer/SearchHeader.vue'
+describe('SearchHeader.vue', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = createWrapper(SearchHeader, {}, true)
+  })
+  it('renders search bar', async () => {
+    expect.assertions(1)
+    const searchBar = wrapper.find('.search_box_form')
+    expect(searchBar.text()).toContain('Search')
+  })
+  it('renders header tabs correctly', async () => {
+    expect.assertions(1)
+    const headerTabs = wrapper.findAll('.md-tab')
+    expect(headerTabs.length).toBe(5)
+  })
+})

From 5a4b24d311bfcf462f4cfc329aa5575758e05b9f Mon Sep 17 00:00:00 2001
From: Anya Wallace <aswallace98@gmail.com>
Date: Fri, 18 Feb 2022 16:11:58 -0800
Subject: [PATCH 7/8] #97: Set up for explorer results state management

---
 app/src/components/explorer/SearchHeader.vue | 16 ++++++++++------
 app/src/store/modules/explorer/getters.js    |  3 +++
 app/src/store/modules/explorer/index.js      |  1 +
 app/src/store/modules/explorer/mutations.js  |  3 +++
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/src/components/explorer/SearchHeader.vue b/app/src/components/explorer/SearchHeader.vue
index e4ed8f12..f12f4a9f 100644
--- a/app/src/components/explorer/SearchHeader.vue
+++ b/app/src/components/explorer/SearchHeader.vue
@@ -13,16 +13,17 @@
         <div style="text-align:right"> Query "{{searchWord}}" found 12345 results </div>
         </md-card>
         <md-tabs class="btn--primary">
-            <md-tab :md-label="'Articles (' + articles + ')'"></md-tab>
-            <md-tab :md-label="'Samples (' + samples + ')'"></md-tab>
-            <md-tab :md-label="'Images (' + images + ')'"></md-tab>
-            <md-tab :md-label="'Charts (' + charts + ')'"></md-tab>
-            <md-tab :md-label="'Materials (' + materials + ')'"></md-tab>
-            <!-- <md-tab :md-label="'Other (' + other + ')'"></md-tab> -->
+            <md-tab :md-label="'Articles (' + articles + ')'" @click="setResultsTab('Articles')"></md-tab>
+            <md-tab :md-label="'Samples (' + samples + ')'" @click="setResultsTab('Samples')"></md-tab>
+            <md-tab :md-label="'Images (' + images + ')'" @click="setResultsTab('Images')"></md-tab>
+            <md-tab :md-label="'Charts (' + charts + ')'" @click="setResultsTab('Charts')"></md-tab>
+            <md-tab :md-label="'Materials (' + materials + ')'" @click="setResultsTab('Materials')"></md-tab>
+            <!-- <md-tab :md-label="'Other (' + other + ')'" @click="setResultsTab('Other')"></md-tab> -->
         </md-tabs>
     </div>
 </template>
 <script>
+import { mapMutations } from 'vuex'
 export default {
   name: 'SearchHeader',
   props: ['searchEnabled'],
@@ -53,6 +54,9 @@ export default {
     // other () {
     //   return 0
     // }
+  },
+  methods: {
+    ...mapMutations( 'explorer', ['setResultsTab']),
   }
 }
 </script>
diff --git a/app/src/store/modules/explorer/getters.js b/app/src/store/modules/explorer/getters.js
index cfa1cebe..6962da13 100644
--- a/app/src/store/modules/explorer/getters.js
+++ b/app/src/store/modules/explorer/getters.js
@@ -2,6 +2,9 @@ export default {
   menuVisible (state) {
     return state.toggleMenuVisibility
   },
+  getResultsTab (state) {
+    return state.resultsTab
+  },
   getSearchKeyword (state) {
     return state.searchKeyword
   },
diff --git a/app/src/store/modules/explorer/index.js b/app/src/store/modules/explorer/index.js
index 45b694da..6c5f65af 100644
--- a/app/src/store/modules/explorer/index.js
+++ b/app/src/store/modules/explorer/index.js
@@ -7,6 +7,7 @@ export default {
   state () {
     return {
       toggleMenuVisibility: false,
+      resultsTab: '',
       searchKeyword: '',
       searching: false
     }
diff --git a/app/src/store/modules/explorer/mutations.js b/app/src/store/modules/explorer/mutations.js
index 01d32e8e..b58c1d26 100644
--- a/app/src/store/modules/explorer/mutations.js
+++ b/app/src/store/modules/explorer/mutations.js
@@ -2,6 +2,9 @@ export default {
   setMenuVisible (state) {
     state.toggleMenuVisibility = !state.toggleMenuVisibility
   },
+  setResultsTab (state, payload) {
+    state.resultsTab = payload
+  },
   setSearchKeyword (state, payload) {
     state.searchKeyword = payload
   },

From 3f1c11460cb0cb9a402f540d1348956f3bd58244 Mon Sep 17 00:00:00 2001
From: Anya Wallace <aswallace98@gmail.com>
Date: Fri, 18 Feb 2022 16:13:27 -0800
Subject: [PATCH 8/8] Fix linting errors

---
 app/src/components/explorer/SearchHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/explorer/SearchHeader.vue b/app/src/components/explorer/SearchHeader.vue
index f12f4a9f..f43ee334 100644
--- a/app/src/components/explorer/SearchHeader.vue
+++ b/app/src/components/explorer/SearchHeader.vue
@@ -56,7 +56,7 @@ export default {
     // }
   },
   methods: {
-    ...mapMutations( 'explorer', ['setResultsTab']),
+    ...mapMutations('explorer', ['setResultsTab'])
   }
 }
 </script>