twg_

Hi,

I have implemented drag-n-drop order of some items but I'm trying to figure out how to implement the model update.

Here is an example of the data I'm posting:

[
    'pages' => [
        { id: "10", children: [] },
        { id: "15", children: [] },
        { id: "2", children: [
            { id: "4" },
            { id: "5" }
        ]},
        { id: "8", children: [] }
    ]
]

In my controller I'm checking to make sure that $request->has('pages') but after that I'm not 100% sure how to loop through the id's and update their appropriate data entry with the order they are in and then how to update the children items the same with but with also the parent id that it's inside.

Hi,

I have a basic drap-n-drop working without any children and when it's moved, the database is updated. I'm having an issue figuring out how to update the database when a element is dragged as a child.

Has anyone done this before with Laravel & jQuery Sortable.

I was wondering if I could use a single webpack.mix.js file to mix all of my files for each sub section of my website. I have all fo the files living inside a global project but I would like to only mix certain ones when I need to without having to wait for them all to mix each time.

Hi @hollyit @mstrauss ,

I implemented the page_ in the id and the console.log is working now. This will be pretty small reordering of pages so I don't think I will run into a UX nightmare. I've never used a debounce function. Can you share any more on that?

That still doesn't output anything to the console.

@mstrauss The output is blank. It doesn't return NULL or EMPTY or anything.

I forgot to add when I look at the dd in the networking tab and response. I get an array of array:1 [ 2 => null ]

I have setup sortable with jQuery UI and I'm able to drag and drop the items in any order I want. What I'm having issues with is saving the order after I move each item.

web.php

Route::prefix('manage')->group(function () {
    Route::prefix('pages')->group(function () {
        Route::post('/reposition', '[email protected]');
    });
});

[email protected]

public function submit(Request $request)
{
        dd($request->all());

        if ($request->has('item')) {
            $i = 0;

            foreach ($request->get('item') as $id) {
                print_r($id); die();
                $i++;
                $page = \App\Page::find($id);
                $page->menu_order = $i;
                $page->save();
            }

            return response()->json(array('success' => true));
        } else {
            return response()->json(array('success' => false));
        }
 }

Blade File (index.blade.php)

<div id="pages">
@foreach($pages as $page)
<div class="page" id="{{ $page->id }}">
    <div class="handle"></div>
    <div class="page-details">
        DETAILS HERE
    </div>
</div>
@endforeach
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $('#pages').sortable({
        'containment': 'parent',
        'revert': true,
        helper: function(e, div) {
            var $originals = div.children();
            var $helper = div.clone();
            $helper.children().each(function(index) {
                $(this).width($originals.eq(index).width());
            });
            return $helper;
        },
        handle: '.handle',
        update: function(event, ui) {
            var url = '{{ route("pages.reposition", ":id") }}';
            url = url.replace(':id', ui.item.attr('id'));
            $.post(
                url,
                $(this).sortable('serialize'),
                function(data) {
                    if (!data.success) {
                        alert('Whoops, something went wrong.');
                    }
                },
                'json'
            );
        }
    });
</script>

I had the person working on it throw a try/catch on it and we got it resolved. Thanks.

We are having some issues with mail delivery working. When we or a use submits a form, sometimes we get a time with no message, sometimes we get a timeout with a message and then other times the messages sends just fine.

We are connecting to an enterprise exchange server over smtp on port 25.

Has anyone else experienced this before?

Thanks for that @bobbybouwmann. I actually came across the first link you sent about 30 minutes ago and I've been working through it. I'm trying to figure out my error 500 on my login post as we speak.

Hi Everyone,

I'm starting to learn Vue and I'm playing around with trying to create a simple playground project. I'm trying to create a login system with roles/permissions using Vue & Laravel. Does anyone have any suggestions for tutorials?

Thanks @ejdelmonico I actually moved over to Vuex to accomplish what I wanted which is working great now.

I've built out a few templates with vue and I've figured out how to set a store value for SET_LAYOUT initially. I can't quite seem to figure out how I can change that value on a per page basis.

Has anyone done this before?

Awesome. That's what I was doing but wanted to make sure there wasn't something I was missing. Thanks @aurawindsurfing.

