Merge pull request #120 from Duke-MatSci/#97_Header_tab_panel

#97 Header Tab Panel
Duke-MatSci · Feb 22, 2022 · 58984e3 · 58984e3
2 parents ba64ce1 + 04313ed
commit 58984e3
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 5 deletions.
diff --git a/app/src/assets/css/modules/_pages.scss b/app/src/assets/css/modules/_pages.scss
@@ -47,6 +47,37 @@
 }
 
 .explorer_page {
+    &_header {
+        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: 0.5rem;
+            transition: background-color 0.2s;
+            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 {
+            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/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
@@ -0,0 +1,62 @@
+<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" />
+                <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>
+        <div style="text-align:right"> Query "{{searchWord}}" found 12345 results </div>
+        </md-card>
+        <md-tabs class="btn--primary">
+            <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'],
+  computed: {
+    searchWord: {
+      get () {
+        return this.$store.getters['explorer/getSearchKeyword']
+      },
+      set (payload) {
+        return this.$store.commit('explorer/setSearchKeyword', payload)
+      }
+    },
+    images () {
+      return 0
+    },
+    samples () {
+      return 0
+    },
+    articles () {
+      return 0
+    },
+    charts () {
+      return 0
+    },
+    materials () {
+      return 0
+    }
+    // other () {
+    //   return 0
+    // }
+  },
+  methods: {
+    ...mapMutations('explorer', ['setResultsTab'])
+  }
+}
+</script>
diff --git 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'])

diff --git 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
@@ -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
@@ -2,6 +2,9 @@ export default {
   setMenuVisible (state) {
     state.toggleMenuVisibility = !state.toggleMenuVisibility
   },
+  setResultsTab (state, payload) {
+    state.resultsTab = payload
+  },
   setSearchKeyword (state, payload) {
     state.searchKeyword = payload
   },

diff --git a/app/tests/unit/components/explorer/SearchHeader.spec.js 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)
+  })
+})