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