From 3ce477f3568dd40c2d59ef1c6a83a75584ed62bf Mon Sep 17 00:00:00 2001
From: Daniel Palafox <dp852@hotmail.com>
Date: Mon, 13 Sep 2021 12:43:31 -0500
Subject: [PATCH 1/9] fix: missing visibility option in work modal side bar

see the issue for details

fixes issue #1116
---
 .../cdk/modal/modal-side-bar/modal-side-bar.component.html  | 3 +++
 .../record/components/work-modal/work-modal.component.html  | 6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/cdk/modal/modal-side-bar/modal-side-bar.component.html b/src/app/cdk/modal/modal-side-bar/modal-side-bar.component.html
index 6f1115b1cf..f001df9bac 100644
--- a/src/app/cdk/modal/modal-side-bar/modal-side-bar.component.html
+++ b/src/app/cdk/modal/modal-side-bar/modal-side-bar.component.html
@@ -14,5 +14,8 @@ <h2 class="orc-font-body-small">Form content</h2>
     <ul>
       <ng-content select="#side-bar-url-3"></ng-content>
     </ul>
+    <ul>
+      <ng-content select="#side-bar-url-4"></ng-content>
+    </ul>
   </div>
 </div>
diff --git a/src/app/record/components/work-modal/work-modal.component.html b/src/app/record/components/work-modal/work-modal.component.html
index 750d05d9cb..2011912cbc 100644
--- a/src/app/record/components/work-modal/work-modal.component.html
+++ b/src/app/record/components/work-modal/work-modal.component.html
@@ -28,7 +28,11 @@
       </a>
     </ng-container>
     <ng-container id="side-bar-url-4">
-      <a class="side-bar" i18n="@@shared.visibility" (click)="toVisibility()">
+      <a
+        class="side-bar"
+        i18n="@@shared.visibility"
+        (click)="toVisibility()"
+      >
         Visibility
       </a>
     </ng-container>

From eaef617afeecaa5d241aa8eacd265bc04a64a3b7 Mon Sep 17 00:00:00 2001
From: Daniel Palafox <dp852@hotmail.com>
Date: Mon, 13 Sep 2021 13:26:26 -0500
Subject: [PATCH 2/9] fix: only mark as required the mandatory fields

see the issue for details

fixes issue #1117
---
 .../work-modal/work-modal.component.html      | 76 +++++--------------
 1 file changed, 21 insertions(+), 55 deletions(-)

diff --git a/src/app/record/components/work-modal/work-modal.component.html b/src/app/record/components/work-modal/work-modal.component.html
index 2011912cbc..536be11345 100644
--- a/src/app/record/components/work-modal/work-modal.component.html
+++ b/src/app/record/components/work-modal/work-modal.component.html
@@ -100,7 +100,7 @@
 
       <div class="row">
         <mat-form-field appearance="outline" class="mat-form-field-min">
-          <mat-select formControlName="workCategory" name="item">
+          <mat-select formControlName="workCategory">
             <mat-option
               *ngFor="let item of workCategories | keyvalue"
               [value]="item.value"
@@ -135,7 +135,6 @@
         <mat-select
           placeholder="Select a work type"
           formControlName="workType"
-          name="item"
         >
           <mat-option
             *ngFor="let item of workTypes | keyvalue"
@@ -157,7 +156,7 @@
     <div>
       <div class="row">
         <label
-          for="given-names-input"
+          for="title-input"
           class="mat-caption"
           [ngClass]="{
             error:
@@ -171,7 +170,7 @@
       </div>
 
       <mat-form-field appearance="outline" class="mat-form-field-min">
-        <input id="biography-input" matInput formControlName="title" />
+        <input id="title-input" matInput formControlName="title" />
         <mat-error
           *ngIf="workForm.get('title').hasError('required')"
           i18n="@@works.setAWorkTitle"
@@ -228,7 +227,7 @@
       <!-- Language of this title -->
       <div>
         <div class="row">
-          <label for="given-names-input" class="mat-caption">
+          <label for="language-of-title-input" class="mat-caption">
             <strong i18n="@@works.languageOnThisTitle"
               >Language of this title</strong
             >
@@ -237,9 +236,9 @@
         <div class="row">
           <mat-form-field appearance="outline" class="mat-form-field-min">
             <mat-select
+              id="language-of-title-input"
               placeholder="Select a language"
               formControlName="translatedTitleLanguage"
-              name="item"
             >
               <mat-option
                 *ngFor="let item of languageMap | keyvalue"
@@ -257,13 +256,13 @@
 
     <div>
       <div class="row">
-        <label for="given-names-input" class="mat-caption">
+        <label for="work-subtitle-input" class="mat-caption">
           <strong i18n="@@works.subtitle">Work Subtitle</strong>
         </label>
       </div>
 
       <mat-form-field appearance="outline" class="mat-form-field-min">
-        <input id="biography-input" matInput formControlName="subtitle" />
+        <input id="work-subtitle-input" matInput formControlName="subtitle" />
       </mat-form-field>
     </div>
     <!-- Journal title -->
@@ -438,7 +437,6 @@
           <mat-select
             placeholder="Placeholder"
             formControlName="citationType"
-            name="item"
           >
             <mat-option [value]="''" i18n="@@works.selectACitation">
               Select a citation type
@@ -465,20 +463,15 @@
     <div>
       <div class="row">
         <label
-          for="given-names-input"
+          for="citation-input"
           class="mat-caption"
-          [ngClass]="{
-            error:
-              workForm.hasError('required', 'citation') &&
-              workForm.get('citation').touched
-          }"
         >
           <strong i18n="@@works.citation">Citation</strong>
