Merge branch 'develop' into dependabot/github_actions/actions/cache-4

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.10](https://github.com/clm-roig/suivie/compare/v0.3.9...v0.3.10) (2024-02-06)
+
+
+### Features
+
+* **customCompletion:** automatically select & focus the only completion if unique when opening dialogue ([f72e82c](https://github.com/clm-roig/suivie/commit/f72e82c88c08de5ce0bea820bb7a946814199b69))
+
+
+### Bug Fixes
+
+* **animatedBox:** remove now useless hack ([40b951f](https://github.com/clm-roig/suivie/commit/40b951f5bc1b11a90268fab7dd59ae0602cf5522))
+* **drawerMenu:** increase swip area width ([39584fe](https://github.com/clm-roig/suivie/commit/39584fe19e094d0545ae9f78006eca50e713280f))
+* **trackerCard:** fix dndrop issue ([130dd08](https://github.com/clm-roig/suivie/commit/130dd08163797a395c16284ba3adc7a606ceccff))
+
 ### [0.3.9](https://github.com/clm-roig/suivie/compare/v0.3.8...v0.3.9) (2023-12-08)
 
 

package.json

@@ -1,11 +1,11 @@
 {
   "name": "suivie",
   "homepage": "https://clm-roig.github.io/suivie",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "private": true,
   "jest": {},
   "dependencies": {
-    "@emotion/react": "^11.10.4",
+    "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.4",
     "@formkit/auto-animate": "^1.0.0-beta.3",
     "@mui/icons-material": "^5.10.6",

src/components/TrackerCard/TrackerCardActions.tsx

@@ -143,6 +143,7 @@ const TrackerCardActions: FC<Props> = ({
         onChipClick={onChipClick}
         onValidation={handleCustomValidation}
         selectedCompletions={selectedCompletions}
+        setSelectedCompletions={setSelectedCompletions}
         tracker={tracker}
       />
       <MakeVisibleValidationDialog

src/components/TrackerValidationDialog/CustomValidationDialog.tsx

@@ -9,7 +9,7 @@ import {
   DialogTitle
 } from '@mui/material';
 import { isToday } from 'date-fns';
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 
 import { useAppSelector } from '../../hooks/redux';
 import Completion from '../../models/Completion';
@@ -24,6 +24,7 @@ interface Props {
   onChipClick?: (completion: Completion) => void;
   onValidation: (completions: Completion[]) => void;
   selectedCompletions?: Completion[];
+  setSelectedCompletions: (completions: Completion[]) => void;
   tracker: Tracker;
 }
 
@@ -32,10 +33,19 @@ const CustomValidationDialog: FC<Props> = ({
   onChipClick,
   onValidation,
   selectedCompletions,
+  setSelectedCompletions,
   tracker
 }) => {
   const selectedDate = new Date(useAppSelector(selectSelectedDate));
   const { name, requiredCompletions } = tracker;
+
+  useEffect(() => {
+    // Default select the only completion when opening (and unselect it when closing)
+    if (requiredCompletions?.length === 1) {
+      setSelectedCompletions(dialogProps.open ? requiredCompletions : []);
+    }
+  }, [setSelectedCompletions, requiredCompletions, dialogProps.open]);
+
   return (
     <Dialog {...dialogProps}>
       <DialogTitle id="alert-dialog-title">

src/components/forms/ValidateCompletionsForm/ValidateCompletionsForm.tsx

@@ -92,6 +92,7 @@ const ValidateCompletionsForm: FC<Props> = ({ completions, formId, onSubmit }) =
               }}
               render={({ field: { name, onChange, value }, fieldState: { error } }) => (
                 <CompletionQuantityTextField
+                  autoFocus={completions?.length === 1}
                   onDecrement={() => setValue(name, computeDecrementedStringQuantity(value))}
                   onIncrement={() => setValue(name, computeIncrementedStringQuantity(value))}
                   textFieldProps={{

src/components/forms/completions/CompletionQuantityTextField.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Button, TextField, TextFieldProps } from '@mui/material';
+import { Button, InputProps, TextField, TextFieldProps } from '@mui/material';
 import React, { FC } from 'react';
 
 const StyledButton = styled(Button)`
@@ -14,12 +14,18 @@ const StyledTextField = styled(TextField)`
 `;
 
 interface Props {
+  autoFocus?: InputProps['autoFocus'];
   onDecrement?: () => void;
   onIncrement?: () => void;
   textFieldProps: TextFieldProps;
 }
 
-const CompletionQuantityTextField: FC<Props> = ({ onDecrement, onIncrement, textFieldProps }) => {
+const CompletionQuantityTextField: FC<Props> = ({
+  autoFocus,
+  onDecrement,
+  onIncrement,
+  textFieldProps
+}) => {
   return (
     <StyledTextField
       inputProps={{
@@ -30,6 +36,7 @@ const CompletionQuantityTextField: FC<Props> = ({ onDecrement, onIncrement, text
         }
       }}
       InputProps={{
+        autoFocus: autoFocus,
         endAdornment: onIncrement && <StyledButton onClick={() => onIncrement()}>+</StyledButton>,
         startAdornment: onDecrement && <StyledButton onClick={() => onDecrement()}>-</StyledButton>,
         sx: { px: 1 }

src/components/forms/completions/DefaultCompletionsForm/DefaultCompletionsForm.tsx

@@ -75,9 +75,7 @@ const DefaultCompletionsForm: FC<Props> = ({
   const id = open ? 'popover-' + name : undefined;
 
   return (
-    // Little hack on Box ref to make it work with TS: https://github.com/mui/material-ui/issues/17010#issuecomment-615577360
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    <Box {...({ ref: animateRef } as any)}>
+    <Box ref={animateRef}>
       {fields.map((field, index) => (
         <FieldsetGrid columns={2} container key={field.id} sx={fieldsetSx} {...gridProps}>
           <Grid item xs={2} sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>