Merge branch 'develop' into remove-clickElementById/ohcnetwork#8929

AnveshNalimela · Nov 5, 2024 · 21fb0b2 · 21fb0b2
2 parents 5deaa38 + a65d7ec
commit 21fb0b2
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 20 deletions.
diff --git a/src/components/CameraFeed/ConfigureCamera.tsx b/src/components/CameraFeed/ConfigureCamera.tsx
@@ -391,14 +391,22 @@ export default function ConfigureCamera(props: Props) {
                 >
                   <TextFormField
                     name="preset-name"
-                    className="py-4"
+                    className="w-full py-4"
                     value={presetName}
                     onChange={({ value }) => setPresetName(value)}
                     errorClassName="hidden"
                     placeholder={t("preset_name_placeholder")}
                     suggestions={presetNameSuggestions}
+                    clearable={true}
                   />
+
                   <div className="cui-form-button-group">
+                    <Cancel
+                      onClick={() => {
+                        setCreatePreset(undefined);
+                        setPresetName("");
+                      }}
+                    />
                     <Submit
                       onClick={async () => {
                         const { res } = await request(FeedRoutes.createPreset, {

diff --git a/src/components/Form/FormFields/TextFormField.tsx b/src/components/Form/FormFields/TextFormField.tsx
@@ -24,6 +24,7 @@ export type TextFormFieldProps = FormFieldBaseProps<string> &
     trailingPadding?: string | undefined;
     leadingPadding?: string | undefined;
     suggestions?: string[];
+    clearable?: boolean | undefined;
   };
 
 const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
@@ -41,24 +42,36 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
   };
 
   let child = (
-    <input
-      {...props}
-      ref={ref as React.Ref<HTMLInputElement>}
-      id={field.id}
-      className={classNames(
-        "cui-input-base peer",
-        hasLeading && (props.leadingPadding || "pl-10"),
-        hasTrailing && (props.trailingPadding || "pr-10"),
-        field.error && "border-danger-500",
-        props.inputClassName,
+    <div className="relative">
+      <input
+        {...props}
+        ref={ref as React.Ref<HTMLInputElement>}
+        id={field.id}
+        className={classNames(
+          "cui-input-base peer",
+          hasLeading && (props.leadingPadding || "pl-10"),
+          hasTrailing && (props.trailingPadding || "pr-10"),
+          field.error && "border-danger-500",
+          props.inputClassName,
+        )}
+        disabled={field.disabled}
+        type={props.type === "password" ? getPasswordFieldType() : props.type}
+        name={field.name}
+        value={field.value}
+        required={field.required}
+        onChange={(e) => field.handleChange(e.target.value)}
+      />
+      {props.clearable && field.value && (
+        <button
+          type="button"
+          className="absolute right-2 top-1/2 -translate-y-1/2 transform text-gray-500"
+          onClick={() => field.handleChange("")}
+          aria-label="Clear input"
+        >
+          <CareIcon icon="l-times-circle" className="text-lg" />
+        </button>
       )}
-      disabled={field.disabled}
-      type={props.type === "password" ? getPasswordFieldType() : props.type}
-      name={field.name}
-      value={field.value}
-      required={field.required}
-      onChange={(e) => field.handleChange(e.target.value)}
-    />
+    </div>
   );
 
   if (props.type === "password") {

diff --git a/src/components/Patient/PatientHome.tsx b/src/components/Patient/PatientHome.tsx
@@ -591,7 +591,7 @@ export const PatientHome = (props: any) => {
                       </p>
                     </div>
                   )}
-                <div className="mb-6 rounded-sm bg-white p-2 text-center shadow">
+                <div className="my-3 rounded-sm bg-white p-2 text-center shadow md:my-0 md:mb-6">
                   <div className="flex justify-between">
                     <div className="w-1/2 border-r-2">
                       <div className="text-sm font-normal leading-5 text-secondary-500">

diff --git a/src/components/Patient/SampleDetails.tsx b/src/components/Patient/SampleDetails.tsx
@@ -273,7 +273,7 @@ export const SampleDetails = ({ id }: DetailRoute) => {
       backUrl="/sample"
       options={
         sampleDetails?.patient && (
-          <div className="flex justify-end">
+          <div className="my-2 flex justify-center md:justify-end">
             <ButtonV2
               href={`/patient/${sampleDetails.patient}/test_sample/${id}/icmr_sample`}
             >