feat: use the metadata with correct language

cypress/e2e/collection-create.cy.ts

@@ -5,9 +5,9 @@ beforeEach(() => {
 
 it('should show loading component while saving', () => {
   const title = 'Test Collection Title';
-  cy.get('#title').type(title);
+  cy.get('#title-en').type(title);
 
-  cy.get('button[type="submit"]').click();
+  cy.get('button[type="button"].btn-primary').click();
 
   cy.get('ds-loading').should('be.visible');
 });

cypress/e2e/community-create.cy.ts

@@ -5,9 +5,9 @@ beforeEach(() => {
 
 it('should show loading component while saving', () => {
   const title = 'Test Community Title';
-  cy.get('#title').type(title);
+  cy.get('#title-en').type(title);
 
-  cy.get('button[type="submit"]').click();
+  cy.get('button[type="button"].btn-primary').click();
 
   cy.get('ds-loading').should('be.visible');
 });

src/app/collection-page/collection-form/collection-form.component.ts

@@ -1,6 +1,7 @@
 import {
   AsyncPipe,
   NgClass,
+  NgForOf,
   NgIf,
 } from '@angular/common';
 import {
@@ -12,6 +13,7 @@
   SimpleChange,
   SimpleChanges,
 } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import {
   DynamicFormControlModel,
@@ -66,7 +68,9 @@
     ComcolPageLogoComponent,
     NgIf,
     NgClass,
+    NgForOf,
     VarDirective,
+    FormsModule,
   ],
 })
 export class CollectionFormComponent extends ComColFormComponent<Collection> implements OnInit, OnChanges {
@@ -101,11 +105,14 @@
                      protected objectCache: ObjectCacheService,
                      protected entityTypeService: EntityTypeDataService,
                      protected chd: ChangeDetectorRef,
-                     protected modalService: NgbModal) {
-    super(formService, translate, notificationsService, authService, requestService, objectCache, modalService);
+                     protected modalService: NgbModal,
+                     protected cdr: ChangeDetectorRef) {
+    super(formService, translate, notificationsService, authService, requestService, objectCache, modalService, cdr);
   }
 
   ngOnInit(): void {
+    this.initializeLanguage();
+
     if (hasNoValue(this.formModel) && isNotNull(this.dso)) {
       this.initializeForm();
     }
@@ -148,11 +155,23 @@
         }
       });
 
-      this.formModel = entityTypes.length === 0 ? collectionFormModels : [...collectionFormModels, this.entityTypeSelection];
+      this.formModels.set(
+        this.defaultLanguageCode,
+        this.getCollectionFormModels(entityTypes, collectionFormModels(this.defaultLanguageCode, true)),
+      );
+      this.languages.forEach(lang => {
+        this.formModels.set(
+          lang.code,
+          this.getCollectionFormModels(entityTypes, collectionFormModels(lang.code, false)),
+        );
+      });
 
       super.ngOnInit();
       this.chd.detectChanges();
     });
+  }
 
+  private getCollectionFormModels(entityTypes: ItemType[],  dynamicCollectionFormModels: DynamicFormControlModel[]): DynamicFormControlModel[] {
+    return entityTypes.length === 0 ? dynamicCollectionFormModels : [...dynamicCollectionFormModels, this.entityTypeSelection];
   }
 }

src/app/collection-page/collection-form/collection-form.models.ts

@@ -17,41 +17,43 @@
  * The dynamic form fields used for creating/editing a collection
  * @type {(DynamicInputModel | DynamicTextAreaModel)[]}
  */
-export const collectionFormModels: DynamicFormControlModel[] = [
-  new DynamicInputModel({
-    id: 'title',
-    name: 'dc.title',
-    required: true,
-    validators: {
-      required: null,
-    },
-    errorMessages: {
-      required: 'Please enter a name for this title',
-    },
-  }),
-  new DynamicTextAreaModel({
-    id: 'description',
-    name: 'dc.description',
-    spellCheck: environment.form.spellCheck,
-  }),
-  new DynamicTextAreaModel({
-    id: 'abstract',
-    name: 'dc.description.abstract',
-    spellCheck: environment.form.spellCheck,
-  }),
-  new DynamicTextAreaModel({
-    id: 'rights',
-    name: 'dc.rights',
-    spellCheck: environment.form.spellCheck,
-  }),
-  new DynamicTextAreaModel({
-    id: 'tableofcontents',
-    name: 'dc.description.tableofcontents',
-    spellCheck: environment.form.spellCheck,
-  }),
-  new DynamicTextAreaModel({
-    id: 'license',
-    name: 'dc.rights.license',
-    spellCheck: environment.form.spellCheck,
-  }),
-];
+export const collectionFormModels = (lang: string, isDefaultLanguage: boolean): DynamicFormControlModel[] => {
+  return [
+    new DynamicInputModel({
+      id: `title-${lang}`,
+      name: 'dc.title',
+      required: isDefaultLanguage,
+      validators: {
+        required: null,
+      },
+      errorMessages: {
+        required: 'Please enter a name for this title',
+      },
+    }),
+    new DynamicTextAreaModel({
+      id: `description-${lang}`,
+      name: 'dc.description',
+      spellCheck: environment.form.spellCheck,
+    }),
+    new DynamicTextAreaModel({
+      id: `abstract-${lang}`,
+      name: 'dc.description.abstract',
+      spellCheck: environment.form.spellCheck,
+    }),
+    new DynamicTextAreaModel({
+      id: `rights-${lang}`,
+      name: 'dc.rights',
+      spellCheck: environment.form.spellCheck,
+    }),
+    new DynamicTextAreaModel({
+      id: `tableofcontents-${lang}`,
+      name: 'dc.description.tableofcontents',
+      spellCheck: environment.form.spellCheck,
+    }),
+    new DynamicTextAreaModel({
+      id: `license-${lang}`,
+      name: 'dc.rights.license',
+      spellCheck: environment.form.spellCheck,
+    }),
+  ];
+};

