imacat/mia-accounting
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 41 Wiki Activity

Prepend all the HTML ID and class names with "accounting-" to avoid name conflict.

Browse Source
This commit is contained in:
依瑪貓
2023-02-07 17:57:26 +08:00
parent b1c7bc61c4
commit 1d61fa93d3
13 changed files with 108 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/accounting/static/css/style.css
View File

@ -21,65 +21,50 @@
* First written: 2023/2/1
*/
.clickable {
.accounting-clickable {
cursor: pointer;
}
.btn-group .btn .search-input {
.btn-group .btn .accounting-search-input {
min-height: calc(1em + .5rem + 2px);
padding: 0 0.5rem;
}
.btn-group .btn .search-label button {
.btn-group .btn .accounting-search-label button {
border: none;
background-color: transparent;
color: inherit;
padding-right: 0;
}
/** The account management */
.account {
/** The card layout */
.accounting-card {
padding: 2em 1.5em;
margin: 1em;
background-color: #E9ECEF;
border-radius: 0.3em;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.account .account-title {
.accounting-card-title {
font-size: 1.8rem;
font-weight: bolder;
}
.account .account-code {
.accounting-card-code {
font-size: 1.4rem;
color: #373b3e;
}
.list-base-selector {
/** The option selector */
.accounting-selector-list {
height: 20rem;
overflow-y: scroll;
}
/** The currency management. */
.currency {
padding: 2em 1.5em;
margin: 1em;
background-color: #E9ECEF;
border-radius: 0.3em;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.currency .currency-name {
font-size: 1.8rem;
font-weight: bolder;
}
.currency .currency-code {
font-size: 1.4rem;
color: #373b3e;
}
/* The Material Design text field (floating form control in Bootstrap) */
.material-text-field {
.accounting-material-text-field {
position: relative;
min-height: calc(3.5rem + 2px);
padding-top: 1.625rem;
}
.material-text-field > .form-label {
.accounting-material-text-field > .form-label {
position: absolute;
top: 0;
left: 0;
@ -88,27 +73,27 @@
transform-origin: 0 0;
transition: opacity .1s ease-in-out,transform .1s ease-in-out;
}
.material-text-field.not-empty > .form-label {
.accounting-material-text-field.accounting-not-empty > .form-label {
opacity: 0.65;
transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}
/* The Material Design floating action buttons */
.material-fab {
.accounting-material-fab {
position: fixed;
right: 2rem;
bottom: 1rem;
z-index: 10;
flex-direction: column-reverse;
}
.material-fab .btn {
.accounting-material-fab .btn {
border-radius: 50%;
transform: scale(1.5);
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0,0,0,.12);
display: block;
margin-top: 2.5rem;
}
.material-fab .btn:hover, .material-fab .btn:focus {
.accounting-material-fab .btn:hover, .accounting-material-fab .btn:focus {
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0,0,0,.12);
}

34
src/accounting/static/js/account-form.js
View File

@ -24,11 +24,11 @@
// Initializes the page JavaScript.
document.addEventListener("DOMContentLoaded", function () {
initializeBaseAccountSelector();
document.getElementById("account-base-code")
document.getElementById("accounting-base-code")
.onchange = validateBase;
document.getElementById("account-title")
document.getElementById("accounting-title")
.onchange = validateTitle;
document.getElementById("account-form")
document.getElementById("accounting-form")
.onsubmit = validateForm;
});
@ -38,25 +38,25 @@ document.addEventListener("DOMContentLoaded", function () {
* @private
*/
function initializeBaseAccountSelector() {
const selector = document.getElementById("select-base-modal");
const base = document.getElementById("account-base");
const baseCode = document.getElementById("account-base-code");
const baseContent = document.getElementById("account-base-content");
const options = Array.from(document.getElementsByClassName("list-group-item-base"));
const btnClear = document.getElementById("btn-clear-base");
const selector = document.getElementById("accounting-base-selector-model");
const base = document.getElementById("accounting-base");
const baseCode = document.getElementById("accounting-base-code");
const baseContent = document.getElementById("accounting-base-content");
const options = Array.from(document.getElementsByClassName("accounting-base-option"));
const btnClear = document.getElementById("accounting-btn-clear-base");
selector.addEventListener("show.bs.modal", function () {
base.classList.add("not-empty");
base.classList.add("accounting-not-empty");
options.forEach(function (item) {
item.classList.remove("active");
});
const selected = document.getElementById("list-group-item-base-" + baseCode.value);
const selected = document.getElementById("accounting-base-option-" + baseCode.value);
if (selected !== null) {
selected.classList.add("active");
}
});
selector.addEventListener("hidden.bs.modal", function () {
if (baseCode.value === "") {
base.classList.remove("not-empty");
base.classList.remove("accounting-not-empty");
}
});
options.forEach(function (option) {
@ -101,9 +101,9 @@ function validateForm() {
* @private
*/
function validateBase() {
const field = document.getElementById("account-base-code");
const error = document.getElementById("account-base-code-error");
const displayField = document.getElementById("account-base");
const field = document.getElementById("accounting-base-code");
const error = document.getElementById("accounting-base-code-error");
const displayField = document.getElementById("accounting-base");
field.value = field.value.trim();
if (field.value === "") {
displayField.classList.add("is-invalid");
@ -122,8 +122,8 @@ function validateBase() {
* @private
*/
function validateTitle() {
const field = document.getElementById("account-title");
const error = document.getElementById("account-title-error");
const field = document.getElementById("accounting-title");
const error = document.getElementById("accounting-title-error");
field.value = field.value.trim();
if (field.value === "") {
field.classList.add("is-invalid");

6
src/accounting/static/js/account-order.js
View File

@ -23,13 +23,13 @@
// Initializes the page JavaScript.
document.addEventListener("DOMContentLoaded", function () {
const list = document.getElementById("account-order-list");
const list = document.getElementById("accounting-order-list");
if (list !== null) {
const onReorder = function () {
const accounts = Array.from(list.children);
for (let i = 0; i < accounts.length; i++) {
const no = document.getElementById("account-order-" + accounts[i].dataset.id + "-no");
const code = document.getElementById("account-order-" + accounts[i].dataset.id + "-code");
const no = document.getElementById("accounting-order-" + accounts[i].dataset.id + "-no");
const code = document.getElementById("accounting-order-" + accounts[i].dataset.id + "-code");
no.value = String(i + 1);
code.innerText = list.dataset.baseCode + "-" + ("000" + (i + 1)).slice(-3);
}

20
src/accounting/static/js/currency-form.js
View File

@ -23,11 +23,11 @@
// Initializes the page JavaScript.
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("currency-code")
document.getElementById("accounting-code")
.onchange = validateCode;
document.getElementById("currency-name")
document.getElementById("accounting-name")
.onchange = validateName;
document.getElementById("currency-form")
document.getElementById("accounting-form")
.onsubmit = validateForm;
});
@ -69,7 +69,7 @@ function submitFormIfAllAsyncValid() {
isValid = isAsyncValid[key] && isValid;
});
if (isValid) {
document.getElementById("currency-form").submit()
document.getElementById("accounting-form").submit()
}
}
@ -84,8 +84,8 @@ function validateCode(changeEvent = null) {
const key = "code";
const isSubmission = changeEvent === null;
let hasAsyncValidation = false;
const field = document.getElementById("currency-code");
const error = document.getElementById("currency-code-error");
const field = document.getElementById("accounting-code");
const error = document.getElementById("accounting-code-error");
field.value = field.value.trim();
if (field.value === "") {
field.classList.add("is-invalid");
@ -125,8 +125,8 @@ function validateCode(changeEvent = null) {
* @private
*/
function validateAsyncCodeIsDuplicated(isSubmission, key) {
const field = document.getElementById("currency-code");
const error = document.getElementById("currency-code-error");
const field = document.getElementById("accounting-code");
const error = document.getElementById("accounting-code-error");
const url = field.dataset.existsUrl;
const onLoad = function () {
if (this.status === 200) {
@ -160,8 +160,8 @@ function validateAsyncCodeIsDuplicated(isSubmission, key) {
* @private
*/
function validateName() {
const field = document.getElementById("currency-name");
const error = document.getElementById("currency-name-error");
const field = document.getElementById("accounting-name");
const error = document.getElementById("accounting-name-error");
field.value = field.value.trim();
if (field.value === "") {
field.classList.add("is-invalid");