- Fix spacing on so me alerts

Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-01-17 00:19:51 -05:00
parent c2d6c980ed
commit 69791a3cdd
3 changed files with 49 additions and 42 deletions

View File

@@ -2,5 +2,5 @@ import { Alert } from "antd";
import React from "react"; import React from "react";
export default function AlertComponent(props) { export default function AlertComponent(props) {
return <Alert {...props} />; return <Alert {...props} />;
} }

View File

@@ -37,7 +37,6 @@ export function ScheduleCalendarHeaderComponent({
events, events,
...otherProps ...otherProps
}) { }) {
console.log(`ScheduleCalendarHeaderComponent: ${label} Calculating: ${calculating}`)
const ATSToday = useMemo(() => { const ATSToday = useMemo(() => {
if (!events) return []; if (!events) return [];
return _.groupBy( return _.groupBy(

View File

@@ -11,7 +11,7 @@ import HeaderComponent from "./schedule-calendar-header.component";
import "./schedule-calendar.styles.scss"; import "./schedule-calendar.styles.scss";
import JobDetailCards from "../job-detail-cards/job-detail-cards.component"; import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
import { selectProblemJobs } from "../../redux/application/application.selectors"; import { selectProblemJobs } from "../../redux/application/application.selectors";
import { Alert, Collapse } from "antd"; import {Alert, Collapse, Space} from "antd";
import { useTranslation, Trans } from "react-i18next"; import { useTranslation, Trans } from "react-i18next";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@@ -55,57 +55,65 @@ export function ScheduleCalendarWrapperComponent({
<> <>
<JobDetailCards /> <JobDetailCards />
{problemJobs && problemJobs.length > 2 ? ( {problemJobs && problemJobs.length > 2 ? (
<Collapse> <Collapse style={{marginBottom: '5px'}}>
<Collapse.Panel <Collapse.Panel
key="1"
header={ header={
<span style={{ color: "tomato" }}> <span style={{ color: "tomato" }}>
{t("appointments.labels.severalerrorsfound")} {t("appointments.labels.severalerrorsfound")}
</span> </span>
} }
> >
{problemJobs.map((problem) => ( <Space direction="vertical" style={{ width: '100%' }}>
<Alert {problemJobs.map((problem) => (
key={problem.id} <Alert
type="error" key={problem.id}
message={ type="error"
<Trans message={
i18nKey="appointments.labels.dataconsistency" <Trans
components={[ i18nKey="appointments.labels.dataconsistency"
<Link components={[
to={`/manage/jobs/${problem.id}`} <Link
target="_blank" to={`/manage/jobs/${problem.id}`}
/>, target="_blank"
]} />,
values={{ ]}
ro_number: problem.ro_number, values={{
code: problem.code, ro_number: problem.ro_number,
}} code: problem.code,
}}
/>
}
/> />
} ))}
/> </Space>
))}
</Collapse.Panel> </Collapse.Panel>
</Collapse> </Collapse>
) : ( ) : (
problemJobs.map((problem) => ( <Space direction="vertical" style={{ width: '100%', marginBottom: '5px' }}>
<Alert {
key={problem.id} problemJobs.map((problem) => (
type="error" <Alert
message={ key={problem.id}
<Trans type="error"
i18nKey="appointments.labels.dataconsistency" message={
components={[ <Trans
<Link to={`/manage/jobs/${problem.id}`} target="_blank" />, i18nKey="appointments.labels.dataconsistency"
]} components={[
values={{ <Link to={`/manage/jobs/${problem.id}`} target="_blank"/>,
ro_number: problem.ro_number, ]}
code: problem.code, values={{
}} ro_number: problem.ro_number,
/> code: problem.code,
}}
/>
}
/>
))
} }
/> </Space>
)) )}
)}
<Calendar <Calendar
events={data} events={data}