Nice IT Crowd avatar. I was just watching an episode.

Hi,

I'm using forge to push out my first project. When I push to my repo of course the .env file is left out since it's my production .env file. What's the best way to push changes and have a production env file?

@bobbybouwmann I'm using Vue Router.

So I've got my mobile navigation toggling open and close. The only issue I have left is how to close the navigation when the next page is loaded.

<script>
    let app = new Vue({
        el: '#app',
        data: {
            open: false
        },
        methods: {
            mobileNavToggle () {
                this.open = !this.open
            }
        }
    })
</script>

I have the following setup in:

data () {
    return {
        fields: {},
        errors: {},
        success: false,
        loaded: true,
        action: ''
    }
}

All of my form data is stored in the fields array.

I'm converting a simple site I have built in Laravel to a SPA with Vue.

I just got to a form and I have 4 input checkboxes and I'm trying to recheck the boxes on a failed submission. Currently when I run the code I have, it checks all 4 boxes at once.

Original

<input id="item1" name="items[]" value="Item 1" type="checkbox" />
<input id="item2" name="items[]" value="Item 2" type="checkbox" />
<input id="item3" name="items[]" value="Item 3" type="checkbox" />
<input id="item4" name="items[]" value="Item 4" type="checkbox" />

VueJS

<input id="item1" name="items[]" value="Item 1" type="checkbox" v-model="fields.items" />
<input id="item2" name="items[]" value="Item 2" type="checkbox" v-model="fields.items" />
<input id="item3" name="items[]" value="Item 3" type="checkbox" v-model="fields.items" />
<input id="item4" name="items[]" value="Item 4" type="checkbox" v-model="fields.items" />

Hi @siangboon, Thanks for the link. I was able to get it all sorted out.

Hi,

I'm new to Vue and I was wondering if anyone could tell me how I can toggle a class based on if my form has any errors and they relate to that field.

I found v-bind:class to bind a class to my field. I just can't figure out how I can write make it toggle a hasError or noError class based on if it has errors && errors.name_first.

This is probably so simple but for some reason I can't figure this out.

I have a pivot table called nominations that is comprised of user_id and nominee_id. I need to get the nominee's name from the user's table. Both user_id and nominee_id have a foreign relationship back to the user's table on id.

I actually got it working right before you post @snapey ; I ended up changing my Helper.php into a class and then added it to my composer.json file. Then I was able to call my functions just fine.

I used this article to figure it out. https://stackoverflow.com/a/32772686/1204689

Hi @nakov,

Thanks for the reply. I forgot to add that to my post. I have that setup already and I've run composer dump-autoload but I still get a message of Call to undefined function settings() (View: /app/resources/views/admin/settings.blade.php).

Hi,

I'm trying to create a helper to use in my views but I can't quite seem to figure out what's causing it to not work.

I created my helper in /app/Helpers/Helper.php and put the following code in it:

namespace App\Helpers;

use App\Settings;

if(!function_exists('settings'))
{
    function settings($key = null, $default = null) 
    {
            if ($key === null)
         {
                return app(Settings::class);
        }

        return app(Settings::class)->get($key, $default);
    }
}

HelperServiceProvider.php

public function register() {
    foreach(glob(app_path() . '/Helpers/*.php') as $file) {
        require_once($file);
    }

    $this->app->singleton(Settings::class, function() {
        return Settings::make(storage_path('app/settings.json'));
    });
}

config/app.php

return [


    'providers' => [
        ...
        App\Providers\HelperServiceProvider::class,
        ...
    ]
];

app/Settings.php

namespace App;

use Spatie\Valuestore\Valuestore;

class Settings extends Valuestore
{
    //
}

myview.blade.php

{{ settings('my-setting') }}

{{ -- OR -- }}

{{ settings()->get('my-setting') }}

Thanks for the help @ejdelmonico . Ended up that I had a /etc/reslover/dev file setup to resolve dev domains from a few years back. Removed that and everything works just fine now.

Hi,

