Skip to content

Commit

Permalink
User group assignments (#7176)
Browse files Browse the repository at this point in the history
Implement user group assignments
  • Loading branch information
Jan committed Jun 24, 2022
1 parent b9811c4 commit ff48a00
Show file tree
Hide file tree
Showing 17 changed files with 576 additions and 413 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
Enhancement: Introduce group assignments

We have added a new quick action in the user management where the user can be assigned to groups.

https://github.com/owncloud/web/pull/7176
https://github.com/owncloud/web/issues/6678
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,17 @@
<template #avatar="rowData">
<avatar-image :width="32" :userid="rowData.item.id" :user-name="rowData.item.displayName" />
</template>
<template #members="rowData">
{{ rowData.item.members.length }}
</template>
<template #actions="{ item }">
<oc-button v-oc-tooltip="$gettext('Details')" @click="$emit('clickDetails', item)">
<oc-icon size="small" name="information" />
<oc-button
v-oc-tooltip="$gettext('Details')"
appearance="raw"
class="oc-mr-xs quick-action-button oc-p-xs"
@click="$emit('clickDetails', item)"
>
<oc-icon name="information" fill-type="line" />
</oc-button>
<!-- Editing groups is currently not supported by backend
<oc-button v-oc-tooltip="$gettext('Edit')" class="oc-ml-s" @click="$emit('clickEdit', item)">
Expand Down Expand Up @@ -105,6 +113,12 @@ export default {
title: this.$gettext('Group name'),
sortable: true
},
{
name: 'members',
title: this.$gettext('Members'),
type: 'slot',
sortable: true
},
{
name: 'actions',
title: this.$gettext('Actions'),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,7 @@
<p>{{ multipleUsersSelectedText }}</p>
</div>
<div v-if="user">
<div class="oc-flex user-info oc-mb-l">
<avatar-image class="oc-mb-m" :width="80" :userid="user.id" :user-name="user.displayName" />
<span v-text="user.onPremisesSamAccountName"></span>
<span class="oc-text-muted user-info-display-name" v-text="user.displayName"></span>
</div>
<UserInfoBox :user="user" />
<table
class="details-table"
:aria-label="$gettext('Overview of the information about the selected user')"
Expand Down Expand Up @@ -43,8 +39,12 @@
</div>
</template>
<script>
import UserInfoBox from './UserInfoBox.vue'
export default {
name: 'DetailsPanel',
components: {
UserInfoBox
},
props: {
users: {
type: Array,
Expand All @@ -70,13 +70,6 @@ export default {
}
</script>
<style lang="scss">
.user-info {
align-items: center;
flex-direction: column;
}
.user-info-display-name {
font-size: 1.5rem;
}
.details-table {
text-align: left;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
<template>
<div v-if="user" class="oc-mt-xl">
<div class="oc-flex group-info oc-mb-l">
<avatar-image class="oc-mb-m" :width="80" :userid="user.id" :user-name="user.displayName" />
<span v-text="user.onPremisesSamAccountName"></span>
<span class="oc-text-muted group-info-display-name" v-text="user.displayName"></span>
</div>
<UserInfoBox :user="user" />
<div v-if="editUser" class="oc-background-highlight oc-p-m">
<oc-text-input
v-model="editUser.displayName"
Expand Down Expand Up @@ -51,11 +47,13 @@
</template>
<script>
import * as EmailValidator from 'email-validator'
import UserInfoBox from './UserInfoBox.vue'
import CompareSaveDialog from '../../CompareSaveDialog.vue'
export default {
name: 'EditPanel',
components: {
UserInfoBox,
CompareSaveDialog
},
props: {
Expand Down Expand Up @@ -156,11 +154,4 @@ export default {
bottom: 0;
left: 0;
}
.user-info {
align-items: center;
flex-direction: column;
}
.user-info-display-name {
font-size: 1.5rem;
}
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<template>
<div v-if="user" class="oc-mt-xl">
<UserInfoBox :user="user" />
<div v-if="editUser" class="oc-background-highlight oc-p-m">
<oc-select
v-model="editUser.memberOf"
multiple
:options="groups"
option-label="displayName"
:label="$gettext('Add or remove groups')"
:fix-message-line="true"
>
<template #selected-option="{ displayName, id }">
<span class="oc-flex oc-flex-center">
<avatar-image
class="oc-flex oc-align-self-center oc-mr-s"
:width="16.8"
:userid="id"
:user-name="displayName"
/>
<span>{{ displayName }}</span>
</span>
</template>
<template #option="{ displayName, id }">
<div class="oc-flex">
<span class="oc-flex oc-flex-center">
<avatar-image
class="oc-flex oc-align-self-center oc-mr-s"
:width="16.8"
:userid="id"
:user-name="displayName"
/>
<span>{{ displayName }}</span>
</span>
</div>
</template>
</oc-select>
</div>
<compare-save-dialog
class="edit-compare-save-dialog"
:original-object="originalObjectUser"
:compare-object="compareObjectUser"
@revert="revertChanges"
@confirm="$emit('confirm', editUser)"
></compare-save-dialog>
</div>
</template>
<script>
import UserInfoBox from './UserInfoBox.vue'
import CompareSaveDialog from '../../CompareSaveDialog.vue'
export default {
name: 'GroupAssignmentsPanel',
components: {
UserInfoBox,
CompareSaveDialog
},
props: {
users: {
type: Array,
required: true
},
groups: {
type: Array,
required: true
}
},
data() {
return {
editUser: {}
}
},
computed: {
user() {
return this.users.length === 1 ? this.users[0] : null
},
originalObjectUser() {
return { user: { ...this.user } }
},
compareObjectUser() {
return { user: { ...this.editUser } }
}
},
watch: {
user: {
handler: function () {
this.editUser = { ...this.user }
},
deep: true,
immediate: true
}
},
methods: {
revertChanges() {
this.editUser = { ...this.user }
}
}
}
</script>
<style lang="scss">
.edit-compare-save-dialog {
position: absolute;
bottom: 0;
left: 0;
}
</style>
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<template>
<div class="oc-flex user-info oc-mb-l">
<avatar-image class="oc-mb-m" :width="80" :userid="user.id" :user-name="user.displayName" />
<span v-text="user.onPremisesSamAccountName"></span>
<span class="oc-text-muted user-info-display-name" v-text="user.displayName"></span>
</div>
</template>
<script>
export default {
name: 'UserInfoBox',
props: {
user: {
type: Object,
required: true
}
}
}
</script>
<style lang="scss">
.user-info {
align-items: center;
flex-direction: column;
}
.user-info-display-name {
font-size: 1.5rem;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,29 @@
</template>
<template #role="{ item }"> {{ item.role.displayName }} </template>
<template #actions="{ item }">
<oc-button v-oc-tooltip="$gettext('Details')" @click="$emit('clickDetails', item)">
<oc-icon size="small" name="information" />
<oc-button
v-oc-tooltip="$gettext('Details')"
appearance="raw"
class="oc-mr-xs quick-action-button oc-p-xs"
@click="$emit('clickDetails', item)"
>
<oc-icon name="information" fill-type="line" />
</oc-button>
<oc-button v-oc-tooltip="$gettext('Edit')" class="oc-ml-s" @click="$emit('clickEdit', item)">
<oc-icon size="small" name="pencil" />
<oc-button
v-oc-tooltip="$gettext('Group assignments')"
appearance="raw"
class="oc-mr-xs quick-action-button oc-p-xs"
@click="$emit('clickGroupAssignments', item)"
>
<oc-icon name="group-2" fill-type="line" />
</oc-button>
<oc-button
v-oc-tooltip="$gettext('Edit')"
appearance="raw"
class="oc-mr-xs quick-action-button oc-p-xs"
@click="$emit('clickEdit', item)"
>
<oc-icon name="pencil" fill-type="line" />
</oc-button>
</template>
<template #footer>
Expand Down
5 changes: 4 additions & 1 deletion packages/web-app-user-management/src/views/Groups.vue
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,9 @@ export default {
const loadResourcesTask = useTask(function* (signal, ref) {
const response = yield graphClient.groups.listGroups('displayName')
groups.value = response.data.value || []
groups.value.forEach((group) => {
group.members = group.members || []
})
})
return {
Expand Down Expand Up @@ -340,7 +343,7 @@ export default {
this.showMessage({
title: this.$gettext('Group was created successfully')
})
this.groups.push(response?.data)
this.groups.push({ ...response?.data, members: [] })
} catch (error) {
console.error(error)
this.showMessage({
Expand Down
Loading

0 comments on commit ff48a00

Please sign in to comment.