Code language |
TS |
import { HttpClient } from
’@angular/common/http’;
import { Component, EventEmitter,
Input, OnInit, Output } from ’@angular/core’;
import {
take } from ’rxjs/operators’;
import { AccessType } from
’~/shared/models/access-type.model’;
import
{ CorporateInformationModel } from
’~/shared/models/corporate-information-model.model’;
import
{ AccessTypeService } from
’~/shared/services/access-type.service’;
@Component({
selector:
’app-corporate-information-card’,
templateUrl:
’./corporate-information-card.component.html’,
styleUrls:
[’./corporate-information-card.component.scss’]
})
export
class CorporateInformationCardComponent implements OnInit
{
@Output()
public cardClicked = new
EventEmitter();
@Input()
public
corporateInformation:
CorporateInformationModel;
@Input()
public
parentSelectedIdx = -1;
public accessTypes:
Array<AccessType> = [];
//
public html = ‘<span style=”min-width: 100px;”
class=”btn-block btn-danger well-sm”>Never trust not
sanitized
HTML!!!</span>‘;
constructor(private
httpClient: HttpClient,
private accessTypeService:
AccessTypeService) { }
// tslint:disable-next-line:
no-empty
public ngOnInit(): void
{
this.accessTypeService.getAccessTypeById(this.corporateInformation.AccessTypes.map((t)
=> { return t.Id
}))
.pipe(take(1))
.subscribe((at)
=> {
this.accessTypes =
at;
})
}
public navigate()
{
this.cardClicked.emit(this.corporateInformation);
}
public
get valueStreams(): string {
let valueString =
”;
this.corporateInformation.ValueStream.forEach((vs,
index) => {
valueString =
valueString.concat(vs.Title);
if (index <
this.corporateInformation.ValueStream.length -
1)
valueString = valueString.concat(’,
’)
});
return
valueString;
}
public get sourceSystems():
string {
let valueString =
”;
this.corporateInformation.SourceSystems?.forEach((ss,
index) => {
valueString =
valueString.concat(ss.Title);
if (index <
this.corporateInformation.SourceSystems.length -
1)
valueString = valueString.concat(’ /
’)
});
return
valueString;
}
public openPBIX()
{
// tslint:disable-next-line:
deprecation
event.stopPropagation();
this.download();
}
public
download() {
if (!this.corporateInformation.PBIXFilePath)
{
alert(’Error \nThe PBIX File Path is
empty’);
return;
}
window.open(’../../’
+ this.corporateInformation.PBIXFilePath,
’_blank’);
}
public copyLinkToClipBoard()
{
// tslint:disable-next-line:
deprecation
event.stopPropagation();
const
selBox =
document.createElement(’textarea’);
selBox.style.position =
’fixed’;
selBox.style.left =
’0’;
selBox.style.top =
’0’;
selBox.style.opacity = ’0’;
selBox.value
=
this.corporateInformation.ServerAddress;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand(’copy’);
document.body.removeChild(selBox);
}
public
get isUnderDevelopment(): boolean {
return
this.corporateInformation.Status?.toLocaleLowerCase() === ’under
development’;
}
}
|
import { HttpClient } from
’@angular/common/http’;
import { Component, EventEmitter,
Input, OnInit, Output } from ’@angular/core’;
import {
take } from ’rxjs/operators’;
import { AccessType } from
’~/shared/models/access-type.model’;
import
{ CorporateInformationModel } from
’~/shared/models/corporate-information-model.model’;
import
{ AccessTypeService } from
’~/shared/services/access-type.service’;
@Component({
selector:
’app-corporate-information-card’,
templateUrl:
’./corporate-information-card.component.html’,
styleUrls:
[’./corporate-information-card.component.scss’]
})
export
class CorporateInformationCardComponent implements OnInit
{
@Output()
public cardClicked = new
EventEmitter();
@Input()
public
corporateInformation:
CorporateInformationModel;
@Input()
public
parentSelectedIdx = -1;
public accessTypes:
Array<AccessType> = [];
//
public html = ‘<span style=”min-width: 100px;”
class=”btn-block btn-danger well-sm”>Never trust not
sanitized
HTML!!!</span>‘;
constructor(private
httpClient: HttpClient,
private accessTypeService:
AccessTypeService) { }
// tslint:disable-next-line:
no-empty
public ngOnInit(): void
{
this.accessTypeService.getAccessTypeById(this.corporateInformation.AccessTypes.map((t)
=> { return t.Id
}))
.pipe(take(1))
.subscribe((at)
=> {
this.accessTypes =
at;
})
}
public navigate()
{
this.cardClicked.emit(this.corporateInformation);
}
public
get valueStreams(): string {
let valueString =
”;
this.corporateInformation.ValueStream.forEach((vs,
index) => {
valueString =
valueString.concat(vs.Title);
if (index <
this.corporateInformation.ValueStream.length -
1)
valueString = valueString.concat(’,
’)
});
return
valueString;
}
public get sourceSystems():
string {
let valueString =
”;
this.corporateInformation.SourceSystems?.forEach((ss,
index) => {
valueString =
valueString.concat(ss.Title);
if (index <
this.corporateInformation.SourceSystems.length -
1)
valueString = valueString.concat(’ /
’)
});
return
valueString;
}
public openPBIX()
{
// tslint:disable-next-line:
deprecation
event.stopPropagation();
this.download();
}
public
download() {
if (!this.corporateInformation.PBIXFilePath)
{
alert(’Error \nThe PBIX File Path is
empty’);
return;
}
window.open(’../../’
+ this.corporateInformation.PBIXFilePath,
’_blank’);
}
public copyLinkToClipBoard()
{
// tslint:disable-next-line:
deprecation
event.stopPropagation();
const
selBox =
document.createElement(’textarea’);
selBox.style.position =
’fixed’;
selBox.style.left =
’0’;
selBox.style.top =
’0’;
selBox.style.opacity = ’0’;
selBox.value
=
this.corporateInformation.ServerAddress;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand(’copy’);
document.body.removeChild(selBox);
}
public
get isUnderDevelopment(): boolean {
return
this.corporateInformation.Status?.toLocaleLowerCase() === ’under
development’;
}
}
|
Code language |
SCSS |
.main {
display:
flex;
flex-direction: column;
width:
320px;
min-height: 510px;
background-color:
#ffffff;
border: 1px solid
#c7d0d8;
border-radius: 3.5px;
transition:
box-shadow 0.3s ease-in-out, border 0.3s
ease-in-out;
-webkit-box-direction:
normal;
-webkit-box-orient:
vertical;
span,
label {
cursor:
pointer;
}
}
a
{
text-decoration: none;
cursor:
pointer;
}
.selected {
border:
1px solid rgb(39, 125, 255);
}
.main:hover
{
border: 1px solid rgb(39, 125,
255);
box-shadow: 0 3px 10px 0 rgba(0, 0, 0,
0.15);
-moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0,
0.15);
-webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0,
0.15);
transition: box-shadow 0.3s ease-in-out, border 0.3s
ease-in-out;
}
.header
{
height: rem(120px);
background-color:
rgba(241, 244, 249, 0.44);
border-radius:
4px;
.new {
width: 40px;
height:
17px;
margin-top: 3px;
color:
#ffffff;
font-size: 10px;
font-weight:
700;
letter-spacing: 1.21px;
background-color:
#47b280;
border-radius:
8.5px;
}
span:nth-child(1)
{
display: block;
max-width:
260px;
overflow: hidden;
color:
#39414d;
font-weight: 700;
text-overflow:
ellipsis;
letter-spacing: 0.7px;
white-space:
nowrap;
}
span:nth-child(2)
{
display: -webkit-box;
overflow:
hidden;
color: #39414d;
font-size:
13px;
text-overflow:
ellipsis;
-webkit-box-orient:
vertical;
-webkit-line-clamp:
4;
}
}
.body
{
position: relative;
flex: 1 1
auto;
padding: 1rem;
-ms-flex: 1 1
auto;
-webkit-box-flex:
1;
}
label {
margin:
0;
color: #39414d;
font-size:
11px;
font-weight: bold;
letter-spacing:
0.55px;
}
.data {
display:
block;
max-width: 100%;
overflow:
hidden;
color: #39414d;
font-size:
14px;
text-overflow: ellipsis;
letter-spacing:
0.55px;
white-space:
nowrap;
}
.avatar {
width:
rem(20px);
height: rem(20px);
object-fit:
cover;
}
.contat-name
{
display: block;
max-width:
100%;
overflow: hidden;
font-size:
14px;
text-overflow: ellipsis;
white-space:
nowrap;
}
.tag {
overflow:
hidden;
color: #39414d;
font-size:
12px;
background-color:
#e8ecf2;
border-radius:
10.5px;
}
.tags-area
{
min-height:
22px;
}
.source-system
{
display: -webkit-box;
overflow:
hidden;
font-size: 14px;
text-overflow:
ellipsis;
-webkit-box-orient:
vertical;
-webkit-line-clamp: 2;
min-height:
42px;
}
.card-footer
{
background-color: #ffffff;
border:
0;
}
.get-started {
width:
280px;
height: 40px;
color:
#ffffff;
background-color:
#1683fb;
border-radius:
3px;
}
.get-started:disabled
{
color: #666666;
background-color:
#cccccc;
border: 1px solid #999999;
}
|
.main {
display:
flex;
flex-direction: column;
width:
320px;
min-height: 510px;
background-color:
#ffffff;
border: 1px solid
#c7d0d8;
border-radius: 3.5px;
transition:
box-shadow 0.3s ease-in-out, border 0.3s
ease-in-out;
-webkit-box-direction:
normal;
-webkit-box-orient:
vertical;
span,
label {
cursor:
pointer;
}
}
a
{
text-decoration: none;
cursor:
pointer;
}
.selected {
border:
1px solid rgb(39, 125, 255);
}
.main:hover
{
border: 1px solid rgb(39, 125,
255);
box-shadow: 0 3px 10px 0 rgba(0, 0, 0,
0.15);
-moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0,
0.15);
-webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0,
0.15);
transition: box-shadow 0.3s ease-in-out, border 0.3s
ease-in-out;
}
.header
{
height: rem(120px);
background-color:
rgba(241, 244, 249, 0.44);
border-radius:
4px;
.new {
width: 40px;
height:
17px;
margin-top: 3px;
color:
#ffffff;
font-size: 10px;
font-weight:
700;
letter-spacing: 1.21px;
background-color:
#47b280;
border-radius:
8.5px;
}
span:nth-child(1)
{
display: block;
max-width:
260px;
overflow: hidden;
color:
#39414d;
font-weight: 700;
text-overflow:
ellipsis;
letter-spacing: 0.7px;
white-space:
nowrap;
}
span:nth-child(2)
{
display: -webkit-box;
overflow:
hidden;
color: #39414d;
font-size:
13px;
text-overflow:
ellipsis;
-webkit-box-orient:
vertical;
-webkit-line-clamp:
4;
}
}
.body
{
position: relative;
flex: 1 1
auto;
padding: 1rem;
-ms-flex: 1 1
auto;
-webkit-box-flex:
1;
}
label {
margin:
0;
color: #39414d;
font-size:
11px;
font-weight: bold;
letter-spacing:
0.55px;
}
.data {
display:
block;
max-width: 100%;
overflow:
hidden;
color: #39414d;
font-size:
14px;
text-overflow: ellipsis;
letter-spacing:
0.55px;
white-space:
nowrap;
}
.avatar {
width:
rem(20px);
height: rem(20px);
object-fit:
cover;
}
.contat-name
{
display: block;
max-width:
100%;
overflow: hidden;
font-size:
14px;
text-overflow: ellipsis;
white-space:
nowrap;
}
.tag {
overflow:
hidden;
color: #39414d;
font-size:
12px;
background-color:
#e8ecf2;
border-radius:
10.5px;
}
.tags-area
{
min-height:
22px;
}
.source-system
{
display: -webkit-box;
overflow:
hidden;
font-size: 14px;
text-overflow:
ellipsis;
-webkit-box-orient:
vertical;
-webkit-line-clamp: 2;
min-height:
42px;
}
.card-footer
{
background-color: #ffffff;
border:
0;
}
.get-started {
width:
280px;
height: 40px;
color:
#ffffff;
background-color:
#1683fb;
border-radius:
3px;
}
.get-started:disabled
{
color: #666666;
background-color:
#cccccc;
border: 1px solid
#999999;
}
|
Code language |
HTML |
<a href=”javascript:;” (click)=”navigate()”
class=”cursor-pointer”>
<div
class=”main m-2” [ngClass]=”{’selected’: parentSelectedIdx ===
corporateInformation.Id}”>
<div
*ngIf=”corporateInformation” class=”header d-flex flex-column px-3
pt-2”>
<div class=”row no-gutters”
*ngIf=”corporateInformation”>
<div
class=”d-flex col-md-11”>
<span
class=”mr-2”
[attr.title]=”corporateInformation.Title”>{{corporateInformation.Title}}
</span>
<div class=”new
d-flex align-items-center justify-content-center”
*ngIf=”corporateInformation.isNew”>NEW</div>
</div>
<div
*ngIf=”isUnderDevelopment” class=” d-flex justify-content-end
align-items-center col-md-1”>
<i
class=”fas fa-tools”
tooltip=”Under
Development”
containerClass=”custom-tooltip”
style=”
font-size: 18px; color:
#e00000;”></i>
</div>
</div>
<span
[attr.title]=”corporateInformation.Description”>{{corporateInformation.Description}}</span>
</div>
<div
*ngIf=”corporateInformation”
class=”body”>
<div class=”d-flex
flex-column”>
<label>VALUE
STREAM</label>
<span
[attr.title]=”valueStreams”
class=”data”>{{valueStreams}}</span>
</div>
<div
class=”d-flex flex-column
mt-3”>
<label>SOURCE
SYSTEMS</label>
<div
class=”row no-gutters pt-1
tags-area”>
<span
[attr.title]=”sourceSystems”
class=”source-system”>{{sourceSystems}}</span>
</div>
</div>
<div
class=”d-flex flex-column
mt-3”>
<label>TAGS</label>
<div
class=”row no-gutters pt-1
tags-area”>
<span *ngFor=”let item
of corporateInformation.Tags” class=”tag mr-2 px-2
d-block”>{{item.Title}}</span>
</div>
</div>
<div
class=”d-flex flex-column
mt-3”>
<label>ADDRESS
(Click to
copy)</label>
<span
#pop=”bs-tooltip”
triggers=””
tooltip=”Copied
to clipboard”
[attr.title]=”’Click to copy to Clipboard
\n’ +
corporateInformation.ServerAddress”
class=”data”
(click)=”copyLinkToClipBoard();
pop.show();”
(mouseleave)=”pop.hide();”
style=”color:
#1683fb”>{{corporateInformation.ServerAddress}}</span>
</div>
<div
class=”row”>
<div
class=”col-md-7”>
<div class=”d-flex
flex-column
mt-3”>
<label>ACCESS</label>
<div
class=”d-flex”>
<div class=”d-flex”
*ngFor=”let at of accessTypes”>
<a
(click)=”$event.stopPropagation()”
style=”color:
#1683fb”
class=”data”
href={{at.Url.Url}}
target=”_blank”>{{at.Title}}
</a>
<a
*ngIf=”at.HelpLink”
href=”{{at.HelpLink.Url}}”
style=”font-size:
14px; color: #39414d; padding-left:
0.1rem;”
(click)=”$event.stopPropagation()”
tooltip=”{{at.Title}}
Help”
[delay]=500
target=”_blank”>
<i
class=”fas fa-question-circle
pr-2”></i></a>
</div>
</div>
</div>
</div>
<div
class=”col-md-5”>
<div class=”d-flex
flex-column
mt-3”>
<label>REFRESH
RATE</label>
<span
class=”data”>{{corporateInformation.RefreshFrequency.Value}}</span>
</div>
</div>
</div>
<div
class=”row”>
<div class=”col-md-7
pr-0”>
<div class=”d-flex
flex-column
mt-3”>
<label>CONTACT</label>
<div
class=”user d-flex”
*ngIf=”corporateInformation.Contact”>
<img
src=”/_layouts/15/userphoto.aspx?size=L&username={{
corporateInformation.Contact.Email }}”
class=”avatar
img-thumbnail rounded-circle shadow-sm p-0
mr-1”
[attr.title]=”corporateInformation.Contact.Title”
[attr.alt]=”corporateInformation.Contact.Email”>
<span
class=”contat-name”
[attr.title]=”corporateInformation.Contact.Email”>
{{
corporateInformation.Contact.Title
}}
</span>
</div>
</div>
</div>
<div
class=”col-md-5”>
<div class=”d-flex
flex-column
mt-3”>
<label>AVAILABLE
SINCE</label>
<span
[attr.title]=”corporateInformation.AvailableSince”
class=”data”>{{corporateInformation.AvailableSince
| date:
’dd-MMM-yy’}}</span>
</div>
</div>
</div>
</div>
<div
class=”card-footer”>
<button
type=”submit”
[disabled]=”!corporateInformation.PBIXFilePath
||
isUnderDevelopment”
(click)=”openPBIX()”
class=”btn
btn-block get-started”>Get Started in Power
BI</button>
</div>
</div>
</a>
|
<a href=”javascript:;”
(click)=”navigate()”
class=”cursor-pointer”>
<div
class=”main m-2” [ngClass]=”{’selected’: parentSelectedIdx ===
corporateInformation.Id}”>
<div
*ngIf=”corporateInformation” class=”header d-flex flex-column px-3
pt-2”>
<div class=”row no-gutters”
*ngIf=”corporateInformation”>
<div
class=”d-flex col-md-11”>
<span
class=”mr-2”
[attr.title]=”corporateInformation.Title”>{{corporateInformation.Title}}
</span>
<div class=”new
d-flex align-items-center justify-content-center”
*ngIf=”corporateInformation.isNew”>NEW</div>
</div>
<div
*ngIf=”isUnderDevelopment” class=” d-flex justify-content-end
align-items-center col-md-1”>
<i
class=”fas fa-tools”
tooltip=”Under
Development”
containerClass=”custom-tooltip”
style=”
font-size: 18px; color:
#e00000;”></i>
</div>
</div>
<span
[attr.title]=”corporateInformation.Description”>{{corporateInformation.Description}}</span>
</div>
<div
*ngIf=”corporateInformation”
class=”body”>
<div class=”d-flex
flex-column”>
<label>VALUE
STREAM</label>
<span
[attr.title]=”valueStreams”
class=”data”>{{valueStreams}}</span>
</div>
<div
class=”d-flex flex-column
mt-3”>
<label>SOURCE
SYSTEMS</label>
<div
class=”row no-gutters pt-1
tags-area”>
<span
[attr.title]=”sourceSystems”
class=”source-system”>{{sourceSystems}}</span>
</div>
</div>
<div
class=”d-flex flex-column
mt-3”>
<label>TAGS</label>
<div
class=”row no-gutters pt-1
tags-area”>
<span *ngFor=”let item
of corporateInformation.Tags” class=”tag mr-2 px-2
d-block”>{{item.Title}}</span>
</div>
</div>
<div
class=”d-flex flex-column
mt-3”>
<label>ADDRESS
(Click to
copy)</label>
<span
#pop=”bs-tooltip”
triggers=””
tooltip=”Copied
to clipboard”
[attr.title]=”’Click to copy to Clipboard
\n’ +
corporateInformation.ServerAddress”
class=”data”
(click)=”copyLinkToClipBoard();
pop.show();”
(mouseleave)=”pop.hide();”
style=”color:
#1683fb”>{{corporateInformation.ServerAddress}}</span>
</div>
<div
class=”row”>
<div
class=”col-md-7”>
<div class=”d-flex
flex-column
mt-3”>
<label>ACCESS</label>
<div
class=”d-flex”>
<div class=”d-flex”
*ngFor=”let at of accessTypes”>
<a
(click)=”$event.stopPropagation()”
style=”color:
#1683fb”
class=”data”
href={{at.Url.Url}}
target=”_blank”>{{at.Title}}
</a>
<a
*ngIf=”at.HelpLink”
href=”{{at.HelpLink.Url}}”
style=”font-size:
14px; color: #39414d; padding-left:
0.1rem;”
(click)=”$event.stopPropagation()”
tooltip=”{{at.Title}}
Help”
[delay]=500
target=”_blank”>
<i
class=”fas fa-question-circle
pr-2”></i></a>
</div>
</div>
</div>
</div>
<div
class=”col-md-5”>
<div class=”d-flex
flex-column
mt-3”>
<label>REFRESH
RATE</label>
<span
class=”data”>{{corporateInformation.RefreshFrequency.Value}}</span>
</div>
</div>
</div>
<div
class=”row”>
<div class=”col-md-7
pr-0”>
<div class=”d-flex
flex-column
mt-3”>
<label>CONTACT</label>
<div
class=”user d-flex”
*ngIf=”corporateInformation.Contact”>
<img
src=”/_layouts/15/userphoto.aspx?size=L&username={{
corporateInformation.Contact.Email }}”
class=”avatar
img-thumbnail rounded-circle shadow-sm p-0
mr-1”
[attr.title]=”corporateInformation.Contact.Title”
[attr.alt]=”corporateInformation.Contact.Email”>
<span
class=”contat-name”
[attr.title]=”corporateInformation.Contact.Email”>
{{
corporateInformation.Contact.Title
}}
</span>
</div>
</div>
</div>
<div
class=”col-md-5”>
<div class=”d-flex
flex-column
mt-3”>
<label>AVAILABLE
SINCE</label>
<span
[attr.title]=”corporateInformation.AvailableSince”
class=”data”>{{corporateInformation.AvailableSince
| date:
’dd-MMM-yy’}}</span>
</div>
</div>
</div>
</div>
<div
class=”card-footer”>
<button
type=”submit”
[disabled]=”!corporateInformation.PBIXFilePath
||
isUnderDevelopment”
(click)=”openPBIX()”
class=”btn
btn-block get-started”>Get Started in Power
BI</button>
</div>
</div>
</a>
|
Card name |
Value Stream Card |
Code language |
TS |
import { Component, Input, OnInit } from
’@angular/core’;
import { Router } from
’@angular/router’;
import { CorporateInformationModel }
from
’~/shared/models/corporate-information-model.model’;
import
{ ValueStream } from
’~/shared/models/value-stream.model’;
@Component({
selector:
’app-value-strem-card’,
templateUrl:
’./value-strem-card.component.html’,
styleUrls:
[’./value-strem-card.component.scss’]
})
export
class ValueStremCardComponent implements OnInit
{
@Input()
public valueStream:
ValueStream;
public MaxCorporateInformationsToShow =
4;
constructor(
private router:
Router
) { }
// tslint:disable-next-line:
no-empty
public ngOnInit() { }
public
cardClicked() {
this.router.navigate([’/value-stream’,
this.valueStream.Id, ’details’])
}
public
corporateInformationClicked(ci: CorporateInformationModel)
{
this.router.navigate([’/value-stream’,
this.valueStream.Id, ’details’,
ci.Id])
}
public get countNew(): number
{
let count =
0;
this.valueStream.CorporateInformations.forEach((element)
=> {
if (element.isNew)
count =
count + 1;
});
return
count;
}
}
|
import {
Component, Input, OnInit } from ’@angular/core’;
import {
Router } from ’@angular/router’;
import {
CorporateInformationModel } from
’~/shared/models/corporate-information-model.model’;
import
{ ValueStream } from
’~/shared/models/value-stream.model’;
@Component({
selector:
’app-value-strem-card’,
templateUrl:
’./value-strem-card.component.html’,
styleUrls:
[’./value-strem-card.component.scss’]
})
export
class ValueStremCardComponent implements OnInit
{
@Input()
public valueStream:
ValueStream;
public MaxCorporateInformationsToShow =
4;
constructor(
private router:
Router
) { }
// tslint:disable-next-line:
no-empty
public ngOnInit() { }
public
cardClicked() {
this.router.navigate([’/value-stream’,
this.valueStream.Id, ’details’])
}
public
corporateInformationClicked(ci: CorporateInformationModel)
{
this.router.navigate([’/value-stream’,
this.valueStream.Id, ’details’,
ci.Id])
}
public get countNew(): number
{
let count =
0;
this.valueStream.CorporateInformations.forEach((element)
=> {
if (element.isNew)
count =
count + 1;
});
return
count;
}
}
|
Code language |
SCSS |
a {
color:
#ffffff;
text-decoration: none;
cursor:
pointer;
}
.card-value-stream
{
background-color: #ffffff;
border-radius:
4px;
border: 1px solid
#dfe2e6;
}
.header
{
background-color:
#39414d;
border-top-left-radius:
4px;
border-top-right-radius:
4px;
}
.body {
min-height:
rem(72px);
background-color:
#ffffff;
border-radius:
4px;
}
.no-info {
font-size:
14px;
}
.name {
display:
inline-block;
width: 180px;
overflow:
hidden;
font-size: rem(15px);
text-overflow:
ellipsis;
white-space:
nowrap;
}
.new {
color:
#c7d0d8;
font-size: rem(11px);
i
{
margin-top: -3px;
color:
#47b280;
font-size:
rem(11px);
}
}
.owner
{
span {
color:
#737e8c;
font-size:
9px;
}
.avatar {
width:
rem(20px);
height: rem(20px);
object-fit:
cover;
}
.user {
span
{
display: inline-block;
width:
100%;
overflow: hidden;
color:
#ffffff;
font-size: 12px;
text-overflow:
ellipsis;
white-space:
nowrap;
}
}
}
.corporate-title
{
color: #5a7793;
font-size:
rem(12px);
font-weight: 400;
height:
fit-content;
border: 1px solid
#c7d0d8;
border-radius: 11px;
transition: all
0.4s ease-out;
i {
margin-top:
-3px;
color: #47b280;
font-size:
rem(10px);
}
}
.corporate-title:hover
{
background: #5a7793;
color:
white;
border: 1px solid
white;
}
.show-more {
color:
#ffffff;
font-size: 11px;
background-color:
#1683fb;
border-radius:
11px;
}
.show-more-div
{
min-height: 5px;
}
|
a {
color:
#ffffff;
text-decoration: none;
cursor:
pointer;
}
.card-value-stream
{
background-color: #ffffff;
border-radius:
4px;
border: 1px solid
#dfe2e6;
}
.header
{
background-color:
#39414d;
border-top-left-radius:
4px;
border-top-right-radius:
4px;
}
.body {
min-height:
rem(72px);
background-color:
#ffffff;
border-radius:
4px;
}
.no-info {
font-size:
14px;
}
.name {
display:
inline-block;
width: 180px;
overflow:
hidden;
font-size: rem(15px);
text-overflow:
ellipsis;
white-space:
nowrap;
}
.new {
color:
#c7d0d8;
font-size: rem(11px);
i
{
margin-top: -3px;
color:
#47b280;
font-size:
rem(11px);
}
}
.owner
{
span {
color:
#737e8c;
font-size:
9px;
}
.avatar {
width:
rem(20px);
height: rem(20px);
object-fit:
cover;
}
.user {
span
{
display: inline-block;
width:
100%;
overflow: hidden;
color:
#ffffff;
font-size: 12px;
text-overflow:
ellipsis;
white-space:
nowrap;
}
}
}
.corporate-title
{
color: #5a7793;
font-size:
rem(12px);
font-weight: 400;
height:
fit-content;
border: 1px solid
#c7d0d8;
border-radius: 11px;
transition: all
0.4s ease-out;
i {
margin-top:
-3px;
color: #47b280;
font-size:
rem(10px);
}
}
.corporate-title:hover
{
background: #5a7793;
color:
white;
border: 1px solid
white;
}
.show-more {
color:
#ffffff;
font-size: 11px;
background-color:
#1683fb;
border-radius:
11px;
}
.show-more-div
{
min-height: 5px;
}
|
Code language |
HTML |
<div class=”card-value-stream row d-block
m-2”
*ngIf=”valueStream.CorporateInformations”>
<a
href=”javascript:;”
(click)=”cardClicked()”>
<div
class=”header p-2”>
<div class=”row
no-gutters”>
<span
[attr.title]=”valueStream.Title” class=”name
col-md-7”>{{valueStream.Title}}</span>
<div
*ngIf=”valueStream.CorporateInformations?.length && countNew
> 0” class=”col-md-5 new d-flex align-items-center
justify-content-end”>
<i class=”fas
fa-circle
pr-1”></i>
<span>{{countNew}}
New
Models</span>
</div>
</div>
<div
class=”row no-gutters pt-2”>
<div
class=”owner col-md-6 new d-flex flex-column
pr-2”>
<span>OWNER</span>
<div
class=”user pt-1
d-flex”>
<img
src=”/_layouts/15/userphoto.aspx?size=L&username={{
valueStream.ValueStreamOwner.Email }}”
class=”avatar
img-thumbnail rounded-circle shadow-sm p-0
mr-1”
[attr.title]=”valueStream.ValueStreamOwner.Title”
[attr.alt]=”valueStream.ValueStreamOwner.Email”>
<span
[attr.title]=”valueStream.ValueStreamOwner.Title”>
{{
valueStream.ValueStreamOwner.Title
}}
</span>
</div>
</div>
<div
class=”owner col-md-6 new d-flex flex-column
pl-2”>
<span>DATA
OWNER</span>
<div
class=”user pt-1
d-flex”>
<img
src=”/_layouts/15/userphoto.aspx?size=L&username={{
valueStream.ValueStreamDataOwner.Email }}”
class=”avatar
img-thumbnail rounded-circle shadow-sm p-0
mr-1”
[attr.title]=”valueStream.ValueStreamDataOwner.Title”
[attr.alt]=”valueStream.ValueStreamDataOwner.Email”>
<span
[attr.title]=”valueStream.ValueStreamDataOwner.Title”>
{{
valueStream.ValueStreamDataOwner.Title
}}
</span>
</div>
</div>
</div>
</div>
</a>
<div
class=”body p-2 row
no-gutters”>
<span class=”no-info
px-1” *ngIf=”valueStream?.CorporateInformations?.length === 0”
style=”margin:auto; display:table;”>No models
related</span>
<div
class=”cursor-pointer corporate-title m-1 px-2”
*ngFor=”let
ci of valueStream.CorporateInformations |
slice:0:MaxCorporateInformationsToShow”
(click)=”corporateInformationClicked(ci)”>
<i
class=”fas fa-circle”
*ngIf=”ci.isNew”></i>
<span
class=”px-1”>{{ci.Title}}</span>
</div>
</div>
<div
class=”show-more-div d-flex
justify-content-center”>
<span
class=”cursor-pointer show-more p-1 px-3
mb-2”
*ngIf=”valueStream.CorporateInformations?.length
> 0
&&
(valueStream.CorporateInformations?.length - 4)
> 0 &&
MaxCorporateInformationsToShow ==
4”
(click)=”MaxCorporateInformationsToShow =
1000”>+ {{valueStream.CorporateInformations?.length -
4}}
More</span>
</div>
</div>
|
<div class=”card-value-stream row d-block
m-2”
*ngIf=”valueStream.CorporateInformations”>
<a
href=”javascript:;”
(click)=”cardClicked()”>
<div
class=”header p-2”>
<div class=”row
no-gutters”>
<span
[attr.title]=”valueStream.Title” class=”name
col-md-7”>{{valueStream.Title}}</span>
<div
*ngIf=”valueStream.CorporateInformations?.length && countNew
> 0” class=”col-md-5 new d-flex align-items-center
justify-content-end”>
<i class=”fas
fa-circle
pr-1”></i>
<span>{{countNew}}
New
Models</span>
</div>
</div>
<div
class=”row no-gutters pt-2”>
<div
class=”owner col-md-6 new d-flex flex-column
pr-2”>
<span>OWNER</span>
<div
class=”user pt-1
d-flex”>
<img
src=”/_layouts/15/userphoto.aspx?size=L&username={{
valueStream.ValueStreamOwner.Email }}”
class=”avatar
img-thumbnail rounded-circle shadow-sm p-0
mr-1”
[attr.title]=”valueStream.ValueStreamOwner.Title”
[attr.alt]=”valueStream.ValueStreamOwner.Email”>
<span
[attr.title]=”valueStream.ValueStreamOwner.Title”>
{{
valueStream.ValueStreamOwner.Title
}}
</span>
</div>
</div>
<div
class=”owner col-md-6 new d-flex flex-column
pl-2”>
<span>DATA
OWNER</span>
<div
class=”user pt-1
d-flex”>
<img
src=”/_layouts/15/userphoto.aspx?size=L&username={{
valueStream.ValueStreamDataOwner.Email }}”
class=”avatar
img-thumbnail rounded-circle shadow-sm p-0
mr-1”
[attr.title]=”valueStream.ValueStreamDataOwner.Title”
[attr.alt]=”valueStream.ValueStreamDataOwner.Email”>
<span
[attr.title]=”valueStream.ValueStreamDataOwner.Title”>
{{
valueStream.ValueStreamDataOwner.Title
}}
</span>
</div>
</div>
</div>
</div>
</a>
<div
class=”body p-2 row
no-gutters”>
<span class=”no-info
px-1” *ngIf=”valueStream?.CorporateInformations?.length === 0”
style=”margin:auto; display:table;”>No models
related</span>
<div
class=”cursor-pointer corporate-title m-1 px-2”
*ngFor=”let
ci of valueStream.CorporateInformations |
slice:0:MaxCorporateInformationsToShow”
(click)=”corporateInformationClicked(ci)”>
<i
class=”fas fa-circle”
*ngIf=”ci.isNew”></i>
<span
class=”px-1”>{{ci.Title}}</span>
</div>
</div>
<div
class=”show-more-div d-flex
justify-content-center”>
<span
class=”cursor-pointer show-more p-1 px-3
mb-2”
*ngIf=”valueStream.CorporateInformations?.length
> 0
&&
(valueStream.CorporateInformations?.length - 4)
> 0 &&
MaxCorporateInformationsToShow ==
4”
(click)=”MaxCorporateInformationsToShow =
1000”>+ {{valueStream.CorporateInformations?.length -
4}}
More</span>
</div>
</div>
|
Card name |
Search Bar |
Code language |
TS |
import { Component, EventEmitter, Input, OnInit,
Output } from ’@angular/core’;
import { BehaviorSubject
} from ’rxjs’;
import { Store } from
’~/shared/models/store.model’;
import {
FilterService } from
’~/shared/services/filter.service’;
import
{ HeaderService } from
’~/shared/services/header.service’;
@Component({
selector:
’app-search-bar’,
templateUrl:
’./search-bar.component.html’,
styleUrls:
[’./search-bar.component.scss’]
})
export
class SearchBarComponent implements OnInit
{
@Input()
public isListSearch =
false;
@Output()
public onSearch = new
EventEmitter<string>();
public
searchText = ”;
public placeholder =
’Search’;
public currentStorefront:
Store;
private selectedFrontStore:
Store;
public StoreColor:
BehaviorSubject<string>;
constructor(
private
heraderService: HeaderService,
private filterService:
FilterService,
) { }
public doSearch(): void
{
if
(this.searchText)
this.isListSearch
?
this.onSearch.emit(this.searchText)
:
this.defaultSearch();
}
public ngOnInit()
{
this.StoreColor =
this.heraderService.storeColor$;
this.heraderService.selectedStore$.subscribe(
(selectedStore)
=> {
if
(selectedStore)
this.currentStorefront =
selectedStore;
else
this.currentStorefront =
null;
if (selectedStore &&
!this.isListSearch)
this.placeholder = ’Search in ’ +
selectedStore?.Title;
else
this.placeholder =
’Search’;
this.selectedFrontStore =
selectedStore;
}
)
}
private
defaultSearch() {
if
(this.selectedFrontStore)
this.filterService.ShowAllRelatedToFrontStore(this.selectedFrontStore,
this.searchText);
else
this.filterService.ShowAllGlobal(this.searchText);
this.searchText
= ”;
}
public doSearchEmpty()
{
if (this.isListSearch && !this.searchText)
this.onSearch.emit(this.searchText);
}
public
get getTitle(): string {
return this.currentStorefront ?
this.currentStorefront.Title : ”;
}
}
|
import { Component, EventEmitter, Input, OnInit,
Output } from ’@angular/core’;
import { BehaviorSubject
} from ’rxjs’;
import { Store } from
’~/shared/models/store.model’;
import {
FilterService } from
’~/shared/services/filter.service’;
import
{ HeaderService } from
’~/shared/services/header.service’;
@Component({
selector:
’app-search-bar’,
templateUrl:
’./search-bar.component.html’,
styleUrls:
[’./search-bar.component.scss’]
})
export
class SearchBarComponent implements OnInit
{
@Input()
public isListSearch =
false;
@Output()
public onSearch = new
EventEmitter<string>();
public
searchText = ”;
public placeholder =
’Search’;
public currentStorefront:
Store;
private selectedFrontStore:
Store;
public StoreColor:
BehaviorSubject<string>;
constructor(
private
heraderService: HeaderService,
private filterService:
FilterService,
) { }
public doSearch(): void
{
if
(this.searchText)
this.isListSearch
?
this.onSearch.emit(this.searchText)
:
this.defaultSearch();
}
public ngOnInit()
{
this.StoreColor =
this.heraderService.storeColor$;
this.heraderService.selectedStore$.subscribe(
(selectedStore)
=> {
if
(selectedStore)
this.currentStorefront =
selectedStore;
else
this.currentStorefront =
null;
if (selectedStore &&
!this.isListSearch)
this.placeholder = ’Search in ’ +
selectedStore?.Title;
else
this.placeholder =
’Search’;
this.selectedFrontStore =
selectedStore;
}
)
}
private
defaultSearch() {
if
(this.selectedFrontStore)
this.filterService.ShowAllRelatedToFrontStore(this.selectedFrontStore,
this.searchText);
else
this.filterService.ShowAllGlobal(this.searchText);
this.searchText
= ”;
}
public doSearchEmpty()
{
if (this.isListSearch && !this.searchText)
this.onSearch.emit(this.searchText);
}
public
get getTitle(): string {
return this.currentStorefront ?
this.currentStorefront.Title :
”;
}
}
|
Code language |
SCSS |
.search-bar {
color:
#ffffff;
background-color:
transparent;
transition: all 0.25s;
input
{
background-color: #ffffff;
border-radius:
3px;
overflow: hidden;
border-color:
transparent;
}
.btn-primary
{
border-radius: 2px;
border: 1px solid
#ffffff;
background-color:
transparent;
font-size:
rem(14px);
}
.btn-primary:focus
{
outline: none;
box-shadow:
none;
}
}
button:focus,
input:focus,
input.form-control:focus
{
outline: none !important;
outline-width: 0
!important;
box-shadow: none;
-moz-box-shadow:
none;
-webkit-box-shadow: none;
border-color:
transparent;
}
span.store-name:empty:before
{
content:
”\200b”;
}
.verified-icon
{
margin-bottom: 4px;
}
|
.search-bar {
color:
#ffffff;
background-color:
transparent;
transition: all 0.25s;
input
{
background-color: #ffffff;
border-radius:
3px;
overflow: hidden;
border-color:
transparent;
}
.btn-primary
{
border-radius: 2px;
border: 1px solid
#ffffff;
background-color:
transparent;
font-size:
rem(14px);
}
.btn-primary:focus
{
outline: none;
box-shadow:
none;
}
}
button:focus,
input:focus,
input.form-control:focus
{
outline: none !important;
outline-width: 0
!important;
box-shadow: none;
-moz-box-shadow:
none;
-webkit-box-shadow: none;
border-color:
transparent;
}
span.store-name:empty:before
{
content:
”\200b”;
}
.verified-icon
{
margin-bottom: 4px;
}
|
Code language |
HTML |
<div class=”search-bar py-2”
[ngStyle]=”{ backgroundColor: StoreColor | async
}”>
<div
class=”container”>
<div
class=”row”>
<div class=”col-md-10
p-1”>
<input
type=”text”
name=”main-search”
[(ngModel)]=”searchText”
class=”form-control”
autocomplete=”off”
[placeholder]=”placeholder”
(keydown.enter)=”doSearch()”
(keyup.backspace)=”doSearchEmpty()”
(keyup.delete)=”doSearchEmpty()”>
</div>
<div
class=”col-md-2 p-1”>
<button
type=”submit” class=”btn btn-primary btn-block text-uppercase h-100”
(click)=”doSearch()”>Search</button>
</div>
</div>
</div>
</div>
|
<div class=”search-bar py-2”
[ngStyle]=”{ backgroundColor: StoreColor | async
}”>
<div
class=”container”>
<div
class=”row”>
<div class=”col-md-10
p-1”>
<input
type=”text”
name=”main-search”
[(ngModel)]=”searchText”
class=”form-control”
autocomplete=”off”
[placeholder]=”placeholder”
(keydown.enter)=”doSearch()”
(keyup.backspace)=”doSearchEmpty()”
(keyup.delete)=”doSearchEmpty()”>
</div>
<div
class=”col-md-2 p-1”>
<button
type=”submit” class=”btn btn-primary btn-block text-uppercase h-100”
(click)=”doSearch()”>Search</button>
</div>
</div>
</div>
</div>
|