MattB

MattB

Member Since 1 Year Ago

Experience Points
6,080
Total
Experience

3,920 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
2
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 2
6,080 XP
Aug
10
2 days ago
Activity icon

Started a new Conversation Vuejs Router Params Not Working

I'm using Vue router within laravel and trying to get access to params in it. I have the following code and route which works:

Laravel Route:

Route::get('/{any?}', '[email protected]')->where('any', '.*');

Vuejs router route:

const routes = [
  {
    path: '/question/:question',
    component: Questions,    
  }
];

Code:

console.log(this.$route.params.question);

This will dump out whatever number is at the end of the URL such as http://website.test/question/1

However, when I try to use the following route, it changes to dump out undefined as a console log value:

Route::get('/questions/{any?}', '[email protected]')->where('any', '.*');

This routes to http://website.test/questions/question/1. I'm expecting 1 in console log, not undefined which I do get.

Aug
05
1 week ago
Activity icon

Replied to How Do Dynamically Create Routes?

I mean I have this so far:

<router-view
            v-for="(section, index) in sections"
            :key="index"
            :index=index 
            :header="section.name" 
            :questions="section.question" 
            v-on:sectionScore="sectionScoreChange"
            :colour="colours[index % colours.length]"
            ></router-view>

But how do I use the ID in the address bar to show only one component at a time? Right now, it repeats the router view for as many times as there are objects

Activity icon

Started a new Conversation How Do Dynamically Create Routes?

I had a component which was called in a for loop like so:

<AppQuestionComponent
            v-for="(section, index) in sections"
            :key="index"
            :index=index 
            :header="section.name" 
            :questions="section.question" 
            v-on:sectionScore="sectionScoreChange"
            :colour="colours[index % colours.length]"
            ></AppQuestionComponent> 

As expected, it would show all the components on one page with the relevant info from the json object passed to it through Axios. My question is:

Is there a way to replace the component up there with vue router and dynamically create a page for every object in the json object with the relevant info in it?

I know that my route would look something like this but how would I react in the component it calls to get the relevant object from the json object for the page:

const routes = [
  {
    path: '/question/:questionNumber',
    name: 'question',
    component: Question,    
  }
];

Sorry if that doesn't make much sense. I have the idea in my head but not sure how to word it

Jul
31
1 week ago
Activity icon

Started a new Conversation Query Params In Vuejs

I'm confused about how to implement query params and how to react to them. I want to set up a vuejs route like this:

{
    path: '/home/video/usertype?=usertypehere',
    name: 'videochat',
    component: VideoChat
  }, 

and then when the page is loaded, grab the user type in the view and make changes to it based on the URL. I have 2 questions I need help with please:

A: Is this the right way to set up the URL B: How would I grab that query param and use it in the Vue component?

Jul
30
1 week ago
Activity icon

Replied to How To Pass Props From Blade To Event Bus In Vuejs

Or failing that if it can't be done, how best do I pass the props from the home component called in the blade to vue router please?

Activity icon

Started a new Conversation How To Pass Props From Blade To Event Bus In Vuejs

Hi, how would I pass props created in a Laravel blade to the event bus in vuejs? To clarify here is where the blade initially calls the vue component:

<div id="app">
    <home-component
    @if(auth()->check())
        :loggedinuser={{ auth()->user()->id }}
        pusherkey={{ Config::get('broadcasting.connections.pusher.key') }}
        pushercluster={{ Config::get('broadcasting.connections.pusher.options.cluster') }}
    @endif
    />
</div>

Here is the home component where I will ultimately be putting the vue router, in place of the video-chat component I have now, which will need the props (I am planning to call them from the bus):

<template>
    <div>
        <top-navbar />
        <div class="row pl-3">
            <div class="col-10 videoWindow px-0">
                <div class="video">                   
                    <video-chat
                    :pusherkey="pusherkey"
                    :pushercluster="pushercluster"
                    :loggedinuser="loggedinuser"
                    ></video-chat>
                </div>
            </div>            
            <sidebar />            
        </div>
    </div>
</template>
<script>
import CoachNavbar from '../Navbars/CoachNavbar.vue'
import TopNavbar from '../Navbars/TopNavbar.vue'
import VideoChat from '../components/coach/VideoChatCarer.vue'
import sidebar from '../Navbars/CoachNavbar.vue'
export default {
    props: ['loggedinuser', 'pusherkey', 'pushercluster'],
    components: {
        'coach-navbar': CoachNavbar,
        'top-navbar' : TopNavbar,
        'video-chat': VideoChat,
        'sidebar': sidebar
    }, 
    data() {
        return {           
          
        }
    }
}
</script>

