@ -1,17 +0,0 @@ | |||||
<esh-header url="/campaigns">Back to campaigns</esh-header> | |||||
<div class="container"> | |||||
<div class="esh-campaign_detail"> | |||||
<div class="card esh-campaigns-items"> | |||||
<img class="card-img-top" src="{{campaign.pictureUri}}" alt="{{campaign.name}}"> | |||||
<div class="card-body"> | |||||
<h4 class="card-title">{{campaign.name}}</h4> | |||||
<p class="card-text">{{campaign.description}}</p> | |||||
</div> | |||||
<div class="card-footer"> | |||||
<small class="text-muted"> | |||||
From {{campaign.from | date}} Until {{campaign.to | date}} | |||||
</small> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> |
@ -1,57 +0,0 @@ | |||||
@import '../../variables'; | |||||
.esh-campaign_detail { | |||||
min-height: 80vh; | |||||
margin-top: 1rem; | |||||
&-section { | |||||
padding: 1rem 0; | |||||
&--right { | |||||
text-align: right; | |||||
} | |||||
} | |||||
&-titles { | |||||
padding-bottom: 1rem; | |||||
padding-top: 2rem; | |||||
} | |||||
&-title { | |||||
text-transform: uppercase; | |||||
} | |||||
&-items { | |||||
&--border { | |||||
border-bottom: $border-light solid $color-foreground-bright; | |||||
padding: .5rem 0; | |||||
&:last-of-type { | |||||
border-color: transparent; | |||||
} | |||||
} | |||||
} | |||||
$item-height: 8rem; | |||||
&-item { | |||||
font-size: $font-size-m; | |||||
font-weight: $font-weight-semilight; | |||||
&--middle { | |||||
line-height: $item-height; | |||||
@media screen and (max-width: $media-screen-s) { | |||||
line-height: $font-size-m; | |||||
} | |||||
} | |||||
&--mark { | |||||
color: $color-secondary; | |||||
} | |||||
} | |||||
&-image { | |||||
height: $item-height; | |||||
} | |||||
} |
@ -1,30 +0,0 @@ | |||||
import { Component, OnInit } from '@angular/core'; | |||||
import { CampaignsService } from '../campaigns.service'; | |||||
import { ICampaignItem } from '../../shared/models/campaignItem.model'; | |||||
import { ActivatedRoute } from '@angular/router'; | |||||
@Component({ | |||||
selector: 'esh-campaigns_detail', | |||||
styleUrls: ['./campaigns-detail.component.scss'], | |||||
templateUrl: './campaigns-detail.component.html' | |||||
}) | |||||
export class CampaignsDetailComponent implements OnInit { | |||||
public campaign: ICampaignItem = <ICampaignItem>{}; | |||||
constructor(private service: CampaignsService, private route: ActivatedRoute) { } | |||||
ngOnInit() { | |||||
this.route.params.subscribe(params => { | |||||
let id = +params['id']; // (+) converts string 'id' to a number | |||||
this.getCampaign(id); | |||||
}); | |||||
} | |||||
getCampaign(id: number) { | |||||
this.service.getCampaign(id).subscribe(campaign => { | |||||
this.campaign = campaign; | |||||
console.log('campaign retrieved: ' + campaign.id); | |||||
console.log(this.campaign); | |||||
}); | |||||
} | |||||
} |
@ -1,43 +0,0 @@ | |||||
<esh-header url="/catalog">Back to catalog</esh-header> | |||||
<br /> | |||||
<div class="container"> | |||||
<div class="alert alert-warning esh-campaign-alert" role="alert" [hidden]="!errorReceived"> | |||||
Error requesting campaigns list, please try later on | |||||
</div> | |||||
<div *ngIf="campaigns?.data?.length > 0"> | |||||
<div class="card-group esh-campaign-items row"> | |||||
<div class="esh-campaign-item col-md-4" | |||||
*ngFor="let item of campaigns.data"> | |||||
<div class="card"> | |||||
<img class="card-img-top esh-campaign-thumbnail" src="{{item.pictureUri}}" alt="{{item.name}}"> | |||||
<div class="card-body"> | |||||
<h4 class="card-title esh-campaign-name">{{item.name}}</h4> | |||||
<button *ngIf="isCampaignDetailFunctionEnabled == true; else showDefaultDetailsLink" [ngClass]="{'esh-campaigns-button': true}" (click)="onNavigateToDetails(item.detailsUri)">More details</button> | |||||
<ng-template #showDefaultDetailsLink> | |||||
<input [ngClass]="{'esh-campaign-button': true}" type="submit" value="More details" routerLink="/campaigns/{{item.id}}"> | |||||
</ng-template> | |||||
</div> | |||||
<div class="card-footer esh-campaigns-card-footer-text"> | |||||
<small class="text-muted"> | |||||
From {{item.from | date }} To {{item.to | date }} | |||||
</small> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<br /> | |||||
<esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager> | |||||
</div> | |||||
<br /> | |||||
<div *ngIf="campaigns?.data?.length == 0"> | |||||
<span>THERE ARE NO RESULTS THAT MATCH YOUR SEARCH</span> | |||||
</div> | |||||
<br /> | |||||
<br /> | |||||
</div> | |||||
@ -1,78 +0,0 @@ | |||||
@import '../variables'; | |||||
.esh-campaign { | |||||
$banner-height: 260px; | |||||
&-title { | |||||
position: relative; | |||||
top: $banner-height / 3.5; | |||||
} | |||||
&-items { | |||||
margin-top: 1rem; | |||||
} | |||||
&-item { | |||||
margin-bottom: 1.5rem; | |||||
text-align: center; | |||||
width: 33%; | |||||
display: inline-block; | |||||
float: none !important; | |||||
@media screen and (max-width: $media-screen-m) { | |||||
width: 50%; | |||||
} | |||||
@media screen and (max-width: $media-screen-s) { | |||||
width: 100%; | |||||
} | |||||
} | |||||
&-thumbnail { | |||||
max-width: 370px; | |||||
width: 100%; | |||||
} | |||||
&-button { | |||||
background-color: $color-secondary; | |||||
border: 0; | |||||
color: $color-foreground-brighter; | |||||
cursor: pointer; | |||||
font-size: $font-size-m; | |||||
height: 3rem; | |||||
margin-top: 1rem; | |||||
transition: all $animation-speed-default; | |||||
width: 80%; | |||||
&.is-disabled { | |||||
opacity: .5; | |||||
pointer-events: none; | |||||
} | |||||
&:hover { | |||||
background-color: $color-secondary-darker; | |||||
transition: all $animation-speed-default; | |||||
} | |||||
} | |||||
&-name { | |||||
font-size: $font-size-m; | |||||
font-weight: $font-weight-semilight; | |||||
margin-top: .5rem; | |||||
text-align: center; | |||||
text-transform: uppercase; | |||||
} | |||||
&-alert { | |||||
margin-top: 10px; | |||||
} | |||||
} | |||||
.esh-campaigns-card { | |||||
&-footer-text { | |||||
white-space: nowrap; | |||||
overflow: hidden; | |||||
text-overflow: ellipsis; | |||||
} | |||||
} |
@ -1,67 +0,0 @@ | |||||
import { Component, OnInit } from '@angular/core'; | |||||
import { CampaignsService } from './campaigns.service'; | |||||
import { ICampaign } from '../shared/models/campaign.model'; | |||||
import { IPager } from '../shared/models/pager.model'; | |||||
import { ConfigurationService } from '../shared/services/configuration.service'; | |||||
import { Observable } from 'rxjs'; | |||||
import { catchError } from 'rxjs/operators'; | |||||
@Component({ | |||||
selector: 'esh-campaigns', | |||||
styleUrls: ['./campaigns.component.scss'], | |||||
templateUrl: './campaigns.component.html' | |||||
}) | |||||
export class CampaignsComponent implements OnInit { | |||||
private interval = null; | |||||
paginationInfo: IPager; | |||||
campaigns: ICampaign; | |||||
isCampaignDetailFunctionEnabled: boolean = false; | |||||
errorReceived: boolean; | |||||
constructor(private service: CampaignsService, private configurationService: ConfigurationService) { } | |||||
ngOnInit() { | |||||
if (this.configurationService.isReady) { | |||||
this.isCampaignDetailFunctionEnabled = this.configurationService.serverSettings.activateCampaignDetailFunction; | |||||
this.getCampaigns(9, 0) | |||||
} else { | |||||
this.configurationService.settingsLoaded$.subscribe(x => { | |||||
this.isCampaignDetailFunctionEnabled = this.configurationService.serverSettings.activateCampaignDetailFunction; | |||||
this.getCampaigns(9, 0); | |||||
}); | |||||
} | |||||
} | |||||
onPageChanged(value: any) { | |||||
console.log('campaigns pager event fired' + value); | |||||
//event.preventDefault(); | |||||
this.paginationInfo.actualPage = value; | |||||
this.getCampaigns(this.paginationInfo.itemsPage, value); | |||||
} | |||||
getCampaigns(pageSize: number, pageIndex: number) { | |||||
this.errorReceived = false; | |||||
this.service.getCampaigns(pageIndex, pageSize) | |||||
.pipe(catchError((err) => this.handleError(err))) | |||||
.subscribe(campaigns => { | |||||
this.campaigns = campaigns; | |||||
this.paginationInfo = { | |||||
actualPage : campaigns.pageIndex, | |||||
itemsPage : campaigns.pageSize, | |||||
totalItems : campaigns.count, | |||||
totalPages: Math.ceil(campaigns.count / campaigns.pageSize), | |||||
items: campaigns.pageSize | |||||
}; | |||||
}); | |||||
} | |||||
onNavigateToDetails(uri: string) { | |||||
window.open(uri, "_blank"); | |||||
} | |||||
private handleError(error: any) { | |||||
this.errorReceived = true; | |||||
return Observable.throw(error); | |||||
} | |||||
} | |||||
@ -1,15 +0,0 @@ | |||||
import { NgModule } from '@angular/core'; | |||||
import { BrowserModule } from '@angular/platform-browser'; | |||||
import { SharedModule } from '../shared/shared.module'; | |||||
import { CampaignsComponent } from './campaigns.component'; | |||||
import { CampaignsDetailComponent } from './campaigns-detail/campaigns-detail.component'; | |||||
import { CampaignsService } from './campaigns.service'; | |||||
import { Header } from '../shared/components/header/header'; | |||||
@NgModule({ | |||||
imports: [BrowserModule, SharedModule], | |||||
declarations: [CampaignsComponent, CampaignsDetailComponent], | |||||
providers: [CampaignsService] | |||||
}) | |||||
export class CampaignsModule { } |
@ -1,47 +0,0 @@ | |||||
import { Injectable } from '@angular/core'; | |||||
import { DataService } from '../shared/services/data.service'; | |||||
import { ICampaign } from '../shared/models/campaign.model'; | |||||
import { ICampaignItem } from '../shared/models/campaignItem.model'; | |||||
import { SecurityService } from '../shared/services/security.service'; | |||||
import { ConfigurationService } from '../shared/services/configuration.service'; | |||||
import { Observable } from 'rxjs'; | |||||
import { tap } from 'rxjs/operators'; | |||||
@Injectable() | |||||
export class CampaignsService { | |||||
private marketingUrl: string = ''; | |||||
private buyerId: string = ''; | |||||
constructor(private service: DataService, private identityService: SecurityService, private configurationService: ConfigurationService) { | |||||
if (this.identityService.IsAuthorized) { | |||||
if (this.identityService.UserData) { | |||||
this.buyerId = this.identityService.UserData.sub; | |||||
} | |||||
} | |||||
if (this.configurationService.isReady) | |||||
this.marketingUrl = this.configurationService.serverSettings.marketingUrl; | |||||
else | |||||
this.configurationService.settingsLoaded$.subscribe(x => this.marketingUrl = this.configurationService.serverSettings.marketingUrl); | |||||
} | |||||
getCampaigns(pageIndex: number, pageSize: number): Observable<ICampaign> { | |||||
let url = this.marketingUrl + '/m/api/v1/campaigns/user'; | |||||
url = url + '?pageIndex=' + pageIndex + '&pageSize=' + pageSize; | |||||
return this.service.get(url).pipe<ICampaign>(tap((response: any) => { | |||||
return response; | |||||
})); | |||||
} | |||||
getCampaign(id: number): Observable<ICampaignItem> { | |||||
let url = this.marketingUrl + '/m/api/v1/campaigns/' + id; | |||||
return this.service.get(url).pipe<ICampaignItem>(tap((response: any) => { | |||||
return response; | |||||
})); | |||||
} | |||||
} | |||||