Updated

git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174371 ce508802-f39f-4f6c-b175-0d175dae99d5

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search-result/ecm-search-result.component.css

@@ -50,7 +50,7 @@ h4{
 	position: relative;
 	display: inline-block;
 }
-.ecm-page:HOVER {
+.ecm-page:HOVER, .active {
 	background-color: mediumvioletred;
 	color: #fff !important;
 }
@@ -109,4 +109,33 @@ option{
 
 .ecm-section-info {
 	padding: 10px;
+}
+
+.ecm-error-info {
+	padding-top: 70px;
+}
+
+.ecm-spinner {
+  margin: auto;
+  stroke: mediumvioletred;
+}
+
+.ecm-progress-bar {
+	padding-right: calc(50% - 100px);
+    padding-left: calc(50% - 100px);
+    padding-top: 70px;
+}
+
+.ecm-progress-title {
+	text-align: center;
+	color: mediumvioletred;
+    font-size: 20px;
+}
+
+.disabled {
+	cursor: not-allowed !important;
+}
+
+.next-button, .prev-button {
+	cursor: pointer;
 }
\ No newline at end of file

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search-result/ecm-search-result.component.html

@@ -2,23 +2,28 @@
 
 <app-ecm-breadcrumbs [pageName]="'SEARCH'"> </app-ecm-breadcrumbs>
 
-<div *ngIf="items">
+<div class="ecm-progress-bar" *ngIf="loading">
+<div class="ecm-progress-title"> Loading </div>
+  <md-progress-spinner
+        class="ecm-spinner"
+        [color]="color"
+        [mode]="mode"
+        [value]="spinnerValue">
+  </md-progress-spinner>
+</div>
+
+<div *ngIf="items && resultFound">  
 	<section class="categories-section">
 		<div class="row row-category">
-		  <div class="ecm-result-header">
-		    <span *ngIf="!resultFound">	 	    
-		     <h2>No Results Found for {{value}} in {{myCity}}</h2>
-		    </span>
-		    
-		    <span *ngIf="resultFound" >
-		     <span class="ecm-result-info">{{numFound}} Results Found for {{value}} in {{myCity}}</span>		   
+		  <div class="ecm-result-header">		    
+		     <span class="ecm-result-info" *ngIf="myCity">{{numFound}} Results Found for {{value}} in {{myCity}}</span>		   
+		     <span class="ecm-result-info" *ngIf="!myCity">{{numFound}} Results Found for {{value}}</span> 
 		      <select (change)="sortBy($event.target.value)">
 					<option>Rating</option>
 					<option>Price: High to Low</option>
 					<option>Price: Low to High</option>
 			  </select>
 			 <span class="ecm-sort-by">Sort By &nbsp; </span>
-			</span>
 		  </div>
 		  
 			<div class="small-12 medium-6 large-4 column end "*ngFor="let item of items">
@@ -28,17 +33,25 @@
 		<span *ngIf="resultFound" >
 		 <div class="ecm-pagination-section">
 	      <span class="ecm-pages-info">Page {{activePage}} of {{pageCount}}</span>
-	      <button [disabled]="isInvalidPrev()" (click)="loadPrevious()"><img class="arrow_logo" src="v_left_arrow_38_38.png"></button>
+	      <span class="prev-button" [ngClass]="{disabled:activePage === 1}" (click)="loadPrevious()"><img class="arrow_logo" src="v_left_arrow_38_38.png"></span>
 	       <span #page>
-	         <span *ngFor="let a of createPages(); let i = index" class="ecm-page" (click)="goToPage(i)">
+	         <span *ngFor="let a of createPages(); let i = index" [ngClass]="{active:(i+1) === activePage}" class="ecm-page" (click)="goToPage(i)">
 	          <span>{{i+1}}</span>
 	         </span>
 	       </span>
-	      <button [disabled]="isInvalidNext()" (click)="loadNext()"><img class="arrow_logo" src="v_right_arrow_38_38.png"></button>
+	      <span class="next-button" [ngClass]="{disabled:activePage === pageCount}" (click)="loadNext()"><img class="arrow_logo" src="v_right_arrow_38_38.png"></span>
 	     </div>  
 	    </span>  
 		</div>
 	</section>
 </div>
-			
+
+<div class="ecm-error-info" *ngIf="!resultFound">	 	    
+  <h1>No Results Found for {{value}} in {{myCity}}</h1>
+</div>  
+   
+<div class="ecm-error-info" *ngIf="serverError">
+ <h1> Server Error </h1>
+</div>
+		
 <ecm-footer> </ecm-footer>

ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search-result/ecm-search-result.component.ts

@@ -3,7 +3,10 @@ import { SearchService } from './search.service';
 import {Http, Response, Headers} from '@angular/http';
 import { ActivatedRoute } from '@angular/router';
 import { Item } from '../../ecm-category/category-model';
+
 import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/catch';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'app-ecm-search-result',
@@ -20,9 +23,16 @@ export class EcmSearchResultComponent implements OnInit {
   pageCount;
   activePage;
   myCity;
-  resultFound:boolean;
+  resultFound:boolean = true;
+  serverError;
   sortType="rating desc";
+  filterType="itemCode:[* TO *]";
   solrUrl= '/ecm/service/solr/local2do/';
+  loading:boolean = true;
+  
+  color = 'primary';
+  mode = 'indeterminate';
+  spinnerValue = 50;
   
   @ViewChild('page') page;
   
@@ -31,28 +41,44 @@ export class EcmSearchResultComponent implements OnInit {
   ngOnInit() {
    
    this.myCity = localStorage.getItem('mycity');
-    
+   if(this.myCity == null)
+      this.myCity = undefined;
+   console.log(this.myCity+'----------'); 
    this.route.params.subscribe( params => {
-          this.unHighlightPrev();
+          this.loading = true;
           this.value = params['value'];
           this.activePage=1;
-          this.isInvalidNext();
           window.scrollTo(0,0);
           this.start=0;
-          this.fetchItems();                  
+          if(!(this.value.indexOf('*') > -1))
+          {
+           this.fetchItems();                            
+          } 
+          else
+          {
+           this.items = undefined; 
+           this.searchResponse = undefined;
+           this.resultFound = false;
+           this.numFound = 0;
+           this.loading = false;
+          } 
     }
    );
   }
   
   fetchItems(){
-    var solrUrl= this.solrUrl+this.value+'/json/'+this.start+'/'+this.sortType; 
+    var solrUrl= this.solrUrl+this.value+'/json/'+this.start+'/'+this.sortType+'/'+this.filterType; 
      
     this.http.get(solrUrl)
       .map(res => res.json())
       .subscribe(data => {
-       this.searchResponse = data;
-       this.items = data.response.docs;
-      }); 
+       this.searchResponse = data;     
+       if(data.response)
+        this.items = data.response.docs;
+       this.serverError = false;
+       if(this.items)       
+         this.loading = false;    
+      }, err => this.serverError = true); 
   }
   
   ngAfterContentChecked(){
@@ -72,58 +98,28 @@ export class EcmSearchResultComponent implements OnInit {
     }
     
     this.pageCount=Math.ceil((this.numFound/10));
-    this.highlightSelected();
-   }
-  }
-  
-  isInvalidNext(){
-   if(this.items)
-   {
-    if(this.numFound>(this.start+10))
-    { 
-     return false;
-    }
-    else
-    {
-     return true;
-    }
    }
   }
   
-  isInvalidPrev(){
-   if(this.activePage==1)
-   { 
-   	return true;
-   }
-   else
-   {
-   	return false;
-   }
-  }
   
-  loadNext(){  
-    window.scrollTo(0,0);
-    this.isInvalidNext();
-  	this.start+=10;
-  	this.unHighlightPrev();
-  	this.activePage+=1;
-    this.highlightSelected();
-  	if(this.numFound>(this.start))
+  loadNext(){       
+  	if(!(this.activePage == this.pageCount))
   	{
-  	 this.fetchItems();
+  	  window.scrollTo(0,0);
+  	  this.start+=10;
+  	  this.activePage+=1;
+  	  
+  	  this.fetchItems();
     }
   }
   
   loadPrevious(){
-    window.scrollTo(0,0);
-    this.isInvalidNext();
-  	this.start-=10;
-  	this.unHighlightPrev();
-  	this.activePage-=1;
-    this.highlightSelected();
-    
-  	if(this.numFound>(this.start))
+  	if(!(this.activePage == 1))
   	{
+  	 window.scrollTo(0,0);
+  	 this.start-=10;
+  	 this.activePage-=1;
+  	      	    
      this.fetchItems();
     }
   }
@@ -138,11 +134,8 @@ export class EcmSearchResultComponent implements OnInit {
   
   goToPage(value){
     window.scrollTo(0,0);
-    this.isInvalidNext();
   	this.start=((value+1)*10)-10;
-  	this.unHighlightPrev();
   	this.activePage=value+1;
-  	this.highlightSelected();
   	
   	if(this.numFound>(this.start))
   	{
@@ -150,30 +143,6 @@ export class EcmSearchResultComponent implements OnInit {
     }  
   }
   
-  highlightSelected(){
-   if(this.page)
-   {
-    if(this.page.nativeElement.children[this.activePage-1])
-    {
-     this.page.nativeElement.children[this.activePage-1].style.backgroundColor='mediumvioletred';
-     this.page.nativeElement.children[this.activePage-1].style.color='#fff';
-     this.page.nativeElement.children[this.activePage-1].disabled = true;
-    }
-   }
-  }
-  
-  unHighlightPrev(){
-   if(this.page)
-   {
-    if(this.page.nativeElement.children[this.activePage-1])
-    {
-     this.page.nativeElement.children[this.activePage-1].style.backgroundColor='';
-     this.page.nativeElement.children[this.activePage-1].style.color='mediumvioletred';
-     this.page.nativeElement.children[this.activePage-1].disabled = false;
-    }
-   }
-  }
-  
   sortBy(value){
     console.log(value);
   	if(value=='Rating')
@@ -185,4 +154,19 @@ export class EcmSearchResultComponent implements OnInit {
   	
   	this.fetchItems();   	
   }
+  
+  private handleError (error: Response | any) {
+    // In a real world app, we might use a remote logging infrastructure
+    this.serverError = true;
+    let errMsg: string;
+    if (error instanceof Response) {
+      const body = error.json() || '';
+      const err = body.error || JSON.stringify(body);
+      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+    } else {
+      errMsg = error.message ? error.message : error.toString();
+    }
+    console.error('Service handleError:' + errMsg);
+    return Observable.throw(errMsg);
+  }
 }