mirror of https://github.com/getbible/app.git
120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
Vue
<template >
|
|
<div v-if="verses.length">
|
|
<!-- {{search.toLowerCase() + fverses.length}} -->
|
|
<br />
|
|
<div
|
|
class="uk-card uk-card-default primary uk-card-body uk-width-1-1 rounded"
|
|
>
|
|
<ul
|
|
:dir="dir"
|
|
class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover"
|
|
>
|
|
<li
|
|
v-for="(verse, i) in pverses"
|
|
:key="i"
|
|
:class="`uk-animation-slide-bottom uk-animation-15 uk-animation-hover`"
|
|
>
|
|
<h5 class="uk-primary text-secondary">
|
|
<span class="uk-heading-bullet"> {{ book_name + " " }} </span>
|
|
<span class="uk-badge secondary text-primary badge-light">
|
|
{{ verse.chapter }}:{{ verse.verse }}
|
|
</span>
|
|
</h5>
|
|
<span class="text-secondary">
|
|
{{ verse.text }}
|
|
</span>
|
|
<br />
|
|
<p></p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="uk-position-small uk-position-center-left uk-overlay">
|
|
<span
|
|
@click="prevV"
|
|
class="uk-icon-button primary text-secondary"
|
|
uk-icon="icon:chevron-left; ratio:2"
|
|
></span>
|
|
</div>
|
|
<div class="uk-position-small uk-position-center-right uk-overlay">
|
|
<span
|
|
@click="nextV"
|
|
class="uk-icon-button primary text-secondary"
|
|
uk-icon="icon:chevron-right; ratio:2"
|
|
></span>
|
|
</div>
|
|
|
|
<!-- <ul class="uk-pagination" uk-margin>
|
|
<li><a href="#"><span uk-pagination-previous></span></a></li>
|
|
<li><a href="#">1</a></li>
|
|
<li class="uk-disabled"><span>...</span></li>
|
|
<li><a href="#">4</a></li>
|
|
<li><a href="#">5</a></li>
|
|
<li><a href="#">6</a></li>
|
|
<li class="uk-active"><span>7</span></li>
|
|
<li><a href="#">8</a></li>
|
|
<li><a href="#">9</a></li>
|
|
<li><a href="#">10</a></li>
|
|
<li class="uk-disabled"><span>...</span></li>
|
|
<li><a href="#">20</a></li>
|
|
<li><a href="#"><span uk-pagination-next></span></a></li>
|
|
</ul> -->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import _ from "lodash";
|
|
import { mapGetters } from "vuex";
|
|
export default {
|
|
data: () => {
|
|
return {
|
|
// dir: ''
|
|
prev: 0,
|
|
next: 5,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(["verses", "dir", "book_name", "search"]),
|
|
pverses() {
|
|
return this.fverses.slice(this.prev, this.next);
|
|
},
|
|
fverses: function () {
|
|
console.log(this.search);
|
|
if (!this.search) return this.verses;
|
|
return this.filteredVerses;
|
|
},
|
|
filteredVerses() {
|
|
return _.orderBy(
|
|
this.verses.filter(
|
|
(item) =>
|
|
item.verse
|
|
.toString()
|
|
.toLowerCase()
|
|
.includes(this.search.toLowerCase()) ||
|
|
item.chapter
|
|
.toString()
|
|
.toLowerCase()
|
|
.includes(this.search.toLowerCase()) ||
|
|
item.name
|
|
.toString()
|
|
.toLowerCase()
|
|
.includes(this.search.toLowerCase()) ||
|
|
item.text.toLowerCase().includes(this.search.toLowerCase())
|
|
),
|
|
"verse"
|
|
);
|
|
},
|
|
},
|
|
methods: {
|
|
nextV() {
|
|
if (this.next > this.fverses.length) return;
|
|
this.next = this.next + 5;
|
|
this.prev = this.prev + 5;
|
|
// console.log(this.next, this.prev);
|
|
},
|
|
prevV() {
|
|
if (this.prev < 1) return;
|
|
this.next -= 5;
|
|
this.prev -= 5;
|
|
},
|
|
},
|
|
};
|
|
</script> |