Added pagination to recording tables

farhatahmad · Nov 2, 2023 · 29c3a6f · 29c3a6f
1 parent 3a810f9
commit 29c3a6f
Show file tree

Hide file tree

Showing 17 changed files with 27 additions and 20 deletions.
diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
@@ -197,8 +197,6 @@ input.search-bar {
 }
 
 #footer {
-  margin-top: $footer-buffer-height;
-
   #footer-container {
     border-top: 1px solid #d0d5dd;
   }

diff --git a/app/assets/stylesheets/helpers.scss b/app/assets/stylesheets/helpers.scss
@@ -34,14 +34,14 @@
 }
 
 .no-header-height {
-  min-height: calc(100vh - $footer-height - $footer-buffer-height);
+  min-height: calc(100vh - $footer-height);
 }
 
 .regular-height {
-  min-height: calc(100vh - $header-height - $footer-height - $footer-buffer-height);
+  min-height: calc(100vh - $header-height - $footer-height);
 
   .vertical-center {
-    min-height: calc(100vh - $header-height - $header-height - $footer-height - $footer-buffer-height);
+    min-height: calc(100vh - $header-height - $header-height - $footer-height);
   }
 }
 

diff --git a/app/assets/stylesheets/recordings.scss b/app/assets/stylesheets/recordings.scss
@@ -13,10 +13,15 @@
 //
 // You should have received a copy of the GNU Lesser General Public License along
 // with Greenlight; if not, see <http://www.gnu.org/licenses/>.
+#user-recordings {
+  min-height: 699px;
+}
 
-#user-recordings, #room-recordings {
-  min-height: 400px;
+#room-recordings {
+  min-height: 491px;
+}
 
