From 28721be87582ce0dceb16929ebfb38ca4eac35fe Mon Sep 17 00:00:00 2001
From: Ankush Menat <ankush@frappe.io>
Date: Mon, 30 May 2022 18:24:11 +0530
Subject: [PATCH] fix(UX): auto complete for selecting transaction

Giant select fields are bad for UX, many users dont know they can type
prefix to select value which leads to slow "visual search"
---
 .../document_naming_settings.js                 | 17 +++++------------
 .../document_naming_settings.json               | 17 ++++++-----------
 .../document_naming_settings.py                 |  4 +---
 3 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/frappe/core/doctype/document_naming_settings/document_naming_settings.js b/frappe/core/doctype/document_naming_settings/document_naming_settings.js
index 39a4854288..15b0339f7a 100644
--- a/frappe/core/doctype/document_naming_settings/document_naming_settings.js
+++ b/frappe/core/doctype/document_naming_settings/document_naming_settings.js
@@ -2,25 +2,18 @@
 // For license information, please see license.txt
 
 frappe.ui.form.on("Document Naming Settings", {
-	onload: function(frm) {
-		frm.events.get_doc_and_prefix(frm);
-	},
-
 	refresh: function(frm) {
+		frm.trigger("setup_transaction_autocomplete");
 		frm.disable_save();
 	},
 
-	get_doc_and_prefix: function(frm) {
+	setup_transaction_autocomplete: function(frm) {
 		frappe.call({
 			method: "get_transactions",
 			doc: frm.doc,
 			callback: function(r) {
-				frm.set_df_property(
-					"transaction_type",
-					"options",
-					r.message.transactions
-				);
-				frm.set_df_property("prefix", "options", r.message.prefixes);
+				frm.fields_dict.transaction_type.set_data(r.message.transactions);
+				frm.fields_dict.prefix.set_data(r.message.prefixes);
 			},
 		});
 	},
@@ -53,7 +46,7 @@ frappe.ui.form.on("Document Naming Settings", {
 			method: "update_series",
 			doc: frm.doc,
 			callback: function(r) {
-				frm.events.get_doc_and_prefix(frm);
+				frm.trigger("setup_transaction_autocomplete");
 			},
 		});
 	},
diff --git a/frappe/core/doctype/document_naming_settings/document_naming_settings.json b/frappe/core/doctype/document_naming_settings/document_naming_settings.json
index dccace9947..1dd84735b6 100644
--- a/frappe/core/doctype/document_naming_settings/document_naming_settings.json
+++ b/frappe/core/doctype/document_naming_settings/document_naming_settings.json
@@ -8,13 +8,12 @@
   "naming_series_tab",
   "setup_series",
   "transaction_type",
-  "try_naming_series",
-  "preview",
-  "add_series",
   "naming_series_options",
   "user_must_always_select",
   "update",
   "column_break_9",
+  "try_naming_series",
+  "preview",
   "help_html",
   "update_series",
   "prefix",
@@ -34,7 +33,7 @@
    "fieldname": "help_html",
    "fieldtype": "HTML",
    "label": "Help HTML",
-   "options": "<div class=\"well\">\n    Edit list of Series in the box below. Rules:\n    <ul>\n        <li>Each Series Prefix on a new line.</li>\n        <li>Allowed special characters are \"/\" and \"-\"</li>\n        <li>\n            Optionally, set the number of digits in the series using dot (.)\n            followed by hashes (#). For example, \".####\" means that the series\n            will have four digits. Default is five digits.\n        </li>\n        <li>\n            You can also use variables in the series name by putting them\n            between (.) dots\n            <br>\n            Support Variables:\n            <ul>\n                <li><code>.YYYY.</code> - Year in 4 digits</li>\n                <li><code>.YY.</code> - Year in 2 digits</li>\n                <li><code>.MM.</code> - Month</li>\n                <li><code>.DD.</code> - Day of month</li>\n                <li><code>.WW.</code> - Week of the year</li>\n                <li><code>.FY.</code> - Fiscal Year</li>\n                <li>\n                    <code>.{fieldname}.</code> - fieldname on the document e.g.\n                    <code>branch</code>\n                </li>\n            </ul>\n        </li>\n    </ul>\n    Examples:\n    <ul>\n        <li>INV-</li>\n        <li>INV-10-</li>\n        <li>INVK-</li>\n        <li>INV-.YYYY.-.{branch}.-.MM.-.####</li>\n    </ul>\n</div>\n<br>\n"
+   "options": "<div class=\"well\">\n    Edit list of Series in the box. Rules:\n    <ul>\n        <li>Each Series Prefix on a new line.</li>\n        <li>Allowed special characters are \"/\" and \"-\"</li>\n        <li>\n            Optionally, set the number of digits in the series using dot (.)\n            followed by hashes (#). For example, \".####\" means that the series\n            will have four digits. Default is five digits.\n        </li>\n        <li>\n            You can also use variables in the series name by putting them\n            between (.) dots\n            <br>\n            Supported Variables:\n            <ul>\n                <li><code>.YYYY.</code> - Year in 4 digits</li>\n                <li><code>.YY.</code> - Year in 2 digits</li>\n                <li><code>.MM.</code> - Month</li>\n                <li><code>.DD.</code> - Day of month</li>\n                <li><code>.WW.</code> - Week of the year</li>\n                <li><code>.FY.</code> - Fiscal Year</li>\n                <li>\n                    <code>.{fieldname}.</code> - fieldname on the document e.g.\n                    <code>branch</code>\n                </li>\n            </ul>\n        </li>\n    </ul>\n    Examples:\n    <ul>\n        <li>INV-</li>\n        <li>INV-10-</li>\n        <li>INVK-</li>\n        <li>INV-.YYYY.-.{branch}.-.MM.-.####</li>\n    </ul>\n</div>\n<br>\n"
   },
   {
    "default": " ",
@@ -43,11 +42,6 @@
    "label": "Preview of generated names",
    "read_only": 1
   },
-  {
-   "fieldname": "add_series",
-   "fieldtype": "Button",
-   "label": "Add this Series"
-  },
   {
    "default": "0",
    "depends_on": "transaction_type",
@@ -71,7 +65,7 @@
   },
   {
    "fieldname": "prefix",
-   "fieldtype": "Select",
+   "fieldtype": "Autocomplete",
    "label": "Prefix"
   },
   {
@@ -93,13 +87,14 @@
    "label": "Series List for this Transaction"
   },
   {
+   "depends_on": "transaction_type",
    "fieldname": "try_naming_series",
    "fieldtype": "Data",
    "label": "Try a naming Series"
   },
   {
    "fieldname": "transaction_type",
-   "fieldtype": "Select",
+   "fieldtype": "Autocomplete",
    "label": "Select Transaction"
   },
   {
diff --git a/frappe/core/doctype/document_naming_settings/document_naming_settings.py b/frappe/core/doctype/document_naming_settings/document_naming_settings.py
index b3f1ad0e97..1dd73062d3 100644
--- a/frappe/core/doctype/document_naming_settings/document_naming_settings.py
+++ b/frappe/core/doctype/document_naming_settings/document_naming_settings.py
@@ -58,9 +58,7 @@ class DocumentNamingSettings(Document):
 		if custom_prefixes:
 			prefixes = prefixes + [d.autoname.rsplit(".", 1)[0] for d in custom_prefixes]
 
-		prefixes = "\n".join(sorted(prefixes))
-
-		return {"transactions": "\n".join([""] + sorted(doctypes)), "prefixes": prefixes}
+		return {"transactions": sorted(doctypes), "prefixes": sorted(prefixes)}
 
 	def scrub_options_list(self, ol):
 		options = list(filter(lambda x: x, [cstr(n).strip() for n in ol]))