From 17e9e22f3d5c573f22093bca64bc4e541d457d5a Mon Sep 17 00:00:00 2001 From: "Rochmar Nicolas (DevExpress)" Date: Mon, 8 Apr 2024 14:43:34 +0800 Subject: [PATCH] Fix cancel button does not revert the form values --- .../contact-panel.component.html | 24 +++++++------- .../contact-panel/contact-panel.component.ts | 13 ++++++-- .../library/contact-panel/ContactPanel.tsx | 4 +-- .../contact-panel/ContactPanelDetails.tsx | 31 ++++++++++++------- .../testing/tests/crm-contact-list.test.js | 11 +++++-- .../src/components/library/contact-panel.vue | 23 +++++++++++--- 6 files changed, 71 insertions(+), 35 deletions(-) diff --git a/packages/angular/src/app/components/library/contact-panel/contact-panel.component.html b/packages/angular/src/app/components/library/contact-panel/contact-panel.component.html index 34251a54b..66850e18e 100644 --- a/packages/angular/src/app/components/library/contact-panel/contact-panel.component.html +++ b/packages/angular/src/app/components/library/contact-panel/contact-panel.component.html @@ -3,10 +3,10 @@ - {{ user.name }} + {{ formData.name }} - +
- +
@@ -44,7 +44,7 @@
@@ -54,7 +54,7 @@
@@ -64,7 +64,7 @@
@@ -78,7 +78,7 @@ @@ -88,7 +88,7 @@
@@ -98,7 +98,7 @@
@@ -153,7 +153,7 @@ text="Cancel" stylingMode="outlined" type="normal" - (onClick)="toggleEdit()" + (onClick)="cancelHandler()" >
{{ opportunity.name }}
@@ -194,7 +194,7 @@ - +
diff --git a/packages/angular/src/app/components/library/contact-panel/contact-panel.component.ts b/packages/angular/src/app/components/library/contact-panel/contact-panel.component.ts index 43f382ffd..956447904 100644 --- a/packages/angular/src/app/components/library/contact-panel/contact-panel.component.ts +++ b/packages/angular/src/app/components/library/contact-panel/contact-panel.component.ts @@ -51,7 +51,9 @@ export class ContactPanelComponent implements OnInit, OnChanges, AfterViewChecke private pinEventSubject = new Subject(); - user: Contact; + formData: Contact; + + contactData: Contact; pinned = false; @@ -97,7 +99,8 @@ export class ContactPanelComponent implements OnInit, OnChanges, AfterViewChecke this.isLoading = true; this.service.getContact(id).subscribe((data) => { - this.user = data; + this.formData = data; + this.contactData = { ...this.formData }; this.isLoading = false; this.isEditing = false; }) @@ -115,6 +118,7 @@ export class ContactPanelComponent implements OnInit, OnChanges, AfterViewChecke onSaveClick = ({ validationGroup } : DxButtonTypes.ClickEvent) => { if (!validationGroup.validate().isValid) return; + this.contactData = { ...this.formData }; this.isEditing = !this.isEditing; } @@ -129,6 +133,11 @@ export class ContactPanelComponent implements OnInit, OnChanges, AfterViewChecke this.isEditing = !this.isEditing; }; + cancelHandler() { + this.toggleEdit(); + this.formData = { ...this.contactData }; + } + navigateToDetails = () => { this.router.navigate(['/crm-contact-details']); }; diff --git a/packages/react/src/components/library/contact-panel/ContactPanel.tsx b/packages/react/src/components/library/contact-panel/ContactPanel.tsx index 855cc9f20..cbb7ab1c5 100644 --- a/packages/react/src/components/library/contact-panel/ContactPanel.tsx +++ b/packages/react/src/components/library/contact-panel/ContactPanel.tsx @@ -14,14 +14,12 @@ const ContactPanelWithLoadPanel = withLoadPanel(ContactPanelDetails); export const ContactPanel = ({ contactId, isOpened, changePanelOpened, changePanelPinned } : { contactId: number | null, isOpened: boolean, changePanelOpened:(value: boolean)=> void, changePanelPinned: () => void }) => { const [data, setData] = useState(); - const [defaultData, setDefaultData] = useState(null); const loadData = useCallback(() => { if (!contactId) return; getContact(contactId) .then((data) => { - setDefaultData(data); setData(data); }) .catch((error) => console.log(error)); @@ -37,7 +35,7 @@ export const ContactPanel = ({ contactId, isOpened, changePanelOpened, changePan return ( { }); }; -export const ContactPanelDetails = ({ defaultContact, contact, isOpened, changePanelOpened, onDataChanged, changePanelPinned } : { defaultContact: Contact | null, contact: Contact, isOpened: boolean, changePanelOpened:(value: boolean)=> void, onDataChanged:(data)=> void, changePanelPinned:() => void }) => { +export const ContactPanelDetails = ({ contact, isOpened, changePanelOpened, onDataChanged, changePanelPinned } : { contact: Contact, isOpened: boolean, changePanelOpened:(value: boolean)=> void, onDataChanged:(data)=> void, changePanelPinned:() => void }) => { const [isPinned, setIsPinned] = useState(false); const [isEditing, setIsEditing] = useState(false); const { isLarge, isMedium } = useScreenSize(); const navigate = useNavigate(); + const [formData, setFormData] = useState(contact); const updateField = (field: string) => (value) => { - onDataChanged({ ...contact, ...{ [field]: value } }); + setFormData({ + ...formData, + [field]: value + }); }; useEffect(() => { @@ -54,14 +58,19 @@ export const ContactPanelDetails = ({ defaultContact, contact, isOpened, changeP }, []); const toggleEditHandler = useCallback(() => { - if (isEditing) onDataChanged(defaultContact); setIsEditing(!isEditing); }, [isEditing]); + const cancelHandler = useCallback(() => { + toggleEditHandler(); + setFormData(contact); + }, [contact, toggleEditHandler]); + const onSaveClick = useCallback(({ validationGroup } : ButtonTypes.ClickEvent) => { if(!validationGroup.validate().isValid) return; + onDataChanged(formData); setIsEditing(!isEditing); - }, [isEditing]); + }, [formData, isEditing]); const navigateToDetails = useCallback(() => { navigate('/crm-contact-details'); @@ -127,7 +136,7 @@ export const ContactPanelDetails = ({ defaultContact, contact, isOpened, changeP @@ -135,7 +144,7 @@ export const ContactPanelDetails = ({ defaultContact, contact, isOpened, changeP @@ -143,7 +152,7 @@ export const ContactPanelDetails = ({ defaultContact, contact, isOpened, changeP @@ -154,7 +163,7 @@ export const ContactPanelDetails = ({ defaultContact, contact, isOpened, changeP -