added guard, fixed some errors with styling, and added some features

src/app/shell/provider/provider-config/can-leave.guard.ts

@@ -0,0 +1,13 @@
+import { CanDeactivate } from '@angular/router';
+import { Injectable } from '@angular/core';
+import { ProviderConfigComponent } from './provider-config.component';
+
+@Injectable({providedIn: 'root'})
+export class CanDeactivateGuard implements CanDeactivate<ProviderConfigComponent> {
+  canDeactivate(component: ProviderConfigComponent): boolean {
+    if (component.orgFormGroup.dirty || component.addressFormGroup.dirty || component.photoFormGroup.dirty) {
+      return confirm('У вас є не збережені дані, покинути сторінку?');
+    }
+    return true;
+  }
+}

src/app/shell/provider/provider-config/provider-config.component.html

@@ -82,7 +82,7 @@
             </div>
             <div class="web-page">
               <label for="webPageForm">Веб сайт</label>
-              <input type="text" id="webPageForm" formControlName="webPage">
+              <input type="text" id="webPageForm" formControlName="webPage" placeholder="380XXXXXXX">
             </div>
             <div class="facebook">
               <label for="facebook">Facebook</label>
@@ -97,16 +97,13 @@
               <input type="text" id="ownerName" formControlName="ownerName">
             </div>
             <div class="buttons1">
-              <div class="buttons1_reset">
-                <button>СКАСУВАТИ</button>
-              </div>
-              <div class="buttons1_next">
-                <button
-                  mat-button matStepperNext [disabled]="orgFormGroup.valid"
-                  [ngClass]="{'disabled-button':!orgFormGroup.valid}"
-                >ДАЛІ
-                </button>
-              </div>
+              <button class="buttons1_reset" type="button" (click)="formReset()">СКАСУВАТИ</button>
+              <button class="buttons1_next"
+                      type="button"
+                      matStepperNext [disabled]="orgFormGroup.valid"
+                      [ngClass]="{'disabled-button':!orgFormGroup.valid}"
+              >ДАЛІ
+              </button>
             </div>
           </div>
         </form>
@@ -167,9 +164,9 @@
               </div>
             </ng-container>
             <div class="buttons2">
-              <button class="buttons2_back" mat-button matStepperPrevious>НАЗАД</button>
-              <button class="reset">СКАСУВАТИ</button>
-              <button class="buttons2_next" mat-button matStepperNext
+              <button class="buttons2_back" matStepperPrevious>НАЗАД</button>
+              <button type="button" class="buttons2_reset" (click)="formReset()">СКАСУВАТИ</button>
+              <button class="buttons2_next" matStepperNext
                       [ngClass]="{'disabled-button':!addressFormGroup.valid}"
                       [disabled]="addressFormGroup.valid"
               >ДАЛІ
@@ -204,12 +201,14 @@
                 <label for="text-desc">Опис<span class="important">*</span></label>
                 <p>
                   <span
-                    [ngClass]="{'highlight-text': !photoFormGroup.controls['text'].valid && photoFormGroup.controls['text'].touched }"
-                    class="default">{{photoFormGroup.controls['text'].value.length}}</span>/500</p>
+                    [ngClass]="{'highlight-text': !(photoFormGroup.controls['text']).valid && (photoFormGroup.controls['text']).touched }"
+                    class="default">{{(textValue) ? textValue.split('').length : '0'}}</span>/500</p>
               </div>
               <div class="description_form">
                 <textarea name="" id="text-desc" cols="30" rows="10"
-                          placeholder="Додайте опис вашого закладу" formControlName="text"></textarea>
+                          placeholder="Додайте опис вашого закладу"
+                          [(ngModel)]="textValue"
+                          formControlName="text"></textarea>
               </div>
             </div>
             <div class="photo-checkbox">
@@ -219,16 +218,16 @@
               </mat-checkbox>
             </div>
           </div>
