App redirects PUT method (Laravel + VUE3 + inertia) - vuejs3

From Ideas/Show.vue component I am updating the idea entry. Selected approach:
<script>
import { Head, useForm } from '#inertiajs/inertia-vue3';
export default {
props: {
idea: {
type: Object,
required: true,
},
},
data() {
return {
ideaEditForm: useForm({
title: this.idea.title,
description: this.idea.description,
}),
edit: false,
}
},
methods: {
cancelEdit() {
this.edit = false;
this.ideaEditForm.title = this.idea.title;
this.ideaEditForm.description = this.idea.description;
},
updateIdea() {
this.ideaEditForm.put(route('ideas.update', this.idea.id), {
onSuccess: () => {
alertify.success('Success!');
this.ideaEditForm.reset();
},
});
},
},
}
</script>
the controller update method:
public function update(Idea $idea, UpdateIdeaRequest $request) {
$idea->update($request->validated());
return redirect()->back();
}
When I update idea I get error. The ideas/1/8 method is not supported for route PUT. Supported methods: GET, HEAD. Why is it using PUT method? I thought maybe redirect()->back()
has some quirks I am unaware about, but same thing happens with return redirect()->route('ideas.show', [$idea->information_system_id, $idea->id]);

Related

How to pass data into the template in Framework7?

I trying to pass data that is fetched from the server to a popup.I tried doing something like this but its not working.Please help-
{
path:'/merchant/:id',
beforeEnter: function (routeTo, routeFrom, resolve, reject) {
console.log(routeTo.params.id);
Meteor.call('getOne',routeTo.params.id,(error,result) => {
if (result) {
resolve(
{
popup: {
el:document.querySelector('#sample-popup')
}
},
// Custom template context
{
context: {
users: result,
},
}
)
}
});
} ,
},
According to the docs, you use resolve callback wrong !
You can also read this understand how to achieve this

how to detect invalid route and show 404 error in hapi js?

I want to show a 404 view page when user is trying to access the invalid route which is not defined. for example if i am trying to access /myData then it should redirect to /404.
server.js
server.route(routes);
routes.js
module.exports =[
{
path:'/',
method:'GET',
handler:function(request, reply) {
reply.view('index').unstate('token');
}
},
{
path:'/login',
method:'GET',
handler:function(request, reply) {
reply.view('login');
}
},
{
path:'/login',
method:'POST',
handler:handlers.loginHandler,
config: {
state: {
parse: true, // parse and store in request.state
failAction: 'error' // may also be 'ignore' or 'log'
}
}
},
{
path:'/register',
method:'GET',
handler:function(request, reply) {
reply.view('register');
}
}];
You can decide based on the response of the server like this
server.ext({
type: 'onPreResponse',
method(request, reply) {
if (request.response.output.statusCode == 404) {
//serve your page here
}
reply.continue();
},
});

Flowrouter Subscriptions

This is how my flowrouter looks like,
I tried all three options shown below: but unable to subscribe
import {CompanySettings} from '../imports/api/companysettingsMaster.js';
// And imported the api also..
FlowRouter.route('/', {
name: 'home',
subscriptions: function() {
// 1.
return this.register('companySettings', Meteor.subscribe('companySettings'));
// 2.
this.register('CompanySettings', Meteor.subscribe('companySettings'));
// 3.
return Meteor.subscribe('companySettings');
},
action: function() {
var themeSettings = CompanySettings.findOne({
"companyId": 101
});
if (themeSettings) {
console.log(themeSettings);
var scaleProcess = themeSettings.generalSettings.scaleProcess;
if (scaleProcess == 'retail')
BlazeLayout.render("retailMainLayout", {
content: "homepages"
});
else {
BlazeLayout.render("WSEmainLayout", {
content: "homepages"
});
}
} else {
console.log('no themeSettings');
}
}
});
But, not getting document at the end .. Any suggestions.. Thanks in advance
I got the answer for subscription in flowrouter which is as follows:
FlowRouter.route('/', {
waitOn: function () {
return Meteor.subscribe('companySettings');
},
});
Here companySettings is a name of collection in mongodb

