Merge pull request #958 from geonetwork/ME/fix-sortablelist-trackby

ME: add trackBy on sortable list

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nx"],
+  "plugins": ["@nx", "no-only-tests"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
@@ -73,6 +73,12 @@
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript"],
       "rules": {}
+    },
+    {
+      "files": ["*.spec.ts", "*.cy.ts"],
+      "rules": {
+        "no-only-tests/no-only-tests": "error"
+      }
     }
   ]
 }

apps/metadata-editor-e2e/src/e2e/edit.cy.ts

@@ -57,4 +57,19 @@ describe('editor form', () => {
     })
     cy.get('md-editor-publish-button').click()
   })
+
+  describe('date range in sortable list', () => {
+    it('should keep the date picker open when selecting the start date of a range', () => {
+      // add a date range
+      cy.get('gn-ui-form-field-temporal-extents gn-ui-button').eq(1).click()
+      // open the date picker
+      cy.get(
+        'gn-ui-form-field-temporal-extents-range mat-datepicker-toggle'
+      ).click()
+      // select a date
+      cy.get('mat-calendar').contains('1').click()
+      // the date picker should still be open
+      cy.get('mat-calendar').should('be.visible')
+    })
+  })
 })

libs/feature/editor/src/lib/components/record-form/form-field/form-field-temporal-extents/form-field-temporal-extents.component.ts

@@ -62,9 +62,9 @@ export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
     )
   }
 
-  onElementsChange(elements: any) {
+  onElementsChange(elements: { inputs: Record<string, unknown> }[]) {
     this.array.clear({ emitEvent: false })
-    elements.forEach((e: any, i: number) =>
+    elements.forEach((e, i) =>
       this.array.push(e.inputs.control, {
         emitEvent: i === elements.length - 1,
       })
@@ -95,16 +95,16 @@ export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
 
   private resetValueFromInput(value) {
     this.array.clear({ emitEvent: false })
-    this.elements = []
+    let newElements = []
     value.forEach((v: any) => {
       if ('start' in v && 'end' in v) {
         const rangeControl = new FormControl({
           start: v.start,
           end: v.end,
         })
         this.array.push(rangeControl, { emitEvent: false })
-        this.elements = [
-          ...this.elements,
+        newElements = [
+          ...newElements,
           {
             component: FormFieldTemporalExtentsRangeComponent,
             inputs: {
@@ -115,8 +115,8 @@ export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
       } else {
         const dateControl = new FormControl({ start: v.start })
         this.array.push(dateControl, { emitEvent: false })
-        this.elements = [
-          ...this.elements,
+        newElements = [
+          ...newElements,
           {
             component: FormFieldTemporalExtentsDateComponent,
             inputs: {
@@ -126,5 +126,6 @@ export class FormFieldTemporalExtentsComponent implements OnInit, OnDestroy {
         ]
       }
     })
+    this.elements = newElements
   }
 }

libs/ui/elements/src/lib/sortable-list/sortable-list.component.html

@@ -12,7 +12,9 @@
   class="sortable-list flex flex-col gap-3 p-2"
   (cdkDropListDropped)="drop($event)"
 >
-  <ng-container *ngFor="let element of elements; index as index">
+  <ng-container
+    *ngFor="let element of elements; index as index; trackBy: trackByFn"
+  >
     <div class="sortable-box bg-white flex items-center" cdkDrag>
       <span
         cdkDragHandle

libs/ui/elements/src/lib/sortable-list/sortable-list.component.ts

@@ -18,8 +18,8 @@ import { MatIconModule } from '@angular/material/icon'
 import { ButtonComponent } from '@geonetwork-ui/ui/inputs'
 
 type DynamicElement = {
-  component: Type<any>
-  inputs: Record<string, any>
+  component: Type<unknown>
+  inputs: Record<string, unknown>
 }
 
 @Component({
@@ -53,4 +53,8 @@ export class SortableListComponent {
     this.elements = this.elements.filter((_, i) => i !== index)
     this.elementsChange.emit(this.elements)
   }
+
+  trackByFn(index: number) {
+    return index
+  }
 }

package.json

@@ -153,6 +153,7 @@
     "eslint": "8.15.0",
     "eslint-config-prettier": "8.1.0",
     "eslint-plugin-cypress": "^2.10.3",
+    "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-storybook": "^0.6.13",
     "fetch-mock-jest": "^1.5.1",
     "gh-pages": "^5.0.0",