feat: Add time spend entry

- Add time spend entry
- Added Modal component
- Added SelectField & TextareaField components
- Fixed z index

Author: CrawlerCode

package.json

@@ -48,6 +48,7 @@
     "eslint-plugin-react-refresh": "^0.4.1",
     "postcss": "^8.4.23",
     "tailwindcss": "^3.3.2",
+    "tailwindcss-animate": "^1.0.5",
     "typescript": "^5.0.4",
     "vite": "^4.3.5"
   }

pnpm-lock.yaml

@@ -11,7 +11,7 @@ function App() {
 
   return (
     <>
-      <nav className="sticky top-0 z-50 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-1">
+      <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>
             <Link

src/App.tsx

@@ -1,6 +1,18 @@
-import { TIssue } from "../types/redmine";
+import { TCreateTimeEntry, TIssue, TTimeEntryActivity } from "../types/redmine";
 import instance from "./axios.config";
 
 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 createTimeEntry = async (entry: TCreateTimeEntry) => {
+  return instance
+    .post("/time_entries.json", {
+      time_entry: entry,
+    })
+    .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/api/redmine.ts

@@ -3,18 +3,25 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
 import { useId } from "react";
 
-interface PropTypes extends React.ComponentProps<"input"> {
+interface PropTypes extends Omit<React.ComponentProps<"input">, "size"> {
+  size?: "sm" | "md";
   icon?: React.ReactNode;
   error?: string;
 }
 
-const InputField = ({ icon, error, className, ...props }: PropTypes) => {
+const InputField = ({ size = "md", icon, error, className, ...props }: PropTypes) => {
   const id = useId();
 
   return (
-    <>
+    <div>
       {props.title && (
-        <label htmlFor={id} className="block text-sm font-medium text-gray-900 dark:text-white">
+        <label
+          htmlFor={id}
+          className={clsx("block font-medium text-gray-900 dark:text-white mb-1", {
+            "text-xs": size === "sm",
+            "text-sm": size === "md",
+          })}
+        >
           {props.title}
           {props.required && <FontAwesomeIcon icon={faAsterisk} size="2xs" className="text-red-600 ml-1" />}
         </label>
@@ -26,19 +33,21 @@ const InputField = ({ icon, error, className, ...props }: PropTypes) => {
           id={id}
           required={false}
           className={clsx(
-            "text-sm rounded-lg block w-full p-2.5",
+            "text-sm rounded-lg block w-full",
             "bg-gray-50 border border-gray-300 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white",
             "focus:ring-2 focus:ring-primary-300 focus:outline-none dark:focus:ring-primary-600",
             {
               "border-red-500 text-red-900 placeholder-red-700 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500": error !== undefined,
               "pl-8": !!icon,
+              "p-1.5": size === "sm",
+              "p-2.5": size === "md",
             },
             className
           )}
         />
       </div>
       {error && <p className="text-sm text-red-600 dark:text-red-500">{error}</p>}
-    </>
+    </div>
   );
 };
 

src/components/general/InputField.tsx

@@ -0,0 +1,43 @@
+import useHotKey from "../../hooks/useHotkey";
+
+type PropTypes = {
+  title: string;
+  children: React.ReactNode;
+  onClose: () => void;
+};
+
+const Modal = ({ title, children, onClose }: PropTypes) => {
+  /**
+   * On "Escape" => close
+   */
+  useHotKey(onClose, { key: "Escape" });
+
+  return (
+    <div tabIndex={-1} className="fixed inset-0 flex items-center z-40 w-full p-4 overflow-y-auto h-full bg-gray-800/50 dark:bg-gray-600/50 animate-in fade-in">
+      <div className="relative w-full max-w-md max-h-full">
+        <div className="relative rounded-lg drop-shadow-lg bg-white dark:bg-gray-800 animate-in fade-in zoom-in">
+          <button
+            type="button"
+            className="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
+            onClick={onClose}
+          >
+            <svg aria-hidden="true" className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill-rule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            <span className="sr-only">Close modal</span>
+          </button>
+          <div className="p-3">
+            <h3 className="mb-4 text-xl font-medium text-gray-900 dark:text-white">{title}</h3>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

src/components/general/Modal.tsx

@@ -0,0 +1,54 @@
+import { faAsterisk } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import clsx from "clsx";
+import { useId } from "react";
+
+interface PropTypes extends Omit<React.ComponentProps<"select">, "size"> {
+  size?: "sm" | "md";
+  error?: string;
+}
+
+const SelectField = ({ error, children, size = "md", placeholder, className, ...props }: PropTypes) => {
+  const id = useId();
+
+  return (
+    <div>
+      {props.title && (
+        <label
+          htmlFor={id}
+          className={clsx("block font-medium text-gray-900 dark:text-white mb-1", {
+            "text-xs": size === "sm",
+            "text-sm": size === "md",
+          })}
+        >
+          {props.title}
+          {props.required && <FontAwesomeIcon icon={faAsterisk} size="2xs" className="text-red-600 ml-1" />}
+        </label>
+      )}
+      <select
+        {...props}
+        id={id}
+        className={clsx(
+          "text-sm rounded-lg block w-full",
+          "bg-gray-50 border border-gray-300 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white ",
+          "focus:ring-primary-300 focus:border-primary-300 dark:focus:ring-primary-600 dark:focus:border-primary-600",
+          {
+            "p-1.5": size === "sm",
+            "p-2.5": size === "md",
+          },
+          className
+        )}
+      >
+        {placeholder && (
+          <option disabled selected>
+            {placeholder}
+          </option>
+        )}
+        {children}
+      </select>
+      {error && <p className="text-sm text-red-600 dark:text-red-500">{error}</p>}
+    </div>
+  );
+};
+
+export default SelectField;

src/components/general/SelectField.tsx

@@ -0,0 +1,52 @@
+import { faAsterisk } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import clsx from "clsx";
+import { useId } from "react";
+
+interface PropTypes extends Omit<React.ComponentProps<"textarea">, "size"> {
+  size?: "sm" | "md";
+  error?: string;
+}
+
+const TextareaField = ({ size = "md", error, value, rows = 3, className, ...props }: PropTypes) => {
+  const id = useId();
+
+  return (
+    <div>
+      {props.title && (
+        <label
+          htmlFor={id}
+          className={clsx("block font-medium text-gray-900 dark:text-white mb-1", {
+            "text-xs": size === "sm",
+            "text-sm": size === "md",
+          })}
+        >
+          {props.title}
+          {props.required && <FontAwesomeIcon icon={faAsterisk} size="2xs" className="text-red-600 ml-1" />}
+        </label>
+      )}
+      <textarea
+        {...props}
+        id={id}
+        required={false}
+        className={clsx(
+          "text-sm rounded-lg block w-full",
+          "bg-gray-50 border border-gray-300 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white",
+          "focus:ring-2 focus:ring-primary-300 focus:outline-none dark:focus:ring-primary-600",
+          {
+            "border-red-500 text-red-900 placeholder-red-700 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500": error !== undefined,
+            "p-1.5": size === "sm",
+            "p-2.5": size === "md",
+          },
+          className
+        )}
+        rows={rows}
+      >
+        {value}
+      </textarea>
+      {error && <p className="text-sm text-red-600 dark:text-red-500">{error}</p>}
+    </div>
+  );
+};
+
+export default TextareaField;

src/components/general/TextareaField.tsx

@@ -9,7 +9,7 @@ type PropTypes = {
 
 const Toast = ({ type, message, allowClose = true, onClose }: PropTypes) => {
   return (
-    <div className="fixed bottom-0 left-0 p-2 w-full">
+    <div className="fixed bottom-0 left-0 p-2 w-full z-50">
       <div className="flex items-center w-full p-1 text-gray-700 bg-gray-200 rounded-lg shadow dark:text-gray-300 dark:bg-gray-600" role="alert">
         <div
           className={clsx("inline-flex items-center justify-center flex-shrink-0 w-8 h-8", {

src/components/general/Toast.tsx

@@ -0,0 +1,115 @@
+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 * as Yup from "yup";
+import { createTimeEntry, getTimeEntryActivities } 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";
+
+type PropTypes = {
+  issue: TIssue;
+  time: number;
+  onClose: () => void;
+  onSuccess: () => void;
+};
+
+const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) => {
+  const { settings } = useSettings();
+  const queryClient = useQueryClient();
+  const formik = useRef<FormikProps<TCreateTimeEntry>>(null);
+
+  const timeEntryActivitiesQuery = useQuery({
+    queryKey: ["timeEntryActivities"],
+    queryFn: getTimeEntryActivities,
+    refetchOnWindowFocus: false,
+  });
+
+  useEffect(() => {
+    formik.current?.setFieldValue("activity_id", timeEntryActivitiesQuery.data?.find((entry) => entry.is_default)?.id ?? undefined);
+  }, [timeEntryActivitiesQuery.data]);
+
+  const createTimeEntryMutation = useMutation({
+    mutationFn: (entry: TCreateTimeEntry) => createTimeEntry(entry),
+    onSuccess: () => {
+      queryClient.invalidateQueries(["issues"]);
+      onSuccess();
+    },
+  });
+
+  return (
+    <>
+      <Modal title="Add time spent" onClose={onClose}>
+        <Formik
+          innerRef={formik}
+          initialValues={{
+            issue_id: issue.id,
+            activity_id: undefined,
+            hours: time / 1000 / 60 / 60,
+            comments: "",
+          }}
+          validationSchema={Yup.object({
+            activity_id: Yup.number().required("Activity is required"),
+            hours: Yup.number().required("Hours is required").min(0.01, "Must be greater than 0"),
+          })}
+          onSubmit={async (values, { setSubmitting }) => {
+            //console.log("onSubmit", values);
+            await createTimeEntryMutation.mutateAsync(values);
+            setSubmitting(false);
+          }}
+        >
+          {({ isSubmitting, touched, errors }) => (
+            <>
+              <Form>
+                <div className="flex flex-col gap-y-2">
+                  <h1 className="mb-1 truncate">
+                    <a href={`${settings.redmineURL}/issues/${issue.id}`} target="_blank" className="text-blue-500 hover:underline" tabIndex={-1}>
+                      #{issue.id}
+                    </a>{" "}
+                    {issue.subject}
+                  </h1>
+                  <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}>
+                    {timeEntryActivitiesQuery.data?.map((activity) => (
+                      <>
+                        <option key={activity.id} value={activity.id}>
+                          {activity.name}
+                        </option>
+                      </>
+                    ))}
+                  </Field>
+
+                  <button
+                    type="submit"
+                    className={clsx(
+                      "text-white bg-primary-700 hover:bg-primary-800 font-medium rounded-lg text-sm px-5 py-1.5 mt-2 dark:bg-primary-600 dark:hover:bg-primary-700",
+                      "focus:ring-4 focus:ring-primary-300 focus:outline-none dark:focus:ring-primary-800"
+                    )}
+                    disabled={isSubmitting}
+                  >
+                    Create
+                  </button>
+                </div>
+              </Form>
+            </>
+          )}
+        </Formik>
+      </Modal>
+      {createTimeEntryMutation.isError && (
+        <Toast
+          type="error"
+          allowClose={false}
+          message={isAxiosError(createTimeEntryMutation.error) ? ((createTimeEntryMutation.error as AxiosError).response?.data as TRedmineError)?.errors.join(", ") : (createTimeEntryMutation.error as Error).message}
+        />
+      )}
+    </>
+  );
+};
+
+export default CreateTimeEntryModal;