How can I emit the props to the bus if I'm not actively calling a method please?

Jul
29
2 weeks ago
Activity icon

Replied to How Do I Pass Logged In Status To Vuejs Please?

Sorry I don't follow this one. $user = auth()->user() will return null, so that ternary will always return as false. What I really want is to be able to get the id of the logged-in user

Activity icon

Started a new Conversation How Do I Pass Logged In Status To Vuejs Please?

I'm trying to get the user ID of the logged-in user. I'm checking to see initially if any user IS logged in but the DD in the below code in the controller returns false:

public function index()
    {        
        $user = auth()->check();
        dd($user);
        $others = \App\User::where('id', '!=', $user->id)->select('name', 'id')->get();
        return response()->json([
            'user' => $user,
            'others' => $others
        ]);
    }

How do I pass the logged-in status to the API controller, please? Here is the API route I'm using:

Route::group(['auth:api'], function(){
    Route::apiResource('videochat', 'API\VideoChatController');
});

Where did I go wrong?

Activity icon

Started a new Conversation Conditional Routing In VueJs

Is it possible to have 1 routing file in Vue which handles conditional routing as per the below pseudocode?

if ( loggedInUser == userTypeA) {
	All routing Logic for userTypeA goes here
} else if ( loggedInUser == userTypeB) {
	All routing Logic for userTypeB goes here
}
Jul
20
3 weeks ago
Activity icon

Started a new Conversation How Do I Pass Prop To Style Object In Vue Js

I'm trying to use an object to control the style of certain parts of an app as I'm trying to avoid inline styling. What how do I use Colour from props in the styling object below please?

 data: () => ({   
         props: ['header', 'questions', 'index', 'colour'],
         sectionScore: [],  
         styling: {
             borderLeft: '10px solid ${this.colour}'
         }         
     }),

I'm using the object in the main body with :style="styling".

Jul
17
3 weeks ago
Activity icon

Replied to CSS Animations On Components In V-For

Please does anyone know?

Activity icon

Started a new Conversation CSS Animations On Components In V-For

I am new to adding animations with vue and I've become a bit unstuck. Here is my code rendering a list of components, one below the other. I want a button to appear beneath each one which when clicked will slide out one component and slide in the next. Currently, there is no button or component rendered and no errors. I don't know where I went wrong:

<div class="row justify-content-center">            
            <transition-group
            name="custom-classes-transition"
            enter-active-class="animated bounceOutRight"
            leave-active-class="animated bounceOutRight">
                <div v-if="show">
                    <AppQuestionComponent
                    v-for="(section, index) in sections"
                    :key="section.id"
                    :index=index 
                    :header="section.name" 
                    :questions="section.question" 
                    v-on:sectionScore="sectionScoreChange"
                    ></AppQuestionComponent>      
                    <button class="btn btn-primary" v-on:click="show = !show">Next</button> 
                </div>  
            </transition-group>    
        </div> 

Any help would be so appreciated, thank you.

Jul
07
1 month ago
Activity icon

Started a new Conversation Pass Data To Modal For Editing

Ok so as per the title, I want to be able to click an edit button and have a modal pop up with details of the record I wish to edit. I know I've probably made a fundamental silly mistake somewhere, but I just can't get my head around the logic. Here's my table:

<tbody>
                @foreach ($allQuestions as $question)
                    <tr>
                        <td>{{ $question->sections->name}}</td>
                        <td>{{ $question->question}}</td>
                        <td>
                            <form-group>
                                <a href="{{ route('admin.edit', $question->id) }}" class="btn btn-primary md-trigger text-white" data-modal="edit-question">Edit</a>
                                <button class="btn btn-danger">Delete</button>
                            </form-group>
                        </td>
                    </tr>     
                @endforeach           
            </tbody>

I'm trying to launch a modal which I am including in the same blade as the above table by using @includes

<div class="modal-container colored-header colored-header-primary custom-width modal-effect-9" id="edit-question">
    @include('includes.modals.editQuestionModal')
  </div>

