Perform patch operation on the data - vue.js

Suppose I have
student: {
id: 'asdj2334',
name: 'asdcjn',
}
How do I send patch request/method after updating name of the object. suppose axios.patch()
Update1: I did the same as said below and I am getting success but it is not being updated on serve.
patchMedication (medication) {
/* eslint-disable */
console.log(medication)
return API.patch('/medicationRegisters/' + medication.id, {medication})
.then(response => {
return response.data
})
},
on console I get :
And after success it is not updated

You could use put request in your axios. see code below
axios.put('api endpoint'+this.student.id, this.student).then(({data}) => {
... success
})

Related

How Do I Update A Database Column In Shopware Via The Administration

I have created an administration page in the Administration and I want to update information in the database when the page is loaded (in Vue js term CREATED). My code below does not do anything and I can not find any error. Help fix my code and how do I get errors from Shopware Administration.
const { Component, Mixin } = Shopware;
import template from './store-settings-page.html.twig'
Component.register('store-settings-page', {
template,
inject: [
'repositoryFactory'
],
metaInfo() {
return {
title: this.$createTitle()
};
},
data: function () {
return {
entity: undefined,
entityId: '4e2891496c4e4587a3a7efe587fc8c80',
}
},
computed: {
storeKeysRepository() {
return this.repositoryFactory.create('store_keys');
},
},
created() {
this.storeKeysRepository
.get(this.entityId, Shopware.Context.api)
.then(entity => {
this.entity = entity;
});
/* const repository = this.storeKeysRepository();
this.entity = repository.create(Shopware.Context.api);
this.entity.name = 'Diekedie';
repository.save(this.entity, Shopware.Context.api);
*/
// a function which is called over the ui
this.entity.name = 'updated';
// sends the request immediately
this.storeKeysRepository
.save(this.entity, Shopware.Context.api)
.then(() => {
// the entity is stateless, the data has be fetched from the server, if required
this.storeKeysRepository
.get(this.entityId, Shopware.Context.api)
.then(entity => {
this.entity = entity;
});
});
},
});
Looks like you're not awaiting the fetch request meaning your entity would still be undefined when it reaches the save call on the repository.
You should move the save call inside the chained method of the first request. Also unless you have some fields which are indexed or computed server side, you might not need to refetch the entity after the successful save call.
this.storeKeysRepository.get(this.entityId, Shopware.Context.api).then((entity) => {
this.entity = entity;
this.entity.name = 'updated';
this.storeKeysRepository.save(this.entity, Shopware.Context.api);
});

React Native redux-saga - How to achieve yield all when getting a response and saving a separate record

