Added the pagination navigation bar and the action buttons to the cash account in the accounting application.
This commit is contained in:
26
mia_core/static/mia_core/css/period-chooser.css
Normal file
26
mia_core/static/mia_core/css/period-chooser.css
Normal file
@ -0,0 +1,26 @@
|
||||
/* The Mia Website
|
||||
* period-chooser.css: The style sheet for the period chooser
|
||||
*/
|
||||
|
||||
/* Copyright (c) 2019-2020 imacat.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* Author: imacat@mail.imacat.idv.tw (imacat)
|
||||
* First written: 2019/9/12
|
||||
*/
|
||||
|
||||
.period-shortcuts {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
109
mia_core/static/mia_core/js/period-chooser.js
Normal file
109
mia_core/static/mia_core/js/period-chooser.js
Normal file
@ -0,0 +1,109 @@
|
||||
/* The Mia Website
|
||||
* period-chooser.js: The JavaScript for the period chooser
|
||||
*/
|
||||
|
||||
/* Copyright (c) 2019-2020 imacat.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* Author: imacat@mail.imacat.idv.tw (imacat)
|
||||
* First written: 2019/9/14
|
||||
*/
|
||||
|
||||
// Initializes the period chooser JavaScript.
|
||||
$(function () {
|
||||
$(".period-tab")
|
||||
.on("click", function () {
|
||||
switchPeriodTab(this);
|
||||
});
|
||||
$("#button-period-day")
|
||||
.on("click", function () {
|
||||
window.location = $("#period-url").val()
|
||||
.replace("period-spec", $("#day-picker").val());
|
||||
});
|
||||
$("#period-start")
|
||||
.on("change", function () {
|
||||
$("#period-end")[0].min = this.value;
|
||||
});
|
||||
$("#period-end")
|
||||
.on("change", function () {
|
||||
$("#period-start")[0].max = this.value;
|
||||
});
|
||||
$("#button-period-custom")
|
||||
.on("click", function () {
|
||||
window.location = $("#period-url").val().replace(
|
||||
"period-spec",
|
||||
$("#period-start").val() + "-" + $("#period-end").val());
|
||||
});
|
||||
|
||||
const monthPickerParams = JSON.parse($("#period-month-picker-params").val());
|
||||
const monthPicker = $("#month-picker");
|
||||
monthPicker.datetimepicker({
|
||||
locale: monthPickerParams.locale,
|
||||
inline: true,
|
||||
format: "YYYY-MM",
|
||||
minDate: monthPickerParams.minDate,
|
||||
maxDate: monthPickerParams.maxDate,
|
||||
useCurrent: false,
|
||||
defaultDate: monthPickerParams.defaultDate,
|
||||
});
|
||||
monthPicker.on("change.datetimepicker", function (e) {
|
||||
monthPickerChanged(e.date);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Turns to the page to view the records of a month when the month is
|
||||
* selected.
|
||||
*
|
||||
* @param {moment} newDate the date with the selected new month
|
||||
* @private
|
||||
*/
|
||||
function monthPickerChanged(newDate) {
|
||||
const year = newDate.year();
|
||||
const month = newDate.month() + 1;
|
||||
let periodSpec;
|
||||
if (month < 10) {
|
||||
periodSpec = year + "-0" + month;
|
||||
} else {
|
||||
periodSpec = year + "-" + month;
|
||||
}
|
||||
window.location = $("#period-url").val()
|
||||
.replace("period-spec", periodSpec);
|
||||
}
|
||||
|
||||
/**
|
||||
* Switch the period chooser to tab.
|
||||
*
|
||||
* @param {HTMLElement} tab the navigation tab corresponding to a type
|
||||
* of period
|
||||
* @private
|
||||
*/
|
||||
function switchPeriodTab(tab) {
|
||||
const tabName = tab.id.substr("period-tab-".length);
|
||||
$(".period-content").each(function () {
|
||||
if (this.id === "period-content-" + tabName) {
|
||||
this.classList.remove("d-none");
|
||||
} else {
|
||||
this.classList.add("d-none");
|
||||
}
|
||||
});
|
||||
$(".period-tab").each(function () {
|
||||
if (this.id === tab.id) {
|
||||
this.classList.add("active");
|
||||
} else {
|
||||
this.classList.remove("active");
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{% comment %}
|
||||
The Mia Website
|
||||
base.html: The side-wide layout template
|
||||
The core application of the Mia project
|
||||
pagination.html: The side-wide layout template
|
||||
|
||||
Copyright (c) 2020 imacat.
|
||||
|
||||
@ -45,4 +45,4 @@ First written: 2020/7/1
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
131
mia_core/templates/mia_core/include/period-chooser.html
Normal file
131
mia_core/templates/mia_core/include/period-chooser.html
Normal file
@ -0,0 +1,131 @@
|
||||
{% comment %}
|
||||
The core application of the Mia project
|
||||
period-chooser.html: The side-wide layout template
|
||||
|
||||
Copyright (c) 2020 imacat.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
||||
Author: imacat@mail.imacat.idv.tw (imacat)
|
||||
First written: 2020/7/10
|
||||
{% endcomment %}
|
||||
{% load i18n %}
|
||||
|
||||
<!-- the period chooser dialog -->
|
||||
<!-- The Modal -->
|
||||
<input id="period-url" type="hidden" value="{% url_period "period-spec" %}" />
|
||||
<input id="period-month-picker-params" type="hidden" value="{{ period.month_picker_params }}" />
|
||||
<div class="modal" id="period-modal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
|
||||
<!-- Modal Header -->
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">
|
||||
<i class="far fa-calendar-alt"></i>
|
||||
{% trans "Choosing Your Period" context "Period|" as text %}
|
||||
{{ text|force_escape }}
|
||||
</h4>
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal body -->
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<span id="period-tab-month" class="period-tab nav-link active">{% trans "Month" context "Period|" as text %}{{ text|force_escape }}</span>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<span id="period-tab-year" class="period-tab nav-link">{% trans "Year" context "Period|" as text %}{{ text|force_escape }}</span>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<span id="period-tab-day" class="period-tab nav-link">{% trans "Day" context "Period|" as text %}{{ text|force_escape }}</span>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<span id="period-tab-custom" class="period-tab nav-link">{% trans "Custom" context "Period|" as text %}{{ text|force_escape }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="period-content-month" class="period-content modal-body">
|
||||
<div class="period-shortcuts">
|
||||
{% if period.this_month is not None %}
|
||||
<a class="btn btn-primary" role="button" href="{% url_period period.this_month %}">{% trans "This Month" context "Period|" as text %}{{ text|force_escape }}</a>
|
||||
{% endif %}
|
||||
{% if period.last_month is not None %}
|
||||
<a class="btn btn-primary" role="button" href="{% url_period period.last_month %}">{% trans "Last Month" context "Period|" as text %}{{ text|force_escape }}</a>
|
||||
{% endif %}
|
||||
{% if period.since_last_month is not None %}
|
||||
<a class="btn btn-primary" role="button" href="{% url_period period.since_last_month %}">{% trans "Last Month" context "Period|" as text %}{{ text|force_escape }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if period.has_months_to_choose %}
|
||||
<div id="month-picker" class="col-sm-7"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="period-content-year" class="period-content modal-body d-none">
|
||||
<div class="period-shortcuts">
|
||||
{% if period.this_year is not None %}
|
||||
<a class="btn btn-primary" role="button" href="{% url_period period.this_year %}">{% trans "This Year" context "Period|" as text %}{{ text|force_escape }}</a>
|
||||
{% endif %}
|
||||
{% if period.last_year is not None %}
|
||||
<a class="btn btn-primary" role="button" href="{% url_period period.last_year %}">{% trans "Last Year" context "Period|" as text %}{{ text|force_escape }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if period.has_years_to_choose %}
|
||||
<ul class="nav nav-pills">
|
||||
{% for year in period.years_to_choose %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if period.spec == year|stringformat:"i" %} active {% endif %}" href="{% url_period year|stringformat:"i" %}">{{ year }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="period-content-day" class="period-content modal-body d-none">
|
||||
<div class="period-shortcuts">
|
||||
{% if period.today is not None %}
|
||||
<a class="btn btn-primary" role="button" href="{% url_period period.today %}">{% trans "Today" context "Period|" as text %}{{ text|force_escape }}</a>
|
||||
{% endif %}
|
||||
{% if period.yesterday is not None %}
|
||||
<a class="btn btn-primary" role="button" href="{% url_period period.yesterday %}">{% trans "Yesterday" context "Period|" as text %}{{ text|force_escape }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if period.has_days_to_choose %}
|
||||
<div>
|
||||
<label for="day-picker">{% trans "Date:" context "Period|" as text %}{{ text|force_escape }}</label>
|
||||
<input id="day-picker" type="date" value="{{ period.chosen_day }}" min="{{ period.data_start }}" max="{{ period.data_end }}" required="required" />
|
||||
</div>
|
||||
<div>
|
||||
<button id="button-period-day" class="btn btn-primary" type="submit">{{ _("Confirm") }}</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div id="period-content-custom" class="period-content modal-body d-none">
|
||||
<div class="period-shortcuts">
|
||||
<a class="btn btn-primary" role="button" href="{% url_period "-" %}">{% trans "All" context "Period|" as text %}{{ text|force_escape }}</a>
|
||||
</div>
|
||||
{% if period.has_days_to_choose %}
|
||||
<div>
|
||||
<label for="period-start">{% trans "From:" context "Period|" as text %}{{ text|force_escape }}</label>
|
||||
<input id="period-start" type="date" value="{{ period.chosen_start }}" min="{{ period.data_start }}" max="{{ period.chosen_end }}" required="required" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="period-end">{% trans "To:" context "Period|" as text %}{{ text|force_escape }}</label>
|
||||
<input id="period-end" type="date" value="{{ period.chosen_end }}" min="{{ period.chosen_start }}" max="{{ period.data_end }}" required="required" />
|
||||
</div>
|
||||
<div>
|
||||
<button id="button-period-custom" class="btn btn-primary" type="submit">{{ _("Confirm") }}</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -20,6 +20,7 @@
|
||||
"""
|
||||
|
||||
from django import template
|
||||
from django.urls import reverse
|
||||
|
||||
from mia_core.utils import UrlBuilder
|
||||
|
||||
@ -72,3 +73,13 @@ def url_query(url, **kwargs):
|
||||
if kwargs[key] is not None:
|
||||
builder.set_param(key, kwargs[key])
|
||||
return str(builder)
|
||||
|
||||
|
||||
@register.simple_tag(takes_context=True)
|
||||
def url_period(context, period_spec):
|
||||
request = context["request"]
|
||||
viewname = "%s:%s" % (
|
||||
request.resolver_match.app_name,
|
||||
request.resolver_match.url_name)
|
||||
subject_code = request.resolver_match.kwargs["subject_code"]
|
||||
return reverse(viewname, args=[subject_code, period_spec])
|
||||
|
||||
Reference in New Issue
Block a user