-          <span class="required">*</span>
         </label>
       </div>
       <mat-form-field appearance="outline" class="mat-form-field-min">
         <textarea
+          id="citation-input"
           matInput
           formControlName="citation"
           cdkTextareaAutosize
@@ -497,14 +490,13 @@
 
     <div>
       <div class="row">
-        <label for="given-names-input" class="mat-caption">
+        <label for="description-input" class="mat-caption">
           <strong i18n="@@works.description">Description</strong>
-          <span class="required">*</span>
         </label>
       </div>
       <mat-form-field appearance="outline" class="mat-form-field-min biography">
         <textarea
-          id="biography-input"
+          id="description-input"
           matInput
           formControlName="shortDescription"
           cdkTextareaAutosize
@@ -558,7 +550,6 @@
                 }"
               >
                 <strong i18n="@@works.type">Identifier type</strong>
-                <span class="required">*</span>
               </label>
             </div>
             <div class="row">
@@ -566,7 +557,6 @@
                 <mat-select
                   placeholder="Placeholder"
                   formControlName="externalIdentifierType"
-                  name="item"
                 >
                   <mat-option [value]="''" i18n="@@works.selectAnIdentifier">
                     Select an identifier type
@@ -578,17 +568,6 @@
                   >
                     {{ item.description }}
                   </mat-option>
-
-                  <mat-error
-                    *ngIf="
-                      workIdentifiersGroup
-                        .get('externalIdentifierType')
-                        .hasError('required')
-                    "
-                    i18n="@@works.selectAnIdentifier"
-                  >
-                    Select an identifier type
-                  </mat-error>
                   <mat-hint i18n="@@works.typeOfIdentifier"
                     >The type of identifier associated with the work, such as an
                     ISBN, DOI or PMID.
@@ -602,7 +581,7 @@
           <div>
             <div class="row">
               <label
-                for="given-names-input"
+                for="external-identifier-id-input"
                 class="mat-caption"
                 [ngClass]="{
                   error:
@@ -616,7 +595,6 @@
                 <strong i18n="@@works.identifierValue"
                   >Identifier value
                 </strong>
-                <span class="required">*</span>
               </label>
             </div>
             <mat-form-field
@@ -625,7 +603,7 @@
             >
               <input
                 autocomplete="off"
-                id="biography-input"
+                id="external-identifier-id-input"
                 matInput
                 formControlName="externalIdentifierId"
               />
@@ -651,16 +629,6 @@
                 entered. Please check the value or enter a valid link to the
                 resource.
               </mat-error>
-              <mat-error
-                *ngIf="
-                  workIdentifiersGroup
-                    .get('externalIdentifierId')
-                    .hasError('required')
-                "
-                i18n="@@works.addADescriber"
-              >
-                Add a describer id
-              </mat-error>
               <mat-hint i18n="@@works.identifierAssociated"
                 >The identifier associated with the work. The format will depend
                 on the type of identifier selected.
@@ -671,7 +639,7 @@
 
           <div class="row">
             <label
-              for="given-names-input"
+              for="external-identifier-url-input"
               class="mat-caption"
               [ngClass]="{
                 error:
@@ -682,15 +650,13 @@
               }"
             >
               <strong i18n="@@works.identifierUrl">Identifier URL </strong>
-              <span class="required">*</span>
             </label>
-
             <mat-form-field
               appearance="outline"
               class="mat-form-field-min larger-input-margin"
             >
               <input
-                id="biography-input"
+                id="external-identifier-url-input"
                 matInput
                 formControlName="externalIdentifierUrl"
               />
@@ -717,7 +683,7 @@
           <div>
             <div class="row">
               <label
-                for="given-names-input"
+                for="external-relationship-input"
                 class="mat-caption"
                 [ngClass]="{
                   error:
@@ -729,11 +695,11 @@
                 }"
               >
                 <strong i18n="@@works.relationship">Relationship</strong>
-                <span class="required">*</span>
               </label>
             </div>
 
             <mat-radio-group
+              id="external-relationship-input"
               aria-label="Select an option"
               appearance="outline"
               class="mat-form-field-min"
@@ -794,7 +760,7 @@
     <!-- Language of this form -->
     <div>
       <div class="row">
-        <label for="given-names-input" class="mat-caption">
+        <label for="language-input" class="mat-caption">
           <strong i18n="@@works.languageUsed"
             >Language used in this form</strong
           >
@@ -803,9 +769,9 @@
       <div class="row">
         <mat-form-field appearance="outline" class="mat-form-field-min">
           <mat-select
+            id="language-input"
             placeholder="Placeholder"
             formControlName="languageCode"
-            name="item"
           >
             <mat-option
               *ngFor="let item of languageMap | keyvalue"
@@ -821,7 +787,7 @@
     <!-- Country of publication -->
     <div>
       <div class="row">
-        <label for="given-names-input" class="mat-caption">
+        <label for="country-input" class="mat-caption">
           <strong i18n="@@works.countryPublication"
             >Country of publication</strong
           >
@@ -830,9 +796,9 @@
       <div class="row">
         <mat-form-field appearance="outline" class="mat-form-field-min">
           <mat-select
+            id="country-input"
             placeholder="Placeholder"
             formControlName="countryCode"
-            name="item"
           >
             <mat-option
               *ngFor="let item of originalCountryCodes | keyvalue"

From a7d3eac6bccbb804eda969c34a9653222779fe0c Mon Sep 17 00:00:00 2001
From: Daniel Palafox <dp852@hotmail.com>
Date: Mon, 13 Sep 2021 13:40:17 -0500
Subject: [PATCH 3/9] fix: display year in descending order and remove code
 that will be need it to update every year

see the issue for details

