#64: Append facet import to existing component

Duke-MatSci · Feb 4, 2022 · 07f4658 · 07f4658
1 parent 01d0e36
commit 07f4658
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 27 deletions.
diff --git a/app/src/components/explorer/Header.vue b/app/src/components/explorer/Header.vue
@@ -3,17 +3,18 @@
     <md-app-toolbar class="md-large md-dense md-primary" id="reset_bg">
       <div class="md-toolbar-row">
         <div class="md-toolbar-section-start">
-          <md-button class="md-icon-button" @click="toggleMenu">
+          <md-button class="md-icon-button" @click="toggler">
             <md-icon>menu</md-icon>
           </md-button>
 
           <span class="md-title"><img id="logo" src="@/assets/img/materialsmine_logo_sm.png"></span>
         </div>
 
         <div class="md-toolbar-section-end">
-          <!-- <md-button class="md-icon-button">
-            <md-icon>more_vert</md-icon>
-          </md-button> -->
+          <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">
@@ -33,13 +34,15 @@
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
 export default {
   name: 'ExpHeader',
   props: ['toggler'],
-  methods: {
-    toggleMenu () {
-      this.toggler()
-    }
-  }
+  computed: {
+    ...mapGetters('explorer', {
+      searchTerm: 'getSearchKeyword',
+      searchEnabled: 'getSearching',
+    })
+  },
 }
 </script>
diff --git a/app/src/pages/explorer/Base.vue b/app/src/pages/explorer/Base.vue
@@ -10,6 +10,7 @@
 	</md-app>
 </template>
 <script>
+import '@/modules/facet.js'
 import Drawers from '@/components/Drawer.vue'
 import ExpHeader from '@/components/explorer/Header.vue'
 export default {

diff --git a/app/src/pages/explorer/Home.vue b/app/src/pages/explorer/Home.vue
@@ -1,12 +1,13 @@
 <template>
 	<div>
-		<div class="section_teams">
+		<facet-panel :searchEnabled="searchEnabled" />
+		<div class="section_teams" v-if="!searchEnabled">
 			<div class="search_box">
 				<h2 class="search_box_header">Welcome to MM Explorer</h2>
-				<form class="form">
+				<form class="form" @submit.prevent="setSearching">
 					<div class="search_box_form">
 						<div class="form__group search_box_form-item-1">
-								<input type="text" class="form__input form__input--adjust" placeholder="Search" name="search" id="search" required />
+								<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">
@@ -15,11 +16,11 @@
 					</div>
 				</form>
 				<p class="search_box_text">
-					MM Explorer is a research-focused discovery tool that enables collaboration among scholars of nano and meta materials. Browse or search information on publication, images, charts, etc.
+					MM Explorer is a research-focused discovery tool that enables collaboration among scholars of nano and meta materials. Browse or search information on articles, samples, images, charts, etc.
 				</p>
 			</div>
 		</div>
-		<div class="explorer_page-container">
+		<div class="explorer_page-container" v-if="!searchEnabled">
 			<div class="explorer_page-nav">
 				<div class="teams_list explorer_page-list">
 					<ul>
@@ -40,19 +41,37 @@
 </template>
 
 <script>
+import { mapMutations } from 'vuex'
+import FacetPanel from '@/components/explorer/Facet.vue'
 export default {
-  name: 'ExplorerHome',
-  data () {
-    return {
-      pageNavLinks: [
-        { icon: 'grid_view', text: 'Gallery', link: '' },
-        { icon: 'cloud_upload', text: 'Curate', link: '' },
-        { icon: 'help', text: 'Help', link: '' }
-      ]
-    }
-  },
-  methods: {
-
-  }
+	name: 'ExplorerHome',
+	data () {
+		return {
+			pageNavLinks: [
+				{ icon: 'grid_view', text: 'Gallery', link: '' },
+				{ icon: 'cloud_upload', text: 'Curate', link: '' },
+				{ icon: 'help', text: 'Help', link: '' }
+			],
+		}
+	},
+	computed: {
+		searchWord: {
+			get(){
+				return this.$store.getters['explorer/getSearchKeyword']
+			},
+			set (payload) {
+				return this.$store.commit('explorer/setSearchKeyword', payload)
+			}
+		},
+		searchEnabled(){
+			return this.$store.getters['explorer/getSearching']
+		}
+	},
+	components: {
+		FacetPanel
+	},
+	methods: {
+		...mapMutations('explorer', ['setSearching'])
+	}
 }
 </script>