Now the issue becomes passing the id from the table into it. Tried using the above route to send the id to the controller to then query the db, but now when you click the button, the modal loads, then a second or two after, we get redirected to a 404 page (probably expected tbh but don't know a way around it)

routes:

Route::resource('/admin/', 'AdminController', ['names'=>[
    'index'=>'admin.index',
    'create'=>'admin.create',
    'store'=>'admin.store',
    'edit'=>'admin.edit',
    ]]);

Can you please help me with what is probably a fundamental error?

Jul
01
1 month ago
Activity icon

Replied to How To Input Into Array As Numbers

What have I done wrong?

Activity icon

Started a new Conversation How To Input Into Array As Numbers

I have a series of radio button inputs, each with a value assigned as a number, for example:

<td class="text-center" style="vertical-align: middle;">
                            <input type="radio" @change="onChange($event, index)" :name="question.name" value=1>                                
                        </td>                           
                        <td class="text-center" style="vertical-align: middle;">
                            <input type="radio" @change="onChange($event, index)" :name="question.name" value=2>
                        </td>
                        <td class="text-center" style="vertical-align: middle;">
                            <input type="radio" @change="onChange($event, index)" :name="question.name" value=3>
                        </td>
                        <td class="text-center" style="vertical-align: middle;">
                            <input type="radio" @change="onChange($event, index)" :name="question.name" value=4>
                        </td>
                        <td class="text-center" style="vertical-align: middle;">
                            <input type="radio" @change="onChange($event, index)" :name="question.name" value=5>
                        </td>

However, when they get entered into an array, they are input as strings and as such, I cannot do anything with the numbers such as add them up. How do I convert them to numbers (or am I doing this all wrong?)

questions: [
                {text: 'I have a short-term and /or a medium-term career vision and I understand what I need to achieve it', name: 'Q1.1'},
                {text: 'I have a long-term career vision and I understand what I need to achieve it', name: 'Q1.2'},
                {text: 'I can articulate my career vision in a succinct and compelling manner', name: 'Q1.3'},
                {text: 'I talk about my career vision to my manager /colleagues/ team/ network (and or anyone that will listen!!)', name: 'Q1.4'},
                {text: 'My career vision supports /fits into how I wish to live my life', name: 'Q1.5'}
                ],
            totalScores: [0, 0, 0, 0, 0],
                  
        }),
       methods: {
            onChange(event,index) {
              let data = event.target.value;              
              Vue.set(this.totalScores, index, data);             
          }
        },
        computed: {
            sumOfArray: function () {
                return this.totalScores.reduce(function(acc, val) { return acc + val; }, 0);
            }
        }
Jun
05
2 months ago
Activity icon

Replied to Password Reset Link Help

Sorry, here's my email that gets sent out, where would I edit the template here please?

<?php

namespace Illuminate\Auth\Notifications;

use Illuminate\Notifications\Messages\MailMessage;
use Illuminate\Notifications\Notification;
use Illuminate\Support\Facades\Lang;

class ResetPassword extends Notification
{
    /**
     * The password reset token.
     *
     * @var string
     */
    public $token;

    /**
     * The callback that should be used to build the mail message.
     *
     * @var \Closure|null
     */
    public static $toMailCallback;

    /**
     * Create a notification instance.
     *
     * @param  string  $token
     * @return void
     */
    public function __construct($token)
    {
        $this->token = $token;
    }

    /**
     * Get the notification's channels.
     *
     * @param  mixed  $notifiable
     * @return array|string
     */
    public function via($notifiable)
    {
        return ['mail'];
    }

    /**
     * Build the mail representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return \Illuminate\Notifications\Messages\MailMessage
     */
    public function toMail($notifiable)
    {
        if (static::$toMailCallback) {
            return call_user_func(static::$toMailCallback, $notifiable, $this->token);
        }

        return (new MailMessage)
            ->subject(Lang::get('Reset Password Notification'))
            ->line(Lang::get('You are receiving this email because we received a password reset request for your account.'))
            ->action(Lang::get('Reset Password'), url(route('password.reset', ['token' => $this->token, 'email' => $notifiable->getEmailForPasswordReset()], false)))
            ->line(Lang::get('This password reset link will expire in :count minutes.', ['count' => config('auth.passwords.'.config('auth.defaults.passwords').'.expire')]))
            ->line(Lang::get('If you did not request a password reset, no further action is required.'));
    }

    /**
     * Set a callback that should be used when building the notification mail message.
     *
     * @param  \Closure  $callback
     * @return void
     */
    public static function toMailUsing($callback)
    {
        static::$toMailCallback = $callback;
    }
}
Activity icon

Started a new Conversation Password Reset Link Help

