Move user group select to edit panel

changelog/unreleased/enhancement-move-user-group-select-to-edit-panel

@@ -0,0 +1,6 @@
+Enhancement: Move user group select to edit panel
+
+The user group select input has been moved to the user edit panel for better editing.
+
+https://github.com/owncloud/web/pull/8279
+https://github.com/owncloud/web/issues/8278

packages/web-app-admin-settings/src/components/Users/SideBar/EditPanel.vue

@@ -46,9 +46,17 @@
           :total-quota="editUser.drive.quota.total || 0"
           @selectedOptionChange="changeSelectedQuotaOption"
         />
-        <p v-else v-translate class="oc-mb-s oc-mt-rm oc-text-meta">
-          To set an individual quota, the user needs to have logged in once.
-        </p>
+        <p
+          v-else
+          class="oc-mb-m oc-mt-rm oc-text-meta"
+          v-text="$gettext('To set an individual quota, the user needs to have logged in once.')"
+        />
+        <group-select
+          class="oc-mb-s"
+          :selected-groups="editUser.memberOf"
+          :available-groups="groups"
+          @selectedOptionChange="changeSelectedGroupOption"
+        />
       </div>
       <compare-save-dialog
         class="edit-compare-save-dialog oc-mb-l"
@@ -62,20 +70,23 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, PropType, ref } from 'vue'
 import * as EmailValidator from 'email-validator'
 import UserInfoBox from './UserInfoBox.vue'
 import CompareSaveDialog from 'web-pkg/src/components/sideBar/CompareSaveDialog.vue'
+import GroupSelect from './GroupSelect.vue'
 import QuotaSelect from 'web-pkg/src/components/QuotaSelect.vue'
 import { cloneDeep } from 'lodash-es'
