next/list.js at master · GET-Prog/next · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
Vue.component("list", {
  props: ["items", "showdone", "votable"],
  template: `
      <div>
        <div class="column is-full">
            <div class="field has-addons" style="display: flex; justify-content: center">
                <p class="control" style="width: 60%">
                  <input v-model="queryText" id="queryText" class="input" placeholder='Buscar'></input>
                </p>
                <p class="control">
                  <a class="button is-static">{{ lengthItems }} Itens</a>
                </p>
            </div>
        </div>
        <div class="column is-full">
          <div v-for="item in filterdItems">
              <item v-if='showdone == item.done && item.selected' @vote-event="onVote" @remove-event="onRemove" @select-event="onSelect" @done-event="onDone" v-bind:data="item" v-bind:votable="votable"></item>
          </div>
          <hr>
          <div v-for="item in filterdItems">
              <item v-if='showdone == item.done && !item.selected' @vote-event="onVote" @remove-event="onRemove" @select-event="onSelect" @done-event="onDone" v-bind:data="item" v-bind:votable="votable"></item>
          </div>
        </div>
      </div>
  `,
  data() {
    return {
      queryText: undefined,
    };
  },
  methods: {
    onVote(item, isPositive) {
      this.$emit('vote-event', item, isPositive);
    },
    onRemove(item) {
      this.$emit('remove-event', item);
    },
    onDone(item) {
      this.$emit('done-event', item);
    },
    onSelect(item) {
      this.$emit('select-event', item);
    },
  },
  computed: {
    filterdItems() {
      if(this.queryText) {
        return this.items.filter(item => {
          return this.queryText.toLowerCase().split(' ').every(w => item.content.toLowerCase().includes(w));
        });
      }
      return this.items;
    },
    lengthItems() {
      return this.filterdItems.filter(item => item.done == this.showdone).length
    }
  }
});