No results message.

This commit is contained in:
minimo-io 2022-10-20 19:10:23 -03:00
parent 9333077f7a
commit a4e61d8247
3 changed files with 15 additions and 12 deletions

View File

@ -132,7 +132,7 @@
{ "t": "Batifondo", "d": "Alboroto, follon." }, { "t": "Batifondo", "d": "Alboroto, follon." },
{ "t": "Batilana", "d": "Delator." }, { "t": "Batilana", "d": "Delator." },
{ "t": "Batir", "d": "Confesar, delatar, denunciar," }, { "t": "Batir", "d": "Confesar, delatar, denunciar," },
{ "t": "decir la verdad Batir la justa", "d": "Decir la verdad." }, { "t": "Batir la justa", "d": "Decir la verdad." },
{ "t": "Batuque", "d": "Alboroto, fiesta ruidosa." }, { "t": "Batuque", "d": "Alboroto, fiesta ruidosa." },
{ "t": "Beberaje", "d": "Bebida alcohólica." }, { "t": "Beberaje", "d": "Bebida alcohólica." },
{ "t": "Bebestible", "d": "Bebida." }, { "t": "Bebestible", "d": "Bebida." },

View File

@ -1,12 +1,12 @@
// Runs at https://minimo.io/diccionario-de-lunfardo-2020062059/, loaded via jsdelivr (fetched from Github) // Runs at https://minimo.io/diccionario-de-lunfardo-2020062059/, loaded via jsdelivr (fetched from Github)
// @minimo-io // @minimo-io
// v.0.1
const App = Vue.createApp({ const App = Vue.createApp({
data(){ data(){
return { return {
placeholder: 'Buscá che...', placeholder: 'Buscá che...',
searchQuery: '', searchQuery: '',
noResults: false,
wordsJson: [] wordsJson: []
} }
}, },
@ -40,13 +40,15 @@ const App = Vue.createApp({
//return this.listValues.slice(0, 10); //return this.listValues.slice(0, 10);
return this.listValues.slice(0, 50); return this.listValues.slice(0, 50);
} }
return this.listValues var filteredValues = this.listValues
.map((v) => { .map((v) => {
if (this.matches(v)) { if (this.matches(v)) {
return v; return v;
} }
}) })
.filter((v) => v); .filter((v) => v);
if (filteredValues.length <= 0) this.noResults = true;
return filteredValues;
} }
}, },

View File

@ -12,7 +12,7 @@
<div class="lunfardo-app card card bg-light mb-3"> <div class="lunfardo-app card card bg-light mb-3">
<div class="card-body"> <div class="card-body">
<div id="app"> <div id="app">
<form @submit.prevent="searchLunfardo"> <form @submit.prevent>
<div class="search-wrapper form-group mb-0"> <div class="search-wrapper form-group mb-0">
<input class="lunfardo-search-bar mb-1" :placeholder="placeholder" v-model="searchQuery"> <input class="lunfardo-search-bar mb-1" :placeholder="placeholder" v-model="searchQuery">
<i class="fa fa-search fa-lg search-icon"></i> <i class="fa fa-search fa-lg search-icon"></i>
@ -23,7 +23,8 @@
<div class="lunfardo-info-box" v-if="!searchQuery"> <div class="lunfardo-info-box" v-if="!searchQuery">
<i class="fa fa-info-circle" aria-hidden="true"></i> Ingresá tu búsqueda en cuadro de arriba y recorré mas de {{ countWords }} palabras lunfardas. <i class="fa fa-info-circle" aria-hidden="true"></i> Ingresá tu búsqueda en cuadro de arriba y recorré mas de {{ countWords }} palabras lunfardas.
</div> </div>
<h2 v-if="!searchQuery">Algunos ejemplos de términos lunfardos</h2> <p v-if="filteredList.length <= 0">Epa ché, sabés que todavía no se ha inventado ese término. Si existe, <a href="https://bit.ly/mo_wpp" target="_blank" rel="nofollow noopener"><i class="fa fa-whatsapp mr-1" aria-hidden="true"></i>ponete en contacto</a> y lo agregamos.</p>
<h2 v-if="!searchQuery">Algunos ejemplos</h2>
<ul class="mt-4"> <ul class="mt-4">
<li v-for="(data, index) in filteredList"><strong>{{ data.t }}</strong>: {{ data.d }}</li> <li v-for="(data, index) in filteredList"><strong>{{ data.t }}</strong>: {{ data.d }}</li>
</ul> </ul>