Fix text
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<q-dialog :auto-close="false" :model-value="visible" persistent bordered>
|
||||
<q-card class="dialog-content" >
|
||||
<q-toolbar class="bg-grey-4">
|
||||
<q-toolbar-title>「{{domain.name}}」のドメインを共有する</q-toolbar-title>
|
||||
<q-toolbar-title>「{{domain.name}}」のドメイン利用権限設定</q-toolbar-title>
|
||||
<q-btn flat round dense icon="close" @click="close" />
|
||||
</q-toolbar>
|
||||
|
||||
@@ -17,12 +17,12 @@
|
||||
input-debounce="0"
|
||||
:options="canSharedUserFilteredOptions"
|
||||
clearable
|
||||
:placeholder="canSharedUserFilter ? '' : domain.domainActive ? '共有するユーザーを選択' : 'ドメインが有効でないため、共有ができない。'"
|
||||
:placeholder="canSharedUserFilter ? '' : domain.domainActive ? '権限を付与するユーザーを選択' : 'ドメインが無効なため、権限を付与できません'"
|
||||
@filter="filterFn"
|
||||
:display-value="canSharedUserFilter?`${canSharedUserFilter.fullName} (${canSharedUserFilter.email})`:''">
|
||||
|
||||
<template v-slot:after>
|
||||
<q-btn :disable="!canSharedUserFilter" :loading="addLoading" label="共有する" color="primary" @click="shareTo(canSharedUserFilter as IUserDisplay)" />
|
||||
<q-btn :disable="!canSharedUserFilter" :loading="addLoading" label="付与" color="primary" @click="shareTo(canSharedUserFilter as IUserDisplay)" />
|
||||
</template>
|
||||
|
||||
<template v-slot:option="scope">
|
||||
@@ -33,9 +33,9 @@
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" title="現在の共有ユーザー">
|
||||
<sharing-user-list class="q-mt-md" style="height: 330px" :users="sharedUsers" :loading="loading" title="ドメイン利用権限を持つユーザー">
|
||||
<template v-slot:actions="{ row }">
|
||||
<q-btn flat color="primary" padding="xs" size="1em" :loading="row.id == removingUser?.id" icon="person_off" @click="removeShareTo(row)" />
|
||||
<q-btn title="解除" flat color="primary" padding="xs" size="1em" :loading="row.id == removingUser?.id" icon="person_off" @click="removeShareTo(row)" />
|
||||
</template>
|
||||
</sharing-user-list>
|
||||
</q-card-section>
|
||||
|
||||
56
frontend/src/components/TableActionMenu.vue
Normal file
56
frontend/src/components/TableActionMenu.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<q-btn flat padding="xs" round size="1em" icon="more_vert">
|
||||
<q-menu>
|
||||
<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-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-item>
|
||||
<q-separator v-else />
|
||||
</template>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType } from 'vue';
|
||||
import { IDomainOwnerDisplay } from '../types/DomainTypes';
|
||||
|
||||
interface Action {
|
||||
label: string;
|
||||
icon?: string;
|
||||
action: (row: any) => void|Promise<void>;
|
||||
class?: string;
|
||||
}
|
||||
interface Separator {
|
||||
separator: boolean;
|
||||
}
|
||||
type MenuItem = Action | Separator;
|
||||
|
||||
export default {
|
||||
name: 'TableActionMenu',
|
||||
props: {
|
||||
row: {
|
||||
type: Object as PropType<IDomainOwnerDisplay>,
|
||||
required: true
|
||||
},
|
||||
minWidth: {
|
||||
type: String,
|
||||
default: '100px'
|
||||
},
|
||||
actions: {
|
||||
type: Array as PropType<MenuItem[]>,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isAction(item: MenuItem): item is Action {
|
||||
return !('separator' in item);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -128,7 +128,7 @@ const version = process.env.version;
|
||||
const productName = process.env.productName;
|
||||
|
||||
onMounted(() => {
|
||||
authStore.toggleLeftMenu();
|
||||
authStore.setLeftMenu(true);
|
||||
});
|
||||
|
||||
function toggleLeftDrawer() {
|
||||
|
||||
@@ -30,31 +30,7 @@
|
||||
</template>
|
||||
<template v-slot:body-cell-actions="p">
|
||||
<q-td :props="p">
|
||||
<q-btn flat padding="xs" round size="1em" icon="more_vert">
|
||||
<q-menu >
|
||||
<q-list dense style="min-width: 100px">
|
||||
<q-item clickable v-close-popup @click="toEditFlowPage(p.row)">
|
||||
<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>
|
||||
<table-action-menu :row="p.row" :actions="actionList" />
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
@@ -83,6 +59,7 @@ import { date } from 'quasar'
|
||||
import { IManagedApp } from 'src/types/AppTypes';
|
||||
import ShowDialog from 'src/components/ShowDialog.vue';
|
||||
import AppSelectBox from 'src/components/AppSelectBox.vue';
|
||||
import TableActionMenu from 'components/TableActionMenu.vue';
|
||||
|
||||
interface IAppDisplay{
|
||||
id:string;
|
||||
@@ -119,6 +96,13 @@ const appDialog = ref();
|
||||
const showSelectApp=ref(false);
|
||||
const isAdding = ref(false);
|
||||
|
||||
const actionList = [
|
||||
{ label: '設定', icon: 'account_tree', action: toEditFlowPage },
|
||||
{ label: '履歴', icon: 'history', action: showHistory },
|
||||
{ separator: true },
|
||||
{ label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
|
||||
];
|
||||
|
||||
const getApps = async () => {
|
||||
loading.value = true;
|
||||
rowIds.clear();
|
||||
@@ -140,7 +124,6 @@ const getApps = async () => {
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
authStore.setLeftMenu(false);
|
||||
await getApps();
|
||||
});
|
||||
|
||||
@@ -166,11 +149,11 @@ const closeSelectAppDialog = async (val: 'OK'|'Cancel') => {
|
||||
isAdding.value = false;
|
||||
}
|
||||
|
||||
const removeRow = (app:IAppDisplay) => {
|
||||
function removeRow(app:IAppDisplay) {
|
||||
return
|
||||
}
|
||||
|
||||
const showHistory = (app:IAppDisplay) => {
|
||||
function showHistory(app:IAppDisplay) {
|
||||
return
|
||||
}
|
||||
|
||||
@@ -186,7 +169,7 @@ const appToAppDisplay = (app: IManagedApp) => {
|
||||
}
|
||||
}
|
||||
|
||||
const toEditFlowPage = (app:IAppDisplay) => {
|
||||
function toEditFlowPage(app:IAppDisplay) {
|
||||
store.setApp({
|
||||
appId: app.id,
|
||||
name: app.name
|
||||
|
||||
@@ -33,31 +33,7 @@
|
||||
|
||||
<template v-slot:body-cell-actions="p">
|
||||
<q-td :props="p">
|
||||
<q-btn flat padding="xs" round size="1em" icon="more_vert">
|
||||
<q-menu >
|
||||
<q-list dense style="min-width: 100px">
|
||||
<q-item clickable v-close-popup @click="editRow(p.row)">
|
||||
<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>
|
||||
<table-action-menu :row="p.row" :actions="actionList" />
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
@@ -138,7 +114,7 @@
|
||||
<q-card>
|
||||
<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>
|
||||
<q-card-section v-else-if="deleteLoadingState == 0" class="row items-center">
|
||||
<q-icon name="warning" color="warning" size="2em" />
|
||||
@@ -146,7 +122,7 @@
|
||||
</q-card-section>
|
||||
<q-card-section v-else class="row items-center">
|
||||
<q-icon name="error" color="negative" size="2em" />
|
||||
<span class="q-ml-sm">共有ユーザーが存在し、キャンセルする必要がある</span>
|
||||
<span class="q-ml-sm">ドメイン利用権限が存在し、キャンセルする必要がある</span>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
@@ -168,6 +144,7 @@ import { api } from 'boot/axios';
|
||||
import { useAuthStore } from 'stores/useAuthStore';
|
||||
import { useDomainStore } from 'stores/useDomainStore';
|
||||
import ShareDomainDialog from 'components/ShareDomain/ShareDomainDialog.vue';
|
||||
import TableActionMenu from 'components/TableActionMenu.vue';
|
||||
import { IDomain, IDomainOwnerDisplay, IDomainSubmit } from '../types/DomainTypes';
|
||||
|
||||
const authStore = useAuthStore();
|
||||
@@ -204,10 +181,6 @@ const show = ref(false);
|
||||
const confirm = ref(false);
|
||||
const resetPsw = ref(false);
|
||||
|
||||
const activeOptions = ['全データ', '启用', '未启用']
|
||||
const activeFilter = ref('全データ');
|
||||
|
||||
|
||||
const currentDomainId = computed(() => authStore.currentDomain.id);
|
||||
// const tenantid = ref(authStore.currentDomain.id);
|
||||
const name = ref('');
|
||||
@@ -220,14 +193,21 @@ const domainActive = ref(true);
|
||||
const isCreate = ref(true);
|
||||
let editId = ref(0);
|
||||
const shareDg = ref(false);
|
||||
const shareDomain = ref<IDomainOwnerDisplay>();
|
||||
const shareDomain = ref<IDomainOwnerDisplay>({} as IDomainOwnerDisplay);
|
||||
|
||||
const activeFilterUpdate = (selected) => {
|
||||
switch (selected) {
|
||||
case '启用':
|
||||
const activeOptions = [
|
||||
{ value: 0, label: '全状態' },
|
||||
{ value: 1, label: '使用' },
|
||||
{ value: 2, label: '未使用'}
|
||||
]
|
||||
const activeFilter = ref(activeOptions[0]);
|
||||
|
||||
const activeFilterUpdate = (option: {value: number}) => {
|
||||
switch (option.value) {
|
||||
case 1:
|
||||
getDomain((row) => row.domainActive)
|
||||
break;
|
||||
case '未启用':
|
||||
case 2:
|
||||
getDomain((row) => !row.domainActive)
|
||||
break;
|
||||
default:
|
||||
@@ -236,7 +216,14 @@ const activeFilterUpdate = (selected) => {
|
||||
}
|
||||
}
|
||||
|
||||
const getDomain = async (filter = () => true) => {
|
||||
const actionList = [
|
||||
{ label: '編集', icon: 'edit_note', action: editRow },
|
||||
{ label: '利用権限設定', icon: 'person_add_alt', action: openShareDg },
|
||||
{ separator: true },
|
||||
{ label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
|
||||
];
|
||||
|
||||
const getDomain = async (filter?: (row: IDomainOwnerDisplay) => boolean) => {
|
||||
loading.value = true;
|
||||
const { data } = await api.get<{data:IDomain[]}>(`api/domains`);
|
||||
rows.value = data.data.map((item) => {
|
||||
@@ -259,7 +246,7 @@ const getDomain = async (filter = () => true) => {
|
||||
isSuperuser: item.owner.is_superuser,
|
||||
}
|
||||
}
|
||||
}).filter(filter);
|
||||
}).filter(filter || (() => true));
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
@@ -274,7 +261,7 @@ const addRow = () => {
|
||||
show.value = true;
|
||||
}
|
||||
|
||||
const removeRow = async (row: IDomainOwnerDisplay) => {
|
||||
async function removeRow(row: IDomainOwnerDisplay) {
|
||||
confirm.value = true;
|
||||
deleteLoadingState.value = -1;
|
||||
editId.value = row.id;
|
||||
@@ -295,7 +282,7 @@ const deleteDomain = () => {
|
||||
deleteLoadingState.value = -1;
|
||||
};
|
||||
|
||||
const editRow = (row) => {
|
||||
function editRow(row) {
|
||||
isCreate.value = false
|
||||
editId.value = row.id;
|
||||
// tenantid.value = row.tenantid;
|
||||
@@ -349,7 +336,7 @@ const onSubmit = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const openShareDg = (row: IDomainOwnerDisplay|number) => {
|
||||
function openShareDg(row: IDomainOwnerDisplay|number) {
|
||||
if (typeof row === 'number') {
|
||||
row = rows.value.find(item => item.id === row) as IDomainOwnerDisplay;
|
||||
}
|
||||
@@ -357,7 +344,7 @@ const openShareDg = (row: IDomainOwnerDisplay|number) => {
|
||||
shareDg.value = true;
|
||||
};
|
||||
|
||||
const closeShareDg = () => {
|
||||
function closeShareDg() {
|
||||
shareDg.value = false;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user