From 0993b8dbadae1fbde47e877a711c7f52fd698409 Mon Sep 17 00:00:00 2001
From: Tiago Vasconcelos <talvasconcelos@gmail.com>
Date: Mon, 7 Oct 2024 17:26:24 +0100
Subject: [PATCH] attempt to make chip component in settings dynamic fields

it's not updating data
---
 lnbits/static/js/components.js  | 36 +++++++++++++++++++++++++++++++--
 lnbits/templates/components.vue | 32 +++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/lnbits/static/js/components.js b/lnbits/static/js/components.js
index 85c69d17d..f8058e711 100644
--- a/lnbits/static/js/components.js
+++ b/lnbits/static/js/components.js
@@ -409,7 +409,7 @@ window.app.component('lnbits-dynamic-fields', {
   data() {
     return {
       formData: null,
-      rules: [val => !!val || 'Field is required']
+      rules: [val => !!val || 'Field is required'],
     }
   },
   methods: {
@@ -428,13 +428,45 @@ window.app.component('lnbits-dynamic-fields', {
     },
     handleValueChanged() {
       this.$emit('update:model-value', this.formData)
-    }
+    },
   },
   created() {
     this.formData = this.buildData(this.options, this.modelValue)
   }
 })
 
+window.app.component('lnbits-dynamic-chips', {
+  template: '#lnbits-dynamic-chips',
+  mixins: [window.windowMixin],
+  props: ['modelValue'],
+  data() {
+    return {
+      chip: '',
+      chips: []
+    }
+  },
+  methods: {
+    addChip() {
+      if (!this.chip) return
+      this.chips.push(this.chip)
+      this.chip = ''
+      this.modelValue = this.chips.join(',')
+    },
+    removeChip(index) {
+      this.chips.splice(index, 1)
+      this.$emit('update:model-value', this.chips.join(','))
+    }
+  },
+  created() {
+    if (typeof this.modelValue === 'string') {
+      this.chips = this.modelValue.split(',')
+    } else {
+      this.chips = [...this.modelValue]
+    }
+  }
+
+})
+
 window.app.component('lnbits-update-balance', {
   template: '#lnbits-update-balance',
   mixins: [window.windowMixin],
diff --git a/lnbits/templates/components.vue b/lnbits/templates/components.vue
index fdeb71f22..fb2f496f0 100644
--- a/lnbits/templates/components.vue
+++ b/lnbits/templates/components.vue
@@ -391,6 +391,12 @@
             style="display: none"
             :rules="applyRules(o.required)"
           ></q-input>
+          <div v-else-if="o.type === 'chips'">
+            <lnbits-dynamic-chips
+              :model-value="formData[o.name]"
+              @update:model-value="handleValueChanged"
+            ></lnbits-dynamic-chips>
+          </div>
           <q-input
             v-else
             v-model="formData[o.name]"
@@ -407,6 +413,32 @@
   </div>
 </template>
 
+<template id="lnbits-dynamic-chips">
+  <q-input
+    filled
+    v-model="chip"
+    @keydown.enter.prevent="addChip"
+    type="text"
+    label="wss://...."
+    hint="Add relays"
+    class="q-mb-md"
+  >
+    <q-btn @click="addChip" dense flat icon="add"></q-btn>
+  </q-input>
+  <div>
+    <q-chip
+      v-for="(chip, i) in chips"
+      :key="chip"
+      removable
+      @remove="removeChip(i)"
+      color="primary"
+      text-color="white"
+      :label="chip"
+    >
+    </q-chip>
+  </div>
+</template>
+
 <template id="lnbits-notifications-btn">
   <q-btn
     v-if="g.user.wallets"