Add icon search to icon editor

pradoslaw · Oct 17, 2024 · f7cf597 · f7cf597
1 parent 48d70d2
commit f7cf597
Showing 1 changed file with 46 additions and 8 deletions.
diff --git a/resources/views/adm/icons.twig b/resources/views/adm/icons.twig
@@ -3,25 +3,40 @@
 
 {% block card %}
   {{ form_open({url: route('adm.icons.save'), method: 'post', id: 'app'}) }}
-  <div class="d-flex justify-content-end">
+  <div class="d-flex justify-content-end mb-3">
     <p>
       <input type="submit" value="Zapisz" class="btn btn-primary" data-submit-state="Zapisywanie...">
     </p>
   </div>
   <table class="table table-striped">
     <tr>
-      <th>umiejscowienie</th>
-      <th>ikona FontAwesome</th>
+      <td>
+        <input class="form-control" placeholder="Wyszukaj po nazwie..." v-model="searchName">
+      </td>
+      <td>
+        <input class="form-control" placeholder="Wyszukaj po ikonie..." v-model="searchIcon">
+      </td>
+      <td>
+        <div style="width:30px; height:35px; display:flex; align-items:center;">
+          <i class="fa-solid fa-magnifying-glass"></i>
+        </div>
+      </td>
+    </tr>
+  </table>
+  <table class="table table-striped">
+    <tr>
+      <th>Umiejscowienie</th>
+      <th>ikona font-awesome</th>
       <th></th>
     </tr>
-    <tr v-for="(icon, index) in icons">
+    <tr v-for="(icon, index) in icons" v-show="visible(icon)">
       <td>
         <input :value="icon.location" class="form-control" disabled>
       </td>
       <td>
         <input
             :name="'icons[' + icon.location + ']'"
-            :value="icon.currentIcon"
+            v-model="icon.currentIcon"
             :placeholder="icon.defaultIcon"
             class="form-control"
         ></td>
@@ -56,20 +71,43 @@
       data() {
         return {
           editorIcons,
+          searchName: '',
+          searchIcon: '',
         };
       },
       computed: {
         icons() {
-          return Object.entries(this.$data.editorIcons).map(([location, [defaultIcon, currentIcon]]) => {
-            return {location, defaultIcon, currentIcon};
-          });
+          return Object
+            .entries(this.$data.editorIcons)
+            .map(([location, [defaultIcon, currentIcon]]) => {
+              return {location, defaultIcon, currentIcon};
+            });
         },
       },
       methods: {
         reset(event) {
           event.currentTarget.parentElement.parentElement.querySelector('input[name]').value = '';
         },
+        visible({location, defaultIcon, currentIcon}) {
+          currentIcon = currentIcon.trim();
+          if (this.$data.searchName) {
+            if (!containsCaseInsensitive(location, this.$data.searchName)) {
+              return false;
+            }
+          }
+          if (this.$data.searchIcon) {
+            const effectiveIcon = currentIcon === '' ? defaultIcon : currentIcon;
+            if (!containsCaseInsensitive(effectiveIcon, this.$data.searchIcon)) {
+              return false;
+            }
+          }
+          return true;
+        },
       },
     });
+
+    function containsCaseInsensitive(string, substring) {
+      return string.toLowerCase().includes(substring.toLocaleString());
+    }
   </script>
 {% endblock %}