Merge pull request #284 from umbraco/bugfix/v16/activecampaign/pagination-filtering

Bugfix/v16/activecampaign/pagination filtering

Author: acoumb

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

@@ -1,6 +1,7 @@
 using Asp.Versioning;
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.WebUtilities;
 using Microsoft.Extensions.Options;
 using Umbraco.Cms.Api.Common.Builders;
 using Umbraco.Cms.Integrations.Crm.ActiveCampaign.Configuration;
@@ -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, [FromQuery] 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,22 @@ 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}";
+            
+            if (page > 1)
+            {
+                uri = QueryHelpers.AddQueryString(uri, "offset", ((page - 1) * Constants.DefaultPageSize).ToString());
+            }
+
+            if (!string.IsNullOrWhiteSpace(searchQuery))
+            {
+                uri = QueryHelpers.AddQueryString(uri, "search", searchQuery);
+            }
+
+            return uri;
+        }
     }
 }

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/public/umbraco-package.json

@@ -1,7 +1,7 @@
 {
   "id": "Umbraco.Cms.Integrations.Crm.ActiveCampaign",
   "name": "Umbraco CMS Integrations: CRM - ActiveCampaign",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "extensions": [
     {
       "name": "Umbraco EntryPoint",

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,11 @@ export default class ActiveCampaignFormsModalElement
     @state()
     _totalPages = 1;
 
+    @state()
+    _searchQuery = "";
+
+    #filterTimeout?: NodeJS.Timeout;
+
     constructor() {
         super();
 
@@ -47,6 +52,13 @@ export default class ActiveCampaignFormsModalElement
         this.#checkApiAccess();
     }
 
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.#filterTimeout) {
+            clearTimeout(this.#filterTimeout);
+        }
+    }
+
     async #checkApiAccess() {
         if (!this.#activecampaignFormsContext || !this.#configurationModel) return;
 
@@ -58,10 +70,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 +87,26 @@ 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));
+        // Clear existing timeout
+        if (this.#filterTimeout) {
+            clearTimeout(this.#filterTimeout);
+        }
 
-        this._filteredForms = result;
+        this.#filterTimeout = setTimeout(async () => {
+            this._currentPageNumber = 1;
+            await this.#loadForms(this._currentPageNumber, this._searchQuery);
+        }, 500);
     }
 
     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>