From bf2b241f1b79685a7186d818da6989e77ea36056 Mon Sep 17 00:00:00 2001
From: Abdeali Chharchhodawala <99460106+Abdeali099@users.noreply.github.com>
Date: Thu, 5 Dec 2024 19:59:19 +0530
Subject: [PATCH] fix: handle `Actions` button for smaller screens (#2806)

* fix: Hide `Actions` text on small screens

* fix: Handle translation

* fix: Check translated text for Actions group button

* fix: Show dot-horizontal icon on smaller screen for Actions

* fix: Check button element innerText for Actions

* fix: Remove `Actions` from page actions menu

* fix: Hide custom `Actions` in smaller screen

(cherry picked from commit a82287c2135667047db93d61f09e1f8f6b900a65)
---
 .../purchase_reconciliation_tool.js           | 44 ++++++++++++-------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/india_compliance/gst_india/doctype/purchase_reconciliation_tool/purchase_reconciliation_tool.js b/india_compliance/gst_india/doctype/purchase_reconciliation_tool/purchase_reconciliation_tool.js
index d4aaaaaf8..bfe0b7461 100644
--- a/india_compliance/gst_india/doctype/purchase_reconciliation_tool/purchase_reconciliation_tool.js
+++ b/india_compliance/gst_india/doctype/purchase_reconciliation_tool/purchase_reconciliation_tool.js
@@ -16,12 +16,13 @@ const ALERT_HTML = `
         <div>
             You have missing GSTR-2B downloads
         </div>
-        ${api_enabled
-        ? `<a id="download-gstr2b-button" href="#" class="alert-link">
+        ${
+            api_enabled
+                ? `<a id="download-gstr2b-button" href="#" class="alert-link">
                     Download 2B
                 </a>`
-        : ""
-    }
+                : ""
+        }
     </div>
 `;
 
@@ -98,28 +99,30 @@ frappe.ui.form.on("Purchase Reconciliation Tool", {
             frm.save();
         });
 
+        const action_group = __("Actions");
+
         // add custom buttons
         api_enabled
             ? frm.add_custom_button(__("Download 2A/2B"), () => new ImportDialog(frm))
             : frm.add_custom_button(
-                __("Upload 2A/2B"),
-                () => new ImportDialog(frm, false)
-            );
+                  __("Upload 2A/2B"),
+                  () => new ImportDialog(frm, false)
+              );
 
         if (!frm.purchase_reconciliation_tool?.data?.length) return;
         if (frm.get_active_tab()?.df.fieldname == "invoice_tab") {
             frm.add_custom_button(
                 __("Unlink"),
                 () => unlink_documents(frm),
-                __("Actions")
+                action_group
             );
-            frm.add_custom_button(__("dropdown-divider"), () => { }, __("Actions"));
+            frm.add_custom_button(__("dropdown-divider"), () => {}, action_group);
         }
         ["Accept", "Pending", "Ignore"].forEach(action =>
             frm.add_custom_button(
                 __(action),
                 () => apply_action(frm, action),
-                __("Actions")
+                action_group
             )
         );
         frm.$wrapper
@@ -132,10 +135,16 @@ frappe.ui.form.on("Purchase Reconciliation Tool", {
         );
 
         // move actions button next to filters
-        for (let button of $(".custom-actions .inner-group-button")) {
-            if (button.innerText?.trim() != "Actions") continue;
+        for (const group_div of $(".custom-actions .inner-group-button")) {
+            const btn_label = group_div.querySelector("button").innerText?.trim();
+            if (btn_label != action_group) continue;
+
             $(".custom-button-group .inner-group-button").remove();
-            $(button).appendTo($(".custom-button-group"));
+
+            // to hide `Actions` button group on smaller screens
+            $(group_div).addClass("hidden-md");
+
+            $(group_div).appendTo($(".custom-button-group"));
         }
     },
 
@@ -192,8 +201,8 @@ frappe.ui.form.on("Purchase Reconciliation Tool", {
                 method == "update_api_progress"
                     ? __("Fetching data from GSTN")
                     : __("Updating Inward Supply for Return Period {0}", [
-                        data.return_period,
-                    ]);
+                          data.return_period,
+                      ]);
 
             frm.dashboard.show_progress(
                 "Import GSTR Progress",
@@ -921,8 +930,9 @@ class DetailViewDialog {
                         ? ["GST Inward Supply"]
                         : ["Purchase Invoice", "Bill of Entry"],
 
-                read_only_depends_on: `eval: ${this.missing_doctype == "GST Inward Supply"
-                    }`,
+                read_only_depends_on: `eval: ${
+                    this.missing_doctype == "GST Inward Supply"
+                }`,
 
                 onchange: () => {
                     const doctype = this.dialog.get_value("doctype");