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

Merge branch 'dev3' of https://dev.azure.com/alicorn-dev/KintoneAppBuilder/_git/KintoneAppBuilder into dev3

Browse Source
This commit is contained in:
方 柏
2024-12-17 19:56:35 +09:00
parent c2a7ead1e3 d7280d66b2
commit d3d3aa2d18
11 changed files with 110 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/DomainSelector.vue
View File

@@ -22,7 +22,9 @@ const userStore = useAuthStore();
.q-btn.disabled.customized-disabled-btn {
opacity: 1 !important;
cursor: default !important;
.q-icon.q-btn-dropdown__arrow {
display: none;
}
* {
cursor: default !important;
}

9
frontend/src/components/ShareDomain/RoleLabel.vue
View File

@@ -1,11 +1,15 @@
<template>
<q-badge v-if="isOwner" color="purple">所有者</q-badge>
<q-badge v-else-if="isManager" color="primary">管理者</q-badge>
<q-badge class="q-mr-xs" v-if="isOwner" color="secondary">所有者</q-badge>
<!-- <q-badge v-else-if="isManager" color="primary">管理者</q-badge> -->
<q-badge v-if="isSelf" color="purple">自分</q-badge>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { IDomainOwnerDisplay } from '../../types/DomainTypes';
import { useAuthStore } from 'stores/useAuthStore';
const authStore = useAuthStore();
interface Props {
user: { id: number };
@@ -14,6 +18,7 @@ interface Props {
const props = defineProps<Props>();
const isSelf = computed(() => props.user.id === (Number)(authStore.userId));
const isOwner = computed(() => props.user.id === props.domain.owner.id);
const isManager = computed(() => props.user.id === props.domain.owner.id); // TODO
</script>

33
frontend/src/components/ShareDomain/ShareDomainDialog.vue
View File

@@ -37,7 +37,7 @@
<q-item-section>{{scope.opt.fullName}}</q-item-section>
<q-item-section>{{scope.opt.email}}</q-item-section>
<q-item-section side>
<div style="width: 4em;">
<div style="width: 6.5em;">
<role-label :domain="domain" :user="scope.opt"></role-label>
</div>
</q-item-section>
@@ -47,7 +47,7 @@
<sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" :title="userListTitle">
<template v-slot:body-cell-role="{ row }">
<q-td>
<q-td auto-width>
<role-label :domain="domain" :user="row"></role-label>
</q-td>
</template>
@@ -72,15 +72,19 @@ import { ref, watch, onMounted } from 'vue';
import { IDomainOwnerDisplay } from '../../types/DomainTypes';
import { IUser, IUserDisplay } from '../../types/UserTypes';
import { api } from 'boot/axios';
import { useAuthStore } from 'stores/useAuthStore';
import SharingUserList from 'components/ShareDomain/SharingUserList.vue';
import RoleLabel from 'components/ShareDomain/RoleLabel.vue';
import { Dialog } from 'quasar'
const authStore = useAuthStore();
interface Props {
modelValue: boolean;
domain: IDomainOwnerDisplay;
dialogTitle: string;
userListTitle: string;
hideSelf: boolean;
shareApi: (user: IUserDisplay, domain: IDomainOwnerDisplay) => Promise<any>;
removeSharedApi: (user: IUserDisplay, domain: IDomainOwnerDisplay) => Promise<any>;
getSharedApi: (domain: IDomainOwnerDisplay) => Promise<any>;
@@ -186,28 +190,43 @@ const removeShareTo = async (user: IUserDisplayWithShareRole) => {
loading.value = true;
user.isRemoving = true;
await props.removeSharedApi(user, props.domain);
if (isCurrentDomain()) {
await authStore.loadCurrentDomain();
}
await loadShared();
loading.value = false;
};
const isCurrentDomain = () => {
return props.domain.id === authStore.currentDomain.id;
}
const loadShared = async () => {
loading.value = true;
sharedUsersIdSet.clear();
if(props.hideSelf) {
sharedUsersIdSet.add((Number)(authStore.userId));
}
const { data } = await props.getSharedApi(props.domain);
sharedUsers.value = data.data.map((item: IUser) => {
sharedUsers.value = data.data.reduce((arr: IUserDisplayWithShareRole[], item: IUser) => {
const val = itemToDisplay(item);
if(!sharedUsersIdSet.has(val.id)) {
sharedUsersIdSet.add(val.id);
// for sort
if (isOwner(item.id)) {
if (isOwner(val.id)) {
val.role = 2;
} else if (isManager(item.id)) {
} else if (isManager(val.id)) {
val.role = 1;
} else {
val.role = 0;
}
return val;
}).reverse().sort((a: IUserDisplayWithShareRole, b: IUserDisplayWithShareRole) => b.role - a.role);
arr.push(val);
}
return arr;
}, []).sort((a: IUserDisplayWithShareRole, b: IUserDisplayWithShareRole) => b.role - a.role);
canSharedUsers.value = allUsers.value.filter((item) => !sharedUsersIdSet.has(item.id));
canSharedUserFilteredOptions.value = canSharedUsers.value;

1
frontend/src/components/ShareDomain/ShareManageDialog.vue
View File

@@ -7,6 +7,7 @@
:remove-shared-api="removeSharedApi"
:get-shared-api="getSharedApi"
:model-value="modelValue"
hide-self
@update:modelValue="updateModelValue"
@close="close"
/>

12
frontend/src/components/TableActionMenu.vue
View File

@@ -3,11 +3,15 @@
<q-menu :max-width="maxWidth">
<q-list dense :style="{ 'min-width': minWidth }">
<template v-for="(item, index) in actions" :key="index" >
<q-item v-if="isAction(item)" :class="item.class" clickable v-close-popup @click="item.action(row)">
<q-item v-if="isAction(item)" :disable="isFunction(item.disable) ? item.disable(row) : item.disable"
:class="item.class" clickable v-close-popup @click="item.action(row)">
<q-item-section side style="color: inherit;">
<q-icon size="1.2em" :name="item.icon" />
</q-item-section>
<q-item-section>{{ item.label }}</q-item-section>
<q-tooltip v-if="item.tooltip && !isFunction(item.tooltip) || (isFunction(item.tooltip) && item.tooltip(row))" :delay="500" self="center middle">
{{ isFunction(item.tooltip) ? item.tooltip(row) : item.tooltip }}
</q-tooltip>
</q-item>
<q-separator v-else />
</template>
@@ -23,6 +27,8 @@ import { IDomainOwnerDisplay } from '../types/DomainTypes';
interface Action {
label: string;
icon?: string;
tooltip?: string|((row: IDomainOwnerDisplay) => string);
disable?: boolean|((row: IDomainOwnerDisplay) => boolean);
action: (row: any) => void|Promise<void>;
class?: string;
}
@@ -54,6 +60,10 @@ export default {
methods: {
isAction(item: MenuItem): item is Action {
return !('separator' in item);
},
isFunction(item: any): item is ((row: IDomainOwnerDisplay) => boolean|string) {
return typeof item === 'function';
}
}
};

27
frontend/src/components/UserInfoButton.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<q-btn flat no-caps dense icon="account_circle" :label="userInfo.fullName">
<q-menu max-width="225px">
<div class="row no-wrap q-px-md q-pt-sm ">
<div class="column items-center justify-center">
<q-icon name="account_circle" color="grey" size="3em" />
</div>
<div class="column q-ml-sm overflow-hidden">
<div class="text-subtitle1 ellipsis full-width">{{ userInfo.fullName }}</div>
<div class="text-grey-7 ellipsis text-caption q-mb-sm full-width">{{ userInfo.email }}</div>
</div>
</div>
<div class="row q-pb-sm q-px-md">
<q-btn outline color="negative" icon="logout" label="Logout" @click="authStore.logout()" class="full-width" size="sm" v-close-popup />
</div>
</q-menu>
</q-btn>
</template>
<script setup lang="ts">
import { useAuthStore } from 'stores/useAuthStore';
import { computed } from 'vue';
const authStore = useAuthStore();
const userInfo = computed(() => authStore.userInfo);
</script>

3
frontend/src/layouts/MainLayout.vue
View File

@@ -8,7 +8,7 @@
<q-badge align="top" outline>V{{ version }}</q-badge>
</q-toolbar-title>
<domain-selector></domain-selector>
<q-btn flat round dense icon="logout" @click="authStore.logout()" />
<user-info-button />
</q-toolbar>
</q-header>
@@ -37,6 +37,7 @@
import { computed, onMounted, reactive } from 'vue';
import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
import DomainSelector from 'components/DomainSelector.vue';
import UserInfoButton from 'components/UserInfoButton.vue';
import { useAuthStore } from 'stores/useAuthStore';
import { useRoute } from 'vue-router';

5
frontend/src/pages/AppVersionManagement.vue
View File

@@ -47,8 +47,7 @@
</template>
<template v-slot:body-cell-actions="p">
<q-td :props="p">
<span v-if="p.row.id === app.version"></span>
<table-action-menu v-else :row="p.row" minWidth="140px" :actions="actionList" />
<table-action-menu :row="p.row" minWidth="140px" :actions="actionList" />
</q-td>
</template>
</q-table>
@@ -119,7 +118,7 @@ const confirmDialog = ref(false);
const deleteUserLoading = ref(false);
const actionList = ref([
{ label: 'プル', icon: 'flag', action: changeVersion },
{ label: '回復する', icon: 'flag', action: changeVersion },
// { label: 'プレビュー', icon: 'visibility', action: toVersionHistoryPage },
// { separator: true },
// { label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },

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

@@ -31,6 +31,13 @@
</q-td>
</template>
<template v-slot:body-cell-owner="p">
<q-td auto-width :props="p">
<q-badge v-if="isOwner(p.row)" color="purple">自分</q-badge>
<span v-else>{{ p.row.owner.fullName }}</span>
</q-td>
</template>
<template v-slot:body-cell-actions="p">
<q-td :props="p">
<table-action-menu :row="p.row" :actions="actionList" />
@@ -115,7 +122,7 @@
<!-- -1 loading -->
<q-card-section v-if="deleteLoadingState == -1" class="row items-center">
<q-spinner color="primary" size="2em"/>
<span class="q-ml-sm">ドメイン利用/管理権限を確認中</span>
<span class="q-ml-sm">ドメイン利用権限を確認中</span>
</q-card-section>
<!-- > 0 can't delete -->
<q-card-section v-else-if="deleteLoadingState > 0" class="row items-center">
@@ -131,7 +138,7 @@
<q-card-actions align="right">
<q-btn flat label="キャンセル" color="primary" v-close-popup />
<!-- > 0 can't delete -->
<q-btn v-if="deleteLoadingState > 0" label="実行" color="primary" v-close-popup @click="openShareDg(SHARE_MANAGE, editId)" />
<q-btn v-if="deleteLoadingState > 0" label="実行" color="primary" v-close-popup @click="openShareDg(SHARE_USE, editId)" />
<!-- 0/-2 can delete -->
<q-btn flat v-else label="OK" :disabled="deleteLoadingState == -1" :loading="deleteLoadingState == -2" color="primary" @click="deleteDomain()" />
</q-card-actions>
@@ -171,7 +178,7 @@ const columns = [
{ name: 'active', label: '', align: 'left', field: 'domainActive', classes: inactiveRowClass },
{ name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true, classes: inactiveRowClass },
{ name: 'user', label: 'ログイン名', field: 'user', align: 'left', classes: inactiveRowClass },
{ name: 'owner', label: '所有者', field: (row: IDomainOwnerDisplay) => row.owner.fullName, align: 'left', classes: inactiveRowClass },
{ name: 'owner', label: '所有者', field: '', align: 'left', classes: inactiveRowClass },
{ name: 'actions', label: '', field: 'actions', classes: inactiveRowClass }
];
@@ -228,11 +235,17 @@ const SHARE_MANAGE = 'manage';
const actionList = [
{ label: '編集', icon: 'edit_note', action: editRow },
{ label: '利用権限設定', icon: 'person_add_alt', action: (row: IDomainOwnerDisplay) => {openShareDg(SHARE_USE, row)} },
{ label: '管理権限設定', icon: 'add_moderator', action: (row: IDomainOwnerDisplay) => {openShareDg(SHARE_MANAGE, row)} },
{ label: '管理権限設定', icon: 'add_moderator',
disable: (row: IDomainOwnerDisplay) => !isOwner(row),
tooltip: (row: IDomainOwnerDisplay) => isOwner(row) ? '' : 'ドメイン所有者でないため、操作できません',
action: (row: IDomainOwnerDisplay) => {openShareDg(SHARE_MANAGE, row)}
},
{ separator: true },
{ label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
];
const isOwner = (row: IDomainOwnerDisplay) => row.owner.id === Number(authStore.userId);
const getDomain = async (filter?: (row: IDomainOwnerDisplay) => boolean) => {
loading.value = true;
const { data } = await api.get<{data:IDomain[]}>(`api/domains`);

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

@@ -36,7 +36,9 @@
既定
</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 :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-btn flat :disable="activeDomainLoadingId === props.row.id" :loading="deleteDomainLoadingId === props.row.id" @click="clickDeleteConfirm(props.row)">
削除
</q-btn>
</q-card-actions>
</template>
</domain-card>
@@ -165,10 +167,6 @@ const isActive = computed(() => (id: number) => {
return id == activeDomainId.value;
});
const isNotOwner = computed(() => (ownerId: string) => {
return ownerId !== authStore.userId;
});
const getDomain = async (userId? : string) => {
rowIds.clear();
const resp = await api.get(`api/defaultdomain`);

8
frontend/src/stores/useAuthStore.ts
View File

@@ -8,6 +8,7 @@ import { useAppStore } from './useAppStore';
interface UserInfo {
firstName: string;
lastName: string;
fullName: string;
email: string;
}
@@ -60,7 +61,7 @@ export const useAuthStore = defineStore('auth', {
this.userId = tokenJson.sub;
this.permissions = (tokenJson as any).permissions==='ALL' ? 'admin': 'user';
api.defaults.headers['Authorization'] = 'Bearer ' + this.token;
this.currentDomain = await this.getCurrentDomain();
await this.loadCurrentDomain();
this.userInfo = await this.getUserInfo();
router.push(this.returnUrl || '/');
return true;
@@ -69,10 +70,10 @@ export const useAuthStore = defineStore('auth', {
return false;
}
},
async getCurrentDomain(): Promise<IDomainInfo> {
async loadCurrentDomain() {
const resp = await api.get(`api/defaultdomain`);
const activedomain = resp?.data?.data;
return {
this.currentDomain = {
id: activedomain?.id,
domainName: activedomain?.name,
kintoneUrl: activedomain?.url,
@@ -83,6 +84,7 @@ export const useAuthStore = defineStore('auth', {
return {
firstName: resp.first_name,
lastName: resp.last_name,
fullName: resp.last_name + ' ' + resp.first_name,
email: resp.email,
}
},