Development: Refactor application detail components and update rating grid styling (#2615)

Author: Cathy0123456789

src/main/webapp/app/application/application-detail-for-applicant/application-detail-for-applicant.component.html

@@ -285,7 +285,7 @@ <h3 class="section-card-title" jhiTranslate="entity.application_detail.reference
               />
             }
           </div>
-          <div class="section-card-body ml-2">
+          <div class="section-card-body">
             <p class="flex mb-3">
               <fa-icon [icon]="referenceLettersConfidential() ? 'lock' : 'circle-info'" class="text-primary mr-1 w-5 shrink-0" />
               <span
@@ -308,10 +308,10 @@ <h3 class="section-card-title" jhiTranslate="entity.application_detail.reference
                 (referencesChanged)="onReferencesChanged($event)"
               />
             } @else {
-              <ul class="list-disc list-inside marker:text-primary">
+              <ul class="list-disc marker:text-primary ml-5">
                 @for (reference of references(); track reference.referenceRequestId) {
                   <li class="py-1 font-medium items-center gap-2">
-                    <span>
+                    <span class="ml-1">
                       {{ reference.title }} {{ reference.firstName }} {{ reference.lastName }}
                       <span class="font-normal text-text-secondary ml-1"> ({{ reference.email }}) </span>
                     </span>

src/main/webapp/app/evaluation/application-detail/application-detail.component.html

@@ -211,7 +211,7 @@ <h1>
         </div>
       </div>
       <div class="w-full">
-        <div class="grid xl:gap-16 grid-cols-1 xl:grid-cols-[7fr_3fr]">
+        <div class="grid xl:gap-16 grid-cols-1 xl:grid-cols-[14fr_7fr]">
           <div>
             <!-- Education -->
             <jhi-section titleKey="evaluation.education.title" icon="graduation-cap">
@@ -296,22 +296,36 @@ <h1>
             @if (currentReferenceRequests().length > 0) {
               <jhi-section titleKey="evaluation.details.referenceLetterStatus" icon="envelope">
                 <p class="flex text-sm text-text-secondary mb-2 items-start">
-                  <fa-icon [icon]="referenceLettersConfidential() ? 'lock' : 'circle-info'" class="text-primary w-5 shrink-0 -ml-2 mr-1" />
+                  <fa-icon
+                    [icon]="referenceLettersConfidential() ? 'lock' : 'circle-info'"
+                    class="text-primary w-5 shrink-0 -ml-2.75 mr-1"
+                  />
                   <span
                     [jhiTranslate]="
                       referenceLettersConfidential() ? 'evaluation.details.referenceConfidential' : 'evaluation.details.referenceShared'
                     "
                   ></span>
                 </p>
-                <ul class="list-disc list-inside marker:text-primary text-sm">
+                <ul class="list-disc marker:text-primary text-sm ml-3">
                   @for (reference of currentReferenceRequests(); track reference.referenceRequestId) {
                     <li class="py-1">
-                      <span class="font-medium">{{ reference.title }} {{ reference.firstName }} {{ reference.lastName }}</span>
+                      <span class="font-medium ml-1">{{ reference.title }} {{ reference.firstName }} {{ reference.lastName }}</span>
                       <span class="font-normal text-text-secondary text-sm ml-1"> ({{ reference.email }}) </span>
                       @if (reference.status === 'SUBMITTED') {
                         <span class="text-positive-default ml-1" jhiTranslate="evaluation.details.referenceStatus.submitted"
                           >Submitted</span
                         >
+                        @if (reference.documentId) {
+                          <jhi-button
+                            class="inline-flex align-middle"
+                            classStyling="!w-8"
+                            icon="eye"
+                            variant="text"
+                            size="xs"
+                            ariaLabel="evaluation.details.viewReferenceLetter"
+                            (click)="docSection.openDocument(reference.documentId)"
+                          />
+                        }
                       } @else if (reference.status === 'EXPIRED') {
                         <span class="text-negative-default ml-1" jhiTranslate="evaluation.details.referenceStatus.expired">Expired</span>
                       } @else if (reference.status === 'DECLINED') {

src/main/webapp/app/shared/components/atoms/rating-grid/rating-grid.component.html

@@ -3,7 +3,7 @@
   <div class="hidden lg:grid lg:items-end lg:gap-x-2 lg:px-2 lg:pb-2" [style.grid-template-columns]="gridTemplateColumns()">
     <div></div>
     @for (option of options(); track option.value) {
-      <div class="px-1 text-center text-xs font-medium break-words hyphens-auto text-text-secondary">
+      <div class="px-1 text-center text-xs font-medium break-words text-text-secondary">
         @if (shouldTranslate()) {
           <span [jhiTranslate]="option.name"></span>
         } @else {

src/main/webapp/app/shared/components/organisms/document-section/document-section.html

@@ -9,7 +9,7 @@
   @if (extraDocuments().length > 0) {
     <div class="mt-8 w-full">
       <p class="text-sm font-semibold mb-2" jhiTranslate="evaluation.details.furtherDocuments"></p>
-      <ul class="list-disc list-inside text-sm text-text-secondary">
+      <ul class="list-disc text-sm text-text-secondary ml-5">
         @for (document of extraDocuments(); track document.document.id) {
           <li>
             @if (document.shouldTranslateLabel) {
@@ -28,4 +28,4 @@
   </div>
 }
 
-<jhi-document-dialog [(isOpen)]="dialogVisible" [documentHolders]="allDocuments()" />
+<jhi-document-dialog [(isOpen)]="dialogVisible" [(selectedId)]="selectedDocumentId" [documentHolders]="allDocuments()" />

src/main/webapp/app/shared/components/organisms/document-section/document-section.ts

@@ -30,6 +30,9 @@ export class DocumentSection {
 
   dialogVisible = model<boolean>(false);
 
+  /** Id of the document the dialog should focus when it opens. */
+  selectedDocumentId = signal<string | undefined>(undefined);
+
   documentsCount = signal<number>(0);
 
   readonly NUMBER_OF_DOCUMENTS = 3;
@@ -87,6 +90,18 @@ export class DocumentSection {
     this.extraDocuments.set(result.slice(this.NUMBER_OF_DOCUMENTS));
   });
 
+  /**
+   * Opens the document dialog with the given document selected.
+   * @param documentId the id of the document to display; ignored when undefined
+   */
+  openDocument(documentId: string | undefined): void {
+    if (documentId === undefined) {
+      return;
+    }
+    this.selectedDocumentId.set(documentId);
+    this.dialogVisible.set(true);
+  }
+
   async downloadAllDocuments(): Promise<void> {
     const applicationId = this.applicationId();
     if (applicationId === undefined) {