+          <div class="buttons3">
+            <button matStepperPrevious class="buttons3_back">НАЗАД</button>
+            <button class="buttons3_reset" (click)="formReset()">СКАСУВАТИ</button>
+            <button matStepperPrevious class="buttons3_reg"
+                    [ngClass]="{'disabled-button':!photoFormGroup.valid}"
+                    [disabled]="photoFormGroup.valid"
+            >ЗАРЕЄСТРУВАТИ
+            </button>
+          </div>
         </form>
-        <div class="buttons3">
-          <button mat-button matStepperPrevious class="buttons3_back">НАЗАД</button>
-          <button mat-button class="reset">СКАСУВАТИ</button>
-          <button mat-button matStepperPrevious class="buttons3_reg"
-                  [ngClass]="{'disabled-button':!photoFormGroup.valid}"
-                  [disabled]="photoFormGroup.valid"
-          >ЗАРЕЄСТРУВАТИ
-          </button>
-        </div>
       </mat-step>
     </mat-horizontal-stepper>
   </div>

src/app/shell/provider/provider-config/provider-config.component.scss

@@ -31,41 +31,42 @@
 }
 
 @mixin primary-button {
-  margin-left: 2rem;
-  width: 100%;
-  max-width: 92px;
   height: 34px;
   background: #3849F9;
   border: 0.063rem solid #3849F9;
   box-sizing: border-box;
   border-radius: 1.25rem;
   font-weight: bold;
   font-size: 0.813rem;
-  line-height: 0.938rem;
   color: #FFFFFF;
+  vertical-align: middle;
+  cursor: pointer;
+  outline: none;
 }
 
 @mixin white-button {
   background: transparent;
   width: 100%;
   max-width: 139px;
   height: 34px;
-  padding: 0.625rem 1.875rem 0.563rem 1.875rem;
+  padding: 0.625rem 1.875rem 0.625rem 1.875rem;
   border: 0.063rem solid #686868;
   box-sizing: border-box;
   border-radius: 1.25rem;
   font-weight: bold;
   font-size: 0.813rem;
-  line-height: 0.938rem;
   text-align: center;
   color: #444444;
+  vertical-align: middle;
+  cursor: pointer;
+  outline: none;
 }
 
 @mixin button-container {
   width: 100%;
   max-width: 410px;
   display: flex;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
   margin-top: 2rem;
 }
