I have a project in progress for managing inventory on a small scale. One of the functionalities I'm working on involves updating the stock quantity when a product is withdrawn. I've encountered an issue while using Axios and the .put() function, as it returns a 405 error message indicating that the action is not allowed. I'm passing the product ID to the backend to identify the specific product whose stock needs to be updated. I would appreciate any guidance on identifying and correcting my mistakes so that I can successfully implement this feature.
Below is the relevant code snippet from Django's views:
class materialWithdraw(APIView):
authentication_classes = [authentication.TokenAuthentication]
permission_classes = [permissions.BasePermission]
def update(self, request, *args, **kwargs):
serializer = WithdrawFormSerializer(data=request.data)
if serializer.is_valid():
material_id = serializer.validated_data['id']
quantity_to_withdraw = serializer.validated_data['quantity']
withdrawn_material = Listing.objects.get(id=material_id)
withdrawn_material.quantity = withdrawn_material.quantity - quantity_to_withdraw
serializer.save(quantity=withdrawn_material.quantity)
return Response(serializer.data)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)This section contains the URLs defined in urls.py:
urlpatterns = [
path('all-materials/', views.allMarketingMaterials.as_view()),
path('all-medical-lines/', views.allMedicalLines.as_view()),
path('gastroenterologia/', views.gastroenterologiaMaterials.as_view()),
path('withdraw/', views.materialWithdraw.as_view()),
]Lastly, here is an excerpt from my Vue.js script:
export default {
name: "Gastroenterologia",
components: {},
data() {
return {
gastroenterologiaMaterials: [],
quantity: 0,
id:'',
}
},
mounted() {
document.title = "Gastroenterologia";
this.getGastroenterologiaMaterials()
},
methods: {
getGastroenterologiaMaterials() {
axios
.get('/api/v1/gastroenterologia/')
.then(response => {
this.gastroenterologiaMaterials = response.data
console.log(this.gastroenterologiaMaterials)
})
.catch(error => {
console.log(error)
})
},
chooseMaterial(index) {
const materialName = document.querySelector('#material-name')
const materialType = document.querySelector('#material-type')
materialName.textContent = this.gastroenterologiaMaterials[index].title
materialType.textContent = this.gastroenterologiaMaterials[index].type
this.id = this.gastroenterologiaMaterials[index].id
},
materialWithdraw() {
console.log(this.title)
const data = {
'quantity': this.quantity,
'id': this.id,
}
axios
.put('/api/v1/withdraw/', data)
.then(response => {
return response
})
.catch(error => {
console.log(error)
})
}
},
}