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 115 116 117 118 119 120 | 1x 1x 1x 4x 4x 4x 4x 1x 1x 3x 3x 3x 3x 7x 7x 7x 4x 3x 3x 3x 3x 2x 3x | import { Component, h, Prop, Host, State, Watch } from "@stencil/core";
import { TrackResponse } from "./track-response";
import api from "../../utils/api";
@Component({
tag: "ux-w-track",
styleUrl: "track.scss",
shadow: false
})
export class Track {
/** URL where this widget can request the data */
@Prop() url: string = "";
/** This holds the response from the API with all Information required to show the widget */
@State() data: TrackResponse = null;
/** data is loading */
@State() loading: boolean = false;
@Watch("url")
componentWillLoad() {
if (this.url === "") {
// eslint-disable-next-line no-console
console.warn("url needs to be supplied for WidgetTrack");
return;
}
window.setTimeout(() => {
Iif (this.data === null) {
this.loading = true;
}
});
api<TrackResponse>(this.url)
.then((data: TrackResponse) => {
this.data = data;
this.loading = false;
})
// eslint-disable-next-line no-console
.catch((error) => console.error(error));
}
render() {
const baseClass = "ux-w-track";
Iif (this.loading) {
return (
<Host class={baseClass}>
<ux-w-wrapper isLoading />
</Host>
);
}
if (this.data === null) {
return null;
}
const {
link,
linkTitle,
title,
orders,
additionalTile,
noOrdersText,
noData,
noDataText
} = this.data;
const hasOrders = orders?.length > 0;
const linkItem =
hasOrders && typeof additionalTile === "object" ? (
<div class={`${baseClass}__order-item`}>
<ux-w-link-item
icon="order-status-package-checkmark"
headline={additionalTile.title}
link={additionalTile.link}
linkLabel={additionalTile.linkText}
/>
</div>
) : null;
return (
<Host class={baseClass}>
<ux-w-wrapper url={link} linkTitle={linkTitle} headline={title}>
<div slot="content">
{!hasOrders && !noData && (
<ux-w-empty icon="order-status-package-checkmark">
<div innerHTML={noOrdersText}></div>
</ux-w-empty>
)}
{!hasOrders && noData && (
<ux-w-empty icon="crane">
<div innerHTML={noDataText}></div>
</ux-w-empty>
)}
{orders?.map((order) => (
<div class={`${baseClass}__order-item`}>
{order.shipments.map((shipment) => (
<ux-w-track-delivery-item
headline={shipment.title}
statusType={shipment.status.type}
statusText={shipment.status.text}
label={shipment.label}
date={shipment.date}
orderLink={order.orderLink}
orderLinkTitle={order.orderLinkTitle}
orderNumber={order.orderNumber}
trackingNumber={
shipment.tracking?.number
}
trackingLink={shipment.tracking?.link}
trackingLinkTitle={
shipment.tracking?.linkTitle
}
></ux-w-track-delivery-item>
))}
</div>
))}
{linkItem}
</div>
</ux-w-wrapper>
</Host>
);
}
}
|