rattail/tailbone
2
0
Fork 0
Code Issues2 Pull requests Projects Releases Packages Wiki Activity Actions

Add basic Buefy support for App Settings page

Browse source 
also various buttons have been tweaked on some other "master view" pages
This commit is contained in:
Lance Edgar 2019-04-17 14:55:27 -05:00
parent e1ff4578e9
commit fcfc8b56bb
13 changed files with 245 additions and 52 deletions
tailbone/templates
appsettings.mako
customers
view.mako
datasync/changes
index.mako
deform
select.pt
grids
buefy.mako
master
delete.makoindex.mako
upgrades
view.mako

120
tailbone/templates/appsettings.mako
View file

@ -7,11 +7,14 @@
<%def name="extra_javascript()">
${parent.extra_javascript()}
% if not use_buefy:
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.appsettings.js') + '?ver={}'.format(tailbone.__version__))}
% endif
</%def>
<%def name="extra_styles()">
${parent.extra_styles()}
% if not use_buefy:
<style type="text/css">
div.form {
float: none;
@ -27,6 +30,7 @@
width: 50em;
}
</style>
% endif
</%def>
<div class="form">
@ -46,10 +50,17 @@
</div>
% endif
% if use_buefy:
<div id="app-settings-app">
<app-settings :groups="groups" :showing-group="showingGroup"></app-settings>
</div>
% else:
## not buefy
<div class="group-picker">
<div class="field-wrapper">
<label for="settings-group">Showing Group</label>
<div class="field">
<div class="field select">
${h.select('settings-group', current_group, group_options, **{'auto-enhance': 'true'})}
</div>
</div>
@ -88,11 +99,116 @@
</div><!-- panel-body -->
</div><! -- panel -->
% endfor
% endif
<div class="buttons">
${h.submit('save', getattr(form, 'submit_label', getattr(form, 'save_label', "Submit")))}
${h.submit('save', getattr(form, 'submit_label', getattr(form, 'save_label', "Submit")), class_='button is-primary')}
${h.link_to("Cancel", form.cancel_url, class_='cancel button{}'.format(' autodisable' if form.auto_disable_cancel else ''))}
</div>
${h.end_form()}
</div>
% if use_buefy:
<script type="text/x-template" id="app-settings-template">
<div class="app-wrapper">
<div class="field-wrapper">
<label for="settings-group">Showing Group</label>
<b-select @input="showGroup"
name="settings-group"
v-model="showingGroup">
<option value="">(All)</option>
<option v-for="group in groups"
:key="group.label"
:value="group.label">
{{ group.label }}
</option>
</b-select>
</div>
<div v-for="group in groups"
class="card"
v-show="!showingGroup || showingGroup == group.label"
style="margin-bottom: 1rem;">
<header class="card-header">
<p class="card-header-title">{{ group.label }}</p>
</header>
<div class="card-content">
<div v-for="setting in group.settings"
:class="'field-wrapper' + (setting.error ? ' with-error' : '')">
<div v-if="setting.error" class="field-error">
<span v-for="msg in setting.error_messages"
class="error-msg">
{{ msg }}
</span>
</div>
<div class="field-row">
<label :for="setting.field_name">{{ setting.label }}</label>
<div class="field">
<input v-if="setting.data_type == 'bool'"
type="checkbox"
:name="setting.field_name"
:id="setting.field_name"
v-model="setting.value"
value="true" />
<b-select v-else-if="setting.choices"
:name="setting.field_name"
:id="setting.field_name"
v-model="setting.value">
<option v-for="choice in setting.choices"
:value="choice">
{{ choice }}
</option>
</b-select>
<b-input v-else
:name="setting.field_name"
:id="setting.field_name"
v-model="setting.value" />
</div>
</div>
<span v-if="setting.helptext" class="instructions">
{{ setting.helptext }}
</span>
</div><!-- field-wrapper -->
</div><!-- card-content -->
</div><!-- card -->
</div><!-- app-wrapper -->
</script>
<script type="text/javascript">
Vue.component('app-settings', {
template: '#app-settings-template',
props: {
groups: Array,
showingGroup: String
},
methods: {
showGroup(group) {
console.log("SHOWING GROUP")
console.log(group)
}
}
})
new Vue({
el: '#app-settings-app',
data() {
return {
groups: ${json.dumps(buefy_data)|n},
showingGroup: ${json.dumps(current_group or '')|n}
}
}
})
</script>
% endif

4
tailbone/templates/customers/view.mako
View file

@ -21,7 +21,9 @@
<%def name="object_helpers()">
${parent.object_helpers()}
${view_profiles_helper(instance.people)}
% if instance.people:
${view_profiles_helper(instance.people)}
% endif
</%def>
${parent.body()}

8
tailbone/templates/datasync/changes/index.mako
View file

@ -5,16 +5,16 @@
${parent.grid_tools()}
% if request.has_perm('datasync.restart'):
${h.form(url('datasync.restart'), name='restart-datasync', class_='autodisable')}
${h.form(url('datasync.restart'), name='restart-datasync', class_='autodisable control')}
${h.csrf_token(request)}
${h.submit('submit', "Restart DataSync", data_working_label="Restarting DataSync")}
${h.submit('submit', "Restart DataSync", data_working_label="Restarting DataSync", class_='button')}
${h.end_form()}
% endif
% if allow_filemon_restart and request.has_perm('filemon.restart'):
${h.form(url('filemon.restart'), name='restart-filemon', class_='autodisable')}
${h.form(url('filemon.restart'), name='restart-filemon', class_='autodisable control')}
${h.csrf_token(request)}
${h.submit('submit', "Restart FileMon", data_working_label="Restarting FileMon")}
${h.submit('submit', "Restart FileMon", data_working_label="Restarting FileMon", class_='button')}
${h.end_form()}
% endif

