feat: simplify extension page component and make filtering reactive (#3589)

lnbits/static/js/globals.js

@@ -12,7 +12,7 @@ window.g = Vue.reactive({
   isUserAuthorized: !!Quasar.Cookies.get('is_lnbits_user_authorized'),
   offline: !navigator.onLine,
   visibleDrawer: false,
-  extensions: [],
+  extensions: WINDOW_SETTINGS.EXTENSIONS,
   user: null,
   wallet: {},
   fiatBalance: 0,

lnbits/static/js/pages/extensions.js

@@ -1,6 +1,6 @@
 window.PageExtensions = {
   template: '#page-extensions',
-  mixins: [windowMixin],
+  mixins: [window.windowMixin],
   data() {
     return {
       extbuilderEnabled: false,
@@ -10,7 +10,7 @@ window.PageExtensions = {
       searchTerm: '',
       tab: 'all',
       manageExtensionTab: 'releases',
-      filteredExtensions: null,
+      filteredExtensions: [],
       updatableExtensions: [],
       showUninstallDialog: false,
       showManageExtensionDialog: false,
@@ -33,12 +33,12 @@ window.PageExtensions = {
   watch: {
     searchTerm(term) {
       this.filterExtensions(term, this.tab)
+    },
+    tab(val) {
+      this.filterExtensions(this.searchTerm, val)
     }
   },
   methods: {
-    handleTabChanged(tab) {
-      this.filterExtensions(this.searchTerm, tab)
-    },
     filterExtensions(term, tab) {
       // Filter the extensions list
       function extensionNameContains(searchTerm) {
@@ -65,7 +65,6 @@ window.PageExtensions = {
           details_link:
             e.installedRelease?.details_link || e.latestRelease?.details_link
         }))
-      this.tab = tab
     },
 
     async installExtension(release) {
@@ -74,29 +73,31 @@ window.PageExtensions = {
       this.unsubscribeFromPaylinkWs()
 
       const extension = this.selectedExtension
-      extension.inProgress = true
+      this.selectedExtension.inProgress = true
       this.showManageExtensionDialog = false
       release.payment_hash =
         release.payment_hash || this.getPaylinkHash(release.pay_link)
 
       LNbits.api
         .request('POST', `/api/v1/extension`, this.g.user.wallets[0].adminkey, {
-          ext_id: extension.id,
+          ext_id: this.selectedExtension.id,
           archive: release.archive,
           source_repo: release.source_repo,
           payment_hash: release.payment_hash,
           version: release.version
         })
         .then(response => {
+          const extension = this.extensions.find(
+            ext => ext.id === this.selectedExtension.id
+          )
           extension.isAvailable = true
           extension.isInstalled = true
           extension.installedRelease = release
           this.toggleExtension(extension)
           extension.inProgress = false
-          this.filteredExtensions = this.extensions.concat([])
+          this.selectedExtension = extension
-          this.handleTabChanged('installed')
+          this.extensions = this.extensions.concat([])
           this.tab = 'installed'
-          this.refreshRoute()
         })
         .catch(err => {
           console.warn(err)
@@ -105,34 +106,32 @@ window.PageExtensions = {
         })
     },
     async uninstallExtension() {
-      const extension = this.selectedExtension
       this.showManageExtensionDialog = false
       this.showUninstallDialog = false
-      extension.inProgress = true
+      this.selectedExtension.inProgress = true
       LNbits.api
         .request(
           'DELETE',
-          `/api/v1/extension/${extension.id}`,
+          `/api/v1/extension/${this.selectedExtension.id}`,
           this.g.user.wallets[0].adminkey
         )
         .then(response => {
+          const extension = this.extensions.find(
+            ext => ext.id === this.selectedExtension.id
+          )
           extension.isAvailable = false
           extension.isInstalled = false
           extension.inProgress = false
           extension.installedRelease = null
-          this.filteredExtensions = this.extensions.concat([])
+          this.filteredExtensions = this.filteredExtensions.filter(
-          this.handleTabChanged('installed')
+            ext => ext.id !== extension.id
-          this.tab = 'installed'
+          )
           Quasar.Notify.create({
             type: 'positive',
             message: 'Extension uninstalled!'
           })
           if (this.uninstallAndDropDb) {
             this.showDropDb()
-          } else {
-            setTimeout(() => {
-              this.refreshRoute()
-            }, 300)
           }
         })
         .catch(err => {
@@ -160,9 +159,6 @@ window.PageExtensions = {
             type: 'positive',
             message: 'Extension DB deleted!'
           })
-          setTimeout(() => {
-            this.refreshRoute()
-          }, 300)
         })
         .catch(err => {
           LNbits.utils.notifyApiError(err)
@@ -626,9 +622,6 @@ window.PageExtensions = {
         message: `${count ? count : 'No'} extensions updated!`
       })
       this.showUpdateAllDialog = false
-      setTimeout(() => {
-        this.refreshRoute()
-      }, 2000)
     },
     async fetchAllExtensions() {
       try {
@@ -644,20 +637,18 @@ window.PageExtensions = {
   async created() {
     this.extensions = await this.fetchAllExtensions()
     this.extbuilderEnabled = user.admin || this.LNBITS_EXT_BUILDER
-    this.filteredExtensions = this.extensions.concat([])
+
-    const hash = window.location.hash.replace('#', '')
+    const extId = window.location.hash.replace('#', '')
-    const ext = this.filteredExtensions.find(ext => ext.id === hash)
+    const ext = this.extensions.find(ext => ext.id === extId)
+
     if (ext) {
       this.searchTerm = ext.id
-      this.handleTabChanged(ext.isInstalled ? 'installed' : 'all')
+      if (ext.isInstalled) this.tab = 'installed'
-      this.tab = ext.isInstalled ? 'installed' : 'all'
-    } else {
-      const hasInstalled = this.filteredExtensions.some(ext => ext.isInstalled)
-      this.handleTabChanged(hasInstalled ? 'installed' : 'all')
-      this.tab = hasInstalled ? 'installed' : 'all'
     }
     this.updatableExtensions = this.extensions.filter(ext =>
       this.hasNewVersion(ext)
     )
+
+    this.filterExtensions(this.searchTerm, this.tab)
   }
 }

lnbits/static/js/windowMixin.js

@@ -59,14 +59,6 @@ window.windowMixin = {
           }
         }
       })
-    },
-    refreshRoute() {
-      const path = window.location.pathname
-      console.log(path)
-
-      this.$router.push('/temp').then(() => {
-        this.$router.replace({path})
-      })
     }
   },
   created() {

lnbits/templates/pages/extensions.vue

@@ -4,12 +4,7 @@
       <q-card>
         <div>
           <div class="q-gutter-y-md">
-            <q-tabs
+            <q-tabs v-model="tab" active-color="primary" align="left">
-              :model-value="tab"
-              @update:model-value="handleTabChanged"
-              active-color="primary"
-              align="left"
-            >
               <q-tab name="installed" :label="$t('installed')"></q-tab>
               <q-tab name="all" :label="$t('all')"></q-tab>
               <q-tab name="featured" :label="$t('featured')"></q-tab>
@@ -1080,7 +1075,6 @@
           color="grey"
           v-text="$t('update')"
         ></q-btn>
-
         <q-btn
           v-close-popup
           flat