Bugfix/table cell date and address fix (#3930)

Author: witolDark

src/app/shared/services/mat-snack-bar/mat-snack-bar.service.ts

@@ -38,6 +38,7 @@ export class MatSnackBarService {
     successConfirmEmail: { classname: SnackbarClassName.success, key: 'snack-bar.success.confirm-email' },
     successConfirmSaveOrder: { classname: SnackbarClassName.successUbs, key: 'snack-bar.saved-order' },
     successConfirmUpdateOrder: { classname: SnackbarClassName.successUbs, key: 'snack-bar.update-order' },
+    errorOrderUnauthorized: { classname: SnackbarClassName.error, key: 'snack-bar.error.order-not-authorized' },
     successUpdateUbsData: { classname: SnackbarClassName.successUbs, key: 'snack-bar.save-employee-permissons' },
     cafeNotificationsExists: { classname: SnackbarClassName.error, key: 'update-cafe.notifications.exists' },
     cafeNotificationsCloseTime: { classname: SnackbarClassName.error, key: 'update-cafe.notifications.closeTime' },
@@ -50,7 +51,7 @@ export class MatSnackBarService {
     habitDidNotGiveUp: { classname: SnackbarClassName.success, key: 'user.habit.all-habits.habit-did-not-give-up' },
     habitUpdated: { classname: SnackbarClassName.success, key: 'user.habit.all-habits.new-habit-updated' },
     habitAcquired: { classname: SnackbarClassName.success, key: 'user.habit.all-habits.habit-acquired' },
-    errorMessage: { classname: SnackbarClassName.error },
+    errorMessage: { classname: SnackbarClassName.error, key: 'snack-bar.error.error' },
     sendNewLetter: { classname: SnackbarClassName.error, key: 'snack-bar.error.restore-password-again' },
     sendNewUnblockLetter: { classname: SnackbarClassName.error, key: 'snack-bar.error.unblock-account-again' },
     changesSaved: { classname: SnackbarClassName.success, key: 'user.edit-profile.profile-changes-saved' },

src/app/store/actions/order.actions.ts

@@ -2,6 +2,7 @@ import { createAction, props } from '@ngrx/store';
 import { IUserOrderInfo } from '@ubs/ubs-user/components/ubs-user-orders-list/models/UserOrder.interface';
 import { ActiveTariffInfo, Address, AddressData, CourierLocations, OrderDetails, PersonalData } from 'src/app/ubs/ubs/models/ubs.interface';
 import { CCertificate } from 'src/app/ubs/ubs/models/ubs.model';
+import { HttpErrorResponse } from '@angular/common/http';
 
 export enum OrderActions {
   SetCurrentStep = '[Order] Set Current Step',
@@ -37,6 +38,7 @@ export enum OrderActions {
 
   GetExistingOrderDetails = '[Order] Get Existing Order Details',
   GetExistingOrderDetailsSuccess = '[Order] Get Existing Order Details Success',
+  GetExistingOrderDetailsFail = '[Order] Get Existing Order Details Fail',
 
   GetExistingOrderTariff = '[Order] Get Existing Order Tariff',
   GetExistingOrderTariffSuccess = '[Order] Get Existing Order Tariff Success',
@@ -109,6 +111,7 @@ export const GetExistingOrderDetailsSuccess = createAction(
   OrderActions.GetExistingOrderDetailsSuccess,
   props<{ orderDetails: OrderDetails }>()
 );
+export const GetExistingOrderDetailsFail = createAction(OrderActions.GetExistingOrderDetailsFail, props<{ error: HttpErrorResponse }>());
 
 export const GetExistingOrderTariff = createAction(OrderActions.GetExistingOrderTariff, props<{ orderId: number }>());
 export const GetExistingOrderTariffSuccess = createAction(

src/app/store/effects/order.effects.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { catchError, map, mergeMap, tap } from 'rxjs/operators';
-import { EMPTY, of } from 'rxjs';
+import { EMPTY, filter, of } from 'rxjs';
 import {
   CreateAddress,
   CreateAddressFail,
@@ -14,6 +14,7 @@ import {
   GetCourierLocationsSuccess,
   GetExistingOrderDetails,
   GetExistingOrderDetailsSuccess,
+  GetExistingOrderDetailsFail,
   GetExistingOrderInfo,
   GetExistingOrderInfoSuccess,
   GetExistingOrderTariff,
@@ -35,14 +36,17 @@ import { OrderService } from 'src/app/ubs/ubs/services/order.service';
 import { LocalStorageService } from 'src/app/shared/services/localstorage/local-storage.service';
 import { Address, AddressData } from 'src/app/ubs/ubs/models/ubs.interface';
 import { MatSnackBarService } from '@global-service/mat-snack-bar/mat-snack-bar.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Router } from '@angular/router';
 
 @Injectable()
 export class OrderEffects {
   constructor(
     private readonly actions: Actions,
     private readonly orderService: OrderService,
     private readonly localStorageService: LocalStorageService,
-    private readonly snackBar: MatSnackBarService
+    private readonly snackBar: MatSnackBarService,
+    private readonly router: Router
   ) {}
 
   getOrderDetails = createEffect(() =>
@@ -64,12 +68,25 @@ export class OrderEffects {
       mergeMap((action: { orderId: number }) =>
         this.orderService.getExistingOrderDetails(action.orderId).pipe(
           map((orderDetails) => GetExistingOrderDetailsSuccess({ orderDetails })),
-          catchError(() => EMPTY)
+          catchError((error: HttpErrorResponse) => of(GetExistingOrderDetailsFail({ error })))
         )
       )
     )
   );
 
+  getExistingOrderDetailsFail = createEffect(
+    () =>
+      this.actions.pipe(
+        ofType(GetExistingOrderDetailsFail),
+        filter(({ error }) => error.status === 403),
+        tap(() => {
+          this.snackBar.openSnackBar('errorOrderUnauthorized');
+          this.router.navigate(['/ubs/user/orders']);
+        })
+      ),
+    { dispatch: false }
+  );
+
   getExistingOrderTariff = createEffect(() =>
     this.actions.pipe(
       ofType(GetExistingOrderTariff),

src/app/store/functions.ts

@@ -1,10 +1,10 @@
 export function transformAddress(input: any) {
   return {
-    region: { uk: input.region, en: input.regionEn },
-    city: { uk: input.city, en: input.cityEn },
-    district: { uk: input.district, en: input.districtEn },
+    region: { uk: input.regionUk, en: input.regionEn },
+    city: { uk: input.cityUk, en: input.cityEn },
+    district: { uk: input.districtUk, en: input.districtEn },
     address: {
-      uk: `${input.street} ${input.houseNumber}, корп.- ${input.houseCorpus || ''}, п.${input.entranceNumber}`,
+      uk: `${input.streetUk} ${input.houseNumber}, корп.- ${input.houseCorpus || ''}, п.${input.entranceNumber}`,
       en: `${input.streetEn} ${input.houseNumber}, b.- ${input.houseCorpus || ''}, e.${input.entranceNumber}`
     },
     commentToAddressForClient: input.addressComment || ''

src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-date/table-cell-date.component.html

@@ -1,14 +1,18 @@
-<div *ngIf="!isEditable || uneditableStatus" class="date_to_show">
-  <!-- Clear when back send normal value -->
-  <span *ngIf="date === '-'">{{ date }}</span>
-  <span *ngIf="date !== '-'">{{ date | date: 'dd.MM.y' }}</span>
-  <button *ngIf="!isEditable && !uneditableStatus" class="pencil" (click)="edit()" (keydown)="edit($event)"></button>
-</div>
-
-<div class="editable-date" *ngIf="isEditable && !uneditableStatus">
-  <mat-form-field appearance="fill" class="date-form-field">
-    <input matInput [matDatepicker]="picker1" [min]="current" [value]="date" (dateChange)="changeData($event)" id="date-input" />
-    <mat-datepicker-toggle matSuffix [for]="picker1" color="accent"></mat-datepicker-toggle>
-    <mat-datepicker #picker1></mat-datepicker>
-  </mat-form-field>
-</div>
+<mat-form-field appearance="fill" class="date-form-field">
+  <input
+    matInput
+    [matDatepicker]="picker1"
+    [min]="current"
+    [value]="date"
+    [disabled]="uneditableStatus"
+    (dateChange)="changeData($event)"
+    id="date-input"
+  />
+  <mat-datepicker-toggle
+    matSuffix
+    (keydown)="edit(picker1, $event)"
+    [disabled]="uneditableStatus"
+    (click)="edit(picker1)"
+  ></mat-datepicker-toggle>
+  <mat-datepicker #picker1></mat-datepicker>
+</mat-form-field>

src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-date/table-cell-date.component.scss

@@ -16,25 +16,51 @@
   top: -10px;
 }
 
-::ng-deep .mat-datepicker-content.mat-accent .mat-calendar-body-selected {
+:host ::ng-deep .mat-mdc-form-field {
+  height: 100%;
+
+  .mat-mdc-text-field-wrapper {
+    background-color: transparent;
+    border-radius: 0;
+
+    .mat-mdc-form-field-flex {
+      height: 100%;
+      align-items: center;
+
+      .mat-mdc-form-field-infix {
+        min-height: unset;
+      }
+    }
+
+    .mdc-line-ripple {
+      display: none;
+    }
+  }
+
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+}
+
+:host ::ng-deep .mat-datepicker-content.mat-accent .mat-calendar-body-selected {
   background-color: var(--ubs-button-light-green);
 }
 
-::ng-deep .mat-datepicker-toggle-active.mat-accent {
+:host ::ng-deep .mat-datepicker-toggle-active.mat-accent {
   color: var(--ubs-button-light-green);
 }
 
-::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
+:host ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
   background-color: white;
 }
 
-::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input {
+:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input {
   font-size: 12px;
   font-weight: 500;
   padding-left: 5px;
 }
 
-::ng-deep .mdc-text-field--no-label:not(.mdc-text-field--outlined, .mdc-text-field--textarea) .mat-mdc-form-field-infix {
+:host ::ng-deep .mdc-text-field--no-label:not(.mdc-text-field--outlined, .mdc-text-field--textarea) .mat-mdc-form-field-infix {
   padding-top: 8px;
 }