finchy70

finchy70

Head of Systems at EPS

Member Since 2 Years Ago

Swansea

Experience Points
14,380
Total
Experience

620 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
101
Lessons
Completed
Best Reply Awards
1
Best Reply
Awards
  • start-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-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-token Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer-token Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • lara-evanghelist 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 3
14,380 XP
Dec
06
6 days ago
Activity icon

Replied to Attaching BelongsToMany Records After Submitting With Axios From Vue Component

Yup you were right.

Altering the method to

submitForm() {
                console.log(this.date);
                let final_tasks = [];
                for (var j = 0; j < this.selected_tasks.length; j++){
                    final_tasks.push(this.selected_tasks[j].id);
                }
                axios.post('/rams', {
                    prelim_id: this.prelim.id,
                    user_id: this.user.id,
                    client_id: this.client_id,
                    job_no: this.job_no,
                    site: this.site,
                    description: this.description,
                    tasks: final_tasks
                })
                    .then((response) => {
                        return window.location.href = '/rams';
                    })
                    .catch(error => {
                        if(error.response.status === 422) {
                            this.errors = error.response.data.errors

                        }
                    });
            }

fixed it. Not sure this is the best way to do it as I'm not great with Javascript.

Thanks.

Activity icon

Replied to Attaching BelongsToMany Records After Submitting With Axios From Vue Component

I think you may be right. Ill look when I get back to my desk and let you know.

Activity icon

Started a new Conversation Attaching BelongsToMany Records After Submitting With Axios From Vue Component

I have converted a html form to a vue component to allow for some reactivity.

When I submit the form to the controller from the vue component I can't get it to associate rams with tasks. When using a standard form the code below worked fine.

    {
        $data = request()->validate([
            'job_no' => 'required|numeric|max:9999|min:1000',
            'site'   => 'required',
            'description' => 'required',
            'client_id' => 'required',
            'user_id' => 'required',
            'prelim_id' => 'required'
        ]);
        $rams = Rams::create($data);
        $rams->tasks()->attach($request->tasks);
        return view('rams.index');
    }

When i submit the data from my component with the following code

submitForm() {
                console.log(this.date);
                axios.post('/rams', {
                    prelim_id: this.prelim.id,
                    user_id: this.user.id,
                    client_id: this.client_id,
                    job_no: this.job_no,
                    site: this.site,
                    description: this.description,
                    tasks: this.selected_tasks
                })
                    .then((response) => {
                        return window.location.href = '/rams';
                    })
                    .catch(error => {
                        if(error.response.status === 422) {
                            this.errors = error.response.data.errors

                        }
                    });
            }

it gives the following error in the response. "message": "SQLSTATE[42S22]: Column not found: 1054 Unknown column 'generic' in 'field list' (SQL: insert into `rams_task` (`created_at`, `generic`, `id`, `name`, `rams_id`, `task_id`, `updated_at`) values (2019-12-06 09:30:49, 1, 2, Fuga omnis vel tenetur perspiciatis fugit., 13, 0, 2019-12-06 09:30:49), (2019-12-06 09:30:49, 1, 4, Eos maxime voluptatem vel accusamus., 13, 1, 2019-12-06 09:30:49))"

the data submitted is from this multiselect in the vue component.

<div class="row mr-1 ml-1">
       <label class="typo__label"><h5>Select Tasks</h5></label>
       <multiselect v-model="selected_tasks" :options="tasks" :multiple="true" :close-on-select="false"  :clear-on-select="false" :preserve-search="true" placeholder="Select tasks" label="name" track-by="name" :preselect-first="false">
                <template slot="selection" slot-scope="{ values, search, isOpen }">
                        <span class="multiselect__single" v-if="values.length &amp;&amp; !isOpen">
                                {{ values.length }} {{ values.length > 1 ? ' tasks ' : ' task '}} selected
                        </span>
                </template>
       </multiselect>
</div>
                    

