Search.vue 3.06 KB
Newer Older
Markus Opolka's avatar
Markus Opolka committed
1
<template>
Markus Opolka's avatar
Markus Opolka committed
2
3
4
5
6
<v-container grid-list-md>
  <v-layout row wrap>
    <v-flex xs12>
      <h3>{{header}}</h3>
    </v-flex>
Markus Opolka's avatar
Markus Opolka committed
7

8
    <v-flex xs12>
Markus Opolka's avatar
Markus Opolka committed
9
      <p>Ci-dessous, il est possible de rechercher toute sorte de tag et de co-occurrence graphique à l'aide des expressions régulières.</p>
10

Markus Opolka's avatar
Markus Opolka committed
11
12
13
14
      <div class="subheading">Syntaxe</div>
      <p>Rechercher <strong>contenu</strong> dans un <strong>tag</strong>: <strong>tag:contenu</strong></p>

      <p>Quand le tag n'est pas spécifié, le texte sert de base de recherche.</p>
Markus Opolka's avatar
Markus Opolka committed
15
16
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
17
    <!-- Main Input Field -->
18
    <v-flex xs12 md9>
Markus Opolka's avatar
Markus Opolka committed
19
20
      <v-text-field
        v-model="search"
Markus Opolka's avatar
Markus Opolka committed
21
        label="Entrée"
Markus Opolka's avatar
Markus Opolka committed
22
23
24
25
        data-vv-search="search"
        required
        @keyup.enter.native="validate"
        ></v-text-field>
26
27
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
28
    <!-- Search Buttons -->
29
    <v-flex xs12 md3>
Markus Opolka's avatar
Markus Opolka committed
30
31
      <v-btn @click="validate" color="blue-grey darken-2" class="white--text">Rechercher</v-btn>
      <v-btn @click="clear" color="blue-grey darken-2" class="white--text">Supprimer</v-btn>
32
33
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
34
35
36
37
    <!-- Options -->
    <v-flex xs9>
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
38
    <!-- Invalid Search Warning -->
39
40
    <v-flex xs12>
      <v-alert outline color="lime darken-2" icon="warning" :value="invalid">
Markus Opolka's avatar
Markus Opolka committed
41
42
43
44
45
46
        Invalid Search Query
      </v-alert>
    </v-flex>

    <!-- Progress Bar -->
    <v-flex xs12 v-if="searching">
47
      <v-progress-linear indeterminate color="primary"></v-progress-linear>
Markus Opolka's avatar
Markus Opolka committed
48
49
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
50
    <!-- Search Results Meta -->
51
52
53
    <v-flex xs12 v-if="results">
      <v-card color="blue-grey lighten-1" class="white--text">
        <v-card-text>
Markus Opolka's avatar
Markus Opolka committed
54
          Résultats: {{results.length}} lettre(s)
55
56
57
58
        </v-card-text>
      </v-card>
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
59
    <!-- Search Results -->
Markus Opolka's avatar
Markus Opolka committed
60
    <v-flex xs12 v-if="results">
61
        <result :letter="letter" v-for="letter in results" v-bind:key="letter.url" />
Markus Opolka's avatar
Markus Opolka committed
62
    </v-flex>
Markus Opolka's avatar
Markus Opolka committed
63

Markus Opolka's avatar
Markus Opolka committed
64
  </v-layout>
Markus Opolka's avatar
Markus Opolka committed
65
66
67
68
 </v-container>
</template>

<script>
Markus Opolka's avatar
Markus Opolka committed
69
export default {
Markus Opolka's avatar
Markus Opolka committed
70
  // General Search Component
Markus Opolka's avatar
Markus Opolka committed
71
72
73
  name: 'Search',
  data () {
    return {
Markus Opolka's avatar
Markus Opolka committed
74
      header: 'Rechercher',
Markus Opolka's avatar
Markus Opolka committed
75
76
      invalid: false,
      search: '',
77
      pattern: '^([a-z]+):(.+)',
Markus Opolka's avatar
Markus Opolka committed
78
      results: null,
Markus Opolka's avatar
Markus Opolka committed
79
      searching: false,
80
      cutoff: 100,
Markus Opolka's avatar
Markus Opolka committed
81
      showlabels: false
Markus Opolka's avatar
Markus Opolka committed
82
83
84
    }
  },
  methods: {
85
86
    find (params) {
      // Call search API
Markus Opolka's avatar
Markus Opolka committed
87
88
89
      // Remove undefined values
      Object.keys(params).forEach((key) => (params[key] == null) && delete params[key])
      this.searching = true
Markus Opolka's avatar
Markus Opolka committed
90
      this.$http.get('api/search/', {params: params}).then(function (data) {
Markus Opolka's avatar
Markus Opolka committed
91
92
        this.results = data.body
        this.searching = false
Markus Opolka's avatar
Markus Opolka committed
93
      })
Markus Opolka's avatar
Markus Opolka committed
94
    },
Markus Opolka's avatar
Markus Opolka committed
95
    validate () {
Markus Opolka's avatar
Markus Opolka committed
96
      // Validate input field
97
      let search = this.search.split(':')
Markus Opolka's avatar
Markus Opolka committed
98

99
100
101
102
103
104
105
106
107
108
109
      // If no element is entered we search the text <l>
      if (typeof search[1] === 'undefined') {
        search.unshift('l')
      }

      let params = {
        element: search[0],
        content: search[1]
      }

      if (!params.content) {
Markus Opolka's avatar
Markus Opolka committed
110
        this.invalid = true
111
112
113
      } else {
        this.invalid = false
        this.find(params)
Markus Opolka's avatar
Markus Opolka committed
114
      }
Markus Opolka's avatar
Markus Opolka committed
115
116
    },
    clear () {
Markus Opolka's avatar
Markus Opolka committed
117
      // Clear input field
Markus Opolka's avatar
Markus Opolka committed
118
119
      this.invalid = false
      this.search = ''
Markus Opolka's avatar
Markus Opolka committed
120
121
    }
  }
Markus Opolka's avatar
Markus Opolka committed
122
}
Markus Opolka's avatar
Markus Opolka committed
123
</script>