🎉 feat: highlight currently assigned to call (#202)

SnailyCAD · Dec 29, 2021 · 2a9eceb · 2a9eceb
1 parent 1845a45
commit 2a9eceb
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 46 deletions.
diff --git a/packages/client/src/components/Dropdown.tsx b/packages/client/src/components/Dropdown.tsx
@@ -52,11 +52,17 @@ Dropdown.LinkItem = ({ children, ...rest }: JSX.IntrinsicElements["a"]) => {
   const router = useRouter();
 
   // next/link doesn't support a "ref" prop. :(
-  function handleClick(e: any) {
+  function handleClick(e: React.MouseEvent<HTMLAnchorElement>) {
     e.preventDefault();
 
     const target = e.target as HTMLAnchorElement;
-    router.push(target.href);
+    const href = target.href;
+
+    if (e.shiftKey || e.ctrlKey) {
+      open(href, "_blank");
+    } else {
+      router.push(target.href);
+    }
   }
 
   return (
@@ -65,7 +71,7 @@ Dropdown.LinkItem = ({ children, ...rest }: JSX.IntrinsicElements["a"]) => {
         {...rest}
         onClick={handleClick}
         className={classNames(
-          "text-gray-900 dark:text-gray-200 block hover:bg-gray-200 dark:hover:bg-dark-bg group rounded-md items-center w-full px-3 py-1.5 text-sm transition-all",
+          "text-gray-900 dark:text-gray-200 block hover:bg-gray-200 dark:hover:bg-dark-bg focus:bg-gray-200 dark:focus:bg-dark-bg rounded-md items-center w-full px-3 py-1.5 text-sm transition-all",
           rest.className,
         )}
       >

diff --git a/packages/client/src/components/leo/ActiveCalls.tsx b/packages/client/src/components/leo/ActiveCalls.tsx
@@ -46,7 +46,7 @@ export function ActiveCalls() {
       ? activeDeputy
       : null;
 
-  const isUnitAssigned = (call: Full911Call) =>
+  const isUnitAssignedToCall = (call: Full911Call) =>
     call.assignedUnits.some((v) => v.unit.id === unit?.id);
 
   const makeUnit = (unit: AssignedUnit) =>
@@ -113,7 +113,7 @@ export function ActiveCalls() {
         {calls.length <= 0 ? (
           <p className="py-2">{t("no911Calls")}</p>
         ) : (
-          <div className="w-full mt-3 overflow-x-auto max-h-80">
+          <div className="w-full my-3 overflow-x-auto max-h-80">
             <table className="w-full overflow-hidden whitespace-nowrap">
               <thead className="sticky top-0">
                 <tr>
@@ -129,52 +129,67 @@ export function ActiveCalls() {
               <tbody>
                 {calls
                   .sort((a, b) => compareDesc(new Date(a.updatedAt), new Date(b.updatedAt)))
-                  .map((call) => (
-                    <tr key={call.id}>
-                      <td>{call.name}</td>
-                      <td>{call.location}</td>
-                      <td className="max-w-4xl min-w-[250px] break-words whitespace-pre-wrap">
-                        {call.description}
-                      </td>
-                      <td>{format(new Date(call.updatedAt), "HH:mm:ss - yyyy-MM-dd")}</td>
-                      <td>{call.postal || common("none")}</td>
-                      <td>{call.assignedUnits.map(makeUnit).join(", ") || common("none")}</td>
-                      <td>
-                        {isDispatch ? (
-                          <>
-                            <Button small variant="success" onClick={() => handleManageClick(call)}>
-                              {common("manage")}
-                            </Button>
-                          </>
-                        ) : (
-                          <>
-                            <Button disabled={!unit} small onClick={() => handleManageClick(call)}>
-                              {t("viewEvents")}
-                            </Button>
-                            {isUnitAssigned(call) ? null : (
+                  .map((call) => {
+                    const isUnitAssigned = isUnitAssignedToCall(call);
+
+                    return (
+                      <tr
+                        className={isUnitAssigned ? "bg-gray-200 dark:bg-gray-3" : ""}
+                        key={call.id}
+                      >
+                        <td>{call.name}</td>
+                        <td>{call.location}</td>
+                        <td className="max-w-4xl min-w-[250px] break-words whitespace-pre-wrap">
+                          {call.description}
+                        </td>
+                        <td>{format(new Date(call.updatedAt), "HH:mm:ss - yyyy-MM-dd")}</td>
+                        <td>{call.postal || common("none")}</td>
+                        <td>{call.assignedUnits.map(makeUnit).join(", ") || common("none")}</td>
+                        <td>
+                          {isDispatch ? (
+                            <>
+                              <Button
+                                small
+                                variant="success"
+                                onClick={() => handleManageClick(call)}
+                              >
+                                {common("manage")}
+                              </Button>
+                            </>
+                          ) : (
+                            <>
                               <Button
-                                className="ml-2"
                                 disabled={!unit}
                                 small
-                                onClick={() => handleAssignToCall(call)}
+                                onClick={() => handleManageClick(call)}
                               >
-                                {t("assignToCall")}
+                                {t("viewEvents")}
                               </Button>
-                            )}
-                          </>
-                        )}
-
-                        <Button
-                          disabled={!isDispatch && !unit}
-                          small
-                          className="ml-2"
-                          onClick={() => handleCallTow(call)}
-                        >
-                          {t("callTow")}
-                        </Button>
-                      </td>
-                    </tr>
-                  ))}
+                              {isUnitAssigned ? null : (
+                                <Button
+                                  className="ml-2"
+                                  disabled={!unit}
+                                  small
+                                  onClick={() => handleAssignToCall(call)}
+                                >
+                                  {t("assignToCall")}
+                                </Button>
+                              )}
+                            </>
+                          )}
+
+                          <Button
+                            disabled={!isDispatch && !unit}
+                            small
+                            className="ml-2"
+                            onClick={() => handleCallTow(call)}
+                          >
+                            {t("callTow")}
+                          </Button>
+                        </td>
+                      </tr>
+                    );
+                  })}
               </tbody>
             </table>
           </div>