+#user-recordings, #room-recordings {
   table {
     border-top-right-radius: $border-radius-lg;
     border-top-left-radius: $border-radius-lg;

diff --git a/app/controllers/api/v1/recordings_controller.rb b/app/controllers/api/v1/recordings_controller.rb
@@ -37,7 +37,7 @@ class RecordingsController < ApiController
       def index
         sort_config = config_sorting(allowed_columns: %w[name length visibility])
 
-        pagy, recordings = pagy(current_user.recordings&.order(sort_config, recorded_at: :desc)&.search(params[:search]))
+        pagy, recordings = pagy(current_user.recordings&.order(sort_config, recorded_at: :desc)&.search(params[:search]), items: 5)
         render_data data: recordings, meta: pagy_metadata(pagy), status: :ok
       end
 

diff --git a/app/controllers/api/v1/rooms_controller.rb b/app/controllers/api/v1/rooms_controller.rb
@@ -133,7 +133,7 @@ def purge_presentation
       def recordings
         sort_config = config_sorting(allowed_columns: %w[name length visibility])
 
-        pagy, room_recordings = pagy(@room.recordings&.order(sort_config, recorded_at: :desc)&.search(params[:q]))
+        pagy, room_recordings = pagy(@room.recordings&.order(sort_config, recorded_at: :desc)&.search(params[:q]), items: 3)
         render_data data: room_recordings, meta: pagy_metadata(pagy), status: :ok
       end
 

diff --git a/app/javascript/components/admin/manage_users/EditUser.jsx b/app/javascript/components/admin/manage_users/EditUser.jsx
@@ -39,7 +39,7 @@ export default function EditUser() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activekey="users">

diff --git a/app/javascript/components/admin/manage_users/ManageUsers.jsx b/app/javascript/components/admin/manage_users/ManageUsers.jsx
@@ -47,7 +47,7 @@ export default function ManageUsers() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5">{t('admin.admin_panel')}</h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="users">

diff --git a/app/javascript/components/admin/roles/EditRole.jsx b/app/javascript/components/admin/roles/EditRole.jsx
@@ -44,7 +44,7 @@ export default function EditRole() {
   if (isLoading) return null;
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="roles">

diff --git a/app/javascript/components/admin/roles/Roles.jsx b/app/javascript/components/admin/roles/Roles.jsx
@@ -39,7 +39,7 @@ export default function Roles() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="roles">

diff --git a/app/javascript/components/admin/room_configuration/RoomConfig.jsx b/app/javascript/components/admin/room_configuration/RoomConfig.jsx
@@ -37,7 +37,7 @@ export default function RoomConfig() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="room_configuration">

diff --git a/app/javascript/components/admin/server_recordings/ServerRecordings.jsx b/app/javascript/components/admin/server_recordings/ServerRecordings.jsx
@@ -38,7 +38,7 @@ export default function ServerRecordings() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> {t('admin.admin_panel')} </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="server_recordings">

diff --git a/app/javascript/components/admin/server_rooms/ServerRooms.jsx b/app/javascript/components/admin/server_rooms/ServerRooms.jsx
@@ -44,7 +44,7 @@ export default function ServerRooms() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5"> { t('admin.admin_panel') } </h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="server_rooms">

diff --git a/app/javascript/components/admin/site_settings/SiteSettings.jsx b/app/javascript/components/admin/site_settings/SiteSettings.jsx
@@ -37,7 +37,7 @@ export default function SiteSettings() {
   }
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="site_settings">

diff --git a/app/javascript/components/admin/tenants/Tenants.jsx b/app/javascript/components/admin/tenants/Tenants.jsx
@@ -45,7 +45,7 @@ export default function Tenants() {
   const { data: tenants, isLoading } = useTenants({ search: searchInput, page });
 
   return (
-    <div id="admin-panel" className="pb-3">
+    <div id="admin-panel" className="pb-4">
       <h3 className="py-5">{ t('admin.admin_panel') }</h3>
       <Card className="border-0 card-shadow">
         <Tab.Container activeKey="tenants">

diff --git a/app/javascript/components/recordings/RecordingsList.jsx b/app/javascript/components/recordings/RecordingsList.jsx
@@ -28,7 +28,7 @@ import SearchBar from '../shared_components/search/SearchBar';
 import ProcessingRecordingRow from './ProcessingRecordingRow';
 
 export default function RecordingsList({
-  recordings, isLoading, setPage, searchInput, setSearchInput, recordingsProcessing, adminTable,
+  recordings, isLoading, setPage, searchInput, setSearchInput, recordingsProcessing, adminTable, numPlaceholders,
 }) {
   const { t } = useTranslation();
 
@@ -65,7 +65,7 @@ export default function RecordingsList({
                 <tbody className="border-top-0">
                   {[...Array(recordingsProcessing)].map(() => <ProcessingRecordingRow />)}
                   {
-                    (isLoading && [...Array(7)].map((val, idx) => (
+                    (isLoading && [...Array(numPlaceholders)].map((val, idx) => (
                       // eslint-disable-next-line react/no-array-index-key
                       <RecordingsListRowPlaceHolder key={idx} />
                     )))
@@ -103,6 +103,7 @@ RecordingsList.defaultProps = {
   recordingsProcessing: 0,
   searchInput: '',
   adminTable: false,
+  numPlaceholders: 7,
 };
 
 RecordingsList.propTypes = {
@@ -132,4 +133,5 @@ RecordingsList.propTypes = {
   setSearchInput: PropTypes.func.isRequired,
   recordingsProcessing: PropTypes.number,
   adminTable: PropTypes.bool,
+  numPlaceholders: PropTypes.number,
 };
diff --git a/app/javascript/components/recordings/UserRecordings.jsx b/app/javascript/components/recordings/UserRecordings.jsx
@@ -31,6 +31,7 @@ export default function UserRecordings() {
         setPage={setPage}
         setSearchInput={setSearchInput}
         searchInput={searchInput}
+        numPlaceholders={5}
       />
     </div>
   );

diff --git a/app/javascript/components/recordings/room_recordings/RoomRecordings.jsx b/app/javascript/components/recordings/room_recordings/RoomRecordings.jsx
@@ -36,6 +36,7 @@ export default function RoomRecordings() {
         setSearchInput={setSearchInput}
         searchInput={searchInput}
         recordingsProcessing={roomRecordingsProcessing.data}
+        numPlaceholders={3}
       />
     </div>
   );