Redesign team list page (#1673)

* show employment details on teams

* teamlist page redesign

* removed client column and some UI fixes

* worked on review comments

* common component Button added

* static salary value removed and empty state added

* intervalToDuration func used to calculate duration

---------

Co-authored-by: “Apoorv <“tiwari.apoorv1316@gmail.com”>
Co-authored-by: Apoorv Tiwari <tiwari.apoorv1316@gmail.com>
Co-authored-by: Saeloun <saeloun@Saelouns-MacBook-Pro.local>

app/javascript/src/common/HoverMoreOptions/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+type Iprops = {
+  children: any;
+  position?: string;
+};
+
+const HoverMoreOptions = ({ children, position }: Iprops) => (
+  <div
+    className={`absolute ${
+      position || "bottom-16 right-0"
+    } hidden items-center justify-between rounded-xl border-2 border-miru-gray-200 bg-white lg:w-28 lg:p-2 lg:group-hover:flex xl:w-40 xl:p-3`}
+    onClick={e => e.stopPropagation()}
+  >
+    {children}
+  </div>
+);
+
+export default HoverMoreOptions;

app/javascript/src/components/Team/List/Header.tsx

@@ -1,18 +1,17 @@
 import React from "react";
 
 import { PlusIcon } from "miruIcons";
+import { Button } from "StyledComponents";
 
 import teamApi from "apis/team";
 import AutoSearch from "common/AutoSearch";
 import { TeamModalType } from "constants/index";
 import { useList } from "context/TeamContext";
-import { useUserContext } from "context/UserContext";
 import { unmapList } from "mapper/team.mapper";
 
 import SearchDataRow from "./SearchDataRow";
 
 const Header = () => {
-  const { isAdminUser } = useUserContext();
   const { setModalState } = useList();
 
   const fetchTeamList = async searchString => {
@@ -23,26 +22,21 @@ const Header = () => {
   };
 
   return (
-    <div className="mt-6 mb-3 lg:flex lg:items-center lg:justify-between">
-      <h2 className="header__title ml-4 hidden lg:inline">Team</h2>
-      {isAdminUser && (
-        <>
-          <AutoSearch
-            SearchDataRow={SearchDataRow}
-            searchAction={fetchTeamList}
-          />
-          <div className="flex justify-end pr-6 lg:pr-0">
-            <button
-              className="header__button"
-              type="button"
-              onClick={() => setModalState(TeamModalType.ADD_EDIT)}
-            >
-              <PlusIcon size={16} weight="fill" />
-              <span className="ml-2 hidden lg:inline-block">NEW USER</span>
-            </button>
-          </div>
-        </>
-      )}
+    <div className="mt-6 mb-3 flex items-center justify-between">
+      <h2 className="header__title hidden lg:inline">Team</h2>
+      <AutoSearch SearchDataRow={SearchDataRow} searchAction={fetchTeamList} />
+      <div className="flex justify-end">
+        <Button
+          className="ml-2 flex items-center px-2 py-2 lg:ml-0 lg:px-4"
+          style="secondary"
+          onClick={() => setModalState(TeamModalType.ADD_EDIT)}
+        >
+          <PlusIcon size={16} weight="bold" />
+          <span className="ml-2 hidden text-base font-medium tracking-widest lg:inline-block">
+            NEW USER
+          </span>
+        </Button>
+      </div>
     </div>
   );
 };

app/javascript/src/components/Team/List/Table/MoreOptions.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+
+import { DeleteIcon, EditIcon, ResendInviteIcon } from "miruIcons";
+import { Button, MobileMoreOptions, Tooltip } from "StyledComponents";
+
+import teamApi from "apis/team";
+import HoverMoreOptions from "common/HoverMoreOptions";
+import { TeamModalType } from "constants/index";
+import { useList } from "context/TeamContext";
+import { useUserContext } from "context/UserContext";
+
+type Iprops = {
+  item: any;
+  setShowMoreOptions?: React.Dispatch<React.SetStateAction<boolean>>;
+  showMoreOptions?: boolean;
+};
+
+const MoreOptions = ({ item, setShowMoreOptions, showMoreOptions }: Iprops) => {
+  const { setModalState } = useList();
+  const { isDesktop } = useUserContext();
+
+  const handleResendInvite = async () => {
+    await teamApi.resendInvite(item.id);
+  };
+
+  const handleAction = (e, action) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setModalState(action, item);
+  };
+
+  return isDesktop ? (
+    <HoverMoreOptions position="bottom-10 right-0">
+      <Tooltip content="Re-Invite">
+        <Button
+          disabled={!item.status}
+          style="ternary"
+          onClick={handleResendInvite}
+        >
+          <ResendInviteIcon size={16} weight="bold" />
+        </Button>
+      </Tooltip>
+      <Tooltip content="Edit">
+        <Button
+          style="ternary"
+          onClick={e => {
+            handleAction(e, TeamModalType.ADD_EDIT);
+          }}
+        >
+          <EditIcon size={16} weight="bold" />
+        </Button>
+      </Tooltip>
+      <Tooltip content="Delete">
+        <Button
+          style="ternary"
+          onClick={e => {
+            handleAction(e, TeamModalType.DELETE);
+          }}
+        >
+          <DeleteIcon className="text-miru-red-400" size={16} weight="bold" />
+        </Button>
+      </Tooltip>
+    </HoverMoreOptions>
+  ) : (
+    <MobileMoreOptions
+      setVisibilty={setShowMoreOptions}
+      visibilty={showMoreOptions}
+    >
+      <li
+        className="flex items-center px-2 pt-3 text-sm leading-5 text-miru-han-purple-1000"
+        onClick={e => {
+          setShowMoreOptions(false);
+          handleAction(e, TeamModalType.ADD_EDIT);
+        }}
+      >
+        <EditIcon className="mr-4" color="#5B34EA" size={16} />
+        Edit
+      </li>
+      <li
+        className="flex items-center px-2 pt-3 text-sm leading-5 text-miru-red-400"
+        onClick={e => {
+          setShowMoreOptions(false);
+          handleAction(e, TeamModalType.DELETE);
+        }}
+      >
+        <DeleteIcon className="mr-4" size={16} />
+        Delete
+      </li>
+    </MobileMoreOptions>
+  );
+};
+
+export default MoreOptions;

app/javascript/src/components/Team/List/Table/TableHead.tsx

@@ -1,47 +1,21 @@
-import React, { Fragment } from "react";
-
-import { useUserContext } from "context/UserContext";
-
-const TableHead = () => {
-  const { isAdminUser, isDesktop } = useUserContext();
-
-  if (isDesktop) {
-    return (
-      <thead className=" border-miru-gray-200">
-        <tr>
-          <th className="table__header p-6" scope="col">
-            NAME
-          </th>
-          <th className="table__header p-6" scope="col">
-            EMAIL ID
-          </th>
-          <th className="table__header p-6" scope="col">
-            ROLE
-          </th>
-          {isAdminUser && (
-            <Fragment>
-              <th className="table__header p-6" scope="col" />
-              <th className="table__header p-6" scope="col" />
-            </Fragment>
-          )}
-        </tr>
-      </thead>
-    );
-  }
-
-  return (
-    <thead className=" border-miru-gray-200">
-      <tr>
-        <th className="table__header w-1/2 p-6" scope="col">
-          NAME / EMAIL ID
-        </th>
-        <th className="table__header w-1/3 p-6 text-right" scope="col">
-          ROLE
-        </th>
-        <th className="table__header" scope="col" />
-      </tr>
-    </thead>
-  );
-};
+import React from "react";
 
+const TableHead = () => (
+  <thead className="border-miru-gray-200 lg:grid">
+    <tr className="flex lg:grid lg:grid-cols-10 lg:gap-4">
+      <th className="w-3/5 py-2 text-left text-xs font-medium leading-4 tracking-widest text-miru-dark-purple-600 lg:col-span-4 lg:py-5">
+        USER
+      </th>
+      <th className="col-span-2 hidden py-2 text-left text-xs font-medium leading-4 tracking-widest text-miru-dark-purple-600 lg:table-cell lg:py-5">
+        SALARY
+      </th>
+      <th className="w-2/5 py-2 text-left text-xs font-medium leading-4 tracking-widest text-miru-dark-purple-600 lg:col-span-2 lg:py-5">
+        ROLE
+      </th>
+      <th className="col-span-2 hidden py-2 text-left text-xs font-medium leading-4 tracking-widest text-miru-dark-purple-600 lg:table-cell lg:py-5">
+        TYPE
+      </th>
+    </tr>
+  </thead>
+);
 export default TableHead;