Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit6f48e3a

Browse files
authored
OBPIH-7186 Display lot numbers expiration date mismatch in modal (#5575)
1 parentd5e9de3 commit6f48e3a

File tree

9 files changed

+560
-125
lines changed

9 files changed

+560
-125
lines changed

‎grails-app/i18n/messages.properties‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4864,3 +4864,11 @@ react.report.reorder.showProductsBelowMinimum.label=Show products below minimum
48644864
react.report.reorder.category.label=Category
48654865
react.report.reorder.tags.label=Tags
48664866
react.report.reorder.loadTable.label=Load table
4867+
4868+
react.confirmExpirationDate.modal.title.label=Confirm save
4869+
react.confirmExpirationDate.modal.subtitle.label=This will update the expiry date across all depots in the system for the lots listed below. Are you sure you want to proceed?
4870+
react.confirmExpirationDate.modal.code.label=Code
4871+
react.confirmExpirationDate.modal.productName.label=Product Name
4872+
react.confirmExpirationDate.modal.lot.label=Lot
4873+
react.confirmExpirationDate.modal.previousExpiry.label=Previous Expiry
4874+
react.confirmExpirationDate.modal.newExpiry.label=New Expiry

‎src/css/main.scss‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1659,6 +1659,47 @@ div.search-input:focus-within {
16591659
padding:20px;
16601660
display:flex;
16611661
flex-direction:column;
1662+
1663+
&__header {
1664+
display:flex;
1665+
flex-direction:column;
1666+
padding-left:6px;
1667+
1668+
&__title {
1669+
font-size:24px;
1670+
}
1671+
1672+
&__subtitle {
1673+
font-size:16px;
1674+
}
1675+
}
1676+
1677+
&__main {
1678+
padding:04px;
1679+
overflow-y:auto;
1680+
max-height:400px;
1681+
margin-bottom:15px;
1682+
1683+
&::-webkit-scrollbar {
1684+
width:0.5em;
1685+
height:0.5em;
1686+
}
1687+
1688+
&::-webkit-scrollbar-track {
1689+
background:var(--blue-200);
1690+
}
1691+
1692+
&::-webkit-scrollbar-thumb {
1693+
background-color:var(--blue-301);
1694+
border-radius:4px;
1695+
}
1696+
}
1697+
1698+
&__buttons {
1699+
display:flex;
1700+
justify-content:flex-end;
1701+
gap:8px;
1702+
}
16621703
}
16631704

16641705
// Disabling resizing of textarea
@@ -1706,6 +1747,10 @@ div.search-input:focus-within {
17061747
min-width:250px;
17071748
}
17081749

1750+
.min-width-1000 {
1751+
min-width:1000px;
1752+
}
1753+
17091754
.w-90 {
17101755
width:90%;
17111756
}
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
importReactfrom'react';
2+
3+
importPropTypesfrom'prop-types';
4+
5+
importuseConfirmExpirationDateModalfrom'hooks/useConfirmExpirationDateModal';
6+
importuseTranslatefrom'hooks/useTranslate';
7+
importuseTranslationfrom'hooks/useTranslation';
8+
9+
importModalWithTablefrom'./ModalWithTable';
10+
11+
constConfirmExpirationDateModal=({
12+
isOpen, itemsWithMismatchedExpiry, onConfirm, onCancel,
13+
})=>{
14+
useTranslation('confirmExpirationDate');
15+
consttranslate=useTranslate();
16+
const{ columns}=useConfirmExpirationDateModal();
17+
18+
return(
19+
<ModalWithTable
20+
isOpen={isOpen}
21+
title={translate('react.confirmExpirationDate.modal.title.label','Confirm save')}
22+
subtitle={translate('react.confirmExpirationDate.modal.subtitle.label','This will update the expiry date across all depots...')}
23+
columns={columns}
24+
data={itemsWithMismatchedExpiry}
25+
confirmLabel={{
26+
key:'react.default.yes.label',
27+
default:'Yes',
28+
}}
29+
cancelLabel={{
30+
key:'react.default.no.label',
31+
default:'No',
32+
}}
33+
onConfirm={onConfirm}
34+
onCancel={onCancel}
35+
/>
36+
);
37+
};
38+
39+
ConfirmExpirationDateModal.propTypes={
40+
isOpen:PropTypes.bool.isRequired,
41+
itemsWithMismatchedExpiry:PropTypes.arrayOf(
42+
PropTypes.shape({
43+
code:PropTypes.string,
44+
product:PropTypes.shape({}),
45+
lotNumber:PropTypes.string,
46+
previousExpiry:PropTypes.string,
47+
newExpiry:PropTypes.string,
48+
}),
49+
),
50+
onConfirm:PropTypes.func.isRequired,
51+
onCancel:PropTypes.func.isRequired,
52+
};
53+
54+
ConfirmExpirationDateModal.defaultProps={
55+
itemsWithMismatchedExpiry:[],
56+
};
57+
58+
exportdefaultConfirmExpirationDateModal;
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
importReactfrom'react';
2+
3+
importPropTypesfrom'prop-types';
4+
importModalfrom'react-modal';
5+
6+
importDataTablefrom'components/DataTable/v2/DataTable';
7+
importButtonfrom'components/form-elements/Button';
8+
9+
constModalWithTable=({
10+
isOpen,
11+
title,
12+
subtitle,
13+
columns,
14+
data,
15+
confirmLabel,
16+
cancelLabel,
17+
onConfirm,
18+
onCancel,
19+
})=>{
20+
if(!isOpen){
21+
document.body.style.overflowY='auto';
22+
returnnull;
23+
}
24+
25+
return(
26+
<ModalisOpen={isOpen}className="modal-content min-width-1000">
27+
<divclassName="modal-content__header">
28+
<pclassName="modal-content__header__title">{title}</p>
29+
<pclassName="modal-content__header__subtitile">{subtitle}</p>
30+
</div>
31+
<divclassName="modal-content__main">
32+
<DataTabledata={data}columns={columns}disablePagination/>
33+
</div>
34+
<divclassName="modal-content__buttons">
35+
<Button
36+
defaultLabel={cancelLabel.default}
37+
label={cancelLabel.key}
38+
variant="secondary"
39+
onClick={onCancel}
40+
/>
41+
<Button
42+
defaultLabel={confirmLabel.default}
43+
label={confirmLabel.key}
44+
variant="primary"
45+
onClick={onConfirm}
46+
/>
47+
</div>
48+
</Modal>
49+
);
50+
};
51+
52+
ModalWithTable.propTypes={
53+
isOpen:PropTypes.bool.isRequired,
54+
title:PropTypes.string.isRequired,
55+
subtitle:PropTypes.string.isRequired,
56+
columns:PropTypes.arrayOf(PropTypes.object).isRequired,
57+
data:PropTypes.arrayOf(PropTypes.object).isRequired,
58+
confirmLabel:PropTypes.shape({
59+
key:PropTypes.string.isRequired,
60+
default:PropTypes.string.isRequired,
61+
}).isRequired,
62+
cancelLabel:PropTypes.shape({
63+
key:PropTypes.string.isRequired,
64+
default:PropTypes.string.isRequired,
65+
}).isRequired,
66+
onConfirm:PropTypes.func.isRequired,
67+
onCancel:PropTypes.func.isRequired,
68+
};
69+
70+
exportdefaultModalWithTable;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp