118 lines
2.3 KiB
Vue
118 lines
2.3 KiB
Vue
<template>
|
|
<Dialog
|
|
:options="{ title: `Manage Members for ${group.title}` }"
|
|
:modelValue="show"
|
|
@after-leave="
|
|
() => {
|
|
$emit('close', true);
|
|
this.memberEmail = '';
|
|
}
|
|
"
|
|
>
|
|
<template v-slot:body-content>
|
|
<LoadingText v-if="$resources.groupUsers.loading" />
|
|
<div v-else>
|
|
<span
|
|
v-if="$resources.groupUsers.data.length === 0"
|
|
class="text-gray-500 text-center"
|
|
>
|
|
No members added to this group.
|
|
</span>
|
|
<ListItem
|
|
v-else
|
|
v-for="user in $resources.groupUsers.data"
|
|
:title="user"
|
|
:key="user"
|
|
>
|
|
<template #actions>
|
|
<Button
|
|
icon="trash"
|
|
@click="
|
|
() =>
|
|
$resources.removeGroupUser.submit({
|
|
name: group.name,
|
|
user: user
|
|
})
|
|
"
|
|
/>
|
|
</template>
|
|
</ListItem>
|
|
</div>
|
|
</template>
|
|
<template v-slot:actions>
|
|
<Autocomplete
|
|
:options="autoCompleteList"
|
|
v-model="member"
|
|
placeholder="Select a member to add"
|
|
/>
|
|
<Button
|
|
variant="solid"
|
|
label="Add Member"
|
|
class="mt-2 w-full"
|
|
:loading="$resources.groupUsers.loading"
|
|
@click="
|
|
$resources.addGroupUser.submit({
|
|
name: group.name,
|
|
user: member.value
|
|
})
|
|
"
|
|
/>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ManageGroupMembers',
|
|
data() {
|
|
return {
|
|
member: {},
|
|
autoCompleteList: []
|
|
};
|
|
},
|
|
props: ['show', 'group'],
|
|
watch: {
|
|
group() {
|
|
this.$resources.groupUsers.submit();
|
|
}
|
|
},
|
|
resources: {
|
|
removeGroupUser: {
|
|
url: 'jcloud.api.account.remove_permission_group_user',
|
|
onSuccess() {
|
|
this.$resources.groupUsers.fetch();
|
|
}
|
|
},
|
|
addGroupUser: {
|
|
url: 'jcloud.api.account.add_permission_group_user',
|
|
onSuccess() {
|
|
this.$resources.groupUsers.fetch();
|
|
this.member = {};
|
|
}
|
|
},
|
|
groupUsers() {
|
|
return {
|
|
url: 'jcloud.api.account.permission_group_users',
|
|
params: {
|
|
name: this.group.name
|
|
},
|
|
onSuccess(r) {
|
|
this.autoCompleteList = this.$account.team_members
|
|
.filter(user => {
|
|
return (
|
|
!r.includes(user.name) && user.name != this.$account.team.user
|
|
);
|
|
})
|
|
.map(user => {
|
|
return {
|
|
label: user.name,
|
|
value: user.name
|
|
};
|
|
});
|
|
}
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|