Handle report exception

src/ui/static/js/reports.js

@@ -29,7 +29,7 @@ class Filter {
           setTimeout(() => {
             const value = document
               .querySelector(
-                `[data-${this.prefix}-setting-select-text="method"]`,
+                `[data-${this.prefix}-setting-select-text="method"]`
               )
               .textContent.trim();
 
@@ -52,7 +52,7 @@ class Filter {
           setTimeout(() => {
             const value = document
               .querySelector(
-                `[data-${this.prefix}-setting-select-text="country"]`,
+                `[data-${this.prefix}-setting-select-text="country"]`
               )
               .textContent.trim();
 
@@ -75,7 +75,7 @@ class Filter {
           setTimeout(() => {
             const value = document
               .querySelector(
-                `[data-${this.prefix}-setting-select-text="status"]`,
+                `[data-${this.prefix}-setting-select-text="status"]`
               )
               .textContent.trim();
 
@@ -98,7 +98,7 @@ class Filter {
           setTimeout(() => {
             const value = document
               .querySelector(
-                `[data-${this.prefix}-setting-select-text="reason"]`,
+                `[data-${this.prefix}-setting-select-text="reason"]`
               )
               .textContent.trim();
 
@@ -117,7 +117,7 @@ class Filter {
 
   filter() {
     const requests = document.querySelector(
-      `[data-${this.prefix}-list]`,
+      `[data-${this.prefix}-list]`
     ).children;
     if (requests.length === 0) return;
     //reset
@@ -237,7 +237,7 @@ class Dropdown {
           const btn = e.target.closest("button");
           const btnValue = btn.getAttribute("value");
           const btnSetting = btn.getAttribute(
-            `data-${this.prefix}-setting-select-dropdown-btn`,
+            `data-${this.prefix}-setting-select-dropdown-btn`
           );
           //stop if same value to avoid new fetching
           const isSameVal = this.isSameValue(btnSetting, btnValue);
@@ -263,7 +263,7 @@ class Dropdown {
 
   closeAllDrop() {
     const drops = document.querySelectorAll(
-      `[data-${this.prefix}-setting-select-dropdown]`,
+      `[data-${this.prefix}-setting-select-dropdown]`
     );
     drops.forEach((drop) => {
       drop.classList.add("hidden");
@@ -271,8 +271,8 @@ class Dropdown {
       document
         .querySelector(
           `svg[data-${this.prefix}-setting-select="${drop.getAttribute(
-            `data-${this.prefix}-setting-select-dropdown`,
-          )}"]`,
+            `data-${this.prefix}-setting-select-dropdown`
+          )}"]`
         )
         .classList.remove("rotate-180");
     });
@@ -280,7 +280,7 @@ class Dropdown {
 
   isSameValue(btnSetting, value) {
     const selectCustom = document.querySelector(
-      `[data-${this.prefix}-setting-select-text="${btnSetting}"]`,
+      `[data-${this.prefix}-setting-select-text="${btnSetting}"]`
     );
     const currVal = selectCustom.textContent;
     return currVal === value ? true : false;
@@ -288,30 +288,30 @@ class Dropdown {
 
   setSelectNewValue(btnSetting, value) {
     const selectCustom = document.querySelector(
-      `[data-${this.prefix}-setting-select="${btnSetting}"]`,
+      `[data-${this.prefix}-setting-select="${btnSetting}"]`
     );
     selectCustom.querySelector(
-      `[data-${this.prefix}-setting-select-text]`,
+      `[data-${this.prefix}-setting-select-text]`
     ).textContent = value;
   }
 
   hideDropdown(btnSetting) {
     //hide dropdown
     const dropdownEl = document.querySelector(
-      `[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
+      `[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`
     );
     dropdownEl.classList.add("hidden");
     dropdownEl.classList.remove("flex");
     //svg effect
     const dropdownChevron = document.querySelector(
-      `svg[data-${this.prefix}-setting-select="${btnSetting}"]`,
+      `svg[data-${this.prefix}-setting-select="${btnSetting}"]`
     );
     dropdownChevron.classList.remove("rotate-180");
   }
 
   changeDropBtnStyle(btnSetting, selectedBtn) {
     const dropdownEl = document.querySelector(
-      `[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`,
+      `[data-${this.prefix}-setting-select-dropdown="${btnSetting}"]`
     );
     //reset dropdown btns
     const btnEls = dropdownEl.querySelectorAll("button");
@@ -321,7 +321,7 @@ class Dropdown {
         "bg-primary",
         "dark:bg-primary",
         "text-gray-300",
-        "text-gray-300",
+        "text-gray-300"
       );
       btn.classList.add("bg-white", "dark:bg-slate-700", "text-gray-700");
     });
@@ -329,7 +329,7 @@ class Dropdown {
     selectedBtn.classList.remove(
       "bg-white",
       "dark:bg-slate-700",
-      "text-gray-700",
+      "text-gray-700"
     );
     selectedBtn.classList.add("dark:bg-primary", "bg-primary", "text-gray-300");
   }
@@ -340,10 +340,10 @@ class Dropdown {
       .getAttribute(`data-${this.prefix}-setting-select`);
     //toggle dropdown
     const dropdownEl = document.querySelector(
-      `[data-${this.prefix}-setting-select-dropdown="${attribute}"]`,
+      `[data-${this.prefix}-setting-select-dropdown="${attribute}"]`
     );
     const dropdownChevron = document.querySelector(
-      `svg[data-${this.prefix}-setting-select="${attribute}"]`,
+      `svg[data-${this.prefix}-setting-select="${attribute}"]`
     );
     dropdownEl.classList.toggle("hidden");
     dropdownEl.classList.toggle("flex");
@@ -377,22 +377,26 @@ class Dropdown {
 const setDropdown = new Dropdown();
 const setFilter = new Filter();
 
-const checkPluginKeyword = new CheckNoMatchFilter(
-  document.querySelector("input#keyword"),
-  "input",
-  document
-    .querySelector("[data-reports-list]")
-    .querySelectorAll("[data-reports-item]"),
-  document.querySelector("[data-reports-list-container]"),
-  document.querySelector("[data-reports-nomatch]"),
-);
+try {
+  const checkPluginKeyword = new CheckNoMatchFilter(
+    document.querySelector("input#keyword"),
+    "input",
+    document
+      .querySelector("[data-reports-list]")
+      .querySelectorAll("[data-reports-item]"),
+    document.querySelector("[data-reports-list-container]"),
+    document.querySelector("[data-reports-nomatch]")
+  );
 
-const checkPluginSelect = new CheckNoMatchFilter(
-  document.querySelectorAll("button[data-reports-setting-select-dropdown-btn]"),
-  "select",
-  document
-    .querySelector("[data-reports-list]")
-    .querySelectorAll("[data-reports-item]"),
-  document.querySelector("[data-reports-list-container]"),
-  document.querySelector("[data-reports-nomatch]"),
-);
+  const checkPluginSelect = new CheckNoMatchFilter(
+    document.querySelectorAll(
+      "button[data-reports-setting-select-dropdown-btn]"
+    ),
+    "select",
+    document
+      .querySelector("[data-reports-list]")
+      .querySelectorAll("[data-reports-item]"),
+    document.querySelector("[data-reports-list-container]"),
+    document.querySelector("[data-reports-nomatch]")
+  );
+} catch (e) {}