2
tailbone/templates/deform/select.pt
View file

@ -11,6 +11,7 @@
<input type="hidden" name="__start__" value="${name}:sequence"
tal:condition="multiple" />
<div class="select">
<select tal:attributes="
name name;
id oid;
@ -36,6 +37,7 @@
value item[0]">${item[1]}</option>
</tal:loop>
</select>
</div>
<input type="hidden" name="__end__" value="${name}:sequence"
tal:condition="multiple" />
<script tal:condition="not multiple" type="text/javascript">

10
tailbone/templates/grids/buefy.mako
View file

@ -67,7 +67,7 @@
<div class="grid-tools-wrapper">
% if tools:
<div class="grid-tools">
<div class="grid-tools field is-grouped">
## TODO: stop using |n filter
${tools|n}
</div>
@ -299,6 +299,14 @@
// apply current filters as normal, but add special directive
const params = ['save-current-filters-as-defaults=true']
this.applyFilters(params)
},
deleteResults(event) {
// submit form if user confirms
if (confirm("You are about to delete " + this.total + " ${grid.model_title_plural}.\n\nAre you sure?")) {
event.target.form.submit()
}
}
}

2
tailbone/templates/master/delete.mako
View file

@ -25,7 +25,7 @@
${h.csrf_token(request)}
<div class="buttons">
<a class="button" href="${form.cancel_url}">Whoops, nevermind...</a>
${h.submit('submit', "Yes, please DELETE this data forever!")}
${h.submit('submit', "Yes, please DELETE this data forever!", class_='button is-primary')}
</div>
${h.end_form()}
</%def>

33
tailbone/templates/master/index.mako
View file

@ -45,7 +45,7 @@
% endif
% if master.bulk_deletable and request.has_perm('{}.bulk_delete'.format(permission_prefix)):
% if not use_buefy and master.bulk_deletable and request.has_perm('{}.bulk_delete'.format(permission_prefix)):
$('form[name="bulk-delete"] button').click(function() {
var count = $('.grid-wrapper').gridwrapper('results_count', true);
@ -134,42 +134,53 @@
## merge 2 objects
% if master.mergeable and request.has_perm('{}.merge'.format(permission_prefix)):
${h.form(url('{}.merge'.format(route_prefix)), name='merge-things')}
${h.form(url('{}.merge'.format(route_prefix)), name='merge-things', class_='control')}
${h.csrf_token(request)}
${h.hidden('uuids')}
<button type="submit">Merge 2 ${model_title_plural}</button>
<button type="submit" class="button">Merge 2 ${model_title_plural}</button>
${h.end_form()}
% endif
## enable / disable selected objects
% if master.supports_set_enabled_toggle and request.has_perm('{}.enable_disable_set'.format(permission_prefix)):
${h.form(url('{}.enable_set'.format(route_prefix)), name='enable-set')}
${h.form(url('{}.enable_set'.format(route_prefix)), name='enable-set', class_='control')}
${h.csrf_token(request)}
${h.hidden('uuids')}
<button type="button">Enable Selected</button>
<button type="button" class="button">Enable Selected</button>
${h.end_form()}
${h.form(url('{}.disable_set'.format(route_prefix)), name='disable-set')}
${h.form(url('{}.disable_set'.format(route_prefix)), name='disable-set', class_='control')}
${h.csrf_token(request)}
${h.hidden('uuids')}
<button type="button">Disable Selected</button>
<button type="button" class="button">Disable Selected</button>
${h.end_form()}
% endif
## delete selected objects
% if master.set_deletable and request.has_perm('{}.delete_set'.format(permission_prefix)):
${h.form(url('{}.delete_set'.format(route_prefix)), name='delete-set')}
${h.form(url('{}.delete_set'.format(route_prefix)), name='delete-set', class_='control')}
${h.csrf_token(request)}
${h.hidden('uuids')}
<button type="button">Delete Selected</button>
<button type="button" class="button">Delete Selected</button>
${h.end_form()}
% endif
## delete search results
% if master.bulk_deletable and request.has_perm('{}.bulk_delete'.format(permission_prefix)):
${h.form(url('{}.bulk_delete'.format(route_prefix)), name='bulk-delete')}
${h.form(url('{}.bulk_delete'.format(route_prefix)), name='bulk-delete', class_='control')}
${h.csrf_token(request)}
<button type="button">Delete Results</button>
% if use_buefy:
<b-button type="is-danger"
:disabled="! total"
:title="total ? null : 'There are no results to delete'"
@click="deleteResults"
icon-pack="fas"
icon-left="trash">
Delete Results
</b-button>
% else:
<button type="button">Delete Results</button>
% endif
${h.end_form()}
% endif

6
tailbone/templates/upgrades/view.mako
View file

@ -43,12 +43,12 @@ ${parent.body()}
% if instance.enabled and not instance.executing:
${h.form(url('{}.execute'.format(route_prefix), uuid=instance.uuid), class_='autodisable')}
${h.csrf_token(request)}
${h.submit('execute', "Execute this upgrade")}
${h.submit('execute', "Execute this upgrade", class_='button is-primary')}
${h.end_form()}
% elif instance.enabled:
<button type="button" disabled="disabled" title="This upgrade is currently executing">Execute this upgrade</button>
<button type="button" class="button is-primary" disabled="disabled" title="This upgrade is currently executing">Execute this upgrade</button>
% else:
<button type="button" disabled="disabled" title="This upgrade is not enabled">Execute this upgrade</button>
<button type="button" class="button is-primary" disabled="disabled" title="This upgrade is not enabled">Execute this upgrade</button>
% endif
</div>
% endif