From f832395a1fd8976705115eb268518b688f8f6720 Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Fri, 29 Nov 2024 08:08:59 +0100 Subject: [PATCH 1/2] Correct form definition to ensure enough space between the elements --- .../new_custom_field_projects_form_modal_component.html.erb | 2 +- .../projects/custom_fields/custom_field_mapping_form.rb | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/app/components/admin/custom_fields/custom_field_projects/new_custom_field_projects_form_modal_component.html.erb b/app/components/admin/custom_fields/custom_field_projects/new_custom_field_projects_form_modal_component.html.erb index a7596230ea1c..3950d4e83b5b 100644 --- a/app/components/admin/custom_fields/custom_field_projects/new_custom_field_projects_form_modal_component.html.erb +++ b/app/components/admin/custom_fields/custom_field_projects/new_custom_field_projects_form_modal_component.html.erb @@ -37,7 +37,7 @@ See COPYRIGHT and LICENSE files for more details. ) do |form| concat(render(Primer::Alpha::Dialog::Body.new( id: dialog_body_id, test_selector: dialog_body_id, aria: { label: title }, - style: "min-height: 300px" + classes: "Overlay-body_autocomplete_height" )) do render(Projects::CustomFields::CustomFieldMappingForm.new(form, project_mapping: @custom_field_project_mapping)) end) diff --git a/app/forms/projects/custom_fields/custom_field_mapping_form.rb b/app/forms/projects/custom_fields/custom_field_mapping_form.rb index f637ea059934..1a3f71f3dbe6 100644 --- a/app/forms/projects/custom_fields/custom_field_mapping_form.rb +++ b/app/forms/projects/custom_fields/custom_field_mapping_form.rb @@ -31,8 +31,7 @@ class CustomFieldMappingForm < ApplicationForm include OpPrimer::ComponentHelpers form do |form| - form.group(layout: :vertical) do |group| - group.project_autocompleter( + form.project_autocompleter( name: :id, label: Project.model_name.human, visually_hide_label: true, @@ -48,13 +47,12 @@ class CustomFieldMappingForm < ApplicationForm } ) - group.check_box( + form.check_box( name: :include_sub_projects, label: I18n.t(:label_include_sub_projects), checked: false, label_arguments: { class: "no-wrap" } ) - end end def initialize(project_mapping:) From e2f43048eb2be5a5867a95f8180009efbe5920c6 Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Fri, 29 Nov 2024 14:49:36 +0100 Subject: [PATCH 2/2] Remove the turboEventListener when the component is destroyed to avoid unneccessary reloads --- .../wp-relations/wp-relations.component.ts | 29 ++++++++++++++----- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/frontend/src/app/features/work-packages/components/wp-relations/wp-relations.component.ts b/frontend/src/app/features/work-packages/components/wp-relations/wp-relations.component.ts index de6591921ebe..b1f93d9f1718 100644 --- a/frontend/src/app/features/work-packages/components/wp-relations/wp-relations.component.ts +++ b/frontend/src/app/features/work-packages/components/wp-relations/wp-relations.component.ts @@ -32,6 +32,7 @@ import { Component, ElementRef, Input, + OnDestroy, OnInit, ViewChild, } from '@angular/core'; @@ -56,13 +57,15 @@ import { changeDetection: ChangeDetectionStrategy.OnPush, templateUrl: './wp-relations.template.html', }) -export class WorkPackageRelationsComponent extends UntilDestroyedMixin implements OnInit, AfterViewInit { +export class WorkPackageRelationsComponent extends UntilDestroyedMixin implements OnInit, AfterViewInit, OnDestroy { @Input() public workPackage:WorkPackageResource; @ViewChild('frameElement') readonly relationTurboFrame:ElementRef; turboFrameSrc:string; + private turboFrameListener:EventListener = this.updateFrontendData.bind(this); + constructor( private wpRelations:WorkPackageRelationsService, private apiV3Service:ApiV3Service, @@ -77,6 +80,12 @@ export class WorkPackageRelationsComponent extends UntilDestroyedMixin implement this.turboFrameSrc = `${this.PathHelper.staticBase}/work_packages/${this.workPackage.id}/relations_tab`; } + ngOnDestroy() { + super.ngOnDestroy(); + + document.removeEventListener('turbo:submit-end', this.turboFrameListener); + } + ngAfterViewInit() { // Listen to any changes to the relations and update the frame this @@ -104,7 +113,16 @@ export class WorkPackageRelationsComponent extends UntilDestroyedMixin implement cannot listen to the submit end event on the relationTurboFrame element and have to rely on the form action URL. */ - document.addEventListener('turbo:submit-end', (event:CustomEvent) => { + document.addEventListener('turbo:submit-end', this.turboFrameListener); + } + + public updateCounter() { + const url = this.PathHelper.workPackageUpdateCounterPath(this.workPackage.id!, 'relations'); + void this.turboRequests.request(url); + } + + private updateFrontendData(event:CustomEvent) { + if (event) { const form = event.target as HTMLFormElement; const updateWorkPackage = !!form.dataset?.updateWorkPackage; @@ -124,12 +142,7 @@ export class WorkPackageRelationsComponent extends UntilDestroyedMixin implement this.updateCounter(); } } - }); - } - - public updateCounter() { - const url = this.PathHelper.workPackageUpdateCounterPath(this.workPackage.id!, 'relations'); - void this.turboRequests.request(url); + } } private updateRelationsTab() {