Fix/8178 update UI country field to country location

README.md

@@ -36,7 +36,7 @@ yarn build:i18n
 2- Run the application on the language you want using one of the following options
 
 ```
-yarn start:aot ## Runs the application in using the english properties
+yarn start:en ## Runs the application in using the english properties
 yarn start:fr ## Runs the application in using the french properties
 yarn start:ar ## Runs the application in using the arabic properties
 yarn start:es ## Runs the application in using the spanish properties

package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "start": "ng serve --disable-host-check --host 0.0.0.0",
+    "start:en": "ng serve --configuration=local,en --disable-host-check",
     "start:fr": "ng serve --configuration=local,fr --disable-host-check",
     "start:ar": "ng serve --configuration=local,ar --disable-host-check",
     "start:ca": "ng serve --configuration=local,ca --disable-host-check",

src/app/cdk/side-bar/modals/modal-country/modal-country.component.html

@@ -29,18 +29,21 @@
       <div class="col no-gutters">
         <p
           class="orc-font-body-small"
-          i18n="@@side-bar.countriesModalDescription"
+          i18n="@@side-bar.countriesOrLocationsDescription"
         >
-          Add countries to your ORCID record to highlight where you conduct your
-          research or where your research is focused. You can add as many
-          countries as you want.
+          Add countries or locations to your ORCID record to highlight where you
+          conduct your research or where your research is focused. You can add
+          as many countries or locations as you want.
         </p>
       </div>
     </div>
     <ng-container *ngIf="countries?.length > 0">
       <div class="row">
-        <h3 class="col no-gutters orc-font-body" i18n="@@side-bar.myCountries">
-          My countries
+        <h3
+          class="col no-gutters orc-font-body"
+          i18n="@@side-bar.myCountriesAndLocations"
+        >
+          My countries/locations
         </h3>
       </div>
       <hr class="dashed-line" />
@@ -80,6 +83,7 @@ <h3 class="col no-gutters orc-font-body" i18n="@@side-bar.myCountries">
                   #countrySelect
                   id="cy-country-select-{{ i }}"
                   formControlName="country"
+                  placeholder=" {{ ngOrcidCountry }}"
                 >
                   <mat-option
                     *ngFor="let countryCode of countryCodes"
@@ -125,17 +129,15 @@ <h3 class="col no-gutters orc-font-body" i18n="@@side-bar.myCountries">
         <mat-icon class="large-material-icon">add_circle_outline</mat-icon>
         <span class="mat-body-1">
           <ng-container
-            *ngIf="countries.length === 0"
-            i18n="@@side-bar.addCountry"
+            *ngIf="countries?.length === 0"
+            i18n="@@side-bar.addCountryOrLocation"
+            >Add a country or location</ng-container
           >
-            Add a country
-          </ng-container>
           <ng-container
-            *ngIf="countries.length !== 0"
-            i18n="@@side-bar.addAnotherCountry"
+            *ngIf="countries?.length !== 0"
+            i18n="@@side-bar.addAnotherCountryOrLocation"
+            >Add another country or location</ng-container
           >
-            Add another country
-          </ng-container>
         </span>
       </a>
     </div>

src/app/cdk/side-bar/modals/modal-country/modal-country.component.spec.ts

@@ -1,26 +1,169 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { ModalCountryComponent } from './modal-country.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import { WINDOW_PROVIDERS } from '../../../window'
+import { PlatformInfoService } from '../../../platform-info'
+import { ErrorHandlerService } from '../../../../core/error-handler/error-handler.service'
+import { SnackbarService } from '../../../snackbar/snackbar.service'
+import { MatSnackBar } from '@angular/material/snack-bar'
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { Overlay } from '@angular/cdk/overlay'
+import { RecordCountriesService } from '../../../../core/record-countries/record-countries.service'
+import { HarnessLoader, parallel } from '@angular/cdk/testing'
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'
+import { ModalModule } from '../../../modal/modal.module'
+import { MatIconModule } from '@angular/material/icon'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { By } from '@angular/platform-browser'
+import { MatSelectModule } from '@angular/material/select'
+import { NoopAnimationsModule } from '@angular/platform-browser/animations'
+import { Address, CountriesEndpoint } from '../../../../types'
+import { PrivacySelectorModule } from '../../../privacy-selector/privacy-selector.module'
+import { SideBarModule } from '../../side-bar.module'
+import { MatButtonModule } from '@angular/material/button'
+import { Observable, of } from 'rxjs'
+import { ChangeDetectorRef } from '@angular/core'
+import { MatSelectHarness } from '@angular/material/select/testing'
 
 describe('ModalCountryComponent', () => {
   let component: ModalCountryComponent
   let fixture: ComponentFixture<ModalCountryComponent>
+  let recordCountriesService: RecordCountriesService
+  let loader: HarnessLoader
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        declarations: [ModalCountryComponent],
-      }).compileComponents()
-    })
-  )
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        HttpClientTestingModule,
+        MatButtonModule,
+        MatIconModule,
+        MatSelectModule,
+        ModalModule,
+        NoopAnimationsModule,
+        PrivacySelectorModule,
+        ReactiveFormsModule,
+        RouterTestingModule,
+        SideBarModule,
+      ],
+      declarations: [ModalCountryComponent],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        WINDOW_PROVIDERS,
+        ChangeDetectorRef,
+        RecordCountriesService,
+        PlatformInfoService,
+        ErrorHandlerService,
+        SnackbarService,
+        MatSnackBar,
+        MatDialog,
+        Overlay,
+      ],
+    }).compileComponents()
+  })
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ModalCountryComponent)
     component = fixture.componentInstance
+
+    recordCountriesService = TestBed.inject(RecordCountriesService)
+    const adressesResponse: Observable<CountriesEndpoint> = of({
+      errors: [],
+      addresses: [],
+      visibility: { visibility: 'PUBLIC' },
+    })
+    spyOn(recordCountriesService, 'getAddresses').and.returnValue(
+      adressesResponse
+    )
+    loader = TestbedHarnessEnvironment.loader(fixture)
+
     fixture.detectChanges()
   })
 
-  it('should create', () => {
+  it('should create country modal with title and button with text `Add a country or location`', () => {
     expect(component).toBeTruthy()
+    expect(
+      fixture.debugElement.nativeElement.querySelector('p').textContent
+    ).not.toBeNull()
+    expect(
+      fixture.debugElement.query(By.css('#add-link')).childNodes[1].nativeNode
+        .textContent
+    ).toBe('Add a country or location')
+  })
+
+  it('should add a country and the button text must update', () => {
+    const addCountryButton = fixture.debugElement.query(By.css('#add-link'))
+    addCountryButton.nativeElement.click()
+
+    fixture.detectChanges()
+
+    expect(
+      fixture.debugElement.query(By.css('#add-link')).childNodes[1].nativeNode
+        .textContent
+    ).toBe('Add another country or location')
+  })
+
+  it('should display three countries with the next status disabled (source is not user), enabled and enabled', async () => {
+    const adressesResponse: Observable<CountriesEndpoint> = of({
+      errors: [],
+      addresses: getAddresses(),
+      visibility: { visibility: 'PUBLIC' },
+    })
+    recordCountriesService.getAddresses = jasmine
+      .createSpy()
+      .and.returnValue(adressesResponse)
+
+    component.id = '0000-0000-0000-000X'
+    component.ngOnInit()
+
+    const countriesForm = component.countryForm
+
+    const addCountryButton = fixture.debugElement.query(By.css('#add-link'))
+    await addCountryButton.nativeElement.click()
+
+    fixture.detectChanges()
+
+    const countriesSelects = await loader.getAllHarnesses(MatSelectHarness)
+    await countriesSelects[2].open()
+    await countriesSelects[2].clickOptions({ text: 'Mexico' })
+
+    const disabledStates = await parallel(() =>
+      countriesSelects.map((select) => select.isDisabled())
+    )
+
+    expect(countriesForm.controls[1].value.country).toBe('Albania')
+    expect(countriesForm.controls['new-0'].value.country).toBe('Mexico')
+    expect(disabledStates.filter((value) => value).length).toBe(1)
+    expect(countriesSelects.length).toBe(3)
   })
 })
+
+function getAddresses(): Address[] {
+  return [
+    {
+      putCode: '1',
+      countryName: 'Albania',
+      source: '0000-0000-0000-000X',
+      sourceName: 'Test Record',
+      visibility: {
+        visibility: 'PUBLIC',
+      },
+    } as Address,
+    {
+      putCode: '2',
+      countryName: 'United States',
+      source: '0000-0000-0000-000Z',
+      sourceName: 'ORCID',
+      visibility: {
+        visibility: 'PRIVATE',
+      },
+    } as Address,
+  ]
+}

src/app/cdk/side-bar/modals/modal-country/modal-country.component.ts

@@ -54,6 +54,8 @@ export class ModalCountryComponent implements OnInit, OnDestroy {
   loadingCountryCodes = true
   @ViewChildren('countrySelect') inputs: QueryList<MatSelect>
 
+  ngOrcidCountry = $localize`:@@shared.selectACountryOrLocation:Select a country or location`
+
   ngOnInit(): void {
     this._recordCountryService
       .getAddresses()

src/app/record/components/affiliation-stacks-groups/modals/modal-affiliations/modal-affiliations.component.html

@@ -300,7 +300,7 @@
               affiliationForm.get('country').touched)
         }"
       >
-        <strong i18n="@@shared.country">Country</strong>
+        <strong i18n="@@shared.countryOrLocation">Country/Location</strong>
         <span class="required">*</span>
       </label>
     </div>
@@ -311,7 +311,11 @@
         class="mat-form-field-min"
         [ngClass]="{ 'two-line-hint': isMobile }"
       >
-        <mat-select #countrySelect formControlName="country">
+        <mat-select
+          placeholder="{{ ngOrcidSelectACountryOrLocation }}"
+          #countrySelect
+          formControlName="country"
+        >
           <mat-option
             *ngFor="let countryCode of countryCodes"
             [value]="countryCode.key"

src/app/record/components/affiliation-stacks-groups/modals/modal-affiliations/modal-affiliations.component.ts

@@ -83,6 +83,7 @@ export class ModalAffiliationsComponent implements OnInit, OnDestroy {
   ngOrcidYear = $localize`:@@shared.year:Year`
   ngOrcidMonth = $localize`:@@shared.month:Month`
   ngOrcidDay = $localize`:@@shared.day:Day`
+  ngOrcidSelectACountryOrLocation = $localize`:@@shared.selectACountryOrLocation:Select a country or location`
   ngOrcidDefaultVisibilityLabel = $localize`:@@shared.visibilityDescription:Control who can see this information by setting the visibility. Your default visibility is`
 
   selectedOrganizationFromDatabase: Organization

src/app/record/components/funding-stacks-groups/modals/modal-funding/modal-funding.component.html

@@ -721,7 +721,7 @@
             fundingForm.get('country').touched
         }"
       >
-        <strong i18n="@@shared.country">Country</strong>
+        <strong i18n="@@shared.countryOrLocation">Country/Location</strong>
         <span class="required">*</span>
       </label>
     </div>
@@ -732,7 +732,11 @@
         class="mat-form-field-min"
         [ngClass]="{ 'two-line-hint': isMobile }"
       >
-        <mat-select #countrySelect formControlName="country">
+        <mat-select
+          placeholder="{{ ngOrcidSelectACountryOrLocation }}"
+          #countrySelect
+          formControlName="country"
+        >
           <mat-option
             *ngFor="let countryCode of countryCodes"
             [value]="countryCode.key"

src/app/record/components/funding-stacks-groups/modals/modal-funding/modal-funding.component.ts

@@ -124,6 +124,7 @@ export class ModalFundingComponent implements OnInit, OnDestroy {
   ngOrcidMonth = $localize`:@@shared.month:Month`
   ngOrcidFundingType = $localize`:@@funding.selectAType:Select a funding type`
   ngOrcidSelectLanguage = $localize`:@@shared.selectLanguage:Select a language`
+  ngOrcidSelectACountryOrLocation = $localize`:@@shared.selectACountryOrLocation:Select a country or location`
   ngOrcidDefaultVisibilityLabel = $localize`:@@shared.visibilityDescription:Control who can see this information by setting the visibility. Your default visibility is`
 
   constructor(

src/app/record/components/work-form/work-form/work-form.component.html

@@ -445,14 +445,10 @@
         class="mat-form-field-min input-container"
       >
         <mat-select
-          placeholder="Placeholder"
+          placeholder="{{ ngOrcidSelectACitationType }}"
           formControlName="citationType"
           id="cy-citation-type"
         >
-          <mat-option [value]="''" i18n="@@works.selectACitationType">
-            Select a citation type
-          </mat-option>
-
           <mat-option
             *ngFor="let item of citationTypes | keyvalue"
             [value]="item.key"
@@ -664,8 +660,8 @@
   <div>
     <div class="row">
       <label for="country-input" class="mat-caption">
-        <strong i18n="@@works.countryPublication"
-          >Country of publication</strong
+        <strong i18n="@@works.countryOrLocationOfPublication"
+          >Country/Location of publication</strong
         >
       </label>
     </div>
@@ -676,7 +672,7 @@
       >
         <mat-select
           id="country-input"
-          placeholder="{{ ngOrcidSelectACountry }}"
+          placeholder="{{ ngOrcidSelectACountryOrLocation }}"
           formControlName="countryCode"
         >
           <mat-option *ngFor="let item of countryCodes" [value]="item.value">

src/app/record/components/work-form/work-form/work-form.component.ts

@@ -95,7 +95,8 @@ export class WorkFormComponent implements OnInit {
   ngOrcidMonth = $localize`:@@shared.month:Month`
   ngOrcidDay = $localize`:@@shared.day:Day`
   ngOrcidSelectLanguage = $localize`:@@shared.selectLanguage:Select a language`
-  ngOrcidSelectACountry = $localize`:@@shared.selectACountry:Select a country`
+  ngOrcidSelectACitationType = $localize`:@@works.selectACitationType:Select a citation type`
+  ngOrcidSelectACountryOrLocation = $localize`:@@shared.selectACountryOrLocation:Select a country or location`
   ngOrcidDefaultVisibilityLabel = $localize`:@@shared.visibilityDescription:Control who can see this information by setting the visibility. Your default visibility is`
   defaultVisibility: VisibilityStrings
 
@@ -118,7 +119,6 @@ export class WorkFormComponent implements OnInit {
     private _recordCountryService: RecordCountriesService,
     private _snackBar: SnackbarService,
     private _record: RecordService,
-
     @Inject(WINDOW) private _window: Window,
     @Inject(MAT_DIALOG_DATA) public data: UserRecord
   ) {}
@@ -419,6 +419,7 @@ export class WorkFormComponent implements OnInit {
       this.workIdentifiersFormArray
     )
   }
+
   deleteWorkId(id: number) {
     this.workIdentifiersFormArrayDisplayState.splice(id, 1)
     this.workIdentifiersFormArray.removeAt(id)