Currently I have a piece of code that request an api call and then base from the response:
OK
Error
I will have to create another pending record this is due to intermittent connection issue so i have to deal with an event that happened and store it and use it later.
const response = yield call(api.login, credentials)
yield all(
response.matchWith({
Ok: ({ value }) => {
put(Actions.pendingRecord(null))
return put(Actions.apiSuccess(value))
},
Error: ({ value }) => {
const pendingRecord = {
value: true,
data: {
event: "queue"
}
}
put(Actions.pendingRecord(pendingRecord))
return put(Actions.apiFailure(value))
}
})
)
is it possible to have multiple put actions when calling yield all ?
I'm referring to this:
put(Actions.pendingRecord(null))
return put(Actions.apiSuccess(value))
With https://www.npmjs.com/package/redux-batched-actions you can do it like that:
return put(batchActions([
Actions.pendingRecord(null),
Actions.apiSuccess(value)
]);

RxJS retry and then catchError not working

I have an observable:
public updateThingName(name: string, thingId: number): Observable<any> {
console.log('attempting rename');
return this.http
.put(
`${this.thingApi}/projects/${thingId}`,
{ name },
this.options,
).pipe(
map(response => response.data.id)
);
}
called as part of a longer chain:
return this.projectService.getProject(id).pipe(
switchMap(prevProjectData => {
return this.projectService.updateProject(id, data).pipe(
map(newProjectData => ({prevProjectData, newProjectData}))
)
}),
switchMap(({prevProjectData, newProjectData}) => {
return this.thingService.updateThingName(newProjectData.title, newProjectData.thingId)
.pipe(retry(5),catchError(err => {
return this.projectService.revertProjectUpdate(err, prevProjectData);
}))
}),
tap(() => { ... save to logs only when successful ... })
);
I want to try to rename something, if it fails retry 5 times, if it still fails then catch the error, revert the earlier changes and throw the final error in the revert function. The reverting and sending the error response back to the front end works fine but no matter where I put the retry(5) I only ever see the initial console.log('attempting rename'); in the logs.
Am I miss using the retry? How do I get this to work?
This is backend code on NestJS so I don't handle the final subscribe aspects directly if that makes a difference.
Thanks!
That should be correct. The methodos called once but it tries to resubscribe multiple times. You should be able to see it if you log a message on every subscribe:
public updateThingName(name: string, thingId: number): Observable<any> {
return defer(() => {
console.log('attempting rename');
return this.http
.put(
`${this.thingApi}/projects/${thingId}`,
{ name },
this.options,
).pipe(
map(response => response.data.id)
);
)};
}

Can't assign correct data to model through event emit

everyone. I'm working on a project and I'm stuck on a particular point. On the backend side, I'm using Laravel 5.6 and MySQL. I make a request that returns a simple JSON like this:
{
id: 1,
name: "someone",
salary_min: 2600.5,
salary_max: 3512.35
}
And I fecth this result in the frontend using Vue + axios like any other GET request and assign to a list of employees.
this.axios.get(process.env.ROOT_API + 'employee/${id}', auth)
.then(response => {
if (response.data) {
this.employee = response.data;
}
}, (error) => {
console.log(error.response.data);
});
I'm passing this data to another child component througn a method defined like so:
onEdit (id) {
// Send data received from axios and stored in 'emmployee'
bus.$emit('editEmployee', this.employee);
}
Inside the child component, I'm listening to the event like this:
mounted () {
bus.$on('editEmployee', (data) => {
console.log(data);
this.newEmployee = data;
console.log(this.newEmployee);
}
}
The result of log is as following:
// data from parent component
{ id: 1, name: "someone", salary_min: 2600.5, salary_max: 3512.35 }
// newEmployee model
{ id: 1, name: "someone", salary_min: "0.00", salary_max: "0.00" }
Somehow, during assignment, the decimal values are being zeroed and converted to string. I can't understand what's happening. Any clue?

How Can I pass params with an API client to vue-head?

I am passing params from my API to vue-head but every time I do that it send me undefined in the head this is the code:
export default {
data: () => ({
errors: [],
programs: [],
}),
methods: {
getProgram() {
this.api.http.get(`videos/program/${this.programSlug}`)
.then(response => {
this.programs = response.data
})
.catch(error => {
this.errors = error
});
}
},
head: {
title: function() {
return {
inner: this.programs.name,
separator: '|',
complement: 'Canal 10'
};
}
}
}
any idea what I am doing wrong with my code??
First verify you are fetching the information correctly. Use console log and go to network tab and verify you are fetching the data correct, you might have to comment out vue-head. But what I think is that the problem might be due to vue-head rendering before the api call finishes then no data is being passed.
If you are using vue-router this can be easily solved with beforeRouteEnter() hook. But if not! apparently vue-head has an event that you can emit to update the component after render.
I haven't tried this but it should work. you can add the function below to your methods and call it after the promise is resolved i.e in the then closure.
methods: {
getProgram() {
this.api.http.get(`videos/program/${this.programSlug}`)
.then(response => {
this.programs = response.data
this.$emit('updateHead')
})
.catch(error => {
this.errors = error
});
}
}