Update pagination and filtering actions

Author: acoumb

src/Umbraco.Cms.Integrations.Crm.ActiveCampaign/Api/Management/Controllers/GetFormsPagedController.cs

@@ -2,6 +2,7 @@
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Options;
+using System.Web;
 using Umbraco.Cms.Api.Common.Builders;
 using Umbraco.Cms.Integrations.Crm.ActiveCampaign.Configuration;
 using Umbraco.Cms.Integrations.Crm.ActiveCampaign.Models.Dtos;
@@ -21,15 +22,13 @@ public GetFormsByPageController(IOptions<ActiveCampaignSettings> options, IHttpC
         [ProducesResponseType(StatusCodes.Status404NotFound)]
         [ProducesResponseType(StatusCodes.Status403Forbidden)]
         [ProducesResponseType(StatusCodes.Status500InternalServerError)]
-        public async Task<IActionResult> GetForms([FromQuery] int? page = 1)
+        public async Task<IActionResult> GetForms([FromQuery] int? page = 1, string? searchQuery = "")
         {
             try
             {
                 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 ?? 1, searchQuery);
 
                 var requestMessage = new HttpRequestMessage
                 {
@@ -48,5 +47,25 @@ public async Task<IActionResult> GetForms([FromQuery] int? page = 1)
                     .Build());
             }
         }
+
+        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/Client/generated/types.gen.ts

@@ -64,6 +64,7 @@ export type GetFormsData = {
     path?: never;
     query?: {
         page?: number;
+        searchQuery?: string;
     };
     url: '/umbraco/activecampaign-forms/management/api/v1/forms';
 };
@@ -73,10 +74,6 @@ export type GetFormsErrors = {
      * The resource is protected and requires an authentication token
      */
     401: unknown;
-    /**
-     * Payment Required
-     */
-    402: unknown;
     /**
      * Forbidden
      */

src/Umbraco.Cms.Integrations.Crm.ActiveCampaign/Client/src/context/activecampaign-forms.context.ts

@@ -28,8 +28,8 @@ export class ActiveCampaignFormsContext extends UmbControllerBase {
         this.#configurationModel.setValue(data);
     }
 
-    async getForms(page?: number) {
-        return await this.#repository.getForms(page);
+    async getForms(page?: number, searchQuery?: string) {
+        return await this.#repository.getForms(page, searchQuery);
     }
 
     async getForm(id: string) {

src/Umbraco.Cms.Integrations.Crm.ActiveCampaign/Client/src/modal/activecampaign-forms-modal.element.ts

@@ -29,6 +29,9 @@ export default class ActiveCampaignFormsModalElement
     @state()
     _totalPages = 1;
 
+    @state()
+    _searchQuery = "";
+
     constructor() {
         super();
 
@@ -58,10 +61,10 @@ export default class ActiveCampaignFormsModalElement
         await this.#loadForms();
     }
 
-    async #loadForms(page?: number) {
+    async #loadForms(page?: number, searchQuery?: string) {
         this._loading = true;
 
-        const { data } = await this.#activecampaignFormsContext.getForms(page);
+        const { data } = await this.#activecampaignFormsContext.getForms(page, searchQuery);
         if (!data) {
             this._loading = false;
             return;
@@ -75,21 +78,18 @@ export default class ActiveCampaignFormsModalElement
         this._loading = false;
     }
 
-    #handleFilterInput(event: UUIInputEvent) {
+    async #handleFilterInput(event: UUIInputEvent) {
         let query = (event.target.value as string) || '';
         query = query.toLowerCase();
+        this._searchQuery = query;
 
-        const result = !query
-            ? this._forms
-            : this._forms.filter((form) => form.name.toLowerCase().includes(query));
-
-        this._filteredForms = result;
+        await this.#loadForms(this._currentPageNumber, this._searchQuery);
     }
 
     async #onPageChange(event: UUIPaginationEvent) {
         this._currentPageNumber = event.target?.current;
 
-        await this.#loadForms(this._currentPageNumber);
+        await this.#loadForms(this._currentPageNumber, this._searchQuery);
     }
 
     #renderPagination() {

src/Umbraco.Cms.Integrations.Crm.ActiveCampaign/Client/src/property-editor/form-picker-property-editor.element.ts

@@ -15,7 +15,6 @@ export default class ActiveCampaignFormPickerElement extends UmbElementMixin(Lit
 
     @property({ type: String })
     public value = "";
-
 
     @state()
     private _form: FormDtoModel = {

src/Umbraco.Cms.Integrations.Crm.ActiveCampaign/Client/src/repository/activecampaign-forms.repository.ts

@@ -28,8 +28,8 @@ export class ActiveCampaignFormsRepository extends UmbControllerBase {
         return { data };
     }
 
-    async getForms(page?: number) {
-        const { data, error } = await tryExecute(this, ActiveCampaignFormsService.getForms({ query: { page } }));
+    async getForms(page?: number, searchQuery?: string) {
+        const { data, error } = await tryExecute(this, ActiveCampaignFormsService.getForms({ query: { page, searchQuery } }));
 
         if (error || !data) {
             return { error };

src/Umbraco.Cms.Integrations.Crm.ActiveCampaign/Umbraco.Cms.Integrations.Crm.ActiveCampaign.csproj

@@ -16,7 +16,7 @@
 		<PackageIconUrl></PackageIconUrl>
 		<PackageProjectUrl>https://github.com/umbraco/Umbraco.Cms.Integrations/tree/main-v16/src/Umbraco.Cms.Integrations.Crm.ActiveCampaign</PackageProjectUrl>
 		<RepositoryUrl>https://github.com/umbraco/Umbraco.Cms.Integrations</RepositoryUrl>
-		<Version>5.0.0</Version>
+		<Version>5.1.0</Version>
 		<Authors>Umbraco HQ</Authors>
 		<Company>Umbraco</Company>
 		<PackageTags>Umbraco;Umbraco-Marketplace</PackageTags>