<template>
  <q-table
    :rows="serverData"
    :columns="columns"
    :filter="filter"
    title="Configurazione Server"
    row-key="chiave"
  >
    <template v-slot:body="props">
      <q-tr :props="props">
        <q-td key="chiave" :props="props">
          {{ props.row.chiave }}
          <q-popup-edit v-model="props.row.chiave" disable>
            <q-field count>
              <q-input v-model="props.row.chiave"/>
            </q-field>
          </q-popup-edit>
        </q-td>
        <q-td key="idapp" :props="props">
          {{ props.row.idapp }}
          <q-popup-edit v-model="props.row.idapp" disable>
            <q-field count>
              <q-input v-model="props.row.idapp"/>
            </q-field>
          </q-popup-edit>
        </q-td>
        <q-td key="userid" :props="props">
          {{ props.row.userId }}
          <q-popup-edit v-model="props.row.userId" disable>
            <q-field count>
              <q-input v-model="props.row.userId"/>
            </q-field>
          </q-popup-edit>
        </q-td>
        <q-td key="valore" :props="props">
          {{ props.row.valore }}
          <q-popup-edit
            v-model="props.row.valore"
            title="Aggiorna Valore"
            v-slot="scope"
            buttons
            @save="SaveValue"
            @show="selItem(props.row)">
            <q-input
              v-model="scope.value"
              @keyup.enter="scope.set"/>
          </q-popup-edit>
        </q-td>
      </q-tr>
    </template>
  </q-table>
</template>
<script lang="ts" src="./cfgServer.ts">
</script>

<style lang="scss" scoped>
@import './cfgServer';
</style>