src/app/collection-page/collection-page.component.html

 [content]="collection.copyrightText" 
 [content]="collection.copyrightText" 
@@ -23,12 +23,12 @@
             </ds-comcol-page-handle>
             <!-- Introductory text -->
             <ds-comcol-page-content
-                [content]="collection.introductoryText"
+                [content]="collection.introductoryText(currentLanguage)"
                 [hasInnerHtml]="true">
             </ds-comcol-page-content>
             <!-- News -->
             <ds-comcol-page-content
-                [content]="collection.sidebarText"
+                [content]="collection.sidebarText(currentLanguage)"
                 [hasInnerHtml]="true"
                 [title]="'collection.page.news'">
             </ds-comcol-page-content>
@@ -44,10 +44,10 @@
 
           <router-outlet></router-outlet>
         </section>
-        <footer *ngIf="collection.copyrightText" class="border-top my-5 pt-4">
+        <footer *ngIf="collection.copyrightText(currentLanguage) as copyrightText" class="border-top my-5 pt-4">
           <!-- Copyright -->
           <ds-comcol-page-content
-              [content]="collection.copyrightText"
+              [content]="copyrightText"
               [hasInnerHtml]="true">
           </ds-comcol-page-content>
         </footer>

src/app/collection-page/collection-page.component.ts

@@ -12,7 +12,10 @@ import {
   Router,
   RouterOutlet,
 } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import {
   filter,
@@ -21,6 +24,7 @@ import {
   take,
 } from 'rxjs/operators';
 
+import { environment } from '../../environments/environment';
 import { AuthService } from '../core/auth/auth.service';
 import { DSONameService } from '../core/breadcrumbs/dso-name.service';
 import { SortOptions } from '../core/cache/models/sort-options.model';
@@ -97,16 +101,24 @@ export class CollectionPageComponent implements OnInit {
    */
   collectionPageRoute$: Observable<string>;
 
+  /**
+   * The current language of the page
+   */
+  currentLanguage: string = environment.defaultLanguage;
+
   constructor(
     protected route: ActivatedRoute,
     protected router: Router,
     protected authService: AuthService,
     protected authorizationDataService: AuthorizationDataService,
     public dsoNameService: DSONameService,
+    public translateService: TranslateService,
   ) {
   }
 
   ngOnInit(): void {
+    this.currentLanguage = this.translateService.currentLang;
+
     this.collectionRD$ = this.route.data.pipe(
       map((data) => data.dso as RemoteData<Collection>),
       redirectOn4xx(this.router, this.authService),

src/app/community-list-page/community-list/community-list.component.html

@@ -46,12 +46,12 @@
     </div>
     <ds-truncatable [id]="node.id">
       <div class="text-muted" cdkTreeNodePadding>
-        <div class="d-flex" *ngIf="node.payload.shortDescription">
+        <div class="d-flex" *ngIf="node.payload.shortDescription(translateService.currentLang) as shorDescription">
           <span aria-hidden="true" class="btn btn-default invisible">
             <span class="fa fa-chevron-right"></span>
           </span>
           <ds-truncatable-part [id]="node.id" [minLines]="3">
-            <span>{{node.payload.shortDescription}}</span>
+            <span>{{shorDescription}}</span>
           </ds-truncatable-part>
         </div>
       </div>
@@ -77,12 +77,12 @@ <h6 class="align-middle my-auto">
     </div>
     <ds-truncatable [id]="node.id">
       <div class="text-muted" cdkTreeNodePadding>
-        <div class="d-flex" *ngIf="node.payload.shortDescription">
+        <div class="d-flex" *ngIf="node.payload.shortDescription(translateService.currentLang)">
           <span aria-hidden="true" class="btn btn-default invisible">
             <span class="fa fa-chevron-right"></span>
           </span>
           <ds-truncatable-part [id]="node.id" [minLines]="3">
-            <span>{{node.payload.shortDescription}}</span>
+            <span>{{node.payload.shortDescription(translateService.currentLang)}}</span>
           </ds-truncatable-part>
         </div>
       </div>

src/app/community-list-page/community-list/community-list.component.ts

@@ -13,7 +13,10 @@ import {
   OnInit,
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
 import { take } from 'rxjs/operators';
 
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
@@ -59,6 +62,7 @@ export class CommunityListComponent implements OnInit, OnDestroy {
   constructor(
     protected communityListService: CommunityListService,
     public dsoNameService: DSONameService,
+    public translateService: TranslateService,
   ) {
     this.paginationConfig = new FindListOptions();
     this.paginationConfig.elementsPerPage = 2;