I think that the data type submitted by the html selectbox and the multiselect in vue must be of different types. How can I get this to work???

Nov
08
1 month ago
Activity icon

Replied to Valet+ And Catalina

Strange thing is Valet+ works fine on my MacBookPro on Catalina but wont work on my MacMini on Catalina. Really strange.

Activity icon

Started a new Conversation Sort By Relationship And Paginate

I have a query that I have tried to sort by relationship. Firstly this has not sorted all the results by engineer. Also how do I paginate the result?

$qualification_list = Qualification::with('engineer', 'course')->get()->sortBy('engineer.name');

I have tried ->paginate(15); at the end and also

$qualifications = $qualification_list->paginate(15);

Please help me sort by the relationship and then paginate the result..

Paul

Oct
25
1 month ago
Activity icon

Replied to Problem Installing Laravel

Anyone get to the bottom of this? Im having the same error.

Oct
24
1 month ago
Activity icon

Started a new Conversation Valet+ And Catalina

After upgrading my Mac Mini to Catalina I cant get Valet or Valet+ to work. I get an error that says 'example.tests server IP address could not be found.'

I have followed valet and valet+ install instructions. Tried php 7.2 and 7.3 installed via brew. Tried valet-php 7.2 and 7.3. Tried uninstall and reinstall. Tried valet+ 2.x-dev version and the latest valet version too.

Would like valet+ as I like the mysql and other tools but valet would be fine.

Anyone had this issue and managed to solve it?

My current macos php version is PHP 7.3.11 (cli) (built: Oct 24 2019 12:52:15) ( NTS ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.3.11, Copyright (c) 1998-2018 Zend Technologies with Zend OPcache v7.3.11, Copyright (c) 1999-2018, by Zend Technologies

Please help.

Oct
16
1 month ago
Activity icon

Replied to Laravel With Vue.js Components In Production On Forge/Digital Ocean

Thought I'd already tried this but I followed your advice and it's worked. Thanks.

Activity icon

Started a new Conversation Laravel With Vue.js Components In Production On Forge/Digital Ocean

I have put a web app into production on Forge but can't seem to disable vue dev tools.

I have tried the following in my app.js file

if (process.env['production']) {
    Vue.config.devtools = false;
    Vue.config.debug = false;
    Vue.config.silent = true;
} else {
    Vue.config.devtools = true;
}

and

if (process.env.MIX_APP_ENV === 'production') {
    Vue.config.devtools = false;
    Vue.config.debug = false;
    Vue.config.silent = true;
} else {
    Vue.config.devtools = true;
    Vue.config.debug = true;
    Vue.config.silent =false;
}

and also just

Vue.config.devtools = false;
Vue.config.debug = false;
Vue.config.silent = true;

I also added MIX_NODE_ENV = production to my .env file in forge.

Am I missing something? Do I need to change the forge deployment script?

Im using Laravel 6.2 and vue.js 2.6.10.

Please help!!

Regards Paul.

Oct
15
1 month ago
Activity icon

Replied to Close A Vue Modal After Form Submission

Fixed it. Adding $('#addFlashModal').modal('hide'); did the trick.

Activity icon

Started a new Conversation Close A Vue Modal After Form Submission

I have a small modal to add some data to a table. When the data is successfully submitted I want to close the modal.

<template>
    <div>
        <div class="modal fade" tabindex="-1" id="addFlashModal" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form @submit.prevent="submitForm()">
                        <div class="modal-header">
                            <h5 class="text-uppercase">Add New Ticker Message</h5>
                            <br>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body p-3">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="New Ticker Message" v-model="newMessage">
                            </div>

                            <button class="button-top btn btn-bold btn-block btn-primary" type="submitForm()">
                                Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "addFlash",
        data() {
            return {
                newMessage: "",
                errors: [],
            }
        },
        methods: {
            submitForm() {
                axios.post('/api/new-ticker-message', {
                    message: this.newMessage
                }).then(resp => {
                    /** Code here to close modal*/
                }).catch(error => {
                    this.errors = error.response.data.errors
                    console.log("Errors= " + this.errors)
                })
            }
        }

    }
