rattail/tailbone
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fix Buefy "row grids" when viewing parent; add basic file upload support

Browse source
This commit is contained in:
Lance Edgar 2019-05-23 16:29:29 -05:00
parent 5998941741
commit d7c8b80da5
8 changed files with 125 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
tailbone/static/js/tailbone.buefy.form.js
View file

@ -3,5 +3,3 @@ let TailboneForm = {
template: '#tailbone-form-template',
methods: {}
}
let TailboneFormData = {}

6
tailbone/static/js/tailbone.buefy.oncebutton.js
View file

@ -5,6 +5,9 @@ const OnceButton = {
'<b-button',
':type="type"',
':native-type="nativeType"',
':tag="tag"',
':href="href"',
':title="title"',
':disabled="disabled"',
'@click="clicked"',
'>',
@ -15,7 +18,10 @@ const OnceButton = {
props: {
type: String,
nativeType: String,
tag: String,
href: String,
text: String,
title: String,
working: String,
workingText: String,
disabled: Boolean

6
tailbone/subscribers.py
View file

@ -2,7 +2,7 @@
################################################################################
#
# Rattail -- Retail Software Framework
# Copyright © 2010-2018 Lance Edgar
# Copyright © 2010-2019 Lance Edgar
#
# This file is part of Rattail.
#
@ -34,6 +34,8 @@ import rattail
from rattail.db import model
from rattail.db.auth import cache_permissions
import colander
import deform
from pyramid import threadlocal
from webhelpers2.html import tags
@ -97,6 +99,8 @@ def before_render(event):
renderer_globals['six'] = six
renderer_globals['json'] = json
renderer_globals['datetime'] = datetime
renderer_globals['colander'] = colander
renderer_globals['deform'] = deform
# theme - we only want do this for classic web app, *not* API
# TODO: so, clearly we need a better way to distinguish the two

42
tailbone/templates/batch/view.mako
View file

@ -63,10 +63,10 @@
% if master.batch_refreshable(batch) and request.has_perm('{}.refresh'.format(permission_prefix)):
% if use_buefy:
## TODO: this should surely use a POST request?
<a class="button"
href="${url('{}.refresh'.format(route_prefix), uuid=batch.uuid)}">
Refresh Data
</a>
<once-button tag="a"
href="${url('{}.refresh'.format(route_prefix), uuid=batch.uuid)}"
text="Refresh Data">
</once-button>
% else:
<button type="button" class="button" id="refresh-data">Refresh Data</button>
% endif
@ -74,17 +74,16 @@
</%def>
<%def name="execute_submit_button()">
<button type="submit"
class="button is-primary"
<once-button type="is-primary"
native-type="submit"
% if not execute_enabled:
disabled="disabled"
disabled
% endif
% if why_not_execute:
title="${why_not_execute}"
% endif
>
${execute_title}
</button>
text="${execute_title}">
</once-button>
</%def>
<%def name="execute_button()">
@ -145,30 +144,21 @@
% endif
</%def>
<div style="display: flex; justify-content: space-between;">
<div class="form-wrapper">
<%def name="render_form()">
## TODO: should use self.render_form_buttons()
## ${form.render(form_id='batch-form', buttons=capture(self.render_form_buttons))|n}
${form.render(form_id='batch-form', buttons=capture(buttons))|n}
</div><!-- form-wrapper -->
</%def>
<div style="display: flex; align-items: flex-start;">
<div class="object-helpers">
${self.object_helpers()}
</div>
<ul id="context-menu">
${self.context_menu_items()}
</ul>
</div>
</div>
${self.render_form_complete()}
% if use_buefy:
<br /><br />
## TODO: stop using |n filter
${rows_grid.render_buefy(allow_save_defaults=False, tools=rows_grid_tools)|n}
${self.make_tailbone_form_app()}
${self.make_tailbone_grid_app()}
% else:
## no buefy, so do the traditional thing
${rows_grid|n}

43
tailbone/templates/deform/file_upload.pt Normal file
View file

@ -0,0 +1,43 @@
<!-- -*- mode: html; -*- -->
<tal:block tal:define="oid oid|field.oid;
css_class css_class|field.widget.css_class;
style style|field.widget.style;
field_name field_name|field.name;
use_buefy use_buefy|0;">
<div tal:condition="not use_buefy" tal:omit-tag="">
${field.start_mapping()}
<input type="file" name="upload" id="${oid}"
tal:attributes="style style;
accept accept|field.widget.accept;
data-filename cstruct.get('filename');
attributes|field.widget.attributes|{};"/>
<input tal:define="uid cstruct.get('uid')"
tal:condition="uid"
type="hidden" name="uid" value="${uid}"/>
${field.end_mapping()}
<script type="text/javascript">
deform.addCallback('${oid}', function (oid) {
$('#' + oid).upload();
});
</script>
</div>
<div tal:condition="use_buefy"
tal:define="vmodel vmodel|'field_model_' + field_name;"
tal:omit-tag="">
${field.start_mapping()}
<b-upload name="upload"
v-model="${vmodel}">
<a class="button is-primary">
<b-icon pack="fas" icon="upload"></b-icon>
<span>Click to upload</span>
</a>
</b-upload>
<span class="file-name" v-if="${vmodel}">
{{ ${vmodel}.name }}
</span>
${field.end_mapping()}
</div>
</tal:block>

2
tailbone/templates/form.mako
View file

@ -18,7 +18,7 @@
${self.render_form()}
</div>
<div style="display: flex;">
<div style="display: flex; align-items: flex-start;">
<div class="object-helpers">
${self.object_helpers()}
</div>

26
tailbone/templates/forms/deform_buefy.mako
View file

@ -20,6 +20,10 @@
<b-field horizontal
label="${form.get_label(field.name)}"
## TODO: is this class="file" really needed?
% if isinstance(field.schema.typ, deform.FileData):
class="file"
% endif
% if field.error:
type="is-danger"
:message='${form.messages_json(field.error.messages())|n}'
@ -58,6 +62,28 @@
</div>
</script>
<script type="text/javascript">
let TailboneFormData = {
## TODO: ugh, this seems pretty hacky. need to declare some data models
## for various field components to bind to...
% if not form.readonly:
% for field in form.fields:
% if field in dform:
<% field = dform[field] %>
% if isinstance(field.schema.typ, colander.Date):
field_model_${field.name}: null,
% elif isinstance(field.schema.typ, deform.FileData):
field_model_${field.name}: null,
% endif
% endif
% endfor
% endif
}
</script>
<div id="tailbone-form-app">
<tailbone-form></tailbone-form>

24
tailbone/templates/master/view.mako
View file

@ -7,7 +7,7 @@
${parent.extra_javascript()}
% if master.has_rows:
% if use_buefy:
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.gridfilters.js') + '?ver={}'.format(tailbone.__version__))}
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.grid.js') + '?ver={}'.format(tailbone.__version__))}
% else:
<script type="text/javascript">
$(function() {
@ -69,6 +69,25 @@
${rows_grid_tools}
</%def>
<%def name="modify_tailbone_grid()">
## NOTE: if you override this, must use <script> tags
</%def>
<%def name="make_tailbone_grid_app()">
${self.modify_tailbone_grid()}
<script type="text/javascript">
TailboneGrid.data = function() { return TailboneGridData }
Vue.component('tailbone-grid', TailboneGrid)
new Vue({
el: '#tailbone-grid-app'
});
</script>
</%def>
${self.render_form_complete()}
@ -77,12 +96,13 @@ ${self.render_form_complete()}
<br /><br />
## TODO: stop using |n filter
${rows_grid.render_buefy(allow_save_defaults=False, tools=capture(self.render_row_grid_tools))|n}
${self.make_tailbone_grid_app()}
% else:
## no buefy, so do the traditional thing
${rows_grid|n}
% endif
% endif
% if form.use_buefy:
% if use_buefy:
${self.make_tailbone_form_app()}
% endif