mFilter.html

mFilter.html

<template>
<div class="mFilter">
    <div class="row d-md-none"> <!-- back arrow -->
        <div class="col">
            <h2 class="text-primary m-b-10">
                <router-link to="/transactions" class="text-primary back-arrow waves-effect">
                    <i class="mdi mdi-arrow-left"></i>
                </router-link>
            </h2>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <h3 class="d-md-none">Filtrar por </h3>
            <h4 class="filter_title d-none d-md-block">Filtrar por</h4>
            <div class="text-muted m-t-2 m-b-2">22 resultados listados</div>
            <div class="filters_selected">
                <dl class="filters_selected_items">
                    <dd class="filter_selected badge badge-md-light badge-info"
                        v-if="timeago">
                        <a role="button" class="waves-effect" @click="removeFilter('timeago')">
                            {{ timeago }} &times;
                        </a>
                    </dd>
                    <dd class="filter_selected badge badge-md-light badge-info"
                        v-if="operation">
                        <a role="button" class="waves-effect" @click="removeFilter('operation')">
                            {{ operation }} &times;
                        </a>
                    </dd>
                    <dd class="filter_selected badge badge-md-light badge-info"
                        v-if="status">
                        <a role="button" class="waves-effect" @click="removeFilter('status')">
                            {{ status }} &times;
                        </a>
                    </dd>
                    <dd class="filter_selected badge badge-md-light badge-info"
                        v-if="product.value">
                        <a role="button" class="waves-effect" @click="removeFilter('product')">
                            {{ product.value }} &times;
                        </a>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <section class="filters">
                <dl class="filters_groups filter_lastest_hours" role="presentation">
                    <dt class="dt_title m-b-10" role="presentation">
                        Últimas horas
                    </dt>
                    <dd class="filters_groups_option" role="option">
                        <a role="button" class="waves-effect" @click="setFilter('timeago', '12h')">12h <small class="text-muted">(11)</small></a></dd>
                    <dd class="filters_groups_option" role="option">
                        <a role="button" class="waves-effect" @click="setFilter('timeago', '24h')">24h <small class="text-muted">(41)</small></a></dd>
                    <dd class="filters_groups_option" role="option">
                        <a role="button" class="waves-effect" @click="setFilter('timeago', '36h')">36h <small class="text-muted">(86)</small></a></dd>
                    <dd class="filters_groups_option" role="option">
                        <a role="button" class="waves-effect" @click="setFilter('timeago', '48h')">48h <small class="text-muted">(167)</small></a></dd>
                </dl>
                <dl class="filters_groups filter_optype" role="presentation">
                    <dt class="dt_title m-b-10" role="presentation">Operação</dt>
                    <dd class="filters_groups_option" role="option">
                        <a role="button" class="waves-effect" @click="setFilter('operation', 'buy')">Compra <small class="text-muted">(8)</small></a></dd>
                    <dd class="filters_groups_option" role="option">
                        <a role="button" class="waves-effect" @click="setFilter('operation', 'sell')">Venda <small class="text-muted">(3)</small></a></dd>
                </dl>
                <dl class="filters_groups filter_worklow" role="presentation">
                    <dt class="dt_title m-b-10" role="presentation">Status / Workflow</dt>
                    <dd class="filters_groups_option" role="option">
                        <a role="button" class="waves-effect" @click="setFilter('status', 'processing')">Em andamento
                            <small class="text-muted">(5)</small></a></dd>
                    <dd class="filters_groups_option" role="option">
                        <a role="button" class="waves-effect" @click="setFilter('status', 'waiting')">Aguardando cliente
                                <small class="text-muted">(3)</small></a></dd>
                    <dd class="filters_groups_option" role="option">
                        <a role="button" class="waves-effect" @click="setFilter('status', 'checking')">Em análise
                                <small class="text-muted">(1)</small></a></dd>
                    <dd class="filters_groups_option" role="option">
                        <a role="button" class="waves-effect" @click="setFilter('status', 'approved')">Aprovado
                                <small class="text-muted">(0)</small></a></dd>
                    <dd class="filters_groups_option" role="option">
                        <a role="button" class="waves-effect" @click="setFilter('status', 'sent')">Ativo Enviado
                                <small class="text-muted">(0)</small></a></dd>
                    <dd class="filters_groups_option" role="option">
                        <a role="button" class="waves-effect" @click="setFilter('status', 'cancelled')">Cancelado
                                <small class="text-muted">(1)</small></a></dd>
                </dl>
                <dl class="filters_groups filter_worklow" role="presentation">
                    <dt class="dt_title m-b-10" role="presentation">Produto</dt>
                    <dd class="filters_groups_option" role="option" v-for="p in products" :key='p.name'>
                        <a role="button" class="waves-effect" @click="setFilter('product', p)">
                        {{ p.name }} <small class="text-muted">({{ p.queried }})</small></a>
                    </dd>
                    <div class="input-group m-t-2">
                        <div class="input-group-prepend">
                            <a class="waves-effect" role="button" @click="toggleHideElement('productSearchExtended')">
                                <i class="fa fa-chevron-right text-muted"></i>
                            </a>
                        </div>
                        <input ref="productSearchExtended" type="text" id="productSearchExtended"
                                name="productSearchExtended"
                                class="form-control form-control-sm hide"
                                placeholder="Outros" />
                    </div>
                </dl>
            </section>
        </div>
    </div>
