I am looking best practices in Ember.JS to fix the following scenario:
The user clicks on the challenges link.
The system displays the list of challenges.
The user clicks on edit challenge button.
The system displays the edit challenge form.
The user updates the challenge name.
The user clicks on the leagues link without saving the challenge.
The system displays the list of leagues.
The user clicks on the challenges link.
The system displays the list of challenges with the updated challenge name.
This issue is occurring because all my text field are binded directly to the challenge model and since the model is updated as soon as you type it updates the text on all the routes. I have a cancel button on the edit form where I do this.get('model').rollback() on the model to cancel out the edits. However this gets messy if you start doing rollback in different place on the page you can click.
The way I was thinking about fixing this issue is to have the form field binded to the controller properties and on each route copy the model properties to the controller properties on the setupController hook. This would prevent edits to impact the other routes.
I am wondering if this best practice in ember or is there a better way to fix this issue?
Thank you
You can use single rollback in deactivate route hook. Then on cancel action you can do transition only.
// edit challenge route
model(params) {
...
},
deactivate() {
this.modelFor( this.get('routeName')).rollback();
}
PS Are you aware that rollback() still doesn't work properly with relations and reduced to rollbackAttributes() in ED 2.0?
Related links:
https://github.com/emberjs/data/issues/2122
https://github.com/emberjs/data/issues/3273#issuecomment-110965145
Related
I'm stuck with a rendering problem. I have a modal form to create/edit an entity (stored in the parent state list), I render a list of "cards" corresponding to each entity in the list. On each card there is a button opening a modal form to edit the entity. The problem is, I can't re-render my form according to the current action (add / edit) and current object.
As the problem is complex to explain, I've reproduced it : https://codesandbox.io/s/myzoo-cbpw8?file=/index.js:2688-2711
Once I've created an entity I'm stuck with the edit form, I cannot re-render a new form. It would imply rendering a new form then set the visibility state to true and that's not working.
Do you have any ideas on how to achieve this ?
If you have any tips or best practice about my codesandbox, let me know !
The problem is that you are trying to manage both editing and adding dialogs with a single visibility variable, so when you open adding dialog, it opens editing dialogs too.
I think maybe it's better to render a single dialog,both for editing and adding, and store in a variable the animal you want to edit after opening the dialog, or storing false/null in case you want to create a new animal.
Link to example
I have made an example here https://codesandbox.io/s/myzoo-forked-7t9em?file=/index.js:177-198. I think the problem was the same state isVisible was managing the 2 forms.
So when you open any of the forms, the component AnimalForm is called with add action then with edit action. We need to have it called in just one case.
So, I just made a small change and have a variable isVisible for each form. This way the forms are opened independently.
(This is mostly a question on how to implement it)
I am new to react and trying to implement the logic below using the current configuration of the project Hooks + Redux + Saga.
React 16.9
LOGIC FLOW
* The user is authenticated already.
* These two steps need to happen on the same URL but the UI displayed on different pages.
* No dependency allowed.
STEP 1:
-Each student has one form they need to fill out.
-The form has two fields: course and teacher. (value has to be typed)
-Once the two fields are filled out press button next.
STEP2:
-The fields typed by the student will be displayed on the top of the page
-On this page, the student has a list of materials they can pick and add to the list to attend the course.
-After choosing the material, the student can click Save
-Now when the student clicks Save, there is a page redirect to the home page.
My question is what would be the best way to implement the functionality:
that allows the student on STEP1 to click the Next button (Nothing is save yet), have the ability to show the fields entered from the form on the top of the next page
then only after pressing save on STEP 2, be able to save all the informations from STEP 1 and STEP 2 pages.
It's mostly that kind of state management that i am trying to understand.
thanks in advance...
Possible Idea:
1. You will have a component named Steps which contain child Components Step1 and Step2.
2. The Steps component will have a state of type {currentStep,step1Data,step2Data}
3. Based on the value of currentStep you will render Step1 or Step2 component which will show the forms.
4. when student will fill form in Step1 or Step2 the data will be stored in step1Data or step2Data of state of Steps component.
5. After save step1Data and step2Data will be saved on redux(or a server call haeppen).
Thanks
As the title states, I need to filter results of an associated view based on a record's field value and user permissions.
I've used some Javascript to achieve this whenever the iFrame loads, but if the user switches to a different view, my Javascript is not called and the filtered records come back. I've tried to implement an event listener for various changes within the iFrame, but haven't been able to get what I need. I've gotten onclick to call my function whenever the user opens the view dropdown, but I need it to call whenever they actually switch views.
Am I over complicating this and there's a native way to do this? Or does anyone know how to detect changes within an iFrame?
Unfortunately there’s no native config to do it by OOB. I recommend these.
Don’t rely on associated view, as the name suggests it’s for seeing all the associated records. Remove navigation item in Form editor to remove them if you don’t want your users to see it
Use Subgrid for all your different needs, but not with view switcher, as again you will get roadblock of view switch triggers, etc. also this is going to be unsupported approach to rig the FetchXml with your custom filters
Custom HTML with grid is better or even PCF control of your own to take query & filters
Plugin on RetrieveMultiple can be used in worst cases
Trying to think of a good solution to this issue, I am trying to create a Form which would exist on multiple pages. At one point if you press an option on one of the buttons on page 1, it will bring you to page 2 where you select something, and then go back to page 1. The issue I am having is writing the code so that it will rember what was currently on page 1, and can pass the information from page 2 to page 1.
I am assuming I am going to have to use some sort of state management system to pull this off, but honestly have no clue. RIght now all I use is react native flux for navigation for page to page.. and thought about just passing everything as props.. but that seems clunky
Any help would be awesome!
Well, if your form is simple and you do need to have multiple screens, I see no reason not to use the props injected by react-native-router-flux. But if you are looking for something that can scale a bit better, why not try to put your form data in a temporal object inside your state manager. For the sake of the example, let's say redux. Create a reducer that stores an object with all the form data, and bind your different screens so that they can access it. Then, through actions, update the values when the user inputs something. There might be a few tricky edge cases, such as clearing all data when the form is submitted, what happens if the user cancels the action, etc... Sure, it looks a bit cumbersome to handle data in such a way, but I think it could be a nice solution.
I'm wondering what the best way is to handle a list of items and displaying an item detail when a user clicks/selects one of the items. An example of this would be showing a list of email messages in the left sidebar and showing the message details in the main content area when a user clicks on one of the messages.
Using #pangrantz's great answer on how to mark active menu item using router infrastructure I was able to come up with a working example: jsFiddle
But there are a couple things that don't seem quite right:
First, in #connectOutlets in the Router's show state, I'm setting the selected message on the controller as well as connecting the outlet with the same object. I would think I could do one or the other.
connectOutlets: function(router, context) {
router.set('messagesController.selected', context);
router.get('applicationController').connectOutlet('message-details', 'messageDetails', context);
}
Second, I'm transitioning to the same state from both the index and show states. I'm not even sure I want to be transitioning to a new state - I just want to hook up the outlet.
showDetails: Ember.Route.transitionTo('show')
Is there anything I can change to make this code more idiomatic? Thanks!
This code looks pretty idiomatic to my eyes. You are right, you do not need to set the selected message. When you connect the outlet for message details it will set the selected message as content on the message details controller.
You should IMO be transitioning from a index to a show state as this is good RESTful practice and also allows users to bookmark individual messages. I would make the URL to the index state be '/messages' rather than '/'.