feat: Issues priority

- Sort issues by priority
- Show issues priority color
- Forbid more than 24 hours as spent time
- Reorganized some code

Author: CrawlerCode

src/api/redmine.ts

@@ -1,5 +1,5 @@
 import { formatISO } from "date-fns";
-import { TAccount, TCreateTimeEntry, TIssue, TSearchResult, TTimeEntry, TTimeEntryActivity } from "../types/redmine";
+import { TAccount, TCreateTimeEntry, TIssue, TSearchResult, TTimeEntry, TTimeEntryActivity, TissuesPriority } from "../types/redmine";
 import instance from "./axios.config";
 
 export const getMyAccount = async (): Promise<TAccount> => {
@@ -35,9 +35,15 @@ export const updateIssue = async (id: number, issue: Partial<Omit<TIssue, "id">>
     .then((res) => res.data);
 };
 
+export const getIssuePriorities = async (): Promise<TissuesPriority[]> => {
+  return instance.get("/enumerations/issue_priorities.json").then((res) => res.data.issue_priorities);
+};
+
 // Time entries
 export const getAllMyTimeEntries = async (from: Date, to: Date, offset = 0, limit = 100): Promise<TTimeEntry[]> => {
-  return instance.get(`/time_entries.json?offset=${offset}&limit=${limit}&user_id=me&from=${formatISO(from, { representation: "date" })}&to=${formatISO(to, { representation: "date" })}`).then((res) => res.data.time_entries);
+  return instance
+    .get(`/time_entries.json?offset=${offset}&limit=${limit}&user_id=me&from=${formatISO(from, { representation: "date" })}&to=${formatISO(to, { representation: "date" })}`)
+    .then((res) => res.data.time_entries);
 };
 
 export const createTimeEntry = async (entry: TCreateTimeEntry) => {

src/components/issues/CreateTimeEntryModal.tsx

@@ -1,12 +1,13 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { AxiosError, isAxiosError } from "axios";
 import { startOfDay } from "date-fns";
 import { Field, Form, Formik, FormikProps } from "formik";
 import { useEffect, useRef, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as Yup from "yup";
-import { createTimeEntry, getTimeEntryActivities, updateIssue } from "../../api/redmine";
+import { createTimeEntry, updateIssue } from "../../api/redmine";
 import useSettings from "../../hooks/useSettings";
+import useTimeEntryActivities from "../../hooks/useTimeEntryActivities";
 import { TCreateTimeEntry, TIssue, TRedmineError } from "../../types/redmine";
 import { formatHours } from "../../utils/date";
 import Button from "../general/Button";
@@ -32,15 +33,11 @@ const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) =>
 
   const formik = useRef<FormikProps<TCreateTimeEntry>>(null);
 
-  const timeEntryActivitiesQuery = useQuery({
-    queryKey: ["timeEntryActivities"],
-    queryFn: getTimeEntryActivities,
-    refetchOnWindowFocus: false,
-  });
+  const timeEntryActivities = useTimeEntryActivities();
 
   useEffect(() => {
-    formik.current?.setFieldValue("activity_id", timeEntryActivitiesQuery.data?.find((entry) => entry.is_default)?.id ?? undefined);
-  }, [timeEntryActivitiesQuery.data]);
+    formik.current?.setFieldValue("activity_id", timeEntryActivities.find((entry) => entry.is_default)?.id ?? undefined);
+  }, [timeEntryActivities]);
 
   const createTimeEntryMutation = useMutation({
     mutationFn: (entry: TCreateTimeEntry) => createTimeEntry(entry),
@@ -72,7 +69,8 @@ const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) =>
             spent_on: Yup.date().max(new Date(), formatMessage({ id: "issues.modal.add-spent-time.date.validation.in-future" })),
             hours: Yup.number()
               .required(formatMessage({ id: "issues.modal.add-spent-time.hours.validation.required" }))
-              .min(0.01, formatMessage({ id: "issues.modal.add-spent-time.hours.validation.greater-than-zero" })),
+              .min(0.01, formatMessage({ id: "issues.modal.add-spent-time.hours.validation.greater-than-zero" }))
+              .max(24, formatMessage({ id: "issues.modal.add-spent-time.hours.validation.less-than-24" })),
             activity_id: Yup.number().required(formatMessage({ id: "issues.modal.add-spent-time.activity.validation.required" })),
           })}
           onSubmit={async (values, { setSubmitting }) => {
@@ -116,10 +114,11 @@ const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) =>
                     placeholder={formatMessage({ id: "issues.modal.add-spent-time.hours" })}
                     min="0"
                     step="0.01"
+                    max="24"
                     required
                     as={InputField}
                     size="sm"
-                    extraText={formatHours(values.hours) + " h"}
+                    extraText={values.hours >= 0 && values.hours <= 24 ? formatHours(values.hours) + " h" : undefined}
                     error={touched.hours && errors.hours}
                     autoComplete="off"
                   />
@@ -143,7 +142,7 @@ const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) =>
                     size="sm"
                     error={touched.activity_id && errors.activity_id}
                   >
