Fix remote field updater

opf · Aug 15, 2024 · ce908ee · ce908ee
1 parent ba7e03f
commit ce908ee
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 24 deletions.
diff --git a/...ed/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.html b/...ed/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.html
@@ -5,6 +5,7 @@
   class="spot-input"
   data-filter--filters-form-target="singleDay"
   [ngClass]="inputClassNames"
+  [ngModel]="value"
   [attr.data-value]="value"
   [id]="id"
   [name]="name"

diff --git a/frontend/src/app/shared/components/remote-field-updater/remote-field-updater.component.ts b/frontend/src/app/shared/components/remote-field-updater/remote-field-updater.component.ts
@@ -26,39 +26,41 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component, ElementRef, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, OnInit } from '@angular/core';
 import { KeyCodes } from 'core-app/shared/helpers/keyCodes.enum';
 import { HttpClient } from '@angular/common/http';
 
 export const remoteFieldUpdaterSelector = 'remote-field-updater';
 
 @Component({
   selector: remoteFieldUpdaterSelector,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: '',
 })
 export class RemoteFieldUpdaterComponent implements OnInit {
-  constructor(private elementRef:ElementRef,
-    private http:HttpClient) {
+  constructor(
+    private elementRef:ElementRef,
+    private http:HttpClient,
+  ) {
   }
 
   private url:string;
 
   private htmlMode:boolean;
 
-  private inputs:JQuery;
+  private form:HTMLFormElement;
 
-  private target:JQuery;
+  private target:HTMLElement;
 
   ngOnInit():void {
-    const $element = jQuery(this.elementRef.nativeElement);
-    const $form = $element.parent();
-    this.inputs = $form.find('.remote-field--input');
-    this.target = $form.find('.remote-field--target');
+    const element = this.elementRef.nativeElement as HTMLElement;
+    this.form = element.closest('form') as HTMLFormElement;
+    this.target = this.form.querySelector('.remote-field--target') as HTMLElement;
 
-    this.url = $element.data('url');
-    this.htmlMode = $element.data('mode') === 'html';
+    this.url = element.dataset.url as string;
+    this.htmlMode = element.dataset.mode === 'html';
 
-    this.inputs.on('keyup change', _.debounce((event:JQuery.TriggeredEvent) => {
+    const debouncedEvent = _.debounce((event:InputEvent) => {
       // This prevents an update of the result list when
       // tabbing to the result list (9),
       // pressing enter (13)
@@ -69,11 +71,14 @@ export class RemoteFieldUpdaterComponent implements OnInit {
       if (event.type === 'change' || (event.which && keyCodes.indexOf(event.which) === -1)) {
         this.updater();
       }
-    }, 500));
+    }, 500);
+
+    this.form.addEventListener('keyup', debouncedEvent);
+    this.form.addEventListener('change', debouncedEvent);
   }
 
-  private request(params:any) {
-    const headers:any = {};
+  private request(params:Record<string, string>) {
+    const headers:Record<string, string> = {};
 
     // In HTML mode, expect html response
     if (this.htmlMode) {
@@ -95,19 +100,22 @@ export class RemoteFieldUpdaterComponent implements OnInit {
   }
 
   private updater() {
-    const params:any = {};
+    const params:Record<string, string> = {};
 
     // Gather request keys
-    this.inputs.each((i, el:HTMLInputElement) => {
-      params[el.dataset.remoteFieldKey!] = el.value;
-    });
+    this
+      .form
+      .querySelectorAll('.remote-field--input')
+      .forEach((el:HTMLInputElement) => {
+        params[el.dataset.remoteFieldKey as string] = el.value;
+      });
 
     this
       .request(params)
       .subscribe((response:any) => {
         if (this.htmlMode) {
-        // Replace the given target
-          this.target.html(response);
+          // Replace the given target
+          this.target.innerHTML = response as string;
         } else {
           _.each(response, (val:string, selector:string) => {
             const element = document.getElementById(selector) as HTMLElement|HTMLInputElement;

diff --git a/modules/costs/app/views/costlog/edit.html.erb b/modules/costs/app/views/costlog/edit.html.erb
@@ -38,9 +38,6 @@ See COPYRIGHT and LICENSE files for more details.
   :post :
   :put %>
 
-<opce-remote-field-updater data-url="<%= url_for(controller: :budgets, action: :update_material_budget_item, project_id: @cost_entry.project) %>"
-                      data-mode="json">
-</opce-remote-field-updater>
 <%= labelled_tabular_form_for @cost_entry, url: url, html: { method: method } do |f| %>
   <%= error_messages_for 'cost_entry' %>
   <%= back_url_hidden_field_tag %>
@@ -151,4 +148,8 @@ See COPYRIGHT and LICENSE files for more details.
   </div>
 
   <%= styled_button_tag t(:button_save), class: '-with-icon icon-checkmark' %>
+
+  <opce-remote-field-updater data-url="<%= url_for(controller: :budgets, action: :update_material_budget_item, project_id: @cost_entry.project) %>"
+                             data-mode="json">
+  </opce-remote-field-updater>
 <% end %>