Allow scrolling in users and groups list

changelog/unreleased/bugfix-missing-scroll-bar-in-user-management-app

@@ -0,0 +1,7 @@
+Bugfix: Missing scroll bar in user management app
+
+We've fixed a bug in the user management app where no scroll bar was displayed in the users or groups list
+if it exceeds the screen size.
+
+https://github.com/owncloud/web/pull/7321
+https://github.com/owncloud/web/issues/7266

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

@@ -6,6 +6,8 @@
     :fields="fields"
     :data="data"
     :highlighted="highlighted"
+    :sticky="true"
+    :header-position="headerPosition"
     @sort="handleSort"
   >
     <template #selectHeader>
@@ -74,6 +76,10 @@ export default {
     selectedGroups: {
       type: Array,
       required: true
+    },
+    headerPosition: {
+      type: Number,
+      required: true
     }
   },
   setup() {

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

@@ -6,6 +6,8 @@
     :fields="fields"
     :data="data"
     :highlighted="highlighted"
+    :sticky="true"
+    :header-position="headerPosition"
     @sort="handleSort"
   >
     <template #selectHeader>
@@ -83,6 +85,10 @@ export default {
     selectedUsers: {
       type: Array,
       required: true
+    },
+    headerPosition: {
+      type: Number,
+      required: true
     }
   },
   setup() {

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

@@ -15,8 +15,8 @@
     <main class="oc-flex oc-height-1-1 app-content oc-width-1-1">
       <app-loading-spinner v-if="loadResourcesTask.isRunning" />
       <template v-else>
-        <div class="files-list-wrapper oc-width-expand">
-          <div class="oc-app-bar oc-p-m">
+        <div id="groups-wrapper" class="oc-width-expand">
+          <div id="groups-app-bar" ref="appBar" class="oc-app-bar oc-p-m">
             <div class="oc-flex oc-flex-between">
               <oc-breadcrumb class="oc-flex oc-flex-middle" :items="breadcrumbs" />
               <div>
@@ -72,6 +72,7 @@
             <GroupsList
               :groups="groups"
               :selected-groups="selectedGroups"
+              :header-position="listHeaderPosition"
               class="oc-mt-m"
               @toggleSelectGroup="toggleSelectGroup"
               @toggleSelectAllGroups="toggleSelectAllGroups"
@@ -151,6 +152,7 @@ export default defineComponent({
   },
   data: function () {
     return {
+      listHeaderPosition: 0,
       selectedGroups: [],
       createGroupModalOpen: false,
       deleteGroupModalOpen: false,
@@ -228,13 +230,20 @@ export default defineComponent({
       this.loadResourcesTask.perform(this)
     })
 
+    this.calculateListHeaderPosition()
+
+    window.addEventListener('resize', this.calculateListHeaderPosition)
+
     this.$on('beforeDestroy', () => {
       bus.unsubscribe('app.user-management.list.load', loadResourcesEventToken)
     })
   },
 
   methods: {
     ...mapActions(['showMessage']),
+    calculateListHeaderPosition() {
+      this.listHeaderPosition = this.$refs.appBar.getBoundingClientRect().height
+    },
     toggleSelectAllGroups() {
       if (this.allGroupsSelected) {
         return (this.selectedGroups = [])
@@ -371,6 +380,20 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+#groups-app-bar {
+  background-color: var(--oc-color-background-default);
+  border-top-right-radius: 15px;
+  box-sizing: border-box;
+  z-index: 2;
+  position: sticky;
+  padding: 0 var(--oc-space-medium);
+  top: 0;
+}
+
+#groups-wrapper {
+  overflow-y: auto;
+}
+
 .groups-sidebar {
   position: relative;
   overflow: hidden;

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

@@ -15,8 +15,8 @@
     <main class="oc-flex oc-height-1-1 app-content oc-width-1-1">
       <app-loading-spinner v-if="loadResourcesTask.isRunning" />
       <template v-else>
-        <div class="files-list-wrapper oc-width-expand">
-          <div class="oc-app-bar oc-p-m">
+        <div id="users-wrapper" class="oc-width-expand">
+          <div id="users-app-bar" ref="appBar" class="oc-p-m">
             <div class="oc-flex oc-flex-between">
               <oc-breadcrumb class="oc-flex oc-flex-middle" :items="breadcrumbs" />
               <div>
@@ -72,6 +72,7 @@
             <UsersList
               :users="users"
               :selected-users="selectedUsers"
+              :header-position="listHeaderPosition"
               class="oc-mt-m"
               @toggleSelectUser="toggleSelectUser"
               @toggleSelectAllUsers="toggleSelectAllUsers"
@@ -232,6 +233,7 @@ export default defineComponent({
   },
   data: function () {
     return {
+      listHeaderPosition: 0,
       selectedUsers: [],
       createUserModalOpen: false,
       deleteUserModalOpen: false,
@@ -315,20 +317,26 @@ export default defineComponent({
       this.loadResourcesTask.perform(this)
     })
 
+    this.calculateListHeaderPosition()
+
+    window.addEventListener('resize', this.calculateListHeaderPosition)
+
     this.$on('beforeDestroy', () => {
       bus.unsubscribe('app.user-management.list.load', loadResourcesEventToken)
     })
   },
 
   methods: {
     ...mapActions(['showMessage']),
+    calculateListHeaderPosition() {
+      this.listHeaderPosition = this.$refs.appBar.getBoundingClientRect().height
+    },
     toggleSelectAllUsers() {
       if (this.allUsersSelected) {
         return (this.selectedUsers = [])
       }
       this.selectedUsers = [...this.users]
     },
-
     toggleSelectUser(toggledUser) {
       const isUserSelected = this.selectedUsers.find((user) => user.id === toggledUser.id)
 
@@ -529,6 +537,20 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+#users-app-bar {
+  background-color: var(--oc-color-background-default);
+  border-top-right-radius: 15px;
+  box-sizing: border-box;
+  z-index: 2;
+  position: sticky;
+  padding: 0 var(--oc-space-medium);
+  top: 0;
+}
+
+#users-wrapper {
+  overflow-y: auto;
+}
+
 .users-sidebar {
   position: relative;
   overflow: hidden;