admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/feature/IO-3554-Form-Row-Layout - Drawer changes, mask closable changes, missing translation, spinner tip changes

Browse Source
This commit is contained in:
Dave
2026-02-25 15:57:51 -05:00
parent dab66b4d66
commit 226cc801ae
16 changed files with 93 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/components/bill-detail-edit/bill-detail-edit.container.jsx
View File

@@ -7,10 +7,8 @@ export default function BillDetailEditcontainer() {
const search = queryString.parse(useLocation().search);
const history = useNavigate();
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const screens = Grid.useBreakpoint();
const bpoints = {
xs: "100%",
sm: "100%",
@@ -19,7 +17,14 @@ export default function BillDetailEditcontainer() {
xl: "90%",
xxl: "90%"
};
const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
let drawerPercentage = "100%";
if (screens.xxl) drawerPercentage = bpoints.xxl;
else if (screens.xl) drawerPercentage = bpoints.xl;
else if (screens.lg) drawerPercentage = bpoints.lg;
else if (screens.md) drawerPercentage = bpoints.md;
else if (screens.sm) drawerPercentage = bpoints.sm;
else if (screens.xs) drawerPercentage = bpoints.xs;
return (
<Drawer

2
client/src/components/email-overlay/email-overlay.container.jsx
View File

@@ -163,7 +163,7 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
<Modal
destroyOnHidden
open={modalVisible}
maskClosable={false}
mask={{ closable: false }}
width={"80%"}
onOk={() => form.submit()}
title={t("emails.labels.emailpreview")}

15
client/src/components/job-detail-cards/job-detail-cards.component.jsx
View File

@@ -58,10 +58,8 @@ const span = {
export function JobDetailCards({ bodyshop, setPrintCenterContext, insertAuditTrail }) {
const { scenarioNotificationsOn } = useSocket();
const [updateJob] = useMutation(UPDATE_JOB);
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const screens = Grid.useBreakpoint();
const bpoints = {
xs: "100%",
sm: "100%",
@@ -70,7 +68,14 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext, insertAuditTra
xl: "75%",
xxl: "75%"
};
const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
let drawerPercentage = "100%";
if (screens.xxl) drawerPercentage = bpoints.xxl;
else if (screens.xl) drawerPercentage = bpoints.xl;
else if (screens.lg) drawerPercentage = bpoints.lg;
else if (screens.md) drawerPercentage = bpoints.md;
else if (screens.sm) drawerPercentage = bpoints.sm;
else if (screens.xs) drawerPercentage = bpoints.xs;
const searchParams = queryString.parse(useLocation().search);
const { selected } = searchParams;

2
client/src/components/jobs-convert-button/jobs-convert-button.component.jsx
View File

@@ -190,7 +190,7 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
open={open}
onCancel={handleModalClose}
closable={!(earlyRoCreatedThisSession && !job.converted)}
maskClosable={!(earlyRoCreatedThisSession && !job.converted)}
mask={{ closable: !(earlyRoCreatedThisSession && !job.converted) }}
title={t("jobs.actions.convert")}
footer={null}
width={700}

2
client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx
View File

@@ -214,7 +214,7 @@ export function JobsDetailHeaderActions({
okText,
cancelText,
centered: true,
maskClosable: false,
mask: { closable: false },
onCancel: () => {
closeConfirmById(id);
onCancel?.();

16
client/src/components/jobs-list/jobs-list.component.jsx
View File

@@ -28,9 +28,7 @@ const mapDispatchToProps = () => ({});
export function JobsList({ bodyshop }) {
const searchParams = queryString.parse(useLocation().search);
const { selected } = searchParams;
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const screens = Grid.useBreakpoint();
const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
variables: {
statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"]
@@ -332,7 +330,17 @@ export function JobsList({ bodyshop }) {
rowKey="id"
dataSource={jobs}
scroll={{
x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%"
x: screens.xxl
? scrollMapper.xxl
: screens.xl
? scrollMapper.xl
: screens.lg
? scrollMapper.lg
: screens.md
? scrollMapper.md
: screens.sm
? scrollMapper.sm
: scrollMapper.xs
}}
rowSelection={{
onSelect: (record) => {

16
client/src/components/jobs-ready-list/jobs-ready-list.component.jsx
View File

@@ -25,9 +25,7 @@ const mapStateToProps = createStructuredSelector({
export function JobsReadyList({ bodyshop }) {
const searchParams = queryString.parse(useLocation().search);
const { selected } = searchParams;
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const screens = Grid.useBreakpoint();
const readyStatuses = useMemo(() => {
if (bodyshop.md_ro_statuses.ready_statuses) return bodyshop.md_ro_statuses.ready_statuses;
@@ -316,7 +314,17 @@ export function JobsReadyList({ bodyshop }) {
rowKey="id"
dataSource={jobs}
scroll={{
x: selectedBreakpoint ? scrollMapper[selectedBreakpoint[0]] : "100%"
x: screens.xxl
? scrollMapper.xxl
: screens.xl
? scrollMapper.xl
: screens.lg
? scrollMapper.lg
: screens.md
? scrollMapper.md
: screens.sm
? scrollMapper.sm
: scrollMapper.xs
}}
rowSelection={{
onSelect: (record) => {

3
client/src/components/loading-spinner/loading-spinner.component.jsx
View File

@@ -11,9 +11,8 @@ export default function LoadingSpinner({ loading = true, message, ...props }) {
position: "relative",
alignContent: "center"
}}
{...(props.children ? { tip: message ? message : null } : {})}
{...(props.children ? { description: message ? message : null } : {})}
delay={200}
// TODO: Client Update - tip only works when there are actually children, and this component is used in a lot of places where there are no children
>
{props.children}
</Spin>

15
client/src/components/parts-order-list-table/parts-order-list-table-drawer.component.jsx
View File

@@ -65,10 +65,8 @@ export function PartsOrderListTableDrawerComponent({
setTaskUpsertContext,
isPartsEntry
}) {
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const screens = Grid.useBreakpoint();
const bpoints = {
xs: "100%",
sm: "100%",
@@ -77,7 +75,14 @@ export function PartsOrderListTableDrawerComponent({
xl: "75%",
xxl: "65%"
};
const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
let drawerPercentage = "100%";
if (screens.xxl) drawerPercentage = bpoints.xxl;
else if (screens.xl) drawerPercentage = bpoints.xl;
else if (screens.lg) drawerPercentage = bpoints.lg;
else if (screens.md) drawerPercentage = bpoints.md;
else if (screens.sm) drawerPercentage = bpoints.sm;
else if (screens.xs) drawerPercentage = bpoints.xs;
const responsibilityCenters = bodyshop.md_responsibility_centers;
const Templates = TemplateList("partsorder", { job });

15
client/src/components/parts-queue-card/parts-queue-card.component.jsx
View File

@@ -11,10 +11,8 @@ import PartsQueueJobLinesComponent from "./parts-queue-job-lines.component";
import { logImEXEvent } from "../../firebase/firebase.utils";
export default function PartsQueueDetailCard() {
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const screens = Grid.useBreakpoint();
const bpoints = {
xs: "100%",
sm: "100%",
@@ -23,7 +21,14 @@ export default function PartsQueueDetailCard() {
xl: "75%",
xxl: "60%"
};
const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
let drawerPercentage = "100%";
if (screens.xxl) drawerPercentage = bpoints.xxl;
else if (screens.xl) drawerPercentage = bpoints.xl;
else if (screens.lg) drawerPercentage = bpoints.lg;
else if (screens.md) drawerPercentage = bpoints.md;
else if (screens.sm) drawerPercentage = bpoints.sm;
else if (screens.xs) drawerPercentage = bpoints.xs;
const searchParams = queryString.parse(useLocation().search);
const { selected } = searchParams;

2
client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
View File

@@ -208,7 +208,7 @@ export function ScheduleJobModalContainer({
onCancel={() => toggleModalVisible()}
onOk={() => form.submit()}
width={"90%"}
maskClosable={false}
mask={{ closable: false }}
destroyOnHidden
okButtonProps={{
loading: loading

16
client/src/pages/phonebook/phonebook.page.container.jsx
View File

@@ -39,10 +39,8 @@ export function PhonebookContainer({ setBreadcrumbs, setSelectedHeader }) {
const navigate = useNavigate();
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const screens = Grid.useBreakpoint();
const bpoints = {
xs: "100%",
sm: "100%",
@@ -51,7 +49,15 @@ export function PhonebookContainer({ setBreadcrumbs, setSelectedHeader }) {
xl: "50%",
xxl: "45%"
};
const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
// Get the largest active breakpoint
let drawerPercentage = "100%";
if (screens.xxl) drawerPercentage = bpoints.xxl;
else if (screens.xl) drawerPercentage = bpoints.xl;
else if (screens.lg) drawerPercentage = bpoints.lg;
else if (screens.md) drawerPercentage = bpoints.md;
else if (screens.sm) drawerPercentage = bpoints.sm;
else if (screens.xs) drawerPercentage = bpoints.xs;
return (
<RbacWrapper action="phonebook:view">

15
client/src/pages/shop-vendor/shop-vendor.page.component.jsx generated
View File

@@ -8,10 +8,8 @@ export default function ShopVendorPageComponent() {
const { selectedvendor } = Object.fromEntries(searchParams);
const navigate = useNavigate();
const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
.filter((screen) => !!screen[1])
.slice(-1)[0];
const screens = Grid.useBreakpoint();
const bpoints = {
xs: "100%",
sm: "100%",
@@ -20,7 +18,14 @@ export default function ShopVendorPageComponent() {
xl: "50%",
xxl: "45%"
};
const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";
let drawerPercentage = "100%";
if (screens.xxl) drawerPercentage = bpoints.xxl;
else if (screens.xl) drawerPercentage = bpoints.xl;
else if (screens.lg) drawerPercentage = bpoints.lg;
else if (screens.md) drawerPercentage = bpoints.md;
else if (screens.sm) drawerPercentage = bpoints.sm;
else if (screens.xs) drawerPercentage = bpoints.xs;
return (
<div>

1
client/src/translations/en_us/common.json
View File

@@ -1416,6 +1416,7 @@
"unsavedchangespopup": "You have unsaved changes. Are you sure you want to leave?"
},
"validation": {
"array": "Please select at least one option.",
"dateRangeExceeded": "The date range has been exceeded.",
"invalidemail": "Please enter a valid email.",
"invalidphone": "Please enter a valid phone number.",

1
client/src/translations/es/common.json
View File

@@ -1416,6 +1416,7 @@
"unsavedchangespopup": ""
},
"validation": {
"array": "Por favor seleccione al menos una opción.",
"dateRangeExceeded": "",
"invalidemail": "Por favor introduzca una dirección de correo electrónico válida.",
"invalidphone": "",

1
client/src/translations/fr/common.json
View File

@@ -1416,6 +1416,7 @@
"unsavedchangespopup": ""
},
"validation": {
"array": "Veuillez sélectionner au moins une option.",
"dateRangeExceeded": "",
"invalidemail": "S'il vous plaît entrer un email valide.",
"invalidphone": "",