Updated placeholder, changed layout of time picker on mobile, and mad…

…e some fixes for very edge cases
ohcnetwork · Sep 13, 2024 · 060b271 · 060b271
1 parent 435484d
commit 060b271
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 7 deletions.
diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
@@ -12,6 +12,8 @@ export type DatePickerPosition =
   | "LEFT"
   | "RIGHT"
   | "CENTER"
+  | "LEFT-CENTER"
+  | "RIGHT-CENTER"
   | "TOP-LEFT"
   | "TOP-RIGHT"
   | "TOP-CENTER";
@@ -32,6 +34,7 @@ interface Props {
   isOpen?: boolean;
   setIsOpen?: (isOpen: boolean) => void;
   time?: boolean;
+  popOverClassName?: string;
 }
 
 const DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -52,6 +55,7 @@ const DateInputV2: React.FC<Props> = ({
   setIsOpen,
   time,
   isOpen,
+  popOverClassName,
 }) => {
   const [dayCount, setDayCount] = useState<Array<number>>([]);
   const [blankDays, setBlankDays] = useState<Array<number>>([]);
@@ -290,6 +294,7 @@ const DateInputV2: React.FC<Props> = ({
   }, [isOpen]);
 
   const dateFormat = `DD/MM/YYYY${time ? " hh:mm a" : ""}`;
+  const placeHolder = dateFormat.replace("a", "am/pm");
 
   const getDisplayValue = (date: Date) => {
     return dayjs(date).format(dateFormat);
@@ -299,7 +304,11 @@ const DateInputV2: React.FC<Props> = ({
     switch (position) {
       case "LEFT":
         return "left-0";
+      case "LEFT-CENTER":
+        return "right-0 transform md:translate-x-1/2";
       case "RIGHT":
+        return "right-0";
+      case "RIGHT-CENTER":
         return "right-0 transform md:translate-x-1/2";
       case "CENTER":
         return "transform -translate-x-1/2";
@@ -351,8 +360,9 @@ const DateInputV2: React.FC<Props> = ({
                   <PopoverPanel
                     static
                     className={classNames(
-                      `cui-dropdown-base absolute my-0.5 ${time ? "w-full md:w-[400px]" : "w-72"} divide-y-0 rounded p-4`,
+                      `cui-dropdown-base absolute my-0.5 ${time ? "max-h-[80vh] w-full md:h-auto md:w-[400px]" : "w-72"} divide-y-0 rounded p-4`,
                       getPosition(),
+                      popOverClassName,
                     )}
                   >
                     <div
@@ -374,7 +384,7 @@ const DateInputV2: React.FC<Props> = ({
                               : ""
                         }
                         autoFocus
-                        placeholder={dateFormat}
+                        placeholder={placeHolder}
                         onChange={(e) => {
                           const nvalue = dayjs(
                             e.target.value,
@@ -390,8 +400,8 @@ const DateInputV2: React.FC<Props> = ({
                         }}
                         onBlur={() => setEditingText(null)}
                       />
-                      <div className="flex flex-row items-stretch gap-4">
-                        <div className="flex w-full flex-col items-center justify-between">
+                      <div className="flex flex-col items-center gap-4 px-4 md:flex-row md:px-0">
+                        <div className="flex flex-1 flex-col items-center justify-between">
                           <div className="flex">
                             <button
                               type="button"

diff --git a/src/Components/Common/DateRangeInputV2.tsx b/src/Components/Common/DateRangeInputV2.tsx
@@ -34,7 +34,7 @@ const DateRangeInputV2 = ({ value, onChange, ...props }: Props) => {
           }}
           min={props.min}
           max={end || props.max}
-          position="RIGHT"
+          position="RIGHT-CENTER"
           placeholder="Start date"
           disabled={props.disabled}
           time={props.time}

diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
@@ -829,7 +829,7 @@ const AssetCreate = (props: AssetProps) => {
                         label={t("last_serviced_on")}
                         name="last_serviced_on"
                         className="mt-2"
-                        position="RIGHT"
+                        position="TOP-RIGHT"
                         disableFuture
                         value={last_serviced_on && new Date(last_serviced_on)}
                         onChange={(date) => {

diff --git a/src/Components/Facility/Consultations/Beds.tsx b/src/Components/Facility/Consultations/Beds.tsx
@@ -215,6 +215,7 @@ const Beds = (props: BedsProps) => {
               max={new Date()}
               error=""
               errorClassName="hidden"
+              position="TOP-RIGHT"
               time
             />
             <div>

diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
@@ -333,6 +333,8 @@ const DischargeModal = ({
             value={
               dischargeOrDeathTime ? new Date(dischargeOrDeathTime) : new Date()
             }
+            position="TOP-RIGHT"
+            popOverClassName="max-h-[50vh]"
             onChange={(e) => {
               const updates: Record<string, string | undefined> = {
                 discharge_date: undefined,

diff --git a/src/Components/Form/FormFields/DateFormField.tsx b/src/Components/Form/FormFields/DateFormField.tsx
@@ -13,6 +13,7 @@ type Props = FormFieldBaseProps<Date> & {
   disableFuture?: boolean;
   disablePast?: boolean;
   time?: boolean;
+  popOverClassName?: string;
 };
 
 /**
@@ -50,6 +51,7 @@ const DateFormField = (props: Props) => {
         position={props.position ?? "RIGHT"}
         placeholder={props.placeholder}
         time={props.time}
+        popOverClassName={props.popOverClassName}
       />
     </FormField>
   );

diff --git a/src/Components/Medicine/AdministerMedicine.tsx b/src/Components/Medicine/AdministerMedicine.tsx
@@ -151,6 +151,7 @@ export default function AdministerMedicine({ prescription, ...props }: Props) {
               min={new Date(prescription.created_date)}
               max={new Date()}
               errorClassName="hidden"
+              position="TOP-RIGHT"
               time
             />
           </div>

diff --git a/src/Components/Medicine/MedicineAdministration.tsx b/src/Components/Medicine/MedicineAdministration.tsx
@@ -217,6 +217,7 @@ export default function MedicineAdministration(props: Props) {
                   disabled={!shouldAdminister[index] || !isCustomTime[index]}
                   min={new Date(obj.created_date)}
                   max={new Date()}
+                  position="TOP-RIGHT"
                   errorClassName="hidden"
                   time
                 />

diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
@@ -204,5 +204,5 @@
   "delete_item": "Delete {{name}}",
   "unsupported_browser": "Unsupported Browser",
   "unsupported_browser_description": "Your browser ({{name}} version {{version}}) is not supported. Please update your browser to the latest version or switch to a supported browser for the best experience."
-
+  
 }