From 49d2fea75c07106994a2f8b268cb9fe261d83d0e Mon Sep 17 00:00:00 2001 From: malmen237 Date: Mon, 28 Oct 2024 10:43:18 +0100 Subject: [PATCH] fix: removed input-duplicate-block from input-field and added error-handling --- .../editView/AudioChannels/AudioChannels.tsx | 29 +++++++++++++++++-- .../editView/AudioChannels/NumberInput.tsx | 8 +++-- .../editView/AudioChannels/Outputs.tsx | 28 ++++++++++++++++++ .../inventory/editView/EditView.tsx | 10 ++++++- .../inventory/editView/UpdateButtons.tsx | 8 +++-- src/i18n/locales/sv.ts | 2 +- 6 files changed, 76 insertions(+), 9 deletions(-) diff --git a/src/components/inventory/editView/AudioChannels/AudioChannels.tsx b/src/components/inventory/editView/AudioChannels/AudioChannels.tsx index 7024fede..45cbeffa 100644 --- a/src/components/inventory/editView/AudioChannels/AudioChannels.tsx +++ b/src/components/inventory/editView/AudioChannels/AudioChannels.tsx @@ -12,9 +12,14 @@ import { channel, mapAudio } from '../../../../utils/audioMapping'; interface IAudioChannels { source: Source; locked: boolean; + setDuplicateAudioValues: (values: boolean) => void; } -export default function AudioChannels({ source, locked }: IAudioChannels) { +export default function AudioChannels({ + source, + locked, + setDuplicateAudioValues +}: IAudioChannels) { type TOutputs = 'audio_mapping.outL' | 'audio_mapping.outR'; const t = useTranslate(); const outputs: TOutputs[] = ['audio_mapping.outL', 'audio_mapping.outR']; @@ -25,6 +30,7 @@ export default function AudioChannels({ source, locked }: IAudioChannels) { } = useContext(EditViewContext); const [error, setError] = useState(''); + const [duplicateError, setDuplicateError] = useState(''); const [outputRows, setRows] = useState<{ id: string; value: string }[][]>([]); const { number_of_channels: numberOfChannels = 0 } = audioStream || {}; @@ -34,6 +40,22 @@ export default function AudioChannels({ source, locked }: IAudioChannels) { channelsInArray.push(i); } + useEffect(() => { + const isDuplicate = outputRows.some((row, rowIndex) => + row.some((cell, cellIndex) => + outputRows.some((innerRow, innerRowIndex) => + innerRow.some((innerCell, innerCellIndex) => + rowIndex !== innerRowIndex || cellIndex !== innerCellIndex + ? cell.value === innerCell.value && cell.value !== '' + : false + ) + ) + ) + ); + + setDuplicateAudioValues(isDuplicate); + }, [outputRows, setDuplicateAudioValues]); + useEffect(() => { let array = [channelsInArray.map(() => channel(''))]; @@ -189,9 +211,11 @@ export default function AudioChannels({ source, locked }: IAudioChannels) { }); if (isAlreadyUsed) { - return setError(() => + setDuplicateError(() => t('audio_mapping.alreadyUsed', { value: e.target.value }) ); + } else { + setDuplicateError(''); } if (Number(e.target.value) > max) { @@ -232,6 +256,7 @@ export default function AudioChannels({ source, locked }: IAudioChannels) { /> ))} + ); diff --git a/src/components/inventory/editView/AudioChannels/NumberInput.tsx b/src/components/inventory/editView/AudioChannels/NumberInput.tsx index b1d225cc..001a782b 100644 --- a/src/components/inventory/editView/AudioChannels/NumberInput.tsx +++ b/src/components/inventory/editView/AudioChannels/NumberInput.tsx @@ -9,6 +9,7 @@ interface IInputRow { value: string; max: number; isDisabled: boolean; + duplicateError: boolean; updateRows: (e: IEvent) => void; } @@ -16,6 +17,7 @@ export default function InputRow({ value, max, isDisabled, + duplicateError, updateRows }: IInputRow) { return ( @@ -27,8 +29,10 @@ export default function InputRow({ onChange={updateRows} disabled={isDisabled} className={`w-[100%] h-[100%] appearance-none text-black text-center ${ - styles.numberInput - } ${isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'}`} + duplicateError ? 'bg-red-400' : '' + } ${styles.numberInput} ${ + isDisabled ? 'cursor-not-allowed' : 'cursor-pointer' + }`} /> ); } diff --git a/src/components/inventory/editView/AudioChannels/Outputs.tsx b/src/components/inventory/editView/AudioChannels/Outputs.tsx index 7bf3b0e7..5730b035 100644 --- a/src/components/inventory/editView/AudioChannels/Outputs.tsx +++ b/src/components/inventory/editView/AudioChannels/Outputs.tsx @@ -31,6 +31,33 @@ export default function Outputs({ locked, updateRows }: IOutput) { + const findDuplicateValues = () => { + const duplicateOutputIndices: number[] = []; + const seenOutputs = new Set(); + + contents.forEach((output, index) => { + if (seenOutputs.has(output.value) && output.value !== '') { + duplicateOutputIndices.push(index); + + // Also include the first occurrence if it's not already included + const firstIndex = contents.findIndex( + (item) => item.value === output.value + ); + if (!duplicateOutputIndices.includes(firstIndex)) { + duplicateOutputIndices.push(firstIndex); + } + } else if (output.value !== '') { + seenOutputs.add(output.value); + } + }); + + return { + duplicateOutputIndices + }; + }; + + const { duplicateOutputIndices } = findDuplicateValues(); + return (
{contents.map(({ value, id }, index) => { @@ -55,6 +82,7 @@ export default function Outputs({ isDisabled={small || !isEnabled || locked} max={max} value={value} + duplicateError={duplicateOutputIndices.includes(index)} updateRows={(e: IEvent) => updateRows && updateRows(e, rowIndex, index, id) } diff --git a/src/components/inventory/editView/EditView.tsx b/src/components/inventory/editView/EditView.tsx index 016f826b..3a995ad1 100644 --- a/src/components/inventory/editView/EditView.tsx +++ b/src/components/inventory/editView/EditView.tsx @@ -5,6 +5,7 @@ import { SourceWithId } from '../../../interfaces/Source'; import UpdateButtons from './UpdateButtons'; import AudioChannels from './AudioChannels/AudioChannels'; import ImageComponent from '../../image/ImageComponent'; +import { useState } from 'react'; export default function EditView({ source, @@ -21,6 +22,8 @@ export default function EditView({ removeInventorySourceItem: (id: string) => Promise; locked: boolean; }) { + const [duplicateAudioValues, setDuplicateAudioValues] = useState(false); + return (
@@ -31,7 +34,11 @@ export default function EditView({
- +
); diff --git a/src/components/inventory/editView/UpdateButtons.tsx b/src/components/inventory/editView/UpdateButtons.tsx index 7936d8c2..a8a997eb 100644 --- a/src/components/inventory/editView/UpdateButtons.tsx +++ b/src/components/inventory/editView/UpdateButtons.tsx @@ -14,6 +14,7 @@ type UpdateButtonsProps = { removeInventorySourceItem: (id: string) => Promise; close: () => void; locked: boolean; + duplicateAudioValues: boolean; }; export default function UpdateButtons({ @@ -21,7 +22,8 @@ export default function UpdateButtons({ close, purgeInventorySource, removeInventorySourceItem, - locked + locked, + duplicateAudioValues }: UpdateButtonsProps) { const t = useTranslate(); const { @@ -74,12 +76,12 @@ export default function UpdateButtons({