Extension list UI improvements (#769)

* Extensions list is now sorted alphabetically

* Added extension list search

* Prettified changes

* Removed console.log

* Code improvements based on motorina0 feedback

* Remove console.log from lnbits/templates/base.html

Run prettier

lnbits/core/static/js/extensions.js

@@ -1,4 +1,36 @@
 new Vue({
   el: '#vue',
+  data: function () {
+    return {
+      searchTerm: '',
+      filteredExtensions: null
+    }
+  },
+  mounted() {
+    this.filteredExtensions = this.g.extensions
+  },
+  watch: {
+    searchTerm(term) {
+      // Reset the filter
+      this.filteredExtensions = this.g.extensions
+      if (term !== '') {
+        // Filter the extensions list
+        function extensionNameContains(searchTerm) {
+          return function (extension) {
+            return (
+              extension.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+              extension.shortDescription
+                .toLowerCase()
+                .includes(searchTerm.toLowerCase())
+            )
+          }
+        }
+
+        this.filteredExtensions = this.filteredExtensions.filter(
+          extensionNameContains(term)
+        )
+      }
+    }
+  },
   mixins: [windowMixin]
 })

lnbits/core/templates/core/extensions.html

@@ -2,10 +2,23 @@
 %} {% block scripts %} {{ window_vars(user) }}
 <script src="/core/static/js/extensions.js"></script>
 {% endblock %} {% block page %}
+<div class="row q-col-gutter-md q-mb-md">
+  <div class="col-sm-3 col-xs-8 q-ml-auto">
+    <q-input v-model="searchTerm" label="Search extensions">
+      <q-icon
+        v-if="searchTerm !== ''"
+        name="close"
+        @click="searchTerm = ''"
+        class="cursor-pointer q-mt-lg"
+      />
+    </q-input>
+  </div>
+</div>
+
 <div class="row q-col-gutter-md">
   <div
     class="col-6 col-md-4 col-lg-3"
-    v-for="extension in g.extensions"
+    v-for="extension in filteredExtensions"
     :key="extension.code"
   >
     <q-card>

lnbits/static/js/base.js

@@ -392,7 +392,7 @@ window.windowMixin = {
     }
     if (window.extensions) {
       var user = this.g.user
-      this.g.extensions = Object.freeze(
+      const extensions = Object.freeze(
         window.extensions
           .map(function (data) {
             return window.LNbits.map.extension(data)
@@ -413,9 +413,13 @@ window.windowMixin = {
             return obj
           })
           .sort(function (a, b) {
-            return a.name > b.name
+            const nameA = a.name.toUpperCase()
+            const nameB = b.name.toUpperCase()
+            return nameA < nameB ? -1 : nameA > nameB ? 1 : 0
           })
       )
+
+      this.g.extensions = extensions
     }
   }
 }

lnbits/templates/base.html

@@ -228,7 +228,6 @@
     <script type="text/javascript">
       const themes = {{ LNBITS_THEME_OPTIONS  | tojson }}
       const LNBITS_DENOMINATION = {{ LNBITS_DENOMINATION   | tojson}}
-      console.log(LNBITS_DENOMINATION)
       if(themes && themes.length) {
         window.allowedThemes = themes.map(str => str.trim())
       }