</script>

<style scoped>
    .modal {
        color: black;
        max-width: 100% !important;
    }
</style>

I have used location.reload() but this refreshes the page.

I also tried this.$emit('hide', true); and added a v-if to the component. This does close the modal bu the background remains faded and un selectable.

Thanks Paul.

Oct
12
2 months ago
Activity icon

Started a new Conversation Bootstrap 4 Layout

How do I get from Imgur

to

Imgur

Here is my current vue template. The final template will use a v-for to output the multiple messages

<template>
    <div class="row">
        <div class="col-lg-6 mt-3 mt-lg-3 mt-md-3 mt-sm-3">
            <div class="card">
                <div class="card-header">
                    Message
                </div>
                <div class="card-body">
                    <h5>Hello</h5>
                </div>
            </div>
        </div>
        <div class="col-lg-6 mt-3 mt-lg-3 mt-md-3 mt-sm-3">
            <div class="card">
                <div class="card-header">
                    Message
                </div>
                <div class="card-body">
                    <h5>Hello</h5>

                </div>
            </div>
        </div>
        <div class="col-lg-6 mt-3 mt-lg-3 mt-md-3 mt-sm-3">
            <div class="card">
                <div class="card-header">
                    Message
                </div>
                <div class="card-body">
                    <h5>Hello</h5>
                </div>
            </div>
        </div>
        <div class="col-lg-6 mt-3 mt-lg-3 mt-md-3 mt-sm-3">
            <div class="card">
                <div class="card-header">
                    Message
                </div>
                <div class="card-body">
                    <h5>Hello</h5>
                </div>
            </div>
        </div>
    </div>

</template>

Can someone tel me how to get the desired output if possible and keep the current single stacked column that a small screen displays.

Taken from development site. Imgur

Regards Paul

Jul
16
4 months ago
Activity icon

Replied to Vue Select: How Do I Mark An Option As Selected Dependant On Id?

I was approaching this problem from the wrong direction. Instead of trying to to use a ternary to set the :selected property, I set the 'selected' and 'current_method' immediately after retrieving the prelims. This was done by looping over the prelimdata objects and finding the matching id's.

for( let i = 0; i < this.prelimdata.length; i++){
    if(this.prelimdata[i].id === this.check.prelim_id){
        this.selected = this.prelimdata[i];
        this.current_prelim = this.prelimdata[i].prelims;
    }
}

Not sure if this is how you should do it, but it's the only way I could get it to work.

Thanks

Activity icon

Replied to Vue Select: How Do I Mark An Option As Selected Dependant On Id?

I've updated the line to

<option v-for="prelim in prelimdata" :value="prelim" :selected="prelim.id === id_check ? 'selected' : ''">{{ prelim.name}}</option>

It compiles but does nothing.

Jul
15
4 months ago
Activity icon

Started a new Conversation Vue Select: How Do I Mark An Option As Selected Dependant On Id?

I pass the current id of an object via props (id_check) and loop through an array of objects to populate a select dropdown. I cant pre select the object with the same id as the check_id.