</div>

</template>

<script>

export default {
  name: 'mFilter',
  data () {
    return {
      products: [ // queried from databse...queried is based timeago if defined or lastest 50
        { name: 'Pokerstars', img: '../assets/images/media/products/p.png', queried: 10 },
        { name: 'Bet365', img: '../assets/images/media/products/b.png', queried: 9 },
        { name: 'PartyPoker', img: '../assets/images/media/products/p.png', queried: 11 },
        { name: 'Neteller', img: '../assets/images/media/products/n.png', queried: 1 },
        { name: 'AstroPay', img: '../assets/images/media/products/a.png', queried: 3 }
        // queried 5th
        /*
                    { name: 'BoraBora', img: '../assets/images/media/products/b.png', queried: 5 },
                    { name: 'PingPong', img: '../assets/images/media/products/p.png', queried: 8 },
                    { name: 'GooglePay', img: '../assets/images/media/products/g.png', queried: 9 },
                    { name: 'ApplePay', img: '../assets/images/media/products/a.png', queried: 14 },
                    { name: 'Composto Nome', img: '../assets/images/media/products/c.png', queried: 21}
                    */
      ]
    }
  },
  methods: {
    setFilter (scope, newValue) {
      // ----
      this.$store.commit('addFilter', { scope: scope, value: newValue })
    },
    /**
         * `removeFilter` removes a filter base on scope.
         */
    removeFilter (scope) {
      this.$store.commit('removeFilter', scope)
    },
    /**
         * `toggleHideElement` toggle class hide on element
         * @elem HTML selement
         */
    toggleHideElement (refElem) {
      let captured = this.$refs[refElem]
      captured.classlist.toggle('hide')
    }
  },
  computed: {
    /**
         * `timeago`get a filter base on scope timeago.
         */
    timeago () {
      return this.$store.state.transactions.filters.scopes.timeago.value
    },
    /**
         * `operation` get a filter base on scope operation.
         */
    operation () {
      return this.$store.state.transactions.filters.scopes.operation.label
    },
    /**
         * `status` get a filter base on scope status.
         */
    status () {
      return this.$store.state.transactions.filters.scopes.status.label
    },
    /**
         * `product` get a filter base on scope product.
         */
    product () {
      return this.$store.state.transactions.filters.scopes.product
    }
  }
}
</script>

<style lang="scss" scoped>
.mFilter {
    .badge-info {
        background-color: #f8f9fa;
        color: #333;
    }
    #productSearchExtended {
        width: 50%;
    }
    .badge-md-light {
        background-color: #FFF;
    }
}
.filters_groups {
    margin-bottom: 21px;
}
.filter_title {
    margin-bottom: 0.5rem;
}
.filters {
    line-height: 1.25;
}
.filters_selected {
    padding: 10px 0 10px 0;
    margin-bottom: 5px;
    .badge {
        font-size: 0.80rem;
        font-weight: 300;
    }
    .filter_selected {
        margin-right: 5px;
    }
}

@media (max-width: 576px) { // sm
    .mFilter {
        padding: 21px 20px 0 20px;
        .badge-info {
            background-color: #2962FF;
            color: #FFF;
        }
    }
}
</style>