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:
parent
23c38e33d4
commit
a0cd1f4cd0
8 changed files with 313 additions and 96 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue