Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 1x 1x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x | import { Component, h, Prop, Host } from "@stencil/core";
import { CallStatusType } from "../service-calls-response";
import { ButtonSize } from "@trumpf/ux.ui/dist/types/components";
@Component({
tag: "ux-w-service-calls-item",
styleUrl: "service-calls-item.scss",
shadow: false
})
export class ServiceCallsItem {
/** Title of the service call */
@Prop() headline: string = "";
/** name of the affected machine */
@Prop() machineName: string = "";
/** Number of the affected machine */
@Prop() machineNumber: string = "";
/** color for the status message */
@Prop() statusType: CallStatusType;
/** status message */
@Prop() statusText: string = "";
/** Label for the call ID */
@Prop() callIdLabel: string = "";
/** SIS ID of the service call */
@Prop() callId: string = "";
/** Link to the detail page of the call */
@Prop() link: string = "";
/** title attribute for the detail link */
@Prop() linkTitle: string = "";
/** Label for last change */
@Prop() lastChangeLabel: string = "";
/** UTC date/time of last change for ux-date-time */
@Prop() lastChange: string = "";
/** Date/time format for ux-date-time */
@Prop() timeFormat: string = "";
render() {
const baseClass = "ux-w-service-calls-item";
const {
headline,
statusText,
statusType,
machineName,
machineNumber,
callIdLabel,
callId,
link,
linkTitle,
lastChangeLabel,
lastChange,
timeFormat
} = this;
return (
<Host class={baseClass} data-testid={`service-call-${callId}`}>
<div class={`${baseClass}__header`}>
<div
class={`${baseClass}__headline ux-text-title ux-text-title--bold`}
title={headline}
data-testid="headline"
>
{headline}
</div>
<div class="ux-text-tiny" data-testid="machine-name">
{machineName}
</div>
<div class="ux-text-tiny" data-testid="machine-number">
{machineNumber}
</div>
</div>
<ux-w-status type={`SERVICE_CALL_${statusType}`}>
{statusText}
</ux-w-status>
<div
class={`${baseClass}__label ux-text-tiny ux-text-tiny--bold`}
>
{callIdLabel}
</div>
<a
class="ux-text-link ux-text-link--green"
href={link}
title={linkTitle}
data-testid="service-call-link"
>
<span class="ux-text-tiny">{callId}</span>
</a>
<div class={`${baseClass}__bottom`}>
<div
class={`${baseClass}__label ux-text-tiny ux-text-tiny--bold`}
>
{lastChangeLabel}
</div>
<div class="ux-text-tiny">
<ux-date-time
data-testid="last-change"
utc={lastChange}
format={timeFormat}
/>
</div>
</div>
<ux-button
class={`${baseClass}__button`}
size={"icon" as ButtonSize}
href={link}
title={linkTitle}
data-testid="service-call-details-button"
>
<ux-icon slot="icon" name="chevron-right" />
</ux-button>
</Host>
);
}
}
|