feat: extended search, remember/forgot issue & context menu

- added extended search feature
- added remember/forgot issue action
- added right click context menu
- fix axios config
- fixed assigned_to is undefined
- fixed settings merge
- restructured source code

Author: CrawlerCode

src/App.tsx

@@ -10,7 +10,12 @@ function App() {
   const location = useLocation();
 
   return (
-    <>
+    <div
+      // disable context menu
+      onContextMenu={(e) => {
+        e.preventDefault();
+      }}
+    >
       <nav className="sticky top-0 z-10 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-1">
         <ul className="flex flex-wrap gap-x-2 -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
           <li>
@@ -51,7 +56,7 @@ function App() {
           <Route path="*" element={<Toast type="error" message="Page not found!" allowClose={false} />} />
         </Routes>
       </main>
-    </>
+    </div>
   );
 }
 

src/api/axios.config.ts

@@ -1,14 +1,32 @@
-import axios from "axios";
+import axios, { InternalAxiosRequestConfig } from "axios";
 import { getSettings } from "../hooks/useSettings";
 
 const instance = axios.create();
 
-export const loadRedmineConfig = async () => {
+instance.interceptors.request.use(
+  async (config) => {
+    if (!config.baseURL) {
+      await loadRedmineConfig(config);
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export const loadRedmineConfig = async (config?: InternalAxiosRequestConfig) => {
   const settings = await getSettings();
+
+  // set instance config
   instance.defaults.baseURL = settings.redmineURL;
   instance.defaults.headers["X-Redmine-API-Key"] = settings.redmineApiKey;
-};
 
-loadRedmineConfig();
+  // set current config
+  if (config) {
+    config.baseURL = settings.redmineURL;
+    config.headers["X-Redmine-API-Key"] = settings.redmineApiKey;
+  }
+};
 
 export default instance;

src/api/redmine.ts

@@ -1,10 +1,18 @@
-import { TCreateTimeEntry, TIssue, TTimeEntryActivity } from "../types/redmine";
+import { TAccount, TCreateTimeEntry, TIssue, TSearchResult, TTimeEntryActivity } from "../types/redmine";
 import instance from "./axios.config";
 
+export const getMyAccount = async (): Promise<TAccount> => {
+  return instance.get("/my/account.json").then((res) => res.data.user);
+};
+
 export const getAllMyOpenIssues = async (offset = 0, limit = 100): Promise<TIssue[]> => {
   return instance.get(`/issues.json?offset=${offset}&limit=${limit}&status_id=open&assigned_to_id=me&sort=updated_on:desc`).then((res) => res.data.issues);
 };
 
+export const getOpenIssues = async (ids: number[], offset = 0, limit = 100): Promise<TIssue[]> => {
+  return instance.get(`/issues.json?offset=${offset}&limit=${limit}&status_id=open&issue_id=${ids.join(",")}&sort=updated_on:desc`).then((res) => res.data.issues);
+};
+
 export const createTimeEntry = async (entry: TCreateTimeEntry) => {
   return instance
     .post("/time_entries.json", {
@@ -16,3 +24,7 @@ export const createTimeEntry = async (entry: TCreateTimeEntry) => {
 export const getTimeEntryActivities = async (): Promise<TTimeEntryActivity[]> => {
   return instance.get("/enumerations/time_entry_activities.json").then((res) => res.data.time_entry_activities);
 };
+
+export const searchOpenIssues = async (query: string): Promise<TSearchResult[]> => {
+  return instance.get(`/search.json?q=${query}&scope=my_project&titles_only=1&issues=1&open_issues=1`).then((res) => res.data.results);
+};

src/components/general/CheckBox.tsx

@@ -10,8 +10,8 @@ const CheckBox = ({ title, description, ...props }: PropTypes) => {
   const id = useId();
 
   return (
-    <div className="flex items-center pl-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-700">
-      <div className={clsx("flex items-center", description ? "h-12" : "h-8")}>
+    <div className="flex items-center pl-2 p-1 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-700">
+      <div className="flex items-center">
         <input
           {...props}
           id={id}

src/components/general/ContextMenu.tsx

@@ -0,0 +1,66 @@
+import clsx from "clsx";
+import { useLayoutEffect, useRef } from "react";
+import useOnClickOutside from "../../hooks/useOnClickOutside";
+
+type MenuItem = {
+  name: string;
+  icon: React.ReactNode;
+  disabled?: boolean;
+  onClick: () => void;
+};
+type PropTypes = {
+  x: number;
+  y: number;
+  menu: MenuItem[] | MenuItem[][];
+  onClose: () => void;
+};
+
+const ContextMenu = ({ x, y, menu, onClose }: PropTypes) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  // close on click outside
+  useOnClickOutside(ref, onClose);
+
+  // set the correct position
+  useLayoutEffect(() => {
+    if (ref.current) {
+      const { width, height } = ref.current.getBoundingClientRect();
+      if (y + height > window.innerHeight) {
+        ref.current.style.top = `${y - height}px`;
+      }
+      if (x + width > window.innerWidth && x - width > 0) {
+        ref.current.style.left = `${x - width}px`;
+      }
+    }
+  }, []);
+
+  return (
+    <div ref={ref} className="absolute z-20 bg-white border dark:border-0 border-gray-200 divide-y divide-gray-200 dark:divide-gray-600 rounded-lg shadow w-40 dark:bg-gray-700" style={{ top: `${y}px`, left: `${x}px` }} onClick={onClose}>
+      {(menu.length > 0 && Array.isArray(menu[0]) && (
+        <>
+          {(menu as MenuItem[][]).map((group) => (
+            <ul className="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+              {group.map((item) => (
+                <li className={clsx("flex px-2 py-1", item.disabled ? "text-gray-300 dark:text-gray-500" : "hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white")} onClick={!item.disabled ? item.onClick : undefined}>
+                  <span className="flex justify-center items-center w-4 me-2">{item.icon}</span>
+                  {item.name}
+                </li>
+              ))}
+            </ul>
+          ))}
+        </>
+      )) || (
+        <ul className="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+          {(menu as MenuItem[]).map((item) => (
+            <li className={clsx("flex px-2 py-1", item.disabled ? "text-gray-300 dark:text-gray-500" : "hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white")} onClick={!item.disabled ? item.onClick : undefined}>
+              <span className="flex justify-center items-center w-4 me-2">{item.icon}</span>
+              {item.name}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default ContextMenu;

src/components/issues/Issue.tsx

@@ -1,43 +1,54 @@
-import { faCheck, faPause, faPlay, faStop } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRightFromSquare, faBan, faBookmark, faCheck, faCircleUser, faEdit, faPause, faPlay, faStop } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
 import { useEffect, useState } from "react";
 import { Tooltip } from "react-tooltip";
 import useSettings from "../../hooks/useSettings";
 import { TIssue } from "../../types/redmine";
+import ContextMenu from "../general/ContextMenu";
 import KBD from "../general/KBD";
 import CreateTimeEntryModal from "./CreateTimeEntryModal";
 import EditTime from "./EditTime";
 
+export type IssueData = {
+  active: boolean;
+  start?: number;
+  time: number;
+  remember: boolean;
+};
+
 type PropTypes = {
   issue: TIssue;
-  isActive: boolean;
-  time: number;
-  start?: number;
+  data: IssueData;
+  assignedToMe: boolean;
   onStart: () => void;
   onPause: (time: number) => void;
   onStop: () => void;
-  //onDone: (time: number) => void;
   onOverrideTime: (time: number) => void;
+  onRemember: () => void;
+  onForgot: () => void;
 };
 
-const Issue = ({ issue, isActive, time, start, onStart, onPause, onStop, onOverrideTime }: PropTypes) => {
+const Issue = ({ issue, data: { active, time, start, remember }, assignedToMe, onStart, onPause, onStop, onOverrideTime, onRemember, onForgot }: PropTypes) => {
   const { settings } = useSettings();
 
   const [timer, setTimer] = useState(calcTime(time, start));
 
   useEffect(() => {
     setTimer(calcTime(time, start));
-    if (isActive && start) {
+    if (active && start) {
       const timerInterval = setInterval(() => {
         setTimer(calcTime(time, start));
       }, 1000);
       return () => clearInterval(timerInterval);
     }
-  }, [isActive, time, start]);
+  }, [active, time, start]);
 
   const [editTime, setEditTime] = useState<number | undefined>(undefined);
   const [createTimeEntry, setCreateTimeEntry] = useState<number | undefined>(undefined);
+
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | undefined>(undefined);
+
   return (
     <>
       <div
@@ -55,7 +66,7 @@ const Issue = ({ issue, isActive, time, start, onStart, onPause, onStop, onOverr
             if (editTime !== undefined) {
               return;
             }
-            if (isActive) {
+            if (active) {
               onPause(timer);
             } else {
               onStart();
@@ -64,8 +75,12 @@ const Issue = ({ issue, isActive, time, start, onStart, onPause, onStop, onOverr
           }
         }}
         data-tooltip-id="tooltip-toggle-timer"
+        onContextMenu={(e) => {
+          e.preventDefault();
+          setContextMenu({ x: e.pageX, y: e.pageY });
+        }}
       >
-        <h1 className="mb-1 truncate">
+        <h1 className="mb-1 truncate me-4">
           <a href={`${settings.redmineURL}/issues/${issue.id}`} target="_blank" className="text-blue-500 hover:underline" data-tooltip-id={`tooltip-issue-${issue.id}`} tabIndex={-1}>
             #{issue.id}
           </a>{" "}
@@ -87,10 +102,12 @@ const Issue = ({ issue, isActive, time, start, onStart, onPause, onStop, onOverr
                   <th className="pr-2 font-medium whitespace-nowrap">Priority:</th>
                   <td>{issue.priority.name}</td>
                 </tr>
-                <tr>
-                  <th className="pr-2 font-medium whitespace-nowrap">Assignee:</th>
-                  <td>{issue.assigned_to.name}</td>
-                </tr>
+                {issue.assigned_to && (
+                  <tr>
+                    <th className="pr-2 font-medium whitespace-nowrap">Assignee:</th>
+                    <td>{issue.assigned_to.name}</td>
+                  </tr>
+                )}
                 {issue.estimated_hours && (
                   <tr>
                     <th className="pr-2 font-medium whitespace-nowrap">Estimated time:</th>
@@ -123,12 +140,12 @@ const Issue = ({ issue, isActive, time, start, onStart, onPause, onStop, onOverr
                 onCancel={() => setEditTime(undefined)}
               />
             )) || (
-              <span className={clsx("text-lg", timer > 0 ? "text-yellow-500" : "text-gray-700 dark:text-gray-500", isActive && "font-semibold")} onDoubleClick={() => setEditTime(timer)} data-tooltip-id="tooltip-edit-timer">
+              <span className={clsx("text-lg", timer > 0 ? "text-yellow-500" : "text-gray-700 dark:text-gray-500", active && "font-semibold")} onDoubleClick={() => setEditTime(timer)} data-tooltip-id="tooltip-edit-timer">
                 {formatTime(timer)}
               </span>
             )}
             <Tooltip id="tooltip-edit-timer" place="top" delayShow={700} content="Double-click to edit" className="italic" />
-            {!isActive ? (
+            {!active ? (
               <FontAwesomeIcon icon={faPlay} size="2x" className="text-green-500 cursor-pointer focus:outline-none" onClick={onStart} data-tooltip-id="tooltip-start-timer" tabIndex={-1} />
             ) : (
               <FontAwesomeIcon icon={faPause} size="2x" className="text-red-500 cursor-pointer focus:outline-none" onClick={() => onPause(timer)} data-tooltip-id="tooltip-pause-timer" tabIndex={-1} />
@@ -147,13 +164,19 @@ const Issue = ({ issue, isActive, time, start, onStart, onPause, onStop, onOverr
             <Tooltip id="tooltip-stop-timer" place="top" delayShow={700} content="Click to stop timer" className="italic" />
             <Tooltip id={`tooltip-done-timer-${issue.id}`} place="bottom" delayShow={700} className="z-10 italic opacity-100">
               Click to transfer{" "}
-              <span className={clsx("text-xs", timer > 0 ? "text-yellow-500" : "text-gray-700 dark:text-gray-500", isActive && "font-semibold")}>
+              <span className={clsx("text-xs", timer > 0 ? "text-yellow-500" : "text-gray-700 dark:text-gray-500", active && "font-semibold")}>
                 {formatTime(settings.options.roundTimeNearestQuarterHour ? roundTimeNearestQuarterHour(timer) : timer)}
               </span>{" "}
               to Redmine issue
             </Tooltip>
           </div>
         </div>
+        {!assignedToMe && (
+          <>
+            <Tooltip id="tooltip-not-assigned-to-me" place="left" delayShow={700} content="Issue is not assigned to you" className="italic" />
+            <FontAwesomeIcon icon={faCircleUser} className="absolute top-2 right-2 text-gray-300 dark:text-gray-600" data-tooltip-id="tooltip-not-assigned-to-me" />
+          </>
+        )}
       </div>
       <Tooltip id="tooltip-toggle-timer" place="bottom" delayShow={4000} className="italic max-w-[275px]">
         If selected, press <KBD text="Ctrl" /> + <KBD text="Spacebar" space="xl" /> to toggle timer
@@ -169,6 +192,64 @@ const Issue = ({ issue, isActive, time, start, onStart, onPause, onStop, onOverr
           }}
         />
       )}
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          onClose={() => setContextMenu(undefined)}
+          menu={[
+            [
+              {
+                name: "Open in Redmine",
+                icon: <FontAwesomeIcon icon={faArrowUpRightFromSquare} />,
+                onClick: () => {
+                  window.open(`${settings.redmineURL}/issues/${issue.id}`, "_blank");
+                },
+              },
+            ],
+            [
+              {
+                name: "Start timer",
+                icon: <FontAwesomeIcon icon={faPlay} />,
+                disabled: active,
+                onClick: onStart,
+              },
+              {
+                name: "Pause timer",
+                icon: <FontAwesomeIcon icon={faPause} />,
+                disabled: !active,
+                onClick: () => onPause(timer),
+              },
+              {
+                name: "Stop timer",
+                icon: <FontAwesomeIcon icon={faStop} />,
+                disabled: timer === 0,
+                onClick: onStop,
+              },
+              {
+                name: "Edit timer",
+                icon: <FontAwesomeIcon icon={faEdit} />,
+                disabled: timer === 0,
+                onClick: () => setEditTime(timer),
+              },
+            ],
+            [
+              {
+                name: "Remember issue",
+                icon: <FontAwesomeIcon icon={faBookmark} />,
+                disabled: assignedToMe || remember,
+                onClick: onRemember,
+              },
+              {
+                name: "Forgot issue",
+                icon: <FontAwesomeIcon icon={faBan} />,
+                disabled: assignedToMe || !remember,
+                onClick: onForgot,
+              },
+            ],
+          ]}
+        />
+      )}
     </>
   );
 };