From 0626215f1a4ae2cf7e96de74eb3e4003f044fe3b Mon Sep 17 00:00:00 2001
From: Ken <62271587+kennethliporada@users.noreply.github.com>
Date: Thu, 14 Mar 2024 14:45:12 +0800
Subject: [PATCH] feat(4as): archive button and download (#359)

* Added github actions workflow for aut deployment to .72 server.

* Added github action for S3 deployment.

* Changed to staging. Created branch for staging.

* Retrigger deployment workflow.

* fix(studio): zoom in on ios (#192)

# Summary

- Fixes https://github.com/UPRI-NOAH/noah-frontend/issues/186
- The `load` event isn't firing on NOAH Studio. As such, the `centerListener()` method isn't called which is responsible for the zooming in to the selected place. However, `style.load` do get called. The fix implemented here is to also use the event `style.load` to call the methods that were previously called by upon the firing of the `load` event but only listen to `style.load` once.
  - We need to further investigate **why** `load` doesn't work on Studio in iOS but works in KYH
- Confirming that only the NOAH Studio is affected by this issue.

# Demo

![Kapture 2021-10-05 at 22 49 45](https://user-images.githubusercontent.com/11599005/136047077-d0da7a85-9157-4d01-bae9-07a6039fd9c1.gif)

* ci(netlify): add _redirects file

* S3 Deployment Validation (#198)

* Added if condition to run workflow only on successful PR merge. (#195)

* Checking proper automation workflow. Will revert this small change upon validation. (#196)

* Change deployment trigger. Revert small biblio change. (#199)

* Checking proper automation workflow. Will revert this small change upon validation.

* Changed trigger for deployment workflow. Revert small change to bibliography.

* Cascade dev changes on workflow to prod (#202)

* Added AWS deployment workflow

* fix duplicate data for 4as summary

* archive dropdown scroll

* 4as popup scroll

* 1 day expiration for cookie

* download archive data immidiately and remove hover from button select date

---------

Co-authored-by: pfgoting <pfgoting@gmail.com>
Co-authored-by: Jadurani Davalos <jadurani.davalos@gmail.com>
Co-authored-by: kennethbeoliporada <kennethbeoliporada@gmail.com>
---
 .../risk-assessment-modal.component.html      | 44 +++++--------------
 .../risk-assessment-modal.component.scss      | 12 -----
 .../risk-assessment-modal.component.ts        | 37 ++++++++++------
 3 files changed, 36 insertions(+), 57 deletions(-)

diff --git a/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html b/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html
index a444a6cd..898d941b 100644
--- a/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html
+++ b/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.html
@@ -1,30 +1,9 @@
-<!-- <div
-  [ngClass]="'z-50 fixed w-full flex justify-center inset-0 lg:p-10 p-5'"
-  *ngIf="riskModal"
-> -->
 <div
-  class="
-    min-w-screen
-    h-screen
-    animated
-    fadeIn
-    faster
-    fixed
-    left-0
-    top-0
-    flex
-    justify-center
-    items-center
-    inset-0
-    z-50
-    outline-none
-    focus:outline-none
-    bg-no-repeat bg-center bg-cover
-  "
+  [ngClass]="'z-50 fixed w-full flex justify-center inset-0 lg:p-10 p-5'"
   *ngIf="riskModal"
 >
   <!-- *ngIf="riskModal" -->
-  <div class="opacity-80 bg-black z-0 absolute inset-0"></div>
+  <div class="w-full h-full opacity-80 bg-black z-0 absolute inset-0"></div>
   <!-- modal -->
   <div
     class="
@@ -154,7 +133,7 @@
 
       <!-- ... Your existing header content ... -->
     </div>
-    <div class="flex-auto p-2">
+    <div class="flex-auto p-2 overflow-y-auto">
       <div class="mb-2 bg-white">
         <label for="table-search" class="sr-only">Search</label>
         <div class="relative mt-1">
@@ -211,7 +190,7 @@
         </div>
       </div>
       <!-- Modal Content -->
-      <div class="table-wrp block flex-grow max-h-full" style="height: 58vh">
+      <div class="flex-grow overflow-auto h-auto">
         <table
           class="w-full text-sm text-left text-gray-500 dark:text-gray-400"
         >
@@ -294,7 +273,7 @@
                         px-4
                         pb-10
                         text-base
-                        md:text-xl
+                        md:text-2xl
                         leading-none
                         text-center text-gray-600
                       "
@@ -307,7 +286,7 @@
               </div>
             </div>
           </ng-container>
-          <ng-template #dataAvailable && #dataNoResult>
+          <ng-template #dataAvailable>
             <tbody class="h-96 overflow-y-auto">
               <tr
                 *ngFor="
@@ -503,17 +482,19 @@
           forecast data.
         </p>
 
-        <div class="dropdown inline-block relative">
+        <div class="inline-block relative">
           <button
             class="
               border border-blue-200
               font-semibold
-              py-2
-              px-4
+              lg:py-2 lg:px-4
+              px-2
+              py-1
               rounded
               inline-flex
               items-center
             "
+            (click)="showSelectDate()"
           >
             <span class="mr-1 text-xs lg:text-base"> Select Date: </span>
             <svg
@@ -528,9 +509,7 @@
           </button>
           <ul
             class="
-              dropdown-menu
               absolute
-              hidden
               border-blue-200
               h-36
               overflow-y-auto
@@ -538,6 +517,7 @@
               bottom-full
               top-auto
             "
+            *ngIf="showSelect"
           >
             <li
               class="w-32 lg:w-60"
diff --git a/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.scss b/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.scss
index 043f16be..e69de29b 100644
--- a/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.scss
+++ b/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.scss
@@ -1,12 +0,0 @@
-.dropdown:hover .dropdown-menu {
-  display: block;
-}
-.table-wrp {
-  max-height: 75vh;
-  overflow-y: auto;
-  display: block;
-}
-thead {
-  position: sticky;
-  top: 0;
-}
diff --git a/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.ts b/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.ts
index f92851dd..958ddb58 100644
--- a/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.ts
+++ b/src/app/features/noah-playground/components/risk-assessment-modal/risk-assessment-modal.component.ts
@@ -28,6 +28,7 @@ export class RiskAssessmentModalComponent implements OnInit {
   mobileDisclaimer: boolean = false;
   btnReadMore: boolean = true;
   dateDataText: string;
+  showSelect: boolean = false;
 
   archieveDateTime: string;
   archieveDownload: string;
@@ -79,27 +80,37 @@ export class RiskAssessmentModalComponent implements OnInit {
     this.archiveData();
   }
 
+  showSelectDate() {
+    this.showSelect = !this.showSelect;
+  }
+
   async downloadData(selectedDate: string) {
-    const response: any = await this.riskAssessment
-      .archiveData()
-      .pipe(first())
-      .toPromise();
-    if (response && response.results) {
-      const selectedResult = response.results.find(
-        (result: any) => result.datetime === selectedDate
-      );
+    try {
+      const response: any = await this.riskAssessment
+        .archiveData()
+        .pipe(first())
+        .toPromise();
+      if (response && response.results) {
+        const selectedResult = response.results.find(
+          (result: any) => result.datetime === selectedDate
+        );
 
-      if (selectedResult && selectedResult.s3_link) {
-        window.open(selectedResult.s3_link, '_blank');
-      } else {
-        console.error('Selected date not found or missing s3_link');
+        if (selectedResult && selectedResult.s3_link) {
+          window.open(selectedResult.s3_link, '_blank');
+        } else {
+          console.error('Selected date not found or missing s3_link');
+        }
       }
+    } catch (error) {
+      console.error('Error fetching archive data:', error);
     }
   }
 
   onDateSelected(selectedDate: string) {
     if (selectedDate !== 'select-date') {
-      this.downloadData(selectedDate);
+      this.downloadData(selectedDate).then(() => {
+        this.showSelect = false;
+      });
     }
   }