Skip to content

Commit

Permalink
Assets date picker (#6338)
Browse files Browse the repository at this point in the history 
* Using DateFormField instead of DateInputV2

* Using Label from DateFormField

* Prevent Datepicker focus

* Removed unused Ref

* Using formatDate instead of .format

* Added translations

* Added translations for AssetServiceEditModal

* Added translations for AssetCreate

---------

Co-authored-by: Mohammed Nihal <[email protected]>
Co-authored-by: Khavin Shankar <[email protected]>
  • Loading branch information
@suprabathk @nihal467 @khavinshankar
3 people authored Oct 4, 2023
1 parent c7c37c6 commit 4f02469
Show file tree
Hide file tree
Showing 5 changed files with 130 additions and 67 deletions.
60 changes: 39 additions & 21 deletions src/Components/Assets/AssetServiceEditModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ import DialogModal from "../Common/Dialog";
import { AssetData, AssetService, AssetServiceEdit } from "./AssetTypes";
import dayjs from "dayjs";
import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
import DateInputV2 from "../Common/DateInputV2";
import { FieldLabel } from "../Form/FormFields/FormField";
import { formatDate, formatDateTime } from "../../Utils/utils";
import CareIcon from "../../CAREUI/icons/CareIcon";
import DateFormField from "../Form/FormFields/DateFormField";
import { t } from "i18next";

export const AssetServiceEditModal = (props: {
asset?: AssetData;
Expand Down Expand Up @@ -61,12 +61,12 @@ export const AssetServiceEditModal = (props: {
<DialogModal
show={props.show}
onClose={props.handleClose}
title="Edit History"
title={t("edit_history")}
>
<div>
<div className="mb-4">
<p className="text-md mt-1 text-gray-500">
Update record for asset
{t("update_record_for_asset")}
<strong> {props.asset?.name}</strong>
</p>
</div>
Expand Down Expand Up @@ -110,13 +110,17 @@ export const AssetServiceEditModal = (props: {
<div className="mb-4 rounded-lg border border-gray-300 p-4 py-2">
<div className="my-2 flex justify-between">
<div className="grow">
<p className="text-sm font-medium text-gray-500">Edited On</p>
<p className="text-sm font-medium text-gray-500">
{t("edited_on")}
</p>
<p className="text-gray-900">
{formatDateTime(editRecord.edited_on)}
</p>
</div>
<div className="grow">
<p className="text-sm font-medium text-gray-500">Edited By</p>
<p className="text-sm font-medium text-gray-500">
{t("edited_by")}
</p>
<p className="text-gray-900">
{editRecord.edited_by.username}
</p>
Expand All @@ -125,7 +129,7 @@ export const AssetServiceEditModal = (props: {
<div className="mt-4 flex flex-col justify-between">
<div className="grow">
<p className="text-sm font-medium text-gray-500">
Serviced On
{t("serviced_on")}
</p>
<p
className="text-gray-900"
Expand All @@ -135,7 +139,9 @@ export const AssetServiceEditModal = (props: {
</p>
</div>
<div className="mt-4 grow">
<p className="text-sm font-medium text-gray-500">Notes</p>
<p className="text-sm font-medium text-gray-500">
{t("notes")}
</p>
<p className="text-gray-900" id="edit-history-asset-note">
{editRecord.note || "-"}
</p>
Expand All @@ -151,7 +157,7 @@ export const AssetServiceEditModal = (props: {
editRecord ? setEditRecord(undefined) : props.handleClose();
}}
>
{editRecord ? "Back" : "Close"}
{editRecord ? t("back") : t("close")}
</ButtonV2>
</div>
</div>
Expand All @@ -163,12 +169,12 @@ export const AssetServiceEditModal = (props: {
<DialogModal
show={props.show}
onClose={props.handleClose}
title="Update Asset Service Record"
title={t("update_asset_service_record")}
>
<div>
<div className="mb-4">
<p className="text-md mt-1 text-gray-500">
Update record for asset
{t("update_record_for_asset")}
<strong> {props.asset?.name}</strong>
</p>
</div>
Expand All @@ -178,28 +184,40 @@ export const AssetServiceEditModal = (props: {
className="col-span-6 sm:col-span-3"
data-testid="asset-last-serviced-on-input"
>
<FieldLabel>Serviced On</FieldLabel>
<DateInputV2
<DateFormField
label={t("serviced_on")}
name="serviced_on"
className="mt-2"
position="LEFT"
value={new Date(form.serviced_on)}
onChange={(date) => {
setForm({
...form,
serviced_on: dayjs(date).format("YYYY-MM-DD"),
});
if (
dayjs(date.value).format("YYYY-MM-DD") >
new Date(
props.service_record.created_date
).toLocaleDateString("en-ca")
) {
Notification.Error({
msg: `Service date can't be after ${formatDate(
props.service_record.created_date
)} (Creation date)`,
});
} else {
setForm({
...form,
serviced_on: dayjs(date.value).format("YYYY-MM-DD"),
});
}
}}
max={new Date(props.service_record.created_date)}
/>
</div>

<div className="col-span-6" data-testid="asset-notes-input">
<TextAreaFormField
name="notes"
rows={5}
label="Notes"
placeholder="Eg. Details on functionality, service, etc."
label={t("notes")}
placeholder={t("eg_details_on_functionality_service_etc")}
value={form.note}
onChange={(e) => {
setForm({ ...form, note: e.value });
Expand All @@ -210,7 +228,7 @@ export const AssetServiceEditModal = (props: {
</div>
<div className="flex flex-col justify-end gap-2 md:flex-row">
<Submit
label={`${isLoading ? "Updating" : "Update"}`}
label={`${isLoading ? t("updating") : t("update")}`}
onClick={handleSubmit}
loading={isLoading}
/>
Expand Down
8 changes: 1 addition & 7 deletions src/Components/Common/DateInputV2.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { MutableRefObject, useEffect, useRef, useState } from "react";
import { MutableRefObject, useEffect, useState } from "react";
import {
addMonths,
addYears,
Expand Down Expand Up @@ -60,7 +60,6 @@ const DateInputV2: React.FC<Props> = ({
const [displayValue, setDisplayValue] = useState<string>(
value ? dayjs(value).format("DDMMYYYY") : ""
);
const popover = useRef<HTMLDivElement>(null);

const decrement = () => {
switch (type) {
Expand Down Expand Up @@ -241,7 +240,6 @@ const DateInputV2: React.FC<Props> = ({
onBlur={() => {
setIsOpen?.(false);
}}
ref={popover}
static
className={classNames(
"cui-dropdown-base absolute mt-0.5 w-72 divide-y-0 p-4",
Expand All @@ -252,10 +250,6 @@ const DateInputV2: React.FC<Props> = ({
<input
id="date-input"
autoFocus
onBlur={(e) => {
popover.current?.focus();
e.preventDefault();
}}
className="cui-input-base bg-gray-50"
value={
displayValue.replace(
Expand Down
Loading

0 comments on commit 4f02469

Please sign in to comment.