diff --git a/frontend/src/components/ShareDomain/RoleLabel.vue b/frontend/src/components/ShareDomain/RoleLabel.vue new file mode 100644 index 0000000..7f694de --- /dev/null +++ b/frontend/src/components/ShareDomain/RoleLabel.vue @@ -0,0 +1,19 @@ + + + diff --git a/frontend/src/components/ShareDomain/ShareDomainDialog.vue b/frontend/src/components/ShareDomain/ShareDomainDialog.vue index 3fe4a34..0cd5f55 100644 --- a/frontend/src/components/ShareDomain/ShareDomainDialog.vue +++ b/frontend/src/components/ShareDomain/ShareDomainDialog.vue @@ -2,7 +2,7 @@ - 「{{domain.name}}」のドメイン利用権限設定 + {{ dialogTitle }} @@ -18,11 +18,17 @@ :options="canSharedUserFilteredOptions" clearable :placeholder="canSharedUserFilter ? '' : domain.domainActive ? '権限を付与するユーザーを選択' : 'ドメインが無効なため、権限を付与できません'" - @filter="filterFn" - :display-value="canSharedUserFilter?`${canSharedUserFilter.fullName} (${canSharedUserFilter.email})`:''"> + @filter="filterFn"> + + - + + + + + @@ -54,11 +73,22 @@ import { IDomainOwnerDisplay } from '../../types/DomainTypes'; import { IUser, IUserDisplay } from '../../types/UserTypes'; import { api } from 'boot/axios'; import SharingUserList from 'components/ShareDomain/SharingUserList.vue'; +import RoleLabel from 'components/ShareDomain/RoleLabel.vue'; import { Dialog } from 'quasar' interface Props { modelValue: boolean; domain: IDomainOwnerDisplay; + dialogTitle: string; + userListTitle: string; + shareApi: (user: IUserDisplay, domain: IDomainOwnerDisplay) => Promise; + removeSharedApi: (user: IUserDisplay, domain: IDomainOwnerDisplay) => Promise; + getSharedApi: (domain: IDomainOwnerDisplay) => Promise; +} + +interface IUserDisplayWithShareRole extends IUserDisplay { + isRemoving: boolean; + role: number; } const props = defineProps(); @@ -69,17 +99,16 @@ const emit = defineEmits<{ }>(); const addLoading = ref(false); -const removingUser = ref(); const loading = ref(true); const visible = ref(props.modelValue); -const allUsers = ref([]); -const sharedUsers = ref([]); +const allUsers = ref([]); +const sharedUsers = ref([]); const sharedUsersIdSet = new Set(); -const canSharedUsers = ref([]); -const canSharedUserFilter = ref(); -const canSharedUserFilteredOptions = ref([]); +const canSharedUsers = ref([]); +const canSharedUserFilter = ref(); +const canSharedUserFilteredOptions = ref([]); const filterFn = (val:string, update: (cb: () => void) => void) => { update(() => { @@ -99,7 +128,12 @@ watch( visible.value = newValue; sharedUsers.value = []; canSharedUserFilter.value = undefined + loading.value = false; + addLoading.value = false; if (newValue) { + if (Object.keys(allUsers.value).length == 0) { + await getUsers(); + } await loadShared(); } } @@ -130,7 +164,7 @@ const checkClose = () => { }).onCancel(() => { close(); }).onOk(() => { - shareTo(canSharedUserFilter.value as IUserDisplay); + shareTo(canSharedUserFilter.value as IUserDisplayWithShareRole); }); }; @@ -138,35 +172,42 @@ const close = () => { emit('close'); }; -const shareTo = async (user: IUserDisplay) => { +const shareTo = async (user: IUserDisplayWithShareRole) => { addLoading.value = true; loading.value = true; - await api.post(`api/domain/${user.id}?domainid=${props.domain.id}`) + await props.shareApi(user, props.domain); await loadShared(); canSharedUserFilter.value = undefined; loading.value = false; addLoading.value = false; } -const removeShareTo = async (user: IUserDisplay) => { - removingUser.value = user; +const removeShareTo = async (user: IUserDisplayWithShareRole) => { loading.value = true; - await api.delete(`api/domain/${props.domain.id}/${user.id}`) + user.isRemoving = true; + await props.removeSharedApi(user, props.domain); await loadShared(); loading.value = false; - removingUser.value = undefined; }; const loadShared = async () => { loading.value = true; sharedUsersIdSet.clear(); - const { data } = await api.get(`/api/domainshareduser/${props.domain.id}`); + const { data } = await props.getSharedApi(props.domain); sharedUsers.value = data.data.map((item: IUser) => { const val = itemToDisplay(item); sharedUsersIdSet.add(val.id); + // for sort + if (isOwner(item.id)) { + val.role = 2; + } else if (isManager(item.id)) { + val.role = 1; + } else { + val.role = 0; + } return val; - }); + }).reverse().sort((a: IUserDisplayWithShareRole, b: IUserDisplayWithShareRole) => b.role - a.role); canSharedUsers.value = allUsers.value.filter((item) => !sharedUsersIdSet.has(item.id)); canSharedUserFilteredOptions.value = canSharedUsers.value; @@ -174,14 +215,15 @@ const loadShared = async () => { loading.value = false; } -onMounted(async () => { - await getUsers(); -}) +function isOwner(userId: number) { + return userId === props.domain?.owner?.id +} + +function isManager(userId: number) { + return false // TODO +} const getUsers = async () => { - if (Object.keys(allUsers.value).length > 0) { - return; - } loading.value = true; const result = await api.get(`api/v1/users`); allUsers.value = result.data.data.map(itemToDisplay); @@ -198,13 +240,16 @@ const itemToDisplay = (item: IUser) => { email: item.email, isSuperuser: item.is_superuser, isActive: item.is_active, - } as IUserDisplay + role: 0, + } as IUserDisplayWithShareRole } +