colouring-montreal/app/src/frontend/building/edit-history/building-edit-summary.tsx

78 lines
2.6 KiB
TypeScript
Raw Normal View History

2019-10-24 07:19:54 -04:00
import React from 'react';
import { Link } from 'react-router-dom';
2019-11-07 02:39:26 -05:00
2019-11-13 14:20:47 -05:00
import './building-edit-summary.css';
2019-10-24 07:19:54 -04:00
import { dataFields } from '../../data_fields';
2019-11-07 02:39:26 -05:00
import { arrayToDictionary, parseDate } from '../../helpers';
import { EditHistoryEntry } from '../../models/edit-history-entry';
2019-10-24 07:19:54 -04:00
import { CategoryEditSummary } from './category-edit-summary';
interface BuildingEditSummaryProps {
2019-11-07 03:13:30 -05:00
historyEntry: EditHistoryEntry;
showBuildingId?: boolean;
hyperlinkCategories?: boolean;
2019-10-24 07:19:54 -04:00
}
function formatDate(dt: Date) {
return dt.toLocaleString(undefined, {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
}
const BuildingEditSummary: React.FunctionComponent<BuildingEditSummaryProps> = ({
historyEntry,
showBuildingId = false,
hyperlinkCategories = false
}) => {
2019-10-24 07:19:54 -04:00
const entriesWithMetadata = Object
.entries(historyEntry.forward_patch)
2019-10-24 07:19:54 -04:00
.map(([key, value]) => {
const info = dataFields[key] || {};
return {
title: info.title || `Unknown field (${key})`,
category: info.category || 'Unknown',
2019-10-24 07:19:54 -04:00
value: value,
oldValue: historyEntry.reverse_patch && historyEntry.reverse_patch[key]
2019-10-24 07:19:54 -04:00
};
});
const entriesByCategory = arrayToDictionary(entriesWithMetadata, x => x.category);
const categoryHyperlinkTemplate = hyperlinkCategories && historyEntry.building_id != undefined ?
`/edit/$category/${historyEntry.building_id}` :
undefined;
2019-10-24 07:19:54 -04:00
return (
<div className="edit-history-entry">
<h2 className="edit-history-timestamp">Edited on {formatDate(parseDate(historyEntry.date_trunc))}</h2>
<h3 className="edit-history-username">By {historyEntry.username}</h3>
2019-10-24 07:19:54 -04:00
{
showBuildingId && historyEntry.building_id != undefined &&
<h3 className="edit-history-building-id">
Building <Link to={`/edit/categories/${historyEntry.building_id}`}>{historyEntry.building_id}</Link>
</h3>
}
{
Object.entries(entriesByCategory).map(([category, fields]) =>
<CategoryEditSummary
category={category}
fields={fields}
hyperlinkCategory={hyperlinkCategories}
hyperlinkTemplate={categoryHyperlinkTemplate}
/>
)
2019-10-24 07:19:54 -04:00
}
</div>
);
2019-11-07 03:13:30 -05:00
};
2019-10-24 07:19:54 -04:00
export {
BuildingEditSummary
};