feat: Added spent time for other users

- Added spent time for other users
- Improved create time entry modal layout
- Optimized react-select component
- Added formik wrapper for react-select
- Added useProjectUsers hook

Author: CrawlerCode

src/api/redmine.ts

@@ -1,5 +1,5 @@
 import { formatISO } from "date-fns";
-import { TAccount, TCreateTimeEntry, TIssue, TIssuesPriority, TProject, TSearchResult, TTimeEntry, TTimeEntryActivity } from "../types/redmine";
+import { TAccount, TCreateTimeEntry, TIssue, TIssuesPriority, TMembership, TProject, TSearchResult, TTimeEntry, TTimeEntryActivity } from "../types/redmine";
 import instance from "./axios.config";
 
 export const getMyAccount = async (): Promise<TAccount> => {
@@ -44,6 +44,10 @@ export const searchProjects = async (query: string): Promise<TSearchResult[]> =>
   return instance.get(`/search.json?q=${query}&scope=my_project&titles_only=1&projects=1`).then((res) => res.data.results);
 };
 
+export const getProjectMemberships = async (id: number, offset = 0, limit = 100): Promise<TMembership[]> => {
+  return instance.get(`/projects/${id}/memberships.json?offset=${offset}&limit=${limit}`).then((res) => res.data.memberships);
+};
+
 // Time entries
 export const getAllMyTimeEntries = async (from: Date, to: Date, offset = 0, limit = 100): Promise<TTimeEntry[]> => {
   return instance

src/components/general/LoadingSpinner.tsx

@@ -2,7 +2,7 @@ const LoadingSpinner = () => {
   return (
     <div className="flex items-center justify-center">
       <div role="status">
-        <svg aria-hidden="true" className="mr-2 h-6 w-6 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg aria-hidden="true" className="h-4 w-4 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
             fill="currentColor"
@@ -13,7 +13,6 @@ const LoadingSpinner = () => {
           />
         </svg>
       </div>
-      <span>Loading...</span>
     </div>
   );
 };

src/components/general/ReactSelect.tsx

@@ -5,9 +5,10 @@ import Select, { GroupBase, Props } from "react-select";
 
 type PropTypes = {
   title?: string;
+  error?: string;
 };
 
-function ReactSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ title, ...props }: Props<Option, IsMulti, Group> & PropTypes) {
+function ReactSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ title, error, ...props }: Props<Option, IsMulti, Group> & PropTypes) {
   return (
     <div>
       {title && (
@@ -27,9 +28,12 @@ function ReactSelect<Option = unknown, IsMulti extends boolean = false, Group ex
           control: (state) =>
             clsx("block w-full rounded-lg border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white", {
               "outline-none ring-2 ring-primary-300 dark:ring-primary-800": state.isFocused,
+              "border-red-500 text-red-900 dark:border-red-500 dark:text-red-500": error !== undefined,
+            }),
+          placeholder: () =>
+            clsx("text-gray-400", {
+              "text-red-700 dark:text-red-500": error !== undefined,
             }),
-          input: () => "focus:outline-none focus:ring-2 focus:ring-primary-300 dark:focus:ring-primary-800",
-          placeholder: () => "text-gray-400",
           menu: () => "mt-1 py-2 rounded-lg bg-gray-100 text-gray-900 dark:bg-gray-600 dark:text-white border border-gray-300 dark:border-gray-600",
           option: (state) =>
             clsx("truncate p-1.5", {
@@ -41,6 +45,7 @@ function ReactSelect<Option = unknown, IsMulti extends boolean = false, Group ex
           indicatorsContainer: () => "cursor-pointer",
         }}
       />
+      {error && <p className="text-sm text-red-600 dark:text-red-500">{error}</p>}
     </div>
   );
 }

src/components/general/ReactSelectFormik.tsx

@@ -0,0 +1,80 @@
+import { FormikHandlers } from "formik";
+import { ComponentProps } from "react";
+import { GroupBase, OnChangeValue, PropsValue } from "react-select";
+import ReactSelect from "./ReactSelect";
+
+type Option = { value: number; label: string };
+
+function ReactSelectFormik<IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({
+  value: _value,
+  onChange,
+  onBlur,
+  ...props
+}: Omit<ComponentProps<typeof ReactSelect<Option, IsMulti, Group>>, "value" | "onChange"> & {
+  value?: Option["value"] | Option["value"][];
+  onChange?: FormikHandlers["handleChange"];
+}) {
+  let value: PropsValue<Option>;
+  if (Array.isArray(_value)) {
+    value =
+      props.options?.reduce((result, o) => {
+        if (typeof o === "object" && "options" in o) {
+          const opts = o.options.filter((o) => _value.includes(o.value));
+          return [...result, ...opts];
+        } else if (_value.includes(o.value)) {
+          return [...result, o];
+        }
+        return result;
+      }, [] as Option[]) ?? [];
+  } else {
+    value =
+      (props.options &&
+        [...props.options].reduce(
+          (_, o, i, arr) => {
+            if (typeof o === "object" && "options" in o) {
+              const opt = o.options.find((o) => o.value === _value);
+              if (opt) {
+                arr.splice(i + 1); // break out reduce
+                return opt;
+              }
+            } else if (o.value === _value) {
+              arr.splice(i + 1); // break out reduce
+              return o;
+            }
+            return undefined;
+          },
+          undefined as undefined | Option
+        )) ??
+      null;
+  }
+
+  return (
+    <ReactSelect
+      {...props}
+      value={value}
+      onChange={(selected) => {
+        if (Array.isArray(selected)) {
+          onChange?.({
+            target: {
+              name: props.name,
+              value: (selected as OnChangeValue<Option, true>).map((v) => v.value),
+            },
+          });
+        } else {
+          onChange?.({
+            target: {
+              name: props.name,
+              value: (selected as OnChangeValue<Option, false>)?.value,
+            },
+          });
+        }
+      }}
+      onBlur={(e) => {
+        e.target.name = props.name!;
+        onBlur?.(e);
+      }}
+    />
+  );
+}
+
+export default ReactSelectFormik;

src/components/issues/CreateTimeEntryModal.tsx

@@ -6,14 +6,18 @@ import { useEffect, useRef, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as Yup from "yup";
 import { createTimeEntry, updateIssue } from "../../api/redmine";
+import useMyAccount from "../../hooks/useMyAccount";
+import useProjectUsers from "../../hooks/useProjectUsers";
 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";
 import DateField from "../general/DateField";
 import InputField from "../general/InputField";
+import LoadingSpinner from "../general/LoadingSpinner";
 import Modal from "../general/Modal";
+import ReactSelectFormik from "../general/ReactSelectFormik";
 import SelectField from "../general/SelectField";
 import Toast from "../general/Toast";
 import TimeEntryPreview from "../time/TimeEntryPreview";
@@ -33,21 +37,26 @@ const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) =>
 
   const formik = useRef<FormikProps<TCreateTimeEntry>>(null);
 
+  const myAccount = useMyAccount();
   const timeEntryActivities = useTimeEntryActivities();
+  const users = useProjectUsers(issue.project.id, { enabled: settings.options.addSpentTimeForOtherUsers });
 
   useEffect(() => {
-    formik.current?.setFieldValue("activity_id", timeEntryActivities.find((entry) => entry.is_default)?.id ?? undefined);
-  }, [timeEntryActivities]);
+    formik.current?.setFieldValue("activity_id", timeEntryActivities.data.find((entry) => entry.is_default)?.id ?? undefined);
+  }, [timeEntryActivities.data]);
 
   const createTimeEntryMutation = useMutation({
     mutationFn: (entry: TCreateTimeEntry) => createTimeEntry(entry),
-    onSuccess: () => {
-      queryClient.invalidateQueries(["timeEntries"]);
-      onSuccess();
+    onSuccess: (_, entry) => {
+      // if entry created for me => invalidate query
+      if (!entry.user_id || entry.user_id === myAccount.data?.id) {
+        queryClient.invalidateQueries(["timeEntries"]);
+      }
     },
   });
 
   const [doneRatio, setDoneRatio] = useState(issue.done_ratio);
+
   const updateIssueMutation = useMutation({
     mutationFn: (data: { done_ratio: number }) => updateIssue(issue.id, data),
     onSuccess: () => {
@@ -63,12 +72,14 @@ const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) =>
           innerRef={formik}
           initialValues={{
             issue_id: issue.id,
+            user_id: undefined,
             spent_on: new Date(),
             activity_id: undefined,
             hours: Number((time / 1000 / 60 / 60).toFixed(2)),
             comments: "",
           }}
           validationSchema={Yup.object({
+            user_id: Yup.array(Yup.number()),
             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" }))
@@ -81,8 +92,17 @@ const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) =>
             if (issue.done_ratio !== doneRatio) {
               await updateIssueMutation.mutateAsync({ done_ratio: doneRatio });
             }
-            await createTimeEntryMutation.mutateAsync(values);
+            if (values.user_id && Array.isArray(values.user_id) && values.user_id.length > 0) {
+              // create for multiple users
+              for (const userId of values.user_id as number[]) {
+                await createTimeEntryMutation.mutateAsync({ ...values, user_id: userId });
+              }
+            } else {
+              // create for me
+              await createTimeEntryMutation.mutateAsync({ ...values, user_id: undefined });
+            }
             setSubmitting(false);
+            if (!createTimeEntryMutation.isError) onSuccess();
           }}
         >
           {({ isSubmitting, touched, errors, values }) => (
@@ -99,32 +119,59 @@ const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) =>
 
                   {values.spent_on && <TimeEntryPreview date={startOfDay(values.spent_on)} previewHours={values.hours} />}
 
-                  <Field
-                    type="date"
-                    name="spent_on"
-                    title={formatMessage({ id: "issues.modal.add-spent-time.date" })}
-                    placeholder={formatMessage({ id: "issues.modal.add-spent-time.date" })}
-                    required
-                    as={DateField}
-                    size="sm"
-                    error={touched.spent_on && errors.spent_on}
-                    options={{ maxDate: new Date() }}
-                  />
-                  <Field
-                    type="number"
-                    name="hours"
-                    title={formatMessage({ id: "issues.modal.add-spent-time.hours" })}
-                    placeholder={formatMessage({ id: "issues.modal.add-spent-time.hours" })}
-                    min="0"
-                    step="0.01"
-                    max="24"
-                    required
-                    as={InputField}
-                    size="sm"
-                    extraText={values.hours >= 0 && values.hours <= 24 ? formatHours(values.hours) + " h" : undefined}
-                    error={touched.hours && errors.hours}
-                    autoComplete="off"
-                  />
+                  <div className="grid grid-cols-5 gap-x-2">
+                    <div className="col-span-3">
+                      <Field
+                        type="number"
+                        name="hours"
+                        title={formatMessage({ id: "issues.modal.add-spent-time.hours" })}
+                        placeholder={formatMessage({ id: "issues.modal.add-spent-time.hours" })}
+                        min="0"
+                        step="0.01"
+                        max="24"
+                        required
+                        as={InputField}
+                        size="sm"
+                        className="appearance-none"
+                        extraText={values.hours >= 0 && values.hours <= 24 ? formatHours(values.hours) + " h" : undefined}
+                        error={touched.hours && errors.hours}
+                        autoComplete="off"
+                      />
+                    </div>
+                    <div className="col-span-2">
+                      <Field
+                        type="date"
+                        name="spent_on"
+                        title={formatMessage({ id: "issues.modal.add-spent-time.date" })}
+                        placeholder={formatMessage({ id: "issues.modal.add-spent-time.date" })}
+                        required
+                        as={DateField}
+                        size="sm"
+                        error={touched.spent_on && errors.spent_on}
+                        options={{ maxDate: new Date() }}
+                      />
+                    </div>
+                  </div>
+
+                  {settings.options.addSpentTimeForOtherUsers && (
+                    <Field
+                      type="select"
+                      name="user_id"
+                      title={formatMessage({ id: "issues.modal.add-spent-time.user" })}
+                      placeholder={formatMessage({ id: "issues.modal.add-spent-time.user" })}
+                      as={ReactSelectFormik}
+                      options={users.data.map((user) => ({
+                        value: user.id,
+                        label: user.id === myAccount.data?.id ? `${user.name} (${formatMessage({ id: "issues.modal.add-spent-time.user.me" })})` : user.name,
+                      }))}
+                      error={touched.user_id && errors.user_id}
+                      isClearable
+                      isMulti
+                      closeMenuOnSelect={false}
+                      isLoading={users.isLoading}
+                    />
+                  )}
+
                   <Field
                     type="text"
                     name="comments"
@@ -145,7 +192,7 @@ const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) =>
                     size="sm"
                     error={touched.activity_id && errors.activity_id}
                   >
-                    {timeEntryActivities.map((activity) => (
+                    {timeEntryActivities.data.map((activity) => (
                       <>
                         <option key={activity.id} value={activity.id}>
                           {activity.name}
@@ -154,8 +201,9 @@ const CreateTimeEntryModal = ({ issue, time, onClose, onSuccess }: PropTypes) =>
                     ))}
                   </Field>
 
-                  <Button type="submit" disabled={isSubmitting}>
+                  <Button type="submit" disabled={isSubmitting} className="flex items-center justify-center gap-x-2">
                     <FormattedMessage id="issues.modal.add-spent-time.submit" />
+                    {isSubmitting && <LoadingSpinner />}
                   </Button>
                 </div>
               </Form>

src/components/issues/Filter.tsx

@@ -27,7 +27,9 @@ const Filter = ({ onChange }: PropTypes) => {
   // On "Escape" => close filter
   useHotKey(() => setShowFilter(false), { key: "Escape" });
 
-  const { data: projects, isLoading } = useMyProjects(showFilter);
+  const { data: projects, isLoading } = useMyProjects({
+    enabled: showFilter,
+  });
 
   const { data: filter, setData: setFilter } = useStorage<FilterQuery>("filter", defaultFilter);
 

src/hooks/useMyProjects.ts

@@ -2,16 +2,16 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import { useEffect } from "react";
 import { getAllMyProjects } from "../api/redmine";
 
-const AUTO_REFRESH_DATA_INTERVAL = 1000 * 60 * 5;
-const STALE_DATA_TIME = 1000 * 60;
+type Options = {
+  enabled?: boolean;
+};
 
-const useMyProjects = (enabled = true) => {
+const useMyProjects = ({ enabled = true }: Options = {}) => {
   const projectsQuery = useInfiniteQuery({
     queryKey: ["projects"],
     queryFn: ({ pageParam = 0 }) => getAllMyProjects(pageParam * 100, 100),
     getNextPageParam: (lastPage, allPages) => (lastPage.length === 100 ? allPages.length : undefined),
-    staleTime: STALE_DATA_TIME,
-    refetchInterval: AUTO_REFRESH_DATA_INTERVAL,
+    staleTime: 1000 * 60 * 60,
     enabled: enabled,
   });