<template>
    <div>

        <p v-if="errors.length">
            <b>Please correct the following error(s):</b>
            <ul>
                <li v-for="error in errors">{{ error }}</li>
            </ul>
        </p>
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <h3 class="ml-3 mr-3 mt-1">Select Existing Preliminaries or </h3>
                    <a href="/prelims" class="float-right btn btn-sm btn-outline-dark mt-2 mb-2">Create New</a>
                </div>
            </div>
            <div class="card-body">
                <label class="mb-2">Name</label>
                <select class="form-control mb-5" v-model="selected" @change=getSelected>
                    <option disabled value="">Please select one</option>
                    <option v-for="prelim in this.prelimdata" :value="prelim"
                            :selected="(prelim.id === id_check)">{{ prelim.name }}</option>
                </select>

                <label class="mb-2">Preliminaries Description</label>
                <textarea class="form-control" rows="10">{{ current_prelim }}</textarea>

                <div class="row">
                    <button class="mt-2 ml-auto mr-3 btn btn-success -btn-sm" @click=savePrelim>Save</button>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PrelimSelector",
        props: ['task_id', 'id_check'],
        data(){
            return {
                prelimdata: [],
                selected: null,
                errors: [],
                current_prelim: '',
                current_prelim_id: null,
            }

        },
        methods: {
            getSelected(){
                this.current_prelim = this.selected.prelims;
                this.current_prelim_id = this.selected.id;
            },

            getPrelims() {
                axios.get('/prelims/prelim_list')
                    .then((response) => {
                        // handle success
                        this.prelimdata = response.data;
                        // console.log("Prelims="+this.preliminaries);
                    })
                    .catch(e => {
                        if(e){
                            this.errors.push("Error!!");
                        }

                    });
            },

            savePrelim(){
                if(this.selected == null){
                    return;
                } else {
                    this.errors = [];
                    axios.patch('/tasks/'+this.task_id+'/add_prelims', {
                        add_prelim_id: this.current_prelim_id
                    })
                        .then((response)  => {
                            console.log("SUCCESS!!!!");
                            flash('Preliminaries added to current task!!');
                        })
                        .catch(e => {
                            if(e){
                                this.errors.push("A model with this name already exists!!");
                            }

                        });
                }
            }

        },

        created() {
            console.log("ID="+this.id_check);
            this.getPrelims();

        },
    }
</script>

<style scoped>

</style>

I have tried a few combinations of :selected="(prelim.id === id_check)" with no success. Can anyone show me how I do it?

Activity icon

Replied to Pass Query Result To Vue Component Via Axios To Populate A Dropdown.

That fixed it. Thank you very much.

Activity icon

Replied to Pass Query Result To Vue Component Via Axios To Populate A Dropdown.

***.test/prelims/prelim_list gives me the json containing my test data.

Activity icon

Replied to Pass Query Result To Vue Component Via Axios To Populate A Dropdown.

web.php

/**Axios Routes**/
Route::get('/prelims/prelim_list', '[email protected]_list')->name("prelims.prelim_list");
Activity icon

Replied to Pass Query Result To Vue Component Via Axios To Populate A Dropdown.

Same success response= [object Object]

Activity icon

Replied to Pass Query Result To Vue Component Via Axios To Populate A Dropdown.

Still error.

console.log("success response= "+ response.data);

gives success response= [object Object]

Activity icon

Started a new Conversation Pass Query Result To Vue Component Via Axios To Populate A Dropdown.

I have started building a Vue component that will populate a dropdown then depending on whats selected populate a text area.

Select box in template.

<div class="card-body">

                <select class="form-control" v-model="selected" @change=getSelected>
                    <option disabled value="">Please select one</option>
                    <option v-for="prelim in this.preliminaries" v-bind:value="prelim.id">{{ prelim.name }}</option>
                </select>

            </div>

function to populate dropdown

<script>
    export default {
        name: "PrelimSelector",
        data(){
            return {
                preliminaries: [],
                selected: null,
                errors: []
            }
        },

        methods: {
            getSelected(){

            }

        },
        created() {
            function getPrelims() {
                axios.get('/prelims/prelim_list')
                    .then((response) => {
                        // handle success
                        console.log("success response= ");
                        this.preliminaries = response.data;
                        console.log("Prelims="+this.preliminaries);
                    });
            }

            getPrelims();
        },

    }
</script>

controller

public function prelim_list()
    {
        return response()->json(Prelim::orderBy('name', 'asc')->get());
    }

I keep getting the following error.

Uncaught (in promise) TypeError: Cannot set property 'preliminaries' of undefined at app.js:1920

I have done something similar to this before with no problems. Any idea what I'm doing wrong?