-import { User } from 'web-client/src/generated'
+import { Group, User } from 'web-client/src/generated'
+import { MaybeRef } from 'web-pkg'
 
 export default defineComponent({
   name: 'EditPanel',
   components: {
     UserInfoBox,
     CompareSaveDialog,
-    QuotaSelect
+    QuotaSelect,
+    GroupSelect
   },
   props: {
     user: {
@@ -85,22 +96,25 @@ export default defineComponent({
     roles: {
       type: Array,
       required: true
+    },
+    groups: {
+      type: Array as PropType<Group[]>,
+      required: true
     }
   },
-  data() {
-    return {
-      editUser: {},
-      formData: {
-        displayName: {
-          errorMessage: '',
-          valid: true
-        },
-        email: {
-          errorMessage: '',
-          valid: true
-        }
+  setup() {
+    const editUser: MaybeRef<User> = ref({})
+    const formData = ref({
+      displayName: {
+        errorMessage: '',
+        valid: true
+      },
+      email: {
+        errorMessage: '',
+        valid: true
       }
-    }
+    })
+    return { editUser, formData }
   },
   computed: {
     invalidFormData() {
@@ -128,6 +142,9 @@ export default defineComponent({
     changeSelectedQuotaOption(option) {
       this.editUser.drive.quota.total = option.value
     },
+    changeSelectedGroupOption(option: Group) {
+      this.editUser.memberOf = option
+    },
     validateDisplayName() {
       this.formData.displayName.valid = false
 

packages/web-app-admin-settings/src/components/Users/SideBar/GroupSelect.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="user-group-select-form">
+    <oc-select
+      :model-value="selectedOption"
+      class="oc-mb-s"
+      multiple
+      :options="availableGroups"
+      option-label="displayName"
+      :label="$gettext('Groups')"
+      :fix-message-line="true"
+      @update:modelValue="onUpdate"
+    >
+      <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>
+</template>
+<script lang="ts">
+import { defineComponent, PropType, ref, unref, watch } from 'vue'
+import { computed } from 'vue'
+import { Group } from 'web-client/src/generated'
+
+export default defineComponent({
+  name: 'GroupSelect',
+  props: {
+    selectedGroups: {
+      type: Array as PropType<Group[]>,
+      required: true
+    },
+    availableGroups: {
+      type: Array as PropType<Group[]>,
+      required: true
+    }
+  },
+  setup(props, { emit }) {
+    const selectedOption = ref(props.selectedGroups)
+    const onUpdate = (event) => {
+      selectedOption.value = event
+      emit('selectedOptionChange', unref(selectedOption))
+    }
+
+    const currentGroups = computed(() => props.selectedGroups)
+    watch(currentGroups, () => {
+      selectedOption.value = props.selectedGroups
+    })
+
+    return { selectedOption, onUpdate }
+  }
+})
+</script>

packages/web-app-admin-settings/src/components/Users/UsersList.vue

@@ -54,13 +54,6 @@
           @click="showDetails(item)"
         >
           <oc-icon name="information" fill-type="line" /></oc-button
-        ><oc-button
-          v-oc-tooltip="$gettext('Group assignments')"
-          appearance="raw"
-          class="oc-mr-xs quick-action-button oc-p-xs"
-          @click="showGroupAssigmentPanel(item)"
-        >
-          <oc-icon name="group-2" fill-type="line" /></oc-button
         ><oc-button
           v-oc-tooltip="$gettext('Edit')"
           appearance="raw"
@@ -139,12 +132,10 @@ export default defineComponent({
       return this.users.length === this.selectedUsers.length
     },
     footerTextTotal() {
-      const translated = this.$gettext('%{userCount} users in total')
-      return this.$gettextInterpolate(translated, { userCount: this.users.length })
+      return this.$gettext('%{userCount} users in total', { userCount: this.users.length })
     },
     footerTextFilter() {
-      const translated = this.$gettext('%{userCount} matching users')
-      return this.$gettextInterpolate(translated, { userCount: this.data.length })
+      return this.$gettext('%{userCount} matching users', { userCount: this.data.length })
     },
     fields() {
       return [
@@ -251,9 +242,7 @@ export default defineComponent({
       this.sortDir = event.sortDir
     },
     getSelectUserLabel(user) {
-      const translated = this.$gettext('Select %{ user }')
-
-      return this.$gettextInterpolate(translated, { user: user.displayName }, true)
+      return this.$gettext('Select %{ user }', { user: user.displayName }, true)
     }
   }
 })

packages/web-app-admin-settings/src/views/Users.vue

@@ -83,7 +83,6 @@ import CreateUserModal from '../components/Users/CreateUserModal.vue'
 import DeleteUserModal from '../components/Users/DeleteUserModal.vue'
 import DetailsPanel from '../components/Users/SideBar/DetailsPanel.vue'
 import EditPanel from '../components/Users/SideBar/EditPanel.vue'
-import GroupAssignmentsPanel from '../components/Users/SideBar/GroupAssignmentsPanel.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import { useAccessToken, useStore } from 'web-pkg/src/composables'
 import { defineComponent, ref, onBeforeUnmount, onMounted, unref, watch } from 'vue'
@@ -265,19 +264,6 @@ export default defineComponent({
           default: false,
           enabled: this.selectedUsers.length === 1,
           componentAttrs: { user: this.loadedUser, roles: this.roles, confirm: this.editUser }
-        },
-        {
-          app: 'GroupAssignmentsPanel',
-          icon: 'group-2',
-          title: this.$gettext('Group assignments'),
-          component: GroupAssignmentsPanel,
-          default: false,
-          enabled: this.selectedUsers.length === 1,
-          componentAttrs: {
-            user: this.loadedUser,
-            groups: this.groups,
-            confirm: this.editUserGroupAssignments
-          }
         }
       ].filter((p) => p.enabled)
     }
@@ -425,6 +411,10 @@ export default defineComponent({
           }
         }
 
+        if (!isEqual(actualUser.memberOf, editUser.memberOf)) {
+          await this.editUserGroupAssignments(editUser)
+        }
+
         if (!isEqual(actualUser.role, editUser.role)) {
           /**
            * Setting api calls are just temporary and will be replaced with the graph api,
@@ -454,10 +444,11 @@ export default defineComponent({
         const user = this.users.find((user) => user.id === editUser.id)
 
         const groupsToAdd = editUser.memberOf.filter((editUserGroup) => {
-          return !user.memberOf.includes(editUserGroup)
+          return !user.memberOf.some((g) => g.id === editUserGroup.id)
         })
+
         const groupsToDelete = user.memberOf.filter((editUserGroup) => {
-          return !editUser.memberOf.includes(editUserGroup)
+          return !editUser.memberOf.some((g) => g.id === editUserGroup.id)
         })
 
         for (const groupToAdd of groupsToAdd) {