Skip to content

Commit

Permalink
ISSUE #5179 - wip
Browse files Browse the repository at this point in the history
  • Loading branch information
sanmont3drepo committed Oct 18, 2024
1 parent 9274766 commit 1a43c9d
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 50 deletions.
12 changes: 11 additions & 1 deletion ...dashboard/projects/drawings/uploadDrawingRevisionForm/uploadList/uploadList.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
*/

import { UploadItemFields } from '@/v5/store/drawings/revisions/drawingRevisions.types';
import { useContext } from 'react';
import { useCallback, useContext } from 'react';
import { SortingDirection } from '@components/dashboard/dashboardList/dashboardList.types';
import { useOrderedList } from '@components/dashboard/dashboardList/useOrderedList';
import { UploadFilesContext } from '@components/shared/uploadFiles/uploadFilesContext';
Expand All @@ -37,6 +37,9 @@ const DEFAULT_SORT_CONFIG = {
direction: [SortingDirection.DESCENDING, SortingDirection.ASCENDING],
};


let renderCount = 0;

export const UploadList = ({
values,
removeUploadById,
Expand All @@ -50,8 +53,15 @@ export const UploadList = ({
if (isSelected) setSelectedId();
};

console.log(renderCount++);
const resetCount = useCallback((e) => {
e.preventDefault();
renderCount = 0;
}, []);

return (
<>
<button onClick={resetCount}>reset rendercount</button>
<DashboardListHeader onSortingChange={setSortConfig} defaultSortConfig={DEFAULT_SORT_CONFIG}>
<Label name="file.name" minWidth={37} sort>
<FormattedMessage id="drawing.uploads.list.header.filename" defaultMessage="Filename" />
Expand Down
89 changes: 58 additions & 31 deletions ...uploadListItem/components/uploadListItemStatusCode/uploadListItemStatusCode.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,15 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { useFormState } from 'react-hook-form';
import { useFormContext, useFormState } from 'react-hook-form';
import { Autocomplete, Description, OptionContainer, StatusCodeInput, Value } from './uploadListItemStatusCode.styles';
import { ErrorTooltip } from '@controls/errorTooltip';
import { get } from 'lodash';
import { OptionsBox } from '@components/shared/uploadFiles/uploadList/uploadListItem/uploadListItemDestination/uploadListItemDestination.styles';
import { DrawingRevisionsHooksSelectors } from '@/v5/services/selectorsHooks';
import { StatusCode } from '@/v5/store/drawings/revisions/drawingRevisions.types';
import { Tooltip } from '@mui/material';
import { useCallback, useRef } from 'react';

interface IUploadListItemStatusCode {
value?: string;
Expand All @@ -31,41 +32,67 @@ interface IUploadListItemStatusCode {
className?: string;
inputRef?: any;
}



export const UploadListItemStatusCode = ({ value, inputRef, onChange, ...props }: IUploadListItemStatusCode) => {
const renderCount = useRef(0);

const { errors } = useFormState();
const error = get(errors, props.name)?.message;
const options = DrawingRevisionsHooksSelectors.selectStatusCodes();
const getValue = () => options.find((o) => o.code === value) || '';
const { register } = useFormContext();
// const getValue = () => options.find((o) => o.code === value) || '';

// const { ref, ...inputprops} = register(props.name);
console.log(props.name + ':' + (renderCount.current++));

const reset = useCallback((e) => {
e.preventDefault();
renderCount.current = 0;
}, []);

return (
<>
<button onClick={reset}>reset </button>
<div style={{ backgroundColor:'red' }}>{error || ''}</div>
<select {...register(props.name)} >
{options.map(({ code, description }) => (
<option value={code}>{code}</option>))}
</select>
</>);

return (
<Autocomplete
{...props}
options={options as StatusCode[]}
autoHighlight
value={getValue()}
onChange={(e, newValue: StatusCode) => onChange(newValue?.code || '')}
getOptionLabel={(option: StatusCode) => option.code || ''}
renderOption={(optionProps, option: StatusCode) => (
<Tooltip title={option.description} key={option.code}>
<OptionContainer {...optionProps}>
<Value>{option.code}</Value>
<Description>{option.description}</Description>
</OptionContainer>
</Tooltip>
)}
renderInput={({ InputProps, ...params }) => (
<StatusCodeInput
{...params}
InputProps={{
...InputProps,
startAdornment: !!error && (<ErrorTooltip>{error}</ErrorTooltip>),
}}
inputRef={inputRef}
error={!!error}
/>
)}
ListboxComponent={OptionsBox}
disableClearable={!value}
/>
<>
<Autocomplete
{...props}
options={options as StatusCode[]}
autoHighlight
value={getValue()}
onChange={(e, newValue: StatusCode) => onChange(newValue?.code || '')}
getOptionLabel={(option: StatusCode) => option.code || ''}
renderOption={(optionProps, option: StatusCode) => (
<Tooltip title={option.description} key={option.code}>
<OptionContainer {...optionProps}>
<Value>{option.code}</Value>
<Description>{option.description}</Description>
</OptionContainer>
</Tooltip>
)}
renderInput={({ InputProps, ...params }) => (
<StatusCodeInput
{...params}
InputProps={{
...InputProps,
startAdornment: !!error && (<ErrorTooltip>{error}</ErrorTooltip>),
}}
inputRef={inputRef}
error={!!error}
/>
)}
ListboxComponent={OptionsBox}
disableClearable={!value}
/>
</>
);
};
57 changes: 42 additions & 15 deletions ...drawings/uploadDrawingRevisionForm/uploadList/uploadListItem/uploadListItem.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { DashboardListItemRow as UploadListItemRow } from '@components/dashboard
import { UploadListItemDestination } from './components/uploadListItemDestination/uploadListItemDestination.component';
import { UploadListItemRevisionCode } from './components/uploadListItemRevisionCode/uploadListItemRevisionCode.component';
import { UploadListItemButton } from '@components/shared/uploadFiles/uploadList/uploadListItem/uploadListItem.styles';
import { useFormContext } from 'react-hook-form';
import { useFormContext, useWatch } from 'react-hook-form';
import { useEffect } from 'react';
import { UploadListItemFileIcon } from '@components/shared/uploadFiles/uploadList/uploadListItem/uploadListItemFileIcon/uploadListItemFileIcon.component';
import { UploadListItemTitle } from '@components/shared/uploadFiles/uploadList/uploadListItem/uploadListItemTitle/uploadListItemTitle.component';
Expand All @@ -34,6 +34,8 @@ import { DrawingRevisionsActionsDispatchers, DrawingsActionsDispatchers } from '
import { UploadListItemStatusCode } from './components/uploadListItemStatusCode/uploadListItemStatusCode.component';
import { UploadStatus } from '@/v5/store/containers/containers.types';
import { DEFAULT_SETTINGS_CALIBRATION } from '../../../../calibration/calibration.helpers';
import { get } from 'lodash';
import { statusCodeAndRevisionCodeMustBeUniqueMessage } from '@/v5/validation/drawingSchemes/drawingSchemes';

const UNEXPETED_STATUS_ERROR = undefined;
const STATUS_TEXT_BY_UPLOAD = {
Expand Down Expand Up @@ -79,12 +81,12 @@ export const UploadListItem = ({
const teamspace = TeamspacesHooksSelectors.selectCurrentTeamspace();
const projectId = ProjectsHooksSelectors.selectCurrentProject();
const uploadErrorMessage: string = DrawingRevisionsHooksSelectors.selectUploadError(uploadId);
const { watch, trigger, setValue } = useFormContext();
const drawingId = watch(`${revisionPrefix}.drawingId`);
const statusCode = watch(`${revisionPrefix}.statusCode`);
const revCode = watch(`${revisionPrefix}.revCode`);
const { trigger, setValue, formState: { errors } } = useFormContext();
const drawingId = useWatch({ name: `${revisionPrefix}.drawingId` });
const statusCode = useWatch({ name: `${revisionPrefix}.statusCode` });
const revCode = useWatch({ name: `${revisionPrefix}.revCode` });
const selectedDrawing = DrawingsHooksSelectors.selectDrawingById(drawingId);
const selectedDrawingRevisions = DrawingRevisionsHooksSelectors.selectRevisions(selectedDrawing?._id);
// const selectedDrawingRevisions = DrawingRevisionsHooksSelectors.selectRevisions(selectedDrawing?._id);
const progress = DrawingRevisionsHooksSelectors.selectUploadProgress(uploadId);
const uploadStatus = getUploadStatus(progress, uploadErrorMessage);

Expand All @@ -95,17 +97,29 @@ export const UploadListItem = ({
calibration: drawing?.calibration || DEFAULT_SETTINGS_CALIBRATION,
});

const revCodeError = get(errors, `${revisionPrefix}.revCode`)?.message;
const statusCodeError = get(errors, `${revisionPrefix}.statusCode`)?.message;

useEffect(() => {
if (revCode) {
trigger(`${revisionPrefix}.revCode`);
// Dont trigger the error if it was already triggered
const errorWasAlreadyTriggered = revCodeError === statusCodeError;

if (errorWasAlreadyTriggered) {
return;
}
}, [drawingId, statusCode, selectedDrawingRevisions.length]);

useEffect(() => {
if (statusCode) {
trigger(`${revisionPrefix}.statusCode`);
// Only trigger the revCode if its clearing the error or if the the unique error was thrown
if (statusCodeError === statusCodeAndRevisionCodeMustBeUniqueMessage || !statusCodeError ) {
console.log('triggering');
trigger(`${revisionPrefix}.revCode`);
}
}, [drawingId, revCode, selectedDrawingRevisions.length]);
}, [drawingId, statusCodeError]);

// useEffect(() => {
// if (statusCode) {
// trigger(`${revisionPrefix}.statusCode`);
// }
// }, [drawingId, revCode, selectedDrawingRevisions.length]);

useEffect(() => {
setValue(revisionPrefix, sanitiseDrawing(selectedDrawing));
Expand All @@ -118,6 +132,13 @@ export const UploadListItem = ({
}
}, [selectedDrawing?._id]);

useEffect(() => {
const id = '936477e6-6fec-413e-ba5f-9b2defbf0f6c';
DrawingRevisionsActionsDispatchers.fetch(teamspace, projectId, id);
DrawingsActionsDispatchers.fetchDrawingSettings(teamspace, projectId, id);
}, []);


return (
<UploadListItemRow selected={isSelected}>
<UploadListItemFileIcon extension={fileData.extension} />
Expand All @@ -128,7 +149,7 @@ export const UploadListItem = ({
name={fileData.name}
size={fileData.size}
/>
<InputController
{/* <InputController
Input={UploadListItemDestination}
name={`${revisionPrefix}.drawingName`}
key={`${uploadId}.dest`}
Expand All @@ -137,11 +158,17 @@ export const UploadListItem = ({
disabled={isUploading}
onSelectNewDestination={onClickEdit}
/>
<InputController
*/}
{/* <InputController
Input={UploadListItemStatusCode}
key={`${uploadId}.statusCode`}
name={`${revisionPrefix}.statusCode`}
disabled={isUploading}
/> */}
<UploadListItemStatusCode
key={`${uploadId}.statusCode`}
name={`${revisionPrefix}.statusCode`}
disabled={isUploading}
/>
<UploadListItemRevisionCode
key={`${uploadId}.revCode`}
Expand Down
14 changes: 11 additions & 3 deletions frontend/src/v5/validation/drawingSchemes/drawingSchemes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,14 +73,22 @@ export const DrawingFormSchema = Yup.object().shape({

const isSameCode = (codeA = '', codeB = '') => codeA.toLocaleLowerCase().trim() === codeB.toLocaleLowerCase().trim();
const testCombinationIsUnique = (val, testContext) => {
if (!testContext.options?.context || !testContext.parent?.drawingId) return true;
const revisions = selectRevisions(getState(), testContext.parent.drawingId);
if (!testContext.options?.context) return true;
const drawingId = '936477e6-6fec-413e-ba5f-9b2defbf0f6c';
const revisions = selectRevisions(getState(), drawingId);
return !revisions.some((rev) => isSameCode(rev.statusCode, testContext.parent.statusCode) && isSameCode(rev.revCode, testContext.parent.revCode));


// if (!testContext.options?.context || !testContext.parent?.drawingId) return true;
// const revisions = selectRevisions(getState(), testContext.parent.drawingId);
// return !revisions.some((rev) => isSameCode(rev.statusCode, testContext.parent.statusCode) && isSameCode(rev.revCode, testContext.parent.revCode));
};
const statusCodeAndRevisionCodeMustBeUniqueMessage = formatMessage({

export const statusCodeAndRevisionCodeMustBeUniqueMessage = formatMessage({
id: 'validation.drawing.statusCode.error.characters',
defaultMessage: 'The combination of Status Code and Revision Code must be unique',
});

export const ListItemSchema = Yup.object().shape({
file: uploadFile,
statusCode: Yup.string().required(
Expand Down

0 comments on commit 1a43c9d

Please sign in to comment.