I see THIS question regarding whether the form I am validating has changed.
However it has nothing to do with Aurelia validation and I would like to validate whether the form has any changes upon clicking the save button. I dont want to do it on the server.
What I have done is to save the values I fetched initially so I can do a comparison.
fetch("/api/Client/editClient/" + parms.id, {
method: "GET",
headers
})
.then(response => response.json())
.then(data => {
this.client.deserialize(data);
this.originalClient === this.client;
})
original client is the unmodified object.
I have created a custom validation function however its not working as intended.
I thought I could use the current value and then compare it to the original value.
ValidationRules.customRule(
'changesExist',
(value, obj, fetchedEntity) =>
fetchedEntity != value,
'No changes detected'
);
When I try and use it I find it erroring:
// Validation Rules.
ValidationRules
.ensure(a: ClientDetails) => a).satisfiesRule('changesExist', this.originalClient);
I am unsure how to make this work. What I want is a validation that compares the orginalClient object with the the one that is to be sent back to the server. This way I can check if there is reason for sending it back can saving it to the database...
It's rather brute force, but this will likely do what you want:
JSON.stringify(fetchedEntity) !== JSON.stringify(value)
The app-contacts sample app does it using an areEqual function. Have a look at the repo and you can see how it's used and how you could adapt it for your purposes.
function areEqual(obj1, obj2) {
return Object.keys(obj1).every((key) => obj2.hasOwnProperty(key) && (obj1[key] === obj2[key]));
};
Related
OK, say I have an initial state in our Redux store that looks like this:
const initialState = {
userReports: [],
activeReport: null,
}
userReports is a list of reports. activeReport is one of those reports (the one that is actively being worked with).
I want the active report to point to one in the array. In other words, if I modify the active report, it would modify one in the userReports array. This means, the two objects must point to the same memory space. That's easy to set up.
The alternative to this approach would be to copy one of the reports that is in the userReports array and set it as the active report (now it has a different memory address). The problem is now, when I edit the activeReport, I also have to search through the array of userReports, find the report that resembles the active report and modify it there too. This feels verbose.
Here is the question:
Would it be bad practice to have the activeReport point to a report in the array (same object). When I want to change the report I could do something like this (example is using redux thunk):
export const updateReport = (report) => async (dispatch, getState) => {
try {
const report = getState().reports.activeReport
// modify the active report here
report.title = "blah blah blah"
dispatch({ type: ACTIONS.UPDATE_REPORT, payload: report })
} catch (error) {
console.log(`ERROR: ${error.message}`)
}
}
And in my reducer:
case ACTIONS.UPDATE_REPORT:
return { ...state, activeReport: action.payload }
as you can see, after updating the report I still return a "new version" of that report and set it as active, but this approach also updates the report in the userReports array because they point to the same memory address.
I would say thats not ideal, do the reports have id's? If they do I would rather hold the userReports in an object with keys being the id's, then active report can just be an id and renamed to activeReportId so you can fetch the activeReport with userReports[activeReportId]
You also asked for reasons:
So firstly any screen that looks at userReports wont rerender because the reports aren't being reassigned.
Secondly if someone later wants to update those screens they will reassign userReports which could cause problems.
Thirdly its an unusual pattern which is a huge no no for redux. The point of redux is that it has a very obvious pattern so when you add things to it you don't have to think and can just make changes with confidence.
Your activeReport should not be pointing to an object in the userReports array, but rather it should be an id of the report, which the user is currently working on. Each of the report in the userReports will have a unique id field to identify the report - this would be helpful when rendering in react - this id field can be used as key.
Then your action creator/dispatcher will look like this:
export const updateReport = (updatedReport) => async (dispatch, getState) => {
dispatch({ type: ACTIONS.UPDATE_REPORT, payload: updatedReport });
}
You will call this on change in your component:
const onTitleChangeHandler = (e) => {
var newTitle = e.target.value;
// you will get the userReports and activeReport from props or by using some redux selector, also you will need to get dispatch and getState from redux
var activeReportObj = userReports.filter((r) => r.id === activeReport)[0];
updateReport({ title: newTitle, ...activeReportObj })(dispatch, getState);
}
Lastly, your reducer will be:
case ACTIONS.UPDATE_REPORT:
var newUserReports = state.userReports.map((r) => {
if (r.id === state.activeReport) {
return action.payload;
}
return r;
});
return { newUserReports, ...state };
I am reading through the documentation in Cypress and I think I have an idea as to what then() does. It works like promises, where a promise returns another promise, but with then(), we are returning a new subject.
If we look at the code example below, we are using then() because we are returning a new variable, which in this case is called target.
Am I understanding this correctly? If not, can someone correct me?
it.only('Marks an incomplete item complete', () => {
//we'll need a route to stub the api call that updates our item
cy.fixture('todos')
.then(todos => {
//target is a single todo, taken from the head of the array. We can use this to define our route
const target = Cypress._.head(todos)
cy.route(
"PUT",
`api/todos/${target.id}`,
//Here we are mergin original item with an object literal
Cypress._.merge(target, {isComplete: true})
)
})
.then is used to receive the results from cy.fixture('todos'). The variable target is not significant in this code.
In your code sample, the variable that is returned from cy.fixture is named todos - the spacing of the code may be throwing you off here? The .then call is attached to the cy.fixture() call
// These 2 code blocks are the same - just different spacing
cy.fixture('todos')
.then(todos => {});
cy.fixture('todos').then(todos => {});
https://docs.cypress.io/api/commands/fixture.html#Usage
cy.fixture('logo.png').then((logo) => {
// load data from logo.png
})
Using .then() allows you to use the yielded subject in a callback function and should be used when you need to manipulate some values or do some actions.
To put it simply, it is used to play around with the yield of the previous command and work around with it in that case. THEN() command is handy and helpful in debugging the yield of the previous command.
const baseURL = "https://jsonplaceholder.typicode.com";
describe("Get Call-Expect+ normal req", () => {
it("GetPostById-Expect", () => {
cy.request(baseURL + "/posts/1").as("GetPostById");
cy.get("#GetPostById").then((response) => {
//response: status
expect(response.status).to.equal(200);
expect(response.status).to.eq(200);
});
});
Refer: https://docs.cypress.io/api/commands/then#Promises
I used 'updateEntry' method of ActiveCartService for updating the entry of the Cart. After then 'updateEntry$' effect from the CartEntryEffects class was triggered that returned new action.
updateEntry$: Observable = this.actions$.pipe(
ofType(CartActions.CART_UPDATE_ENTRY),
map((action: CartActions.CartUpdateEntry) => action.payload),
concatMap(payload =>
this.cartEntryConnector
.update(payload.userId, payload.cartId, payload.entry, payload.qty)
// should be my logic with payload
.pipe(
map(() => {
return new CartActions.CartUpdateEntrySuccess({
userId: payload.userId,
cartId: payload.cartId,
});
}),
Which is the proper way to get this payload?
Or can I override this effect or add my logic to it?
It depends what you are trying to do with the payload.
If you want to process it before the details get updated into Commerce, then that is generally handled by connectors & adapters. See https://sap.github.io/spartacus-docs/connecting-to-other-systems/
If you want to reference the updated entry & display it, then you can get hold of an Observable via the ActiveCartService. See for example the AddToCart component (https://sap.github.io/spartacus/components/AddToCartComponent.html#source) which declares cartEntry$: Observable<OrderEntry> and then in ngOnInit() does this.cartEntry$ = this.activeCartService.getEntry(this.productCode)
I created some example code underneath to show what I mean.
Is it okay to update some data after saving inside of a post route? I often update and save data in a single route, and I never know if it is okay to do this and if there are any consequences of the code that I am unaware of.
router.post('/sync-steam', auth, async(req, res) => {
const { steamID, steamName } = req.body
try {
await req.user.save( steamID )
await req.user.updateOne( steamName )
res.send("OK")
} catch(err) {
res.status(400).send(err)
}
})
Yes, it is OK to do that. There should not be any issues regarding that as long as your logic that communicates with your database is correct.
However, you should try to follow the convention of REST API, and use the correct method:
GET for listing/reading content
POST for creating content
PUT for replacing content
PATCH for updating part of the content
DELETE for deleting content
I've got some form data that I display using a readonly input that is styled to look like plain text. When users click an edit button, they can then edit the inputs and either save or cancel.
My issue is obviously that when a user clicks cancel, the data they entered into the input remains (even though it isn't saved to the DB). I'm trying to figure out a way to reset the input to its initial data. I'm aware of this answer, but it doesn't seem to work because the data is fetched on creation.
This fiddle is similar except for the fact that the data in the real app comes from an axios call. The equivalent call is essentially:
fetch() {
axios.get(this.endpoint)
.then(({data}) => {
this.name = data.data;
});
}
Annoyingly, the fiddle actually works. However in my actual implementation it doesn't. The only difference with the app is that the data is an array.
How can I make this work?
This fiddle represents what my code actually does.
In the code:
data: () => ({
endpoint: 'https://reqres.in/api/users',
users: [],
initialData: []
}),
//...
edit: function(index) {
this.users[index].disabled = false
this.initialData = this.users
},
reset: function(index) {
this.users[index].disabled = true
this.users = this.initialData
}
Since users and initialData are arrays, you must use index when you access them.
So, at first sight, the change would be from:
this.initialData = this.users
To
this.initialData[index] = this.users[index]
But this won't work. Since this.users[index] is an object, whenever you change it, it will change what this.initialData[index] holds, since they are both just pointing to the same object. Another problem is that when you set it like that, the initialData won't be reactive, so you must use Vue.set().
Another thing, since you just want to reset the first_name property (the one you use at <input v-model="user.first_name" >), you should then assign user[].first_name to initialData[index].
Considering those changes to edit(), in the reset() method, the addition of [index] and of the .first_name field are enough. Final code:
edit: function(index) {
this.users[index].disabled = false
Vue.set(this.initialData, index, this.users[index].first_name);
},
reset: function(index) {
this.users[index].disabled = true
this.users[index].first_name = this.initialData[index]
}
JSFiddle: https://jsfiddle.net/acdcjunior/z60etaqf/28/
Note: If you want to back up the whole user (not just first_name) you will have to clone it. An change the order of the disabled property:
edit: function(index) {
Vue.set(this.initialData, index, {...this.users[index]});
this.users[index].disabled = false
},
reset: function(index) {
Vue.set(this.users, index, this.initialData[index]);
}
JSFiddle here. In the example above the clone is created using the spread syntax.
Input is immediately updating the model. If you want to do something like edit and save you have to take a copy and edit that. I use lodash clone to copy objects then update the fields back when save is clicked. (of course sending message to server.)