Skip to content

B
business-java
Commit ace68b04 authored by prumde's avatar prumde
Browse files
Options

New Component for displaying SOLR search result data. 

Serach Result, Search Result Item


git-svn-id: http://15.206.35.175/svn/proteus/business-java/trunk@174343 ce508802-f39f-4f6c-b175-0d175dae99d5
parent 90d5fd04
Hide whitespace changes
Inline Side-by-side
Showing with 516 additions and 0 deletions
ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search-result/ecm-search-item/ecm-search-item.component.css 0 → 100755
View file @ ace68b04
.ecm-card {
border-radius: 5px;
box-shadow: 0 0 5px 0px #ccc;
padding: 0;
margin: 0;
position: relative;
height: 400px;
width: auto;
}
.ecm-card-img {
border-top-right-radius: 5px;
border-top-left-radius: 5px;
width: 100%;
position: relative;
height: calc( 100% - 90px);
}
.ecm-card-footer {
width: 100%;
height: 90px;
padding: 5px;
}
.ecm-card-info {
padding: 10px;
width: calc(100% - 120px);
height: 100%;
float: left;
}
.ecm-card-info-title {
font-size: 14px;
font-weight: 600;
color: #444;
display: block;
line-height: 15px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ecm-card-info-subhead {
font-size: 12px;
color: #888;
display: block;
line-height: 12px;
top: 3px;
position: relative;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
top: 5px;
}
.ecm-card-info-img {
float: left;
/*background-color: mediumvioletred;*/
border: none;
border-radius: 100%;
}
.ecm-card-action {
width: 90px;
height: 35px;
line-height: 15px;
font-size: 12px;
padding: 10px;
text-align: center;
border: 1px solid mediumvioletred;
border-radius: 2px;
float: right;
position: relative;
top: 15px;
color: #333;
right: 10px;
}
.ecm-card-action:HOVER {
background-color: mediumvioletred;
color: #fff;
}
.ecm-card-price {
/* width: 90px; */
/* height: 35px; */
/* line-height: 20px; */
font-size: 23px;
text-align: center;
/* border-radius: 2px; */
padding-right: 10px;
padding-top: 23px;
padding-bottom: 23px;
float: right;
/* position: relative; */
/* top: 15px; */
color: #333;
/* right: 10px; */
}
.top {
position: absolute;
right: 20px;
top: 15px;
}
.share {
background-image: url("../../../../assets/images/share.png");
border: none;
width: 40px;
height: 40px;
}
.share:hover {
background-color: transparent;
}
p {
color: #616161;
margin-bottom: 0;
line-height: 1.3;
}
/*
.thumbnail{
width: 350px !important;
height: 150px;
margin-bottom: 0;
border: 0;
}
p {
color: #616161;
margin-bottom: 0;
}
h5 {
margin-bottom: 0;
}
.media-object {
margin-bottom: 2rem;
border: 1px solid #c7c7c7;
border-radius: .17647059em;
}
@media screen and (max-width: 640px) {
.thumbnail {
width: 100% !important;
}
}
.media-object-section:first-child{
padding-right: 0;
}
*/
\ No newline at end of file
ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search-result/ecm-search-item/ecm-search-item.component.html 0 → 100755
View file @ ace68b04
<div *ngIf="item" class="ecm-card" (click)="openItem()" style="cursor: pointer;">
<img class="ecm-card-img"src="/ecm/assets/images/items/{{item.item_code}}.png"alt="Item image">
<div class="ecm-card-footer">
<div class="ecm-card-info">
<span class="ecm-card-info-title" style="padding-top: 5px;">{{item.item_descr}}</span>
<span class="ecm-card-info-subhead">{{item.cat_sh_descr}} - {{item.scat_sh_descr}}</span>
<span style="top: 10px; font-size: 15px; color: rgb(500, 150, 50); font-size: large;" class="ecm-card-info-subhead">
<span *ngFor="let a of createRatings(item.rating);">&#x2605;</span>
</span>
</div>
<!-- Currently Default Actions will be View and Share
<a class="ecm-card-action" routerLink="/view" routerLinkActive="active">View</a>
<a class="ecm-card-action top share" routerLink="/share" routerLinkActive="active"></a>
-->
<div class="ecm-card-price"><span style="color:#888;">₹</span>{{item.cost_rate}}</div>
</div>
</div>
<!--
<div *ngIf="item" class="media-object stack-for-small" style="cursor: pointer;" (click)="openItem()">
<div class="media-object-section">
<img class="thumbnail"
src="/ecm/assets/images/items/{{item.item_code}}.png"
alt="Item image">
</div>
<div style="padding-left: 0.5rem;" class="media-object-section">
<h5>{{item.item_descr}}</h5>
<p>{{item.cat_sh_descr}} - {{item.scat_sh_descr}}</p>
<p><span *ngFor="let a of createRatings(item.rating);">
<strong> &#x2605; </strong>
</span></p>
<p>
<b>₹ {{item.cost_rate}}</b>
</p>
</div>
</div>
-->
ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search-result/ecm-search-item/ecm-search-item.component.ts 0 → 100755
View file @ ace68b04
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-ecm-search-item',
templateUrl: './ecm-search-item.component.html',
styleUrls: ['./ecm-search-item.component.css']
})
export class EcmSearchItemComponent implements OnInit {
@Input() item;
constructor() { }
ngOnInit() {
}
openItem(){
alert(this.item.item_code);
}
createRatings(ratings){
var rating: number[] = [];
for(var i = 1; i <= ratings; i++){
rating.push(i);
}
return rating;
}
}
ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search-result/ecm-search-result.component.css 0 → 100755
View file @ ace68b04
h4{
color: #8F8F8F;
}
.categories-section {
padding: 0;
margin: 0;
padding-top: 100px;
padding-top: 50px;
background-color: #FFF;
}
.ecm-pagination-section {
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
}
.ecm-section-info-title {
font-size: 26px;
color: #444;
display: block;
}
.ecm-section-info-subhead {
font-size: 16px;
color: #888;
display: block;
}
.end {
padding-top: 15px;
padding-bottom: 50px;
}
.row.row-category {
max-width: 72rem;
}
.ecm-page {
width: 15px;
height: 15px;
font-size: 15px;
padding: 5px;
text-align: center;
border-radius: 100%;
color: mediumvioletred;
cursor: pointer;
}
.ecm-page:HOVER {
background-color: mediumvioletred;
color: #fff !important;
}
.ecm-result-header{
padding-left: 15px;
padding-right: 15px;
}
.arrow_logo{
height: 25px;
}
select{
height: inherit;
width: inherit;
padding: 0;
margin: 0;
font-size: 15px;
font-family: inherit;
float: right;
border: none;
line-height: inherit;
color: mediumvioletred;
background-color: #fefefe;
-moz-appearance: none;
background-image: url(../../../assets/images/down_arrow.png);
background-position: right .5rem center;
background-repeat: no-repeat;
background-size: initial;
width: 155px;
}
option{
color: #444;
}
ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search-result/ecm-search-result.component.html 0 → 100755
View file @ ace68b04
<ecm-header [isFixedHeader]=false> </ecm-header>
<div *ngIf="items">
<section class="categories-section">
<div class="row row-category">
<div class="ecm-result-header">
<span style="color: #444; font-size: 15px">{{items.response.numFound}} Results Found for {{value}}</span>
<select>
<option value="volvo">Popularity</option>
<option value="saab">Price: High to Low</option>
<option value="opel">Price: Low to High</option>
</select>
<span style="float: right; color: #444; font-size: 15px;">Sort By &nbsp; </span>
</div>
<div class="small-12 medium-6 large-4 column end "*ngFor="let item of items?.response?.docs">
<app-ecm-search-item [item]="item"></app-ecm-search-item>
</div>
<div style="width:100%; padding-left: 15px;padding-bottom: 50px;overflow: hidden;text-align: center;" class="ecm-pagination-section">
<span style="color: #444; float: left; font-size: 15px; padding-top: 5px;">Page {{activePage}} of {{pageCount}}</span>
<button [disabled]="isInvalidPrev()" (click)="loadPrevious()"><img class="arrow_logo" src="v_left_arrow_38_38.png"></button>
<span #page>
<span *ngFor="let a of createPages(); let i = index" class="ecm-page" (click)="goToPage(i)">{{i+1}}</span>
</span>
<button [disabled]="isInvalidNext()" (click)="loadNext()"><img class="arrow_logo" src="v_right_arrow_38_38.png"></button>
</div>
</div>
</section>
</div>
<ecm-footer> </ecm-footer>
<!--
<ecm-header [isFixedHeader]=false> </ecm-header>
<div class="column row">
<hr>
<div class="tabs-content">
<div class="tabs-panel is-active" id="panel1">
<span *ngIf="items">
<h4>{{items.response.numFound}} Results Found for {{value}}</h4>
</span>
<span *ngIf="!items">
<h4>No Results Found for {{value}}</h4>
</span>
<div *ngFor="let item of items?.response?.docs">
<app-ecm-result-item [item]="item"></app-ecm-result-item>
</div>
<button [disabled]="isInvalid()" (click)="loadNext()" class="button small expanded">Next</button>
</div>
</div>
</div>
<ecm-footer> </ecm-footer>
-->
\ No newline at end of file
ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search-result/ecm-search-result.component.ts 0 → 100755
View file @ ace68b04
import { Component, OnInit, ViewChild } from '@angular/core';
import { SearchService } from './search.service';
import {Http, Response, Headers} from '@angular/http';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-ecm-search-result',
templateUrl: './ecm-search-result.component.html',
styleUrls: ['./ecm-search-result.component.css']
})
export class EcmSearchResultComponent implements OnInit {
items;
value;
start=0;
numFound;
pageCount;
activePage;
@ViewChild('page') page;
constructor(private search_service: SearchService, private http:Http, private route:ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe( params => {
this.value = params['value'];
var URL= '/ecm/service/solr/local2do/'+this.value+'/json/0';
this.activePage=1;
this.isInvalidNext();
window.scrollTo(0,0);
this.http.get(URL)
.map(res => res.json())
.subscribe(data => this.items = data,
() => console.log('Completed'));
this.start=0;
}
);
}
isInvalidNext(){
if(this.items)
{
this.numFound=this.items.response.numFound;
this.pageCount=Math.ceil((this.numFound/10));
if(this.page)
this.highlightSelected();
}
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))
{
var URL= '/ecm/service/solr/local2do/'+this.value+'/json/'+this.start;
this.http.get(URL)
.map(res => res.json())
.subscribe(data => this.items = data,
() => console.log('Completed'));
}
}
loadPrevious(){
window.scrollTo(0,0);
this.isInvalidNext();
this.start-=10;
this.unHighlightPrev();
this.activePage-=1;
this.highlightSelected();
if(this.numFound>(this.start))
{
var URL= '/ecm/service/solr/local2do/'+this.value+'/json/'+this.start;
this.http.get(URL)
.map(res => res.json())
.subscribe(data => this.items = data,
() => console.log('Completed'));
}
}
createPages(){
var pages: number[] = [];
for(var i = 1; i <= this.pageCount; i++){
pages.push(i);
}
return pages;
}
goToPage(value){
window.scrollTo(0,0);
this.isInvalidNext();
this.start=(value+1)*10;
this.unHighlightPrev();
this.activePage=value+1;
this.highlightSelected();
if(this.numFound>(this.start))
{
var URL= '/ecm/service/solr/local2do/'+this.value+'/json/'+this.start;
this.http.get(URL)
.map(res => res.json())
.subscribe(data => this.items = data,
() => console.log('Completed'));
}
}
highlightSelected(){
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(){
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;
}
}
ecm/Angular/ProteusECM/trunk/src/app/ecm-search/ecm-search-result/search.service.ts 0 → 100755
View file @ ace68b04
import { Injectable } from '@angular/core';
import {Http, Response, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class SearchService {
val;
constructor() { }
setSearch(value){
this.val=value;
}
getSearch(){
return this.val;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment