refine harbor shell component

harbor-app/src/app/base/account-settings/account-settings-modal.component.html

@@ -0,0 +1,32 @@
+<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="staticBackdrop">
+    <h3 class="modal-title">Accout Settings</h3>
+    <div class="modal-body">
+        <form>
+            <section class="form-block">
+                <div class="form-group">
+                    <label for="account_settings_username" class="col-md-4">Username</label>
+                    <input type="text" class="col-md-8" id="account_settings_username" size="20">
+                </div>
+                <div class="form-group">
+                    <label for="account_settings_email" class="col-md-4">Email</label>
+                    <input type="text" class="col-md-8" id="account_settings_email" size="20">
+                </div>
+                <div class="form-group">
+                    <label for="account_settings_full_name" class="col-md-4">Full name</label>
+                    <input type="text" class="col-md-8" id="account_settings_full_name" size="20">
+                </div>
+                <div class="form-group">
+                    <label for="account_settings_comments" class="col-md-4">Comments</label>
+                    <input type="text" class="col-md-8" id="account_settings_comments" size="20">
+                </div>
+                <div class="form-group">
+                    <button type="button" class="col-md-4" class="btn btn-outline">Change Password</button>
+                </div>
+            </section>
+        </form>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="close()">Cancel</button>
+        <button type="button" class="btn btn-primary" (click)="submit()">Ok</button>
+    </div>
+</clr-modal>

harbor-app/src/app/base/account-settings/account-settings-modal.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: "account-settings-modal",
+    templateUrl: "account-settings-modal.component.html"
+})
+
+export class AccountSettingsModalComponent{
+    opened:boolean = false;
+    staticBackdrop: boolean = true;
+
+    open() {
+        this.opened = true;
+    }
+
+    close() {
+        this.opened = false;
+    }
+
+    submit() {
+        console.info("ok here!");
+        this.close();
+    }
+
+}

harbor-app/src/app/base/base-settings/base-settings.component.html

@@ -1,12 +0,0 @@
-<clr-dropdown [clrMenuPosition]="'bottom-right'">
-    <button class="nav-text" clrDropdownToggle>
-          <!--<clr-icon shape="user" class="is-inverse" size="24"></clr-icon>-->
-          <span>Administrator</span>
-          <clr-icon shape="caret down"></clr-icon>
-      </button>
-    <div class="dropdown-menu">
-        <a href="javascript:void(0)" clrDropdownItem>Add User</a>
-        <a href="javascript:void(0)" clrDropdownItem>Account Setting</a>
-        <a href="javascript:void(0)" clrDropdownItem>About</a>
-    </div>
-</clr-dropdown>

harbor-app/src/app/base/base-settings/base-settings.component.ts

@@ -1,16 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-    selector: "base-settings",
-    templateUrl: "base-settings.component.html"
-})
-
-/**
- * Component to handle the account settings
- */
-export class BaseSettingsComponent implements OnInit {
-    
-    ngOnInit(): void {
-    }
-
-}

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

@@ -9,7 +9,7 @@ import { NavigatorComponent } from './navigator/navigator.component';
 import { GlobalSearchComponent } from './global-search/global-search.component';
 import { FooterComponent } from './footer/footer.component';
 import { HarborShellComponent } from './harbor-shell/harbor-shell.component';
-import { BaseSettingsComponent } from './base-settings/base-settings.component';
+import { AccountSettingsModalComponent } from './account-settings/account-settings-modal.component';
 
 import { BaseRoutingModule } from './base-routing.module';
 
@@ -24,9 +24,9 @@ import { BaseRoutingModule } from './base-routing.module';
   declarations: [
     NavigatorComponent,
     GlobalSearchComponent,
-    BaseSettingsComponent,
     FooterComponent,
-    HarborShellComponent
+    HarborShellComponent,
+    AccountSettingsModalComponent
   ],
   exports: [ HarborShellComponent ]
 })

harbor-app/src/app/base/global-search/global-search.component.html

