workshop fix

src/app/shared/services/provider-activities/provider-activities.service.ts

@@ -14,7 +14,7 @@ export class ProviderActivitiesService {
     return this.http.get<Workshop[]>('/Workshop/Get');
   }
 
-  createWorkshop(workshop): void {
-    this.http.post('/Workshop/Create', workshop).subscribe(workshop => console.log(workshop));
+  createWorkshop(workshop): Observable<any> {
+    return this.http.post('/Workshop/Create', workshop);
   }
 }

src/app/shared/store/provider.actions.ts

@@ -1,4 +1,4 @@
-import { FormArray, FormGroup } from "@angular/forms";
+import { Workshop } from "../models/workshop.model";
 export class GetActivitiesCards {
   static readonly type = '[provider] gets activities cards';
   constructor() { }
@@ -9,13 +9,13 @@ export class GetApplications {
 }
 export class CreateWorkshop {
   static readonly type = '[provider] create Workshop';
-  constructor(public about: FormGroup, public description: FormGroup, public address: FormGroup, public teachers: FormArray) { }
+  constructor(public payload: Workshop) { }
 }
-export class CreateAddress {
-  static readonly type = '[provider] create Address';
-  constructor(public payload: FormGroup) { }
-}
-export class CreateTeachers {
-  static readonly type = '[provider] create Teachers';
-  constructor(public payload: FormArray) { }
+export class OnCreateWorkshopFail {
+  static readonly type = '[provider] create Workshop failed';
+  constructor(public payload: Error) { }
 }
+export class OnCreateWorkshopSuccess {
+  static readonly type = '[provider] create Workshop failed';
+  constructor() { }
+}

src/app/shared/store/provider.state.ts

@@ -1,23 +1,27 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { State, Action, StateContext, Selector } from '@ngxs/store';
+import { of, throwError } from 'rxjs';
+import { catchError, tap } from 'rxjs/operators';
 import { Address } from '../models/address.model';
 import { Application } from '../models/application.model';
 import { Teacher } from '../models/teacher.model';
 import { Workshop } from '../models/workshop.model';
 import { ApplicationsService } from '../services/applications/applications.service';
 import { ChildCardService } from '../services/child-cards/child-cards.service';
 import { ProviderActivitiesService } from '../services/provider-activities/provider-activities.service';
-import { CreateAddress, CreateTeachers, CreateWorkshop, GetActivitiesCards, GetApplications } from './provider.actions';
+import { CreateWorkshop, GetActivitiesCards, GetApplications, OnCreateWorkshopFail, OnCreateWorkshopSuccess } from './provider.actions';
 
 export interface ProviderStateModel {
+  loading: boolean;
   activitiesList: Workshop[];
   applicationsList: Application[];
 }
 
 @State<ProviderStateModel>({
   name: 'provider',
   defaults: {
+    loading: false,
     activitiesList: Workshop[''],
     applicationsList: Application['']
   }
@@ -56,30 +60,32 @@ export class ProviderState {
   }
 
   @Action(CreateWorkshop)
-  createWorkshop({ dispatch }: StateContext<ProviderStateModel>, { about, description, address, teachers }: CreateWorkshop): void {
-    let addr, tchrs;
-    dispatch(new CreateAddress(address)).subscribe(data => addr = data);
-    dispatch(new CreateTeachers(teachers)).subscribe(data => tchrs = data);
-
-    const workshop = new Workshop(about.value, description.value, addr, tchrs);
-    console.log(workshop)
-
-    this.providerActivititesService.createWorkshop(workshop);
+  createWorkshop({ dispatch, patchState }: StateContext<ProviderStateModel>, { payload }: CreateWorkshop): void {
+    patchState({ loading: true })
+    this.providerActivititesService
+      .createWorkshop(payload)
+      .pipe(
+        catchError(err => dispatch(new OnCreateWorkshopFail(err)))
+      )
+      .subscribe(
+        res => {
+          console.log('HTTP Success', res);
+          dispatch(new OnCreateWorkshopSuccess())
+        },
+        err => console.log('HTTP Error', err),
+        () => console.log('HTTP request completed.')
+      );
   }
-
-  @Action(CreateAddress)
-  createAddress({ }: StateContext<ProviderStateModel>, { payload }: CreateAddress): Address {
-    return new Address(payload.value);
+  @Action(OnCreateWorkshopFail)
+  onCreateWorkshopFail({ patchState }: StateContext<ProviderStateModel>, { payload }: OnCreateWorkshopFail): void {
+    patchState({ loading: false })
+    console.log('Workshop creation is failed', payload);
+    throwError(payload);
   }
-
-  @Action(CreateTeachers)
-  createTeachers({ }: StateContext<ProviderStateModel>, { payload }: CreateTeachers): Teacher[] {
-    const teachers: Teacher[] = [];
-    for (let i = 0; i < payload.controls.length; i++) {
-      let teacher: Teacher = new Teacher(payload.controls[i].value);
-      teachers.push(teacher)
-    }
-    return teachers;
+  @Action(OnCreateWorkshopSuccess)
+  onCreateWorkshopSuccess({ patchState }: StateContext<ProviderStateModel>, { }: OnCreateWorkshopSuccess): void {
+    patchState({ loading: false })
+    console.log('Workshop created');
   }
 
 

src/app/shell/provider/personal-cabinet/personal-cabinet.component.html

@@ -4,9 +4,8 @@ <h1 class="title">КАБІНЕТ КОРИСТУВАЧА</h1>
     <a mat-tab-link [routerLinkActive]="['active']" [routerLink]="'./config'">ОСОБИСТА ІНФОРМАЦІЯ</a>
     <a mat-tab-link [routerLinkActive]="['active']" [routerLink]="'./org-info'">ІНФОРМАЦІЯ ПРО ЗАКЛАД</a>
     <a mat-tab-link [routerLinkActive]="['active']" [routerLink]="'./activities'">ГУРТКИ</a>
-    <a mat-tab-link [routerLinkActive]="['active']" [routerLink]="'./requests'">ЗАЯВКИ</a>
+    <a mat-tab-link [routerLinkActive]="['active']" [routerLink]="'./applications'">ЗАЯВКИ</a>
     <a mat-tab-link [routerLinkActive]="['active']" [routerLink]="'./messages'">ПОВІДОМЛЕННЯ</a>
   </nav>
   <router-outlet></router-outlet>
-</div>
-
+</div>

src/app/shell/provider/provider-activities/create-activity/create-about-form/create-about-form.component.html

@@ -66,12 +66,11 @@
   </mat-form-field>
   <label class="step-label">Вартість<span class="step-required">*</span></label>
   <mat-radio-group [formControl]="radioBtn" color="primary">
-    <mat-radio-button #radio1 name="radioBtn1" [value]="false" (change)="this.AboutFormGroup.get('price').setValue(0)">
+    <mat-radio-button #radio1 name="radioBtn1" [value]="false">
       Безкоштовно</mat-radio-button>
     <div fxLayout='row' fxLayoutAlign='start center'>
       <mat-radio-button #radio2 name="radioBtn2" [value]="true"></mat-radio-button>
-      <input matInput class="step-input step-input-age" appDigitOnly [formControl]="this.AboutFormGroup.get('price')"
-        type="number">
+      <input matInput class="step-input step-input-age" appDigitOnly [formControl]="priceCtrl" type="number">
       <p class="step-text">грн за</p>
       <mat-button-toggle-group color="primary" class="input-button-group" formControlName="priceType">
         <mat-button-toggle value="lesson">Заняття</mat-button-toggle>

src/app/shell/provider/provider-activities/create-activity/create-about-form/create-about-form.component.ts

@@ -9,7 +9,7 @@ import { FormArray, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators
 export class CreateAboutFormComponent implements OnInit {
 
   radioBtn = new FormControl(false);
-  priceCtrl = new FormControl({ value: 0, disable: true });
+  priceCtrl = new FormControl({ value: 1, disabled: true });
   AboutFormGroup: FormGroup;
   @Output() PassAboutFormGroup = new EventEmitter();
 
@@ -26,22 +26,23 @@ export class CreateAboutFormComponent implements OnInit {
       facebook: new FormControl(''),
       instagram: new FormControl(''),
       daysPerWeek: new FormControl(''),
-      price: new FormControl({ value: 0, disabled: true }),
+      price: new FormControl(1),
       priceType: new FormControl(''),
     });
-
-    this.onRadioButtonInit();
+    this.onPriceCtrlInit();
   }
 
   ngOnInit(): void {
     this.PassAboutFormGroup.emit(this.AboutFormGroup);
   }
   /**
-   * This method makes input enable if radiobutton value is true
+   * This method makes input enable if radiobutton value is true and sets the value to teh formgroup
    */
-  onRadioButtonInit(): void {
-    this.radioBtn.valueChanges.subscribe(val =>
-      val ? this.AboutFormGroup.get('price').enable() : this.AboutFormGroup.get('price').disable()
-    );
+  onPriceCtrlInit(): void {
+    this.priceCtrl.valueChanges.subscribe(val =>
+      val ? this.AboutFormGroup.get('price').setValue(val) : this.AboutFormGroup.get('price').setValue(1))
+    this.radioBtn.valueChanges.subscribe(val => {
+      val ? this.priceCtrl.enable() : this.priceCtrl.disable();
+    });
   }
 }

src/app/shell/provider/provider-activities/create-activity/create-activity.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { FormArray, FormGroup } from '@angular/forms';
 import { Store } from '@ngxs/store';
+import { Address } from 'src/app/shared/models/address.model';
+import { Teacher } from 'src/app/shared/models/teacher.model';
+import { Workshop } from 'src/app/shared/models/workshop.model';
 import { CreateWorkshop } from '../../../../shared/store/provider.actions';
 @Component({
   selector: 'app-create-activity',
@@ -25,12 +28,10 @@ export class CreateActivityComponent implements OnInit {
    * This method dispatch store action to create a Workshop with Form Groups values
    */
   onSubmit() {
-    this.store.dispatch(new CreateWorkshop(
-      this.AboutFormGroup,
-      this.DescriptionFormGroup,
-      this.AddressFormGroup,
-      this.TeacherFormArray)
-    );
+    const address = new Address(this.AddressFormGroup.value);
+    const teachers = this.createTeachers(this.TeacherFormArray);
+    const workshop = new Workshop(this.AboutFormGroup.value, this.DescriptionFormGroup.value, address, teachers);
+    this.store.dispatch(new CreateWorkshop(workshop))
   }
   /**
    * This method receives a from from create-address child component and assigns to the Address FormGroup
@@ -60,4 +61,16 @@ export class CreateActivityComponent implements OnInit {
   onReceiveDescriptionFormGroup(form: FormGroup): void {
     this.DescriptionFormGroup = form;
   }
+  /**
+   * This method create array of teachers
+   * @param FormArray formArray
+   */
+  createTeachers(formArray: FormArray): Teacher[] {
+    const teachers: Teacher[] = [];
+    for (let i = 0; i < formArray.controls.length; i++) {
+      let teacher: Teacher = new Teacher(formArray.controls[i].value);
+      teachers.push(teacher)
+    }
+    return teachers;
+  }
 }

src/app/shell/provider/provider-activities/create-activity/create-address/create-address.component.html

@@ -1,19 +1,21 @@
 <form [formGroup]="AddressFormGroup" fxLayout='column' fxLayoutAlign='center space-between' class="step-form">
 
   <label class="step-label">Місто<span class="step-required">*</span></label>
-  <app-city-autocomplete  class="step-input step-input_city" (selectedCity)="onSelectedCity($event)" ></app-city-autocomplete>
+  <mat-form-field>
+    <input matInput required class="step-input" type="text" formControlName="city" maxlength="15">
+  </mat-form-field>
 
   <label class="step-label">Вулиця<span class="step-required">*</span></label>
   <mat-form-field>
-    <input matInput required class="step-input" type="text"  formControlName="street" >
+    <input matInput required class="step-input" type="text" formControlName="street">
   </mat-form-field>
 
   <label class="step-label">Будинок<span class="step-required">*</span></label>
   <mat-form-field>
-    <input matInput required class="step-input" type="text" formControlName="buildingNumber" >
+    <input matInput required class="step-input" type="text" formControlName="buildingNumber">
   </mat-form-field>
 </form>
-<hr fxLayout='row' fxLayoutAlign='center center' width="500" size="2" color="#E3E3E3"/>
+<hr fxLayout='row' fxLayoutAlign='center center' width="500" size="2" color="#E3E3E3" />
 <div fxLayout='column' fxLayoutAlign='center center'>
   <p>Або позначти на карті</p>
 </div>

src/app/shell/provider/provider-activities/create-activity/create-address/create-address.component.ts

@@ -4,7 +4,7 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
 @Component({
   selector: 'app-create-address',
   templateUrl: './create-address.component.html',
-  styleUrls: ['./create-address.component.scss','./../../../validation.component.scss']
+  styleUrls: ['./create-address.component.scss', './../../../validation.component.scss']
 })
 export class CreateAddressComponent implements OnInit {
 
@@ -14,10 +14,10 @@ export class CreateAddressComponent implements OnInit {
 
 
   constructor(
-    private formBuilder: FormBuilder){
-    
+    private formBuilder: FormBuilder) {
+
     this.AddressFormGroup = this.formBuilder.group({
-      street: new FormControl('', Validators.required), 
+      street: new FormControl('', Validators.required),
       buildingNumber: new FormControl('', Validators.required),
       city: new FormControl('', Validators.required)
     });
@@ -26,13 +26,4 @@ export class CreateAddressComponent implements OnInit {
   ngOnInit(): void {
     this.passAddressFormGroup.emit(this.AddressFormGroup);
   }
-  /**
-   * This method receives selected city from city-filter child component 
-   * and assigns it as a selected city to Address FormGroup
-   * @param event 
-   */
-  onSelectedCity( event ): void{
-    this.AddressFormGroup.get('city').setValue=event;
-  }
-
 }

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

@@ -4,7 +4,7 @@
 </div>
 <div class="wrapper-card">
   <ng-container>
-    <div fxLayout='row wrap' fxLayoutAlign='space-evenly space-evenly' fxLayoutGap="20px grid">
+    <div fxLayout='row wrap' fxLayoutAlign='start'>
       <app-organization-card class="cards" *ngFor="let card of cards$ | async " [card]="card">
       </app-organization-card>
     </div>

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

@@ -20,6 +20,8 @@
 .wrapper-card{
   background:transparent;
   border-radius: 5px;
-  padding: 20px 24px;
-  margin:10px;
+  flex: 1;
 }
+.cards{
+  margin:20px;
+}

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

@@ -1,11 +1,12 @@
-import {NgModule} from '@angular/core';
-import {Routes, RouterModule} from '@angular/router';
-import {PersonalCabinetComponent} from './personal-cabinet/personal-cabinet.component';
-import {CreateActivityComponent} from './provider-activities/create-activity/create-activity.component';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { PersonalCabinetComponent } from './personal-cabinet/personal-cabinet.component';
+import { CreateActivityComponent } from './provider-activities/create-activity/create-activity.component';
 
-import {ProviderConfigComponent} from './provider-config/provider-config.component';
-import {ProviderActivitiesComponent} from './provider-activities/provider-activities.component';
-import {ProviderOrgInfoComponent} from './provider-org-info/provider-org-info.component';
+import { ProviderConfigComponent } from './provider-config/provider-config.component';
+import { ProviderActivitiesComponent } from './provider-activities/provider-activities.component';
+import { ProviderOrgInfoComponent } from './provider-org-info/provider-org-info.component';
+import { ProviderApplicationsComponent } from './provider-applications/provider-applications.component';
 
 const routes: Routes = [
   {
@@ -23,13 +24,17 @@ const routes: Routes = [
         path: 'activities',
         component: ProviderActivitiesComponent,
       },
+      {
+        path: 'applications',
+        component: ProviderApplicationsComponent,
+      },
       {
         path: 'messages'
       },
 
     ]
   },
-  {path: 'create-activity/:id', component: CreateActivityComponent},
+  { path: 'create-activity/:id', component: CreateActivityComponent },
 ];
 
 @NgModule({
@@ -38,4 +43,3 @@ const routes: Routes = [
 })
 export class ProviderRoutingModule {
 }
-