Skip to content

Commit

Permalink
Disable out of constraint dates in DateInputV2 (ohcnetwork#6379)
Browse files Browse the repository at this point in the history 
* Fixed date buttons out of range

* Added translations

* Fixed cursor

* Update DateInputV2.tsx

* Add max value

* disable future for last service date

---------

Co-authored-by: Ashesh <[email protected]>
  • Loading branch information
@suprabathk @Ashesh3
suprabathk and Ashesh3 authored Nov 21, 2023
1 parent 11da461 commit 3eade87
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 31 deletions.
1 change: 1 addition & 0 deletions src/Components/Assets/AssetServiceEditModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,7 @@ export const AssetServiceEditModal = (props: {
className="mt-2"
position="LEFT"
value={new Date(form.serviced_on)}
max={new Date(props.service_record.created_date)}
onChange={(date) => {
if (
dayjs(date.value).format("YYYY-MM-DD") >
Expand Down
82 changes: 53 additions & 29 deletions src/Components/Common/DateInputV2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import CareIcon from "../../CAREUI/icons/CareIcon";
import { Popover } from "@headlessui/react";
import { classNames } from "../../Utils/utils";
import dayjs from "../../Utils/dayjs";
import * as Notification from "../../Utils/Notifications.js";
import { t } from "i18next";

type DatePickerType = "date" | "month" | "year";
export type DatePickerPosition = "LEFT" | "RIGHT" | "CENTER";
Expand All @@ -16,6 +18,7 @@ interface Props {
value: Date | undefined;
min?: Date;
max?: Date;
outOfLimitsErrorMessage?: string;
onChange: (date: Date) => void;
position?: DatePickerPosition;
disabled?: boolean;
Expand All @@ -34,6 +37,7 @@ const DateInputV2: React.FC<Props> = ({
value,
min,
max,
outOfLimitsErrorMessage,
onChange,
position,
disabled,
Expand Down Expand Up @@ -100,16 +104,21 @@ const DateInputV2: React.FC<Props> = ({
) => void;

const setDateValue = (date: number, close: CloseFunction) => () => {
isDateWithinConstraints(date) &&
onChange(
new Date(
datePickerHeaderDate.getFullYear(),
datePickerHeaderDate.getMonth(),
date
)
);
close();
setIsOpen?.(false);
isDateWithinConstraints(date)
? (() => {
onChange(
new Date(
datePickerHeaderDate.getFullYear(),
datePickerHeaderDate.getMonth(),
date
)
);
close();
setIsOpen?.(false);
})()
: Notification.Error({
msg: outOfLimitsErrorMessage ?? "Cannot select date out of range",
});
};

const getDayCount = (date: Date) => {
Expand Down Expand Up @@ -220,7 +229,7 @@ const DateInputV2: React.FC<Props> = ({
readOnly
disabled={disabled}
className={`cui-input-base cursor-pointer disabled:cursor-not-allowed ${className}`}
placeholder={placeholder ?? "Select date"}
placeholder={placeholder ?? t("select_date")}
value={value && dayjs(value).format("DD/MM/YYYY")}
/>
<div className="absolute right-0 top-1/2 -translate-y-1/2 p-2">
Expand Down Expand Up @@ -248,7 +257,7 @@ const DateInputV2: React.FC<Props> = ({
[dd, mm, yyyy].filter(Boolean).join("/")
) || ""
} // Display the value in DD/MM/YYYY format
placeholder="DD/MM/YYYY"
placeholder={t("DD/MM/YYYY")}
onChange={(e) => {
setDisplayValue(e.target.value.replaceAll("/", ""));
const value = dayjs(e.target.value, "DD/MM/YYYY", true);
Expand Down Expand Up @@ -330,26 +339,41 @@ const DateInputV2: React.FC<Props> = ({
className="aspect-square w-[14.26%] border border-transparent p-1 text-center text-sm"
/>
))}
{dayCount.map((d, i) => (
<div
key={i}
id={`date-${d}`}
className="aspect-square w-[14.26%]"
>
{dayCount.map((d, i) => {
const withinConstraints = isDateWithinConstraints(d);
const selected = value && isSelectedDate(d);

const baseClasses =
"flex h-full items-center justify-center rounded text-center text-sm leading-loose transition duration-100 ease-in-out";
let conditionalClasses = "";

if (withinConstraints) {
if (selected) {
conditionalClasses =
"bg-primary-500 font-bold text-white";
} else {
conditionalClasses =
"hover:bg-gray-300 cursor-pointer";
}
} else {
conditionalClasses =
"!cursor-not-allowed !text-gray-400";
}
return (
<div
onClick={setDateValue(d, close)}
className={classNames(
"flex h-full cursor-pointer items-center justify-center rounded text-center text-sm leading-loose text-black transition duration-100 ease-in-out",
value && isSelectedDate(d)
? "bg-primary-500 font-bold text-white"
: "hover:bg-gray-300",
!isDateWithinConstraints(d) && "!text-gray-300"
)}
key={i}
id={`date-${d}`}
className="aspect-square w-[14.26%]"
>
{d}
<div
onClick={setDateValue(d, close)}
className={`${baseClasses} ${conditionalClasses}`}
>
{d}
</div>
</div>
</div>
))}
);
})}
</div>
</>
)}
Expand Down
1 change: 1 addition & 0 deletions src/Components/Facility/AssetCreate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -883,6 +883,7 @@ const AssetCreate = (props: AssetProps) => {
name="last_serviced_on"
className="mt-2"
position="RIGHT"
disableFuture
value={last_serviced_on && new Date(last_serviced_on)}
onChange={(date) => {
if (
Expand Down
6 changes: 4 additions & 2 deletions src/Locale/en/Common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,5 +155,7 @@
"all_changes_have_been_saved": "All changes have been saved",
"no_data_found": "No data found",
"edit": "Edit",
"clear_selection": "Clear selection"
}
"clear_selection": "Clear selection",
"select_date": "Select date",
"DD/MM/YYYY": "DD/MM/YYYY"
}

0 comments on commit 3eade87

Please sign in to comment.