diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index 5a4adf486..2ae0e7e6c 100644 --- a/packages/translation/src/lang/en.json +++ b/packages/translation/src/lang/en.json @@ -1816,6 +1816,12 @@ "partiallyAvailable": "Partial", "available": "Available" }, + "status": { + "pending": "Pending", + "approved": "Approved", + "declined": "Declined", + "failed": "Failed" + }, "toBeDetermined": "TBD" }, "mediaRequests-requestStats": { diff --git a/packages/widgets/src/media-requests/list/component.tsx b/packages/widgets/src/media-requests/list/component.tsx index 181ce6b53..1e4111fb0 100644 --- a/packages/widgets/src/media-requests/list/component.tsx +++ b/packages/widgets/src/media-requests/list/component.tsx @@ -150,7 +150,7 @@ export default function MediaServerWidget({ {(mediaRequest.requestedBy?.displayName ?? "") || "unknown"} - {mediaRequest.status === MediaRequestStatus.PendingApproval && ( + {mediaRequest.status === MediaRequestStatus.PendingApproval ? ( + ) : ( + )} @@ -197,6 +199,34 @@ export default function MediaServerWidget({ ); } +const statusMapping = { + [MediaRequestStatus.PendingApproval]: { color: "blue", label: (t) => t("pending") }, + [MediaRequestStatus.Approved]: { color: "green", label: (t) => t("approved") }, + [MediaRequestStatus.Declined]: { color: "red", label: (t) => t("declined") }, + [MediaRequestStatus.Failed]: { color: "red", label: (t) => t("failed") }, +} satisfies Record< + MediaRequestStatus, + { + color: string; + label: (t: ScopedTranslationFunction<"widget.mediaRequests-requestList.status">) => string; + } +>; + +interface StatusBadgeProps { + status: MediaRequestStatus; +} + +const StatusBadge = ({ status }: StatusBadgeProps) => { + const { color, label } = statusMapping[status]; + const tStatus = useScopedI18n("widget.mediaRequests-requestList.status"); + + return ( + + {label(tStatus)} + + ); +}; + function getAvailabilityProperties( mediaRequestAvailability: MediaAvailability, t: ScopedTranslationFunction<"widget.mediaRequests-requestList">, @@ -206,10 +236,10 @@ function getAvailabilityProperties( return { color: "green", label: t("availability.available") }; case MediaAvailability.PartiallyAvailable: return { color: "yellow", label: t("availability.partiallyAvailable") }; - case MediaAvailability.Pending: - return { color: "violet", label: t("availability.pending") }; case MediaAvailability.Processing: return { color: "blue", label: t("availability.processing") }; + case MediaAvailability.Pending: + return { color: "violet", label: t("availability.pending") }; default: return { color: "red", label: t("availability.unknown") }; }