-                    {timeEntryActivitiesQuery.data?.map((activity) => (
+                    {timeEntryActivities.map((activity) => (
                       <>
                         <option key={activity.id} value={activity.id}>
                           {activity.name}

src/components/issues/Issue.tsx

@@ -3,10 +3,11 @@ import { faArrowUpRightFromSquare, faBan, faBookmark, faCircleUser, faEdit, faPa
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
 import { useRef, useState } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage, PrimitiveType, useIntl } from "react-intl";
 import { Tooltip } from "react-tooltip";
 import useSettings from "../../hooks/useSettings";
 import { TIssue } from "../../types/redmine";
+import { clsxm } from "../../utils/clsxm";
 import ContextMenu from "../general/ContextMenu";
 import KBD from "../general/KBD";
 import CreateTimeEntryModal from "./CreateTimeEntryModal";
@@ -22,14 +23,15 @@ export type IssueActions = {
 
 type PropTypes = {
   issue: TIssue;
+  priorityType: PrimitiveType;
   timerData: IssueTimerData;
   assignedToMe: boolean;
   pinned: boolean;
   remembered: boolean;
 } & Omit<TimerActions, "onDoneTimer"> &
   IssueActions;
 
-const Issue = ({ issue, timerData, assignedToMe, pinned, remembered, onStart, onPause, onStop, onOverrideTime, onRemember, onForget, onPin, onUnpin }: PropTypes) => {
+const Issue = ({ issue, priorityType, timerData, assignedToMe, pinned, remembered, onStart, onPause, onStop, onOverrideTime, onRemember, onForget, onPin, onUnpin }: PropTypes) => {
   const { formatMessage } = useIntl();
 
   const { settings } = useSettings();
@@ -108,9 +110,21 @@ const Issue = ({ issue, timerData, assignedToMe, pinned, remembered, onStart, on
         ]}
       >
         <div
-          className={clsx(
-            "block w-full p-1 bg-white border border-gray-200 rounded-lg shadow-sm dark:shadow-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 relative",
-            "focus:ring-4 focus:ring-primary-300 focus:outline-none dark:focus:ring-primary-800"
+          className={clsxm(
+            "block w-full p-1 rounded-lg shadow-sm dark:shadow-gray-700 relative",
+            "focus:ring-4 focus:ring-primary-300 focus:outline-none dark:focus:ring-primary-800",
+            "bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700",
+            {
+              //"bg-[#eaf7ff] border-[#add7f3] hover:bg-[#f2faff]": priorityType === "lowest",
+              //"bg-white border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700": priorityType === "normal",
+              //"bg-[#fee] border-[#fcc] hover:bg-[#fff2f2]": priorityType === "high",
+              //"bg-[#ffc4c4] border-[#ffb4b4] hover:bg-[#ffd4d4]": priorityType === "higher" || priorityType === "highest",
+
+              "border-2 border-[#add7f3] dark:border-[#4973f3]/40": priorityType === "lowest",
+              "border border-gray-200 dark:border-gray-700": priorityType === "normal",
+              "border-2 border-[#fcc] dark:border-[#ff6868]/40": priorityType === "high",
+              "border-2 border-[#ffb4b4] dark:border-[#ff5050]/40": priorityType === "higher" || priorityType === "highest",
+            }
           )}
           tabIndex={1}
           /**
@@ -136,6 +150,9 @@ const Issue = ({ issue, timerData, assignedToMe, pinned, remembered, onStart, on
             className={clsx("mb-1 truncate", {
               "me-4": (pinned && assignedToMe) || (!pinned && !assignedToMe),
               "me-9": pinned && !assignedToMe,
+              "text-[#559] dark:text-[#9393ed]": priorityType === "lowest",
+              "text-[#900] dark:text-[#fa7070]": priorityType === "high" || priorityType === "higher",
+              "text-[#900] dark:text-[#fa7070] font-bold": priorityType === "highest",
             })}
           >
             <a href={`${settings.redmineURL}/issues/${issue.id}`} target="_blank" tabIndex={-1} className="text-blue-500 hover:underline" data-tooltip-id={`tooltip-issue-${issue.id}`}>

src/components/issues/IssuesList.tsx

@@ -2,6 +2,7 @@ import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Fragment } from "react";
 import { FormattedMessage } from "react-intl";
+import useIssuePriorities from "../../hooks/useIssuePriorities";
 import useSettings from "../../hooks/useSettings";
 import useStorage from "../../hooks/useStorage";
 import { TAccount, TIssue, TReference } from "../../types/redmine";
@@ -27,12 +28,18 @@ type PropTypes = {
 const IssuesList = ({ account, issues: rawIssues, issuesData: { data: issuesData, setData: setIssuesData }, onSearchInProject }: PropTypes) => {
   const { settings } = useSettings();
 
-  const sortedIssues = rawIssues.sort((a, b) => {
-    const pinnedA = issuesData[a.id]?.pinned;
-    const pinnedB = issuesData[b.id]?.pinned;
-    if (pinnedA && pinnedB) return new Date(a.updated_on).getTime() - new Date(a.updated_on).getTime();
-    return pinnedA ? -1 : 1;
-  });
+  const issuePriorities = useIssuePriorities();
+
+  const issuePrioritiesIndices = issuePriorities.data.reduce((result, priority, index) => {
+    result[priority.id] = index;
+    return result;
+  }, {} as Record<number, number>);
+  const sortedIssues = rawIssues.sort(
+    (a, b) =>
+      (issuesData[b.id]?.pinned ? 1 : 0) - (issuesData[a.id]?.pinned ? 1 : 0) ||
+      issuePrioritiesIndices[b.priority.id] - issuePrioritiesIndices[a.priority.id] ||
+      new Date(a.updated_on).getTime() - new Date(a.updated_on).getTime()
+  );
 
   const groupedIssues = Object.values(
     sortedIssues.reduce(
@@ -84,6 +91,7 @@ const IssuesList = ({ account, issues: rawIssues, issuesData: { data: issuesData
               <Issue
                 key={issue.id}
                 issue={issue}
+                priorityType={issuePriorities.getPriorityType(issue)}
                 timerData={{ active: data.active, start: data.start, time: data.time }}
                 assignedToMe={issue.assigned_to?.id === account?.id ?? false}
                 pinned={data.pinned}

src/hooks/useIssuePriorities.ts

@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+import { getIssuePriorities } from "../api/redmine";
+import { TIssue } from "../types/redmine";
+
+export type PriorityType = "highest" | "higher" | "high" | "normal" | "lowest";
+
+const useIssuePriorities = () => {
+  const issuePrioritiesQuery = useQuery({
+    queryKey: ["issuePriorities"],
+    queryFn: getIssuePriorities,
+    refetchOnWindowFocus: false,
+  });
+
+  const priorities = issuePrioritiesQuery.data?.filter((priority) => priority.active) ?? [];
+
+  /**
+   * Find priority types
+   *
+   * Examples:
+   * ["lowest", "normal", "normal", "normal/default", "high", "higher", "higher", "higher", "highest"]
+   * ["low", "normal/default", "high", "higher", "highest"]
+   * ["normal/default", "high", "highest"]
+   * ["low", "normal/default", "highest"]
+   */
+  const normal = priorities.find((p) => p.is_default);
+  const normalIdx = priorities.findIndex((p) => p.is_default);
+  const lowest = normalIdx > 0 ? priorities[0] : undefined;
+  const high = normalIdx >= 0 && normalIdx < priorities.length - 2 ? priorities[normalIdx + 1] : undefined;
+  const higher = normalIdx >= 0 ? priorities.slice(normalIdx + 2, priorities.length - 1) : [];
+  const highest = normalIdx < priorities.length - 1 ? priorities[priorities.length - 1] : undefined;
+
+  const getPriorityType = (issue: TIssue): PriorityType => {
+    switch (issue.priority.id) {
+      case normal?.id:
+        return "normal";
+      case lowest?.id:
+        return "lowest";
+      case high?.id:
+        return "high";
+      case highest?.id:
+        return "highest";
+      default:
+        if (higher.find((p) => p.id === issue.priority.id)) return "higher";
+    }
+    return "normal";
+  };
+
+  return {
+    data: priorities,
+    getPriorityType,
+  };
+};
+export default useIssuePriorities;

src/hooks/useTimeEntryActivities.ts

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+import { getTimeEntryActivities } from "../api/redmine";
+
+const useTimeEntryActivities = () => {
+  const timeEntryActivitiesQuery = useQuery({
+    queryKey: ["timeEntryActivities"],
+    queryFn: getTimeEntryActivities,
+    refetchOnWindowFocus: false,
+  });
+  return timeEntryActivitiesQuery.data?.filter((activity) => activity.active) ?? [];
+};
+export default useTimeEntryActivities;

src/lang/de.json

@@ -39,6 +39,7 @@
   "issues.modal.add-spent-time.hours": "Stunden",
   "issues.modal.add-spent-time.hours.validation.required": "Stunden wird benötigt",
   "issues.modal.add-spent-time.hours.validation.greater-than-zero": "Muss größer als 0 sein",
+  "issues.modal.add-spent-time.hours.validation.less-than-24": "Muss weniger als ein Tag sein",
   "issues.modal.add-spent-time.comments": "Kommentar",
   "issues.modal.add-spent-time.activity": "Aktivität ",
   "issues.modal.add-spent-time.activity.validation.required": "Aktivität wird benötigt",

src/lang/en.json

@@ -39,6 +39,7 @@
   "issues.modal.add-spent-time.hours": "Hours",
   "issues.modal.add-spent-time.hours.validation.required": "Hours is required",
   "issues.modal.add-spent-time.hours.validation.greater-than-zero": "Must be greater than 0",
+  "issues.modal.add-spent-time.hours.validation.less-than-24": "Must be less than one day",
   "issues.modal.add-spent-time.comments": "Comments",
   "issues.modal.add-spent-time.activity": "Activity",
   "issues.modal.add-spent-time.activity.validation.required": "Activity is required",

src/types/redmine.ts

@@ -27,6 +27,13 @@ export type TIssue = {
   closed_on?: string;
 };
 
+export type TissuesPriority = {
+  id: number;
+  name: string;
+  is_default: boolean;
+  active: boolean;
+};
+
 export type TTimeEntry = {
   id: number;
   project: TReference;

tailwind.config.cjs

@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+// eslint-disable-next-line no-undef
 module.exports = {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   darkMode: "media",
@@ -22,5 +23,6 @@ module.exports = {
       },
     },
   },
+  // eslint-disable-next-line no-undef
   plugins: [require("tailwindcss-animate")],
 };