I have a form set up to do a password reset. It will gather the email address and send the reset email fine, but when you click the button on the email to reset the password, you just get sent back to the Enter Email form again. I've not touched the controllers that come with the auth scaffold but here are my routes:

Route::get('password/reset', 'Auth\[email protected]');
Route::post('password/email', 'Auth\[email protected]')->name('password.email');
Route::get('password/reset/{token}', 'Auth\[email protected]');
Route::post('password/reset', 'Auth\[email protected]')->name('password.reset');

The link in the email is:

http://URL.test/password/reset?token=2f1d18cf091cd96b6a0f0e9ac1f3a4f44dd0f1c7f427728f788fe2fcf12b8ed8&amp;email=emailaddress here"
Jun
02
2 months ago
Activity icon

Replied to Laravel Notify Not Sending Mails

Yeah it is an instance of user which is already using that trait. Sorry, should have said

Activity icon

Started a new Conversation Laravel Notify Not Sending Mails

I have Laravel set up to use notify, but even though it's saving the messages to the db, it doesn't send the email to the users. I don't get any error messages in the console, and I'm using mailtrap as a test.

Controller code:

$message = Setting::get('welcome_practice_text');

$practice->notify(new WelcomeUser($practice, $message));

Model:

<?php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;
use App\User;
use App\Settings;

class WelcomeUser extends Notification
{
    use Queueable;

    public $user;
    public $message;

    /**
     * Create a new notification instance.
     *
     * @return void
     */
    public function __construct(User $user, $message)
    {
        $this->user = $user;
        $this->message = $message;
    }

    /**
     * Get the notification's delivery channels.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function via($notifiable)
    {
        return ['mail', 'database'];
    }

    /**
     * Get the mail representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return \Illuminate\Notifications\Messages\MailMessage
     */
    public function toMail($notifiable)
    {
        return (new MailMessage)->subject('Welcome User')
                                ->markdown('emails.welcome', ['user' => $this->user, 'message' => $this->message]);
    }

    /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function toArray($notifiable)
    {
        return [
            'content' => 'Welcome ' . $this->user->name . '!',
        ];
    }
}

Doesn't show any messages at all in mailtrap, so I have no idea what's going wrong. Doesn't seem to send when I don't use a markdown either

May
06
3 months ago
Activity icon

Started a new Conversation Checkbox Query For Pivot Tables

So...I have a confusing issue I can't get my head around... I have 3 tables; news, categories, and categories_news. The pivot table is working as intended, but I have an edit page for news articles which I have a series of check-boxes pulled from the categories table. How can I enable the check-boxes to be checked if the article has those categories? (I hope that made sense).

form from blade:

<div class="col-6">
            <label for="categories">
              <strong>Choose one or more categories:</strong>
            </label>
            <div class="form-group {{$errors->has('category_id') ? 'has-error' : ''}}" id="categories">   
              @foreach($categories as $category) 
              {!! Form::label('category_id[]', $category->name) !!}
              {!! Form::checkbox('category_id[]', $category->id) !!}  
              @endforeach                          
             
              @if($errors->has('category_id'))
                {{$errors->first('category_id')}}
              @endif
            </div>

edit controller:

$storySearch = News::findOrFail($id);
        $categories = categories::all();
        $newsFlashes = Newsflashes::pluck('date', 'id')->all();       
        return view('admin.stories.edit', compact('storySearch', 'categories', 'newsFlashes'));

category modal:

public function news() {
        return $this->belongsToMany(News::class);
    }

News modal:

public function categories() 
    {
        return $this->belongsToMany(categories::class);
    }

Would really appreciate your help on this one please

May
05
3 months ago
Activity icon

Replied to DateTime::__construct(): Failed To Parse Time String (02-2020) At Position 0 (0): Unexpected Character

Sadly no. I'm storing the date as a string in the db, not a date format. Is that the issue here? I'm converting it with

protected $dates = ['date'];

Have I done something wrong there?

Activity icon

Replied to DateTime::__construct(): Failed To Parse Time String (02-2020) At Position 0 (0): Unexpected Character

Sorry, no joy. Seems like the problem might be in the model with this possibly?:

protected $dates = ['date'];
Activity icon

Started a new Conversation DateTime::__construct(): Failed To Parse Time String (02-2020) At Position 0 (0): Unexpected Character

I'm storing just a month and year in my db which stores it as a string such as this for example:

02-2020

I'm trying to turn it into a month and date using carbon so hopefully it looks like this:

February 2020

I'm using this line of code to do it:

{{ $newsflash->date->createFromFormat('MM YYYY') }}

