refactor: move to lnbits-wallet-icon vue component (#3535)

lnbits/static/js/components/lnbits-wallet-icon.js

@@ -0,0 +1,76 @@
+window.app.component('lnbits-wallet-icon', {
+  template: '#lnbits-wallet-icon',
+  mixins: [window.windowMixin],
+  data() {
+    return {
+      icon: {
+        show: false,
+        data: {},
+        colorOptions: [
+          'primary',
+          'purple',
+          'orange',
+          'green',
+          'brown',
+          'blue',
+          'red',
+          'pink'
+        ],
+        options: [
+          'home',
+          'star',
+          'bolt',
+          'paid',
+          'savings',
+          'store',
+          'videocam',
+          'music_note',
+          'flight',
+          'train',
+          'directions_car',
+          'school',
+          'construction',
+          'science',
+          'sports_esports',
+          'sports_tennis',
+          'theaters',
+          'water',
+          'headset_mic',
+          'videogame_asset',
+          'person',
+          'group',
+          'pets',
+          'sunny',
+          'elderly',
+          'verified',
+          'snooze',
+          'mail',
+          'forum',
+          'shopping_cart',
+          'shopping_bag',
+          'attach_money',
+          'print_connect',
+          'dark_mode',
+          'light_mode',
+          'android',
+          'network_wifi',
+          'shield',
+          'fitness_center',
+          'lunch_dining'
+        ]
+      }
+    }
+  },
+  methods: {
+    setSelectedIcon(selectedIcon) {
+      this.icon.data.icon = selectedIcon
+    },
+    setSelectedColor(selectedColor) {
+      this.icon.data.color = selectedColor
+    },
+    setIcon() {
+      this.$emit('update-wallet', this.icon.data)
+      this.icon.show = false
+    }
+  }
+})

lnbits/static/js/wallet.js

@@ -44,62 +44,6 @@ window.WalletPageLogic = {
           payment_hash: null
         }
       },
-      icon: {
-        show: false,
-        data: {},
-        colorOptions: [
-          'primary',
-          'purple',
-          'orange',
-          'green',
-          'brown',
-          'blue',
-          'red',
-          'pink'
-        ],
-        options: [
-          'home',
-          'star',
-          'bolt',
-          'paid',
-          'savings',
-          'store',
-          'videocam',
-          'music_note',
-          'flight',
-          'train',
-          'directions_car',
-          'school',
-          'construction',
-          'science',
-          'sports_esports',
-          'sports_tennis',
-          'theaters',
-          'water',
-          'headset_mic',
-          'videogame_asset',
-          'person',
-          'group',
-          'pets',
-          'sunny',
-          'elderly',
-          'verified',
-          'snooze',
-          'mail',
-          'forum',
-          'shopping_cart',
-          'shopping_bag',
-          'attach_money',
-          'print_connect',
-          'dark_mode',
-          'light_mode',
-          'android',
-          'network_wifi',
-          'shield',
-          'fitness_center',
-          'lunch_dining'
-        ]
-      },
       update: {
         name: null,
         currency: null
@@ -220,16 +164,6 @@ window.WalletPageLogic = {
     handleBalanceUpdate(value) {
       this.g.wallet.sat = this.g.wallet.sat + value
     },
-    setSelectedIcon(selectedIcon) {
-      this.icon.data.icon = selectedIcon
-    },
-    setSelectedColor(selectedColor) {
-      this.icon.data.color = selectedColor
-    },
-    setIcon() {
-      this.updateWallet(this.icon.data)
-      this.icon.show = false
-    },
     createInvoice() {
       this.receive.status = 'loading'
       if (LNBITS_DENOMINATION != 'sats') {

lnbits/static/vendor.json

@@ -69,6 +69,7 @@
     "js/components/admin/lnbits-admin-audit.js",
     "js/components/lnbits-wallet-charts.js",
     "js/components/lnbits-wallet-api-docs.js",
+    "js/components/lnbits-wallet-icon.js",
     "js/components/lnbits-wallet-new.js",
     "js/components/lnbits-wallet-share.js",
     "js/components/lnbits-wallet-paylinks.js",