281 lines
7.6 KiB
Vue
281 lines
7.6 KiB
Vue
<!-- <template>
|
||
<div class="q-pa-md" style="max-width: 400px">
|
||
|
||
<q-form
|
||
@submit="onSubmit"
|
||
@reset="onReset"
|
||
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="username"
|
||
label="Login user "
|
||
hint="Kintone user name"
|
||
lazy-rules
|
||
:rules="[ val => val && val.length > 0 || 'Please type something']"
|
||
/>
|
||
|
||
<q-input v-model="password" 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="accept" label="Active Domain" />
|
||
|
||
<div>
|
||
<q-btn label="Submit" type="submit" color="primary"/>
|
||
<q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
|
||
</div>
|
||
</q-form>
|
||
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { useQuasar } from 'quasar'
|
||
import { ref } from 'vue'
|
||
|
||
export default {
|
||
setup () {
|
||
const $q = useQuasar()
|
||
|
||
const name = ref(null)
|
||
const age = ref(null)
|
||
const accept = ref(false)
|
||
const isPwd =ref(true)
|
||
|
||
return {
|
||
name,
|
||
age,
|
||
accept,
|
||
isPwd,
|
||
isDomain(val) {
|
||
const domainPattern = /^https?\/\/:([a-zA-Z] +\.){1}([a-zA-Z]+)\.([a-zA-Z]+)$/;
|
||
return (domainPattern.test(val) || '無効なURL')
|
||
},
|
||
|
||
onSubmit () {
|
||
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'
|
||
})
|
||
}
|
||
},
|
||
|
||
onReset () {
|
||
name.value = null
|
||
age.value = null
|
||
accept.value = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script> -->
|
||
|
||
|
||
<template>
|
||
<div class="q-pa-md">
|
||
<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" label="追加" @click="newDomain()" dense />
|
||
</div>
|
||
<q-space />
|
||
<q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
|
||
<template v-slot:append>
|
||
<q-icon name="search" />
|
||
</template>
|
||
</q-input>
|
||
</template>
|
||
<template v-slot:item="props">
|
||
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
|
||
<q-card>
|
||
<q-card-section>
|
||
<div class="q-table__grid-item-row">
|
||
<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">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 = "activeDomain(props.row.id)">有効</q-btn>
|
||
<q-btn flat @click = "deleteConfirm(props.row)">削除</q-btn>
|
||
</q-card-actions>
|
||
</q-card>
|
||
</div>
|
||
</template>
|
||
</q-table>
|
||
|
||
<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>
|
||
<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 { useQuasar } from 'quasar'
|
||
import { ref, onMounted, reactive } from 'vue'
|
||
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 show = ref(false);
|
||
const confirm = ref(false)
|
||
|
||
let editId = ref(0);
|
||
let activedomainid = ref(0);
|
||
|
||
const columns = [
|
||
{ name: 'id'},
|
||
{
|
||
name: 'name',
|
||
required: true,
|
||
label: 'Name',
|
||
align: 'left',
|
||
field: row => row.name,
|
||
sortable: true
|
||
},
|
||
{ name: 'url', align: 'center', label: 'Domain', field: 'url', sortable: true },
|
||
{ name: 'kintoneuser', label: 'User', field: 'kintoneuser', sortable: true },
|
||
{ 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 activeDomain = (id:number) => {
|
||
api.put(`http://127.0.0.1:8000/api/activedomain/`+ id).then(() =>{
|
||
getDomain();
|
||
})
|
||
};
|
||
|
||
const deleteConfirm = (row:object) => {
|
||
confirm.value = true;
|
||
editId.value = row.id;
|
||
};
|
||
|
||
const deleteDomain = () => {
|
||
api.delete(`http://127.0.0.1:8000/api/domain/`+ editId.value+'/1').then(() =>{
|
||
getDomain();
|
||
})
|
||
editId.value = 0;
|
||
};
|
||
|
||
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`, dodmainids).then(() =>{getDomain();});
|
||
}
|
||
|
||
};
|
||
const getDomain = () => {
|
||
api.get(`http://127.0.0.1:8000/api/activedomain`).then(res => {
|
||
activedomainid.value = res.data.id;
|
||
authStore.changedomain(res.data.name);
|
||
});
|
||
api.get(`http://127.0.0.1:8000/api/domain`).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});
|
||
}
|
||
)
|
||
});
|
||
}
|
||
onMounted(() => {
|
||
getDomain();
|
||
})
|
||
|
||
const isDomain = (val) =>{
|
||
// const domainPattern = /^https\/\/:([a-zA-Z] +\.){1}([a-zA-Z]+)\.([a-zA-Z]+)$/;
|
||
// return (domainPattern.test(val) || '無効なURL')
|
||
return true;
|
||
};
|
||
</script>
|
||
|
||
|
||
|