From 27bbe3f7a6caccbee39a394919cd5f37b2e507b6 Mon Sep 17 00:00:00 2001
From: HuyNVN <huynvn97@gmail.com>
Date: Wed, 25 Sep 2024 13:30:05 +0700
Subject: [PATCH] fix: handle logic change language with icon

---
 src/app/components/app/app.component.css  |  17 ++++++
 src/app/components/app/app.component.html |  60 ++++++++++++++++++++--
 src/app/components/app/app.component.ts   |  27 ++++++++++
 src/assets/img/english-icon.png           | Bin 0 -> 882 bytes
 src/assets/img/taiwan-icon.svg            |  14 +++++
 src/styles.css                            |   6 +--
 6 files changed, 118 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/img/english-icon.png
 create mode 100644 src/assets/img/taiwan-icon.svg

diff --git a/src/app/components/app/app.component.css b/src/app/components/app/app.component.css
index 2bc3c84..39ce72f 100644
--- a/src/app/components/app/app.component.css
+++ b/src/app/components/app/app.component.css
@@ -5,6 +5,7 @@ div.img-container{
 .navbar-custom {
     padding-left: 10%;
     padding-right: 10%;
+    border-bottom: 1px solid rgba(225, 228, 229, 1);
 }
 
 .active { 
@@ -30,9 +31,25 @@ div.img-container{
 .custom-dropdown-menu-header {
     box-shadow: 0px 0px 6px 2px rgba(2, 42, 166, 0.15);
     border-radius: 10px;
+    min-width: 180px;
 }
 
 .avatar-small {
     width: 24px;
     height: 24px;
+}
+
+.button-language {
+    height: 24px;
+    width: 50px;
+    border-radius: 24px;
+    justify-content: space-between;
+    background-color: rgba(249, 250, 252, 1);
+    padding: 0px 0px;
+    padding-right: 5px;
+    margin-right: 25px;
+}
+
+.button-language:hover {
+    background-color: unset;
 }
\ No newline at end of file
diff --git a/src/app/components/app/app.component.html b/src/app/components/app/app.component.html
index 8603a86..9588cb6 100644
--- a/src/app/components/app/app.component.html
+++ b/src/app/components/app/app.component.html
@@ -63,6 +63,60 @@
   </div>
 
   <div style="float: right">
+    <div
+      class="btn-group"
+      ngbDropdown
+      role="group"
+      aria-label="Button group with nested dropdown"
+    >
+      <button
+        type="button "
+        class="button-language btn btn-outline-primary border-0 d-flex flex-row align-items-center"
+        ngbDropdownToggle
+      >
+        <img
+          src="{{getCurrentLanguageImgPath()}}"
+          width="24px"
+          height="24px"
+          alt="language-icon"
+        />
+      </button>
+
+      <div
+        class="custom-dropdown-menu-header dropdown-menu px-2 rounded-lg"
+        ngbDropdownMenu
+      >
+        <button
+          ngbDropdownItem
+          class="border-0 d-flex flex-row justify-content-start align-items-center py-2 btn btn-outline-primary bg-transparent px-0"
+          (click)="changelLanguage('en')"
+        >
+          <img
+            src="assets/img/english-icon.png"
+            width="24px"
+            height="24px"
+            alt="english-icon"
+          />
+          <div class="p-1"></div>
+          English
+        </button>
+        <button
+          ngbDropdownItem
+          class="border-0 d-flex flex-row justify-content-start align-items-center py-2 btn btn-outline-primary bg-transparent px-0"
+          (click)="changelLanguage('tw')"
+        >
+          <img
+            src="assets/img/taiwan-icon.svg"
+            width="24px"
+            height="24px"
+            alt="english-icon"
+          />
+          <div class="p-1"></div>
+          Taiwan
+        </button>
+      </div>
+    </div>
+
     <div
       class="btn-group"
       ngbDropdown
@@ -79,12 +133,12 @@
         <div class="label-username">{{ getId() }}</div>
       </button>
       <div
-        class="custom-dropdown-menu-header dropdown-menu px-2 rounded-lg"
+        class="custom-dropdown-menu-header dropdown-menu px-3 rounded-lg"
         ngbDropdownMenu
       >
         <button
           ngbDropdownItem
-          class="border-0 d-flex flex-row justify-content-start align-items-center py-2 btn btn-outline-primary bg-transparent px-0"
+          class="border-0 d-flex flex-row justify-content-start align-items-center py-3 btn btn-outline-primary bg-transparent px-0"
           [routerLink]="['/selfservice']"
           *ngIf="isLoggedIn()"
         >
@@ -93,7 +147,7 @@
           {{ getId() }}
         </button>
         <button
-          class="btn btn-primary btn-lg py-2 d-flex align-items-center justify-content-center"
+          class="btn btn-primary btn-lg py-3 d-flex align-items-center justify-content-center"
           ngbDropdownItem
           (click)="isLoggedIn() ? logout() : login()"
         >
diff --git a/src/app/components/app/app.component.ts b/src/app/components/app/app.component.ts
index 5cdb374..cab3957 100644
--- a/src/app/components/app/app.component.ts
+++ b/src/app/components/app/app.component.ts
@@ -20,6 +20,7 @@ export class AppComponent {
   infos: any[];
   pageAccessLevel = ""; // May be set to 'login' or 'admin' to show error messages
   currentRoute: string;
+  currentLanguage: "en" | "tw" = "en";
 
   constructor(
     public oauthService: OAuthService,
@@ -157,4 +158,30 @@ export class AppComponent {
         return "";
     }
   }
+
+  currentLanguageLabel() {
+    switch (this.currentLanguage) {
+      case "en":
+        return "English";
+      case "tw":
+        return "Taiwan";
+      default:
+        return "English";
+    }
+  }
+
+  getCurrentLanguageImgPath() {
+    switch (this.currentLanguage) {
+      case "en":
+        return "assets/img/english-icon.png";
+      case "tw":
+        return "assets/img/taiwan-icon.svg";
+      default:
+        return "assets/img/english-icon.png";
+    }
+  }
+
+  changelLanguage(value: "en" | "tw") {
+    this.currentLanguage = value;
+  }
 }
diff --git a/src/assets/img/english-icon.png b/src/assets/img/english-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..01d0f26ba1b81660d0a502de40b7e1152a9afd42
GIT binary patch
literal 882
zcmV-&1C9KNP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0|!Y&K~#7FwN_h5
z6j2!dcG>dsU}F~|t(dHbO30NAO`_D$hsazX><+0VUdr6^L6p#4CCDy12;zpKMmM{m
z6+vX_T4tIHO3-FlIOPQk%TdAA9(FosQrTVC-8J!pxt#x;|NH)P=0E=&z!6wABZ^|)
zV0lerD-+Pu%4`#-uHnIonnu#62Aje<qEOf;PGMy-SrsrDMw@a^cXAgkM=){^ciI<5
z#udx_(yGm7vlhILx22NLGWexs5T_363>QIW5>I{PeyM7Q0)#w|4CZKrm_NvJqL^~n
z70A3;o8jTMM1uvw%}t@XR$i~R5+G5tS94SvV|^}CkL`x{GEdAG%e*{rHa;Buvn<5*
zf6RNwDA^f-(S{Z}EoQy%a+DSvhT&;8vXZ0V>Aut@Vs%0U+Hao0d2s-}VFxk5RWeL?
zaFsNGD$&$4s**(EWwU6Bp1vXJ`SW(2Xpy4QMQs#cI=aR0+7j`-Pq1V+?oSj)-n36s
zFp7}j4%J-IvA!#u&S0Z*6QE4Ty4-Yo-D<^;ihD8t@_cTLy*0RGvxV6-u}4OCCH^lh
zT>&p&L~;sNjztC);IViR6zr88o_u81(Wud81BUKCv9hf^asXbtf*iTgkKCzPed<sX
zTqta|0+f8!(HLiLkLeO|(@`3uPom8`00!R>^yZh~YiGAJ0`PsmtlGk>7IeiXOFXUK
zfpv0HW`(ZU6#XYcZu;;UYcdkSJikNAq7Q;j=$s1pM-?FZavgelhom;MHx!#|uVc%j
zvg(~er<A4;^lb?~>O^6!{yvHb@s8uA;3^w1GG=lrV4C=YLfs2&kG_P{xi$FK|68K;
ziU`%x7fFCBJ@EC{ZrE3dlIlj6h;1Q^j-%|>Yiy0oC#C<PmaGgvBS4Xv6v>fjv{)d<
zO_SQ93vt|Z+j^t%It}?NoudI^{tzTz!eMEgy_5Mej+EIz8E^xxLr;CEuWg6@Qw2F4
zn1Oh5y3ml8ifkB?@G>R&_f6F;vc9GXp1d@Pq8kUEn{&p00jls)FhNj(YybcN07*qo
IM6N<$f=^<Vf&c&j

literal 0
HcmV?d00001

diff --git a/src/assets/img/taiwan-icon.svg b/src/assets/img/taiwan-icon.svg
new file mode 100644
index 0000000..b1970c1
--- /dev/null
+++ b/src/assets/img/taiwan-icon.svg
@@ -0,0 +1,14 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4_7303)">
+<path d="M512 255.999C512 397.383 397.384 511.999 256 511.999C114.616 511.999 0 397.383 0 255.999C87.93 168.069 162.504 93.495 256 -0.000976562C397.384 -0.000976562 512 114.615 512 255.999Z" fill="#D80027"/>
+<path d="M256 255.999C256 114.615 256 97.947 256 -0.000976562C114.616 -0.000976562 0 114.615 0 255.999H256Z" fill="#0052B4"/>
+<path d="M222.609 149.82L191.344 164.528L207.992 194.807L174.043 188.311L169.74 222.608L146.094 197.384L122.446 222.608L118.145 188.311L84.1951 194.805L100.843 164.526L69.5791 149.82L100.844 135.115L84.1951 104.835L118.144 111.33L122.447 77.0339L146.094 102.258L169.741 77.0339L174.043 111.33L207.993 104.835L191.344 135.116L222.609 149.82Z" fill="#F0F0F0"/>
+<path d="M146.098 197.468C172.416 197.468 193.751 176.133 193.751 149.815C193.751 123.497 172.416 102.162 146.098 102.162C119.78 102.162 98.4448 123.497 98.4448 149.815C98.4448 176.133 119.78 197.468 146.098 197.468Z" fill="#0052B4"/>
+<path d="M146.094 175.212C132.093 175.212 120.703 163.821 120.703 149.82C120.703 135.819 132.094 124.428 146.094 124.428C160.095 124.428 171.486 135.819 171.486 149.82C171.485 163.821 160.093 175.212 146.094 175.212Z" fill="#F0F0F0"/>
+</g>
+<defs>
+<clipPath id="clip0_4_7303">
+<rect width="512" height="512" fill="white" transform="translate(0 -0.000976562)"/>
+</clipPath>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index ee46fef..8309c26 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -12,7 +12,7 @@ body { margin: 0; font-family: Inter , "Helvetica Neue", sans-serif !important;
   color: #08082C !important;
 
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 400 !important;
   line-height: 16.94px;
   border-radius: 10px;
 }
@@ -29,8 +29,8 @@ body { margin: 0; font-family: Inter , "Helvetica Neue", sans-serif !important;
   border: 1px solid #05286C;
   border-radius: 10px;
 
-  font-size: 14px;
-  font-weight: 400;
+  font-size: 14px ;
+  font-weight: 400 !important;
   line-height: 16.94px;
 }