fixed filter translations

app/helpers/translations_helper.rb

@@ -15,4 +15,7 @@ def available_locales
     end
   end
 
-end
+  def translation_name_filter(language_name, translated_name)
+    "#{language_name.downcase} #{translated_name.to_s.downcase}".split(' ').uniq.join(' ')
+  end
+end

app/javascript/controllers/filter_list_controller.js

@@ -7,7 +7,7 @@
 //   <h1 data-target="hello.output"></h1>
 // </div>
 
-import {Controller} from "stimulus";
+import { Controller } from "stimulus";
 
 export default class extends Controller {
   connect() {
@@ -22,8 +22,7 @@ export default class extends Controller {
 
     /* on change keyboard */
     if (searchInput.length) {
-      if (searchInput.is(":visible"))
-        searchInput.trigger("focus");
+      if (searchInput.is(":visible")) searchInput.trigger("focus");
 
       searchInput.on("change", () => {
         var filter = searchInput.val().toLowerCase();
@@ -42,19 +41,23 @@ export default class extends Controller {
   }
 
   doFilter(text, list) {
-    console.log("filtering", text);
-
     /* when user types more than 1 letter start search filter */
     if (text.length >= 1) {
-      list
-        .find(`[data-filter-tags]:not([data-filter-tags*="${text}"])`)
-        .removeClass("filter-show")
-        .addClass("hidden");
-
-      list
-        .find(`[data-filter-tags*="${text}"]`)
-        .removeClass("hidden")
-        .addClass("filter-show");
+      text = text.toLowerCase();
+
+      const elemWithTags = list.find("[data-filter-tags]");
+      elemWithTags.each((i, elem) => {
+        if (elem.dataset.filterTags.includes(text)) {
+          elem.classList.remove("hidden");
+          const parent = elem.parentNode;
+          if (parent.classList.contains("hidden")) {
+            // show parent as well
+            parent.classList.remove("hidden");
+          }
+        } else {
+          elem.classList.add("hidden");
+        }
+      });
     } else {
       list.find("[data-filter-tags]").removeClass("hidden filter-show");
     }

app/presenters/page_presenter.rb

@@ -17,7 +17,7 @@ def meta_description
   end
 
   def meta_title
-    "Mushaf page #{current_page}"
+    "Muhsaf page #{current_page}"
   end
 
   def meta_keyword

app/views/settings/_translation.html.erb

@@ -1,7 +1,9 @@
 <%
   translated_name = translation.translated_name
+
+  filters = translation_name_filter(translated_name.name, translation.name)
 %>
-<label class="check-label" data-filter-tags="<%= language %> <%= translated_name.name.downcase %> <%= translation.name.downcase %>">
+<label class="check-label" data-filter-tags="<%= language %> <%= filters %>">
   <%= translated_name.name %>
   <input type="checkbox" value="<%= translation.id %>" id="tans-<%= translated_name.id %>" class="translation-checkbox">
   <span class="checkmark"></span>
@@ -12,4 +14,3 @@
     </small>
   <% end %>
 </label>
-

app/views/settings/translations.html.erb

@@ -25,15 +25,16 @@
     </div>
   </div>
 
+  <%
+    language = languages[38]
+    translated = language.translated_name
+    name_for_filters = translation_name_filter(language.name, translated.name)
+  %>
+
   <div id='ordered-translations'>
     <div class="translations__languages">
       <div>
-        <%
-          language = languages[38]
-          translated = language.translated_name
-          name_for_filters = "#{language.name.downcase} #{translated.name.downcase}"
-        %>
-        <p class="text text--darkgrey text--medium text--semibold country-name <%= language.name.downcase %>" data-filter-tags="<%= name_for_filters %>">
+        <p class="text text--darkgrey text--medium text--semibold country-name <%= language.name.downcase %>">
           <%= translated.name %>
         </p>
       </div>
@@ -51,13 +52,14 @@
           <%
             language = languages[lang]
             translated = language.translated_name
-            name_for_filters = "#{language.name.downcase} #{translated.name.downcase}"
+            name_for_filters = translation_name_filter(language.name, translated.name)
           %>
           <div>
-            <p class="text text--darkgrey text--medium text--semibold country-name  <%#= translated.name.downcase %>" data-filter-tags="<%= name_for_filters %>">
+            <p class="text text--darkgrey text--medium text--semibold">
               <%= translated.name %>
             </p>
           </div>
+
           <div class="translations__padding">
             <%= render partial: 'translation', collection: translations[lang], as: :translation, locals: {language: name_for_filters} %>
           </div>