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-24 17:27:50 +09:00
parent be203cb715 84ba118bb1
commit 5ebfd22652
10 changed files with 190 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/dialog/VersionInput.vue
View File

@@ -1,12 +1,17 @@
<template>
<q-input
ref="nameRef"
v-model="versionInfo.name"
filled
autofocus
label="バージョン名"
:rules="[(val) => !val || val.length <= 80 || '80字以内で入力ください']"
:rules="[
val => !!val || 'バージョン名を入力してください。',
(val) => !val || val.length <= 80 || '80字以内で入力ください'
]"
/>
<q-input
ref="commentRef"
v-model="versionInfo.comment"
filled
type="textarea"
@@ -19,6 +24,15 @@ import { ref, watch, defineProps, defineEmits } from 'vue';
import { QInput } from 'quasar';
import { IVersionSubmit } from 'src/types/AppTypes';
const nameRef = ref();
const commentRef = ref();
const isValid = () => {
const nameHasError = nameRef.value?.hasError ?? false;
const commentHasError = commentRef.value?.hasError ?? false;
return !nameHasError && !commentHasError;
};
const props = defineProps<{
modelValue: IVersionSubmit;
}>();
@@ -33,6 +47,10 @@ const versionInfo = ref({
const emit = defineEmits(['update:modelValue']);
defineExpose({
isValid
})
watch(
versionInfo,
() => {

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

@@ -31,7 +31,8 @@
<template v-slot:body-cell-version="p">
<q-td :props="p">
<div class="flex justify-between full-width" >
<span class="ellipsis" :title="p.row.versionName">{{ p.row.versionName || '未命名' }}</span>
<span v-if="p.row.version == 0"></span>
<span v-else class="ellipsis" :title="p.row.versionName">{{ p.row.versionName }}</span>
<q-badge v-if="isVersionEditing(p.row)" color="orange-7">変更あり</q-badge>
</div>
</q-td>
@@ -129,8 +130,7 @@ const getApps = async () => {
}
function isVersionEditing(app: IAppDisplay) {
// TODO
return false;
return !!app.versionChanged;
};
onMounted(async () => {

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

@@ -58,14 +58,12 @@
</template>
</q-table>
<q-dialog v-model="confirmDialog" persistent>
<q-card>
<q-card-section class="q-pb-none">
<q-list>
<q-item>
<q-item-section avatar>
<q-item class="q-px-none">
<q-item-section avatar class="items-center">
<q-icon name="warning" color="warning" size="2em" />
</q-item-section>
<q-item-section>
@@ -90,7 +88,6 @@ import { useQuasar } from 'quasar';
import { ref, onMounted } from 'vue';
import { useAppStore } from 'stores/useAppStore';
import { useAuthStore } from 'stores/useAuthStore';
import { useFlowEditorStore } from 'stores/flowEditor';
import { router } from 'src/router';
import { useRoute } from 'vue-router';
import { IAppDisplay, IAppVersionDisplay } from 'src/types/AppTypes';
@@ -121,7 +118,6 @@ const filter = ref('');
const versionLoading = ref(false);
const target = ref<IAppVersionDisplay>();
const store = useFlowEditorStore();
const confirmDialog = ref(false);
const deleteUserLoading = ref(false);
@@ -152,8 +148,7 @@ const getVersions = async () => {
}
function isVersionEditing() {
// TODO
return false;
return !!app.value.versionChanged;
};
onMounted(async () => {
@@ -195,18 +190,6 @@ async function doChangeVersion(version?: IAppVersionDisplay) {
versionLoading.value = false;
}
async function toEditFlowPage() {
store.setApp({
appId: app.value.id,
name: app.value.name
});
store.selectFlow(undefined);
try {
await router.push('/FlowChart/' + app.value.id);
} catch (e) {
console.log(e);
}
};
</script>
<style lang="scss">

13
frontend/src/pages/FlowChart.vue
View File

@@ -85,8 +85,8 @@
<action-select ref="appDg" name="model" :filter="filter" type="single" @clearFilter="onClearFilter" ></action-select>
</ShowDialog>
<!-- save version dialog -->
<ShowDialog v-model:visible="saveVersionAction" name="保存して新バージョン" @close="closeSaveVersionDg" min-width="500px">
<version-input v-model="versionSubmit" />
<ShowDialog v-model:visible="saveVersionAction" name="保存して新バージョン" @close="closeSaveVersionDg" :ok-btn-auto-close="false" min-width="500px">
<version-input ref="versionInputRef" v-model="versionSubmit" />
</ShowDialog>
<q-inner-loading
:showing="initLoading"
@@ -135,6 +135,7 @@ const prevNodeIfo = ref({
// const refFlow = ref<ActionFlow|null>(null);
const showAddAction = ref(false);
const saveVersionAction = ref(false);
const versionInputRef = ref();
const drawerRight = ref(false);
const filter=ref("");
const model = ref("");
@@ -270,9 +271,17 @@ const onSaveVersion = async () => {
}
const closeSaveVersionDg = async (val: 'OK'|'CANCEL') => {
saveVersionAction.value = true;
if (val == 'OK') {
if (versionInputRef?.value?.isValid()) {
saveVersionAction.value = false;
await onSaveAllFlow();
await appStore.createVersion(versionSubmit.value);
} else {
saveVersionAction.value = true;
}
} else {
saveVersionAction.value = false;
}
}

132
frontend/src/pages/RoleManagement.vue
View File

@@ -7,7 +7,7 @@
</div>
<div class="row" style="min-height: 80vh;">
<!-- left role panel -->
<div class="col-auto">
<div class="q-pa-md" style="width: 250px">
<q-list bordered separator class="rounded-borders">
@@ -15,20 +15,19 @@
<q-item-section class="text-weight-bold"> 読み込み中... </q-item-section>
</q-item>
<q-item v-else v-for="item in roles" :key="item.id" clickable v-ripple :active="selected?.id === item.id" @click="roleClicked(item)" active-class="menu-active">
<q-item-section class="text-weight-bold"> {{ item.label }} </q-item-section>
<q-item-section class="text-weight-bold"> {{ item.name }} </q-item-section>
</q-item>
</q-list>
</div>
</div>
<!-- right table panel -->
<div class="col">
<q-table title="ユーザーリスト" :rows="rows" :columns="columns" row-key="id" :filter="filter" :loading="loading"
<q-table title="ユーザーリスト" :rows="rows" :columns="columns" row-key="id" :filter="filter" :loading="allLoading || loading"
:pagination="pagination" >
<template v-slot:top>
<q-btn color="primary" :disable="loading || selected?.id == -2" label="追加" @click="showAddRoleDialog" />
<q-btn color="primary" :disable="allLoading || loading || selected?.id == -2" label="追加" @click="showAddRoleDialog" />
<q-space />
<q-input borderless dense filled debounce="300" v-model="filter" placeholder="検索">
<template v-slot:append>
@@ -57,7 +56,7 @@
<q-th :props="p">
<div class="row items-center">
<label class="q-mr-md">{{ p.col.label }}</label>
<q-select v-model="statusFilter" :options="options" @update:model-value="updateStatusFilter" borderless
<q-select v-model="statusFilter" :options="statusFilterOptions" borderless
dense options-dense style="font-size: 12px; padding-top: 1px;" />
</div>
</q-th>
@@ -92,7 +91,7 @@
</q-card-section>
<q-card-section class="q-py-none">
<!-- <span class="q-ml-sm">この役割を与えられたユーザーは、メンバー役に再配置されます。</span> -->
<div class="q-mx-sm">ユーザー「{{targetRow.email}}」を「{{selected.label}}」の役割から</div>
<div class="q-mx-sm">ユーザー「{{targetRow?.email}}」を「{{selected?.name}}」の役割から</div>
<div class="q-mx-sm">本当に外しますか？</div>
</q-card-section>
@@ -106,12 +105,14 @@
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { IUser } from 'src/types/UserTypes';
import { ref, onMounted, computed, watch } from 'vue';
import { IRolesDisplay, IUserRolesDisplay } from 'src/types/UserTypes';
import { useUserStore } from 'stores/useUserStore';
import ShowDialog from 'src/components/ShowDialog.vue';
import UserSelectBox from 'src/components/dialog/UserSelectBox.vue';
import TableActionMenu from 'components/TableActionMenu.vue';
import { api } from 'boot/axios';
const userStore = useUserStore();
const columns = [
{ name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
@@ -119,21 +120,30 @@ const columns = [
{ name: 'firstName', label: '苗字', field: 'firstName', align: 'left', sortable: true },
{ name: 'email', label: '電子メール', field: 'email', align: 'left', sortable: true },
{ name: 'status', label: '状況', field: 'status', align: 'left' },
{ name: 'actions', label: '操作', field: 'actions' }
{ name: 'actions', label: '操作', field: 'actions', align: 'right' }
];
const roles = ref([])
const selected = ref();
const statusFilterOptions = [
{ label: '全データ', filter: () => true },
{ label: 'システム管理者のみ', filter: (row: IUserRolesDisplay) => row.isSuperuser },
{ label: '使用可能', filter: (row: IUserRolesDisplay) => row.isActive },
{ label: '使用不可', filter: (row: IUserRolesDisplay) => !row.isActive },
]
const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
const roles = computed(() => userStore.roles.concat(EMPTY_ROLE));
const selected = ref<IRolesDisplay>();
const allLoading = ref(true);
const loading = ref(false);
const filter = ref('');
const statusFilter = ref('全データ');
const statusFilter = ref(statusFilterOptions[0]);
const dgFilter = ref('');
const allRows = ref([]);
const targetRow = ref<IUser>();
const allUsers = computed(() => userStore.users.filter(statusFilter.value.filter));
const targetRow = ref<IUserRolesDisplay>();
const userDialog = ref();
const showSelectUser=ref(false);
@@ -141,73 +151,57 @@ const isAdding = ref(false);
const deleteDialog = ref(false);
const deleteUserRoleLoading = ref(false);
const EMPTY_ROLE: IRolesDisplay = {
id: -2,
name: 'ロールなし',
key: 'dummy',
level: -1
}
const actionList = [
// { label: '移動', icon: 'account_tree', action: toEditFlowPage },
{ separator: true },
// { separator: true },
{ label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
];
const options = ['全データ', 'システム管理者のみ', '使用可能', '使用不可']
const roleClicked = async (role) => {
selected.value = role;
const rows = computed(() => allUsers.value.filter((item) => {
if (!selected.value) {
return false;
}
const rows = computed(() => allRows.value.filter((item) => {
if (selected.value.id == -2) {
return !item.roles || item.roles.length == 0;
}
return item.roles?.includes(selected.value.id);
return item.roleIds?.includes(selected.value.id);
}));
const rowIds = computed(() => new Set(rows.value?.map((item) => item.id)));
const getUsers = async (filter = () => true) => {
const getUsers = async () => {
loading.value = true;
allRows.value = []
const result = await api.get(`api/v1/users`);
allRows.value = result.data.data.map((item) => {
return { id: item.id, firstName: item.first_name, lastName: item.last_name, email: item.email, isSuperuser: item.is_superuser, isActive: item.is_active, roles: item.roles.map(role => role.id) }
}).filter(filter);
await userStore.loadUsers();
loading.value = false;
}
const getRoles = async () => {
const result = await api.get(`api/v1/roles`);
roles.value = result.data.data.map((item) => {
return { id: item.id, label: item.description }
}).concat({ id: -2, label: 'ロールなし' })
selected.value = roles.value[0];
}
const updateStatusFilter = (status) => {
switch (status) {
case 'システム管理者のみ':
getUsers((row) => row.isSuperuser)
break;
case '使用可能':
getUsers((row) => row.isActive)
break;
case '使用不可':
getUsers((row) => !row.isActive)
break;
default:
getUsers()
break;
}
}
onMounted(async () => {
allLoading.value = true;
await Promise.all([
getRoles(),
userStore.loadRoles(),
getUsers()
]);
allLoading.value = false;
});
const filterInitRows = (row: {id: string}) => {
return !rowIds.value.has(row.id);
watch(roles, (newRoles) => {
if (newRoles.length > 0) {
selected.value = newRoles[0];
}
});
const roleClicked = async (role: IRolesDisplay) => {
selected.value = role;
}
const filterInitRows = (user: IUserRolesDisplay) => {
return !rowIds.value.has(user.id);
}
const showAddRoleDialog = () => {
@@ -218,32 +212,24 @@ const showAddRoleDialog = () => {
const closeSelectUserDialog = async (val: 'OK'|'Cancel') => {
showSelectUser.value = true;
if (val == 'OK' && userDialog.value.selected[0]) {
if (val == 'OK' && userDialog.value.selected[0] && selected.value && selected.value.id >= 0) {
isAdding.value = true;
const user = userDialog.value.selected[0];
const result = await api.post(`api/v1/userrole`, {
'userid': user.id,
'roleids': user.roles.concat(selected.value.id)
});
await userStore.addRole(userDialog.value.selected[0], selected.value);
await getUsers();
}
showSelectUser.value = false;
isAdding.value = false;
}
function removeRow(user:IUser) {
function removeRow(user: IUserRolesDisplay) {
targetRow.value = user;
deleteDialog.value = true;
}
const deleteUserRole = async () => {
if (targetRow.value?.id) {
if (targetRow.value?.id && selected.value && selected.value.id >= 0) {
deleteUserRoleLoading.value = true;
// TODO 返回不需要重新读
const result = await api.post(`api/v1/userrole`, {
'userid': targetRow.value.id,
'roleids': targetRow.value.roles.filter(e => e !== selected.value.id)
});
await userStore.removeRole(targetRow.value, selected.value);
await getUsers();
deleteUserRoleLoading.value = false;
deleteDialog.value = false;

100
frontend/src/pages/UserManagement.vue
View File

@@ -37,7 +37,9 @@
<div class="row">
<q-chip v-if="(props.row as IUserRolesDisplay).isSuperuser" square color="accent" text-color="white" icon="admin_panel_settings"
label="システム管理者" size="sm" />
<span v-else>{{ (props.row as IUserRolesDisplay).roles.map(r => r.name).join('、') }}</span>
<template v-else>
<q-chip v-for="(item) in (props.row as IUserRolesDisplay).roles" square color="primary" text-color="white" :key="item.id" :label="item.name" size="sm" />
</template>
</div>
</q-td>
</template>
@@ -95,35 +97,6 @@
<q-toggle v-model="isSuperuser" />
</q-item-section>
</q-item>
<!--
<q-select
class="q-mt-xs"
filled
v-model="roles"
multiple
:options="roleOptions"
label="ロール" emit-value
map-options
:option-disable="opt => opt.value == -1 ? false : isSuperuser"
@add="(opt) => { if (opt.value.value == -1) { } }"
hint="各役割には固有の権限があります。">
<template v-slot:option="{ itemProps, opt, selected, toggleOption }">
<q-item v-bind="itemProps" v-if="opt.value == -1" >
<q-item-section>
<q-item-label>{{opt.label}}</q-item-label>
</q-item-section>
<q-item-section side>
<q-toggle :model-value="selected" @update:model-value="() => { toggleOption(opt); }" />
</q-item-section>
</q-item>
<q-separator v-if="opt.value == -1"/>
<q-item v-else v-bind="itemProps">
<q-item-section>
<q-item-label>{{opt.label}}</q-item-label>
</q-item-section>
</q-item>
</template>
</q-select> -->
<q-item tag="label" class="q-pl-sm q-pr-none q-py-xs">
<q-item-section>
@@ -187,7 +160,6 @@
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { api } from 'boot/axios';
import TableActionMenu from 'components/TableActionMenu.vue';
import { useUserStore } from 'stores/useUserStore';
import { IUserDisplay, IUserRolesDisplay } from 'src/types/UserTypes';
@@ -231,18 +203,13 @@ const isActive = ref(true);
const isPwd = ref(true);
const pwd = ref('');
// const roles = ref([]);
const isCreate = ref(true);
let editId = ref(0);
// const roleOptions = ref([
// {'value': -1, 'label': 'システム管理者'}
// ]);
const editId = ref(0);
const isCreate = computed(() => editId.value <= 0);
const actionList = [
{ label: '編集', icon: 'edit_note', action: editRow },
{ separator: true },
{ label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
{ label: '削除', icon: 'delete_outline', class: 'text-red', action: showDeleteUserConfirm },
];
const getUsers = async () => {
@@ -255,14 +222,12 @@ onMounted(async () => {
await getUsers();
})
// emulate fetching data from server
const addRow = () => {
// editId.value
onReset();
show.value = true;
}
function removeRow(row: IUserDisplay) {
function showDeleteUserConfirm(row: IUserDisplay) {
confirm.value = true;
editId.value = row.id;
}
@@ -270,11 +235,10 @@ function removeRow(row: IUserDisplay) {
const deleteUser = async () => {
await userStore.deleteUser(editId.value);
getUsers();
editId.value = 0;
onReset();
};
function editRow(row: IUserDisplay) {
isCreate.value = false
editId.value = row.id;
firstName.value = row.firstName;
@@ -282,7 +246,6 @@ function editRow(row: IUserDisplay) {
email.value = row.email;
isSuperuser.value = row.isSuperuser;
// roles.value = row.roles.map(item => item.id);
isActive.value = row.isActive;
isPwd.value = true;
@@ -294,40 +257,25 @@ const closeDg = () => {
onReset();
}
const onSubmit = () => {
const onSubmit = async () => {
addEditLoading.value = true;
if (editId.value !== 0) {
api.put(`api/v1/users/${editId.value}`, {
'first_name': firstName.value,
'last_name': lastName.value,
'is_superuser': isSuperuser.value,
'is_active': isActive.value,
'email': email.value,
// "roles": roles.value,
...(isCreate.value || resetPsw.value ? { password: pwd.value } : {})
}).then(() => {
const param = {
id: editId.value,
first_name: firstName.value,
last_name: lastName.value,
is_superuser: isSuperuser.value,
is_active: isActive.value,
email: email.value,
password: (isCreate.value || resetPsw.value) ? pwd.value : undefined
}
if (isCreate.value) {
await userStore.addUser(param);
} else {
await userStore.editUser(param);
}
getUsers();
closeDg();
onReset();
})
}
else {
api.post(`api/v1/users`, {
'id': 0,
'first_name': firstName.value,
'last_name': lastName.value,
'is_superuser': isSuperuser.value,
'is_active': isActive.value,
'email': email.value,
// "roles": roles.value,
'password': pwd.value
}).then(() => {
getUsers();
closeDg();
onReset();
})
}
}
const onReset = () => {
@@ -339,8 +287,6 @@ const onReset = () => {
isSuperuser.value = false;
isPwd.value = true;
editId.value = 0;
isCreate.value = true;
// roles.value = [];
resetPsw.value = false;
addEditLoading.value = false;
}

3
frontend/src/stores/useAppStore.ts
View File

@@ -97,7 +97,8 @@ function appToAppDisplay(app: IManagedApp) {
version: app.version,
versionName: app.versionname,
updateTime: formatDate(app.update_time),
updateUser: userToUserDisplay(app.updateuser)
updateUser: userToUserDisplay(app.updateuser),
versionChanged: app.is_saved
} as IAppDisplay
}

72
frontend/src/stores/useUserStore.ts
View File

@@ -1,6 +1,6 @@
import { defineStore } from 'pinia';
import { api } from 'boot/axios';
import { IRoles, IRolesDisplay, IUser, IUserDisplay, IUserRolesDisplay } from 'src/types/UserTypes';
import { IRoles, IRolesDisplay, IUser, IUserDisplay, IUserRolesDisplay, IUserSubmit } from 'src/types/UserTypes';
import { Notify } from 'quasar'
import { IResponse } from 'src/types/BaseTypes';
@@ -12,6 +12,7 @@ export const useUserStore = defineStore('user', {
roles: [] as IRolesDisplay[],
}),
actions: {
// -------------------------- users --------------------------
async loadUsers() {
this.reset('users');
try {
@@ -29,6 +30,39 @@ export const useUserStore = defineStore('user', {
}
},
getUserById(id: number) {
if (!this.userIds.has(id)) {
return null;
}
return this.users.find((item: IUserDisplay) => item.id === id);
},
async addUser(user: IUserSubmit) {
return await api.post('api/v1/users', user);
},
async editUser(user: IUserSubmit) {
const id = user.id;
delete user['id']
return await api.put(`api/v1/users/${id}`, user);
},
async deleteUser(userId: number) {
try {
await api.delete(`api/v1/users/${userId}`)
} catch (error) {
console.error(error);
Notify.create({
icon: 'error',
color: 'negative',
message: 'ユーザーの削除に失敗しました'
});
return false;
}
return true;
},
// -------------------------- roles --------------------------
async loadRoles() {
this.reset('roles');
try {
@@ -45,26 +79,19 @@ export const useUserStore = defineStore('user', {
}
},
getUserById(id: number) {
if (!this.userIds.has(id)) {
return null;
}
return this.users.find((item: IUserDisplay) => item.id === id);
async addRole(user: IUserRolesDisplay, role: IRolesDisplay) {
return await this.updateUserRole(user, user.roleIds.concat(role.id));
},
async deleteUser(userId: number) {
try {
await api.delete(`api/v1/users/${userId}`)
} catch (error) {
console.error(error);
Notify.create({
icon: 'error',
color: 'negative',
message: 'ユーザーの削除に失敗しました'
async removeRole(user: IUserRolesDisplay, role: IRolesDisplay) {
return await this.updateUserRole(user, user.roleIds.filter(e => e !== role.id));
},
async updateUserRole(user: IUserRolesDisplay, roleIds: number[]) {
return await api.post('api/v1/userrole', {
userid: user.id,
roleIds
});
return false;
}
return true;
},
reset(target?: 'users'|'roles') {
@@ -98,7 +125,14 @@ export function userToUserDisplay(user: IUser): IUserDisplay {
export function userToUserRolesDisplay(user: IUser): IUserRolesDisplay {
const userRolesDisplay = userToUserDisplay(user) as IUserRolesDisplay;
userRolesDisplay.roles = user.roles.map((role) => roleToRoleDisplay(role)).sort((a, b) => a.level - b.level);
const roles: IRolesDisplay[] = [];
const roleIds: number[] = [];
user.roles.sort((a, b) => a.level - b.level).forEach((role) => {
roles.push(roleToRoleDisplay(role));
roleIds.push(role.id);
});
userRolesDisplay.roles = roles;
userRolesDisplay.roleIds = roleIds;
return userRolesDisplay;
}

2
frontend/src/types/AppTypes.ts
View File

@@ -10,6 +10,7 @@ export interface IManagedApp {
updateuser: IUser;
create_time: string;
update_time: string;
is_saved: boolean;
}
export interface IAppDisplay{
@@ -21,6 +22,7 @@ export interface IAppDisplay{
updateTime:string;
version:number;
versionName?: string;
versionChanged: boolean;
}
export interface IVersionSubmit {

6
frontend/src/types/UserTypes.ts
View File

@@ -8,6 +8,11 @@ export interface IUser {
roles: IRoles[];
}
export interface IUserSubmit extends Omit<IUser, 'id' | 'roles'> {
id?: number;
password?: string;
}
export interface IUserDisplay {
id: number;
firstName: string;
@@ -21,6 +26,7 @@ export interface IUserDisplay {
export interface IUserRolesDisplay extends IUserDisplay {
roles: IRolesDisplay[];
roleIds: number[];
}
export interface IRoles {