Add "most of" Buefy support for grid filters

still a couple of details to wrap up yet, but this is most of it!
This commit is contained in:
Lance Edgar 2019-04-15 18:36:14 -05:00
parent 23c38e33d4
commit a0cd1f4cd0
8 changed files with 313 additions and 96 deletions

View file

@ -268,8 +268,8 @@
## (needed for e.g. this.$http.get() calls, used by grid at least)
${h.javascript_link('https://cdn.jsdelivr.net/npm/vue-resource@1.5.1')}
## Buefy 0.7.3
${h.javascript_link('https://unpkg.com/buefy@0.7.3/dist/buefy.min.js')}
## Buefy 0.7.4
${h.javascript_link('https://unpkg.com/buefy@0.7.4/dist/buefy.min.js')}
## FontAwesome 5.3.1
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
@ -331,6 +331,7 @@
${h.stylesheet_link(request.static_url('tailbone:static/css/grids.css') + '?ver={}'.format(tailbone.__version__))}
${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/grids.rowstatus.css') + '?ver={}'.format(tailbone.__version__))}
## ${h.stylesheet_link(request.static_url('tailbone:static/css/filters.css') + '?ver={}'.format(tailbone.__version__))}
${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/filters.css') + '?ver={}'.format(tailbone.__version__))}
${h.stylesheet_link(request.static_url('tailbone:static/themes/bobcat/css/forms.css') + '?ver={}'.format(tailbone.__version__))}
${h.stylesheet_link(request.static_url('tailbone:static/css/diffs.css') + '?ver={}'.format(tailbone.__version__))}
</%def>

View file

@ -1,76 +1,57 @@
## -*- coding: utf-8; -*-
<div class="newfilters">
${h.form(form.action_url, method='get')}
${h.hidden('reset-to-default-filters', value='false')}
${h.hidden('save-current-filters-as-defaults', value='false')}
<form action="${form.action_url}" method="GET" v-on:submit.prevent="applyFilters()">
<fieldset>
<legend>Filters</legend>
% for filtr in form.iter_filters():
<div class="filter" id="filter-${filtr.key}" data-key="${filtr.key}"${' style="display: none;"' if not filtr.active else ''|n}>
${h.checkbox('{}-active'.format(filtr.key), class_='active', id='filter-active-{}'.format(filtr.key), checked=filtr.active)}
<label for="filter-active-${filtr.key}">${filtr.label}</label>
<div class="inputs">
${form.filter_verb(filtr)}
${form.filter_value(filtr)}
</div>
</div>
% endfor
</fieldset>
<grid-filter v-for="key in filtersSequence"
:key="key"
:filter="filters[key]"
ref="gridFilters">
</grid-filter>
<div class="level">
<div class="level-left">
<div class="level-item">
## <button type="submit" class="button is-primary" id="apply-filters">Apply Filters</button>
<a class="button is-primary">
<span class="icon is-small">
<i class="fas fa-check"></i>
</span>
<span>Apply Filters</span>
</a>
</div>
<div class="level-item">
<div class="select">
<select id="add-filter">
<option value="">Add Filter</option>
% for filtr in form.iter_filters():
<option value="${filtr.key}"${' disabled="disabled"' if filtr.active else ''|n}>${filtr.label}</option>
% endfor
</select>
</div>
</div>
<div class="level-item">
## <button type="button" class="button" id="default-filters">Default View</button>
<a class="button">
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Default View</span>
</a>
</div>
<div class="level-item">
## <button type="button" class="button" id="clear-filters">No Filters</button>
<a class="button">
<span class="icon is-small">
<i class="fas fa-trash"></i>
</span>
<span>No Filters</span>
</a>
</div>
% if allow_save_defaults and request.user:
<div class="level-item">
## <button type="button" class="button" id="save-defaults">Save Defaults</button>
<a class="button">
<span class="icon is-small">
<i class="fas fa-save"></i>
</span>
<span>Save Defaults</span>
</a>
</div>
% endif
</div>
</div>
<b-field grouped>
${h.end_form()}
</div><!-- newfilters -->
<b-button type="is-primary"
native-type="submit"
icon-pack="fas"
icon-left="check"
class="control">
Apply Filters
</b-button>
<b-select @input="addFilter"
placeholder="Add Filter"
v-model="selectedFilter">
<option v-for="key in filtersSequence"
:key="key"
:value="key"
:disabled="filters[key].visible">
{{ filters[key].label }}
</option>
</b-select>
<b-button @click="resetView()"
icon-pack="fas"
icon-left="home"
class="control">
Default View
</b-button>
<b-button @click="clearFilters()"
icon-pack="fas"
icon-left="trash"
class="control">
No Filters
</b-button>
% if allow_save_defaults and request.user:
<b-button @click="saveDefaults()"
icon-pack="fas"
icon-left="save"
class="control">
Save Defaults
</b-button>
% endif
</b-field>
</form>