Newer
Older
import { WarningOutlined } from "@ant-design/icons";
import { FunctionComponent } from "react";
import { ItemType, Question, Variant } from "../../../common/Common";
import { getIconForItemType } from "./ItemInfo";
interface VariantInfoProps {
variant: Variant
}
const VariantInfo: FunctionComponent<VariantInfoProps> = (props: VariantInfoProps) => {
const formatDate = (date: any) => {
let d = new Date(date);
return (d.getMonth() + 1) + "/" + d.getDate() + "/" + d.getFullYear() + " " +
d.getHours() + ":" + d.getMinutes();
}
<div className="itemInfo">
<h3>{getIconForItemType(ItemType.variant)} {props.variant?.title}</h3>
{props.variant?.date ?
<>
<Divider orientation="left" orientationMargin="0px">Date</Divider>
<p>{formatDate(props.variant?.date)}</p>
</> :
<>
<p className="warnMsg"><WarningOutlined /> Missing test date</p>
</>
}
{props.variant?.instructions ?
<>
<Divider orientation="left" orientationMargin="0px">Instructions</Divider>
<p>{props.variant?.instructions}</p>
</> :
<>
<p className="warnMsg"><WarningOutlined /> Missing test instructions</p>
</>
}
<Divider orientation="left" orientationMargin="0px">Questions</Divider>
<Table columns={[
{
title: 'Number',
dataIndex: 'number',
key: 'number'
},
{
title: 'Title',
dataIndex: 'title',
key: 'title'
},
{
title: 'Points',
dataIndex: 'points',
key: 'points',
}
]} dataSource={props.variant?.questions?.map((item: Question) => {
var n = props.variant?.questions?.indexOf(item) + 1;
return {
key: n,
number: n,
title: item.title,
points: item.points
}
}) as Array<any>}
pagination={false}
/>