Created
January 23, 2019 15:38
-
-
Save horacioibrahim/ddf22163e25bc7228174da968a3c36ac to your computer and use it in GitHub Desktop.
mFilter.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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 }} × | |
</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 }} × | |
</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 }} × | |
</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 }} × | |
</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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment