KintoneAppBuilder/frontend/src/pages/TenantDomain.vue

<template>
  <div class="q-pa-md">
    <q-table title="Treats" :rows="rows" :columns="columns" row-key="id" selection="single" :filter="filter"
      :loading="loading" v-model:selected="selected">

      <template v-slot:top>
        <q-btn color="primary" :disable="loading" label="新規" @click="addRow" />
        <q-btn class="q-ml-sm" color="primary" :disable="loading" label="編集" @click="editRow" />
        <q-btn class="q-ml-sm" color="primary" :disable="loading" label="削除" @click="removeRow" />
        <q-space />
        <q-input borderless dense debounce="300" color="primary" v-model="filter">
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>

    </q-table>

    <q-dialog :model-value="show" persistent>
      <q-card style="min-width: 400px">
        <q-card-section>
          <div class="text-h6">Kintone Account</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <q-form class="q-gutter-md">
            <q-input filled v-model="tenantid" label="Tenant" hint="Tenant ID" lazy-rules
              :rules="[val => val && val.length > 0 || 'Please type something']" />

            <q-input filled v-model="name" label="Your name *" hint="Kintone envirment name" lazy-rules
              :rules="[val => val && val.length > 0 || 'Please type something']" />

            <q-input filled type="url" v-model="url" label="Kintone url" hint="Kintone domain address" lazy-rules
              :rules="[val => val && val.length > 0, isDomain || 'Please type something']" />

            <q-input filled v-model="kintoneuser" label="Login user " hint="Kintone user name" lazy-rules
              :rules="[val => val && val.length > 0 || 'Please type something']" />

            <q-input v-model="kintonepwd" filled :type="isPwd ? 'password' : 'text'" hint="Password with toggle"
              label="User password">
              <template v-slot:append>
                <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="isPwd = !isPwd" />
              </template>
            </q-input>
          </q-form>
        </q-card-section>
        <q-card-actions align="right" class="text-primary">
          <q-btn label="Save" type="submit" color="primary" @click="onSubmit" />
          <q-btn label="Cancel" type="cancel" color="primary" flat class="q-ml-sm" @click="closeDg()" />
        </q-card-actions>
      </q-card>

    </q-dialog>

    <q-dialog v-model="confirm" persistent>
      <q-card>
        <q-card-section class="row items-center">
          <q-avatar icon="confirm" color="primary" text-color="white" />
          <span class="q-ml-sm">削除してもよろしいですか？</span>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="Cancel" color="primary" v-close-popup />
          <q-btn flat label="OK" color="primary" v-close-popup @click="deleteDomain()" />
        </q-card-actions>
      </q-card>
    </q-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { api } from 'boot/axios';

const columns = [
  { name: 'id' },
  {
    name: 'tenantid',
    required: true,
    label: 'Tenant',
    align: 'left',
    field: row => row.tenantid,
    format: val => `${val}`,
    sortable: true
  },
  { name: 'name', align: 'center', label: 'Name', field: 'name', sortable: true },
  { name: 'url', align: 'left', label: 'URL', field: 'url', sortable: true },
  { name: 'user', label: 'Account', field: 'user' },
  { name: 'password', label: 'Password', field: 'password' }
];


const loading = ref(false);
const filter = ref('');
const rows = ref([]);
const show = ref(false);
const confirm = ref(false);
const selected = ref([]);
const tenantid = ref('');
const name = ref('');
const url = ref('');
const isPwd = ref(true);
const kintoneuser = ref('');
const kintonepwd = ref('');

let editId = ref(0);

const getDomain = async () => {
  loading.value = true;
  const result= await api.get(`api/domains/1`);
  rows.value= result.data.map((item)=>{
    return { id: item.id, tenantid: item.tenantid, name: item.name, url: item.url, user: item.kintoneuser, password: item.kintonepwd }
  });
  loading.value = false;
}

onMounted(async () => {
   await getDomain();
})

// emulate fetching data from server
const addRow = () => {
  editId.value
  show.value = true;
}

const removeRow = () => {
  //loading.value = true
  confirm.value = true;
  let row = JSON.parse(JSON.stringify(selected.value[0]));
  if (selected.value.length === 0) {
    return;
  }
  editId.value = row.id;
}

const deleteDomain = () => {
  api.delete(`api/domain/${editId.value}`).then(() => {
    getDomain();
  })
  editId.value = 0;
  selected.value = [];
};

const editRow = () => {
  if (selected.value.length === 0) {
    return;
  }
  let row = JSON.parse(JSON.stringify(selected.value[0]));
  editId.value = row.id;
  tenantid.value = row.tenantid;
  name.value = row.name;
  url.value = row.url;
  kintoneuser.value = row.user;
  kintonepwd.value = row.password;
  isPwd.value = true;
  show.value = true;
};
const closeDg = () => {
  show.value = false;
  onReset();
}

const onSubmit = () => {
  if (editId.value !== 0) {
    api.put(`api/domain`, {
      'id': editId.value,
      'tenantid': tenantid.value,
      'name': name.value,
      'url': url.value,
      'kintoneuser': kintoneuser.value,
      'kintonepwd': kintonepwd.value
    }).then(() => {
      getDomain();
      closeDg();
      onReset();
    })
  }
  else {
    api.post(`api/domain`, {
      'id': 0,
      'tenantid': tenantid.value,
      'name': name.value,
      'url': url.value,
      'kintoneuser': kintoneuser.value,
      'kintonepwd': kintonepwd.value
    }).then(() => {
      getDomain();
      closeDg();
      onReset();
    })
  }
  selected.value = [];
}

const onReset = () => {
  name.value = '';
  url.value = '';
  kintoneuser.value = '';
  kintonepwd.value = '';
  isPwd.value = true;
  editId.value = 0;
}
</script>