From f930a443b8dc2822482e2797f93b4bc002fa25c2 Mon Sep 17 00:00:00 2001
From: Majstor <76176291+wmdhosting@users.noreply.github.com>
Date: Fri, 12 May 2023 14:17:24 +0300
Subject: [PATCH] Add to settings field and mark for select section by part of
 handle

---
 .../_components/fields/section/_settings.twig | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/src/templates/_components/fields/section/_settings.twig b/src/templates/_components/fields/section/_settings.twig
index 44ce406..215210d 100644
--- a/src/templates/_components/fields/section/_settings.twig
+++ b/src/templates/_components/fields/section/_settings.twig
@@ -20,6 +20,16 @@
 
 <hr>
 
+{{ forms.textField({
+    id: 'searchInput',
+    label : 'Select Section By Text In Handle' | t('section-and-product-type'),
+    instructions : 'This will allow to select all section by text in handle.' | t('section-and-product-type'),
+    name : 'partOfHandle',
+    value: partOfHandle,
+}) }}
+
+<hr>
+
 {{ forms.checkboxGroupField({
     label : 'Allowed Sections' | t('section-and-product-type'),
     instructions : 'The sections that may be chosen for this field.\n **If selected Select All Sections, all sections are selected**.' | t('section-and-product-type'),
@@ -39,3 +49,29 @@
     id : 'excludedSections',
     name : 'excludedSections',
 }) }}
+
+<script>
+    const searchInput = document.querySelector('#types-wmd-sectionandproducttype-fields-SectionField-searchInput');
+    const checkboxes = document.querySelectorAll('.checkbox-group .checkboxfield');
+
+    searchInput.addEventListener('input', (event) => {
+        const searchText = event.target.value.toLowerCase();
+        if (searchText.length > 0) {
+            checkboxes.forEach((checkbox) => {
+                const checkboxText = checkbox.querySelector('label').textContent.toLowerCase();
+                if (checkboxText.includes(searchText)) {
+                    checkbox.style.background = 'yellow';
+                } else {
+                     checkbox.style.background = '';
+                }
+            })
+        } else {
+            checkboxes.forEach((checkbox) => {
+                const checkboxText = checkbox.querySelector('label').textContent.toLowerCase();
+                if (checkboxText.includes(searchText)) {
+                    checkbox.style.background = '';
+                }
+            })
+        }
+    });
+</script>