Removed the account code from the journal entry form for mobile screens.

src/accounting/journal_entry/forms/line_item.py

@@ -267,6 +267,19 @@ class LineItemForm(FlaskForm):
         self.journal_entry_form: JournalEntryForm | None = None
         """The source journal entry form."""
 
+    @property
+    def account_title(self) -> str:
+        """Returns the title of the account.
+
+        :return: The title of the account.
+        """
+        if self.account_code.data is None:
+            return ""
+        account: Account | None = Account.find_by_code(self.account_code.data)
+        if account is None:
+            return ""
+        return account.title
+
     @property
     def account_text(self) -> str:
         """Returns the text representation of the account.

src/accounting/journal_entry/utils/account_option.py

@@ -32,6 +32,8 @@ class AccountOption:
         """The account ID."""
         self.code: str = account.code
         """The account code."""
+        self.title: str = account.title
+        """The account title."""
         self.query_values: list[str] = account.query_values
         """The values to be queried."""
         self.__str: str = str(account)

src/accounting/journal_entry/utils/description_editor.py

@@ -54,6 +54,14 @@ class DescriptionAccount:
         """
         return str(self.__account)
 
+    @property
+    def title(self) -> str:
+        """Returns the account title.
+
+        :return: The account title.
+        """
+        return self.__account.title
+
     def add_freq(self, freq: int) -> None:
         """Adds the frequency of an account.
 

src/accounting/static/js/description-editor.js

@@ -364,12 +364,13 @@ class DescriptionEditorAccount extends JournalEntryAccount {
      *
      * @param editor {DescriptionEditor} the description editor
      * @param code {string} the account code
+     * @param title {string} the account title
      * @param text {string} the account text
      * @param isNeedOffset {boolean} true if the line items in the account needs offset, or false otherwise
      * @param button {HTMLButtonElement} the account button
      */
-    constructor(editor, code, text, isNeedOffset, button) {
-        super(code, text, isNeedOffset);
+    constructor(editor, code, title, text, isNeedOffset, button) {
+        super(code, title, text, isNeedOffset);
         this.#element = button;
         this.#element.onclick = () => editor.selectAccount(this);
     }
@@ -424,7 +425,7 @@ class DescriptionEditorSuggestedAccount extends DescriptionEditorAccount {
      * @param button {HTMLButtonElement} the account button
      */
     constructor(editor, button) {
-        super(editor, button.dataset.code, button.dataset.text, button.classList.contains("accounting-account-is-need-offset"), button);
+        super(editor, button.dataset.code, button.dataset.title, button.dataset.text, button.classList.contains("accounting-account-is-need-offset"), button);
     }
 }
 
@@ -441,7 +442,7 @@ class DescriptionEditorConfirmedAccount extends DescriptionEditorAccount {
      * @param button {HTMLButtonElement} the account button
      */
     constructor(editor, button) {
-        super(editor, "", "", false, button);
+        super(editor, "", "", "", false, button);
         this.isConfirmedAccount = true;
     }
 

src/accounting/static/js/journal-entry-account-selector.js

@@ -202,6 +202,12 @@ class JournalEntryAccountOption {
      */
     code;
 
+    /**
+     * The account title
+     * @type {string}
+     */
+    title;
+
     /**
      * The account text
      * @type {string}
@@ -235,6 +241,7 @@ class JournalEntryAccountOption {
     constructor(selector, element) {
         this.#element = element;
         this.code = element.dataset.code;
+        this.title = element.dataset.title;
         this.text = element.dataset.text;
         this.#isInUse = element.classList.contains("accounting-account-is-in-use");
         this.isNeedOffset = element.classList.contains("accounting-account-is-need-offset");

src/accounting/static/js/journal-entry-form.js

@@ -791,6 +791,12 @@ class JournalEntryAccount {
      */
     code;
 
+    /**
+     * The account title
+     * @type {string}
+     */
+    title;
+
     /**
      * The account text
      * @type {string}
@@ -807,11 +813,13 @@ class JournalEntryAccount {
      * Constructs a journal entry account.
      *
      * @param code {string} the account code
+     * @param title {string} the account title
      * @param text {string} the account text
      * @param isNeedOffset {boolean} true if the line items in the account needs offset, or false otherwise
      */
-    constructor(code, text, isNeedOffset) {
+    constructor(code, title, text, isNeedOffset) {
         this.code = code;
+        this.title = title;
         this.text = text;
         this.isNeedOffset = isNeedOffset;
     }
@@ -822,7 +830,7 @@ class JournalEntryAccount {
      * @return {JournalEntryAccount} the copy of the account
      */
     copy() {
-        return new JournalEntryAccount(this.code, this.text, this.isNeedOffset);
+        return new JournalEntryAccount(this.code, this.title, this.text, this.isNeedOffset);
     }
 }
 
@@ -887,10 +895,16 @@ class LineItemSubForm {
     #accountCode;
 
     /**
-     * The text display of the account
-     * @type {HTMLDivElement}
+     * The code part of the text display of the account
+     * @type {HTMLSpanElement}
      */
-    #accountText;
+    #accountTextCode;
+
+    /**
+     * The title part of the text display of the account
+     * @type {HTMLSpanElement}
+     */
+    #accountTextTitle;
 
     /**
      * The description
@@ -957,7 +971,8 @@ class LineItemSubForm {
         this.#error = document.getElementById(`${prefix}-error`);
         this.#no = document.getElementById(`${prefix}-no`);
         this.#accountCode = document.getElementById(`${prefix}-account-code`);
-        this.#accountText = document.getElementById(`${prefix}-account-text`);
+        this.#accountTextCode = document.getElementById(`${prefix}-account-text-code`);
+        this.#accountTextTitle = document.getElementById(`${prefix}-account-text-title`);
         this.#description = document.getElementById(`${prefix}-description`);
         this.#descriptionText = document.getElementById(`${prefix}-description-text`);
         this.#originalLineItemId = document.getElementById(`${prefix}-original-line-item-id`);
@@ -1024,7 +1039,7 @@ class LineItemSubForm {
      * @return {JournalEntryAccount|null} the account
      */
     get account() {
-        return this.#accountCode.value === null? null: new JournalEntryAccount(this.#accountCode.value, this.#accountCode.dataset.text, this.#accountCode.classList.contains("accounting-account-is-need-offset"));
+        return this.#accountCode.value === null? null: new JournalEntryAccount(this.#accountCode.value, this.#accountCode.dataset.title, this.#accountCode.dataset.text, this.#accountCode.classList.contains("accounting-account-is-need-offset"));
     }
 
     /**
@@ -1092,13 +1107,15 @@ class LineItemSubForm {
             this.#originalLineItemText.innerText = A_("Offset %(item)s", {item: editor.originalLineItemText});
         }
         this.#accountCode.value = editor.account.code;
+        this.#accountCode.dataset.title = editor.account.title;
         this.#accountCode.dataset.text = editor.account.text;
         if (editor.account.isNeedOffset) {
             this.#accountCode.classList.add("accounting-account-is-need-offset");
         } else {
             this.#accountCode.classList.remove("accounting-account-is-need-offset");
         }
-        this.#accountText.innerText = editor.account.text;
+        this.#accountTextCode.innerText = editor.account.code
+        this.#accountTextTitle.innerText = editor.account.title
         this.#description.value = editor.description === null? "": editor.description;
         this.#descriptionText.innerText = editor.description === null? "": editor.description;
         this.#amount.value = editor.amount;

src/accounting/static/js/journal-entry-line-item-editor.js

@@ -356,7 +356,7 @@ class JournalEntryLineItemEditor {
      */
     saveAccount(account) {
         this.#accountControl.classList.add("accounting-not-empty");
-        this.account = new JournalEntryAccount(account.code, account.text, account.isNeedOffset);
+        this.account = new JournalEntryAccount(account.code, account.title, account.text, account.isNeedOffset);
         this.isAccountConfirmed = true;
         this.#accountText.innerText = account.text;
         this.#validateAccount();

src/accounting/static/js/original-line-item-selector.js

@@ -284,7 +284,7 @@ class OriginalLineItem {
         this.date = element.dataset.date;
         this.#debitCredit = element.dataset.debitCredit;
         this.#currencyCode = element.dataset.currencyCode;
-        this.account = new JournalEntryAccount(element.dataset.accountCode, element.dataset.accountText, false);
+        this.account = new JournalEntryAccount(element.dataset.accountCode, element.dataset.accountTitle, element.dataset.accountText, false);
         this.description = element.dataset.description;
         this.bareNetBalance = new Decimal(element.dataset.netBalance);
         this.netBalance = this.bareNetBalance;

src/accounting/templates/accounting/journal-entry/include/account-selector-modal.html

@@ -37,7 +37,7 @@ First written: 2023/2/25
 
         <ul id="accounting-account-selector-{{ debit_credit }}-option-list" class="list-group accounting-selector-list">
           {% for account in account_options %}
-            <li id="accounting-account-selector-{{ debit_credit }}-option-{{ account.code }}" class="list-group-item accounting-clickable accounting-account-selector-{{ debit_credit }}-option {% if account.is_in_use %} accounting-account-is-in-use {% endif %} {% if account.is_need_offset %} accounting-account-is-need-offset {% endif %}" data-code="{{ account.code }}" data-text="{{ account }}" data-query-values="{{ account.query_values|tojson|forceescape }}" data-bs-toggle="modal" data-bs-target="#accounting-line-item-editor-modal">
+            <li id="accounting-account-selector-{{ debit_credit }}-option-{{ account.code }}" class="list-group-item accounting-clickable accounting-account-selector-{{ debit_credit }}-option {% if account.is_in_use %} accounting-account-is-in-use {% endif %} {% if account.is_need_offset %} accounting-account-is-need-offset {% endif %}" data-code="{{ account.code }}" data-title="{{ account.title }}" data-text="{{ account }}" data-query-values="{{ account.query_values|tojson|forceescape }}" data-bs-toggle="modal" data-bs-target="#accounting-line-item-editor-modal">
               {{ account }}
             </li>
           {% endfor %}

src/accounting/templates/accounting/journal-entry/include/description-editor-modal.html

@@ -184,7 +184,7 @@ First written: 2023/2/28
           <div class="mt-3 accounting-description-editor-buttons">
             <button id="accounting-description-editor-{{ description_editor.debit_credit }}-account-confirmed" class="btn btn-primary mb-1 d-none" type="button"></button>
             {% for account in description_editor.accounts %}
-              <button class="btn btn-outline-primary d-none accounting-description-editor-{{ description_editor.debit_credit }}-account {% if account.is_need_offset %} accounting-account-is-need-offset {% endif %}" type="button" data-code="{{ account.code }}" data-text="{{ account }}">
+              <button class="btn btn-outline-primary d-none accounting-description-editor-{{ description_editor.debit_credit }}-account {% if account.is_need_offset %} accounting-account-is-need-offset {% endif %}" type="button" data-code="{{ account.code }}" data-title="{{ account.title }}" data-text="{{ account }}">
                 {{ account }}
               </button>
             {% endfor %}

src/accounting/templates/accounting/journal-entry/include/form-line-item.html

@@ -26,13 +26,16 @@ First written: 2023/2/25
   {% endif %}
   <input id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-no" type="hidden" name="currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-no" value="{{ line_item_index }}">
   <input id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-original-line-item-id" class="accounting-original-line-item-id" type="hidden" name="currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-original_line_item_id" value="{{ form.original_line_item_id.data|accounting_default }}" data-date="{{ form.original_line_item_date|accounting_default }}" data-text="{{ form.original_line_item_text|accounting_default }}">
-  <input id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-account-code" class="{% if form.is_need_offset %} accounting-account-is-need-offset {% endif %}" type="hidden" name="currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-account_code" value="{{ form.account_code.data|accounting_default }}" data-text="{{ form.account_text }}">
+  <input id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-account-code" class="{% if form.is_need_offset %} accounting-account-is-need-offset {% endif %}" type="hidden" name="currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-account_code" value="{{ form.account_code.data|accounting_default }}" data-title="{{ form.account_title }}" data-text="{{ form.account_text }}">
   <input id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-description" type="hidden" name="currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-description" value="{{ form.description.data|accounting_default }}">
   <input id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-amount" type="hidden" name="currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-amount" value="{{ form.amount.data|accounting_journal_entry_format_amount_input }}" data-min="{{ form.offset_total|accounting_default("0") }}">
   <div class="accounting-line-item-content">
     <div id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-control" class="form-control clickable d-flex justify-content-between {% if form.all_errors %} is-invalid {% endif %}" data-bs-toggle="modal" data-bs-target="#accounting-line-item-editor-modal">
       <div>
-        <div id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-account-text" class="small">{{ form.account_text }}</div>
+        <div class="small">
+          <span id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-account-text-code" class="d-none d-md-inline">{{ form.account_code.data|accounting_default }}</span>
+          <span id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-account-text-title">{{ form.account_title }}</span>
+        </div>
         <div id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-description-text">{{ form.description.data|accounting_default }}</div>
         <div id="accounting-currency-{{ currency_index }}-{{ debit_credit }}-{{ line_item_index }}-original-line-item-text" class="fst-italic small accounting-original-line-item {% if not form.original_line_item_id.data %} d-none {% endif %}">
           {% if form.original_line_item_id.data %}{{ A_("Offset %(item)s", item=form.original_line_item_text|accounting_default) }}{% endif %}

src/accounting/templates/accounting/journal-entry/include/original-line-item-selector-modal.html

@@ -37,7 +37,7 @@ First written: 2023/2/25
 
         <ul id="accounting-original-line-item-selector-option-list" class="list-group accounting-selector-list">
           {% for line_item in form.original_line_item_options %}
-            <li id="accounting-original-line-item-selector-option-{{ line_item.id }}" class="list-group-item d-flex justify-content-between accounting-clickable accounting-original-line-item-selector-option" data-id="{{ line_item.id }}" data-date="{{ line_item.journal_entry.date }}" data-debit-credit="{{ "debit" if line_item.is_debit else "credit" }}" data-currency-code="{{ line_item.currency.code }}" data-account-code="{{ line_item.account_code }}" data-account-text="{{ line_item.account }}" data-description="{{ line_item.description|accounting_default }}" data-net-balance="{{ line_item.net_balance|accounting_journal_entry_format_amount_input }}" data-text="{{ line_item }}" data-query-values="{{ line_item.query_values|tojson|forceescape }}" data-bs-toggle="modal" data-bs-target="#accounting-line-item-editor-modal">
+            <li id="accounting-original-line-item-selector-option-{{ line_item.id }}" class="list-group-item d-flex justify-content-between accounting-clickable accounting-original-line-item-selector-option" data-id="{{ line_item.id }}" data-date="{{ line_item.journal_entry.date }}" data-debit-credit="{{ "debit" if line_item.is_debit else "credit" }}" data-currency-code="{{ line_item.currency.code }}" data-account-code="{{ line_item.account_code }}" data-account-title="{{ line_item.account.title }}" data-account-text="{{ line_item.account }}" data-description="{{ line_item.description|accounting_default }}" data-net-balance="{{ line_item.net_balance|accounting_journal_entry_format_amount_input }}" data-text="{{ line_item }}" data-query-values="{{ line_item.query_values|tojson|forceescape }}" data-bs-toggle="modal" data-bs-target="#accounting-line-item-editor-modal">
               <div>{{ line_item.journal_entry.date|accounting_format_date }} {{ line_item.description|accounting_default }}</div>
               <div>
                 <span class="badge bg-primary rounded-pill">