SHARE
TWEET

Untitled

a guest Aug 20th, 2019 80 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div class="tityl">
  3.     <v-flex
  4.       xs6
  5.       sm6
  6.       md12
  7.       class="searchbar"
  8.     >
  9.       <!-- <autocomplete
  10.     class="searchbarLabel"
  11.     :search="search"
  12.     placeholder="Wyszukaj wydarzenie"
  13.     aria-label="Wyszukaj wydarzenie"
  14.   ></autocomplete> -->
  15.       <autocomplete
  16.         :search="search"
  17.         class="searchbarLabel"
  18.         placeholder="Wyszukaj wydarzenie"
  19.         aria-label="Wyszukaj wydarzenie"
  20.         :get-result-value="getResultValue"
  21.         @submit="handleSubmit"
  22.       />
  23.     </v-flex>
  24.   </div>
  25. </template>
  26.  
  27. <script>
  28. import Autocomplete from '@trevoreyre/autocomplete-vue'
  29. import '@trevoreyre/autocomplete-vue/dist/style.css'
  30. import { mapGetters, mapActions } from 'vuex'
  31.  
  32. export default {
  33.   name: 'NavbarSearch',
  34.   computed: {
  35.     ...mapGetters([
  36.       'allEvents',
  37.       'foundEvents'
  38.     ])
  39.   },
  40.   components: {
  41.     Autocomplete
  42.   },
  43.   methods: {
  44.     search (input) {
  45.       let counter = 0
  46.       let button = false
  47.       let hint = {
  48.         name: 'Pokaż więcej',
  49.         id: 0,
  50.         text: input
  51.       }
  52.       if (input.length <= 1) {
  53.         this.resetFoundEvents()
  54.       }
  55.       if (input.length > 1) {
  56.         this.searchEvent(input)
  57.       }
  58.       return this.foundEvents.map(event => {
  59.         if (counter < 7) {
  60.           counter++
  61.           return event
  62.         }
  63.         if (counter > 4 && button === false) {
  64.           button = true
  65.           return hint
  66.         }
  67.       })
  68.     },
  69.     getResultValue (result) {
  70.       return result.name
  71.     },
  72.     handleSubmit (result) {
  73.       if(result.id === 0) {
  74.         this.$router.push({ path: `search/${result.text}` })
  75.       }
  76.       else {
  77.         this.$router.push({ path: `/event/${result.id}` })
  78.       }
  79.     },
  80.     ...mapActions([
  81.       'searchEvent',
  82.       'resetFoundEvents'
  83.     ])
  84.   }
  85. }
  86. </script>
  87.  
  88. <style scoped>
  89. .searchbar {
  90.   width: 600px;
  91.   margin-left: 5px;
  92. }
  93.  
  94. .searchbarLabel {
  95.   font-size: 16px;
  96.   margin-right: 10%;
  97. }
  98.  
  99. .tityl {
  100.   margin-left: 50px;
  101.   cursor: pointer;
  102.   display: flex;
  103. }
  104. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top