I recently purchased a DEV TLD with Google and pointed it to DigitalOcean's Nameservers. When I check the dns propagation, it shows the correct server ip address. However when I go into Forge and add the site and setup the SSL with LetsEncrypt and then try to visit the site, I get a "This site can't be reached. Refused to connect.". Did I do something wrong?

I didn't have any errors showing in the console until I added your code snippet. I forgot to add the csrf meta. I added it and then went to submit the form but I got the same response. No confirmation of the email being sent or any errors in the console.

Hi,

I'm trying to create my first contact form that submits via axios in my Vue Component. After filling out the required fields, the form never submits. I can't quite figure out why.

Contact.vue

<template>
  <div>
    <form action="#" @submit.prevent="submit">
      .. FORM DATA HERE ..
    </form>
  </div>
</template>

<script>
import FormMixin from '../assets/FormMixin';

export default {
  mixins: [FormMixin],
  data() {
    return {
      'action': '/contact/submit',
    }
  }
}
</script>

FormMixin.js

import 'axios' from 'axios';

export default {
    data() {
        return {
            fields: {},
            errors: {},
            success: false,
            loaded: true,
            action: '',
        }
    },
    methods: {
        submit() {
            if (this.loaded) {
                this.loaded = false;
                this.success = false;
                this.errors = {};
                axios.post(this.action, this.fields).then(response => {
                    this.fields = {}; // Clear input fields
                    this.loaded = true;
                    this.success = true;
                }).catch(error => {
                    this.loaded = true;
                    if (error.response.status === 422) {
                        this.errors = error.response.data.errors || {};
                    }
                });
            }
        },
    },
}

ContactController.php

public function submitContact(Request $request) {
    $this->validate($request, [
        .. REQUEST RULES ..
    ]);

    try {
        Mail::send();
        return response()->json(null, 200);
    } catch (Exception $e) {
        // return failed
    }
}

Hi. I have a large project I'm working on and inside this project I'm developing two sites. They share a lot of similarities but also have unique features for each.

I'm keeping all of my design files inside of a single project folder and I was wondering if there is a way to add additional scripts to my package.json so that I can target which site to compile. I wasn't sure if I could specify a specific webpack.mix.js file or if there was a "site" like flag I could use.

I'm using the stand alone version of laravel-mix and I want to add the ability to publish my compiled items to my CMS. Is there a way to publish items via an API call?

@obiefy It turned out to be a caching issue in Chrome. Switched to Firefox and it worked without issue.

Hi @ashraam,

I did not have a router-view component in my app. I didn't see it used on the video I was following along on the site.

Hi @obiefy,

I call the @include('shared.nav') inside the <div id="app"></div>.

I'm new to Vue and after watching one of Jeffrey's videos, I figured I would give it a try. I have installed vue and vue-router and then imported them. When I compile my app.js file, it succeeds. However, when I load the localhost site, my links are not create like they should be. I see the raw <router-link to=""></router-link> in my code.

app.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import {routes} from './routes'

//window.Vue = Vue;
Vue.use(VueRouter);

const router = new VueRouter({
    mode:   'history',
    routes
});

new Vue({
    el: '#app',
    router,
})

routes.js

export const routes = [
    {
        path: '/',
        components: require('../views/Vue/Home'),
        name: 'home'
    }
];

layouts/app.blade.php

@include('shared.nav')

shared/nav.blade.php

<router-link to="/">Home</router-link>

When I try to access slides/02 directly, I can. Even though I didn't set slide_step to 2.

web.php

Route::get('/', function () {
    session(['slide_step' => 1]);
    return view('welcome');
});
Route::prefix('slides')->group(function(){
        Route::get('01', function(){
            if(!session::has('slide_step') OR session('slide_step') !== 1)
            {
                Redirect::to('/');
            }

            return view('slide01');
        });
       Route::get('02', function(){
            if(session('slide_step') !== 2)
            {
                Redirect::to('/');
            }

            return view('slide02');
        });
});

@Cronix - Thanks for the info. My setup is pretty simple, I have 42 "slides" the individual has to go through. I've got to make sure they go through them before they can submit saying they have. With that being said, I'm doing everything inside the web.php file so that I don't have to create 42 individual Controllers with a single function. When I add the suggested information you gave, it's not looking at the session at all. It's allowing the user to go to any slide without having the session set.

