lnbits/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.html

<div>
  <q-card>
    <q-card-section>
      <div class="row items-center no-wrap q-mb-md">
        <div class="col">
          <q-btn unelevated color="primary" @click="formDialog.show = true"
            >Add Wallet Account
          </q-btn>
        </div>

        <div class="col-auto q-pr-lg"></div>
        <div class="col-auto q-pl-lg">
          <q-input
            borderless
            dense
            debounce="300"
            v-model="filter"
            placeholder="Search"
          >
            <template v-slot:append>
              <q-icon name="search"></q-icon>
            </template>
          </q-input>
        </div>
      </div>
      <q-table
        flat
        dense
        :data="walletAccounts"
        row-key="id"
        :columns="walletsTable.columns"
        :pagination.sync="walletsTable.pagination"
        :filter="filter"
      >
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th auto-width></q-th>
            <q-th
              v-for="col in props.cols"
              :key="col.name"
              :props="props"
              auto-width
            >
              {{ col.label }}
            </q-th>
            <q-th auto-width></q-th>
          </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td auto-width>
              <q-btn
                size="sm"
                color="accent"
                round
                dense
                @click="props.row.expanded= !props.row.expanded"
                :icon="props.row.expanded? 'remove' : 'add'"
              />
            </q-td>
            <q-td key="new">
              <q-badge
                size="lg"
                color="secondary"
                class="q-mr-md cursor-pointer"
                @click="openGetFreshAddressDialog(props.row.id)"
              >
                New Receive Address
              </q-badge>
            </q-td>

            <q-td key="title" :props="props" :class="">
              <div>{{props.row.title}}</div>
            </q-td>
            <q-td key="amount" :props="props" :class="">
              <div>{{getAmmountForWallet(props.row.id)}}</div>
            </q-td>
            <q-td key="type" :props="props" :class="">
              <div>{{props.row.type}}</div>
            </q-td>
            <q-td key="id" :props="props" :class="">
              <div>{{props.row.id}}</div>
            </q-td>
          </q-tr>
          <q-tr v-show="props.row.expanded" :props="props">
            <q-td colspan="100%">
              <div class="row items-center q-mt-md q-mb-lg">
                <div class="col-2 q-pr-lg"></div>
                <div class="col-4 q-pr-lg">
                  <q-btn
                    unelevated
                    color="secondary"
                    @click="openGetFreshAddressDialog(props.row.id)"
                    >New Receive Address</q-btn
                  >
                </div>
                <div class="col-4">
                  {{getAccountDescription(props.row.type)}}
                </div>
                <div class="col-2 q-pr-lg"></div>
              </div>

              <div class="row items-center no-wrap q-mb-md">
                <div class="col-2 q-pr-lg">Master Pubkey:</div>
                <div class="col-8">
                  <q-input
                    v-model="props.row.masterpub"
                    filled
                    readonly
                    type="textarea"
                  />
                </div>
                <div class="col-2 q-pr-lg"></div>
              </div>
              <div class="row items-center no-wrap q-mb-md">
                <div class="col-2 q-pr-lg">Last Address Index:</div>
                <div class="col-8">
                  <span v-if="props.row.address_no >= 0"
                    >{{props.row.address_no}}</span
                  >
                  <span v-if="props.row.address_no < 0">none</span>
                </div>
                <div class="col-2 q-pr-lg"></div>
              </div>
              <div class="row items-center no-wrap q-mb-md">
                <div class="col-2 q-pr-lg">Fingerprint:</div>
                <div class="col-8">{{props.row.fingerprint}}</div>
                <div class="col-2 q-pr-lg"></div>
              </div>
              <div class="row items-center q-mt-md q-mb-lg">
                <div class="col-2 q-pr-lg"></div>
                <div class="col-4 q-pr-lg">
                  <q-btn
                    unelevated
                    color="pink"
                    icon="cancel"
                    @click="deleteWalletAccount(props.row.id)"
                    >Delete</q-btn
                  >
                </div>
                <div class="col-4"></div>
                <div class="col-2 q-pr-lg"></div>
              </div>
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </q-card-section>
  </q-card>

  <q-dialog v-model="formDialog.show" position="top" @hide="closeFormDialog">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="addWalletAccount" class="q-gutter-md">
        <q-input
          filled
          dense
          v-model.trim="formDialog.data.title"
          type="text"
          label="Title"
        ></q-input>

        <q-input
          filled
          type="textarea"
          v-model="formDialog.data.masterpub"
          height="50px"
          autogrow
          label="Account Extended Public Key; xpub, ypub, zpub; Bitcoin Descriptor"
        ></q-input>

        <q-select
          filled
          dense
          emit-value
          v-model="formDialog.data.network"
          :options="networOptions"
          label="Network"
        ></q-select>

        <div class="row q-mt-lg">
          <q-btn
            unelevated
            color="primary"
            :disable="
                formDialog.data.masterpub == null ||
                formDialog.data.title == null"
            type="submit"
            >Add Watch-Only Account</q-btn
          >
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</div>