Can SimpleSchema express "object with custom keys and specific schema for values"?

I want to make a SimpleSchema for documents with the the following format:
{
...,
permissions: {
foo: {allow: ["user1", "user2"]},
bar: {allow: ["admin"]},
}
}
If foo and bar were well-known strings in the schema, I would just do this:
const PermissionsSchema = new SimpleSchema({
allow: {type: [String]},
});
new SimpleSchema({
...,
'permissions.foo': {
type: PermissionSchema,
},
'permissions.bar': {
type: PermissionSchema,
},
})
However, in this case, there can be arbitrary string keys, not just foo and bar. The values must always match PermissionsSchema. Is there a way to express this?
Custom validators to the rescue!
import { ValidationError } from 'mdg:validation-error';
function permissionsValidator(keyRegEx) {
if (!(keyRegEx instanceof RegExp)) {
throw new Error('must pass a regular expression');
}
return function() {
// https://github.com/aldeed/meteor-simple-schema#custom-validation
const value = this.value;
for (let key in value) {
if (value.hasOwnProperty(key)) {
if (!keyRegEx.test(key)) {
return 'regEx';
}
try {
PermissionSchema.validate(value[key]);
} catch (ex) {
if (ex instanceof ValidationError) {
return ex.error;
}
}
}
}
};
}
new SimpleSchema({
...,
permissions: {
type: Object,
custom: permissionsValidator(/^.*$/),
blackbox: true,
optional: true,
defaultValue: {},
},
});
The error messages that come out are rubbish, though. Improvements or better strategies still welcome.

Meteor + Iron-Router - how do I update my template's data context in response to events the user generates in my template?

So I have a route that sets my template
Router.route('audit', {
path: '/audit/:audit_id/',
template: 'audit',
data: function() {
if (this.ready()) {
audit_obj = Audits.findOne({_id: this.params.audit_id});
lineitems = LineItems.find(JSON.parse(audit.query));
return {
audit_obj: audit_obj,
lineitems: lineitems
}
}
},
waitOn: function () {
return [
Meteor.subscribe('lineitems', this.params.audit_id),
Meteor.subscribe('audits')
]
}
}
Now, when my user takes certain actions on the page rendered by the audit template, I would like to update the audit object and also update the data context that the page is running with. Is this possible?
Something like:
Template.audit.events({
'click .something-button': function() {
// update the data context for the current audit template.
current_context.audit_obj.something = 'new something';
}
});
Yes:
Router.route('audit', {
path: '/audit/:audit_id/',
template: 'audit',
onRun: function() {
Session.set('audit', Audits.findOne(this.params.audit_id));
Session.set('lineitems', LineItems.find(JSON.parse(audit.query)).fetch());
}
data: function() {
if (this.ready()) {
return {
audit_obj: Session.get('audit'),
lineitems: Session.get('lineitems')
}
}
},
waitOn: function () {
return [
Meteor.subscribe('lineitems', this.params.audit_id),
Meteor.subscribe('audits')
]
}
}
and
Template.audit.events({
'click .something-button': function() {
// update the data context for the current audit template.
Session.set('audit', {..});
}
});
But you'll need to decide how to handle changes that come from the server, and may interfere with changes on the front end. So a better approach might be to leave the first part of the code (router) as is:
Router.route('audit', {
path: '/audit/:audit_id/',
template: 'audit',
data: function() {
if (this.ready()) {
return {
audit_obj: Audits.findOne(this.params.audit_id),
lineitems: LineItems.find(JSON.parse(audit.query))
}
}
},
waitOn: function () {
return [
Meteor.subscribe('lineitems', this.params.audit_id),
Meteor.subscribe('audits')
]
}
}
and just change the front end to update the collection:
Template.audit.events({
'click .something-button': function() {
// update the data context for the current audit template.
Audits.update( this.data.audit_obj._id, {..} );
}
});
Of course, that will update the data on the server, too.

Resources