alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some UI

Browse Source
This commit is contained in:
xue jiahao
2024-12-05 17:41:00 +08:00
parent a6576827fd
commit 4336462ff1
4 changed files with 141 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/components/UserDomain/DomainCard.vue
View File

@@ -1,14 +1,16 @@
<template> <template>
<q-card :class="['domain-card', small ? 'small' : '']"> <q-card :class="['domain-card', small ? 'small' : '', item.id == activeId ? 'default': '']">
<q-card-section :class="[small ? 'q-py-sm' : '']"> <q-card-section :class="[small ? 'q-py-sm' : '']">
<div class="row items-center no-wrap"> <div class="row no-wrap">
<div class="col"> <div class="col">
<div :class="[small ? 'text-subtitle2' : 'text-h6']">{{ item.name }} <q-icon v-if="isNotOwnerFunc(item.id)" name="account_circle" color="teal" class="q-mb-xs"></q-icon> </div> <div :class="[small ? 'text-subtitle2' : 'text-h6', 'ellipsis']">{{ item.name }}</div>
<div :class="[small ? 'text-caption' : 'text-subtitle2']">{{ item.url }}</div> <div :class="[small ? 'text-caption' : 'text-subtitle2']">{{ item.url }}</div>
</div> </div>
<!-- <div v-if="isNotOwnerFunc(item.id)" class="col-auto"> <div v-if="!isOwnerFunc(item.owner.id)" class="col-auto">
<q-icon name="account_circle" color="teal" size="2em"></q-icon> <!-- <q-badge color="secondary" text-color="white" align="middle" class="q-mb-xs" label="他人の所有" /> -->
</div> --> <q-chip square color="secondary" text-color="white" icon="people" label="他人の所有" size="sm" />
</div>
</div> </div>
</q-card-section> </q-card-section>
<q-card-section> <q-card-section>
@@ -17,13 +19,13 @@
<div class="text-grey-7 text-caption text-weight-medium"> <div class="text-grey-7 text-caption text-weight-medium">
アカウント アカウント
</div> </div>
<div class="smaller-font-size">{{ item.kintoneuser }}</div> <div class="smaller-font-size">{{ item.user }}</div>
</div> </div>
<div v-if="isNotOwnerFunc(item.id)" class="col-auto"> <div class="col-auto">
<div class="text-grey-7 text-caption text-weight-medium"> <div class="text-grey-7 text-caption text-weight-medium">
所有者 所有者
</div> </div>
<div class="smaller-font-size">{{ item.owner }}</div> <div class="smaller-font-size">{{ item.owner.fullName }}</div>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
@@ -34,16 +36,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, computed } from 'vue'; import { defineProps, computed } from 'vue';
import { IDomain } from 'src/types/DomainTypes'; import { IDomainOwnerDisplay } from 'src/types/DomainTypes';
import { useAuthStore } from 'stores/useAuthStore'; import { useAuthStore } from 'stores/useAuthStore';
const props = defineProps<{ const props = defineProps<{
item: IDomain; item: IDomainOwnerDisplay;
small: boolean; small: boolean;
activeId: number;
}>(); }>();
const authStore = useAuthStore(); const authStore = useAuthStore();
const isNotOwnerFunc = computed(() => (ownerId: string) => { const isOwnerFunc = computed(() => (ownerId: string) => {
return ownerId == authStore.userId; return ownerId == authStore.userId;
}); });
@@ -53,6 +56,12 @@ const isNotOwnerFunc = computed(() => (ownerId: string) => {
.domain-card.small { .domain-card.small {
width: 18rem; width: 18rem;
} }
.domain-card.default {
box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2),
0 10px 14px 1px rgba(0, 0, 0, 0.14),
0 4px 18px 3px rgba(0, 0, 0, 0.12),
inset 0 0 0px 2px #1976D2;
}
.domain-card { .domain-card {
width: 22rem; width: 22rem;
word-break: break-word; word-break: break-word;

39
frontend/src/pages/AppManagement.vue
View File

@@ -16,6 +16,11 @@
</template> </template>
</q-input> </q-input>
</template> </template>
<template v-slot:body-cell-name="prop">
<q-td :props="prop">
<q-btn flat dense :label="prop.row.name" @click="toEditFlowPage(prop.row)" ></q-btn>
</q-td>
</template>
<template v-slot:body-cell-url="prop"> <template v-slot:body-cell-url="prop">
<q-td :props="prop"> <q-td :props="prop">
<a :href="prop.row.url" target="_blank" :title="prop.row.name" > <a :href="prop.row.url" target="_blank" :title="prop.row.name" >
@@ -25,11 +30,31 @@
</template> </template>
<template v-slot:body-cell-actions="p"> <template v-slot:body-cell-actions="p">
<q-td :props="p"> <q-td :props="p">
<q-btn-group flat> <q-btn flat padding="xs" round size="1em" icon="more_vert">
<q-btn flat color="primary" padding="xs" size="1em" icon="edit_note" @click="toEditFlowPage(p.row)" /> <q-menu >
<q-btn disabled flat color="primary" padding="xs" size="1em" icon="history" @click="showHistory(p.row)" /> <q-list dense style="min-width: 100px">
<q-btn disabled flat color="negative" padding="xs" size="1em" icon="delete_outline" @click="removeRow(p.row)" /> <q-item clickable v-close-popup @click="toEditFlowPage(p.row)">
</q-btn-group> <q-item-section>
<q-icon size="1.2em" name="account_tree" />
</q-item-section>
<q-item-section>設定</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="showHistory(p.row)">
<q-item-section>
<q-icon size="1.2em" name="history" />
</q-item-section>
<q-item-section>履歴</q-item-section>
</q-item>
<q-separator />
<q-item class="text-red" clickable v-close-popup @click="removeRow(p.row)">
<q-item-section>
<q-icon size="1.2em" name="delete_outline" />
</q-item-section>
<q-item-section>削除</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td> </q-td>
</template> </template>
</q-table> </q-table>
@@ -78,7 +103,7 @@ const columns = [
{ name: 'user', label: '最後更新者', field: 'user', align: 'left', sortable: true}, { name: 'user', label: '最後更新者', field: 'user', align: 'left', sortable: true},
{ name: 'updatetime', label: '最後更新日', field: 'updatetime', align: 'left', sortable: true}, { name: 'updatetime', label: '最後更新日', field: 'updatetime', align: 'left', sortable: true},
{ name: 'version', label: 'バージョン', field: 'version', align: 'left', sortable: true, sort: numberStringSorting }, { name: 'version', label: 'バージョン', field: 'version', align: 'left', sortable: true, sort: numberStringSorting },
{ name: 'actions', label: '操作', field: 'actions' } { name: 'actions', label: '', field: 'actions' }
]; ];
const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 }); const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
@@ -96,7 +121,7 @@ const getApps = async () => {
loading.value = true; loading.value = true;
rowIds.clear(); rowIds.clear();
const result = await api.get('api/apps'); const result = await api.get('api/apps');
rows.value = result.data.map((item: IManagedApp) => { rows.value = result.data.data.map((item: IManagedApp) => {
rowIds.add(item.appid); rowIds.add(item.appid);
return appToAppDisplay(item) return appToAppDisplay(item)
}).sort((a: IAppDisplay, b: IAppDisplay) => a.sortId - b.sortId); // set default order }).sort((a: IAppDisplay, b: IAppDisplay) => a.sortId - b.sortId); // set default order

80
frontend/src/pages/TenantDomain.vue
View File

@@ -17,12 +17,15 @@
</q-input> </q-input>
</template> </template>
<template v-slot:body-cell-name="p"> <template v-slot:header-cell-active="p">
<q-td class="flex justify-between items-center" :props="p"> <q-th auto-width :props="p">
<div> <q-select class="filter-header" v-model="activeFilter" :options="activeOptions" @update:model-value="activeFilterUpdate" borderless
{{ p.row.name }} dense options-dense hide-bottom-space/>
<!-- <q-icon class="q-ml-xs" title="共有中です" name="people" :color="p.row.domainActive ? 'grey-8' : 'grey-4'" /> --> </q-th>
</div> </template>
<template v-slot:body-cell-active="p">
<q-td auto-width :props="p">
<q-badge v-if="!p.row.domainActive" color="grey">未启用</q-badge> <q-badge v-if="!p.row.domainActive" color="grey">未启用</q-badge>
<q-badge v-if="p.row.id == currentDomainId" color="primary">現在</q-badge> <q-badge v-if="p.row.id == currentDomainId" color="primary">現在</q-badge>
</q-td> </q-td>
@@ -30,11 +33,31 @@
<template v-slot:body-cell-actions="p"> <template v-slot:body-cell-actions="p">
<q-td :props="p"> <q-td :props="p">
<q-btn-group flat> <q-btn flat padding="xs" round size="1em" icon="more_vert">
<q-btn flat color="primary" padding="xs" size="1em" icon="edit_note" @click="editRow(p.row)" /> <q-menu >
<q-btn flat color="primary" padding="xs" size="1em" icon="person_add_alt" @click="openShareDg(p.row)" /> <q-list dense style="min-width: 100px">
<q-btn flat color="negative" padding="xs" size="1em" icon="delete_outline" @click="removeRow(p.row)" /> <q-item clickable v-close-popup @click="editRow(p.row)">
</q-btn-group> <q-item-section>
<q-icon size="1.2em" name="edit_note" />
</q-item-section>
<q-item-section>編集</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="openShareDg(p.row)">
<q-item-section>
<q-icon size="1.2em" name="person_add_alt" />
</q-item-section>
<q-item-section>共有</q-item-section>
</q-item>
<q-separator />
<q-item class="text-red" clickable v-close-popup @click="removeRow(p.row)">
<q-item-section>
<q-icon size="1.2em" name="delete_outline" />
</q-item-section>
<q-item-section>削除</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td> </q-td>
</template> </template>
@@ -163,10 +186,11 @@ const columns = [
// classes: inactiveRowClass // classes: inactiveRowClass
// }, // },
{ name: 'name', label: '環境名', field: 'name', align: 'left', sortable: true, classes: inactiveRowClass }, { name: 'name', label: '環境名', field: 'name', align: 'left', sortable: true, classes: inactiveRowClass },
{ name: 'active', label: 'x', align: 'left', field: 'domainActive', classes: inactiveRowClass },
{ name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true, classes: inactiveRowClass }, { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true, classes: inactiveRowClass },
{ name: 'user', label: 'ログイン名', field: 'user', align: 'left', classes: inactiveRowClass }, { name: 'user', label: 'ログイン名', field: 'user', align: 'left', classes: inactiveRowClass },
{ name: 'owner', label: '所有者', field: row => row.owner.fullName, align: 'left', classes: inactiveRowClass }, { name: 'owner', label: '所有者', field: row => row.owner.fullName, align: 'left', classes: inactiveRowClass },
{ name: 'actions', label: '操作', field: 'actions', classes: inactiveRowClass } { name: 'actions', label: '', field: 'actions', classes: inactiveRowClass }
]; ];
const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 }); const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
@@ -180,6 +204,10 @@ const show = ref(false);
const confirm = ref(false); const confirm = ref(false);
const resetPsw = ref(false); const resetPsw = ref(false);
const activeOptions = ['全データ', '启用', '未启用']
const activeFilter = ref('全データ');
const currentDomainId = computed(() => authStore.currentDomain.id); const currentDomainId = computed(() => authStore.currentDomain.id);
// const tenantid = ref(authStore.currentDomain.id); // const tenantid = ref(authStore.currentDomain.id);
const name = ref(''); const name = ref('');
@@ -194,7 +222,21 @@ let editId = ref(0);
const shareDg = ref(false); const shareDg = ref(false);
const shareDomain = ref<IDomainOwnerDisplay>(); const shareDomain = ref<IDomainOwnerDisplay>();
const getDomain = async () => { const activeFilterUpdate = (selected) => {
switch (selected) {
case '启用':
getDomain((row) => row.domainActive)
break;
case '未启用':
getDomain((row) => !row.domainActive)
break;
default:
getDomain()
break;
}
}
const getDomain = async (filter = () => true) => {
loading.value = true; loading.value = true;
const { data } = await api.get<{data:IDomain[]}>(`api/domains`); const { data } = await api.get<{data:IDomain[]}>(`api/domains`);
rows.value = data.data.map((item) => { rows.value = data.data.map((item) => {
@@ -217,7 +259,7 @@ const getDomain = async () => {
isSuperuser: item.owner.is_superuser, isSuperuser: item.owner.is_superuser,
} }
} }
}); }).filter(filter);
loading.value = false; loading.value = false;
} }
@@ -333,8 +375,18 @@ const onReset = () => {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.filter-header .q-field__native {
font-size: 12px;
font-weight: 500;
}
.filter-header .q-icon {
width: 12px;
}
.q-table td.inactive-row { .q-table td.inactive-row {
color: #aaa; color: #aaa;
background-color: #fafafa; background-color: #fafafa;
} }
.q-table tr > td.inactive-row:last-child {
color: inherit;
}
</style> </style>

32
frontend/src/pages/UserDomain.vue
View File

@@ -29,14 +29,14 @@
<template v-slot:item="props"> <template v-slot:item="props">
<div class="q-pa-sm"> <div class="q-pa-sm">
<domain-card :item="props.row"> <domain-card :item="props.row" :active-id="activeDomainId">
<template v-slot:actions> <template v-slot:actions>
<q-card-actions align="right"> <q-card-actions align="right">
<q-chip v-if="isActive(props.row.id)" outline color="teal" text-color="white" icon="done"> <q-chip class="no-border" v-if="isActive(props.row.id)" outline color="primary" text-color="white" icon="done">
既定 既定
</q-chip> </q-chip>
<q-btn flat v-else :loading="activeDomainLoadingId === props.row.id" :disable="deleteDomainLoadingId === props.row.id" @click="activeDomain(props.row)">既定にする</q-btn> <q-btn flat v-else :loading="activeDomainLoadingId === props.row.id" :disable="deleteDomainLoadingId === props.row.id" @click="activeDomain(props.row)">既定にする</q-btn>
<q-btn flat :disable="isNotOwner(props.row.id) || activeDomainLoadingId === props.row.id" :text-color="isNotOwner(props.row.id)?'grey':''" :loading="deleteDomainLoadingId === props.row.id" @click="clickDeleteConfirm(props.row)">削除</q-btn> <q-btn flat :disable="isNotOwner(props.row.owner.id) || activeDomainLoadingId === props.row.id" :text-color="isNotOwner(props.row.owner.id)?'grey':''" :loading="deleteDomainLoadingId === props.row.id" @click="clickDeleteConfirm(props.row)">削除</q-btn>
</q-card-actions> </q-card-actions>
</template> </template>
</domain-card> </domain-card>
@@ -70,6 +70,7 @@
import { ref, onMounted, computed } from 'vue' import { ref, onMounted, computed } from 'vue'
import { api } from 'boot/axios'; import { api } from 'boot/axios';
import { useAuthStore } from 'stores/useAuthStore'; import { useAuthStore } from 'stores/useAuthStore';
import { IDomainOwnerDisplay } from '../types/DomainTypes';
import ShowDialog from 'components/ShowDialog.vue'; import ShowDialog from 'components/ShowDialog.vue';
import DomainCard from 'components/UserDomain/DomainCard.vue'; import DomainCard from 'components/UserDomain/DomainCard.vue';
@@ -77,7 +78,7 @@ import DomainSelect from 'components/DomainSelect.vue';
const authStore = useAuthStore(); const authStore = useAuthStore();
const pagination = ref({ sortBy: 'id', rowsPerPage: 0 }); const pagination = ref({ sortBy: 'id', rowsPerPage: 0 });
const rows = ref([] as any[]); const rows = ref<IDomainOwnerDisplay[]>([]);
const rowIds = new Set<string>(); const rowIds = new Set<string>();
const initLoading = ref(true); const initLoading = ref(true);
const addUserDomainLoading = ref(false); const addUserDomainLoading = ref(false);
@@ -88,7 +89,7 @@ const columns = [
{ name: 'id' }, { name: 'id' },
{ name: 'name', required: true, label: 'Name', align: 'left', field: 'name', sortable: true }, { name: 'name', required: true, label: 'Name', align: 'left', field: 'name', sortable: true },
{ name: 'url', align: 'center', label: 'Domain', field: 'url', sortable: true }, { name: 'url', align: 'center', label: 'Domain', field: 'url', sortable: true },
{ name: 'kintoneuser', label: 'User', field: 'kintoneuser', sortable: true }, { name: 'kintoneuser', label: 'User', field: 'user', sortable: true },
]; ];
const userDomainTableFilter = ref(); const userDomainTableFilter = ref();
@@ -162,7 +163,7 @@ const isActive = computed(() => (id: number) => {
}); });
const isNotOwner = computed(() => (ownerId: string) => { const isNotOwner = computed(() => (ownerId: string) => {
return ownerId == authStore.userId; return ownerId !== authStore.userId;
}); });
const getDomain = async (userId? : string) => { const getDomain = async (userId? : string) => {
@@ -171,16 +172,27 @@ const getDomain = async (userId? : string) => {
activeDomainId.value = resp?.data?.data?.id; activeDomainId.value = resp?.data?.data?.id;
const domainResult = userId ? await api.get(`api/domain?userId=${userId}`) : await api.get(`api/domain`); const domainResult = userId ? await api.get(`api/domain?userId=${userId}`) : await api.get(`api/domain`);
const domains = domainResult.data as any[]; const domains = domainResult.data as any[];
rows.value = domains.reduce((acc, item) => { rows.value = domains.sort((a, b) => a.id - b.id).reduce((acc, item) => {
rowIds.add(item.id); rowIds.add(item.id);
if (item.is_active) { if (item.is_active) {
acc.push({ acc.push({
id: item.id, id: item.id,
tenantid: item.tenantid,
domainActive: item.is_active,
name: item.name, name: item.name,
url: item.url, url: item.url,
kintoneuser: item.kintoneuser, user: item.kintoneuser,
ownerEmail: item.owner.email, password: item.kintonepwd,
owner: item.owner.first_name + ' ' + item.owner.last_name, owner: {
id: item.owner.id,
firstName: item.owner.first_name,
lastName: item.owner.last_name,
fullNameSearch: (item.owner.last_name + item.owner.first_name).toLowerCase(),
fullName: item.owner.last_name + ' ' + item.owner.first_name,
email: item.owner.email,
isActive: item.owner.is_active,
isSuperuser: item.owner.is_superuser,
}
}) })
} }
return acc; return acc;