added registration-provider comp (#74)

src/app/shared/material/material.module.ts

@@ -1,10 +1,18 @@
-import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule } from '@angular/material/dialog';
+import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatSelectModule} from '@angular/material/select';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 
 const materialComponent = [
   MatButtonModule,
   MatDialogModule,
+  MatSelectModule,
+  MatCheckboxModule,
+  MatFormFieldModule,
+  MatInputModule
 ];
 
 @NgModule({
@@ -13,4 +21,5 @@ const materialComponent = [
     materialComponent
   ],
 })
-export class MaterialModule { }
+export class MaterialModule {
+}

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

@@ -0,0 +1,82 @@
+<div class="container">
+  <h2>реєстрація нового надавача послуг</h2>
+  <form>
+    <mat-form-field appearance="fill">
+      <mat-label>Тип организациїї</mat-label>
+      <mat-select>
+        <mat-option value="option">ФОП</mat-option>
+        <mat-option value="option">Громадська організація</mat-option>
+        <mat-option value="option">ТОВ</mat-option>
+        <mat-option value="option">ПП</mat-option>
+        <mat-option value="option">Заклад освіти</mat-option>
+        <mat-option value="option">Інше</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field appearance="legacy">
+      <mat-label>Назва/ПІБ(для ФОП)</mat-label>
+      <input matInput placeholder="Іванов/ЦТДЮ/Освіта">
+    </mat-form-field>
+    <mat-form-field appearance="legacy">
+      <mat-label>Назва/ПІБ(для ФОП)</mat-label>
+      <input matInput placeholder="Іванов/ЦТДЮ/Освіта">
+    </mat-form-field>
+    <mat-form-field appearance="legacy">
+      <mat-label>Телефон</mat-label>
+      <input matInput placeholder="Іванов/ЦТДЮ/Освіта" value="+380">
+    </mat-form-field>
+    <mat-form-field appearance="legacy" class="MatFormFieldControl">
+      <mat-label>Телефон</mat-label>
+      <input matInput placeholder="Іванов/ЦТДЮ/Освіта" value="+380">
+    </mat-form-field>
+    <mat-form-field appearance="legacy" class="MatFormFieldControl">
+      <mat-label>Email</mat-label>
+      <input matInput placeholder="">
+    </mat-form-field>
+    <mat-form-field appearance="legacy" class="MatFormFieldControl">
+      <mat-label>Веб сайт</mat-label>
+      <input matInput placeholder="">
+    </mat-form-field>
+    <mat-form-field appearance="legacy" class="MatFormFieldControl">
+      <mat-label>facebook</mat-label>
+      <input matInput placeholder="">
+    </mat-form-field>
+    <mat-form-field appearance="legacy" class="MatFormFieldControl">
+      <mat-label>Instagram</mat-label>
+      <input matInput placeholder="">
+    </mat-form-field>
+    <hr>
+    <h2>Опис</h2>
+    <mat-form-field appearance="legacy" class="MatFormFieldControl">
+      <textarea matInput placeholder="" cols="30" rows="10">
+       </textarea>
+    </mat-form-field>
+    <hr>
+    <h2>Юридична інформація</h2>
+    <mat-form-field appearance="legacy" class="MatFormFieldControl">
+      <mat-label>ЄДРПОУ/ІПН(Серія та номер паспорту якщо видсутній за религийнімі переконанямі</mat-label>
+      <input matInput placeholder="">
+    </mat-form-field>
+    <mat-form-field appearance="legacy" class="MatFormFieldControl">
+      <mat-label>Логін</mat-label>
+      <input matInput placeholder="">
+    </mat-form-field>
+    <mat-form-field appearance="legacy" class="MatFormFieldControl">
+      <mat-label>Пароль</mat-label>
+      <input matInput placeholder="">
+    </mat-form-field>
+    <div class="checkbox">
+      <mat-checkbox>
+      </mat-checkbox>
+      <mat-label>Даю згоду на обробку персональних даннних</mat-label>
+    </div>
+    <div class="checkbox">
+      <mat-checkbox>
+      </mat-checkbox>
+      <mat-label>я не робот</mat-label>
+    </div>
+    <div class="reg-section">
+      <button mat-raised-button color="warn">Відмініти</button>
+      <button mat-raised-button color="primary">зареєструватися</button>
+    </div>
+  </form>
+</div>

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

@@ -0,0 +1,17 @@
+
+form{
+  display: flex;
+  flex-direction: column;
+  .checkbox {
+    display: flex;
+    justify-content: flex-start;
+  }
+  .reg-section{
+    padding: 40px;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+h2{
+  margin: 0 auto;
+}

src/app/shell/provider-registration/provider-registration.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProviderRegistrationComponent } from './provider-registration.component';
+
+describe('ProviderRegistrationComponent', () => {
+  let component: ProviderRegistrationComponent;
+  let fixture: ComponentFixture<ProviderRegistrationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProviderRegistrationComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProviderRegistrationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-provider-registration',
+  templateUrl: './provider-registration.component.html',
+  styleUrls: ['./provider-registration.component.scss']
+})
+export class ProviderRegistrationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/shell/provider/provider.guard.ts

@@ -1,19 +1,20 @@
-import { Injectable } from '@angular/core';
-import { CanLoad, Route, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
-import { Observable } from 'rxjs';
-import { Store } from '@ngxs/store';
-import { UserRegistrationState } from '../../shared/store/user-registration.state';
+import {Injectable} from '@angular/core';
+import {CanLoad, Route, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree} from '@angular/router';
+import {Observable} from 'rxjs';
+import {Store} from '@ngxs/store';
+import {UserRegistrationState} from '../../shared/store/user-registration.state';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ProviderGuard implements CanLoad {
-  constructor(public store: Store) {}
+  constructor(public store: Store) {
+  }
 
   canLoad(
     route: Route,
     segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
-      const role=this.store.selectSnapshot<string>(UserRegistrationState.role);
-      return role==='organization';
+    const role = this.store.selectSnapshot<string>(UserRegistrationState.role);
+    return role === 'organization';
   }
 }

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

@@ -1,19 +1,28 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { MainComponent } from './main/main.component';
-import { ResultComponent } from './main/result/result.component';
-import { ProviderGuard } from './provider/provider.guard';
-import { ParentGuard } from './parent/parent.guard';
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+import {MainComponent} from './main/main.component';
+import {ResultComponent} from './main/result/result.component';
+import {ProviderRegistrationComponent} from './provider-registration/provider-registration.component';
+import {ProviderGuard} from './provider/provider.guard';
+import {ParentGuard} from './parent/parent.guard';
 
 const routes: Routes = [
-  { path: '', component: MainComponent },
-  { path: 'result', component: ResultComponent },
-  { path: 'provider', loadChildren: () => import('./provider/provider.module').then(m => m.ProviderModule), canLoad: [ProviderGuard] },
-  { path: 'parent', loadChildren: () => import('./parent/parent.module').then(m => m.ParentModule), canLoad: [ParentGuard] }
+  {path: '', component: MainComponent},
+  {path: 'result', component: ResultComponent},
+  {
+    path: 'provider', loadChildren: () => import('./provider/provider.module')
+      .then(m => m.ProviderModule), canLoad: [ProviderGuard], component: ProviderRegistrationComponent
+  },
+  {
+    path: 'parent',
+    loadChildren: () => import('./parent/parent.module').then(m => m.ParentModule),
+    canLoad: [ParentGuard]
+  }
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class ShellRoutingModule { }
+export class ShellRoutingModule {
+}

src/app/shell/shell.module.ts

@@ -22,14 +22,16 @@ import { DigitOnlyDirective } from '../shared/directives/digit-only.directive';
 import { CityFilterComponent } from './main/filters-list/city-filter/city-filter.component';
 import { HttpClientModule } from '@angular/common/http';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input'
+import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { OrderingComponent } from './main/result/organization-cards-list/ordering/ordering.component';
 import { MatChipsModule } from '@angular/material/chips';
 import { OrganizationCardComponent } from '../shared/organization-card/organization-card.component';
 import { ParentGuard } from './parent/parent.guard';
 import { ProviderGuard } from './provider/provider.guard';
+import { ProviderRegistrationComponent } from './provider-registration/provider-registration.component';
+import {MaterialModule} from '../shared/material/material.module';
 
 
 @NgModule({
@@ -46,7 +48,8 @@ import { ProviderGuard } from './provider/provider.guard';
     ResultComponent,
     OrganizationCardsListComponent,
     OrderingComponent,
-    OrganizationCardComponent
+    OrganizationCardComponent,
+    ProviderRegistrationComponent
   ],
   imports: [
     CommonModule,
@@ -62,11 +65,13 @@ import { ProviderGuard } from './provider/provider.guard';
     HttpClientModule,
     MatButtonToggleModule,
     MatChipsModule,
-    LeafletModule
+    LeafletModule,
+    MaterialModule
   ],
   providers: [
     ParentGuard,
-    ProviderGuard
+    ProviderGuard,
+    LeafletModule,
   ]
 })
 export class ShellModule { }