feat(front-end): improve the UI of the date selection modal and the s…

…ervice request component
CarlosPavajeau · Apr 13, 2021 · e4c00b4 · e4c00b4
1 parent 362c4d9
commit e4c00b4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 29 deletions.
diff --git a/.../app/modules/service-requests/components/service-requests/service-requests.component.html b/.../app/modules/service-requests/components/service-requests/service-requests.component.html
@@ -16,7 +16,6 @@ <h4 class="text-center mt-4 empty-list-text">
     <ng-template [ngSwitchCase]="ObsStatus.Success">
       <div>
         <h1 class="text-center">Solicitudes de servicio</h1>
-        <br />
       </div>
       <mat-divider></mat-divider>
       <div class="pt-3">
@@ -33,25 +32,27 @@ <h4 class="text-center empty-list-text">
           </div>
         </div>
         <mat-accordion *ngIf="serviceRequests?.length > 0">
-          <h3>
-            Están pendientes {{ serviceRequests?.length }} solicitudes de
-            servicio
-          </h3>
           <mat-expansion-panel *ngFor="let serviceRequest of serviceRequests">
             <mat-expansion-panel-header>
-              <mat-panel-title
-                >Solicitud de servicio N°
-                {{ serviceRequest.code }}</mat-panel-title
-              >
-              <mat-panel-description
-                >Está solicitud fue hecha para el dia y hora
-                {{ serviceRequest.date | date: "yyyy/MM/dd HH:mm" }}
+              <mat-panel-title>
+                <span>
+                   Solicitud de servicio N° {{ serviceRequest.code }}
+                </span>
+              </mat-panel-title>
+              <mat-panel-description>
+                <div class="icon-text-container">
+                  <mat-icon [matTooltip]="'Fecha de aplicación'">
+                    today
+                  </mat-icon>
+                  {{ serviceRequest.date | date: "MMMM d, y, h:mm a" }}
+                </div>
                 <mat-icon
-                  color="warn"
+                  color="primary"
                   [matTooltip]="'Click para ver más información'"
                   [matTooltipShowDelay]="300"
                   [matTooltipPosition]="'above'"
-                  >info</mat-icon
+                >info
+                </mat-icon
                 >
               </mat-panel-description>
             </mat-expansion-panel-header>
@@ -60,20 +61,21 @@ <h4>
               identificado con C.C.
               <strong>{{ serviceRequest.clientId }}</strong>
             </h4>
+            <span>Con una periodicidad {{ serviceRequest.periodicity | periodicity }}.</span>
             <mat-action-row>
+              <a
+                mat-button
+                class="royal_azure"
+                routerLink="/service_requests/process/{{ serviceRequest.code }}">
+                Revisar solicitud
+              </a>
               <button
                 mat-button
                 color="warn"
                 (click)="rejectServiceRequest(serviceRequest)"
               >
-                Rechazar
+                Rechazar solicitud
               </button>
-              <a
-                mat-button
-                class="royal_azure"
-                routerLink="/service_requests/process/{{ serviceRequest.code }}"
-                >Revisar solicitud</a
-              >
             </mat-action-row>
           </mat-expansion-panel>
         </mat-accordion>

diff --git a/...en/ClientApp/src/app/shared/components/select-date-modal/select-date-modal.component.html b/...en/ClientApp/src/app/shared/components/select-date-modal/select-date-modal.component.html
@@ -1,5 +1,5 @@
 <h1 mat-dialog-title>Elija una nueva fecha y hora de aplicación</h1>
-<div mat-dialog-content [formGroup]="dateForm">
+<div mat-dialog-content [formGroup]="dateForm" class="mt-2">
   <div class="form-row">
     <div class="form-col">
       <div class="form-element">
@@ -43,13 +43,13 @@ <h1 mat-dialog-title>Elija una nueva fecha y hora de aplicación</h1>
     </div>
   </div>
 </div>
-<div mat-dialog-actions>
-  <div class="pt-4">
-    <button mat-stroked-button color="warn" (click)="onCancel()">
-      Cancelar
-    </button>
+<mat-dialog-actions align="end">
+  <div class="pt-4 mt-2">
     <button mat-raised-button class="royal_azure" (click)="saveDate()">
-      Cambiar fecha
+      Cambiar fecha de solicitud
+    </button>
+    <button mat-flat-button (click)="onCancel()">
+      Mantener fecha de solicitud
     </button>
   </div>
-</div>
+</mat-dialog-actions>