Start adding in pagination to relations

src/Umbraco.Core/Persistence/Repositories/Implement/RelationRepository.cs

@@ -253,7 +253,7 @@ namespace Umbraco.Core.Persistence.Repositories.Implement
             // apply ordering
             ApplyOrdering(ref sql, ordering);
 
-            var pageIndexToFetch = pageIndex + 1;
+            var pageIndexToFetch = pageIndex;
             var page = Database.Page<RelationDto>(pageIndexToFetch, pageSize, sql);
             var dtos = page.Items;
             totalRecords = page.TotalItems;

src/Umbraco.Web.UI.Client/src/common/resources/relationtype.resource.js

@@ -114,6 +114,49 @@ function relationTypeResource($q, $http, umbRequestHelper, umbDataFormatter) {
                 $http.post(umbRequestHelper.getApiUrl("relationTypeApiBaseUrl", "DeleteById", [{ id: id }])),
                 "Failed to delete item " + id
             );
+        },
+
+        getPagedResults: function (id, options) {
+
+            console.log('options in', options);
+
+            var defaults = {
+                pageSize: 100,
+                pageNumber: 1,
+                orderDirection: "Ascending",
+                orderBy: "SortOrder"
+            };
+            if (options === undefined) {
+                options = {};
+            }
+            //overwrite the defaults if there are any specified
+            angular.extend(defaults, options);
+            //now copy back to the options we will use
+            options = defaults;
+            //change asc/desct
+            if (options.orderDirection === "asc") {
+                options.orderDirection = "Ascending";
+            }
+            else if (options.orderDirection === "desc") {
+                options.orderDirection = "Descending";
+            }
+
+            console.log('options before HTTP', options);
+
+            return umbRequestHelper.resourcePromise(
+                $http.get(
+                    umbRequestHelper.getApiUrl(
+                        "relationTypeApiBaseUrl",
+                        "GetPagedResults",
+                        {
+                            id: id,
+                            pageNumber: options.pageNumber,
+                            pageSize: options.pageSize,
+                            orderBy: options.orderBy,
+                            orderDirection: options.orderDirection
+                        }
+                    )),
+                'Failed to get paged relations for id ' + id);
         }
 
     };

src/Umbraco.Web.UI.Client/src/views/relationtypes/edit.controller.js

@@ -6,7 +6,7 @@
  * @description
  * The controller for editing relation types.
  */
