Refactored code structures.

harbor-app/src/app/account/account.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { SignInComponent } from './sign-in.component';
-import { SharedModule } from '../shared.module';
+import { SharedModule } from '../shared/shared.module';
 import { RouterModule } from '@angular/router'; 
 
 @NgModule({

harbor-app/src/app/app.module.ts

@@ -9,14 +9,14 @@ import { AccountModule } from './account/account.module';
 import { BaseModule } from './base/base.module';
 
 import { HarborRoutingModule } from './harbor-routing.module';
-import { SharedModule } from './shared.module';
+import { CoreModule } from './core/core.module';
 
 @NgModule({
     declarations: [
         AppComponent,
     ],
     imports: [
-        SharedModule,
+        CoreModule,
         AccountModule,
         BaseModule,
         HarborRoutingModule

harbor-app/src/app/base/base-routing.module.ts

@@ -5,12 +5,6 @@ import { HarborShellComponent } from './harbor-shell/harbor-shell.component';
 import { DashboardComponent } from '../dashboard/dashboard.component';
 import { ProjectComponent } from '../project/project.component';
 
-import { ProjectDetailComponent } from '../project/project-detail/project-detail.component';
-import { RepositoryComponent } from '../repository/repository.component';
-import { ReplicationComponent } from '../replication/replication.component';
-import { MemberComponent } from '../member/member.component';
-import { LogComponent } from '../log/log.component';
-
 const baseRoutes: Routes = [
   { 
     path: 'harbor', component: HarborShellComponent,

harbor-app/src/app/base/base.module.ts

@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core';
-import { SharedModule } from '../shared.module';
+import { SharedModule } from '../shared/shared.module';
 
 import { DashboardModule } from '../dashboard/dashboard.module';
 import { ProjectModule } from '../project/project.module';
+import { UserModule } from '../user/user.module';
 
 import { NavigatorComponent } from './navigator/navigator.component';
 import { GlobalSearchComponent } from './global-search/global-search.component';
@@ -16,6 +17,7 @@ import { BaseRoutingModule } from './base-routing.module';
     SharedModule,
     DashboardModule,
     ProjectModule,
+    UserModule,
     BaseRoutingModule
   ],
   declarations: [

harbor-app/src/app/core/core.module.ts

@@ -3,8 +3,6 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { ClarityModule } from 'clarity-angular';
-import { AppComponent } from './app.component';
-import { AccountModule } from './account/account.module';
 
 @NgModule({
   imports: [

harbor-app/src/app/dashboard/dashboard.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { DashboardComponent } from './dashboard.component';
-import { SharedModule } from '../shared.module';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
   imports: [ SharedModule ],

harbor-app/src/app/log/audit-log.component.html

@@ -11,14 +11,14 @@
       <clr-dg-column>Tag</clr-dg-column>
       <clr-dg-column>Operation</clr-dg-column>
       <clr-dg-column>Timestamp</clr-dg-column>
-      <clr-dg-row *ngFor="let l of logs">
+      <clr-dg-row *ngFor="let l of auditLogs">
         <clr-dg-cell>{{l.username}}</clr-dg-cell>
         <clr-dg-cell>{{l.repoName}}</clr-dg-cell>
         <clr-dg-cell>{{l.tag}}</clr-dg-cell>
         <clr-dg-cell>{{l.operation}}</clr-dg-cell>
         <clr-dg-cell>{{l.timestamp}}</clr-dg-cell>
       </clr-dg-row>
-      <clr-dg-footer>{{logs.length}} item(s)</clr-dg-footer>
+      <clr-dg-footer>{{auditLogs.length}} item(s)</clr-dg-footer>
     </clr-datagrid>
   </div>
 </div>

harbor-app/src/app/log/audit-log.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
-import { Log } from './log';
+import { AuditLog } from './audit-log';
 
 @Component({
-  templateUrl: './log.component.html'
+  templateUrl: './audit-log.component.html'
 })
-export class LogComponent implements OnInit {
+export class AuditLogComponent implements OnInit {
 
-  logs: Log[];
+  auditLogs: AuditLog[];
 
   ngOnInit(): void {
-    this.logs = [
+    this.auditLogs = [
       { username: 'Admin', repoName: 'project01', tag: '', operation: 'create', timestamp: '2016-12-23 12:05:17' },
       { username: 'Admin', repoName: 'project01/ubuntu', tag: '14.04', operation: 'push', timestamp: '2016-12-30 14:52:23' },
       { username: 'user1', repoName: 'project01/mysql', tag: '5.6', operation: 'pull', timestamp: '2016-12-30 12:12:33' }

harbor-app/src/app/log/audit-log.ts

@@ -1,4 +1,4 @@
-export class Log {
+export class AuditLog {
   username: string;
   repoName: string;
   tag: string;

harbor-app/src/app/log/log.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
-import { LogComponent } from './log.component';
-import { SharedModule } from '../shared.module';
+import { AuditLogComponent } from './audit-log.component';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
   imports: [ SharedModule ],
-  declarations: [ LogComponent ],
-  exports: [ LogComponent ]
+  declarations: [ AuditLogComponent ],
+  exports: [ AuditLogComponent ]
 })
 export class LogModule {}

harbor-app/src/app/project/member/member.component.html

@@ -0,0 +1,35 @@
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">  
+    <div class="row flex-items-xs-between">
+      <div class="col-xs-4">
+        <button class="btn btn-sm">new user</button>
+      </div>
+      <div class="col-xs-4">
+        <input type="text" placeholder="Search for users">
+      </div>
+    </div>
+    <clr-datagrid>
+      <clr-dg-column>Name</clr-dg-column>
+      <clr-dg-column>Role</clr-dg-column>
+      <clr-dg-column>Action</clr-dg-column>
+      <clr-dg-row *ngFor="let u of members">
+        <clr-dg-cell>{{u.name}}</clr-dg-cell>
+        <clr-dg-cell>{{u.role}}</clr-dg-cell>
+        <clr-dg-cell>
+          <clr-dropdown [clrMenuPosition]="'bottom-left'">
+            <button class="btn btn-sm btn-link" clrDropdownToggle>
+              Actions
+              <clr-icon shape="caret down"></clr-icon>
+            </button>
+            <div class="dropdown-menu">
+              <a href="javascript:void(0)" clrDropdownItem>Project Admin</a>
+              <a href="javascript:void(0)" clrDropdownItem>Developer</a>
+              <a href="javascript:void(0)" clrDropdownItem>Guest</a>
+            </div>
+          </clr-dropdown>
+        </clr-dg-cell>
+      </clr-dg-row>
+      <clr-dg-footer>{{members.length}} item(s)</clr-dg-footer>
+    </clr-datagrid>
+  </div>
+</div>

harbor-app/src/app/project/member/member.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { Member } from './member';
+
+@Component({
+  templateUrl: 'member.component.html'
+})
+export class MemberComponent implements OnInit {
+  members: Member[];
+
+  ngOnInit(): void {
+    this.members = [
+      { name: 'Admin', role: 'Sys admin'},
+      { name: 'user01', role: 'Project Admin'},
+      { name: 'user02', role: 'Developer'},
+      { name: 'user03', role: 'Guest'}
+    ];
+  }
+}

harbor-app/src/app/project/member/member.ts

@@ -0,0 +1,4 @@
+export class Member {
+  name: string;
+  role: string;
+}

harbor-app/src/app/project/project-routing.module.ts

@@ -7,8 +7,8 @@ import { ProjectDetailComponent } from './project-detail/project-detail.componen
 
 import { RepositoryComponent } from '../repository/repository.component';
 import { ReplicationComponent } from '../replication/replication.component';
-import { MemberComponent } from '../member/member.component';
-import { LogComponent } from '../log/log.component';
+import { MemberComponent } from './member/member.component';
+import { AuditLogComponent } from '../log/audit-log.component';
 
 const projectRoutes: Routes = [
   { path: 'harbor', 
@@ -22,7 +22,7 @@ const projectRoutes: Routes = [
           { path: 'repository', component: RepositoryComponent },
           { path: 'replication', component: ReplicationComponent },
           { path: 'member', component: MemberComponent },
-          { path: 'log', component: LogComponent }
+          { path: 'log', component: AuditLogComponent }
         ]
       }
     ]

harbor-app/src/app/project/project.module.ts

@@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core';
 
-import { SharedModule } from '../shared.module';
+import { SharedModule } from '../shared/shared.module';
 import { RepositoryModule } from '../repository/repository.module';
 import { ReplicationModule } from '../replication/replication.module';
-import { MemberModule} from '../member/member.module';
 import { LogModule } from '../log/log.module';
 
 import { ProjectComponent } from './project.component';
@@ -12,6 +11,7 @@ import { SearchProjectComponent } from './search-project/search-project.componen
 import { FilterProjectComponent } from './filter-project/filter-project.component';
 import { ListProjectComponent } from './list-project/list-project.component';
 import { ProjectDetailComponent } from './project-detail/project-detail.component';
+import { MemberComponent } from './member/member.component';
 import { ProjectRoutingModule } from './project-routing.module';
 
 
@@ -20,7 +20,6 @@ import { ProjectRoutingModule } from './project-routing.module';
     SharedModule,
     RepositoryModule,
     ReplicationModule,
-    MemberModule,
     LogModule,
     ProjectRoutingModule
   ],
@@ -30,7 +29,8 @@ import { ProjectRoutingModule } from './project-routing.module';
     SearchProjectComponent,
     FilterProjectComponent,
     ListProjectComponent,
-    ProjectDetailComponent
+    ProjectDetailComponent,
+    MemberComponent
   ],
   exports: [ ListProjectComponent ]
 })

harbor-app/src/app/replication/replication.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { ReplicationComponent } from './replication.component';
-import { SharedModule } from '../shared.module';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
   imports: [ SharedModule ],

harbor-app/src/app/repository/repository.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RepositoryComponent } from './repository.component';
-import { SharedModule } from '../shared.module';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
   imports: [ SharedModule ],

harbor-app/src/app/shared/shared.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { CoreModule } from './core.module';
+import { CoreModule } from '../core/core.module';
 
 @NgModule({
   imports: [

harbor-app/src/app/user/user.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'harbor-user',
+  templateUrl: 'user.component.html'
+})
+export class UserComponent {}

harbor-app/src/app/user/user.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../shared/shared.module';
+import { UserComponent } from './user.component';
+@NgModule({
+  imports: [
+    SharedModule
+  ],
+  declarations: [
+    UserComponent
+  ],
+  exports: [
+    UserComponent
+  ]
+})
+export class UserModule {
+
+}