First version of organization list

code/moya-management-portal/package-lock.json

@@ -68,6 +68,14 @@
         "tslib": "1.9.0"
       }
     },
+    "@angular/cdk": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.2.4.tgz",
+      "integrity": "sha1-wKQpqHENj+2xV/VG4hy0nUM19/c=",
+      "requires": {
+        "tslib": "1.9.0"
+      }
+    },
     "@angular/cli": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.7.3.tgz",
@@ -201,6 +209,14 @@
       "integrity": "sha512-aaLnGpW9NBDkG0JYqUeGc+al1Jd1CY9yrs3mew53x5nByetQbIdZwpYm1hnSTw7LBEZBxfHTMw5EZD2YYTDmJw==",
       "dev": true
     },
+    "@angular/material": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.2.4.tgz",
+      "integrity": "sha1-noI3mDJCg9I+qDkVb6xby3NEPVU=",
+      "requires": {
+        "tslib": "1.9.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "5.2.9",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.9.tgz",

code/moya-management-portal/package.json

@@ -14,11 +14,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^5.2.0",
+    "@angular/cdk": "^5.2.4",
     "@angular/common": "^5.2.0",
     "@angular/compiler": "^5.2.0",
     "@angular/core": "^5.2.0",
     "@angular/forms": "^5.2.0",
     "@angular/http": "^5.2.0",
+    "@angular/material": "^5.2.4",
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",

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

@@ -6,14 +6,16 @@ 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';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     OrganizationModule
   ],
   providers: [{ provide: AppService, useClass: AppMockService}],

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

-<p>
-  organization-list works!
-</p>
+<mat-form-field>
+  <mat-select placeholder="Organization" [(value)]="selected">
+    <mat-option *ngFor="let organization of organizations" value={{organization.name}}>{{organization.name}}</mat-option>
+  </mat-select>
+</mat-form-field>
\ No newline at end of file

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

 import { Component, OnInit } from '@angular/core';
+import {OrganizationListService} from './organization-list.service';
+
 
 @Component({
   selector: 'moya-organization-list',
@@ -7,7 +9,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class OrganizationListComponent implements OnInit {
 
-  constructor() { }
+  public organizations = [
+    {name: 'Assemly Organization'},
+    {name: 'Assemly'},
+    {name: 'Organization'}
+  ];
+
+  constructor(private organizationListService: OrganizationListService) {
+    console.log(this.organizationListService.get());
+  }
 
   ngOnInit() {
   }

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

+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class OrganizationListService {
+    get() {
+        return { id: 1, name: 'List of Organizations' };
+    }
+}

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

@@ -3,11 +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 {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatSelectModule} from '@angular/material/select';
+import {OrganizationListService} from './organization-list/organization-list.service';
 
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    MatSelectModule
   ],
+  providers: [OrganizationListService],
   declarations: [NewOrganizationComponent, OrganizationListComponent, EventListComponent],
   exports: [NewOrganizationComponent, OrganizationListComponent, EventListComponent],
 })

code/moya-management-portal/src/styles.scss

 /* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
\ No newline at end of file