fixes issue #1095
---
 .../work-modal/work-modal.component.html      |  18 +-
 .../work-modal/work-modal.component.ts        |  33 ++--
 src/app/types/works.endpoint.ts               | 170 ------------------
 3 files changed, 26 insertions(+), 195 deletions(-)

diff --git a/src/app/record/components/work-modal/work-modal.component.html b/src/app/record/components/work-modal/work-modal.component.html
index 536be11345..7cf762a86d 100644
--- a/src/app/record/components/work-modal/work-modal.component.html
+++ b/src/app/record/components/work-modal/work-modal.component.html
@@ -304,10 +304,10 @@
             >
               <mat-option i18n="@@shared.year" [value]="">Year</mat-option>
               <mat-option
-                *ngFor="let year of yearOptions | keyvalue"
-                [value]="year.key"
+                *ngFor="let year of yearOptions"
+                [value]="year"
               >
-                {{ year.value }}
+                {{ year}}
               </mat-option>
             </mat-select>
           </mat-form-field>
@@ -324,10 +324,10 @@
             >
               <mat-option i18n="@@shared.month" [value]="">Month</mat-option>
               <mat-option
-                *ngFor="let month of monthOptions | keyvalue"
-                [value]="month.key"
+                *ngFor="let month of monthOptions"
+                [value]="month"
               >
-                {{ month.value }}
+                {{ month }}
               </mat-option>
             </mat-select>
           </mat-form-field>
@@ -344,10 +344,10 @@
             >
               <mat-option i18n="@@shared.day" [value]="">Day</mat-option>
               <mat-option
-                *ngFor="let day of dayOptions | keyvalue"
-                [value]="day.key"
+                *ngFor="let day of dayOptions"
+                [value]="day"
               >
-                {{ day.value }}
+                {{ day }}
               </mat-option>
             </mat-select>
           </mat-form-field>
