feat: basic translation search

It's now possible to search for a specific text or text fragment. The kook up is performed either in translated strings or its corresponding key.

A "nothing found" message is shown if the search string doesn't match anything.

A search for an empty string "" returns a paginated list of all translations.

Closes #1

Author: gearsdigital

api.php

@@ -5,6 +5,7 @@
 use Kirby\Filesystem\F;
 use Kirby\Http\Response;
 use Kirby\Toolkit\Collection;
+use Kirby\Toolkit\Str;
 
 $contentRoot = kirby()->root('content');
 $path = $contentRoot.DS.'localizer';
@@ -66,8 +67,18 @@
             'action' => function ($code) {
                 $page = get('page', 1);
                 $limit = get('limit', 10);
+                $q = trim(get('q'));
                 $translations = kirby()->translations()->find($code ?? 'en');
-                $collection = new Collection($translations->data());
+
+                if (!empty($q)) {
+                    $filteredTranslations = array_filter(
+                        $translations->data(),
+                        fn($v, $k) => Str::contains($k, $q) || Str::contains($v, $q),
+                        ARRAY_FILTER_USE_BOTH
+                    );
+                }
+
+                $collection = new Collection($filteredTranslations ?? $translations->data());
 
                 $pagedCollection = $collection->paginate([
                     'page' => $page,

index.css

@@ -7,9 +7,9 @@ an [issue](https://github.com/gearsdigital/localizer-for-kirby/issues/new).
 
 ### Known issues
 
-- No search functionality
-- No translations (I know, I know ¯\_(ツ)_/¯)
-- No tests
+- [x] Add search functionality
+- [ ] Add translations (I know, I know ¯\_(ツ)_/¯)
+- [ ] Add tests
 
 ## What is this about?
 
@@ -19,14 +19,18 @@ help you to make that possible.
 ## Screenshots
 
 ### Translation dialog
+
 <img width="977" alt="Bildschirmfoto 2021-11-27 um 17 03 47" src="https://user-images.githubusercontent.com/965069/143829633-11284c55-e8ae-4f0c-b074-1f1d08dfead2.png">
 
 ### Unsaved changes
+
 <img width="977" alt="Bildschirmfoto 2021-11-27 um 17 04 05" src="https://user-images.githubusercontent.com/965069/143829640-cfeab1b9-ad58-4e48-9da1-974a6439ebfe.png">
 
 ### Confirm dialog
+
 <img width="977" alt="Bildschirmfoto 2021-11-27 um 17 04 18" src="https://user-images.githubusercontent.com/965069/143829715-e2ee5a1b-cce1-431e-bc48-9e61a58b9170.png">
 
 ### Applied changes
+
 <img width="977" alt="Bildschirmfoto 2021-11-27 um 17 04 49" src="https://user-images.githubusercontent.com/965069/143829776-717aa93f-4286-4b7a-a82c-99c2b4a4c67d.png">
 

index.js

@@ -1,7 +1,14 @@
 <template>
-  <k-loader v-if="!pagedTranslationDataList.length" />
-  <article v-else>
-    <k-items class="k-panel-localizer-translations">
+  <div>
+    <k-input
+      v-model="q"
+      :icon="isLoading ? 'loader' : 'search'"
+      :placeholder="$t('search') + ' …'"
+      autofocus="true"
+      class="k-dialog-search"
+      type="text" />
+
+    <k-items v-if="pagedTranslationDataList.length > 0" class="k-panel-localizer-translations">
       <k-item
         v-for="entry in pagedTranslationDataList"
         :key="entry.key"
@@ -11,14 +18,17 @@
         layout="cards"
         @click="$emit('select', entry)" />
     </k-items>
+
+    <k-empty v-else>Nothing found</k-empty>
+
     <k-pagination
       ref="pagination"
       align="center"
       :details="true"
       :limit="pagination.limit"
       :total="pagination.total"
       @paginate="updatePagination" />
-  </article>
+  </div>
 </template>
 
 <script>
@@ -38,6 +48,7 @@ export default {
         total: 0,
         page: 1,
       },
+      q: null,
     };
   },
   computed: {
@@ -54,6 +65,19 @@ export default {
     selectedTranslations() {
       return this.$store.getters.getTranslationsForLanguage(this.code);
     },
+    isLoading() {
+      return this.$store.state.isLoading;
+    },
+  },
+  watch: {
+    q: function (val, oldVal) {
+      if (val !== oldVal) {
+        this.fetchTranslations();
+      }
+    },
+  },
+  created() {
+    this.fetchTranslations = this.$helper.debounce(this.fetchTranslations, 250);
   },
   mounted() {
     this.fetchTranslations();
@@ -62,8 +86,9 @@ export default {
     async fetchTranslations(page = 1) {
       const { data, pagination } = await this.$api.get(`localizer/translations/${this.code}`, {
         page,
+        q: this.q,
       });
-      this.translations = data;
+      this.translations = data ?? [];
       this.pagination = pagination;
     },
     updatePagination(pagination) {