User group assignments

changelog/unreleased/enhancement-user-management-group-assignments

@@ -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

packages/web-app-user-management/src/components/Groups/GroupsList.vue

@@ -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)">
@@ -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'),

packages/web-app-user-management/src/components/Users/SideBar/DetailsPanel.vue

@@ -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')"
@@ -43,8 +39,12 @@
  </div>
 </template>
 <script>
+import UserInfoBox from './UserInfoBox.vue'
 export default {
  name: 'DetailsPanel',
+ components: {
+ UserInfoBox
+ },
  props: {
  users: {
  type: Array,
@@ -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;
 

packages/web-app-user-management/src/components/Users/SideBar/EditPanel.vue

@@ -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"
@@ -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: {
@@ -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>

packages/web-app-user-management/src/components/Users/SideBar/GroupAssignmentsPanel.vue

@@ -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>

packages/web-app-user-management/src/components/Users/SideBar/UserInfoBox.vue

@@ -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>

packages/web-app-user-management/src/components/Users/UsersList.vue

@@ -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>

packages/web-app-user-management/src/views/Groups.vue

@@ -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 {
@@ -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({