@@ -1,5 +1,5 @@
-<a class="nav-link">
+<form class="search">
-  <span class="nav-text">
+    <label for="search_input">
-    <clr-icon shape="search"></clr-icon>
+      <input id="search_input" type="text" placeholder="Search Harbor...">
-  </span>
+    </label>
-</a>
+</form>

harbor-app/src/app/base/harbor-shell/harbor-shell.component.html

@@ -1,41 +1,27 @@
 <clr-main-container>
-  <clr-modal [(clrModalOpen)]="account_settings_opened">
+    <navigator (showAccountSettingsModal)="openModal($event)"></navigator>
-    <h3 class="modal-title">Accout Settings</h3>
+    <global-message></global-message>
-    <div class="modal-body">
+    <div class="content-container">
-      <form>
+        <div class="content-area">
-        <section class="form-block">
+            <router-outlet></router-outlet>
-          <div class="form-group">
+        </div>
-            <label for="account_settings_username" class="col-md-4">Username</label>
+        <nav class="sidenav">
-            <input type="text" class="col-md-8" id="account_settings_username" size="20"> 
+            <section class="sidenav-content">
-          </div>
+                <a routerLink="/harbor/projects" routerLinkActive="active" class="nav-link">
-          <div class="form-group">
+                    Projects
-            <label for="account_settings_email" class="col-md-4">Email</label>
+                </a>
-            <input type="text" class="col-md-8" id="account_settings_email" size="20"> 
+                <section class="nav-group collapsible">
-          </div>
+                    <input id="tabsystem" type="checkbox">
-          <div class="form-group">
+                    <label for="tabsystem">System Managements</label>
-            <label for="account_settings_full_name" class="col-md-4">Full name</label>
+                    <ul class="nav-list">
-            <input type="text" class="col-md-8" id="account_settings_full_name" size="20"> 
+                        <li><a class="nav-link">Users</a></li>
-          </div>
+                        <li><a class="nav-link">Replications</a></li>
-          <div class="form-group">
+                        <li><a class="nav-link">Quarantine[*]</a></li>
-            <label for="account_settings_comments" class="col-md-4">Comments</label>
+                        <li><a class="nav-link">Configurations[*]</a></li>
-            <input type="text" class="col-md-8" id="account_settings_comments" size="20"> 
+                    </ul>
-          </div>
+                </section>
-          <div class="form-group">
+            </section>
-            <button type="button" class="col-md-4" class="btn btn-outline">Change Password</button>
+        </nav>
-          </div>
-        </section>
-      </form>
     </div>
-    <div class="modal-footer">
-      <button type="button" class="btn btn-outline" (click)="account_settings_opened = false">Cancel</button>
-      <button type="button" class="btn btn-primary" (click)="account_settings_opened = false">Ok</button>
-    </div>
-  </clr-modal>
-  <navigator></navigator>
-  <global-message></global-message>
-  <div class="content-container">
-    <div class="content-area">  
-      <router-outlet></router-outlet>
-    </div>
-  </div>
 </clr-main-container>
+<account-settings-modal></account-settings-modal>

harbor-app/src/app/base/harbor-shell/harbor-shell.component.ts

@@ -1,10 +1,48 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 
+import { SessionService } from '../../shared/session.service';
+import { ModalEvent } from '../modal-event';
+
+import { AccountSettingsModalComponent } from '../account-settings/account-settings-modal.component';
+
 @Component({
     selector: 'harbor-shell',
     templateUrl: 'harbor-shell.component.html'
 })
