Henriette Dinger
5 years ago
parent
2fddef10a6
commit
7af56a66b5
@ -0,0 +1,69 @@ |
||||
<div class="wp-card" |
||||
[attr.data-is-new]="workPackage.isNew || undefined" |
||||
[attr.data-work-package-id]="workPackage.id" |
||||
[attr.data-class-identifier]="classIdentifier(workPackage)" |
||||
[ngClass]="cardClasses(workPackage)"> |
||||
|
||||
<div class="wp-card--highlighting" |
||||
[ngClass]="cardHighlightingClass(workPackage)"> |
||||
</div> |
||||
|
||||
<div class="wp-card--inline-buttons"> |
||||
<a class="wp-card--inline-cancel-button -no-decoration" |
||||
*ngIf="workPackage.isNew || showRemoveButton" |
||||
[ngClass]="{ '-show': workPackage.isNew }" |
||||
[title]="text.removeCard" |
||||
(accessibleClick)="onRemoved(workPackage)"> |
||||
<op-icon icon-classes="icon icon-close"></op-icon> |
||||
</a> |
||||
|
||||
<a class="-no-decoration" |
||||
*ngIf="!workPackage.isNew && showInfoButton" |
||||
[title]="text.detailsView" |
||||
(accessibleClick)="openSplitScreen(workPackage)"> |
||||
<op-icon icon-classes="icon icon-info2"></op-icon> |
||||
</a> |
||||
</div> |
||||
|
||||
<edit-form [resource]="workPackage" |
||||
[inEditMode]="workPackage.isNew" |
||||
*ngIf="workPackage.isNew"> |
||||
<div class="wp-card--content -new"> |
||||
<editable-attribute-field [resource]="workPackage" |
||||
[wrapperClasses]="'work-packages--type-selector'" |
||||
[fieldName]="'type'" |
||||
class="wp-card--type"> |
||||
</editable-attribute-field> |
||||
<editable-attribute-field [resource]="workPackage" |
||||
fieldName="subject" |
||||
class="wp-card--subject -bold"> |
||||
</editable-attribute-field> |
||||
</div> |
||||
</edit-form> |
||||
|
||||
<img *ngIf="this.bcfSnapshotPath(workPackage)" [src]="this.bcfSnapshotPath(workPackage)" class="wp-card--cover-image"> |
||||
|
||||
<div *ngIf="!workPackage.isNew" |
||||
class="wp-card--content"> |
||||
<span [textContent]="wpTypeAttribute(workPackage)" |
||||
class="wp-card--type" |
||||
[ngClass]="typeHighlightingClass(workPackage)"></span> |
||||
<a uiSref="work-packages.show" |
||||
[uiParams]="{workPackageId: workPackage.id}" |
||||
class="wp-card--id" |
||||
[ngClass]="uiStateLinkClass"> |
||||
#{{workPackage.id}} |
||||
</a> |
||||
<span [textContent]="wpSubject(workPackage)" |
||||
class="wp-card--subject"></span> |
||||
<wp-status-button *ngIf="showStatusButton" |
||||
[workPackage]="workPackage" |
||||
class="wp-card--status"> |
||||
</wp-status-button> |
||||
<user-avatar *ngIf="workPackage.assignee" |
||||
[user]="workPackage.assignee" |
||||
data-class-list="avatar-mini" |
||||
class="wp-card--assignee"> |
||||
</user-avatar> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,87 @@ |
||||
@import 'helpers' |
||||
|
||||
.wp-card |
||||
display: flex |
||||
flex-direction: column |
||||
user-select: none |
||||
width: 100% |
||||
border: 1px solid var(--widget-box-block-border-color) |
||||
border-radius: 2px |
||||
padding: 10px |
||||
position: relative |
||||
box-shadow: 1px 1px 3px 0px lightgrey |
||||
background: var(--body-background) |
||||
font-size: var(--card-font-size) |
||||
max-width: 400px |
||||
|
||||
&:hover |
||||
box-shadow: 0px 0px 10px lightgrey |
||||
|
||||
&.-new |
||||
padding-right: 25px |
||||
|
||||
&.-checked |
||||
background-color: var(--table-row-highlighting-color) |
||||
|
||||
&.-horizontal |
||||
height: 100% |
||||
|
||||
&.-vertical |
||||
margin-top: 10px |
||||
// Take care that the shadow of the last element is still visible |
||||
&:last-of-type |
||||
margin-bottom: 3px |
||||
|
||||
.wp-card--content:not(.-new) |
||||
display: grid |
||||
grid-template-columns: auto 1fr auto |
||||
grid-template-rows: auto 1fr auto |
||||
grid-row-gap: 10px |
||||
grid-template-areas: "type type type" "subject subject subject" "attributeTag avatar idlink" |
||||
overflow: hidden |
||||
flex-grow: 1 |
||||
|
||||
.wp-card--type |
||||
grid-area: type |
||||
.wp-card--subject |
||||
grid-area: subject |
||||
max-width: 230px |
||||
@include text-shortener |
||||
white-space: normal |
||||
.wp-card--assignee |
||||
grid-area: avatar |
||||
place-self: center left |
||||
.wp-card--id |
||||
grid-area: idlink |
||||
place-self: center right |
||||
.wp-card--status |
||||
grid-area: attributeTag |
||||
max-width: 120px |
||||
margin-right: 5px |
||||
overflow: hidden |
||||
|
||||
.wp-card--highlighting |
||||
width: 5px |
||||
height: 100% |
||||
position: absolute |
||||
top: 0 |
||||
left: 0 |
||||
border-radius: 2px 0 0 2px |
||||
|
||||
.wp-card--inline-buttons |
||||
position: absolute |
||||
right: 0 |
||||
top: 5px |
||||
opacity: 0 |
||||
|
||||
&.-show, .wp-card:hover & |
||||
opacity: 1 |
||||
|
||||
.wp-card--cover-image |
||||
display: block |
||||
margin: -10px -10px 10px |
||||
width: calc(100% + 10px + 10px) |
||||
max-width: calc(100% + 10px + 10px) |
||||
|
||||
flex-basis: 200px |
||||
object-fit: cover |
||||
@ -0,0 +1,110 @@ |
||||
import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from "@angular/core"; |
||||
import {WorkPackageResource} from "core-app/modules/hal/resources/work-package-resource"; |
||||
import {checkedClassName, uiStateLinkClass} from "core-components/wp-fast-table/builders/ui-state-link-builder"; |
||||
import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service"; |
||||
import {Highlighting} from "core-components/wp-fast-table/builders/highlighting/highlighting.functions"; |
||||
import {StateService} from "@uirouter/core"; |
||||
import {WorkPackageViewSelectionService} from "core-app/modules/work_packages/routing/wp-view-base/view-services/wp-view-selection.service"; |
||||
import {WorkPackageCardViewService} from "core-components/wp-card-view/services/wp-card-view.service"; |
||||
import {I18nService} from "core-app/modules/common/i18n/i18n.service"; |
||||
import {CardHighlightingMode} from "core-components/wp-fast-table/builders/highlighting/highlighting-mode.const"; |
||||
import {CardViewOrientation} from "core-components/wp-card-view/wp-card-view.component"; |
||||
|
||||
|
||||
@Component({ |
||||
selector: 'wp-single-card', |
||||
styleUrls: ['./wp-single-card.component.sass'], |
||||
templateUrl: './wp-single-card.component.html', |
||||
changeDetection: ChangeDetectionStrategy.OnPush |
||||
}) |
||||
export class WorkPackageSingleCardComponent { |
||||
@Input() public workPackage:WorkPackageResource; |
||||
@Input() public showInfoButton:boolean = false; |
||||
@Input() public showStatusButton:boolean = true; |
||||
@Input() public showRemoveButton:boolean = false; |
||||
@Input() public highlightingMode:CardHighlightingMode = 'inline'; |
||||
@Input() public draggable:boolean = false; |
||||
@Input() public orientation:CardViewOrientation = 'vertical'; |
||||
|
||||
@Output() public onRemove = new EventEmitter<WorkPackageResource>(); |
||||
|
||||
public uiStateLinkClass:string = uiStateLinkClass; |
||||
|
||||
public text = { |
||||
removeCard: this.I18n.t('js.card.remove_from_list'), |
||||
detailsView: this.I18n.t('js.button_open_details') |
||||
}; |
||||
|
||||
constructor(readonly pathHelper:PathHelperService, |
||||
readonly I18n:I18nService, |
||||
readonly $state:StateService, |
||||
readonly wpTableSelection:WorkPackageViewSelectionService, |
||||
readonly cardView:WorkPackageCardViewService,) { |
||||
} |
||||
|
||||
public classIdentifier(wp:WorkPackageResource) { |
||||
return this.cardView.classIdentifier(wp); |
||||
} |
||||
|
||||
public openSplitScreen(wp:WorkPackageResource) { |
||||
let classIdentifier = this.classIdentifier(wp); |
||||
this.wpTableSelection.setSelection(wp.id!, this.cardView.findRenderedCard(classIdentifier)); |
||||
this.$state.go( |
||||
'work-packages.list.details', |
||||
{workPackageId: wp.id!} |
||||
); |
||||
} |
||||
|
||||
public cardClasses(wp:WorkPackageResource) { |
||||
let classes = this.isSelected(wp) ? checkedClassName : ''; |
||||
classes += this.draggable ? ' -draggable' : ''; |
||||
classes += wp.isNew ? ' -new' : ''; |
||||
classes += ' wp-card-' + wp.id; |
||||
classes += ' -' + this.orientation; |
||||
return classes; |
||||
} |
||||
|
||||
public isSelected(wp:WorkPackageResource):boolean { |
||||
return this.wpTableSelection.isSelected(wp.id!); |
||||
} |
||||
|
||||
public wpTypeAttribute(wp:WorkPackageResource) { |
||||
return wp.type.name; |
||||
} |
||||
|
||||
public wpSubject(wp:WorkPackageResource) { |
||||
return wp.subject; |
||||
} |
||||
|
||||
public cardHighlightingClass(wp:WorkPackageResource) { |
||||
return this.cardHighlighting(wp); |
||||
} |
||||
|
||||
public typeHighlightingClass(wp:WorkPackageResource) { |
||||
return this.attributeHighlighting('type', wp); |
||||
} |
||||
|
||||
public onRemoved(wp:WorkPackageResource) { |
||||
this.onRemove.emit(wp); |
||||
} |
||||
|
||||
public bcfSnapshotPath(wp:WorkPackageResource) { |
||||
let vp = _.get(wp, 'bcf.viewpoints[0]'); |
||||
if (vp) { |
||||
return this.pathHelper.attachmentDownloadPath(vp.id, vp.file_name); |
||||
} else { |
||||
return null; |
||||
} |
||||
} |
||||
|
||||
private cardHighlighting(wp:WorkPackageResource) { |
||||
if (['status', 'priority', 'type'].includes(this.highlightingMode)) { |
||||
return Highlighting.backgroundClass(this.highlightingMode, wp[this.highlightingMode].id); |
||||
} |
||||
return ''; |
||||
} |
||||
|
||||
private attributeHighlighting(type:string, wp:WorkPackageResource) { |
||||
return Highlighting.inlineClass(type, wp.type.id!); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue