Update pagination and filtering actions

Author: acoumb

src/Umbraco.Cms.Integrations.Crm.ActiveCampaign.Core/Controllers/FormsController.cs

@@ -6,7 +6,7 @@
 using System.Text.Json;
 using System.Text.Json.Nodes;
 using System.Threading.Tasks;
-
+using System.Web;
 using Umbraco.Cms.Integrations.Crm.ActiveCampaign.Core.Configuration;
 using Umbraco.Cms.Integrations.Crm.ActiveCampaign.Core.Models.Dtos;
 using Umbraco.Cms.Web.BackOffice.Controllers;
@@ -34,13 +34,11 @@ public FormsController(IOptions<ActiveCampaignSettings> options, IHttpClientFact
         public IActionResult CheckApiAccess() => new JsonResult(new ApiAccessDto(_settings.BaseUrl, _settings.ApiKey));
 
         [HttpGet]
-        public async Task<IActionResult> GetForms(int page = 1)
+        public async Task<IActionResult> GetForms(int page = 1, string searchQuery = "")
         {
             var client = _httpClientFactory.CreateClient(Constants.FormsHttpClient);
-
-            var requestUriString = page == 1
-                ? $"{client.BaseAddress}{ApiPath}&limit={Constants.DefaultPageSize}"
-                : $"{client.BaseAddress}{ApiPath}&limit={Constants.DefaultPageSize}&offset={(page - 1) * Constants.DefaultPageSize}";
+            
+            var requestUriString = BuildRequestUri(client.BaseAddress.ToString(), page, searchQuery);
 
             var requestMessage = new HttpRequestMessage { 
                 RequestUri = new Uri(requestUriString),
@@ -89,5 +87,24 @@ public async Task<IActionResult> GetForm(string id)
             return new JsonResult(JsonSerializer.Deserialize<FormResponseDto>(content));
         }
 
+        private string BuildRequestUri(string baseAddress, int page, string searchQuery)
+        {
+            var uri = $"{baseAddress}{ApiPath}?limit={Constants.DefaultPageSize}";
+
+            Dictionary<string, string> queryParamsDictionary = new Dictionary<string, string>();
+            if (page > 1)
+            {
+                queryParamsDictionary.Add("offset", ((page - 1) * Constants.DefaultPageSize).ToString());
+            }
+
+            if (!string.IsNullOrWhiteSpace(searchQuery))
+            {
+                queryParamsDictionary.Add("search", HttpUtility.UrlEncode(searchQuery));
+            }
+
+            return queryParamsDictionary.Count == 0 
+                ? uri
+                : string.Format("{0}&{1}", uri, string.Join("&", queryParamsDictionary.Select(kvp => $"{kvp.Key}={kvp.Value}")));
+        }
     }
 }

src/Umbraco.Cms.Integrations.Crm.ActiveCampaign.Core/Models/Dtos/MetaDto.cs

@@ -8,6 +8,6 @@ public class MetaDto
         public string Total { get; set; }
 
         [JsonPropertyName("totalPages")]
-        public int TotalPages => int.TryParse(Total, out var total) ? total / Constants.DefaultPageSize : 0;
+        public int TotalPages => int.TryParse(Total, out var total) ? (int)Math.Ceiling((double)total / Constants.DefaultPageSize) : 0;
     }
 }

src/Umbraco.Cms.Integrations.Crm.ActiveCampaign/App_Plugins/UmbracoCms.Integrations/Crm/ActiveCampaign/js/activecampaign.resource.js

@@ -9,9 +9,9 @@
                     $http.get(`${apiEndpoint}/CheckApiAccess`),
                     "Failed");
             },
-            getForms: function (page) {
+            getForms: function (page, searchQuery) {
                 return umbRequestHelper.resourcePromise(
-                    $http.get(`${apiEndpoint}/GetForms?page=${page}`),
+                    $http.get(`${apiEndpoint}/GetForms?page=${page}&searchQuery=${encodeURIComponent(searchQuery)}`),
                     "Failed");
             },
             getForm: function (id) {

src/Umbraco.Cms.Integrations.Crm.ActiveCampaign/App_Plugins/UmbracoCms.Integrations/Crm/ActiveCampaign/js/formpicker.controller.js

@@ -19,6 +19,10 @@
     vm.changePage = goToPage;
     vm.goToPage = goToPage;
 
+    vm.filterForms = () => {
+        loadForms(vm.pagination.pageNumber, vm.searchTerm);
+    }
+
     umbracoCmsIntegrationsCrmActiveCampaignResource.checkApiAccess().then(function (response) {
         vm.isApiConfigurationValid = response.isApiConfigurationValid;
         if (response.isApiConfigurationValid) {
@@ -79,12 +83,10 @@
         });
     }
 
-    function loadForms(page) {
+    function loadForms(page, searchQuery) {
         vm.loading = true;
-        umbracoCmsIntegrationsCrmActiveCampaignResource.getForms(page).then(function (response) {
-
-            vm.formsList = [];
-
+        vm.formsList = [];
+        umbracoCmsIntegrationsCrmActiveCampaignResource.getForms(page ?? 1, searchQuery ?? "").then(function (response) {
             if (response.forms != null) {
 
                 vm.pagination.totalPages = response.meta.totalPages;
@@ -104,7 +106,7 @@
 
     // pagination events
     function goToPage(page) {
-        loadForms(page);
+        loadForms(page, vm.searchTerm);
     }
 }
 

src/Umbraco.Cms.Integrations.Crm.ActiveCampaign/App_Plugins/UmbracoCms.Integrations/Crm/ActiveCampaign/views/formpickereditor.html

@@ -11,12 +11,13 @@
                     <div class="acOverlayGroup" ng-if="vm.isApiConfigurationValid">
                         <div class="form-search">
                             <i class="icon-search"></i>
-                            <input type="text" class="-full-width-input" ng-model="vm.searchTerm" placeholder="Type to search..." umb-auto-focus="" aria-invalid="false">
+                            <input type="text" class="-full-width-input" ng-model="vm.searchTerm" placeholder="Type to search..." umb-auto-focus="" aria-invalid="false" 
+                                   ng-change="vm.filterForms()">
                         </div>
                     </div>
                     <div class="acOverlayGroup" ng-if="vm.isApiConfigurationValid">
                         <ul class="acFormsList">
-                            <li ng-repeat="form in vm.formsList | orderBy:'name' | filter:vm.searchTerm" ng-click="vm.selectedForm = form"
+                            <li ng-repeat="form in vm.formsList | orderBy:'name' " ng-click="vm.selectedForm = form"
                                 ng-class="{ 'acFormSelected': vm.selectedForm == form }" role="button" tabindex="0">
                                 <a href="" ng-attr-title="form.name">
                                     <i class="icon-umb-contour"></i>
@@ -25,7 +26,7 @@
                             </li>
                         </ul>
                         <!-- If list is empty, then display -->
-                        <umb-empty-state ng-if="!vm.formsList"
+                        <umb-empty-state ng-if="!vm.formsList || vm.formsList.length == 0"
                                          position="center">
                             <localize key="content_listViewNoItems">There are no forms in the list.</localize>
                         </umb-empty-state>