But get error

DateTime::__construct(): Failed to parse time string (02-2020) at position 0 (0): Unexpected character

I'm not sure what's happening, or what the character is I'm messing up with. Any help would be massively appreciated. I do have the following in my model which allows it to be manipulated:

protected $dates = ['date'];
May
04
3 months ago
Activity icon

Replied to Datepicker Not Accepting Config Options In Laravel

because ones the js file and the other is a css file. Should I just include one, or both?

Activity icon

Replied to Datepicker Not Accepting Config Options In Laravel

I have it in this order:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
        <script src="{{ asset('js/app.js') }}" defer></script>
Activity icon

Replied to Datepicker Not Accepting Config Options In Laravel

all I get is this error:

Uncaught TypeError: $(...).datepicker is not a function
    at Object../resources/js/app.js (app.js:37331)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:37414)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87
Activity icon

Replied to Datepicker Not Accepting Config Options In Laravel

Now the date picker doesn't appear at all

Activity icon

Replied to Datepicker Not Accepting Config Options In Laravel

No joy, still the same sadly

Activity icon

Started a new Conversation Datepicker Not Accepting Config Options In Laravel

So, I have the datepicker references by cdn in the header of my blade thusly:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

and in my app.js file, I have

$('.datepicker').datepicker({
  format: "mm-yyyy",
  startView: "month", 
  minViewMode: "months",
  autoclose: true  
  });

but when I use the following, it doesn't autoclose and it doesn't show just the month and year as it should. What have I potentially done wrong?

<div class="input-group date" data-provide="datepicker" id="datepicker">
                <input type="text" class="form-control">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                </div>
              </div>
Apr
30
3 months ago
Activity icon

Replied to Cannot Send To Store Method From Controller

OH you're right. Thank you, I was blind to that :/

Activity icon

Replied to Cannot Send To Store Method From Controller

As plain html it looks like this:

<form method="POST" action="http://URL.test/admin/newsflashes" accept-charset="UTF-8"><input name="_token" type="hidden" value="key goes here"> 
              <div class="form-group ">
                <label for="date">News Flash Date:</label>
                <input class="form-control" name="date" type="text" id="date">
                              </div>
              <br>
              <div class="form-group">
                <input class="btn btn-primary" type="submit" value="Add News Flash">
              </div>
              </form>

But I find it odd it works outside the modal

Activity icon

Started a new Conversation Cannot Send To Store Method From Controller

I have a form inside a modal which isn't talking to the store method of the controller it's sent to. When I move the form outside of the modal to the page that calls the modal, it works fine and I can post to the store method. Can't see what the issue is here. It doesn't matter if I use a custom request or the basic one for validation:

Form Modal:

<div class="modal-body">
        <form>
          <div class="row">
            <div class="col-12">
              {!! Form::open(['method' =>'POST', 'action'=> '[email protected]']) !!} 
              <div class="form-group {{$errors->has('date') ? 'has-error' : ''}}">
                {!! Form::label('date', 'News Flash Date:') !!}
                {!! Form::text('date', null, ['class'=>'form-control'])!!}
                @if($errors->has('date'))
                  {{$errors->first('date')}}
                @endif
              </div>
              <br>
              <div class="form-group">
                {!! Form::submit('Add News Flash', ['class'=>'btn btn-primary']) !!}
              </div>
              {!! Form::close() !!}
            </div>            
          </div>         
        </form>
      </div>

Store Method:

public function store(NewsFlashRequest $request)
    {
        dd($request);
        $newsFlash = new Newsflashes();          
          $newsFlash->date = $request->date;
          $newsFlash->published = 0;          
          $newsFlash->number_of_stories = 0;          
          $newsFlash->save();
          return redirect()->route('admin.newsflash.index');
    }

Route:

Route::resource('/admin/newsflashes', 'AdminNewsFlashController', [
  'names'=>[
  'index'=>'admin.newsflashes.index',
  'create'=>'admin.newsflashes.create',
  'store'=>'admin.newsflashes.store',
  'edit'=>'admin.newsflashes.edit',
  'show'=>'admin.newsflashes.show',
  'destroy'=>'admin.newsflashes.destroy',
  ]]);

From the route list:

 POST      | admin/newsflashes                  | admin.newsflashes.store       | App\Http\Controllers\[email protected]                    | web
Apr
14
3 months ago
Activity icon

Replied to How Do I Pass 2 Arguments To A Getter In Vuex?

Anyone please know what I'm doing wrong?