-function RelationTypeEditController($scope, $routeParams, relationTypeResource, editorState, navigationService, dateHelper, userService, entityResource, formHelper, contentEditingHelper, localizationService) {
+function RelationTypeEditController($scope, $routeParams, relationTypeResource, editorState, navigationService, dateHelper, userService, entityResource, formHelper, contentEditingHelper, localizationService, eventsService) {
 
     var vm = this;
 
@@ -15,12 +15,19 @@ function RelationTypeEditController($scope, $routeParams, relationTypeResource,
     vm.page.saveButtonState = "init";
     vm.page.menu = {}
 
+    //var referencesLoaded = false;
+
     vm.save = saveRelationType;
 
     init();
 
     function init() {
         vm.page.loading = true;
+        vm.relationsLoading = true;
+
+        vm.changePageNumber = changePageNumber;
+        vm.options = {};
+        vm.options.pageSize = 3;
 
         var labelKeys = [
             "relationType_tabRelationType",
@@ -45,6 +52,13 @@ function RelationTypeEditController($scope, $routeParams, relationTypeResource,
             ];
         });
 
+        // load media type references when the 'info' tab is first activated/switched to
+        eventsService.on("app.tabChange", function (event, args) {
+            if (args.alias === "relations") {
+                loadRelations();
+            }
+        });
+
         relationTypeResource.getById($routeParams.id)
             .then(function (data) {
                 bindRelationType(data);
@@ -52,9 +66,27 @@ function RelationTypeEditController($scope, $routeParams, relationTypeResource,
             });
     }
 
-    function bindRelationType(relationType) {
-        formatDates(relationType.relations);
+    function changePageNumber(pageNumber) {
+        alert('pagenumber' + pageNumber);
+        vm.options.pageNumber = pageNumber;
+        loadRelations();
+    } 
 
+
+    /** Loads in the references one time  when content app changed */
+    function loadRelations() {
+        relationTypeResource.getPagedResults($routeParams.id, vm.options)
+            .then(function (data) {
+                console.log('paged data', data);
+                formatDates(data.items);
+
+                vm.relationsLoading = false;
+                vm.relations = data;
+            });
+    }
+    
+
+    function bindRelationType(relationType) {
         // Convert property value to string, since the umb-radiobutton component at the moment only handle string values.
         // Sometime later the umb-radiobutton might be able to handle value as boolean.
         relationType.isBidirectional = (relationType.isBidirectional || false).toString();

src/Umbraco.Web.UI.Client/src/views/relationtypes/views/relations.html

@@ -1,28 +1,39 @@
-<umb-box>
+<umb-load-indicator ng-if="model.relationsLoading"></umb-load-indicator>
+
+<umb-box ng-if="model.relationsLoading === false">
     <umb-box-content class="block-form">
 
-        <umb-empty-state size="small" ng-if="model.relationType.relations.length === 0">
+        <umb-empty-state size="small" ng-if="model.relations.totalItems === 0">
             <localize key="relationType_noRelations">No relations for this relation type.</localize>
         </umb-empty-state>
 
         <!-- Relations -->
-        <umb-control-group label="@relationType_relations" ng-if="model.relationType.relations.length > 0">
-                <div>
-                    <table class="table">
-                        <tr>
-                            <th><localize key="relationType_parent">Parent</localize></th>
-                            <th><localize key="relationType_child">Child</localize></th>
-                            <th><localize key="relationType_created">Created</localize></th>
-                            <th><localize key="relationType_comment">Comment</localize></th>
-                        </tr>
-                        <tr ng-repeat="relation in model.relationType.relations">
-                            <td>{{relation.parentName}}</td>
-                            <td>{{relation.childName}}</td>
-                            <td>{{relation.timestampFormatted}}</td>
-                            <td>{{relation.comment}}</td>
-                        </tr>
-                    </table>
-                </div>
-            </umb-control-group>
+        <umb-control-group label="@relationType_relations" ng-if="model.relations.items.length > 0">
+            <div>
+                <table class="table">
+                    <tr>
+                        <th><localize key="relationType_parent">Parent</localize></th>
+                        <th><localize key="relationType_child">Child</localize></th>
+                        <th><localize key="relationType_created">Created</localize></th>
+                        <th><localize key="relationType_comment">Comment</localize></th>
+                    </tr>
+                    <tr ng-repeat="relation in model.relations.items">
+                        <td>{{relation.parentName}}</td>
+                        <td>{{relation.childName}}</td>
+                        <td>{{relation.timestampFormatted}}</td>
+                        <td>{{relation.comment}}</td>
+                    </tr>
+                </table>
+            </div>
+
+            <!-- Pagination -->
+            <div class="flex justify-center">
+                <umb-pagination ng-if="model.relations.totalPages"
+                                page-number="model.relations.pageNumber"
+                                total-pages="model.relations.totalPages"
+                                on-change="model.changePageNumber(pageNumber)">
+                </umb-pagination>
+            </div>
+        </umb-control-group>
     </umb-box-content>
 </umb-box>

src/Umbraco.Web/Editors/RelationTypeController.cs

@@ -3,12 +3,14 @@ using System.Collections.Generic;
 using System.Net;
 using System.Net.Http;
 using System.Web.Http;
+using System.Linq;
 using Umbraco.Core;
 using Umbraco.Core.Cache;
 using Umbraco.Core.Configuration;
 using Umbraco.Core.Logging;
 using Umbraco.Core.Models;
 using Umbraco.Core.Persistence;
+using Umbraco.Core.Persistence.DatabaseModelDefinitions;
 using Umbraco.Core.Services;
 using Umbraco.Web.Models.ContentEditing;
 using Umbraco.Web.Mvc;
@@ -50,6 +52,23 @@ namespace Umbraco.Web.Editors
             return display;
         }
 
+        public PagedResult<RelationDisplay> GetPagedResults(int id, int pageNumber = 1, int pageSize = 100)
+        {
+
+            if (pageNumber <= 0 || pageSize <= 0)
+            {
+                throw new NotSupportedException("Both pageNumber and pageSize must be greater than zero");
+            }
+
+            // Ordering do we need to pass through?
+            var relations = Services.RelationService.GetPagedByRelationTypeId(id, pageNumber, pageSize, out long totalRecords);
+
+            return new PagedResult<RelationDisplay>(totalRecords, pageNumber, pageSize)
+            {
+                Items = relations.Select(x => Mapper.Map<RelationDisplay>(x))
+            };
+        }
+
         /// <summary>
         /// Gets a list of object types which can be associated via relations.
         /// </summary>