domain
This commit is contained in:
225
frontend/src/pages/TenantDomain.vue
Normal file
225
frontend/src/pages/TenantDomain.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<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 { useQuasar } from 'quasar'
|
||||
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 = reactive([])
|
||||
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('')
|
||||
|
||||
const $q = useQuasar()
|
||||
|
||||
let editId = ref(0);
|
||||
|
||||
const getDomain = () => {
|
||||
loading.value = true;
|
||||
api.get(`http://127.0.0.1:8000/api/domains/testtenant`).then(res => {
|
||||
rows.length = 0;
|
||||
res.data.forEach((item) => {
|
||||
rows.push({ id:item.id,tenantid: item.tenantid,name: item.name, url: item.url, user: item.kintoneuser, password: item.kintonepwd });
|
||||
}
|
||||
)
|
||||
}).finally(()=>{ loading.value = false; });
|
||||
|
||||
}
|
||||
onMounted(() => {
|
||||
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(`http://127.0.0.1:8000/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(`http://127.0.0.1:8000/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(`http://127.0.0.1:8000/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>
|
||||
@@ -111,7 +111,7 @@ export default {
|
||||
<q-table grid grid-header title="Domain" selection="single" :rows="rows" :columns="columns" v-model:selected="selected" row-key="name" :filter="filter" hide-header>
|
||||
<template v-slot:top>
|
||||
<div class="q-pa-md q-gutter-sm">
|
||||
<q-btn color="primary" size="sm" label=" 新規 " @click="newDomain()" dense />
|
||||
<q-btn color="primary" label="追加" @click="newDomain()" dense />
|
||||
</div>
|
||||
<q-space />
|
||||
<q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
|
||||
@@ -125,21 +125,24 @@ export default {
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="q-table__grid-item-row">
|
||||
<div class="q-table__grid-item-title">Name</div>
|
||||
<div class="q-table__grid-item-title">Domain</div>
|
||||
<div class="q-table__grid-item-value">{{ props.row.name }}</div>
|
||||
</div>
|
||||
<div class="q-table__grid-item-row">
|
||||
<div class="q-table__grid-item-title">Domain</div>
|
||||
<div class="q-table__grid-item-title">URL</div>
|
||||
<div class="q-table__grid-item-value">{{ props.row.url }}</div>
|
||||
</div>
|
||||
<div class="q-table__grid-item-row">
|
||||
<div class="q-table__grid-item-title">Account</div>
|
||||
<div class="q-table__grid-item-value">{{ props.row.kintoneuser }}</div>
|
||||
</div>
|
||||
<div class="q-table__grid-item-row">
|
||||
<div class="q-table__grid-item-value">{{isActive(props.row.id) }}</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat @click = "editDomain(props.row)">編集</q-btn>
|
||||
<q-btn flat @click = "activeDomain(props.row.id)">有効</q-btn>
|
||||
<q-btn flat @click = "deleteConfirm(props.row)">削除</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
@@ -147,40 +150,9 @@ export default {
|
||||
</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="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-toggle v-model="active" label="Active Domain" />
|
||||
</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>
|
||||
<show-dialog v-model:visible="show" name="ドメイン" @close="closeDg">
|
||||
<domain-select ref="domainDg" name="ドメイン" type="multiple"></domain-select>
|
||||
</show-dialog>
|
||||
|
||||
<q-dialog v-model="confirm" persistent>
|
||||
<q-card>
|
||||
@@ -201,23 +173,23 @@ export default {
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar'
|
||||
import { ref, onMounted, reactive } from 'vue'
|
||||
import { api } from 'boot/axios';
|
||||
import ShowDialog from 'components/ShowDialog.vue';
|
||||
import DomainSelect from 'components/DomainSelect.vue';
|
||||
import { useAuthStore } from 'stores/useAuthStore';
|
||||
|
||||
const authStore = useAuthStore();
|
||||
import { api } from 'boot/axios';
|
||||
|
||||
const $q = useQuasar()
|
||||
|
||||
const domainDg = ref();
|
||||
const selected = ref([])
|
||||
const name = ref('')
|
||||
const active = ref(false)
|
||||
const isPwd =ref(true)
|
||||
const url =ref('')
|
||||
const kintoneuser =ref('')
|
||||
const kintonepwd =ref('')
|
||||
|
||||
const show = ref(false);
|
||||
const confirm = ref(false)
|
||||
|
||||
let editId = ref(0);
|
||||
let activedomainid = ref(0);
|
||||
|
||||
const columns = [
|
||||
{ name: 'id'},
|
||||
@@ -231,25 +203,29 @@ const columns = [
|
||||
},
|
||||
{ name: 'url', align: 'center', label: 'Domain', field: 'url', sortable: true },
|
||||
{ name: 'kintoneuser', label: 'User', field: 'kintoneuser', sortable: true },
|
||||
{ name: 'kintonepwd' }
|
||||
{ name: 'kintonepwd' },
|
||||
{ name: 'active', field: 'active'}
|
||||
]
|
||||
|
||||
const rows = reactive([])
|
||||
|
||||
const isActive = (id:number) =>{
|
||||
if(id == activedomainid.value)
|
||||
return "Active";
|
||||
else
|
||||
return "Inactive";
|
||||
}
|
||||
|
||||
const newDomain = () => {
|
||||
editId.value = 0;
|
||||
show.value = true;
|
||||
};
|
||||
|
||||
const editDomain = (row:object) => {
|
||||
editId.value = row.id;
|
||||
name.value = row.name;
|
||||
url.value = row.url;
|
||||
kintoneuser.value = row.kintoneuser;
|
||||
kintonepwd.value = row.kintonepwd;
|
||||
isPwd.value = true;
|
||||
active.value = false;
|
||||
show.value = true;
|
||||
|
||||
const activeDomain = (id:number) => {
|
||||
api.put(`http://127.0.0.1:8000/api/activedomain/1/`+ id).then(() =>{
|
||||
getDomain();
|
||||
})
|
||||
};
|
||||
|
||||
const deleteConfirm = (row:object) => {
|
||||
@@ -258,21 +234,33 @@ const deleteConfirm = (row:object) => {
|
||||
};
|
||||
|
||||
const deleteDomain = () => {
|
||||
api.delete(`http://127.0.0.1:8000/api/domain/1/`+ editId.value).then(() =>{
|
||||
api.delete(`http://127.0.0.1:8000/api/domain/`+ editId.value+'/1').then(() =>{
|
||||
getDomain();
|
||||
})
|
||||
editId.value = 0;
|
||||
};
|
||||
|
||||
const closeDg = () => {
|
||||
show.value = false;
|
||||
onReset();
|
||||
const closeDg = (val:string) => {
|
||||
if (val == 'OK') {
|
||||
let dodmainids =[];
|
||||
let domains = JSON.parse(JSON.stringify(domainDg.value.selected));
|
||||
for(var key in domains)
|
||||
{
|
||||
dodmainids.push(domains[key].id);
|
||||
}
|
||||
api.post(`http://127.0.0.1:8000/api/domain/1`, dodmainids).then(() =>{getDomain();});
|
||||
}
|
||||
|
||||
};
|
||||
const getDomain = () => {
|
||||
api.get(`http://127.0.0.1:8000/api/activedomain/1`).then(res => {
|
||||
activedomainid.value = res.data.id;
|
||||
authStore.changedomain(res.data.name);
|
||||
});
|
||||
api.get(`http://127.0.0.1:8000/api/domain/1`).then(res => {
|
||||
rows.length = 0;
|
||||
res.data.forEach((item) => {
|
||||
rows.push({ id:item.id,name: item.name, url: item.url, kintoneuser: item.kintoneuser, kintonepwd: item.kintonepwd });
|
||||
rows.push({ id:item.id,name: item.name, url: item.url, kintoneuser: item.kintoneuser, kintonepwd: item.kintonepwd});
|
||||
}
|
||||
)
|
||||
});
|
||||
@@ -286,68 +274,6 @@ const isDomain = (val) =>{
|
||||
// return (domainPattern.test(val) || '無効なURL')
|
||||
return true;
|
||||
};
|
||||
|
||||
const onSubmit = () =>{
|
||||
if(editId.value !== 0)
|
||||
{
|
||||
api.put(`http://127.0.0.1:8000/api/domain`,{
|
||||
'id': editId.value,
|
||||
'userid': 1,
|
||||
'name': name.value,
|
||||
'url': url.value,
|
||||
'kintoneuser': kintoneuser.value,
|
||||
'kintonepwd': kintonepwd.value,
|
||||
'active': active.value
|
||||
}).then(() =>{
|
||||
getDomain();
|
||||
closeDg();
|
||||
onReset();
|
||||
})
|
||||
}
|
||||
else
|
||||
{
|
||||
api.post(`http://127.0.0.1:8000/api/domain`,{
|
||||
'id': 0,
|
||||
'userid': 1,
|
||||
'name': name.value,
|
||||
'url': url.value,
|
||||
'kintoneuser': kintoneuser.value,
|
||||
'kintonepwd': kintonepwd.value,
|
||||
'active': active.value
|
||||
}).then(() =>{
|
||||
getDomain();
|
||||
closeDg();
|
||||
onReset();
|
||||
})
|
||||
}
|
||||
// if (accept.value !== true) {
|
||||
// $q.notify({
|
||||
// color: 'red-5',
|
||||
// textColor: 'white',
|
||||
// icon: 'warning',
|
||||
// message: 'You need to accept the license and terms first'
|
||||
// })
|
||||
// }
|
||||
// else {
|
||||
// $q.notify({
|
||||
// color: 'green-4',
|
||||
// textColor: 'white',
|
||||
// icon: 'cloud_done',
|
||||
// message: 'Submitted'
|
||||
// })
|
||||
// }
|
||||
};
|
||||
|
||||
const onReset = () => {
|
||||
name.value = '';
|
||||
url.value = '';
|
||||
kintoneuser.value = '';
|
||||
kintonepwd.value ='';
|
||||
isPwd.value = true;
|
||||
active.value = false;
|
||||
editId.value = 0;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user