Activity icon

Replied to How Do I Pass 2 Arguments To A Getter In Vuex?

With this I get the error:

ReferenceError: color1 is not defined
Apr
09
4 months ago
Activity icon

Started a new Conversation How Do I Pass 2 Arguments To A Getter In Vuex?

So, not sure if this is the correct way of going about this but I am trying to create a getter which returns a gradient based off of 2 colors passed to it via a function. So far I have:

Function being called

  <v-card-text
                          style="height: 120px"
                          :style="{
                              'background-image': backgroundImage(
                                  card.color1,
                                  card.color2,
                              ),
                          }"
                          flat
                                ></v-card-text>

computed:

backgroundImage() {
            return this.backgroundImage(color1, color2)
        },

getter:

getters: {
        backgroundImage: () => (color1, color2) =>{
            let bgImage =
                'linear-gradient(to top right, ' + color1 + ',' + color2 + ')';
            return bgImage;
        }
        
    }

But when I run it now, I get this error

Error in render: "RangeError: Maximum call stack size exceeded"

Not sure what I did wrong or if this is the correct way to handle this sort of function in Vuex?

Apr
08
4 months ago
Activity icon

Replied to How Vuex Works With Axios

So..sorry how would that look in the code I have so far?

Activity icon

Started a new Conversation How Vuex Works With Axios

Trying to get my head around VueX but struggling to get Axios to work with it. I have the following in my store.js file:

state: {
        cards: [],
        currentPage: 1,
        lastPage: 2,
    },
    actions: {
        loadGradients(pageNumber) {
            if (axios == null) {
                return;
            }
            axios
                .get('/api/gradients?page=' + pageNumber +'&sort=' + 'created_at')
                .then(res => {
                    if (res.status === 200) {
                        state.cards = res.data.gradients.data;
                        state.lastPage = res.data.gradients.last_page;
                        state.currentPage = res.data.gradients.current_page;
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
    }

I'm calling it through the following function in my main app.js file:

created() {
        this.loadGradients(1);
    },
methods: {
loadGradients:function(pageNumber) {
            this.$store.dispatch('loadGradients') ;
        }
}

But when I run the page, the array in the store.js file isn't being updated it seems, even though the data is being returned correctly from the database. Not sure what I did wrong? If I have to use a combination of actions and mutation, how would I go about that please?

Apr
02
4 months ago
Activity icon

Started a new Conversation Cols Not Working As Expected In Vue

So I'm running Vuejs with Vuetify and with the below code, when there's more than 2 rows worth of data returned to the view it will show them sized as they should be. However when there's an incomplete row's worth of data, each col is shrunk down to be smaller than expected. I can't see why this is happening:

<v-row align="center" justify="center">
            <v-col cols md="11" class="pt-5">
                <v-card class="cardColor d-inline-block mx-auto">
                    <v-card-title class="text-right py-0">
                        <v-row>
                            <v-col cols="5" class="pb-0">
                                <v-select
                                    v-model="sortSelection"
                                    :items="sortBy"
                                    label="Sort By"
                                    class="py-0"
                                    @change="changeOrder"
                                ></v-select>
                            </v-col>
                        </v-row>
                    </v-card-title>
                    <v-card-text>
                        <v-row>
                            <v-card
                                v-for="card in orderedCards"
                                :key="card.id"
                                class="col-3 col-md-3 col-lg-3 pa-0 card"
                                flat
                            >
                                <v-card-text
                                    style="height: 120px"
                                    :style="{
                                        'background-image': backgroundImage(
                                            card.color1,
                                            card.color2,
                                        ),
                                    }"
                                    flat
                                ></v-card-text>
                                <v-row>
                                    <v-col cols="8">
                                        <div class="px-2">
                                            <span>
                                                {{ card.name }}
                                            </span>
                                            <br />
                                            <span>
                                                {{ card.color1 }} &#8594;
                                                {{ card.color2 }}
                                            </span>
                                        </div>
                                    </v-col>
                                    <!-- edit and delete cards -->
                                    <v-col cols="4">
                                        <div>
                                            <v-icon
                                                small
                                                class="mr-2"
                                                @click="showEditDialogue(card)"
                                            >
                                                mdi-square-edit-outline
                                            </v-icon>
                                            <v-icon
                                                small
                                                @click="deleteItem(card)"
                                            >
                                                mdi-delete
                                            </v-icon>
                                        </div>
                                    </v-col>
                                    <!-- *** -->
                                </v-row>
                            </v-card>
                        </v-row>
                        <v-row align="center" justify="center">
                            <v-btn text @click="loadGradients(prevPage)"
                                >Prev</v-btn
                            >
                            Page {{ currentPage }} of {{ lastPage }}
                            <v-btn text @click="loadGradients(nextPage)"
                                >Next</v-btn
                            >
                        </v-row>
                    </v-card-text>
                </v-card>
                <!-- add new entry button -->
                <div class="text-center py-3">
                    <v-btn large color="primary" @click.stop="showNewDialogue()"
                        >Add New Gradient</v-btn
                    >
                </div>
                <!-- new entry modal -->
                <v-dialog v-model="dialog" max-width="700">
                    <v-card>
                        <v-form>
                            <v-container>
                                <v-row>
                                    <v-col cols="12" md="4">
                                        <v-text-field
                                            v-model="card.name"
                                            label="Name of Gradient"
                                        ></v-text-field>
                                    </v-col>

                                    <v-col cols="12" md="4">
                                        <v-select
                                            v-model="card.color1"
                                            :items="colors"
                                            label="First Color"
                                        ></v-select>
                                    </v-col>

                                    <v-col cols="12" md="4">
                                        <v-select
                                            v-model="card.color2"
                                            :items="colors"
                                            label="Second Color"
                                        ></v-select>
                                    </v-col>
                                </v-row>
                            </v-container>
                            <v-card-actions>
                                <v-spacer></v-spacer>
                                <v-btn color="blue darken-1" text @click="close"
                                    >Cancel</v-btn
                                >
                                <v-btn
                                    color="blue darken-1"
                                    text
                                    @click="saveToServer"
                                    >Save</v-btn
                                >
                            </v-card-actions>
                        </v-form>
                    </v-card>
                </v-dialog>
            </v-col>
        </v-row>
Mar
31
4 months ago
Activity icon

Started a new Conversation How To Include A Color Picker In Vue

I am trying to make a form with 2 inputs for colours. Hoping to use a built in vuetify color picker but when I use the below code, the dialogue just opens a blank grey screen. Not sure what I have done wrong:

<v-dialog v-model="dialog" max-width="700">
            <template v-slot:append>
                <v-menu
                    v-model="menu"
                    top
                    nudge-bottom="105"
                    nudge-left="16"
                    :close-on-content-click="false"
                >
                    <template v-slot:activator="{on}">
                        <div :style="swatchStyle" v-on="on" />
                    </template>
                    <v-card>
                        <v-form v-model="valid">
                            <v-container>
                                <v-row>
                                    <v-col cols="12" md="4">
                                        <v-text-field
                                            v-model="gradname"
                                            label="Name of Gradient"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col cols="12" md="4">
                                        <v-text-field
                                            v-model="color1"
                                            label="First Color"
                                        ></v-text-field>
                                        <v-color-picker v-model="color" flat />
                                    </v-col>
                                    <v-col cols="12" md="4">
                                        <v-text-field
                                            v-model="color2"
                                            label="Second Color"
                                        ></v-text-field>
                                    </v-col>
                                </v-row>
                            </v-container>
                        </v-form>
                    </v-card>
                </v-menu>
            </template>
        </v-dialog>

And here's the script with some dummy data:

<script>
export default {
    data() {
        return {
            dialog: false,
            color: '#1976D2FF',
            mask: '!#XXXXXXXX',
            menu: false,
            cards: [
                {name: 'Name of thing', color1: '#ff0000', color2: '#ffff00'},
                {name: 'Name of thing', color1: '#b3b3ff', color2: '#0000e6'},
                {name: 'Name of thing', color1: '#ff0000', color2: '#ffff00'},
                {name: 'Name of thing', color1: '#ff0000', color2: '#ffff00'},
                {name: 'Name of thing', color1: '#0d0d0d', color2: '#999999'},
                {name: 'Name of thing', color1: '#ff0000', color2: '#ffff00'},
                {name: 'Name of thing', color1: '#ff0000', color2: '#ffff00'},
                {name: 'Name of thing', color1: 'green', color2: 'red'},
            ],
        };
    },
    computed: {
        swatchStyle() {
            const {color, menu} = this;
            return {
                backgroundColor: color,
                cursor: 'pointer',
                height: '30px',
                width: '30px',
                borderRadius: menu ? '50%' : '4px',
                transition: 'border-radius 200ms ease-in-out',
            };
        },
        backgroundImage: () => (color1, color2) => {
            let bgImage =
                'linear-gradient(to top right, ' + color1 + ',' + color2 + ')';
            return bgImage;
        },
    },
};
</script>
Mar
25
4 months ago
Activity icon

Replied to Protecting API Routes With Middleware

Isn't that for when data needs to be accessed by a 3rd party app that isn't Laravel? Is there not a simpler way to protect the API when it's just kept in the laravel app?

Activity icon

Started a new Conversation Protecting API Routes With Middleware

Hi guys, so I'm trying to learn API routing on Laravel and so far it all works, but I would like to know how to protect the API from view. So far if anyone was to put in the API link into the address bar, you could see the entire JSON object. Is there a way to protect this using middleware like you can normal links? I have this as my links so far:

Route::apiResources([
    'user' => 'API\UsersController',
    'faq' => 'API\QuestionController',
    'dump' => 'API\DumpController',
    'gallery' => 'API\GalleryController',
    'artpack' => 'API\ArtPackController',
    'boughtArtPack' => 'API\BoughtArtPackController'
]);

Tried protecting it with an established auth middleware I have working for the admin back end routes but now it blocks the API whether you're logged in or not. I have it set up like this:

Route::group(['middleware' => 'IsAdmin'], function () {
  Route::apiResources([
    'user' => 'API\UsersController',
    'faq' => 'API\QuestionController',
    'dump' => 'API\DumpController',
    'gallery' => 'API\GalleryController',
    'artpack' => 'API\ArtPackController',
    'boughtArtPack' => 'API\BoughtArtPackController'
  ]);
});
Mar
18
4 months ago
Activity icon

Replied to Syntax Error With New Laravel Projects

I'm using Xampp with MariaDB instead of mySQL. Are there any better recommendations?

Activity icon

Replied to Syntax Error With New Laravel Projects

Ah! so currently I have this:

$table->string('email')->unique();

What do you recommend changing it to?

Activity icon

Started a new Conversation Syntax Error With New Laravel Projects

I don't know if this is something I'm doing wrong or everyone who creates a new Laravel (version 5 or 6, doesn't seem to matter) project has to fix each time.

Whenever I create a new project and try to run an initial migration, I get this error:

Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes")

I can fix it just fine, but seems I have to do it every time. Is there something I should be doing when I create the project? Tried to reinstall Laravel on my PC but it didn't help. Tried creating a project using these commands, but no difference:

laravel new blog

composer create-project --prefer-dist laravel/laravel blog "6.*" (or "5.*")

I have to fix it by adding the following to appServiceProvider:

use Illuminate\Support\Facades\Schema; //NEW: Import Schema

function boot()
{
    Schema::defaultStringLength(191); //NEW: Increase StringLength
}
Mar
16
4 months ago
Activity icon

Replied to One To Many Relation Not Working

The first answer there just has the result which stops after company and doesn't have the rest of the data, and the 2nd answer just tacks on the company data onto the result of the find query

Activity icon

Started a new Conversation One To Many Relation Not Working

I have a table of games, games companies and consoles. I am trying to output games to JSON using the API in Laravel and connecting the tables in a way that given the company ID and console ID in the games table, I can cross-reference the company/console name from the other table to fill in the name.

Game Model:

class Game extends Model
{
    public function company()
    {
        return $this->belongsTo('App\Company', 'company_id');
    }

    public function console()
    {
        return $this->hasOne('App\Console', 'console_id');
    }
}

company Model (console is similar):

class Company extends Model
{
    public function game()
    {
        return $this->hasMany('App\Game');
    }
}

I have this in my controller so far:

 public function show($id)
    {
        $showGame= Game::where('id', $id)->first();        
        return response()->json([
            'showGame' => $showGame
        ]);
    }

This will output this as JSON but I wanted company and console to have the names rather than numbers:

{
    "showGame": {
        "id": 2,
        "company_id": 2,
        "console_id": 1,
        "title": "Sonic",
        "price": £10,
	"inStock": "yes"          
    }
}

I tried the following which gives the company name just fine but then won't display the rest of the data (It just stops at company_id):

 public function show($id)
    {
        $showGame= Game::find($id)->company->where('id', $id)->first();        
        return response()->json([
            'showGame' => $showGame
        ]);
    }
Feb
12
6 months ago
Activity icon

Replied to V-hover Not Working As Expected On Image

Do you mean like this?

 <v-col cols="6" md="3" :class="c.class">     
          <v-expand-transition>
<!-- ... -->
</v-expand-transition>
</v-col>