I'm not sure if this is the correct place to post this but I'm trying to figure out how I can block direct access to a URL. I have a set of slides that a user has to go through to get to the submission page. I don't want them to figure out that they can go straight to /slide/XX and click next to get to the registration page. What could I use to block this? I'm not using any Auth with this project.

Thanks @ejdelmonico for your help.

I was trying to write in ES2015 but compile it so that older browsers could still render it. Writing an app where people might be using IE7 and have to support it. :(

The error I referenced is when I try to load the file in the browser. I have no errors when I try to compile my JS.

let mix = require('laravel-mix');

mix.babel('resources/assets/js/app.js', 'public/js/app.js');

if(mix.inProduction())
{
    mix.version();
}

Working on a small app that will have to be ran on any browser. When I run mix.babel on my js file and then try to load the page, it complains that "Uncaught ReferenceError: require is not defined". This is due to the ./bootstrap js file that has multiple require calls. Any suggestions?

I also dumped the result of $this->guard()->login($user, $request->has('remember')); and it was null.

If I dd($user) after fetching them, I get the user's information.

@martinbean ,

I would love to implement your idea but this database is used by two other internal apps that I can't modify so i can't change the password as it would then stop them from working.

Hi @mushti,

Thanks for the code. I just gave it a try but it just brings me right back to the login page.

I need to authenticate against the users table but the password is stored in MD5 hash. I know that Laravel doesn't use MD5 hash for auth but didn't know if there was some way to modify the auth to use it.

I have a database that is being used for a legacy project and I need to authenticate against it. Unfortunately the password is in MD5 hash. How can I authenticate against this in Laravel 5.5?

I've been trying to teach myself VueJS this week and I've hit a road block. I have my Vue-Router setup as well as my web.php routes. When i try to access a section in the admin area, I'm greeted with json data.

UserController.php

<?php

namespace App\Http\Controllers\Admin;

use App\User;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class UserController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $users = User::all();
        return response()->json($users);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $user = User::find($id);
        return response()->json($user);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $user = User::find($id);

        $user->save();

        return response()->json('Successfully Updated.');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $user = User::find($id);
        $user->delete();

        return response()->json('User has been deleted.');
    }
}

app.js

import Vue from 'vue';

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';

Vue.use(VueAxios, axios);

import App from './App.vue';
import CreateUser from './components/Admin/User/Create.vue';
import EditUser from './components/Admin/User/Edit.vue';
import DisplayUser from './components/Admin/User/Display.vue';

const routes = [
    {
        name:       'CreateUser',
        path:       '/users/create',
        component:  CreateUser
    },
    {
        name:       'DisplayUser',
        path:       '/users',
        component:  DisplayUser
    },
    {
        name:       'EditUser',
        path:       '/users/edit/:id',
        component:  EditUser
    }
];

const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(Vue.util.extend({ router }, App)).$mount('#app');

User/Display.vue Component

<template>
    <div>
        <h1>Locations</h1>
        <div class="uk-grid">
            <div class="uk-width-3-10@m">
                <router-link to="{ name: 'CreateLocation' }" class="uk-button uk-button-primary">Create Location</router-link>
            </div>
        </div>
        <table class="uk-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="location in locations">
                    <td>{{ location.id }}</td>
                    <td>{{ location.name_first }} {{ location.name_last }}</td>
                    <td>
                        <router-link to="{ name: 'EditLocation', params: { id: location.id } }" class="uk-button uk-button-primary">Edit</router-link>
                        <button class="uk-button uk-button-danger" v-on:click="deleteLocation(location.id)">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                locations: []
            }
        },
        created: function()
        {
            this.fetchLocations();
        },
        methods: {
            fetchLocations()
            {
                let uri = 'http://localhost:8000/users';
                this.axios.get(uri).then((response) => {
                    this.locations = response.data;
                })
            },
            deleteLocation(){
                let uri = 'http://localhost:8000/users/${id}';
                this.locations.splice(id, 1);
                this.axios.delete(uri);
            }
        }
    }
</script>

What did I do wrong?