Card name Corporate Information Card
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>