-export class HarborShellComponent {
+
-    
+export class HarborShellComponent implements OnInit {
+
+    @ViewChild(AccountSettingsModalComponent)
+    private accountSettingsModal: AccountSettingsModalComponent;
+
+    constructor(private session: SessionService) { }
+
+    ngOnInit() {
+        let cUser = this.session.getCurrentUser();
+        if (!cUser) {
+            //Try to update the session
+            this.session.retrieveUser();
+        }
+    }
+
+    //Open modal dialog
+    openModal(event: ModalEvent): void {
+        switch (event.modalName) {
+            case "account-settings":
+                this.accountSettingsModal.open();
+            default:
+                break;
+        }
+    }
+
+    //Close the modal dialog
+    closeModal(event: ModalEvent): void {
+        switch (event.modalName) {
+            case "account-settings":
+                this.accountSettingsModal.close();
+            default:
+                break;
+        }
+    }
 }

harbor-app/src/app/base/modal-event.ts

@@ -0,0 +1,5 @@
+//Define a object to store the modal event
+export class ModalEvent {
+    modalName: string;
+    modalFlag: boolean; //true for open, false for close
+}

harbor-app/src/app/base/navigator/navigator.component.html

@@ -1,40 +1,32 @@
-<clr-header class="header-4 header">
+<clr-header class="header-5 header">
     <div class="branding">
         <a href="#" class="nav-link">
             <clr-icon shape="vm-bug"></clr-icon>
             <span class="title">Harbor</span>
         </a>
     </div>
-    <div class="divider"></div>
+    <global-search></global-search>
-    <div class="header-nav">
-        <a class="nav-link" id="dashboard-link" [routerLink]="['/harbor', 'dashboard']" routerLinkActive="active">
-            <span class="nav-text">Dashboard</span>
-        </a>
-        <a class="nav-link" id="dashboard-link" [routerLink]="['/harbor', 'projects']" routerLinkActive="active">
-            <span class="nav-text">Project</span>
-        </a>
-    </div>
     <div class="header-actions">
-        <clr-dropdown [clrMenuPosition]="'bottom-right'">
+        <clr-dropdown [clrMenuPosition]="'bottom-right'" class="dropdown">
-            <!--<clr-icon shape="user" class="is-inverse" size="24"></clr-icon>-->
             <button class="nav-text" clrDropdownToggle>
+              <clr-icon shape="user" class="is-inverse" size="24" style="left:-5px;"></clr-icon>
               <span>Administrator</span>
               <clr-icon shape="caret down"></clr-icon>
             </button>
             <div class="dropdown-menu">
-                <a href="javascript:void(0)" clrDropdownItem>Add User</a>
+                <a href="javascript:void(0)" clrDropdownItem (click)="open()">Account Setting</a>
-                <a href="javascript:void(0)" clrDropdownItem>Account Setting</a>
+                <a href="javascript:void(0)" clrDropdownItem>Log out</a>
-                <a href="javascript:void(0)" clrDropdownItem>About</a>
             </div>
         </clr-dropdown>
-        <global-search></global-search>
         <clr-dropdown class="dropdown bottom-right">
-            <button class="nav-text" clrDropdownToggle>
+            <button class="nav-icon" clrDropdownToggle>
                 <clr-icon shape="cog"></clr-icon>
+                <clr-icon shape="caret down"></clr-icon>
             </button>
             <div class="dropdown-menu">
                 <a href="javascript:void(0)" clrDropdownItem>Preferences</a>
-                <a href="javascript:void(0)" clrDropdownItem>Log out</a>
+                <a href="javascript:void(0)" clrDropdownItem>Add User</a>
+                <a href="javascript:void(0)" clrDropdownItem>About</a>
             </div>
         </clr-dropdown>
     </div>

harbor-app/src/app/base/navigator/navigator.component.ts

@@ -1,10 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, Output, EventEmitter } from '@angular/core';
 import { Router } from '@angular/router';
 
+import { ModalEvent } from '../modal-event'; 
+
 @Component({
     selector: 'navigator',
     templateUrl: "navigator.component.html"
 })
 export class NavigatorComponent {
     // constructor(private router: Router){}
+    @Output() showAccountSettingsModal = new EventEmitter<ModalEvent>();
+
+    //Open the account setting dialog
+    open():void {
+        this.showAccountSettingsModal.emit({
+            modalName:"account-settings",
+            modalFlag: true
+        });
+    }
 }