added new event component

code/moya-management-portal/src/app/app.component.html

 <!--The content below is only a placeholder and can be replaced.-->
-<div>
-  <moya-organization-list (selected)="onOrganizationChange($event)" style="float:top, left;"></moya-organization-list>
-  <h1 style="text-align:center; margin-left:25%; display:inline-block">
-    Welcome to {{ title }}!
-  </h1>
-  <a style="float:right; font-size:20px; margin-top: 20px" href="#">Moya Login</a>
-</div>
-<div style="width:50%; float:left">
-  <h2 style="margin-left: 10px">Tulevat tapahtumat</h2>
-  <moya-event-list [organisation]="currentOrganisation" style="margin-top:5em;"></moya-event-list>
-</div>
-<div style="width:50%; float:right">
-  <h2>Ei omaa organisaatiota?</h2>
-  <button (click)="newOrg()">Luo uusi organisaatio</button>
-  <moya-new-organization></moya-new-organization>
-</div>
+<moya-organization></moya-organization>
\ No newline at end of file

code/moya-management-portal/src/app/app.component.ts

@@ -7,13 +7,7 @@ import { AppService } from './shared/app.service';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'Moay';
-  public currentOrganisation: string;
   constructor(private appService: AppService) {
     console.log(this.appService.get());
   }
-
-  onOrganizationChange(event) {
-    this.currentOrganisation = event;
-  }
 }

code/moya-management-portal/src/app/app.mock.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
-
 import { AppComponent } from './app.component';
 import { AppMockService } from './shared/app.mock.service';
 import { AppService } from './shared/app.service';
 import { OrganizationModule } from './organization/organization.module';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 
 @NgModule({
   declarations: [
-    AppComponent,
+    AppComponent
   ],
   imports: [
     BrowserModule,

code/moya-management-portal/src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
-
 import { AppComponent } from './app.component';
 import { AppService } from './shared/app.service';
 

code/moya-management-portal/src/app/organization/event-list/event-service.service.spec.ts

 import { TestBed, inject } from '@angular/core/testing';
-
 import { EventsService } from './event-service.service';
 
 describe('EventsService', () => {

code/moya-management-portal/src/app/organization/new-event/new-event.component.html

+<form [formGroup]="eventForm" (ngSubmit)="onSubmit()">
+  <mat-form-field>
+    <input matInput required placeholder="Event name" formControlName="name">
+  </mat-form-field>
+
+  <mat-divider [vertical]="true"></mat-divider>
+
+  <mat-form-field>
+    <input matInput placeholder="Address" formControlName="address">
+  </mat-form-field>
+  
+  <button mat-button type="submit">Submit</button>
+</form>
\ No newline at end of file

code/moya-management-portal/src/app/organization/new-event/new-event.component.spec.ts

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

code/moya-management-portal/src/app/organization/new-event/new-event.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'moya-new-event',
+  templateUrl: './new-event.component.html',
+  styleUrls: ['./new-event.component.scss']
+})
+export class NewEventComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

code/moya-management-portal/src/app/organization/new-organization/new-organization.component.ts

 import { Component, OnInit } from '@angular/core';
-import {FormControl, FormGroup} from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 
 
 @Component({
@@ -23,6 +23,7 @@ export class NewOrganizationComponent implements OnInit {
 
   ngOnInit() {
   }
+
   onSubmit() {
     const values = {
       'name': this.organizationForm.get('name').value,

code/moya-management-portal/src/app/organization/organization-list/organization-list.component.ts

+import { EventsService } from './../event-list/event-service.service';
 import { Component, OnInit, Output} from '@angular/core';
 import {OrganizationListService} from './organization-list.service';
 import { EventEmitter } from '@angular/core';
@@ -16,7 +17,7 @@ export class OrganizationListComponent implements OnInit {
   selected = new EventEmitter();
 
   public organizations = [
-    {name: 'Assemly Organization'},
+    {name: 'Assembly Organization'},
     {name: 'Assemly'},
     {name: 'Organization'}
   ];

code/moya-management-portal/src/app/organization/organization.component.html

-<p>
-  organization works!
-</p>
+<div>
+  <moya-organization-list (selected)="onOrganizationChange($event)" style="float:top, left;"></moya-organization-list>
+  <h1 style="text-align:center; margin-left:25%; display:inline-block">
+    Welcome to {{ title }}!
+  </h1>
+  <a style="float:right; font-size:20px; margin-top: 20px" href="#">Moya Login</a>
+</div>
+<div style="width:50%; float:left">
+  <h2 style="margin-left: 10px">Tulevat tapahtumat</h2>
+  <moya-event-list [organisation]="currentOrganisation" style="margin-top:5em;"></moya-event-list>
+</div>
+<div style="width:50%; float:right">
+  <h2>Ei omaa organisaatiota?</h2>
+  <button mat-button (click)="newOrg()">Create new organization</button>
+  <moya-new-organization></moya-new-organization>
+  <moya-new-event></moya-new-event>
+</div>

code/moya-management-portal/src/app/organization/organization.component.ts

 import { Component, OnInit } from '@angular/core';
+import {  EventListComponent} from './event-list/event-list.component';
 
 @Component({
   selector: 'moya-organization',
@@ -7,9 +8,16 @@ import { Component, OnInit } from '@angular/core';
 })
 export class OrganizationComponent implements OnInit {
 
+  title = 'Moay';
+  public currentOrganisation: string;
+
   constructor() { }
 
   ngOnInit() {
   }
 
+  onOrganizationChange(event) {
+    this.currentOrganisation = event;
+  }
+
 }

code/moya-management-portal/src/app/organization/organization.module.ts

@@ -3,15 +3,16 @@ import { CommonModule } from '@angular/common';
 import { NewOrganizationComponent } from './new-organization/new-organization.component';
 import { OrganizationListComponent } from './organization-list/organization-list.component';
 import { EventListComponent } from './event-list/event-list.component';
-import {MatSelectModule} from '@angular/material/select';
-import {OrganizationListService} from './organization-list/organization-list.service';
-import {MatCardModule} from '@angular/material/card';
+import { MatSelectModule } from '@angular/material/select';
+import { OrganizationListService } from './organization-list/organization-list.service';
+import { MatCardModule } from '@angular/material/card';
 import { OrganizationComponent } from './organization.component';
 import { FormsModule } from '@angular/forms';
 import { EventsService } from './event-list/event-service.service';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
-import {MatButtonModule, MatDividerModule} from '@angular/material';
+import { MatButtonModule, MatDividerModule } from '@angular/material';
+import { NewEventComponent } from './new-event/new-event.component';
 
 @NgModule({
   imports: [
@@ -25,7 +26,7 @@ import {MatButtonModule, MatDividerModule} from '@angular/material';
     FormsModule
   ],
   providers: [OrganizationListService, EventsService],
-  declarations: [NewOrganizationComponent, OrganizationListComponent, EventListComponent, OrganizationComponent],
-  exports: [NewOrganizationComponent, OrganizationListComponent, EventListComponent],
+  declarations: [NewOrganizationComponent, OrganizationListComponent, EventListComponent, OrganizationComponent, NewEventComponent],
+  exports: [NewOrganizationComponent, OrganizationListComponent, EventListComponent, OrganizationComponent, NewEventComponent ],
 })
 export class OrganizationModule { }