diff --git a/src/app/record/components/work-modal/work-modal.component.ts b/src/app/record/components/work-modal/work-modal.component.ts
index 0d2fd6f5cd..29659ccb13 100644
--- a/src/app/record/components/work-modal/work-modal.component.ts
+++ b/src/app/record/components/work-modal/work-modal.component.ts
@@ -1,14 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core'
-import {
-  AbstractControl,
-  AsyncValidatorFn,
-  FormArray,
-  FormBuilder,
-  FormGroup,
-  Validators,
-} from '@angular/forms'
+import { AbstractControl, AsyncValidatorFn, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'
 import { first, map, startWith } from 'rxjs/operators'
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'
 import { Observable } from 'rxjs'
 import { ModalComponent } from 'src/app/cdk/modal/modal/modal.component'
 import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
@@ -23,20 +16,17 @@ import { Work } from 'src/app/types/record-works.endpoint'
 import { UserRecord } from 'src/app/types/record.local'
 import {
   CitationTypes,
-  DayOption,
   LanguageMap,
-  MonthOption,
   WorkCategories,
-  WorksTitleName,
   WorkConferenceTypes,
   WorkIdType,
   WorkIntellectualPropertyTypes,
   WorkOtherOutputTypes,
   WorkPublicationTypes,
   WorkRelationships,
+  WorksTitleName,
   WorkTypesByCategory,
   WorkTypesTitle,
-  YearOption,
 } from 'src/app/types/works.endpoint'
 
 @Component({
@@ -57,9 +47,20 @@ export class WorkModalComponent implements OnInit {
 
   languageMap = LanguageMap
   workCategories = WorkCategories
-  yearOptions = YearOption
-  monthOptions = MonthOption
-  dayOptions = DayOption
+  yearOptions = Array(110)
+    .fill(0)
+    .map((i, idx) => idx + new Date().getFullYear() - 109)
+    .reverse()
+  yearsEndDate = Array(120)
+    .fill(0)
+    .map((i, idx) => idx + new Date().getFullYear() - 109)
+    .reverse()
+  monthOptions = Array(12)
+    .fill(0)
+    .map((i, idx) => idx + 1)
+  dayOptions = Array(31)
+    .fill(0)
+    .map((i, idx) => idx + 1)
   citationTypes = CitationTypes
 
   workRelationships: WorkRelationships[] = Object.keys(
diff --git a/src/app/types/works.endpoint.ts b/src/app/types/works.endpoint.ts
index dda3d16c12..52c5237418 100644
--- a/src/app/types/works.endpoint.ts
+++ b/src/app/types/works.endpoint.ts
@@ -407,176 +407,6 @@ export const LanguageMap = {
   Yoruba: 'yo',
 }
 
-export const YearOption = {
-  2031: '2031',
-  2030: '2030',
-  2029: '2029',
-  2028: '2028',
-  2027: '2027',
-  2026: '2026',
-  2025: '2025',
-  2024: '2024',
-  2023: '2023',
-  2022: '2022',
-  2021: '2021',
-  2020: '2020',
-  2019: '2019',
-  2018: '2018',
-  2017: '2017',
-  2016: '2016',
-  2015: '2015',
-  2014: '2014',
-  2013: '2013',
-  2012: '2012',
-  2011: '2011',
-  2010: '2010',
-  2009: '2009',
-  2008: '2008',
-  2007: '2007',
-  2006: '2006',
-  2005: '2005',
-  2004: '2004',
-  2003: '2003',
-  2002: '2002',
-  2001: '2001',
-  2000: '2000',
-  1999: '1999',
-  1998: '1998',
-  1997: '1997',
-  1996: '1996',
-  1995: '1995',
-  1994: '1994',
-  1993: '1993',
-  1992: '1992',
-  1991: '1991',
-  1990: '1990',
-  1989: '1989',
-  1988: '1988',
-  1987: '1987',
-  1986: '1986',
-  1985: '1985',
-  1984: '1984',
-  1983: '1983',
-  1982: '1982',
-  1981: '1981',
-  1980: '1980',
-  1979: '1979',
-  1978: '1978',
-  1977: '1977',
-  1976: '1976',
-  1975: '1975',
-  1974: '1974',
-  1973: '1973',
-  1972: '1972',
-  1971: '1971',
-  1970: '1970',
-  1969: '1969',
-  1968: '1968',
-  1967: '1967',
-  1966: '1966',
-  1965: '1965',
-  1964: '1964',
-  1963: '1963',
-  1962: '1962',
-  1961: '1961',
-  1960: '1960',
-  1959: '1959',
-  1958: '1958',
-  1957: '1957',
-  1956: '1956',
-  1955: '1955',
-  1954: '1954',
-  1953: '1953',
-  1952: '1952',
-  1951: '1951',
-  1950: '1950',
-  1949: '1949',
-  1948: '1948',
-  1947: '1947',
-  1946: '1946',
-  1945: '1945',
-  1944: '1944',
-  1943: '1943',
-  1942: '1942',
-  1941: '1941',
-  1940: '1940',
-  1939: '1939',
-  1938: '1938',
-  1937: '1937',
-  1936: '1936',
-  1935: '1935',
-  1934: '1934',
-  1933: '1933',
-  1932: '1932',
-  1931: '1931',
-  1930: '1930',
-  1929: '1929',
-  1928: '1928',
-  1927: '1927',
-  1926: '1926',
-  1925: '1925',
-  1924: '1924',
-  1923: '1923',
-  1922: '1922',
-  1921: '1921',
-  1920: '1920',
-  1919: '1919',
-  1918: '1918',
-  1917: '1917',
-  1916: '1916',
-  1915: '1915',
-  1914: '1914',
-  1913: '1913',
-}
-export const MonthOption = {
-  '01': '01',
-  '02': '02',
-  '03': '03',
-  '04': '04',
-  '05': '05',
-  '06': '06',
-  '07': '07',
-  '08': '08',
-  '09': '09',
-  10: '10',
-  11: '11',
-  12: '12',
-}
-
-export const DayOption = {
-  '01': '01',
-  '02': '02',
-  '03': '03',
-  '04': '04',
-  '05': '05',
-  '06': '06',
-  '07': '07',
-  '08': '08',
-  '09': '09',
-  10: '10',
-  11: '11',
-  12: '12',
-  13: '13',
-  14: '14',
-  15: '15',
-  16: '16',
-  17: '17',
-  18: '18',
-  19: '19',
-  20: '20',
-  21: '21',
-  22: '22',
-  23: '23',
-  24: '24',
-  25: '25',
-  26: '26',
-  27: '27',
-  28: '28',
-  29: '29',
-  30: '30',
-  31: '31',
-}
-
 export const CitationTypes = {
   'formatted-apa': 'APA',
   bibtex: 'BIBTEX',

From ce1cdd2a1eeca09f07b2728330e7e0e871541ec4 Mon Sep 17 00:00:00 2001
From: Daniel Palafox <dp852@hotmail.com>
Date: Mon, 13 Sep 2021 14:55:01 -0500
Subject: [PATCH 4/9] fix: space between list of works and bulk actions

see the issue for details

fixes issue #1094
---
 .../work-stack-group/work-stack-group.component.scss      | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/app/record/components/work-stack-group/work-stack-group.component.scss b/src/app/record/components/work-stack-group/work-stack-group.component.scss
index ad06d1dd0a..edfea19b83 100644
--- a/src/app/record/components/work-stack-group/work-stack-group.component.scss
+++ b/src/app/record/components/work-stack-group/work-stack-group.component.scss
@@ -3,9 +3,17 @@
 }
 
 app-work-stack {
+  margin-bottom: 24px;
+}
+
+app-work-stack:first-child {
   margin-top: 24px;
 }
 
+app-work-stack:last-child {
+  margin-bottom: 0;
+}
+
 p.empty {
   margin-bottom: 0;
 }

From d056b360e678a97542b4cc5c2e60d5cdcc06fc8c Mon Sep 17 00:00:00 2001
From: Daniel Palafox <dp852@hotmail.com>
Date: Mon, 13 Sep 2021 17:32:16 -0500
Subject: [PATCH 5/9] fix: wrap long text in the panels with checkboxes in the
 works section

see the issue for details

fixes issue #1112
---
 src/app/cdk/panel/panel/panel.component.html | 1 +
 src/app/cdk/panel/panel/panel.component.scss | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/src/app/cdk/panel/panel/panel.component.html b/src/app/cdk/panel/panel/panel.component.html
index 201b312176..eaac57009c 100644
--- a/src/app/cdk/panel/panel/panel.component.html
+++ b/src/app/cdk/panel/panel/panel.component.html
@@ -23,6 +23,7 @@
 
   <div *ngIf="selectable">
     <mat-checkbox
+      class="text-wrap"
       *ngIf="selectable && !isPublicRecord"
       (change)="checked($event)"
       [ngModel]="selected"
diff --git a/src/app/cdk/panel/panel/panel.component.scss b/src/app/cdk/panel/panel/panel.component.scss
index edf6bf2086..132accdda9 100644
--- a/src/app/cdk/panel/panel/panel.component.scss
+++ b/src/app/cdk/panel/panel/panel.component.scss
@@ -84,3 +84,9 @@ div.hide:hover {
     margin-top: 4px;
   }
 }
+
+mat-checkbox.text-wrap {
+  ::ng-deep label.mat-checkbox-layout {
+    white-space: normal;
+  }
+}

From 585078899fd0f33f6c559eea5fb1977bd96d8831 Mon Sep 17 00:00:00 2001
From: Daniel Palafox <dp852@hotmail.com>
Date: Mon, 13 Sep 2021 19:39:49 -0500
Subject: [PATCH 6/9] fix: sorting and pagination in works and research
 resources

see the issue for details

fixes issue #1110
---
 .../record-research-resource.service.ts       | 23 +++++++--------
 .../core/record-works/record-works.service.ts |  4 +--
 ...esearch-resource-stacks-group.component.ts | 28 +++++++++++--------
 .../work-stack-group.component.ts             | 15 +++++++++-
 4 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/src/app/core/record-research-resource/record-research-resource.service.ts b/src/app/core/record-research-resource/record-research-resource.service.ts
index 92ad370f36..5d3cedca5c 100644
--- a/src/app/core/record-research-resource/record-research-resource.service.ts
+++ b/src/app/core/record-research-resource/record-research-resource.service.ts
@@ -18,6 +18,7 @@ import { DEFAULT_PAGE_SIZE } from 'src/app/constants'
 })
 export class RecordResearchResourceService {
   researchResourcesSubject = new ReplaySubject<ResearchResourcesEndpoint>(1)
+  $research: ReplaySubject<ResearchResourcesEndpoint>
 
   headers = new HttpHeaders({
     'Access-Control-Allow-Origin': '*',
@@ -65,6 +66,12 @@ export class RecordResearchResourceService {
         )
         .subscribe()
     } else {
+      if (!this.$research) {
+        this.$research = new ReplaySubject(1)
+      } else if (!options.forceReload) {
+        return this.$research
+      }
+
       this._http
         .get<ResearchResourcesEndpoint>(
           environment.API_WEB +
@@ -78,6 +85,7 @@ export class RecordResearchResourceService {
             options.pageSize
         )
         .pipe(
+          retry(3),
           catchError((error) => this._errorHandler.handleError(error)),
           catchError(() => of({ groups: [] } as ResearchResourcesEndpoint)),
           map((data) => {
@@ -88,23 +96,16 @@ export class RecordResearchResourceService {
             return data
           }),
           tap((value) => {
-            this.researchResourcesSubject.next(value)
+            this.$research.next(value)
           })
         )
         .subscribe()
     }
-    return this.researchResourcesSubject.asObservable()
-  }
-
-  changeUserRecordContext(event: UserRecordOptions): void {
-    this.getResearchResourcePage(event).pipe(take(1)).subscribe()
+    return this.$research.asObservable()
   }
 
-  loadMore(offset: number, publicRecordId?: string) {
-    this.getResearchResourcePage({
-      offset,
-      publicRecordId,
-    })
+  changeUserRecordContext(event: UserRecordOptions): Observable<ResearchResourcesEndpoint> {
+    return this.getResearchResourcePage(event).pipe(take(1))
   }
 
   getResearchResourceById(putCode: string): Observable<ResearchResource> {
diff --git a/src/app/core/record-works/record-works.service.ts b/src/app/core/record-works/record-works.service.ts
index e3028f57e7..cb30db44b4 100644
--- a/src/app/core/record-works/record-works.service.ts
+++ b/src/app/core/record-works/record-works.service.ts
@@ -130,8 +130,8 @@ export class RecordWorksService {
     }
   }
 
-  changeUserRecordContext(event: UserRecordOptions): void {
-    this.getWorks(event).pipe(take(1)).subscribe()
+  changeUserRecordContext(userRecordOptions: UserRecordOptions): Observable<WorksEndpoint> {
+    return this.getWorks(userRecordOptions).pipe(take(1))
   }
 
   /**
diff --git a/src/app/record/components/research-resource-stacks-group/research-resource-stacks-group.component.ts b/src/app/record/components/research-resource-stacks-group/research-resource-stacks-group.component.ts
index 65f6e124e8..69c148d857 100644
--- a/src/app/record/components/research-resource-stacks-group/research-resource-stacks-group.component.ts
+++ b/src/app/record/components/research-resource-stacks-group/research-resource-stacks-group.component.ts
@@ -55,7 +55,6 @@ export class ResearchResourceStacksGroupComponent implements OnInit {
   } = {}
 
   ngOrcidResearchResources = $localize`:@@researchResources.researchResources:Research resources`
-  offset: number
   isMobile: boolean
 
   paginationTotalAmountOfResearchResources: number
@@ -89,15 +88,12 @@ export class ResearchResourceStacksGroupComponent implements OnInit {
 
   private getRecord() {
     this._record
-      .getRecord({
-        publicRecordId: this.isPublicRecord || undefined,
-      })
+      .getRecord({ publicRecordId: this.isPublicRecord })
       .pipe(takeUntil(this.$destroy))
       .subscribe((userRecord) => {
         if (!isEmpty(userRecord?.researchResources)) {
           this.paginationLoading = false
           this.researchResources = userRecord.researchResources
-          this.offset = userRecord.researchResources.offset
           this.total.emit(this.researchResources.groups.length)
           this.paginationTotalAmountOfResearchResources =
             userRecord.researchResources.totalGroups
@@ -109,23 +105,33 @@ export class ResearchResourceStacksGroupComponent implements OnInit {
   }
 
   pageEvent(event: PageEvent) {
+    this.paginationLoading = true
     this.userRecordContext.offset = event.pageIndex * event.pageSize
     this.userRecordContext.pageSize = event.pageSize
     this.userRecordContext.publicRecordId = this.isPublicRecord
-    this._recordResearchResourceService.changeUserRecordContext(
-      this.userRecordContext
-    )
-    this.paginationLoading = true
+    this.loadResearchResources()
   }
 
   sortEvent(event: SortData) {
+    this.paginationLoading = true
     this.userRecordContext.publicRecordId = this.isPublicRecord
     this.userRecordContext.sort = event.type
     this.userRecordContext.sortAsc = event.direction === 'asc'
+    this.loadResearchResources()
+  }
+
+  loadResearchResources(): void {
+    if (
+      this.researchResources.totalGroups > this.researchResources.groups.length ||
+      this.paginationPageSize !== this.defaultPageSize
+    ) {
+      this.userRecordContext.forceReload = true
+    }
     this._recordResearchResourceService.changeUserRecordContext(
       this.userRecordContext
-    )
-    this.paginationLoading = true
+    ).subscribe(() => {
+      this.paginationLoading = false
+    })
   }
 
   expandedClicked(expanded: boolean) {
diff --git a/src/app/record/components/work-stack-group/work-stack-group.component.ts b/src/app/record/components/work-stack-group/work-stack-group.component.ts
index b691503cae..9b855329ae 100644
--- a/src/app/record/components/work-stack-group/work-stack-group.component.ts
+++ b/src/app/record/components/work-stack-group/work-stack-group.component.ts
@@ -125,7 +125,7 @@ export class WorkStackGroupComponent implements OnInit {
     this.userRecordContext.offset = event.pageIndex * event.pageSize
     this.userRecordContext.pageSize = event.pageSize
     this.userRecordContext.publicRecordId = this.isPublicRecord
-    this._works.changeUserRecordContext(this.userRecordContext)
+    this.loadWorks()
   }
 
   sortEvent(event: SortData) {
@@ -133,7 +133,20 @@ export class WorkStackGroupComponent implements OnInit {
     this.userRecordContext.publicRecordId = this.isPublicRecord
     this.userRecordContext.sort = event.type
     this.userRecordContext.sortAsc = event.direction === 'asc'
+    this.loadWorks()
+  }
+
+  loadWorks(): void {
+    if (
+      this.workGroup.totalGroups > this.workGroup.groups.length ||
+      this.paginationPageSize !== this.defaultPageSize
+    ) {
+      this.userRecordContext.forceReload = true
+    }
     this._works.changeUserRecordContext(this.userRecordContext)
+      .subscribe(() => {
+        this.paginationLoading = false
+      })
   }
 
   combine() {

From 5f745f0c71db1489f92dc2f3910cb2efbf27ffc2 Mon Sep 17 00:00:00 2001
From: Daniel Palafox <dp852@hotmail.com>
Date: Tue, 14 Sep 2021 00:45:10 +0000
Subject: [PATCH 7/9] =?UTF-8?q?=F0=9F=A4=96=20GITHUB=20ACTIONS:=20formatti?=
 =?UTF-8?q?ng=20=F0=9F=A4=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../record-research-resource.service.ts       |  4 +-
 .../core/record-works/record-works.service.ts |  4 +-
 ...esearch-resource-stacks-group.component.ts | 13 ++++---
 .../work-modal/work-modal.component.html      | 38 ++++---------------
 .../work-modal/work-modal.component.ts        |  9 ++++-
 .../work-stack-group.component.ts             |  3 +-
 6 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/src/app/core/record-research-resource/record-research-resource.service.ts b/src/app/core/record-research-resource/record-research-resource.service.ts
index 5d3cedca5c..3dd93213cc 100644
--- a/src/app/core/record-research-resource/record-research-resource.service.ts
+++ b/src/app/core/record-research-resource/record-research-resource.service.ts
@@ -104,7 +104,9 @@ export class RecordResearchResourceService {
     return this.$research.asObservable()
   }
 
-  changeUserRecordContext(event: UserRecordOptions): Observable<ResearchResourcesEndpoint> {
+  changeUserRecordContext(
+    event: UserRecordOptions
+  ): Observable<ResearchResourcesEndpoint> {
     return this.getResearchResourcePage(event).pipe(take(1))
   }
 
diff --git a/src/app/core/record-works/record-works.service.ts b/src/app/core/record-works/record-works.service.ts
index cb30db44b4..a948d673ae 100644
--- a/src/app/core/record-works/record-works.service.ts
+++ b/src/app/core/record-works/record-works.service.ts
@@ -130,7 +130,9 @@ export class RecordWorksService {
     }
   }
 
-  changeUserRecordContext(userRecordOptions: UserRecordOptions): Observable<WorksEndpoint> {
+  changeUserRecordContext(
+    userRecordOptions: UserRecordOptions
+  ): Observable<WorksEndpoint> {
     return this.getWorks(userRecordOptions).pipe(take(1))
   }
 
diff --git a/src/app/record/components/research-resource-stacks-group/research-resource-stacks-group.component.ts b/src/app/record/components/research-resource-stacks-group/research-resource-stacks-group.component.ts
index 69c148d857..988b349f89 100644
--- a/src/app/record/components/research-resource-stacks-group/research-resource-stacks-group.component.ts
+++ b/src/app/record/components/research-resource-stacks-group/research-resource-stacks-group.component.ts
@@ -122,16 +122,17 @@ export class ResearchResourceStacksGroupComponent implements OnInit {
 
   loadResearchResources(): void {
     if (
-      this.researchResources.totalGroups > this.researchResources.groups.length ||
+      this.researchResources.totalGroups >
+        this.researchResources.groups.length ||
       this.paginationPageSize !== this.defaultPageSize
     ) {
       this.userRecordContext.forceReload = true
     }
-    this._recordResearchResourceService.changeUserRecordContext(
-      this.userRecordContext
-    ).subscribe(() => {
-      this.paginationLoading = false
-    })
+    this._recordResearchResourceService
+      .changeUserRecordContext(this.userRecordContext)
+      .subscribe(() => {
+        this.paginationLoading = false
+      })
   }
 
   expandedClicked(expanded: boolean) {
diff --git a/src/app/record/components/work-modal/work-modal.component.html b/src/app/record/components/work-modal/work-modal.component.html
index 7cf762a86d..3d37f554fb 100644
--- a/src/app/record/components/work-modal/work-modal.component.html
+++ b/src/app/record/components/work-modal/work-modal.component.html
@@ -28,11 +28,7 @@
       </a>
     </ng-container>
     <ng-container id="side-bar-url-4">
-      <a
-        class="side-bar"
-        i18n="@@shared.visibility"
-        (click)="toVisibility()"
-      >
+      <a class="side-bar" i18n="@@shared.visibility" (click)="toVisibility()">
         Visibility
       </a>
     </ng-container>
@@ -132,10 +128,7 @@
         <span class="required">*</span>
       </label>
       <mat-form-field appearance="outline" class="mat-form-field-min row">
-        <mat-select
-          placeholder="Select a work type"
-          formControlName="workType"
-        >
+        <mat-select placeholder="Select a work type" formControlName="workType">
           <mat-option
             *ngFor="let item of workTypes | keyvalue"
             [value]="item.value"
@@ -303,11 +296,8 @@
               formControlName="publicationYear"
             >
               <mat-option i18n="@@shared.year" [value]="">Year</mat-option>
-              <mat-option
-                *ngFor="let year of yearOptions"
-                [value]="year"
-              >
-                {{ year}}
+              <mat-option *ngFor="let year of yearOptions" [value]="year">
+                {{ year }}
               </mat-option>
             </mat-select>
           </mat-form-field>
@@ -323,10 +313,7 @@
               formControlName="publicationMonth"
             >
               <mat-option i18n="@@shared.month" [value]="">Month</mat-option>
-              <mat-option
-                *ngFor="let month of monthOptions"
-                [value]="month"
-              >
+              <mat-option *ngFor="let month of monthOptions" [value]="month">
                 {{ month }}
               </mat-option>
             </mat-select>
@@ -343,10 +330,7 @@
               formControlName="publicationDay"
             >
               <mat-option i18n="@@shared.day" [value]="">Day</mat-option>
-              <mat-option
-                *ngFor="let day of dayOptions"
-                [value]="day"
-              >
+              <mat-option *ngFor="let day of dayOptions" [value]="day">
                 {{ day }}
               </mat-option>
             </mat-select>
@@ -434,10 +418,7 @@
       </div>
       <div class="row">
         <mat-form-field appearance="outline" class="mat-form-field-min">
-          <mat-select
-            placeholder="Placeholder"
-            formControlName="citationType"
-          >
+          <mat-select placeholder="Placeholder" formControlName="citationType">
             <mat-option [value]="''" i18n="@@works.selectACitation">
               Select a citation type
             </mat-option>
@@ -462,10 +443,7 @@
 
     <div>
       <div class="row">
-        <label
-          for="citation-input"
-          class="mat-caption"
-        >
+        <label for="citation-input" class="mat-caption">
           <strong i18n="@@works.citation">Citation</strong>
         </label>
       </div>
diff --git a/src/app/record/components/work-modal/work-modal.component.ts b/src/app/record/components/work-modal/work-modal.component.ts
index 29659ccb13..f404098cf7 100644
--- a/src/app/record/components/work-modal/work-modal.component.ts
+++ b/src/app/record/components/work-modal/work-modal.component.ts
@@ -1,5 +1,12 @@
 import { Component, Inject, OnInit } from '@angular/core'
-import { AbstractControl, AsyncValidatorFn, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'
+import {
+  AbstractControl,
+  AsyncValidatorFn,
+  FormArray,
+  FormBuilder,
+  FormGroup,
+  Validators,
+} from '@angular/forms'
 import { first, map, startWith } from 'rxjs/operators'
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'
 import { Observable } from 'rxjs'
diff --git a/src/app/record/components/work-stack-group/work-stack-group.component.ts b/src/app/record/components/work-stack-group/work-stack-group.component.ts
index 9b855329ae..297f60f86c 100644
--- a/src/app/record/components/work-stack-group/work-stack-group.component.ts
+++ b/src/app/record/components/work-stack-group/work-stack-group.component.ts
@@ -143,7 +143,8 @@ export class WorkStackGroupComponent implements OnInit {
     ) {
       this.userRecordContext.forceReload = true
     }
-    this._works.changeUserRecordContext(this.userRecordContext)
+    this._works
+      .changeUserRecordContext(this.userRecordContext)
       .subscribe(() => {
         this.paginationLoading = false
       })

From 4bc21a5a13bdae451be706b8e04d07e1a1c3b771 Mon Sep 17 00:00:00 2001
From: Daniel Palafox <dp852@hotmail.com>
Date: Tue, 14 Sep 2021 13:03:33 -0500
Subject: [PATCH 8/9] fix: inconsistent styling in 'Add ..' button

see the issue for details

fixes issue #1091
---
 .../work-modal/work-modal.component.html      | 59 ++++++++++---------
 .../work-modal/work-modal.component.scss      |  9 +++
 .../properties/works/works.en.properties      |  4 +-
 3 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/src/app/record/components/work-modal/work-modal.component.html b/src/app/record/components/work-modal/work-modal.component.html
index 3d37f554fb..449f800857 100644
--- a/src/app/record/components/work-modal/work-modal.component.html
+++ b/src/app/record/components/work-modal/work-modal.component.html
@@ -173,28 +173,27 @@
       </mat-form-field>
     </div>
     <!-- SHOW-HIDE translated title button  -->
-    <div>
-      <div
-        class="row align-icon"
-        *ngIf="!showTranslationTitle"
-        (click)="showTranslationTitle = !showTranslationTitle"
-      >
-        <button mat-icon-button color="primary">
-          <mat-icon>add</mat-icon>
-        </button>
-        <a i18n="@@works.addTranslatedTitle">add translated title</a>
-      </div>
-
-      <div
-        class="row align-icon"
-        *ngIf="showTranslationTitle"
+    <div class="row">
+      <a
+        class="col add-more no-gutters"
         (click)="showTranslationTitle = !showTranslationTitle"
       >
-        <button mat-icon-button color="primary">
-          <mat-icon>add</mat-icon>
-        </button>
-        <a i18n="@@works.hideTranslatedTitle">hide translation title</a>
-      </div>
+        <mat-icon class="large-material-icon">add_circle_outline</mat-icon>
+        <span class="mat-body-1">
+            <ng-container
+              i18n="@@works.addTranslatedTitle"
+              *ngIf="!showTranslationTitle"
+            >
+              Add translated title
+            </ng-container>
+            <ng-container
+              i18n="@@works.hideTranslatedTitle"
+              *ngIf="showTranslationTitle"
+            >
+              Hide translation title
+            </ng-container>
+          </span>
+      </a>
     </div>
 
     <!-- Work translations title -->
@@ -707,13 +706,19 @@
       </ng-container>
 
       <!-- Add other identifier  -->
-      <div
-        class="row align-icon"
-        *ngIf="!showTranslationTitle"
-        (click)="addOtherWorkId()"
-      >
-        <button mat-icon-button><mat-icon>add</mat-icon></button>
-        <a i18n="@@works.addAnotherId">Add other identifier</a>
+      <div class="row">
+        <a
+          class="col add-more no-gutters"
+          (click)="addOtherWorkId()"
+        >
+          <mat-icon class="large-material-icon">add_circle_outline</mat-icon>
+          <span
+            class="mat-body-1"
+            i18n="@@works.addAnotherId"
+          >
+            Add other identifier
+          </span>
+        </a>
       </div>
     </div>
 
diff --git a/src/app/record/components/work-modal/work-modal.component.scss b/src/app/record/components/work-modal/work-modal.component.scss
index 6810ae3395..c1aa4a0bbe 100644
--- a/src/app/record/components/work-modal/work-modal.component.scss
+++ b/src/app/record/components/work-modal/work-modal.component.scss
@@ -76,3 +76,12 @@ mat-radio-group {
   padding-bottom: 1.475em;
   padding-left: 0;
 }
+
+.add-more {
+  margin-bottom: 26px;
+
+  span {
+    margin: auto;
+    padding-left: 6px;
+  }
+}
diff --git a/src/locale/properties/works/works.en.properties b/src/locale/properties/works/works.en.properties
index 5df107f911..f209eeec54 100644
--- a/src/locale/properties/works/works.en.properties
+++ b/src/locale/properties/works/works.en.properties
@@ -8,8 +8,8 @@ works.selectACategory=Select a work category
 works.workType=Work type
 works.selectWorkType=Select a work type
 works.setAWorkTitle=Set a work title
-works.addTranslatedTitle=add translated title
-works.hideTranslatedTitle=hide translation title
+works.addTranslatedTitle=Add translated title
+works.hideTranslatedTitle=Hide translation title
 works.translatedTitle=Work translated title
 works.subtitle=Work Subtitle
 works.invalidUrl=Invalid url

From f3eb9f73ad7990c60b92ebbfccdfc02b474891b8 Mon Sep 17 00:00:00 2001
From: Daniel Palafox <dp852@hotmail.com>
Date: Tue, 14 Sep 2021 18:50:18 +0000
Subject: [PATCH 9/9] =?UTF-8?q?=F0=9F=A4=96=20GITHUB=20ACTIONS:=20formatti?=
 =?UTF-8?q?ng=20=F0=9F=A4=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../work-modal/work-modal.component.html      | 36 ++++++++-----------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/app/record/components/work-modal/work-modal.component.html b/src/app/record/components/work-modal/work-modal.component.html
index 449f800857..322e2bc336 100644
--- a/src/app/record/components/work-modal/work-modal.component.html
+++ b/src/app/record/components/work-modal/work-modal.component.html
@@ -180,19 +180,19 @@
       >
         <mat-icon class="large-material-icon">add_circle_outline</mat-icon>
         <span class="mat-body-1">
-            <ng-container
-              i18n="@@works.addTranslatedTitle"
-              *ngIf="!showTranslationTitle"
-            >
-              Add translated title
-            </ng-container>
-            <ng-container
-              i18n="@@works.hideTranslatedTitle"
-              *ngIf="showTranslationTitle"
-            >
-              Hide translation title
-            </ng-container>
-          </span>
+          <ng-container
+            i18n="@@works.addTranslatedTitle"
+            *ngIf="!showTranslationTitle"
+          >
+            Add translated title
+          </ng-container>
+          <ng-container
+            i18n="@@works.hideTranslatedTitle"
+            *ngIf="showTranslationTitle"
+          >
+            Hide translation title
+          </ng-container>
+        </span>
       </a>
     </div>
 
@@ -707,15 +707,9 @@
 
       <!-- Add other identifier  -->
       <div class="row">
-        <a
-          class="col add-more no-gutters"
-          (click)="addOtherWorkId()"
-        >
+        <a class="col add-more no-gutters" (click)="addOtherWorkId()">
           <mat-icon class="large-material-icon">add_circle_outline</mat-icon>
-          <span
-            class="mat-body-1"
-            i18n="@@works.addAnotherId"
-          >
+          <span class="mat-body-1" i18n="@@works.addAnotherId">
             Add other identifier
           </span>
         </a>