<template>
	<div id="search-projects">
    <input
      v-model="text"
      type="search"
      placeholder="Rechercher..."
    >
  </div>
</template>

<script>
import _ from 'lodash';

export default {
  name: 'SearchProjects',

  components: {
	},

  data() {
    return {
      text: null
    }
  },

  watch: {
    text: _.debounce(function(newValue) {
      this.$emit('loading', true);
      this.SET_CURRENT_PAGE(1);
      this.searchFunction({ text: newValue, types: [] })
        .then(() => {
          this.$emit('loading', false);
        });
    }, 100)
  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
#search-projects {
  min-width: 100%;
  min-height: 100%;
}
</style>