From 62b09ee89aca9130ab91439058a8703b024b7c5e Mon Sep 17 00:00:00 2001
From: Victor Lopez <viclopez@unicef.com>
Date: Mon, 9 Dec 2024 16:36:14 +0100
Subject: [PATCH] refactor: Update header component to use new app name and
 suffix

---
 src/app/pcdc-header/pcdc-header.component.html | 8 ++++++--
 src/app/pcdc-header/pcdc-header.component.scss | 3 +++
 src/app/pcdc-header/pcdc-header.component.ts   | 7 +++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/app/pcdc-header/pcdc-header.component.html b/src/app/pcdc-header/pcdc-header.component.html
index 108f2a2..5323a5c 100644
--- a/src/app/pcdc-header/pcdc-header.component.html
+++ b/src/app/pcdc-header/pcdc-header.component.html
@@ -5,11 +5,15 @@
       <span class="daily-chk"> {{ appNameSuffix | uppercase }} </span>
     </ion-label>
     <ion-buttons slot="end">
-      <ion-select [(ngModel)]="selectedLanguage" (ionChange)="onLanguageChange()">
+      <ion-select [(ngModel)]="selectedLanguage" (ionChange)="onLanguageChange()" class="custom-select">
         <ion-select-option *ngFor="let language of languages" [value]="language.code">
-          {{ language.name }}
+          {{ language.label }}
         </ion-select-option>
       </ion-select>
+      <ion-label class="selected-label" onclick="document.querySelector('ion-select').open()"
+        onmouseover="this.style.cursor='pointer'">
+        {{ selectedLanguageName }}
+      </ion-label>
     </ion-buttons>
     <ion-buttons slot="end">
       <ion-menu-button color="light"></ion-menu-button>
diff --git a/src/app/pcdc-header/pcdc-header.component.scss b/src/app/pcdc-header/pcdc-header.component.scss
index 431b49f..6dfbc3f 100644
--- a/src/app/pcdc-header/pcdc-header.component.scss
+++ b/src/app/pcdc-header/pcdc-header.component.scss
@@ -4,4 +4,7 @@
 
 .header-toolbar {
     text-align: end;
+}
+.custom-select{
+    width: 0;
 }
\ No newline at end of file
diff --git a/src/app/pcdc-header/pcdc-header.component.ts b/src/app/pcdc-header/pcdc-header.component.ts
index be16a98..80d8d7a 100644
--- a/src/app/pcdc-header/pcdc-header.component.ts
+++ b/src/app/pcdc-header/pcdc-header.component.ts
@@ -11,6 +11,7 @@ import { SettingsService } from '../services/settings.service';
 export class PcdcHeaderComponent implements OnInit {
   languages = env.languages;
   selectedLanguage: string;
+  selectedLanguageName: string;
   test = false;
   appName = env.appName;
   appNameSuffix = env.appNameSuffix;
@@ -22,6 +23,9 @@ export class PcdcHeaderComponent implements OnInit {
     this.selectedLanguage =
       this.settingsService.get('applicationLanguage')?.code ||
       translate.defaultLang;
+    this.selectedLanguageName = this.languages.find(
+      (l) => l.code === this.selectedLanguage
+    ).name;
     translate.use(this.selectedLanguage);
     this.test = env.mode === 'dev';
   }
@@ -32,6 +36,9 @@ export class PcdcHeaderComponent implements OnInit {
       'applicationLanguage',
       this.languages.find((l) => l.code === this.selectedLanguage)
     );
+    this.selectedLanguageName = this.languages.find(
+      (l) => l.code === this.selectedLanguage
+    ).name;
     window.location.reload();
   }
   closeApp() {