@@ -242,6 +243,7 @@ section {
 
       &_button {
         width: 100%;
+        max-width: 95px;
 
         label {
           width: 100%;
@@ -288,7 +290,6 @@ section {
       margin-top: 2.188rem;
 
       &_header {
-
         width: 100%;
         display: flex;
         justify-content: space-between;
@@ -297,6 +298,7 @@ section {
       &_form {
         textarea {
           width: 100%;
+          max-width: 410px;
           height: 238px;
           resize: none;
           border: 0.063rem solid #E3E3E3;
@@ -322,52 +324,71 @@ section {
     }
 
     .buttons1 {
-      @include button-container;
+      width: 100%;
+      max-width: 269px;
+      display: flex;
+      justify-content: space-around;
+      margin: 2rem auto 0;
 
       &_next {
-        button {
-          @include primary-button;
-        }
+        width: 100%;
+        max-width: 92px;
+        @include primary-button;
+        vertical-align: middle;
+        font-size: 0.813rem;
       }
 
       &_reset {
-        button {
-          @include white-button;
-        }
+        @include white-button;
+        vertical-align: middle;
+        font-size: 0.813rem;
       }
     }
 
     .buttons2 {
       @include button-container;
-      justify-content: space-between;
 
-      &_next, &_back {
+      &_next, {
+        width: 100%;
+        max-width: 92px;
         @include primary-button;
-        margin: 0;
+        font-size: 0.813rem;
+
       }
 
-      .reset {
+      &_back {
+        width: 100%;
+        max-width: 105px;
+        @include primary-button;
+        font-size: 0.813rem;
+      }
+
+      &_reset {
         @include white-button;
       }
     }
-    .custom-select{
+
+    .custom-select {
       margin: 0;
       width: 100%;
       position: relative;
+
       input {
         margin-top: 0.5rem;
         @include form-style;
         cursor: pointer;
       }
-      .box{
+
+      .box {
         @include form-style;
         padding: 0;
         border-radius: 0.313rem;
         height: auto;
         position: absolute;
         z-index: 100;
         background: white;
-        &_item{
+
+        &_item {
           padding: 0.563rem 0 0.563rem 1rem;
           width: 100%;
           font-weight: normal;
@@ -377,15 +398,18 @@ section {
           height: 36px;
           cursor: pointer;
         }
-        &_item:hover{
+
+        &_item:hover {
           background: #F8F8F8;
         }
       }
     }
+
     .org-full-name, .org-short-name, .ceo-name, .id-code, .phone, .email,
     .web-page, .facebook, .instagram, .owner-name,
     .region, .city, .district, .street, .building {
       margin-top: 1rem;
+
       input {
         margin-top: 0.438rem;
         @include form-style;
@@ -395,14 +419,18 @@ section {
 
   .buttons3 {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     margin-top: 3rem;
 
     &_back {
+      width: 100%;
+      max-width: 105px;
       @include primary-button;
     }
 
-    .reset {
+    &_reset {
+      width: 100%;
+      max-width: 139px;
       @include white-button;
     }
 

src/app/shell/provider/provider-config/provider-config.component.ts

@@ -16,6 +16,7 @@ export class ProviderConfigComponent implements OnInit {
   organizationTypeList = ['ФОП', 'Громадська організація', 'ТОВ', 'ПП', 'Заклад освіти', 'Інше'];
   valueOwnership = false;
   valueOrgType = false;
+  textValue = '';
 
   constructor() {
   }
@@ -29,7 +30,7 @@ export class ProviderConfigComponent implements OnInit {
       ceoName: new FormControl(null, [Validators.required]),
       ceoBirthday: new FormControl(null, Validators.required),
       personalId: new FormControl(null, [Validators.required, Validators.maxLength(10), Validators.maxLength(8), Validators.pattern('^[0-9]*$')]),
-      phone: new FormControl(380, [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
+      phone: new FormControl(null, [Validators.required, Validators.maxLength(10), Validators.minLength(10)]),
       email: new FormControl(null, [Validators.required, Validators.email]),
       webPage: new FormControl(null),
       facebook: new FormControl(null),
@@ -101,5 +102,18 @@ export class ProviderConfigComponent implements OnInit {
         break;
     }
   }
+
+  formReset(): void {
+    if (this.orgFormGroup.dirty || this.addressFormGroup.dirty || this.photoFormGroup.dirty) {
+      const value = confirm('Скасувати реєстрацію нового закладу?');
+      if (value === true) {
+        this.orgFormGroup.reset();
+        this.addressFormGroup.reset();
+        this.photoFormGroup.reset();
+        this.selectedLogos = [];
+      }
+    }
+  }
 }
 
+

src/app/shell/provider/provider-routing.module.ts

@@ -4,20 +4,22 @@ import { PersonalCabinetComponent } from './personal-cabinet/personal-cabinet.co
 
 import { ProviderActivitiesComponent } from './provider-activities/provider-activities.component';
 import { ProviderConfigComponent } from './provider-config/provider-config.component';
+import { CanDeactivateGuard } from './provider-config/can-leave.guard';
 
 const routes: Routes = [
-  { path: 'cabinet', component: PersonalCabinetComponent, 
+  { path: 'cabinet', component: PersonalCabinetComponent,
   children: [
     {
-      path: 'activities', 
-      component: ProviderActivitiesComponent, 
+      path: 'activities',
+      component: ProviderActivitiesComponent,
     },
     {
-      path: 'config', 
-      component: ProviderConfigComponent, 
+      path: 'config',
+      component: ProviderConfigComponent,
+      canDeactivate: [CanDeactivateGuard]
     },
   ]
- } 
+ }
 ];
 
 @NgModule({