[DEV] test 2
This commit is contained in:
parent
147264eb7f
commit
0687369164
@ -20,7 +20,6 @@ import { useNavigate, useParams } from 'react-router-dom';
|
|||||||
|
|
||||||
import { Album, Track } from '@/back-api';
|
import { Album, Track } from '@/back-api';
|
||||||
import { FormGroup } from '@/components/form/FormGroup';
|
import { FormGroup } from '@/components/form/FormGroup';
|
||||||
import { useFormidable } from '@/components/form/Formidable';
|
|
||||||
import { SelectMultiple } from '@/components/form/SelectMultiple';
|
import { SelectMultiple } from '@/components/form/SelectMultiple';
|
||||||
import { SelectSingle } from '@/components/form/SelectSingle';
|
import { SelectSingle } from '@/components/form/SelectSingle';
|
||||||
import { useOrderedAlbums } from '@/service/Album';
|
import { useOrderedAlbums } from '@/service/Album';
|
||||||
@ -31,6 +30,25 @@ import { isNullOrUndefined } from '@/utils/validator';
|
|||||||
|
|
||||||
export type TrackEditPopUpProps = {};
|
export type TrackEditPopUpProps = {};
|
||||||
|
|
||||||
|
const getDifferences = (obj1: any, obj2: any): { [key: string]: boolean } => {
|
||||||
|
const result: { [key: string]: boolean } = {};
|
||||||
|
for (const key in obj1) {
|
||||||
|
if (obj1.hasOwnProperty(key)) {
|
||||||
|
result[key] = obj1[key] !== obj2[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
const hasAnyTrue = (obj: { [key: string]: boolean }): boolean => {
|
||||||
|
for (const key in obj) {
|
||||||
|
if (obj.hasOwnProperty(key) && obj[key] === true) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
|
export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
|
||||||
const { trackId } = useParams();
|
const { trackId } = useParams();
|
||||||
const { dataGenders } = useOrderedGenders(undefined);
|
const { dataGenders } = useOrderedGenders(undefined);
|
||||||
@ -51,88 +69,148 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
|
|||||||
};
|
};
|
||||||
const initialRef = useRef(null);
|
const initialRef = useRef(null);
|
||||||
const finalRef = useRef(null);
|
const finalRef = useRef(null);
|
||||||
const form = useFormidable<Track>({
|
const form = useForm<Track>({
|
||||||
//onSubmit,
|
onSubmit,
|
||||||
//onValuesChange,
|
onValuesChange,
|
||||||
initialValues: dataTrack,
|
initialValues: { ...dataTrack },
|
||||||
//onValid: () => console.log('onValid'),
|
onValid: () => console.log('onValid'),
|
||||||
//onInvalid: () => console.log('onInvalid'),
|
onInvalid: () => console.log('onInvalid'),
|
||||||
});
|
});
|
||||||
|
const formValues = useFormFields({
|
||||||
|
connect: form,
|
||||||
|
selector: (field) => field.value,
|
||||||
|
});
|
||||||
|
/*
|
||||||
|
const formValues = useFormFields({
|
||||||
|
connect: form,
|
||||||
|
fields: ['genderId'] as const,
|
||||||
|
selector: 'value',
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
console.log(`dataTrack : ${JSON.stringify(dataTrack, null, 2)}`);
|
||||||
|
console.log(`Redraw : ${JSON.stringify(formValues, null, 2)}`);
|
||||||
|
const [newData, setNewData] = useState<Track>();
|
||||||
|
const [changeData, setChangeData] = useState<{ [key: string]: boolean }>();
|
||||||
|
const [changeOneData, setChangeOneData] = useState<boolean>(true);
|
||||||
|
// initialize value when ready
|
||||||
|
useEffect(() => {
|
||||||
|
setNewData(dataTrack);
|
||||||
|
}, [dataTrack, setNewData, setChangeData]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!newData) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const ret = getDifferences(dataTrack, newData);
|
||||||
|
setChangeData(ret);
|
||||||
|
///////////////////////setChangeOneData(hasAnyTrue(ret));
|
||||||
|
console.log(
|
||||||
|
`ChangeData=${JSON.stringify(ret, null, 2)} ChangeOneData=${hasAnyTrue(ret)}`
|
||||||
|
);
|
||||||
|
}, [dataTrack, newData, setChangeData, setChangeOneData]);
|
||||||
|
|
||||||
|
// const onChangeValue = (key: string, data) => {
|
||||||
|
// console.log(`[${key}] data: ${data}`);
|
||||||
|
// setNewData((previous) => {
|
||||||
|
// if (previous === undefined) {
|
||||||
|
// return previous;
|
||||||
|
// }
|
||||||
|
// if (previous[key] === data) {
|
||||||
|
// return previous;
|
||||||
|
// }
|
||||||
|
// const tmp = { ...previous };
|
||||||
|
// tmp[key] = data;
|
||||||
|
// console.log(`data = ${JSON.stringify(tmp, null, 2)}`);
|
||||||
|
// return tmp;
|
||||||
|
// });
|
||||||
|
// };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Formiz connect={form} autoForm>
|
||||||
initialFocusRef={initialRef}
|
<form noValidate onSubmit={form.submit}>
|
||||||
finalFocusRef={finalRef}
|
<Modal
|
||||||
closeOnOverlayClick={false}
|
initialFocusRef={initialRef}
|
||||||
onClose={onClose}
|
finalFocusRef={finalRef}
|
||||||
isOpen={true}
|
closeOnOverlayClick={false}
|
||||||
>
|
onClose={onClose}
|
||||||
<ModalOverlay />
|
isOpen={true}
|
||||||
<ModalContent>
|
>
|
||||||
<ModalHeader>Edit Track</ModalHeader>
|
<ModalOverlay />
|
||||||
<ModalCloseButton ref={finalRef} />
|
<ModalContent>
|
||||||
|
<ModalHeader>Edit Track</ModalHeader>
|
||||||
|
<ModalCloseButton ref={finalRef} />
|
||||||
|
|
||||||
<ModalBody pb={6}>
|
<ModalBody pb={6}>
|
||||||
<FormGroup isRequired>
|
<FormGroup isRequired>
|
||||||
<FormLabel>Title</FormLabel>
|
<FormLabel>Title</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
ref={initialRef}
|
ref={initialRef}
|
||||||
value={form.values.name}
|
value={formValues.name}
|
||||||
onChange={(e) => form.setValues({ name: e.target.value })}
|
onChange={(e) => form.setValues({ name: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<label>Description</label>
|
<label>Description</label>
|
||||||
<Textarea
|
<Textarea
|
||||||
value={form.values.description}
|
value={formValues.description}
|
||||||
onChange={(e) => form.setValues({ description: e.target.value })}
|
onChange={(e) =>
|
||||||
/>
|
form.setValues({ description: e.target.value })
|
||||||
</FormGroup>
|
}
|
||||||
<FormGroup>
|
/>
|
||||||
<label>Gender</label>
|
</FormGroup>
|
||||||
<SelectSingle
|
<FormGroup>
|
||||||
value={form.values.genderId}
|
<label>Gender</label>
|
||||||
options={dataGenders}
|
<SelectSingle
|
||||||
onChange={(value) => form.setValues({ genderId: value })}
|
value={formValues.genderId}
|
||||||
keyValue="name"
|
options={dataGenders}
|
||||||
/>
|
onChange={(value) => {
|
||||||
</FormGroup>
|
form.setValues({ genderId: value });
|
||||||
<FormGroup>
|
console.log(`event change value: ${value}`);
|
||||||
<label>Artist(s)</label>
|
console.log(
|
||||||
<SelectMultiple
|
`values: ${JSON.stringify(formValues, null, 2)}`
|
||||||
values={form.values.artists}
|
);
|
||||||
options={dataArtist}
|
}}
|
||||||
onChange={(value) => form.setValues({ artists: value })}
|
keyValue="name"
|
||||||
keyValue="name"
|
/>
|
||||||
/>
|
</FormGroup>
|
||||||
</FormGroup>
|
<FormGroup>
|
||||||
<FormGroup>
|
<label>Artist(s)</label>
|
||||||
<label>Album</label>
|
<SelectMultiple
|
||||||
<SelectSingle
|
values={formValues.artists}
|
||||||
value={form.values.albumId}
|
options={dataArtist}
|
||||||
options={dataAlbums}
|
onChange={(value) => form.setValues({ artists: value })}
|
||||||
onChange={(value) => form.setValues({ albumId: value })}
|
keyValue="name"
|
||||||
keyValue="name"
|
/>
|
||||||
/>
|
</FormGroup>
|
||||||
</FormGroup>
|
<FormGroup>
|
||||||
<FormControl>
|
<label>Album</label>
|
||||||
<FormLabel>track n°</FormLabel>
|
<SelectSingle
|
||||||
<NumberInput
|
value={formValues.albumId}
|
||||||
value={form.values.track}
|
options={dataAlbums}
|
||||||
onChange={(value) => form.setValues({ track: value })}
|
onChange={(value) => form.setValues({ albumId: value })}
|
||||||
/>
|
keyValue="name"
|
||||||
</FormControl>
|
/>
|
||||||
</ModalBody>
|
</FormGroup>
|
||||||
<ModalFooter>
|
<FormControl>
|
||||||
{form.isFormModified && (
|
<FormLabel>track n°</FormLabel>
|
||||||
<Button colorScheme="blue" mr={3} type="submit">
|
<NumberInput
|
||||||
Save
|
value={formValues.track}
|
||||||
</Button>
|
onChange={(value) => form.setValues({ track: value })}
|
||||||
)}
|
/>
|
||||||
<Button onClick={onClose}>Cancel</Button>
|
</FormControl>
|
||||||
</ModalFooter>
|
</ModalBody>
|
||||||
</ModalContent>
|
<ModalFooter>
|
||||||
</Modal>
|
{changeOneData && (
|
||||||
|
<Button colorScheme="blue" mr={3} type="submit">
|
||||||
|
Save
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button onClick={onClose}>Cancel</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</ModalContent>
|
||||||
|
</Modal>
|
||||||
|
</form>
|
||||||
|
</Formiz>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user