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

lnbits/core/templates/core/wallet.html

@@ -203,15 +203,9 @@
                   :color="g.wallet.extra.color"
                 >
                 </q-avatar>
-                <q-btn
-                  @click="icon.show = true"
-                  round
-                  color="grey-5"
-                  text-color="black"
-                  size="xs"
-                  icon="edit"
-                  style="position: relative; left: -15px; bottom: -10px"
-                ></q-btn>
+                <lnbits-wallet-icon
+                  @update-wallet="updateWallet"
+                ></lnbits-wallet-icon>
                 <div class="text-subtitle1 q-mt-none q-mb-none">
                   <span v-text="$t('wallet')"></span>
                   <strong><em v-text="g.wallet.name"></em></strong>
@@ -453,50 +447,6 @@
         </div>
       </div>
 
-      <q-dialog v-model="icon.show" position="top">
-        <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-          <q-form @submit="setIcon" class="q-gutter-md">
-            <div class="q-gutter-sm q-pa-sm flex flex-wrap justify-center">
-              <!-- Loop through all icons -->
-              <q-btn
-                v-for="(thisIcon, index) in icon.options"
-                :key="index"
-                @click="setSelectedIcon(thisIcon)"
-                round
-                text-color="black"
-                :color="icon.data.icon === thisIcon ? icon.data.color || 'primary' : 'grey-5'"
-                size="md"
-                :icon="thisIcon"
-                class="q-mb-sm"
-              ></q-btn>
-            </div>
-            <div class="q-pa-sm flex justify-between items-center">
-              <div class="flex q-pl-lg">
-                <!-- Color options -->
-                <q-btn
-                  v-for="(color, index) in icon.colorOptions"
-                  :key="'color-' + index"
-                  @click="setSelectedColor(color)"
-                  round
-                  :color="color"
-                  size="xs"
-                  style="width: 24px; height: 24px; min-width: 24px; padding: 0"
-                  class="q-mr-xs"
-                ></q-btn>
-              </div>
-              <q-btn
-                unelevated
-                color="primary"
-                :disable="!icon.data.icon"
-                type="submit"
-              >
-                Save Icon
-              </q-btn>
-            </div>
-          </q-form>
-        </q-card>
-      </q-dialog>
-
       <q-dialog
         v-model="receive.show"
         position="top"

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",

lnbits/templates/components.vue

@@ -20,6 +20,7 @@ include('components/lnbits-manage-extension-list.vue') %} {%
 include('components/lnbits-manage-wallet-list.vue') %} {%
 include('components/lnbits-language-dropdown.vue') %} {%
 include('components/lnbits-payment-list.vue') %} {%
+include('components/lnbits-wallet-icon.vue') %} {%
 include('components/lnbits-wallet-new.vue') %} {%
 include('components/lnbits-label-selector.vue') %} {%
 include('components/lnbits-wallet-api-docs.vue') %} {%

lnbits/templates/components/lnbits-wallet-icon.vue

@@ -0,0 +1,56 @@
+<template id="lnbits-wallet-icon">
+  <q-btn
+    @click="icon.show = true"
+    round
+    color="grey-5"
+    text-color="black"
+    size="xs"
+    icon="edit"
+    style="position: relative; left: -15px; bottom: -10px"
+  ></q-btn>
+  <q-dialog v-model="icon.show" position="top">
+    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+      <q-form @submit="setIcon" class="q-gutter-md">
+        <div class="q-gutter-sm q-pa-sm flex flex-wrap justify-center">
+          <q-btn
+            v-for="(thisIcon, index) in icon.options"
+            :key="index"
+            @click="setSelectedIcon(thisIcon)"
+            round
+            text-color="black"
+            :color="
+              icon.data.icon === thisIcon
+                ? icon.data.color || 'primary'
+                : 'grey-5'
+            "
+            size="md"
+            :icon="thisIcon"
+            class="q-mb-sm"
+          ></q-btn>
+        </div>
+        <div class="q-pa-sm flex justify-between items-center">
+          <div class="flex q-pl-lg">
+            <q-btn
+              v-for="(color, index) in icon.colorOptions"
+              :key="'color-' + index"
+              @click="setSelectedColor(color)"
+              round
+              :color="color"
+              size="xs"
+              style="width: 24px; height: 24px; min-width: 24px; padding: 0"
+              class="q-mr-xs"
+            ></q-btn>
+          </div>
+          <q-btn
+            unelevated
+            color="primary"
+            :disable="!icon.data.icon"
+            type="submit"
+          >
+            Save Icon
+          </q-btn>
+        </div>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>

package.json

@@ -121,6 +121,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",