Tax rule editor: Allow to reorder lines

This commit is contained in:
Raphael Michel
2020-12-11 16:17:52 +01:00
parent 246d150511
commit 903a7f122d
4 changed files with 75 additions and 45 deletions

View File

@@ -1130,7 +1130,7 @@ class TaxRuleLineForm(forms.Form):
TaxRuleLineFormSet = formset_factory(
TaxRuleLineForm,
can_order=False, can_delete=True, extra=0
can_order=True, can_delete=True, extra=0
)

View File

@@ -50,66 +50,78 @@
{% trans "All of these rules will only apply if an invoice address is set." %}
</div>
<div class="formset" data-formset data-formset-prefix="{{ formset.prefix }}">
<div class="formset tax-rules-formset" data-formset data-formset-prefix="{{ formset.prefix }}">
{{ formset.management_form }}
{% bootstrap_formset_errors formset %}
<div data-formset-body>
{% for form in formset %}
{% bootstrap_form_errors form %}
<div class="row" data-formset-form>
<div class="sr-only">
{{ form.id }}
{% bootstrap_field form.DELETE form_group_class="" layout="inline" %}
</div>
<div class="col-sm-3">
{% bootstrap_field form.country layout='inline' form_group_class="" %}
</div>
<div class="col-sm-3">
{% bootstrap_field form.address_type layout='inline' form_group_class="" %}
</div>
<div class="col-sm-3">
{% bootstrap_field form.action layout='inline' form_group_class="" %}
</div>
<div class="col-sm-2">
{% bootstrap_field form.rate layout='inline' form_group_class="" %}
</div>
<div class="col-sm-1 text-right flip">
<button type="button" class="btn btn-block btn-danger" data-formset-delete-button>
<i class="fa fa-trash"></i></button>
</div>
</div>
{% endfor %}
</div>
<script type="form-template" data-formset-empty-form>
{% escapescript %}
<div class="row" data-formset-form>
<div class="row tax-rule-line" data-formset-form>
<div class="sr-only">
{{ form.id }}
{{ formset.empty_form.id }}
{% bootstrap_field formset.empty_form.DELETE form_group_class="" layout="inline" %}
{% bootstrap_field formset.empty_form.ORDER form_group_class="" layout="inline" %}
</div>
<div class="col-sm-3">
<div class="col-sm-6 col-md-3 col-lg-4">
{% bootstrap_field formset.empty_form.country layout='inline' form_group_class="" %}
</div>
<div class="col-sm-3">
<div class="col-sm-6 col-md-3 col-lg-3">
{% bootstrap_field formset.empty_form.address_type layout='inline' form_group_class="" %}
</div>
<div class="col-sm-3">
<div class="col-sm-6 col-md-3 col-lg-3">
{% bootstrap_field formset.empty_form.action layout='inline' form_group_class="" %}
</div>
<div class="col-sm-2">
{% bootstrap_field formset.empty_form.rate layout='inline' form_group_class="" %}
</div>
<div class="col-sm-1 text-right flip">
<button type="button" class="btn btn-block btn-danger" data-formset-delete-button>
<div class="col-sm-6 col-md-3 col-lg-2 text-right flip">
<button type="button" class="btn btn-default" data-formset-move-up-button>
<i class="fa fa-arrow-up"></i></button>
<button type="button" class="btn btn-default" data-formset-move-down-button>
<i class="fa fa-arrow-down"></i></button>
<button type="button" class="btn btn-danger" data-formset-delete-button>
<i class="fa fa-trash"></i></button>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 col-md-offset-3 col-lg-offset-4">
{% bootstrap_field formset.empty_form.rate layout='inline' form_group_class="" %}
</div>
</div>
{% endescapescript %}
</script>
<p>
<button type="button" class="btn btn-default" data-formset-add>
<i class="fa fa-plus"></i> {% trans "Add a new rule" %}</button>
</p>
<div data-formset-body class="tax-rule-lines">
{% for form in formset %}
{% bootstrap_form_errors form %}
<div class="row tax-rule-line" data-formset-form>
<div class="sr-only">
{{ form.id }}
{% bootstrap_field form.DELETE form_group_class="" layout="inline" %}
{% bootstrap_field form.ORDER form_group_class="" layout="inline" %}
</div>
<div class="col-sm-6 col-md-3 col-lg-4">
{% bootstrap_field form.country layout='inline' form_group_class="" %}
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
{% bootstrap_field form.address_type layout='inline' form_group_class="" %}
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
{% bootstrap_field form.action layout='inline' form_group_class="" %}
</div>
<div class="col-sm-6 col-md-3 col-lg-2 text-right flip">
<button type="button" class="btn btn-default" data-formset-move-up-button>
<i class="fa fa-arrow-up"></i></button>
<button type="button" class="btn btn-default" data-formset-move-down-button>
<i class="fa fa-arrow-down"></i></button>
<button type="button" class="btn btn-danger" data-formset-delete-button>
<i class="fa fa-trash"></i></button>
</div>
<div class="col-sm-6 col-md-3 col-lg-3 col-md-offset-3 col-lg-offset-4">
{% bootstrap_field form.rate layout='inline' form_group_class="" %}
</div>
</div>
{% endfor %}
</div>
<div class="row tax-rule-line" data-formset-form>
<div class="col-sm-12">
<button type="button" class="btn btn-default" data-formset-add>
<i class="fa fa-plus"></i> {% trans "Add a new rule" %}</button>
</div>
</div>
</div>
</fieldset>
</div>

View File

@@ -1104,7 +1104,7 @@ class TaxCreate(EventSettingsViewMixin, EventPermissionRequiredMixin, CreateView
def form_valid(self, form):
form.instance.event = self.request.event
form.instance.custom_rules = json.dumps([
f.cleaned_data for f in self.formset if f not in self.formset.deleted_forms
f.cleaned_data for f in self.formset.ordered_forms if f not in self.formset.deleted_forms
], cls=DjangoJSONEncoder)
messages.success(self.request, _('The new tax rule has been created.'))
ret = super().form_valid(form)
@@ -1155,7 +1155,7 @@ class TaxUpdate(EventSettingsViewMixin, EventPermissionRequiredMixin, UpdateView
def form_valid(self, form):
messages.success(self.request, _('Your changes have been saved.'))
form.instance.custom_rules = json.dumps([
f.cleaned_data for f in self.formset if f not in self.formset.deleted_forms
f.cleaned_data for f in self.formset.ordered_forms if f not in self.formset.deleted_forms
], cls=DjangoJSONEncoder)
if form.has_changed():
self.object.log_action(

View File

@@ -569,3 +569,21 @@ table td > .checkbox input[type="checkbox"] {
border-left: 4px solid $brand-success;
}
}
.tax-rules-formset {
margin-left: -15px;
margin-right: -15px;
}
.tax-rule-line {
padding-bottom: 5px;
padding-top: 5px;
border-bottom: 1px solid $input-border;
margin: 0;
& > div {
padding-top: 5px;
padding-bottom: 5px;
}
}
.tax-rule-lines .tax-rule-line {
border-bottom: 1px solid $input-border;
}