diff --git a/src/ui_ng/src/app/base/base.module.ts b/src/ui_ng/src/app/base/base.module.ts index 0a623551d..8cfadc71c 100644 --- a/src/ui_ng/src/app/base/base.module.ts +++ b/src/ui_ng/src/app/base/base.module.ts @@ -2,7 +2,6 @@ import { NgModule } from '@angular/core'; import { SharedModule } from '../shared/shared.module'; import { RouterModule } from '@angular/router'; -import { DashboardModule } from '../dashboard/dashboard.module'; import { ProjectModule } from '../project/project.module'; import { UserModule } from '../user/user.module'; import { AccountModule } from '../account/account.module'; @@ -12,11 +11,13 @@ import { GlobalSearchComponent } from './global-search/global-search.component'; import { FooterComponent } from './footer/footer.component'; import { HarborShellComponent } from './harbor-shell/harbor-shell.component'; import { SearchResultComponent } from './global-search/search-result.component'; +import { SearchStartComponent } from './global-search/search-start.component'; + +import { SearchTriggerService } from './global-search/search-trigger.service'; @NgModule({ imports: [ SharedModule, - DashboardModule, ProjectModule, UserModule, AccountModule, @@ -27,9 +28,11 @@ import { SearchResultComponent } from './global-search/search-result.component'; GlobalSearchComponent, FooterComponent, HarborShellComponent, - SearchResultComponent + SearchResultComponent, + SearchStartComponent ], - exports: [ HarborShellComponent ] + exports: [ HarborShellComponent ], + providers: [SearchTriggerService] }) export class BaseModule { diff --git a/src/ui_ng/src/app/base/global-search/global-search.component.html b/src/ui_ng/src/app/base/global-search/global-search.component.html index e895fa79e..ebb4b0802 100644 --- a/src/ui_ng/src/app/base/global-search/global-search.component.html +++ b/src/ui_ng/src/app/base/global-search/global-search.component.html @@ -1,4 +1,4 @@ -
+ diff --git a/src/ui_ng/src/app/base/global-search/global-search.component.ts b/src/ui_ng/src/app/base/global-search/global-search.component.ts index 1e6e39a9b..850ed3122 100644 --- a/src/ui_ng/src/app/base/global-search/global-search.component.ts +++ b/src/ui_ng/src/app/base/global-search/global-search.component.ts @@ -1,8 +1,11 @@ -import { Component, Output, EventEmitter, OnInit } from '@angular/core'; +import { Component, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core'; import { Router } from '@angular/router'; import { Subject } from 'rxjs/Subject'; import { Observable } from 'rxjs/Observable'; -import { SearchEvent } from '../search-event'; +import { Subscription } from 'rxjs/Subscription'; + +import { SearchTriggerService } from './search-trigger.service'; +import { harborRootRoute } from '../../shared/shared.const'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged'; @@ -13,32 +16,52 @@ const deBounceTime = 500; //ms selector: 'global-search', templateUrl: "global-search.component.html" }) -export class GlobalSearchComponent implements OnInit { - //Publish search event to parent - @Output() searchEvt = new EventEmitter(); - +export class GlobalSearchComponent implements OnInit, OnDestroy { //Keep search term as Subject private searchTerms = new Subject(); + //Keep subscription for future use + private searchSub: Subscription; + private stateSub: Subscription; + + //To indicate if the result panel is opened + private isResPanelOpened: boolean = false; + + constructor( + private searchTrigger: SearchTriggerService, + private router: Router) { } + + public get shouldHide(): boolean { + return this.router.routerState.snapshot.url === harborRootRoute && !this.isResPanelOpened; + } + //Implement ngOnIni ngOnInit(): void { - this.searchTerms + this.searchSub = this.searchTerms .debounceTime(deBounceTime) .distinctUntilChanged() .subscribe(term => { - this.searchEvt.emit({ - term: term - }); + this.searchTrigger.triggerSearch(term); }); + + this.stateSub = this.searchTrigger.searchInputChan$.subscribe(state => { + this.isResPanelOpened = state; + }); + } + + ngOnDestroy(): void { + if (this.searchSub) { + this.searchSub.unsubscribe(); + } + if (this.stateSub) { + this.stateSub.unsubscribe(); + } } //Handle the term inputting event search(term: string): void { - //Send event only when term is not empty + //Send event even term is empty - let nextTerm = term.trim(); - if (nextTerm != "") { - this.searchTerms.next(nextTerm); - } + this.searchTerms.next(term.trim()); } } \ No newline at end of file diff --git a/src/ui_ng/src/app/base/global-search/search-result.component.css b/src/ui_ng/src/app/base/global-search/search-result.component.css index a02153e93..c1ee21565 100644 --- a/src/ui_ng/src/app/base/global-search/search-result.component.css +++ b/src/ui_ng/src/app/base/global-search/search-result.component.css @@ -2,12 +2,13 @@ display: block; position: absolute; height: 100%; - width: 97%; + width: 98%; /*shoud be lesser than 1000 to aoivd override the popup menu*/ z-index: 999; box-sizing: border-box; background: #fafafa; top: 0px; + padding-left: 24px; } .search-header { @@ -17,7 +18,6 @@ } .search-title { - margin-top: 0px; font-size: 28px; letter-spacing: normal; color: #000; @@ -37,4 +37,14 @@ top: 50%; left: 50%; position: absolute; +} + +.grid-header-wrapper { + text-align: right; +} + +.grid-filter { + position: relative; + top: 8px; + margin: 0px auto 0px auto; } \ No newline at end of file diff --git a/src/ui_ng/src/app/base/global-search/search-result.component.html b/src/ui_ng/src/app/base/global-search/search-result.component.html index e1cb968cd..87d872d18 100644 --- a/src/ui_ng/src/app/base/global-search/search-result.component.html +++ b/src/ui_ng/src/app/base/global-search/search-result.component.html @@ -1,11 +1,18 @@
+
- Search results + Search results for '{{currentTerm}}'
-
Results is showing here!
+
+

Projects

+
+ +
+ +
\ No newline at end of file diff --git a/src/ui_ng/src/app/base/global-search/search-result.component.ts b/src/ui_ng/src/app/base/global-search/search-result.component.ts index ffc1598eb..c207320a7 100644 --- a/src/ui_ng/src/app/base/global-search/search-result.component.ts +++ b/src/ui_ng/src/app/base/global-search/search-result.component.ts @@ -2,6 +2,11 @@ import { Component, Output, EventEmitter } from '@angular/core'; import { GlobalSearchService } from './global-search.service'; import { SearchResults } from './search-results'; +import { errorHandler, accessErrorHandler } from '../../shared/shared.utils'; +import { AlertType } from '../../shared/shared.const'; +import { MessageService } from '../../global-message/message.service'; + +import { SearchTriggerService } from './search-trigger.service'; @Component({ selector: "search-result", @@ -12,19 +17,40 @@ import { SearchResults } from './search-results'; }) export class SearchResultComponent { - @Output() closeEvt = new EventEmitter(); + private searchResults: SearchResults = new SearchResults(); + private originalCopy: SearchResults; - searchResults: SearchResults; + private currentTerm: string = ""; //Open or close private stateIndicator: boolean = false; //Search in progress - private onGoing: boolean = true; + private onGoing: boolean = false; //Whether or not mouse point is onto the close indicator private mouseOn: boolean = false; - constructor(private search: GlobalSearchService) { } + constructor( + private search: GlobalSearchService, + private msgService: MessageService, + private searchTrigger: SearchTriggerService) { } + + private doFilterProjects(event: string) { + this.searchResults.project = this.originalCopy.project.filter(pro => pro.name.indexOf(event) != -1); + } + + private clone(src: SearchResults): SearchResults { + let res: SearchResults = new SearchResults(); + + if (src) { + src.project.forEach(pro => res.project.push(Object.assign({}, pro))); + src.repository.forEach(repo => res.repository.push(Object.assign({}, repo))) + + return res; + } + + return res//Empty object + } public get state(): boolean { return this.stateIndicator; @@ -42,39 +68,54 @@ export class SearchResultComponent { mouseAction(over: boolean): void { this.mouseOn = over; } - + //Show the results show(): void { this.stateIndicator = true; + this.searchTrigger.searchInputStat(true); } //Close the result page close(): void { //Tell shell close - this.closeEvt.emit(true); - + this.searchTrigger.closeSearch(true); + this.searchTrigger.searchInputStat(false); this.stateIndicator = false; } //Call search service to complete the search request doSearch(term: string): void { + //Do nothing if search is ongoing + if (this.onGoing) { + return; + } //Confirm page is displayed if (!this.stateIndicator) { this.show(); } + this.currentTerm = term; + + //If term is empty, then clear the results + if (term === "") { + this.searchResults.project = []; + this.searchResults.repository = []; + return; + } //Show spinner this.onGoing = true; this.search.doSearch(term) .then(searchResults => { this.onGoing = false; - this.searchResults = searchResults; - console.info(searchResults); + this.originalCopy = searchResults; //Keeo the original data + this.searchResults = this.clone(searchResults); }) .catch(error => { this.onGoing = false; - console.error(error);//TODO: Use general erro handler + if (!accessErrorHandler(error, this.msgService)) { + this.msgService.announceMessage(error.status, errorHandler(error), AlertType.DANGER); + } }); } } \ No newline at end of file diff --git a/src/ui_ng/src/app/base/global-search/search-results.ts b/src/ui_ng/src/app/base/global-search/search-results.ts index 7911c3465..0e096f3f4 100644 --- a/src/ui_ng/src/app/base/global-search/search-results.ts +++ b/src/ui_ng/src/app/base/global-search/search-results.ts @@ -2,6 +2,11 @@ import { Project } from '../../project/project'; import { Repository } from '../../repository/repository'; export class SearchResults { - projects: Project[]; - repositories: Repository[]; + constructor(){ + this.project = []; + this.repository = []; + } + + project: Project[]; + repository: Repository[]; } \ No newline at end of file diff --git a/src/ui_ng/src/app/base/global-search/search-start.component.css b/src/ui_ng/src/app/base/global-search/search-start.component.css new file mode 100644 index 000000000..938d73ec6 --- /dev/null +++ b/src/ui_ng/src/app/base/global-search/search-start.component.css @@ -0,0 +1,17 @@ +.search-start-wrapper { + position: absolute; + top: 50%; + left: 50%; + margin-top: -50px; + margin-left: -230px; +} + +.search-icon { + position: relative; + right: -6px; +} + +.search-font { + font-weight: 600; + font-size: 18px; +} \ No newline at end of file diff --git a/src/ui_ng/src/app/base/global-search/search-start.component.html b/src/ui_ng/src/app/base/global-search/search-start.component.html new file mode 100644 index 000000000..c466ebbfe --- /dev/null +++ b/src/ui_ng/src/app/base/global-search/search-start.component.html @@ -0,0 +1,9 @@ +

Hello {{currentUsername}}, start to use harbor from search

+
+ + + +
\ No newline at end of file diff --git a/src/ui_ng/src/app/base/global-search/search-start.component.ts b/src/ui_ng/src/app/base/global-search/search-start.component.ts new file mode 100644 index 000000000..7e8e53047 --- /dev/null +++ b/src/ui_ng/src/app/base/global-search/search-start.component.ts @@ -0,0 +1,62 @@ +import { Component, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core'; +import { Router } from '@angular/router'; +import { Subject } from 'rxjs/Subject'; +import { Observable } from 'rxjs/Observable';; +import { Subscription } from 'rxjs/Subscription'; + +import { SessionService } from '../../shared/session.service'; +import { SessionUser } from '../../shared/session-user'; + +import { SearchTriggerService } from './search-trigger.service'; + +import 'rxjs/add/operator/debounceTime'; +import 'rxjs/add/operator/distinctUntilChanged'; + +const deBounceTime = 500; //ms + +@Component({ + selector: 'search-start', + templateUrl: "search-start.component.html", + styleUrls: ['search-start.component.css'] +}) +export class SearchStartComponent implements OnInit, OnDestroy { + //Keep search term as Subject + private searchTerms = new Subject(); + + private searchSub: Subscription; + + private currentUser: SessionUser = null; + + constructor( + private session: SessionService, + private searchTrigger: SearchTriggerService){} + + public get currentUsername(): string { + return this.currentUser?this.currentUser.username: ""; + } + + //Implement ngOnIni + ngOnInit(): void { + this.currentUser = this.session.getCurrentUser(); + + this.searchSub = this.searchTerms + .debounceTime(deBounceTime) + .distinctUntilChanged() + .subscribe(term => { + this.searchTrigger.triggerSearch(term); + }); + } + + ngOnDestroy(): void { + if(this.searchSub){ + this.searchSub.unsubscribe(); + } + } + + //Handle the term inputting event + search(term: string): void { + //Send event only when term is not empty + + this.searchTerms.next(term); + } +} \ No newline at end of file diff --git a/src/ui_ng/src/app/base/global-search/search-trigger.service.ts b/src/ui_ng/src/app/base/global-search/search-trigger.service.ts new file mode 100644 index 000000000..edcdd34e2 --- /dev/null +++ b/src/ui_ng/src/app/base/global-search/search-trigger.service.ts @@ -0,0 +1,31 @@ +import { Injectable } from '@angular/core'; +import { Subject } from 'rxjs/Subject'; +import { AlertType } from '../../shared/shared.const'; + +@Injectable() +export class SearchTriggerService { + + private searchTriggerSource = new Subject(); + private searchCloseSource = new Subject(); + private searchInputSource = new Subject(); + + searchTriggerChan$ = this.searchTriggerSource.asObservable(); + searchCloseChan$ = this.searchCloseSource.asObservable(); + searchInputChan$ = this.searchInputSource.asObservable(); + + triggerSearch(event: string) { + this.searchTriggerSource.next(event); + } + + //Set event to true for shell + //set to false for search panel + closeSearch(event: boolean) { + this.searchCloseSource.next(event); + } + + //Notify the state change of search box in home start page + searchInputStat(event: boolean) { + this.searchInputSource.next(event); + } + +} \ No newline at end of file diff --git a/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html b/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html index 200e8592f..e0f43bb02 100644 --- a/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html +++ b/src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html @@ -1,11 +1,11 @@ - +
- +
- +
diff --git a/src/ui_ng/src/app/project/list-project/list-project.component.html b/src/ui_ng/src/app/project/list-project/list-project.component.html index 68ff6382a..6643564c7 100644 --- a/src/ui_ng/src/app/project/list-project/list-project.component.html +++ b/src/ui_ng/src/app/project/list-project/list-project.component.html @@ -1,27 +1,27 @@ - {{'PROJECT.NAME' | translate}} - {{'PROJECT.PUBLIC_OR_PRIVATE' | translate}} - {{'PROJECT.REPO_COUNT'| translate}} - {{'PROJECT.CREATION_TIME' | translate}} - {{'PROJECT.DESCRIPTION' | translate}} - - - {{p.name}} - {{ (p.public === 1 ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE') | translate}} - {{p.repo_count}} - {{p.creation_time}} - - {{p.description}} - - {{'PROJECT.NEW_POLICY' | translate}} - {{'PROJECT.MAKE' | translate}} {{(p.public === 0 ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE') | translate}} -
- {{'PROJECT.DELETE' | translate}} - - - - {{ (projects ? projects.length : 0) }} {{'PROJECT.ITEMS' | translate}} + {{p.name}} + {{ (p.public === 1 ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE') | translate}} + {{p.repo_count}} + {{p.creation_time}} + + {{p.description}} + + {{'PROJECT.NEW_POLICY' | translate}} + {{'PROJECT.MAKE' | translate}} {{(p.public === 0 ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE') | translate}} +
+ {{'PROJECT.DELETE' | translate}} + + + + {{ (projects ? projects.length : 0) }} {{'PROJECT.ITEMS' | translate}} \ No newline at end of file diff --git a/src/ui_ng/src/app/project/list-project/list-project.component.ts b/src/ui_ng/src/app/project/list-project/list-project.component.ts index 104371bcf..ce8d540c5 100644 --- a/src/ui_ng/src/app/project/list-project/list-project.component.ts +++ b/src/ui_ng/src/app/project/list-project/list-project.component.ts @@ -1,25 +1,50 @@ -import { Component, EventEmitter, Output, Input } from '@angular/core'; +import { Component, EventEmitter, Output, Input, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; import { Project } from '../project'; import { ProjectService } from '../project.service'; +import { SessionService } from '../../shared/session.service'; +import { SessionUser } from '../../shared/session-user'; +import { SearchTriggerService } from '../../base/global-search/search-trigger.service'; + @Component({ selector: 'list-project', templateUrl: 'list-project.component.html' }) -export class ListProjectComponent { +export class ListProjectComponent implements OnInit { - @Input() projects: Project[]; + @Input() projects: Project[]; - @Output() toggle = new EventEmitter(); - @Output() delete = new EventEmitter(); + @Output() toggle = new EventEmitter(); + @Output() delete = new EventEmitter(); - toggleProject(p: Project) { - this.toggle.emit(p); - } + private currentUser: SessionUser = null; - deleteProject(p: Project) { - this.delete.emit(p); - } + constructor( + private session: SessionService, + private router: Router, + private searchTrigger: SearchTriggerService) { } + + ngOnInit(): void { + this.currentUser = this.session.getCurrentUser(); + } + + public get isSessionValid(): boolean { + return this.currentUser != null; + } + + goToLink(proId: number): void { + this.router.navigate(['/harbor', 'projects', proId, 'repository']); + this.searchTrigger.closeSearch(false); + } + + toggleProject(p: Project) { + this.toggle.emit(p); + } + + deleteProject(p: Project) { + this.delete.emit(p); + } } \ No newline at end of file diff --git a/src/ui_ng/src/app/project/project-detail/project-detail.component.html b/src/ui_ng/src/app/project/project-detail/project-detail.component.html index fdfbe41c7..efddbde6f 100644 --- a/src/ui_ng/src/app/project/project-detail/project-detail.component.html +++ b/src/ui_ng/src/app/project/project-detail/project-detail.component.html @@ -1,3 +1,4 @@ +< {{'PROJECT_DETAIL.PROJECTS' | translate}}

{{currentProject.name}}