feat: update done ratio

- added update done ratio feature
- fixed invalidate queries
- fixed empty additional issues query

Author: CrawlerCode

src/api/redmine.ts

@@ -21,6 +21,14 @@ export const createTimeEntry = async (entry: TCreateTimeEntry) => {
     .then((res) => res.data);
 };
 
+export const updateIssue = async (id: number, issue: Partial<Omit<TIssue, "id">>) => {
+  return instance
+    .put(`/issues/${id}.json`, {
+      issue: issue,
+    })
+    .then((res) => res.data);
+};
+
 export const getTimeEntryActivities = async (): Promise<TTimeEntryActivity[]> => {
   return instance.get("/enumerations/time_entry_activities.json").then((res) => res.data.time_entry_activities);
 };

src/components/issues/CreateTimeEntryModal.tsx

@@ -2,15 +2,16 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AxiosError, isAxiosError } from "axios";
 import clsx from "clsx";
 import { Field, Form, Formik, FormikProps } from "formik";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import * as Yup from "yup";
-import { createTimeEntry, getTimeEntryActivities } from "../../api/redmine";
+import { createTimeEntry, getTimeEntryActivities, updateIssue } from "../../api/redmine";
 import useSettings from "../../hooks/useSettings";
 import { TCreateTimeEntry, TIssue, TRedmineError } from "../../types/redmine";
 import InputField from "../general/InputField";
 import Modal from "../general/Modal";
 import SelectField from "../general/SelectField";
 import Toast from "../general/Toast";
+import DoneSlider from "./DoneSlider";
 
 type PropTypes = {
   issue: TIssue;
@@ -38,10 +39,16 @@ const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) =>
     mutationFn: (entry: TCreateTimeEntry) => createTimeEntry(entry),
     onSuccess: () => {
       queryClient.invalidateQueries(["issues"]);
+      queryClient.invalidateQueries(["additionalIssues"]);
       onSuccess();
     },
   });
 
+  const [doneRatio, setDoneRatio] = useState(issue.done_ratio);
+  const updateIssueMutation = useMutation({
+    mutationFn: (data: { done_ratio: number }) => updateIssue(issue.id, data),
+  });
+
   return (
     <>
       <Modal title="Add time spent" onClose={onClose}>
@@ -59,6 +66,9 @@ const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) =>
           })}
           onSubmit={async (values, { setSubmitting }) => {
             //console.log("onSubmit", values);
+            if (issue.done_ratio !== doneRatio) {
+              await updateIssueMutation.mutateAsync({ done_ratio: doneRatio });
+            }
             await createTimeEntryMutation.mutateAsync(values);
             setSubmitting(false);
           }}
@@ -73,6 +83,7 @@ const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) =>
                     </a>{" "}
                     {issue.subject}
                   </h1>
+                  <DoneSlider name="done_ratio" value={doneRatio} onChange={(e) => setDoneRatio(e.target.valueAsNumber)} className="mb-1" />
                   <Field type="number" name="hours" title="Hours" placeholder="Hours" min="0" step="0.01" required as={InputField} size="sm" error={touched.hours && errors.hours} autoComplete="off" />
                   <Field type="text" name="comments" title="Comments" placeholder="Comments" as={InputField} size="sm" error={touched.comments && errors.comments} autoFocus />
                   <Field type="select" name="activity_id" title="Activity" placeholder="Activity" required as={SelectField} size="sm" error={touched.activity_id && errors.activity_id}>

src/components/issues/DoneSlider.tsx

@@ -0,0 +1,15 @@
+import clsx from "clsx";
+
+interface PropTypes extends Omit<React.ComponentProps<"input">, "value"> {
+  value: number;
+}
+const DoneSlider = ({ value, className, ...props }: PropTypes) => {
+  return (
+    <div className={clsx("relative", className)}>
+      <input {...props} value={value} min="0" max="100" step="10" type="range" className="transparent h-5 appearance-none border-transparent w-[80px]" style={{ background: `linear-gradient(90deg, #bae0ba ${value}%, #eeeeee ${value}%)` }} />
+      <p className="absolute top-1 left-1 text-xs font-medium text-gray-600 leading-none select-none">{value}%</p>
+    </div>
+  );
+};
+
+export default DoneSlider;

src/hooks/useMyIssues.ts

@@ -21,6 +21,7 @@ const useMyIssues = (additionalIssuesIds: number[], search: string) => {
     queryKey: ["additionalIssues", additionalIssuesIds],
     queryFn: ({ pageParam = 0 }) => getOpenIssues(additionalIssuesIds, pageParam * 100, 100),
     getNextPageParam: (lastPage, allPages) => (lastPage.length === 100 ? allPages.length : undefined),
+    enabled: additionalIssuesIds.length > 0,
   });
 
   // auto fetch all pages

src/index.css

@@ -17,3 +17,10 @@
   background-color: #1e3a8a;
   border-radius: 3px;
 }
+
+input[name="done_ratio"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  width: 2px;
+}