Replace OnlineUsersSelect with Tailwind component (#5861)

* Replace OnlineUsersSelect with Tailwind component * fix ui issues * merge develop
ohcnetwork · Jul 21, 2023 · 7933c9d · 7933c9d
1 parent 5a45c03
commit 7933c9d
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 321 deletions.
diff --git a/src/Components/Common/ConfirmDialog.tsx b/src/Components/Common/ConfirmDialog.tsx
@@ -27,7 +27,7 @@ const ConfirmDialog = ({
   return (
     <DialogModal {...props}>
       {children}
-      <div className="mt-6 flex justify-end gap-2 w-full flex-col md:flex-row">
+      <div className="mt-6 flex w-full flex-col justify-end gap-2 md:flex-row">
         <Cancel onClick={props.onClose} label={cancelLabel} />
         <Submit onClick={onConfirm} variant={variant} disabled={disabled}>
           {action}

diff --git a/src/Components/Common/Dialog.tsx b/src/Components/Common/Dialog.tsx
@@ -53,20 +53,16 @@ const DialogModal = (props: DialogProps) => {
                 <Dialog.Panel
                   className={classNames(
                     className,
-                    fixedWidth && "max-w-md w-full",
+                    fixedWidth && "w-full max-w-md",
                     "transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all"
                   )}
                 >
                   <Dialog.Title
                     as="h4"
-                    className="text-lg font-medium leading-6 text-gray-900 flex justify-between"
+                    className="flex w-full flex-col text-lg font-medium leading-6 text-gray-900"
                   >
-                    <div>
-                      <h4>{title}</h4>
-                      <p className="mt-2 text-sm text-gray-600">
-                        {description}
-                      </p>
-                    </div>
+                    <h4>{title}</h4>
+                    <p className="mt-2 text-sm text-gray-600">{description}</p>
                     {props.titleAction}
                   </Dialog.Title>
                   {children}

diff --git a/src/Components/Common/OnlineUsersSelect.tsx b/src/Components/Common/OnlineUsersSelect.tsx
diff --git a/src/Components/Common/UserAutocompleteFormField.tsx b/src/Components/Common/UserAutocompleteFormField.tsx
@@ -1,3 +1,4 @@
+import moment from "moment";
 import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
 import { getFacilityUsers, getUserList } from "../../Redux/actions";
 import { Autocomplete } from "../Form/FormFields/Autocomplete";
@@ -11,6 +12,8 @@ import { UserModel } from "../Users/models";
 type Props = FormFieldBaseProps<UserModel> & {
   placeholder?: string;
   facilityId?: string;
+  userType?: string;
+  showActiveStatus?: boolean;
 };
 
 export default function UserAutocompleteFormField(props: Props) {
@@ -20,27 +23,64 @@ export default function UserAutocompleteFormField(props: Props) {
     { queryResponseExtractor: (data) => data.results }
   );
 
+  let search_filter: {
+    limit: number;
+    offset: number;
+    user_type?: string;
+    search_text?: string;
+  } = { limit: 5, offset: 0 };
+
+  if (props.showActiveStatus && props.userType) {
+    search_filter = { ...search_filter, user_type: props.userType };
+  }
+
+  const getStatusIcon = (option: UserModel) => {
+    if (!props.showActiveStatus) return null;
+
+    const isOnline = moment()
+      .subtract(5, "minutes")
+      .isBefore(option.last_login);
+
+    return (
+      <div className="mr-6 mt-[2px]">
+        <svg
+          className={`h-3 w-3 ${isOnline ? "text-green-500" : "text-gray-400"}`}
+          fill="currentColor"
+          viewBox="0 0 8 8"
+        >
+          <circle cx="4" cy="4" r="4" />
+        </svg>
+      </div>
+    );
+  };
+
   return (
     <FormField field={field}>
-      <Autocomplete
-        id={field.id}
-        disabled={field.disabled}
-        placeholder={props.placeholder}
-        value={field.value}
-        onChange={field.handleChange}
-        options={options(field.value && [field.value])}
-        optionLabel={getUserFullName}
-        optionDescription={(option) => `${option.user_type}`}
-        optionValue={(option) => option}
-        onQuery={(query) =>
-          fetchOptions(
-            props.facilityId
-              ? getFacilityUsers(props.facilityId)
-              : getUserList({ limit: 5, offset: 0, search_text: query })
-          )
-        }
-        isLoading={isLoading}
-      />
+      <div className="relative">
+        <Autocomplete
+          id={field.id}
+          disabled={field.disabled}
+          placeholder={props.placeholder}
+          value={field.value}
+          onChange={field.handleChange}
+          options={options(field.value && [field.value])}
+          optionLabel={getUserFullName}
+          optionIcon={getStatusIcon}
+          optionDescription={(option) => `${option.user_type}`}
+          optionValue={(option) => option}
+          onQuery={(query) =>
+            fetchOptions(
+              props.facilityId
+                ? getFacilityUsers(props.facilityId)
+                : getUserList({
+                    ...search_filter,
+                    search_text: query,
+                  })
+            )
+          }
+          isLoading={isLoading}
+        />
+      </div>
     </FormField>
   );
 }