Enrico Höschler

Vue SPA with Laravel API Part 8

2018-08-10T17:00:00+00:00

The complete source code of this series is available on GitHub.

Part 1: Setting up a Vue SPA with a Laravel API as the backend using JWT authentication.
Part 2: Creating everything database related: models, migrations, seeders and factories.
Part 3: Setting up API routes and creating API resource controllers.
Part 4: Testing the API with feature tests and sqlite.
Part 5: Setting up Continuous Deployment with TravisCI and Heroku.
Part 6: Customizing the frontend skeleton, design and Dashboard component.
Part 7: Creating the remaining Vue components: Board, List, Card, Modal.
Part 8: Setting up Jest and testing all Vue components with it. (You are here)

In this part we want to setup Jest and use it to test our Vue components. First let’s install some dependencies:

npm install --save-dev jest vue-jest babel-jest jest-serializer-vue @vue/test-utils

We install Jest, some jest helpers for vue, babel and snapshot serializing and the Vue test utils. Now we have to change our ESLint config file .eslintrc.js:

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  },
  env: {
    amd: true,
    jest: true
  },
  parserOptions: {
    ecmaVersion: 8
  }
}

We add the jest env option and ecmaVersion 8 to it. With this we can use async await in our tests and eslint won’t complain.

Next we need the configuration for Jest. Add this to package.json:

"jest": {
    "moduleFileExtensions": [
        "js",
        "vue"
    ],
    "moduleNameMapper": {
        "^@/(.*)$": "<rootDir>/resources/assets/js/components/$1"
    },
    "transform": {
        "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
        ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
      "snapshotSerializers": [
        "<rootDir>/node_modules/jest-serializer-vue"
    ]
},
"babel": {
    "env": {
        "test": {
            "presets": [
                ["env", { "targets": { "node": 8 }}]
            ]
        }
    }
}

and these two in our scripts section:

"test": "jest",
"test-watch": "npm run test -- --watch"

And we want travis to run Jest too, so in .travis.yml we change our script part to:

script:
- vendor/bin/phpunit
- npm run test
- npm run production

The setup is now done and we can start writing our tests. We will begin with very easy snapshot tests for our Login and Register components.

tests/Javascript/Login.spec.js:

import { mount } from '@vue/test-utils';
import Login from '@/Login.vue';

describe('Login.vue', () => {

    it('matches the snapshot', () => {
        const wrapper = mount(Login)
        expect(wrapper.html()).toMatchSnapshot();
    });

});

tests/Javascript/Register.spec.js:

import { mount } from '@vue/test-utils';
import Register from '@/Register.vue';

describe('Register.vue', () => {

    it('matches the snapshot', () => {
        const wrapper = mount(Register)
        expect(wrapper.html()).toMatchSnapshot();
    });

});

We import Vue test utils, mount the component and expect the rendered HTML from the template to match our snapshot. On our first Jest run it will save the two snapshots in a new directory and after that use these saved snapshots to compare the current version to. If you changed the resulting HTML somehow, you will have to test manually and regenerate the snapshots after that. It’s not so useful for components that will change often, but for Login and Register it’s pretty nice, since we won’t be changing them that often.

Now we get to the more complex tests. We will start with the Dashboard test. As always a step by step walkthrough is below the code.

tests/Javascript/Dashboard.spec.js:

jest.mock('axios', () => ({
    get: jest.fn(() => Promise.resolve({ 
        data: [{"id":5,"name":"test","user_id":1,"created_at":"2018-07-05 12:36:35","updated_at":"2018-07-05 12:36:35","board_lists":[{"id":17,"name":"abc","board_id":5,"order":1,"created_at":"2018-07-05 12:36:41","updated_at":"2018-07-05 12:36:51","cards":[]},{"id":18,"name":"def","board_id":5,"order":0,"created_at":"2018-07-05 12:36:47","updated_at":"2018-07-05 12:36:51","cards":[{"id":33,"name":"test card 1","board_list_id":18,"order":0,"description":"The description.","created_at":"2018-07-05 13:51:54","updated_at":"2018-07-05 13:52:14"},{"id":34,"name":"test card 2","board_list_id":18,"order":1,"description":"","created_at":"2018-07-05 13:52:02","updated_at":"2018-07-05 13:52:02"}]}]},{"id":6,"name":"another board","user_id":1,"created_at":"2018-07-05 17:49:04","updated_at":"2018-07-05 17:49:04","board_lists":[]}]
    })),
    post: jest.fn(() => Promise.resolve({ 
        data: {"name":"yet another board","user_id":1,"updated_at":"2018-07-05 17:49:20","created_at":"2018-07-05 17:49:20","id":7}
    })),
    delete: jest.fn(() => Promise.resolve())
}));

import { shallowMount } from '@vue/test-utils';
import Dashboard from '@/Dashboard.vue';
import axios from 'axios';

describe('Dashboard.vue', () => {
    let wrapper;

    beforeEach(async () => {
        wrapper = await shallowMount(Dashboard, {
            stubs: ['router-link']
        });

        jest.resetModules();
        jest.clearAllMocks();
    });

    it('shows the users boards', () => {
        expect(wrapper.findAll('router-link-stub').length).toBe(2);
    });

    it('can create a new board', async () => {
        const input = wrapper.find('form input');
        input.setValue('yet another board');
        await wrapper.find('button').trigger('click');

        expect(axios.post).toBeCalledWith('/boards', { name: 'yet another board' });
        expect(wrapper.findAll('router-link-stub').length).toBe(3);
    });

    it('can delete a board', async () => {
        await wrapper.find('.board-navs a').trigger('click');

        expect(axios.delete).toBeCalledWith('/boards/5');
        expect(wrapper.findAll('router-link-stub').length).toBe(1);
    });

});

The very first thing we do is to define an axios mock for our test. Since we don’t want axios to make real API calls in our tests we will have to mock every method of axios we use in our component. Each mocked method is pretty simple: We just return data like the real API would. I got this data by browsing the webpage and inspecting the API responses for the actions we’re testing here. We them import axios from axios. This loads our axios mock so we can use it later. Before each test we shallowMount the Dashboard component and stub out all router links. We also reset all mocks, so our tests are isolated from each other. The first test just checks that we have 2 router-link-stubs in the resulting html, which means 2 boards.

The next test finds the form input for the new board form, inputs the name for the new board and triggers a click on the button. We use async await on each test that uses our axios mock, since we have to wait for it’s promise to resolve before our expectations should check. Then we expect that the post method of axios was called with the given arguments and we now have 3 router-link-stubs. The last test triggers a click on the delete link of a board and we check that the API was called and the board disappeared.

The next test file is a quite a bit longer, tests/Javascript/Board.spec.js:

jest.mock('axios', () => ({
    get: jest.fn(() => Promise.resolve({ 
        data: {"id":5,"name":"test","user_id":1,"created_at":"2018-07-05 12:36:35","updated_at":"2018-07-05 12:36:35","user":{"id":1,"name":"admin","email":"admin@example.com","created_at":"2018-07-03 14:38:30","updated_at":"2018-07-03 14:38:30"},"board_lists":[{"id":18,"name":"def","board_id":5,"order":0,"created_at":"2018-07-05 12:36:47","updated_at":"2018-07-05 12:36:51","cards":[{"id":33,"name":"test card 1","board_list_id":18,"order":0,"description":"The description.","created_at":"2018-07-05 13:51:54","updated_at":"2018-07-05 13:52:14"},{"id":34,"name":"test card 2","board_list_id":18,"order":1,"description":"","created_at":"2018-07-05 13:52:02","updated_at":"2018-07-05 13:52:02"}]},{"id":17,"name":"abc","board_id":5,"order":1,"created_at":"2018-07-05 12:36:41","updated_at":"2018-07-05 12:36:51","cards":[{"name":"test card 3","order":0,"description":"","board_list_id":17,"updated_at":"2018-07-06 11:55:39","created_at":"2018-07-06 11:55:39","id":35}]}]}
    })),
    post: jest.fn(() => Promise.resolve({ 
        data: {"name":"new list","order":2,"board_id":5,"updated_at":"2018-07-06 11:39:56","created_at":"2018-07-06 11:39:56","id":19,"cards":[]}
    })),
    put: jest.fn(() => Promise.resolve({ 
        data: {"id":5,"name":"new board name","user_id":1,"created_at":"2018-07-05 12:36:35","updated_at":"2018-07-05 12:36:35","user":{"id":1,"name":"admin","email":"admin@example.com","created_at":"2018-07-03 14:38:30","updated_at":"2018-07-03 14:38:30"},"board_lists":[{"id":18,"name":"def","board_id":5,"order":0,"created_at":"2018-07-05 12:36:47","updated_at":"2018-07-05 12:36:51","cards":[{"id":33,"name":"test card 1","board_list_id":18,"order":0,"description":"The description.","created_at":"2018-07-05 13:51:54","updated_at":"2018-07-05 13:52:14"},{"id":34,"name":"test card 2","board_list_id":18,"order":1,"description":"","created_at":"2018-07-05 13:52:02","updated_at":"2018-07-05 13:52:02"}]},{"id":17,"name":"abc","board_id":5,"order":1,"created_at":"2018-07-05 12:36:41","updated_at":"2018-07-05 12:36:51","cards":[]}]}
    })),
    patch: jest.fn(() => Promise.resolve())
}));

import { mount } from '@vue/test-utils';
import Board from '@/Board.vue';
import { EventBus } from '@/../EventBus.js';
import axios from 'axios';

describe('Board.vue', () => {
    let wrapper;

    beforeEach(async () => {
        wrapper = await mount(Board, {
            mocks: {
                $route: { path: '/board/5', params: { id: 5 } }
            },
            stubs: ['list', 'modal']
        });

        jest.resetModules();
        jest.clearAllMocks();
    });

    it('shows the lists', () => {
        expect(wrapper.vm.board.board_lists.length).toBe(2);
        expect(wrapper.findAll('list-stub').length).toBe(2);
    });

    it('can update its name', async () => {
        wrapper.find('.board-name').trigger('click');

        let input = wrapper.find({ ref: 'edit' });
        input.setValue('new board name');
        await input.trigger('keyup.enter');

        expect(axios.put).toBeCalledWith('/boards/5', { name: 'new board name' });
        expect(wrapper.vm.board.name).toBe('new board name');
    });


    it('listens for an open-modal event', async () => {
        const spy = jest.spyOn(EventBus, '$on');

        // mount again so our spy gets called
        await mount(Board, {
            mocks: {
                $route: { path: '/board/5', params: { id: 5 } }
            },
            stubs: ['list', 'modal']
        });

        expect(spy).toBeCalled();
    });

    it('can create a new list', async () => {
        const input = wrapper.find('.new-list input');
        input.setValue('new list');
        await wrapper.find('.new-list button').trigger('click');

        expect(axios.post).toBeCalledWith('/boardLists', { board_id: 5, name: 'new list', order: 2 });
        
        expect(wrapper.vm.board.board_lists.length).toBe(3);
    });

    it('can remove a list from the view', () => {
        wrapper.vm.deleteList({"id":17,"name":"abc","board_id":5,"order":1,"created_at":"2018-07-05 12:36:41","updated_at":"2018-07-05 12:36:51","cards":[]});
        expect(wrapper.vm.board.board_lists.length).toBe(1);
    });

    it('sorts lists by order', () => {
        // expect order same as mock data
        expect(wrapper.vm.orderedList[0].name).toBe('def');

        // change order
        wrapper.vm.board.board_lists[0].order = 1;
        wrapper.vm.board.board_lists[1].order = 0;

        // expect order reversed compared to mock data
        expect(wrapper.vm.orderedList[0].name).toBe('abc');
    });

    it('can update the list order', () => {
        let helper;

        expect(wrapper.vm.board.board_lists[0].name).toBe('def');
        expect(wrapper.vm.board.board_lists[0].order).toBe(0);

        // switch list order without setting the order attribute
        helper = wrapper.vm.board.board_lists[0]
        wrapper.vm.board.board_lists[0] = wrapper.vm.board.board_lists[1];
        wrapper.vm.board.board_lists[1] = helper;

        // save new order
        wrapper.vm.updateListOrder();

        expect(axios.patch).toBeCalled();
        expect(wrapper.vm.board.board_lists[0].name).toBe('abc');
        expect(wrapper.vm.board.board_lists[0].order).toBe(0);
        expect(wrapper.vm.board.board_lists[1].name).toBe('def');
        expect(wrapper.vm.board.board_lists[1].order).toBe(1);

    });

    it('can update the card order', () => {
        expect(wrapper.vm.board.board_lists[0].cards[0].name).toBe('test card 1');
        expect(wrapper.vm.board.board_lists[0].cards[0].order).toBe(0);

        // move card from list 1 to list 0 at the first place (moving test card 1 to second place)
        wrapper.vm.board.board_lists[0].cards.unshift(wrapper.vm.board.board_lists[1].cards[0]);
        // remove card from list 1
        wrapper.vm.board.board_lists[1].cards.splice(0,1);

        wrapper.vm.updateCardOrder();

        expect(axios.patch).toBeCalled();
        expect(wrapper.vm.board.board_lists[0].cards[0].name).toBe('test card 3');
        expect(wrapper.vm.board.board_lists[0].cards[0].order).toBe(0);
        expect(wrapper.vm.board.board_lists[0].cards[1].name).toBe('test card 1');
        expect(wrapper.vm.board.board_lists[0].cards[1].order).toBe(1);
    });

});

We start off by defining another axios mock again. In our beforeEach method we create 2 stubs again: List and Modal. We also have to create a mock of the $routes object of vue-router. The first test just checks again that the fetched data on mounting is correctly shown to the user. The second test is for the edit process again. Here we have to add a click as the first action since we have to click the link to show the input first. The create new list test is the same as we’ve seen in the Dashboard test. The delete test doesn’t call the API but listens for an event from the List component to delete it, so we just call the respecting method here. The listens for an open-modal event test needs to test our EventBus. Here we create a Jest spy on it, mount our component again so that our spy is called and then expect that it has been called.

The it sorts lists by order test expects the given sorting order, then reverses the order attributed and checks that the computed method of vue reversed the order correctly. Now there are two tests left which test that the list and card order can be updated via drag&drop. For this we expect the given sorting order, then change the order of our objects instead of the order attribute and call the save method. We then expect that the patch method of axios was called, and the new order including the order attributed have been changed.

tests/Javascript/List.spec.js:

jest.mock('axios', () => ({
    put: jest.fn(() => Promise.resolve({ 
        data: {"id":18,"name":"new name","board_id":5,"order":0,"created_at":"2018-07-05 12:36:47","updated_at":"2018-07-05 12:36:51","cards":[{"id":33,"name":"test card 1","board_list_id":18,"order":0,"description":"The description.","created_at":"2018-07-05 13:51:54","updated_at":"2018-07-05 13:52:14"},{"id":34,"name":"test card 2","board_list_id":18,"order":1,"description":"","created_at":"2018-07-05 13:52:02","updated_at":"2018-07-05 13:52:02"}]}
    })),
    post: jest.fn(() => Promise.resolve({ 
        data: {"id":35,"name":"new card","board_list_id":18,"order":0,"description":"The description.","created_at":"2018-07-05 13:51:54","updated_at":"2018-07-05 13:52:14"}
    })),
    delete: jest.fn(() => Promise.resolve())
}));

import { mount } from '@vue/test-utils';
import List from '@/List.vue';
import axios from 'axios';

describe('List.vue', () => {
    let wrapper;

    beforeEach(async () => {
        wrapper = await mount(List, {
            propsData: {
                list: {"id":18,"name":"def","board_id":5,"order":0,"created_at":"2018-07-05 12:36:47","updated_at":"2018-07-05 12:36:51","cards":[{"id":33,"name":"test card 1","board_list_id":18,"order":1,"description":"The description.","created_at":"2018-07-05 13:51:54","updated_at":"2018-07-05 13:52:14"},{"id":34,"name":"test card 2","board_list_id":18,"order":0,"description":"","created_at":"2018-07-05 13:52:02","updated_at":"2018-07-05 13:52:02"}]}
            },
            stubs: ['card']
        });

        jest.resetModules();
        jest.clearAllMocks();
    });

    it('shows the cards', () => {
        expect(wrapper.vm.list.cards.length).toBe(2);
        expect(wrapper.findAll('card-stub').length).toBe(2);
    });

    it('can emit an update-card-order event', () => {
        wrapper.vm.updateOrder();
        expect(wrapper.emitted()['update-card-order']).toBeTruthy();
    });

    it('can remove a card from the view', () => {
        wrapper.vm.deleteCard({"id":33,"name":"test card 1","board_list_id":18,"order":1,"description":"The description.","created_at":"2018-07-05 13:51:54","updated_at":"2018-07-05 13:52:14"});
        expect(wrapper.vm.list.cards.length).toBe(1);
    });

    it('can delete itself', async () => {
        await wrapper.find('.list-navs a:nth-child(2)').trigger('click');

        expect(axios.delete).toBeCalledWith('/boardLists/18');
        expect(wrapper.emitted()['delete-list']).toBeTruthy();
    });

    it('can update its name', async () => {
        wrapper.find('.list-navs a:nth-child(1)').trigger('click');

        const input = wrapper.find({ ref: 'edit' });
        input.setValue('new name');
        await input.trigger('keyup.enter');

        expect(axios.put).toBeCalledWith('/boardLists/18', { name: 'new name' });
        expect(wrapper.vm.list.name).toBe('new name');
    });

    it('can create a new card', async () => {
        wrapper.find('.card-footer a').trigger('click');

        const input = wrapper.find({ ref: 'new' });
        input.setValue('new card');
        await input.trigger('keyup.enter');

        expect(axios.post).toBeCalledWith('/cards', { list_id: 18, name: 'new card', order: 2 });
        
        expect(wrapper.vm.list.cards.length).toBe(3);
    });

    it('sorts card by order', () => {
        // expect order reversed compared to propsData
        expect(wrapper.vm.orderedList).toEqual([{"id":34,"name":"test card 2","board_list_id":18,"order":0,"description":"","created_at":"2018-07-05 13:52:02","updated_at":"2018-07-05 13:52:02"},
        {"id":33,"name":"test card 1","board_list_id":18,"order":1,"description":"The description.","created_at":"2018-07-05 13:51:54","updated_at":"2018-07-05 13:52:14"}]);
    });

});

The only things that we haven’t seen yet are that we provide propsData to the component and the test for emitted events, which is pretty self-explanatory.

tests/Javascript/Card.spec.js:

jest.mock('axios', () => ({
    put: jest.fn(() => Promise.resolve({ 
        data: {"id":33,"name":"new name","board_list_id":18,"order":0,"description":"The description.","created_at":"2018-07-05 13:51:54","updated_at":"2018-07-05 13:52:14"}
    })),
    delete: jest.fn(() => Promise.resolve())
}));

import { mount } from '@vue/test-utils';
import Card from '@/Card.vue';
import { EventBus } from '@/../EventBus.js';
import axios from 'axios';

describe('Card.vue', () => {
    let wrapper;

    beforeEach(async () => {
        wrapper = await mount(Card, {
            propsData: {
                card: {"id":33,"name":"test card 1","board_list_id":18,"order":0,"description":"The description.","created_at":"2018-07-05 13:51:54","updated_at":"2018-07-05 13:52:14"}
            }
        });

        jest.resetModules();
        jest.clearAllMocks();
    });

    it('can show a description icon', () => {
        expect(wrapper.find('.fa-comment').isVisible()).toBe(true);
    });

    it('can hide a description icon', () => {
        wrapper.setProps({
            card: {"id":34,"name":"test card 2","board_list_id":18,"order":1,"description":"","created_at":"2018-07-05 13:52:02","updated_at":"2018-07-05 13:52:02"}
        });

        expect(wrapper.find('.fa-comment').exists()).toBe(false);
    });

    it('can delete itself', async () => {
        await wrapper.find('.card-navs a:nth-child(2)').trigger('click');

        expect(axios.delete).toBeCalledWith('/cards/33');
        expect(wrapper.emitted()['delete-card']).toBeTruthy();
    });

    it('can update its name', async () => {
        wrapper.find('.card-navs a:nth-child(1)').trigger('click');

        let textarea = wrapper.find('textarea');
        textarea.element.value = 'new name';
        textarea.trigger('input');
        await textarea.trigger('keyup.enter');

        expect(axios.put).toBeCalledWith('/cards/33', { name: 'new name' });
        expect(wrapper.vm.card.name).toBe('new name');
    });

    it('can emit an open-modal event', () => {
        const spy = jest.spyOn(EventBus, '$emit');

        wrapper.find('.card-content div div').trigger('click');

        expect(spy).toBeCalled();
    });

});

Here we added two visual tests: It can show a description icon, and it can hide the icon. One thing to note in the can update its name test is that we have a textarea here. This means the setValue method we used until now doesn’t work so we have to set the content of the textarea ourself and have to trigger the input event after that so the v-model updates.

tests/Javascript/Modal.spec.js:

jest.mock('axios', () => ({
    put: jest.fn(() => Promise.resolve({ 
        data: {"id":33,"name":"test card 1","board_list_id":18,"order":0,"description":"The new description.","created_at":"2018-07-05 13:51:54","updated_at":"2018-07-05 13:52:14"}
    }))
}));

import { mount } from '@vue/test-utils';
import Modal from '@/Modal.vue';
import axios from 'axios';

describe('Modal.vue', () => {
    let wrapper;

    beforeEach(async () => {
        wrapper = await mount(Modal, {
            propsData: {
                card: {"id":33,"name":"test card 1","board_list_id":18,"order":0,"description":"The description.","created_at":"2018-07-05 13:51:54","updated_at":"2018-07-05 13:52:14"}
            }
        });

        jest.resetModules();
        jest.clearAllMocks();
    });

    it('can show the cards description', () => {
        expect(wrapper.find('.modal-body').text()).toContain('The description.');
    });

    it('can show the no description text', () => {
        wrapper.setProps({
            card: {"id":34,"name":"test card 2","board_list_id":18,"order":1,"description":"","created_at":"2018-07-05 13:52:02","updated_at":"2018-07-05 13:52:02"}
        });

        expect(wrapper.find('.modal-body').text()).toContain('No description');
    });

    it('can update the cards description', async () => {
        wrapper.find('small > a').trigger('click');

        const textarea = wrapper.find('textarea');
        textarea.element.value = 'The new description.';
        textarea.trigger('input');
        await wrapper.find('.button').trigger('click');

        expect(axios.put).toBeCalledWith('/cards/' + wrapper.vm.card.id, { description: 'The new description.' });
        expect(wrapper.vm.card.description).toBe('The new description.');
    });

    it('can emit a close-modal event', () => {
        wrapper.find('.modal-close-button').trigger('click');
        
        expect(wrapper.emitted()['close-modal']).toBeTruthy();
    });

});

Here we check for some text to be displayed, the rest of the tests are the same as we’ve seen before.

And with that we have tested all our Vue components with Jest and all API methods with feature tests and PHPUnit. It looks like a lot of code in this part, but if you think about how much we covered with these tests, I would say Jest and vue test utils have frontend testing pretty approachable.

This was the 8th and last part of our series in which we created a Trello clone as a Vue SPA with a Laravel API as it’s backend. We have covered quite a lot: A complete API, backend and frontend testing, continuous deployment, Vue and some basic designing as well as some extra tools like Linters. The complete source code of this series is available on GitHub.

Vue SPA with Laravel API Part 7

2018-08-07T17:00:00+00:00

The complete source code of this series is available on GitHub.

Part 1: Setting up a Vue SPA with a Laravel API as the backend using JWT authentication.
Part 2: Creating everything database related: models, migrations, seeders and factories.
Part 3: Setting up API routes and creating API resource controllers.
Part 4: Testing the API with feature tests and sqlite.
Part 5: Setting up Continuous Deployment with TravisCI and Heroku.
Part 6: Customizing the frontend skeleton, design and Dashboard component.
Part 7: Creating the remaining Vue components: Board, List, Card, Modal. (You are here)
Part 8: Setting up Jest and testing all Vue components with it.

In this part we will create all components of our Board view. A Board contains multiple Lists and each List contains multiple Cards. Additionally each Card can spawn a Modal with complete information about the card (like it’s description).

resources/assets/js/components/Board.vue:

<template>
  <div class="boards">
    <modal 
      v-if="showModal" 
      :card="modalCard" 
      @close-modal="showModal = false"/>
    <ul v-if="board">
      <input 
        v-if="editing" 
        ref="edit" 
        v-model="newName" 
        type="text" 
        class="input" 
        @keyup.enter="updateBoard" 
        @blur="editing = false">
      <span 
        v-else 
        class="board-name"
        @click="editBoard">Board: {{ board.name }}</span>


      <div>
        <draggable 
          v-model="board.board_lists" 
          :options="{group:'lists', ghostClass:'ghost'}" 
          class="dragArea flex-wrapper" 
          @end="updateListOrder">
          <list 
            v-for="list in orderedList" 
            :list="list" 
            :key="list.order + ',' + board.id + ',' + list.id" 
            :id="list.order"
            @delete-list="deleteList" 
            @update-card-order="updateCardOrder"/>
          <div class="list new-list">
            <form @submit.prevent>
              <input 
                v-model="name" 
                type="text" 
                class="input" 
                placeholder="New List name"
                required>
              <button 
                class="button" 
                @click="createNew">Create</button>
            </form>
          </div>
        </draggable>
      </div>
    </ul>

  </div>
</template>
<style scoped>
.board-name {
    font-size: 1.5rem;
    padding-left: 10px;
}

.flex-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.flex-wrapper .list {
    flex: 0 0 auto;
    width: 270px;
    margin: 5px;
}

.dragArea {
    min-height: 15px;
}
</style>
<script>
import axios from 'axios';
import List from './List.vue';
import Modal from './Modal.vue';
import { EventBus } from '../EventBus.js';
import draggable from 'vuedraggable';
import _ from 'lodash';

export default {
    name: 'Board',
    components: {
        List,
        Modal,
        draggable
    },
    data() {
        return {
            board: null,
            name: "",
            showModal: false,
            modalCard: null,
            editing: false,
            newName: "",
        };
    },
    computed: {
        orderedList: function() {
            return _.orderBy(this.board.board_lists, 'order');
        }
    },
    watch: {
        '$route': 'fetchData'
    },
    created() {
        this.fetchData();
    },
    mounted() {
        EventBus.$on('open-modal', card => {
            this.modalCard = card;
            this.showModal = true;
        });
    },
    methods: {
    fetchData() {
        axios
            .get('/boards/' + this.$route.params.id)
            .then(response => {
                this.board = response.data;
            }).catch(() => {});
    },
    createNew() {
      var order = (this.board.board_lists === undefined ? 0 : this.board.board_lists.length);
        axios
            .post('/boardLists', { board_id: this.board.id, name: this.name, order: order })
            .then(response => {
                this.board.board_lists.push(response.data);
            }).catch(() => {});
            this.name = "";
    },
    deleteList: function (boardlist) {
        this.board.board_lists.splice(this.board.board_lists.indexOf(boardlist), 1);
    },
    updateBoard() {
        this.editing = false;
        axios
            .put('/boards/' + this.board.id, { name: this.newName })
            .then((response) => {
                this.board.name = response.data.name;
            }).catch(() => {});
    },
    editBoard() {
        this.editing = true;
        this.newName = this.board.name
        this.$nextTick(() => this.$refs.edit.focus());
    },
    updateListOrder() {
        var i = 0;
        for (let list of this.board.board_lists) {
          list.order = i;
          i++;
        }

        axios
            .patch('/board/updateListOrder', { board: this.board })
            .then(() => {
                //
            }).catch(() => {});
    },
    updateCardOrder() {
        var i = 0;
        for (let list of this.board.board_lists) {
            i = 0;
            for (let c of list.cards) {
                c.order = i;
                i++;
            }
        }

        axios
            .patch('/board/updateOrder', { board: this.board })
            .then(() => {
                //
            }).catch(() => {});
    }
}
}
</script>

That’s quite a lot so let’s start with the script part. The first thing we do is declaring which components we use here. These are the List and draggable components. We need draggable here, since we want the Lists to be draggable. In our data object, board will contain the complete information of our board (containing all lists and cards), name will be bound to the input for creating a new list, editing is a flag that tells us if the board name should be displayed as text or as an input field and newName is the newName of the board if we edit it in the input field.

The computed method uses lodash to order the lists by their order attribute, so it will be displayed in the order that is saved in the backend. Watch will refetch the data if the route changes (this means if we change the url in the browsers address bar it will load the new board we chose). In our methods list fetchData, createNew and updateBoard are pretty simple in that they only do crud stuff. You may ask yourself why do we only remove the element in the array in the deleteList method instead of deleting it with the API? This is because the List component is already doing that and then sending an event to which our Board listens to delete the List in it’s view. editBoard will set the editing flag to true, fill the now visible input field with the boards name and on the next tick, when the input is visible it will focus the input. We do this with the help of $refs. As you can see we gave an attribute of ref="edit" to the input in our template, with this we can easily find the element. We also set a @blur handler on the input. If the input loses focus (the user clicks somewhere else) the editing mode will be done and all changes reset. On enter we will send the changes to the API and display the new name. The editing mode starts by clicking on the board name so it’s basically live editing the text.

Lastly we have updateListOrder and updateCardOrder. The first will loop through all lists in their order after being dragged & dropped and assign each an order number. It will then use the API to save this order of the lists. The updateCardOrder method does the same, but it loops through each card in each list.

At the top of the template we have the Modal component. We need to have it in this component because it would be inside a draggable component if we nested it deeper. This would mean we could drag&drop the modal.

The list design is quite simple: We use a flex wrapper on the draggable element, and flex items on the list elements. The flex wrapper will not break but overflow in x. This means each List will be placed to the right of the previous and we never start a new line, but make it scrollable to the right. The new List form is another flex item which is always last in the list. We use two options on the draggable component: group, which will keep list and card dragging distinct and ghostclass, which will alter the design of dragging. The chosen ghostClass here will display a preview of how the elements will look before dropping the element. @end calls the updateOrder method after dropping an element.

There are a whole bunch of bindings and event handlers in there, but they are mostly pretty straightforward. Those event handlers containing a dash are events emitted by child components at which we will look now starting with resources/assets/js/components/List.vue:

<template>
  <div class="list-wrapper">
    <div class="card list">
      <header class="card-header board-list">
        <p class="card-header-title">
          <input 
            v-if="editing" 
            ref="edit" 
            v-model="newName" 
            type="text" 
            class="input" 
            @keyup.enter="updateList" 
            @blur="editing = false">
          <span v-else>List: {{ list.name }} <span class="list-navs"><a @click.prevent="clickEdit"><i class="fas fa-edit"/></a> <a @click.prevent="deleteThis"><i class="fas fa-trash"/></a></span></span>
        </p>
      </header>
      <div class="card-content">
        <draggable 
          v-model="list.cards" 
          :options="{group:'cards', ghostClass:'ghost'}" 
          class="dragArea" 
          @end="updateOrder">
          <card 
            v-for="card in orderedList" 
            :card="card" 
            :key="card.order + ',' + list.id + ',' + card.id" 
            :id="card.order"
            @delete-card="deleteCard"/>
        </draggable>
      </div>
      <footer class="card-footer">
        <input 
          v-if="showNew" 
          ref="new" 
          v-model="name" 
          type="text" 
          class="input" 
          placeholder="New Card name"
          @keyup.enter="createNew"
          @blur="showNew = false">
        <div v-else><a @click.prevent="clickNew">Create new Card</a></div>
      </footer>
    </div>
  </div>
</template>
<style scoped>
.dragArea {
    min-height: 15px;
}

.list-navs {
  display: none;
  position: absolute;
  right: 12px;
  top: 12px;
}

.board-list:hover .list-navs {
  display: block;
}

.card-footer {
  padding-bottom: 7px;
  padding-top: 7px;
}

.card-footer div {
  margin: auto;
}

.list-wrapper {
    flex: 0 0 auto;
    width: 270px;
    margin: 5px;
}

.list-wrapper .card.list {
    min-width: 270px;
}
</style>
<script>
import axios from 'axios';
import Card from './Card.vue';
import draggable from 'vuedraggable';
import _ from 'lodash';

export default {
    name: 'List',
    components: {
        Card,
        draggable
    },
    props: {
        list: { type: Object, required: true }
    },
    data() {
        return {
            name: "",
            editing: false,
            showNew: false,
            newName: "",
        };
    },
    computed: {
        orderedList: function() {
            return _.orderBy(this.list.cards, 'order');
        }
    },
    methods: {
    createNew() {
        var order = (this.list.cards === undefined ? 0 : this.list.cards.length);
        axios
            .post('/cards', { list_id: this.list.id, name: this.name, order: order })
            .then(response => {
                this.list.cards.push(response.data);
                this.name = "";
                this.showNew = false;
            }).catch(() => {});
    },
    deleteCard: function (card) {
        this.list.cards.splice(this.list.cards.indexOf(card), 1);
    },
    deleteThis() {
        axios
            .delete('/boardLists/' + this.list.id)
            .then(() => {
                this.$emit('delete-list', this.list);
            }).catch(() => {});
    },
    updateList() {
        this.editing = false;
        axios
            .put('/boardLists/' + this.list.id, { name: this.newName })
            .then((response) => {
                this.list.name = response.data.name;
            }).catch(() => {});
    },
    clickEdit() {
        this.editing = true;
        this.newName = this.list.name;
        this.$nextTick(() => this.$refs.edit.focus());
    },
    clickNew() {
        this.showNew = true;
        this.$nextTick(() => this.$refs.new.focus());
    },
    updateOrder() {
        this.$emit('update-card-order', this);
    }
}
}
</script>

Designwise we use a bulma card, this time however with a header and a footer. The footer contains a link to create a new card, when clicked it will turn into another input that will be focused and will disappear onBlur. The header contains the List name again with a live edit feature, this time however with an edit button instead of clicking the name and a delete button, which will be displayed only on hover. Both methods work the same as we’ve seen before. We can also see two this.$emit(); calls which emit the two custom events we listened for in the Board component.

Almost everything is the same as the Board component, which makes sense since a board shows a list of things and a list shows a list of things. So the rest of this component should be pretty simple to understand.

Lets get to the Card component which will be a lot simpler: resources/assets/js/components/Card.vue:

<template>
  <div class="card board-card">
    <div class="card-content">
      <textarea 
        v-if="editing" 
        ref="edit" 
        v-model="newName" 
        type="text" 
        class="textarea" 
        @keyup.enter="updateCard" 
        @blur="editing = false"/>
      <div v-else>
        <span class="card-navs"><a @click.prevent="editCard"><i class="fas fa-edit"/></a> <a @click.prevent="deleteThis"><i class="fas fa-trash"/></a></span>
        <div @click="openModal">{{ card.name }}
        <span v-if="card.description"><br><i class="fas fa-comment"/></span></div>
      </div>
    </div>
  </div>
</template>
<style>
.card-navs {
  display: none;
  position: absolute;
  right: 12px;
}

.board-card {
  background-color: #363636;
  margin-bottom: 5px;
}

.board-card:hover .card-navs {
  display: block;
}

.board-card .card-content {
  padding: 0.75rem;
}
</style>
<script>
import axios from 'axios';
import { EventBus } from '../EventBus.js';

export default {
    name: 'Card',
    props: {
        card: { type: Object, required: true }
    },
    data() {
        return {
            editing: false,
            newName: "",
        };
    },
    methods: {
    deleteThis() {
        axios
            .delete('/cards/' + this.card.id)
            .then(() => {
                this.$emit('delete-card', this.card);
            }).catch(() => {});
    },
    updateCard() {
        this.editing = false;
        axios
            .put('/cards/' + this.card.id, { name: this.newName })
            .then((response) => {
                this.card.name = response.data.name;
            }).catch(() => {});
    },
    editCard() {
        this.editing = true;
        this.newName = this.card.name;
        this.$nextTick(() => this.$refs.edit.focus());
    },
    openModal() {
        EventBus.$emit('open-modal', this.card);
    }
}
}
</script>

We again have a bulma card which will be stacked one below the other this time and on hover it will display an edit and delete link. It is again live editing by turning the card text into a textarea which onBlur resets again. The textarea saves on enter, so we can’t use new lines inside. But we could change that of course and add a save button. There is nothing really special here besides that, since we have seen everything before.

Lastly the resources/assets/js/components/Modal.vue component:

<template>
  <transition name="modal">
    <div class="modal-mask">
      <div 
        class="modal-wrapper" 
        @click.self="closeModal">
        <div class="modal-container">

          <div class="modal-header">
            <a 
              class="modal-close-button" 
              @click="closeModal">
              <i class="fas fa-times fa-lg"/>
            </a>
            <h2>{{ card.name }}</h2>
          </div>

          <div class="modal-body">
            <h3>Description <small><a @click="startEdit">Edit</a></small></h3>
            <span v-if="!editing">{{ card.description || "No description" }}</span>
            <span v-else>
              <textarea 
                v-model="newDesc" 
                class="textarea"/>
              <a 
                class="button is-success" 
                @click="updateCard">Save</a>
              <a @click="stopEdit">
                <i class="fas fa-times fa-lg"/>
              </a>
            </span>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<style>
h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.25rem;
}

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .5s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 600px;
  height: 600px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #242424;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
}

.modal-body {
  margin: 20px 0;
}

.modal-body textarea {
    margin-bottom: 15px;
}

.modal-body i {
    margin-top: 10px;
    margin-left: 15px;
}

.modal-close-button {
  float: right;
}

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>
<script>
import axios from 'axios';

export default {
    name: 'Modal',
    props: {
        card: { type: Object, required: true }
    },
    data() {
        return {
            editing: false,
            newDesc: "",
        };
    },
    methods: {
    updateCard() {
        this.editing = false;
        axios
            .put('/cards/' + this.card.id, { description: this.newDesc })
            .then((response) => {
              this.card.description = response.data.description;
            }).catch(() => {});
    },
    closeModal() {
        this.$emit('close-modal');
    },
    startEdit() {
        this.newDesc = this.card.description;
        this.editing = true;
    },
    stopEdit() {
        this.newDesc = "";
        this.editing = false;
    }
}
}
</script>

Here we first have a mask, which is a simple black overlay with 50% opacity, which will be behind our modal. The modal itself displays the cards name and it’s description. The description is editable, this time not with an onBlur effect. We display an icon to abort the editing process. We also have a scale transform animation, the rest is just some nice designing.

We’re almost done with our project. The last post will cover how we set up Jest, add it to TravisCI and write tests for all our components.

Vue SPA with Laravel API Part 6

2018-07-31T17:00:00+00:00

The complete source code of this series is available on GitHub.

Part 1: Setting up a Vue SPA with a Laravel API as the backend using JWT authentication.
Part 2: Creating everything database related: models, migrations, seeders and factories.
Part 3: Setting up API routes and creating API resource controllers.
Part 4: Testing the API with feature tests and sqlite.
Part 5: Setting up Continuous Deployment with TravisCI and Heroku.
Part 6: Customizing the frontend skeleton, design and Dashboard component. (You are here)
Part 7: Creating the remaining Vue components: Board, List, Card, Modal.
Part 8: Setting up Jest and testing all Vue components with it.

Lets work a bit on our frontend after all that backend stuff. For this we need to install some additional dependencies:

npm install --save-dev @fortawesome/fontawesome-free bulma vuedraggable

We use fontawesome for icons, bulma for our general design and vuedraggable to let our lists and cards be reordered via drag&drop however the user wants.

We also have ESLint, stylelint and php-cs-fixer installed and made an npm script similar to this. This allows us to run all three linters with the fix option at the same time which will fix all our php, vue (only template and js) and scss files.

We want to override some bulma variables to change our design so add these to the resources/assets/sass/_variables.scss file:

$text: hsl(0, 0%, 94%);
$text-light: hsl(0, 0%, 94%);
$text-strong: hsl(0, 0%, 94%);
$link: hsl(348, 100%, 61%);
$link-hover: hsl(348, 100%, 41%);
$primary: #242424;
$input-background-color: #363636;
$input-color: #fff;
$input-border-color: #242424;
$input-hover-border-color: #242424;
$button-color: #fff;
$button-background-color: #242424;
$button-hover-color: #fff;
$button-border-width: 0;
$button-focus-color: #fff;
$button-active-color: #fff;
$message-body-padding: 0.75rem;

Also lets import bulma and fontawesome and set some general styles in our resources/assets/sass/app.scss file:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600');

// Variables
@import 'variables';

// Bulma
// change variables before import
@import './node_modules/bulma/bulma.sass';

// FontAwesome
@import './node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import './node_modules/@fortawesome/fontawesome-free/scss/fa-regular.scss';
@import './node_modules/@fortawesome/fontawesome-free/scss/fa-brands.scss';
@import './node_modules/@fortawesome/fontawesome-free/scss/fa-solid.scss';

html {
  background-color: #121212;
}

.main-wrapper {
  padding: 10px;
}

.label {
  color: #fff;
}

.button:hover {
  background-color: #363636;
}

.message.is-danger {
  background-color: #242424;
}

.card {
  background-color: #232323;
  border-radius: 5px;
}

In our resources/assets/js/bootstrap.js we remove jquery and bootstrap since we’re not using these two.

Lets get to the Javascript part. We will need an EventBus later. Luckily Vue is an implementation of an EventBus so we just create this file resources/assets/js/EventBus.js:

import Vue from 'vue';

export const EventBus = new Vue();

And our EventBus is done. Next we update our resources/assets/js/app.js file:

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import VueAxios from 'vue-axios';
import App from './App.vue';
import Dashboard from './components/Dashboard.vue';
import Board from './components/Board.vue';
import Home from './components/Home.vue';
import Register from './components/Register.vue';
import Login from './components/Login.vue';


Vue.use(VueRouter);
Vue.use(VueAxios, axios);
axios.defaults.baseURL = document.head.querySelector('meta[name="api-base-url"]').content + '/api';

const router = new VueRouter({
    routes: [{
        path: '/',
        name: 'home',
        component: Home
    },{
        path: '/register',
        name: 'register',
        component: Register,
        meta: {
            auth: false
        }
    },{
        path: '/login',
        name: 'login',
        component: Login,
        meta: {
            auth: false
        }
    },{
        path: '/dashboard',
        name: 'dashboard',
        component: Dashboard,
        meta: {
            auth: true
        }
    },{
        path: '/board/:id',
        name: 'board_view',
        component: Board,
        meta: {
            auth: true
        }
    }]
});


Vue.router = router
Vue.use(require('@websanova/vue-auth'), {
   auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
   http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
   router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
});
App.router = Vue.router
App.data = {
    loading: false,
    error: false,
    errors: {},
}
App.methods = {
    closeErrors() {
        this.error = false;
        this.errors = {};
    }
}
const vueApp = new Vue(App).$mount('#app');

axios.interceptors.request.use(config => {
    vueApp.loading = true;
    return config;
});

axios.interceptors.response.use(config => {
    vueApp.loading = false;
    vueApp.error = false;
    return config;
}, error => {
    vueApp.loading = false;
    vueApp.errors = error.response.data.errors || { "none": [error.response.data.message] };
    vueApp.error = true;
    return Promise.reject(error);
});

All we did is add a new route to view a board, add a data and a methods object to our root vue object and create some axios interceptors. The axios interceptors will set the loading state of our application on our root object before each request it makes and when it gets a response it will automatically check for Laravel errors (we handle validation and other errors the same here and display all, you could also just display all validation errors, which for a real project in production is a way better idea than just outputting every error you get) and set the loading state to false again. We use these root element data objects in our resources/assets/js/App.vue file but we could use them anywhere:

<template>
  <div>
    <div v-if="$auth.ready()">
      <nav class="navbar is-primary">
        <div class="navbar-brand">
          <router-link 
            v-if="!$auth.check()" 
            :to="{ name: 'home' }" 
            class="navbar-item">Boards</router-link>
          <router-link 
            v-if="$auth.check()" 
            :to="{ name: 'dashboard' }" 
            class="navbar-item">Boards</router-link>
        </div>
        <div class="navbar-menu">
          <div class="navbar-start"/>
          <div class="navbar-end">
            <div 
              v-if="$root.loading" 
              class="navbar-item">
              <i 
                class="fas fa-spinner fa-spin fa-lg" 
                title="Loading/Saving"/>
            </div>
            <div 
              v-if="!$root.loading" 
              class="navbar-item">
              <i 
                class="fas fa-cloud fa-lg" 
                title="Everything is saved"/>
            </div>
            <router-link 
              v-if="!$auth.check()" 
              :to="{ name: 'login' }" 
              class="navbar-item">Login</router-link>
            <router-link 
              v-if="!$auth.check()" 
              :to="{ name: 'register' }" 
              class="navbar-item">Register</router-link>
            <div 
              v-if="$auth.check()" 
              class="navbar-item"><i class="fas fa-user"/> {{ $auth.user().name }}</div>
            <a 
              v-if="$auth.check()" 
              href="#" 
              class="navbar-item" 
              @click.prevent="$auth.logout()">Logout</a>
          </div>
        </div>
      </nav>
      <div class="main-wrapper">
        <div 
          v-if="$root.error" 
          class="message is-danger">
          <div class="message-body">
            <span class="error-close">
              <a @click.prevent="closeErrors"><i class="fas fa-times"/></a>
            </span>
            Oops we have some errors: <ul>
              <li 
                v-for="(e,index) in $root.errors" 
                :key="index">
                <span 
                  v-for="message in e" 
                  :key="message">{{ message }}</span>
              </li>
            </ul>
          </div>
        </div>
        <router-view/>
      </div>
    </div>
    <div v-if="!$auth.ready()">
      <section class="hero is-fullheight">
        <div class="hero-head"/>
        <div class="hero-body">
          <div class="container has-text-centered">
            <i class="fas fa-spinner fa-spin fa-3x"/>
          </div>
        </div>
        <div class="hero-foot"/>
      </section>
    </div>
  </div>
</template>
<style>
.navbar.is-primary .navbar-end > a.navbar-item:hover,
.navbar.is-primary .navbar-brand > a.navbar-item:hover {
  background-color: #363636;
}

.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.fa-user {
  margin-right: 5px;
}

.error-close {
  position: absolute;
  right: 25px;
}

.error-close i {
  font-size: 1.75rem;
}
</style>

We changed quite a few things here. First we added two icons in our menu which will change depending on the $root.loading state in our root vue object. If loading is set to true, we will display a spinning icon which is signaling the user that we are doing some kind of data fetching or saving in the background. If loading is set to false, we display a cloud icon which is signaling that everything is synced with the backend. These two icons are from fontawesome. We then display a user icon and the user name and next to it the logout button. We also put a div in front of our router view that is only showing when our axios interceptor got an Laravel error. It will then display all errors, so if you have multiple validation errors on your form it will list all of them. It also has a red cross icon that can close the message, else it will disappear after the next axios request. Lastly we changed our loading message for the entire page (after pressing F5 or when loading for the first time). Instead of the simple loading text we now use a bulma fullheight hero. This allows us to horizontally and vertically center the same fontawesome spinning icon we used before but this time a bit larger. This will indicate to the user that the page is trying to figure out if the user is authenticated or not.

And with this we have our application skeleton ready. All that’s left is to create all necessary vue components for our dashboard and the board view. We will need: The already existing Dashboard.vue which will display a list of all of the users boards, Board.vue which will be the main board view and it contains List.vue which is a single list on the board which contains Card.vue which is a single card in a given list and Modal.vue which will overlay a modal above the board view to show more details of a card. In our project the only detail shown here is it’s description, but we could extend it with more features like tags, comments etc.

Lets start with the simplest of those, the Dashboard located in resources/assets/js/components/Dashboard.vue:

<template>
  <div>
    <h1>Your Boards</h1>
    <div class="flex-wrapper">
      <div 
        v-for="board in boards"
        :key="board.id" 
        class="flex-item board">

        <div class="card">
          <div class="card-content">
            <router-link :to="{ name: 'board_view', params: { id : board.id }}">{{ board.name }}</router-link>
            <span class="board-navs">
              <a @click.prevent="deleteThis(board)"><i class="fas fa-trash"/></a>
            </span>
          </div>
        </div>
      </div>

      <div class="flex-item">
        <form @submit.prevent>
          <input 
            v-model="name" 
            type="text" 
            class="input" 
            placeholder="New Board name"
            required>
          <button 
            class="button" 
            @click="createNew">Create</button>
        </form>
      </div>
    </div>
  </div>
</template>
<style scoped>
h1 {
    font-size: 1.75rem;
    margin-left: 10px;
}

.flex-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.flex-item {
    flex: 0 0 auto;
    width: 270px;
    margin: 5px;
}

.board-navs {
  display: none;
  position: absolute;
  right: 12px;
  top: 25px;
}

.board:hover .board-navs {
  display: block;
}
</style>
<script>
import axios from 'axios';

export default {
    data() {
        return {
            boards: null,
            name: "",
        };
    },
    created() {
        this.fetchData();
    },
    methods: {
    fetchData() {
        axios
            .get('/boards')
            .then(response => {
                this.boards = response.data;
            }).catch(() => {});
    },
    createNew() {
        axios
            .post('/boards', { name: this.name })
            .then(response => {
                this.boards.push(response.data);
            }).catch(() => {});
    },
    deleteThis: function(board) {
        axios
            .delete('/boards/' + board.id)
            .then(() => {
                this.boards.splice(this.boards.indexOf(board), 1);
            }).catch(() => {});
    }
}
}
</script>

When the component is created, we fetch the data, which is the index method of our BoardController. We list each board in a flexbox as a bulma card. Each card contains a router link to the board view and on hover shows a trash icon. When clicking the trash icon vue will execute the deleteThis method which will simply use the delete API endpoint. The last flexbox item is a form to create a new board. The component is very straightforward since we just have 3 crud methods implemented here with a bit of design.

The other 4 components are a bit more complex since they will include drag&drop and more crud functionality. We will look at them in the next part.

Vue SPA with Laravel API Part 5

2018-07-27T17:00:00+00:00

The complete source code of this series is available on GitHub.

Part 1: Setting up a Vue SPA with a Laravel API as the backend using JWT authentication.
Part 2: Creating everything database related: models, migrations, seeders and factories.
Part 3: Setting up API routes and creating API resource controllers.
Part 4: Testing the API with feature tests and sqlite.
Part 5: Setting up Continuous Deployment with TravisCI and Heroku. (You are here)
Part 6: Customizing the frontend skeleton, design and Dashboard component.
Part 7: Creating the remaining Vue components: Board, List, Card, Modal.
Part 8: Setting up Jest and testing all Vue components with it.

In this part we want to setup TravisCI so that it runs all our feature tests on different php versions and if everything works it should automatically deploy everything to heroku.

First we need to install the cli tools of TravisCI and heroku:

gem install travis -v 1.8.8 --no-rdoc --no-ri
sudo snap install heroku --classic

Go to Travis website and sign in with your GitHub account. Next click on the switch of your repository to activate travis.

Next we have to create the heroku app. So go to herokus website and sign up/login. Choose create new app, put in a name and a region and create it. Next open the app and configure Add-ons. Here search for JawsDB MySQL and choose Kitefin Shared (Free) and add it to your app.

Next go to the settings of your app and add a buildpack: heroku/php (the officially supported php buildpack). Next reveal the config vars and first copy the JAWSDB_URL to DATABASE_URL (so that their contents are the same). Next create APP_KEY and paste in your Laravel APP_KEY. Also create an APP_URL and paste in the url of your heroku app. You can find this url below in the settings. Now we still need: DB_CONNECTION = heroku, SESSION_DRIVER = cookie and JWT_SECRET set to the secret key we created in the beginning of this tutorial with: php artisan jwt:secret. Now we only have to create and change some files in our project:

First create a file called Profile for heroku:

web: vendor/bin/heroku-php-nginx -C nginx.conf public/

and another file called nginx.conf that we used in the Procfile:

location / {
    # try to serve file directly, fallback to rewrite
    try_files $uri @rewriteapp;
}

location @rewriteapp {
    # rewrite all to app.php
    rewrite ^(.*)$ /index.php$1 last;
}

Next create the Travis config file called .travis.yml:

language: php

php:
- 7.1
- 7.2

before_script:
- phpenv config-rm xdebug.ini
- cp .env.example .env
- rm phpunit.xml
- cp phpunit.xml.travis phpunit.xml
- mysql -e 'create database boards_test;' -u root
- composer install --no-interaction
- php artisan key:generate
- npm install

script:
- vendor/bin/phpunit
- npm run production

services:
- mysql

deploy:
  provider: heroku
  api_key:
    secure: LF7+Viu6rjrt84eXNPJOqEwJW3i8omDRFZoAUwrxUDBC+7G3+AFXV+Rn+BXm+XnniWdpy9N0k0LNyuDaSajrBNtETYcgnadzR/u29g1+iZJuQyOScmtQ44OeEPBxXP8ZbOhAWFDGI0yM8cWOGayAfcxvtu9YJFremZ0K6ZXCQC1l5FBHShvG7w5m2G+WXkFBSk2VNaJndnfIH8XrgRBJTgTXFHZT64wXh7UEevoZWW/Y+rwmCDhOEzbrBxVXlvyZoGmhKMSyWOPe2oJ0dtRuH440ZJsVES01YBqaFNJpnPKX14JkSxz1oHBi7KnRzdnFO2GUIxaPG3ZCPlsZ8xIYG7mwuU5pzo2KwsB37k9L76Tw4ZIQbQOQnJ5/M3H7jsdFS0/2rMaGKw8ONm7ckRRsMSRGWcABc/r30ImjQAS+s9Y9IVej6TettOUNFGZ3USR26AIhQMgyTkn1t/mhCsnXroWfccLzlVnn1SYjjmWrEIzNHm0aNsSnzOP+e2JloratrZ6km/fSTJYIDooLBKLl/7VnsOP7Fjk7FmU/pxd0PsMb39M1304FyfTvCEJ//J1RYHOLnR827HKaIXfKWfHZVWL9Ukf1+n4SBIaQ6OMXUC2U1ZftzcMY4wXIZTfNzUhnsKtWSXIUoEgyxP6uD4/HgupbemO2yQi9gEfnuuN+9G8=
  app: ddmler-boards
  skip_cleanup: true
  on:
    repo: ddmler/boards
    php: 7.1

The api_key was added automatically with this command:

heroku login
travis encrypt $(heroku auth:token) --add deploy.api_key

Which will encrypt your heroku auth:token so that only Travis can decrypt and use it. You should never publish your auth token from heroku, only the encrypted version here.

We let Travis test PHP 7.1 and 7.2. First we remove XDebug, then we copy the files into the correct place so that Travis has the correct environment variables. Next we use MySQL to create our database and let composer and npm install our dependencies. We also set the Laravel APP_KEY. For our script we run our PHPUnit tests with MySQL and if that is a success we create our npm production assets. At the last step we deploy to heroku with our api_key. We only deploy on one php version (or else we would have 2 deploys for each commit).

Since we use MySQL we have to change the defaultStringLength because we use utf8mb4 as a character encoding which uses 4 bytes and we would use too much space for our unique email column in the users table. (Indexes can only be about 750 bytes, in our encoding it would be above 1000 with standard values)

We do that by opening app/Providers/AppServiceProvider.php and changing it to:

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Schema::defaultStringLength(191); // Hack for older MySQL version in TravisCI
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

Next let’s create the database connection we told heroku to use (we named it heroku in it’s environment vars). Add this to the connections array in config/database.php:

'heroku' => [
            'driver'   => 'mysql',
            'host'     => @parse_url(getenv("DATABASE_URL"))["host"],
            'database' => @substr(parse_url(getenv("DATABASE_URL"))["path"], 1),
            'username' => @parse_url(getenv("DATABASE_URL"))["user"],
            'password' => @parse_url(getenv("DATABASE_URL"))["pass"],
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'strict' => true,
            'engine' => null,
        ],

Now copy phpunit.xml to phpunit.xml.travis (so that we have both) and remove these 2 lines from phpunit.xml.travis (we added those in a post before):

<env name="DB_CONNECTION" value="sqlite"/>
<env name="DB_DATABASE" value=":memory:"/>

With this our local tests with phpunit will run with sqlite (set in phpunit.xml) and Travis will run them with MySQL. With this setup we have very fast local tests and Travis tests that everything works in MySQL which we use in production in heroku.

Lastly we need to change our .env.example file and set these DB variables:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=boards_test
DB_USERNAME=root
DB_PASSWORD=

The reason for that is that Travis will copy the example file and use it as it’s environment file. So these are the credentials for Travis.

Now commit everything and if your phpunit tests pass, Travis will run your npm production script und deploy everything to heroku.

Since we have migrations and seeders we want to run we have to use herokus run command (or use the web console in your app dashboard):

heroku run "php artisan migrate && php artisan db:seed"

And that’s it you should now be able to visit your heroku app and login. In part 6 we will work a bit on the frontend markup and design.

Vue SPA with Laravel API Part 4

2018-07-24T17:00:00+00:00

The complete source code of this series is available on GitHub.

Part 1: Setting up a Vue SPA with a Laravel API as the backend using JWT authentication.
Part 2: Creating everything database related: models, migrations, seeders and factories.
Part 3: Setting up API routes and creating API resource controllers.
Part 4: Testing the API with feature tests and sqlite. (You are here)
Part 5: Setting up Continuous Deployment with TravisCI and Heroku.
Part 6: Customizing the frontend skeleton, design and Dashboard component.
Part 7: Creating the remaining Vue components: Board, List, Card, Modal.
Part 8: Setting up Jest and testing all Vue components with it.

In this part we want to setup a sqlite database for our testsuite and create feature tests for our API. The feature tests here will have a simple design: make a json call to each API endpoint, assert the correct HTTP response code and assert that the intended functionality is working correctly if the provided data is correct.

We will also add some tests that test validation errors and authorization.

To set this up we first have to add some more environment variables to phpunit.xml below the other env entries:

<env name="DB_CONNECTION" value="sqlite"/>
<env name="DB_DATABASE" value=":memory:"/>

Next lets create a new tests/DatabaseTestCase.php file that will look like this:

<?php

namespace Tests;

use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Support\Facades\Artisan;

abstract class DatabaseTestCase extends TestCase
{
    use RefreshDatabase;

    public function setUp()
    {
        parent::setUp();
        // Deactivated - right now we create all objects ourselves
        // but you could use this to generate dummy data
        // Artisan::call('db:seed');
    }
}

The reason for that is that we add the RefreshDatabase which will use php artisan migrate:fresh before each test and maybe want to let artisan call our seeders. Since we may don’t want every TestCase to do that we create an extra class here which we will use if we need that functionality. Next we let artisan create our feature test classes:

php artisan make:test BoardTest
php artisan make:test BoardListTest
php artisan make:test CardTest

Let’s, as always, begin with tests/Feature/BoardTest.php:

<?php

namespace Tests\Feature;

use Tests\DatabaseTestCase;
use Illuminate\Foundation\Testing\WithFaker;
use App\User;
use App\Board;
use App\BoardList;

class BoardTest extends DatabaseTestCase
{
    protected $user;
    protected $board;

    public function setUp()
    {
        parent::setUp();
        $this->user = factory(User::class)->create();
        $this->board = factory(Board::class)->create(['user_id' => $this->user->id]);
    }

    public function testLoginRequired()
    {
        $this->json('GET', 'api/boards')
            ->assertStatus(401);
    }

    public function testUserCanSeeBoards()
    {
        $this->actingAs($this->user)
            ->json('GET', 'api/boards')
            ->assertStatus(200)
            ->assertJson([
                ['name' => $this->board->name]
            ])
            ->assertJsonCount(1);
    }

    public function testUserCanViewHisBoard()
    {
        $boardLists = factory(BoardList::class, 2)->create(['board_id' => $this->board->id]);

        $this->actingAs($this->user)
            ->json('GET', 'api/boards/' . $this->board->id)
            ->assertStatus(200)
            ->assertJsonCount(2, 'board_lists');
    }

    public function testUserCanCreateBoards()
    {
        $payload = ['name' => 'My Board'];

        $this->actingAs($this->user)
            ->json('POST', 'api/boards', $payload)
            ->assertStatus(201)
            ->assertJson(['name' => $payload['name']]);
    }

    public function testCreateBoardValidation()
    {
        $this->actingAs($this->user)
            ->json('POST', 'api/boards')
            ->assertStatus(422)
            ->assertJson([
                "message" => "The given data was invalid.",
                "errors" => [
                    "name" => ["The name field is required."]
                ]
            ]);
    }

    public function testUserCanUpdateBoard()
    {
        $payload = ['name' => 'My Board'];

        $this->actingAs($this->user)
            ->json('PATCH', 'api/boards/' . $this->board->id, $payload)
            ->assertStatus(200)
            ->assertJson(['name' => $payload['name']])
            ->assertJsonMissing(['name' => $this->board->name]);
    }

    public function testUpdateValidation()
    {
        $this->actingAs($this->user)
            ->json('PATCH', 'api/boards/' . $this->board->id)
            ->assertStatus(422)
            ->assertJson([
                "message" => "The given data was invalid.",
                "errors" => [
                    "name" => ["The name field is required."]
                ]
            ]);
    }

    public function testUserCanDeleteBoards()
    {
        $this->actingAs($this->user)
            ->json('DELETE', 'api/boards/' . $this->board->id)
            ->assertStatus(204);

        // Check that it is really gone with a GET request of all boards of the user
        $this->actingAs($this->user)
            ->json('GET', 'api/boards')
            ->assertJsonCount(0);
    }

    public function testAuthorization()
    {
        $user2 = factory(User::class)->create();

        $this->actingAs($user2)
            ->json('GET', 'api/boards/' . $this->board->id)
            ->assertStatus(403);

        $this->actingAs($user2)
            ->json('DELETE', 'api/boards/' . $this->board->id)
            ->assertStatus(403);

        $this->actingAs($user2)
            ->json('PATCH', 'api/boards/' . $this->board->id)
            ->assertStatus(403);
        
        $this->actingAs($user2)
            ->json('PATCH', 'api/board/updateOrder', ['board' => $this->board])
            ->assertStatus(403);

        $this->actingAs($user2)
            ->json('PATCH', 'api/board/updateListOrder', ['board' => $this->board])
            ->assertStatus(403);
    }
}

Let’s break it down a bit: We use a setup method that will be called before each test in this file. In it we call the parent setup (of our DatabaseTestCase, which means it will drop all tables and run the migrations) and then create a user and a board belonging to the user. This way we don’t have to copy the setup code into every test we need a user with a board (which is pretty much every test here).

The first test loginRequired checks that we get the Unauthenticated status code when we’re not acting as the created user. In the second test we act as the user and assert that we see the board in the json response of our board overview (index method in the controller). The next test checks that we can see 2 BoardLists in the view of a specific board.

The next two tests check the store method of the controller. We first check that with a correct payload provided the board is created correctly. The other test checks that without a payload we get the validation error that the name is required. The same is done for the update method with the next two tests. The delete test just deletes the board and checks that we get 0 boards when we call the index method after that.

The last test checks for authorization at all controller methods that need to be protected from access of another user. For this we create a second user and try to access all API endpoints that should be protected of the first users board. We assert that all of them fail with an Unauthorized message.

Let’s continue with tests/Feature/BoardListTest.php:

<?php

namespace Tests\Feature;

use Tests\DatabaseTestCase;
use Illuminate\Foundation\Testing\WithFaker;
use App\User;
use App\Board;
use App\BoardList;

class BoardListTest extends DatabaseTestCase
{
    protected $user;
    protected $board;
    protected $boardList;

    public function setUp()
    {
        parent::setUp();
        $this->user = factory(User::class)->create();
        $this->board = factory(Board::class)->create(['user_id' => $this->user->id]);
        $this->boardList = factory(BoardList::class)->create(['board_id' => $this->board->id]);
    }

    public function testLoginRequired()
    {
        $payload = ['name' => 'My List', 'order' => 1, 'board_id' => $this->board->id];

        $this->json('POST', 'api/boardLists', $payload)
            ->assertStatus(401);
    }

    public function testUserCanCreateLists()
    {
        $payload = ['name' => 'My List', 'order' => 1, 'board_id' => $this->board->id];

        $this->actingAs($this->user)
            ->json('POST', 'api/boardLists', $payload)
            ->assertStatus(201)
            ->assertJson(['name' => $payload['name']]);
    }

    public function testCreateValidation()
    {
        $this->actingAs($this->user)
            ->json('POST', 'api/boardLists')
            ->assertStatus(422)
            ->assertJson([
                "message" => "The given data was invalid.",
                "errors" => [
                    "name" => ["The name field is required."],
                    "order" => ["The order field is required."],
                    "board_id" => ["The board id field is required."],
                ]
            ]);
    }

    public function testUserCanUpdateLists()
    {
        $payload = ['name' => 'My List'];

        $this->actingAs($this->user)
            ->json('PATCH', 'api/boardLists/' . $this->boardList->id, $payload)
            ->assertStatus(200)
            ->assertJson(['name' => $payload['name']])
            ->assertJsonMissing(['name' => $this->boardList->name]);
    }

    public function testUpdateValidation()
    {
        $this->actingAs($this->user)
            ->json('PATCH', 'api/boardLists/' . $this->boardList->id)
            ->assertStatus(422)
            ->assertJson([
                "message" => "The given data was invalid.",
                "errors" => [
                    "name" => ["The name field is required."]
                ]
            ]);
    }

    public function testUserCanDeleteLists()
    {
        $this->actingAs($this->user)
            ->json('DELETE', 'api/boardLists/' . $this->boardList->id)
            ->assertStatus(204);

        // Check that it is really gone with a GET request of the board of the user
        $this->actingAs($this->user)
            ->json('GET', 'api/boards/' . $this->board->id)
            ->assertJsonCount(0, 'board_lists');
    }

    public function testAuthorization()
    {
        $user2 = factory(User::class)->create();
        $payload = ['name' => 'My List', 'order' => 1, 'board_id' => $this->board->id];

        $this->actingAs($user2)
            ->json('POST', 'api/boardLists', $payload)
            ->assertStatus(403);

        $this->actingAs($user2)
            ->json('PATCH', 'api/boardLists/' . $this->boardList->id, $payload)
            ->assertStatus(403);

        $this->actingAs($user2)
            ->json('DELETE', 'api/boardLists/' . $this->boardList->id)
            ->assertStatus(403);
    }
}

It’s pretty much the same as before. We test store, update, delete, loginRequired and authorization needed. We added a created boardList into our setup since we now need a boardList too. If you understood the Board tests you should also quickly understand these here.

And finally tests/Feature/CardTest.php:

<?php

namespace Tests\Feature;

use Tests\DatabaseTestCase;
use Illuminate\Foundation\Testing\WithFaker;
use App\User;
use App\Board;
use App\BoardList;
use App\Card;

class CardTest extends DatabaseTestCase
{
    protected $user;
    protected $board;
    protected $boardList;
    protected $card;

    public function setUp()
    {
        parent::setUp();
        $this->user = factory(User::class)->create();
        $this->board = factory(Board::class)->create(['user_id' => $this->user->id]);
        $this->boardList = factory(BoardList::class)->create(['board_id' => $this->board->id]);
        $this->card = factory(Card::class)->create(['board_list_id' => $this->boardList->id]);
    }

    public function testLoginRequired()
    {
        $payload = ['name' => 'My Card', 'order' => 1, 'list_id' => $this->boardList->id];

        $this->json('POST', 'api/cards', $payload)
            ->assertStatus(401);
    }

    public function testUserCanCreateCards()
    {
        $payload = ['name' => 'My Card', 'order' => 1, 'list_id' => $this->boardList->id];

        $this->actingAs($this->user)
            ->json('POST', 'api/cards', $payload)
            ->assertStatus(201)
            ->assertJson(['name' => $payload['name']]);
    }

    public function testCreateValidation()
    {
        $this->actingAs($this->user)
            ->json('POST', 'api/cards')
            ->assertStatus(422)
            ->assertJson([
                "message" => "The given data was invalid.",
                "errors" => [
                    "name" => ["The name field is required."],
                    "order" => ["The order field is required."],
                    "list_id" => ["The list id field is required."],
                ]
            ]);
    }

    public function testUserCanUpdateCards()
    {
        $payload = ['name' => 'My Card'];

        $this->actingAs($this->user)
            ->json('PATCH', 'api/cards/' . $this->card->id, $payload)
            ->assertStatus(200)
            ->assertJson(['name' => $payload['name']])
            ->assertJsonMissing(['name' => $this->card->name]);
    }

    public function testUpdateValidation()
    {
        $this->actingAs($this->user)
            ->json('PATCH', 'api/cards/' . $this->card->id)
            ->assertStatus(422)
            ->assertJson([
                "message" => "The given data was invalid.",
                "errors" => [
                    "name" => ["The name field is required when description is not present."]
                ]
            ]);
    }

    public function testUserCanDeleteCards()
    {
        $card2 = factory(Card::class)->create(['board_list_id' => $this->boardList->id]);

        $this->actingAs($this->user)
            ->json('DELETE', 'api/cards/' . $this->card->id)
            ->assertStatus(204);

        // Check that it is really gone with a GET request of the board of the user
        $this->actingAs($this->user)
            ->json('GET', 'api/boards/' . $this->board->id)
            ->assertDontSee($this->card->name)
            ->assertSee($card2->name);
    }

    public function testAuthorization()
    {
        $user2 = factory(User::class)->create();
        $payload = ['name' => 'My Card', 'order' => 1, 'list_id' => $this->boardList->id];

        $this->actingAs($user2)
            ->json('POST', 'api/cards', $payload)
            ->assertStatus(403);

        $this->actingAs($user2)
            ->json('PATCH', 'api/cards/' . $this->card->id, $payload)
            ->assertStatus(403);        

        $this->actingAs($user2)
            ->json('DELETE', 'api/cards/' . $this->card->id)
            ->assertStatus(403);
    }
}

Again we added a card to our setup but the tests are pretty much the same.

We make heavy use of the factories and often provide an array to the create method which overwrites the default values which we defined in the factories. All test code is very easy to understand and read which makes developing these tests really enjoyable thanks to Laravels helper methods. And since we’re using Laravels auth system with our JWT authentication we can simply use actingAs instead of having to get and send a bearer token and all that stuff. So this was a lot of fun, I really like feature testing Laravel applications.

In the next post we want to setup TravisCI to run these tests automatically on different PHP versions, and if everything works deploy the code to heroku.

Vue SPA with Laravel API Part 3

2018-07-20T17:00:00+00:00

The complete source code of this series is available on GitHub.

Part 1: Setting up a Vue SPA with a Laravel API as the backend using JWT authentication.
Part 2: Creating everything database related: models, migrations, seeders and factories.
Part 3: Setting up API routes and creating API resource controllers. (You are here)
Part 4: Testing the API with feature tests and sqlite.
Part 5: Setting up Continuous Deployment with TravisCI and Heroku.
Part 6: Customizing the frontend skeleton, design and Dashboard component.
Part 7: Creating the remaining Vue components: Board, List, Card, Modal.
Part 8: Setting up Jest and testing all Vue components with it.

In this part we will create all necessary API routes and our controllers so we can consume our data via the API.

First lets add these routes to routes/api.php:

Route::group([

    'middleware' => ['api', 'auth:api']

], function($router) {
    Route::apiResources([
      'boards' => 'API\BoardController',
      'boardLists' => 'API\BoardListController',
      'cards' => 'API\CardController'
    ]);

    Route::patch('board/updateOrder', 'API\BoardController@updateOrder');
    Route::patch('board/updateListOrder', 'API\BoardController@updateListOrder');
});

And let artisan create the controllers with an --api flag which will automatically create a lot of methods we may want:

php artisan make:controller API/BoardController --api --model=Board
php artisan make:controller API/BoardListController --api --model=BoardList
php artisan make:controller API/CardController --api --model=Card

Let’s start with the app/Http/Controllers/API/BoardController.php. Don’t worry we’ll go through each method after the code.

<?php

namespace App\Http\Controllers\API;

use App\Board;
use App\Card;
use App\BoardList;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;

class BoardController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $boards = Board::with('boardLists.cards')->where('user_id', Auth::id())->get();
        return response()->json($boards);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
        ]);

        $board = new Board;
        $board->name = $request->name;
        $board->user()->associate(Auth::id());
        $board->save();

        return response()->json($board, 201);
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Board  $board
     * @return \Illuminate\Http\Response
     */
    public function show(Board $board)
    {
        if (Auth::id() !== $board->user->id) {
            abort(403, 'Unauthorized for this action.');
        }

        $board->load(['boardLists' => function ($query) {
            $query->with(['cards' => function ($query) {
                $query->orderBy('order');
            }])->orderBy('order');
        }]);

        return response()->json($board);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Board  $board
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Board $board)
    {
        if (Auth::id() !== $board->user->id) {
            abort(403, 'Unauthorized for this action.');
        }

        $request->validate([
            'name' => 'required',
        ]);

        $board->name = $request->name;
        $board->save();

        return response()->json($board);
    }

    public function updateOrder(Request $request)
    {
        $board = Board::findOrFail($request->board["id"]);

        if (Auth::id() !== $board->user->id) {
            abort(403, 'Unauthorized for this action.');
        }

        foreach ($request->board["board_lists"] as $boardList) {
            foreach ($boardList["cards"] as $card) {
                $cardModel = Card::find($card["id"]);
                $cardModel->board_list_id = $boardList["id"];
                $cardModel->order = $card["order"];
                $cardModel->save();
            }
        }

        return response()->json("OK");
    }

    public function updateListOrder(Request $request)
    {
        $board = Board::findOrFail($request->board["id"]);

        if (Auth::id() !== $board->user->id) {
            abort(403, 'Unauthorized for this action.');
        }

        foreach ($request->board["board_lists"] as $boardList) {
            $listModel = BoardList::find($boardList["id"]);
            $listModel->order = $boardList["order"];
            $listModel->save();
        }

        return response()->json("OK");
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Board  $board
     * @return \Illuminate\Http\Response
     */
    public function destroy(Board $board)
    {
        if (Auth::id() !== $board->user->id) {
            abort(403, 'Unauthorized for this action.');
        }

        $board->delete();
        return response()->json(null, 204);
    }
}

The index method is very simple: We get all boards of the user and return it as json. The store method is also very simple in that we validate that a name was given, create the board, associate it to the user, save it and return it as json with a http status code. The update method is basically the same, we just check that the board belongs to the user who is currently loggedin. In the show method we have to change our query a bit because we want our results to contain an ordered list of BoardLists and for each of those an ordered list of Cards. The destroy method is also pretty straightforward: Check that the board belongs to the user and if so delete it.

Now we have two methods left: updateListOrder and updateCardOrder. Both are pretty similar in that we get as input a json Board object (the same as we would output in our show method). The only difference here will be that javascript has changed the order values of the lists/cards and moved them around inside the array. So we just have to loop through all lists/cards and update their order value in the database to match the frontend. For cards we also change the BoardList association, because you are able to drag a card from one list to another as well as changing the simple order inside one list.

And that’s it for our BoardController. The rest will be very simple, trust me. Let’s create the app/Http/Controllers/API/BoardListController.php next:

<?php

namespace App\Http\Controllers\API;

use App\BoardList;
use App\Board;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;

class BoardListController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'order' => 'required|integer',
            'board_id' => 'required|integer',
        ]);

        $board = Board::findOrFail($request->board_id);

        if (Auth::id() !== $board->user->id) {
            abort(403, 'Unauthorized for this action.');
        }

        $boardList = new BoardList;
        $boardList->name = $request->name;
        $boardList->order = $request->order;
        $boardList->board()->associate($request->board_id);
        $boardList->save();

        return response()->json($boardList->load('cards'), 201);
    }

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

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\BoardList  $boardList
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, BoardList $boardList)
    {
        if (Auth::id() !== $boardList->board->user->id) {
            abort(403, 'Unauthorized for this action.');
        }

        $request->validate([
            'name' => 'required',
        ]);

        $boardList->name = $request->name;
        $boardList->save();

        return response()->json($boardList);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\BoardList  $boardList
     * @return \Illuminate\Http\Response
     */
    public function destroy(BoardList $boardList)
    {
        if (Auth::id() !== $boardList->board->user->id) {
            abort(403, 'Unauthorized for this action.');
        }

        $boardList->delete();
        return response()->json(null, 204);
    }
}

We only use the store, update and destroy method because a list will only be requested together with the board. Those three methods are basically the same as in board, just that we added the auth check in our store method.

And finally the app/Http/Controllers/API/CardController.php:

<?php

namespace App\Http\Controllers\API;

use App\Card;
use App\BoardList;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;

class CardController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'order' => 'required|integer',
            'list_id' => 'required|integer',
        ]);

        $boardList = BoardList::findOrFail($request->list_id);

        if (Auth::id() !== $boardList->board->user->id) {
            abort(403, 'Unauthorized for this action.');
        }

        $card = new Card;
        $card->name = $request->name;
        $card->order = $request->order;
        $card->description = "";
        $card->boardList()->associate($request->list_id);
        $card->save();

        return response()->json($card, 201);
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Card  $card
     * @return \Illuminate\Http\Response
     */
    public function show(Card $card)
    {
        return response()->json($card);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Card  $card
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Card $card)
    {
        if (Auth::id() !== $card->boardList->board->user->id) {
            abort(403, 'Unauthorized for this action.');
        }

        $request->validate([
            'name' => 'required_without:description',
            'description' => 'required_without:name',
        ]);

        $card->name = $request->name ?: $card->name;
        $card->description = $request->description ?: $card->description;
        $card->save();

        return response()->json($card);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Card  $card
     * @return \Illuminate\Http\Response
     */
    public function destroy(Card $card)
    {
        if (Auth::id() !== $card->boardList->board->user->id) {
            abort(403, 'Unauthorized for this action.');
        }

        $card->delete();
        return response()->json(null, 204);
    }
}

Again almost the same but here we use update in two different ways: once to update the name and once to update the description (these will be two different forms in the frontend as we will see later)

And now we have a fully functioning API for authentication, Boards, BoardLists and Cards. But we still lack some tests for our API so we will create some feature tests next. You can find these in part 4.

Vue SPA with Laravel API Part 2

2018-07-17T17:00:00+00:00

The complete source code of this series is available on GitHub.

Part 1: Setting up a Vue SPA with a Laravel API as the backend using JWT authentication.
Part 2: Creating everything database related: models, migrations, seeders and factories. (You are here)
Part 3: Setting up API routes and creating API resource controllers.
Part 4: Testing the API with feature tests and sqlite.
Part 5: Setting up Continuous Deployment with TravisCI and Heroku.
Part 6: Customizing the frontend skeleton, design and Dashboard component.
Part 7: Creating the remaining Vue components: Board, List, Card, Modal.
Part 8: Setting up Jest and testing all Vue components with it.

In this part we will first create all models and their migrations needed for our small Trello clone. After that we will create seeders and factories to easily populate our database with test data.

We will create 3 models: Board, BoardList and Card. A User has many Boards, a Board contains many Lists and each List contains many Cards. So our Eloquent relationships are simple hasMany relationships.

We let artisan create the three models and a migration for each with these commands:

php artisan make:model Board --migration
php artisan make:model BoardList --migration
php artisan make:model Card --migration

Next let’s set up the Eloquent relationships. Add this to App/User.php:

public function boards()
{
    return $this->hasMany("App\Board");
}

The App/Board.php model will look like this:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Board extends Model
{
    protected $fillable = [
        'name'
    ];

    public function user()
    {
        return $this->belongsTo("App\User");
    }

    public function boardLists()
    {
        return $this->hasMany("App\BoardList");
    }
}

The App/BoardList.php model will look like this:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class BoardList extends Model
{
    protected $table = "board_lists";

    public function board()
    {
        return $this->belongsTo("App\Board");
    }

    public function cards()
    {
        return $this->hasMany("App\Card");
    }
}

And finally, the App/Card.php model will look like this:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Card extends Model
{
    public function boardList()
    {
        return $this->belongsTo("App\BoardList");
    }
}

And with that our models are already done. Now open up the created migrations in the database/migrations folder and lets start with the Boards table:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateBoardsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('boards', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->integer('user_id')->unsigned();
            $table->timestamps();

            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('boards');
    }
}

We need an id, a name of the board, a user_id field containing our User relation and the created_at and updated_at timestamps. We also define a foreign key which defines that if a user gets deleted, his boards will be deleted too. Next the same for the BoardLists table:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateBoardListsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('board_lists', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->integer('board_id')->unsigned();
            $table->integer('order')->unsigned()->default(0);
            $table->timestamps();

            $table->foreign('board_id')->references('id')->on('boards')->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('board_lists');
    }
}

This time with a board_id instead of a user_id since we only have a relationship with the board model. The order field will indicate how the user sorted his Lists on the Board (they will be sortable via drag&drop). We also define a foreign key which cascades the deletes from boards to all lists of a board again. Finally we create a Cards table migration (The User migration already comes out of the box in Laravel):

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateCardsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('cards', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->integer('board_list_id')->unsigned();
            $table->integer('order')->unsigned()->default(0);
            $table->text('description');
            $table->timestamps();

            $table->foreign('board_list_id')->references('id')->on('board_lists')->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('cards');
    }
}

A lot is pretty much the same: id, name, board_list_id and order. We also have another foreign key, which means if a user deletes his account a cascade of deletes will be triggered that delete all his boards, his lists and his cards as well. Notice that the board_list_id has to be written in snake case for Eloquent to find it since the class name is in camel case and Eloquent automatically converts this. Finally we add a simple text field called description.

And with that we can run: php artisan migrate to create all tables in the database. If you got an error use php artisan migrate:fresh since up to the error everything that worked doesn’t get rolled back and the fresh command deletes everything first.

So now we have models and database tables but they’re still empty. It would be nice if we had data in them for testing purposes. We achieve this by creating Seeder and Factory classes next.

We want to add data to each model we have. So we will need 4 seeder classes in total, which we let artisan create for us:

php artisan make:seeder UsersTableSeeder
php artisan make:seeder BoardsTableSeeder
php artisan make:seeder BoardListsTableSeeder
php artisan make:seeder CardsTableSeeder

When we use the seed command of artisan, it will call the main DatabaseSeeder class located at database/seeds/DatabaseSeeder.php, so we will have to call all other seeders from it like this:

<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $this->call(UsersTableSeeder::class);
        $this->call(BoardsTableSeeder::class);
        $this->call(BoardListsTableSeeder::class);
        $this->call(CardsTableSeeder::class);
    }
}

Next lets create the UserTableSeeder like this so we get one account with which we can login:

<?php

use Illuminate\Database\Seeder;
use App\User;

class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        User::create([
          'name' => 'admin',
          'email' => 'admin@example.com',
          'password' => bcrypt('admin')
        ]);
    }
}

For the other 3 seeders we will be using the factories we will create after this:

<?php

use Illuminate\Database\Seeder;

class BoardsTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        factory(App\Board::class, 2)->create();
    }
}

This factory call creates (and saves them in the database) 2 Board objects. If we used make instead of create the factory would not save them to the database. Since we didn’t supply any argument to the create method, it will use the default values but we could also supply specific values by using an array as it’s argument.

<?php

use Illuminate\Database\Seeder;

class BoardListsTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        factory(App\BoardList::class, 8)->create();
    }
}

It’s the same for BoardList with 8 created instances.

<?php

use Illuminate\Database\Seeder;

class CardsTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        factory(App\Card::class, 32)->create();
    }
}

And also the same for Card with 32 created instances. These numbers are just randomly chosen by me so we have something more than 1 of each.

Next let’s create the factories. The UserFactory is already provided by Laravel so we only have to create the three others with the help of artisan:

php artisan make:factory BoardFactory --model=Board
php artisan make:factory BoardListFactory --model=BoardList
php artisan make:factory CardFactory --model=Card

In the factory we just return an array with the values of each field we want to fill. These values are the defaults if we don’t supply any values ourselves when using the factory.

<?php

use Faker\Generator as Faker;

$factory->define(App\Board::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'user_id' => App\User::all()->random()->id,
    ];
});

For the Board factory we just provide a random name from Faker and a random user_id (which will always be our only created user in this case).

<?php

use Faker\Generator as Faker;

$factory->define(App\BoardList::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'board_id' => App\Board::all()->random()->id,
        'order' => random_int(0, 10000),
    ];
});

The BoardList factory gets a random name and a random Board it belongs to, as well as a random number for its position.

<?php

use Faker\Generator as Faker;

$factory->define(App\Card::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'board_list_id' => App\BoardList::all()->random()->id,
        'order' => random_int(0, 10000),
        'description' => $faker->paragraph,
    ];
});

And the same for the card factory with the addition of a description text.

And with that we can run php artisan db:seed to seed our database with some testing data and use the factories in our tests for easy creation of objects.

In our next step we want to create the API routes and controllers so that we can consume the data via an API. For that see Part 3.

Vue SPA with Laravel API Part 1

2018-07-13T17:00:00+00:00

The complete source code of this series is available on GitHub.

Part 1: Setting up a Vue SPA with a Laravel API as the backend using JWT authentication. (You are here)
Part 2: Creating everything database related: models, migrations, seeders and factories.
Part 3: Setting up API routes and creating API resource controllers.
Part 4: Testing the API with feature tests and sqlite.
Part 5: Setting up Continuous Deployment with TravisCI and Heroku.
Part 6: Customizing the frontend skeleton, design and Dashboard component.
Part 7: Creating the remaining Vue components: Board, List, Card, Modal.
Part 8: Setting up Jest and testing all Vue components with it.

In this multipart series we will be creating a Vue.js single page application with a Laravel backend API. In this part we will be setting up the skeleton, which means just enough to register and login, so if you only want the skeleton of our SPA you can stop after the first part. After that we will continue by building a small Trello clone as our SPA. What you will need to follow along:

NPM/Yarn and Composer installed
something to run your project on (for example Laradock)

This is built with Laravel 5.6 and Vue 2.5 if you use newer versions there could be some problems along the way.

The first step is to create a new Laravel project if you haven’t yet:

composer create-project --prefer-dist laravel/laravel boards

If everything works we install some npm dependencies next:

npm install --save-dev vue-router vue-axios @websanova/vue-auth

We will need vue-router to create a single page application and vue-axios provides a small wrapper for integrating axios into Vue, which vue-auth needs. Vue-auth is a library that takes care of all our authentication needs for the frontend.

So to use vue-router we need to tell Laravel not to handle web routing. We do this by creating a route that matches all urls that will just return the view of our vue router. So your routes/web.php should look like this:

<?php

Route::any('{all}', function () {
    return view('app');
})->where(['all' => '.*']);

Next we want to create the Laravel view under resources/views/app.blade.php:

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="api-base-url" content="{{ config('app.url') }}">

        <title>{{ config('app.name') }}</title>

        <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
    </head>
    <body>

        <div id="app"></div>

        <script src="{{ mix('/js/app.js') }}"></script>
    </body>
</html>

This will be our only Laravel view and we will mount Vue to the div with the id app later. We use mix to take care of our css and js assets.

The next step is to bootstrap vue and vue-router. For this your resources/assets/app.js file should look like this:

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import VueAxios from 'vue-axios';
import App from './App.vue';
import Dashboard from './components/Dashboard.vue';
import Home from './components/Home.vue';
import Register from './components/Register.vue';
import Login from './components/Login.vue';


Vue.use(VueRouter);
Vue.use(VueAxios, axios);
axios.defaults.baseURL = document.head.querySelector('meta[name="api-base-url"]').content + '/api';

const router = new VueRouter({
    routes: [{
        path: '/',
        name: 'home',
        component: Home
    },{
        path: '/register',
        name: 'register',
        component: Register,
        meta: {
            auth: false
        }
    },{
        path: '/login',
        name: 'login',
        component: Login,
        meta: {
            auth: false
        }
    },{
        path: '/dashboard',
        name: 'dashboard',
        component: Dashboard,
        meta: {
            auth: true
        }
    }]
});


Vue.router = router
Vue.use(require('@websanova/vue-auth'), {
   auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
   http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
   router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
});
App.router = Vue.router
new Vue(App).$mount('#app');

First we tell vue to use vue-router and the vue-axios wrapper and set the default baseurl of our api. This way we save a lot of typing later on. Next we create the VueRouter object. The attributes of each route should be self-explanatory. The auth attribute in meta defines for which users the route is accessible. auth: true means only loggedin users can access this route, auth: false means only not loggedin users can access this route and nothing means this route is accessible to anyone. Lastly we setup the vue-auth library with the correct drivers we want to use and mount our Vue object.

Now lets create the SPA navigation, for this create resources/assets/App.vue:

<template>
    <div>
        <div v-if="$auth.ready()">
            <div>
                <nav>
                    <ul>
                        <li>
                            <router-link :to="{ name: 'home' }">Home</router-link>
                        </li>
                        <li v-if="!$auth.check()">
                            <router-link :to="{ name: 'login' }">Login</router-link>
                        </li>
                        <li v-if="!$auth.check()">
                            <router-link :to="{ name: 'register' }">Register</router-link>
                        </li>
                        <li v-if="$auth.check()">
                            <router-link :to="{ name: 'dashboard' }">Dashboard</router-link>
                        </li>
                        <li v-if="$auth.check()">
                            <a href="#" @click.prevent="$auth.logout()">Logout ({{ $auth.user().name }})</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </div>
        <div v-if="!$auth.ready()">
            Loading...
        </div>
    </div>
</template>

We will show a loading message while our auth object is not yet ready. If it is ready we render a navigation and the router view. Notice that the auth object provides a lot of useful functions like check, logout and the username. With these we can create a navigation that changes depending on your authentication state and the logout functionality is done already.

We still need some components so our router-view can render something. resources/assets/components/Home.vue is our homepage, is accessible to anyone and looks like this:

<template>
    <h1>Laravel Boards</h1>
</template>

resources/assets/components/Dashboard.vue is accessible only to loggedin users and looks like this:

<template>
    <h1>Laravel Dashboard</h1>
</template>

The last two steps for the frontend are a register and login component.

resources/assets/components/Register.vue:

<template>
    <div>
        <div v-if="error && !success">
            <p>There was an error.</p>
        </div>
        <div v-if="success">
            <p>Registration successful. You can now <router-link :to="{name:'login'}">login.</router-link></p>
        </div>
        <form autocomplete="off" @submit.prevent="register" v-if="!success" method="post">
            <div>
                <label for="name">Username</label>
                <input type="text" id="name" v-model="name" required>
                <span v-if="error && errors.name">{{ errors.name }}</span>
            </div>
            <div>
                <label for="email">E-mail</label>
                <input type="email" id="email" placeholder="user@example.com" v-model="email" required>
                <span v-if="error && errors.email">{{ errors.email }}</span>
            </div>
            <div>
                <label for="password">Password</label>
                <input type="password" id="password" v-model="password" required>
                <span v-if="error && errors.password">{{ errors.password }}</span>
            </div>
            <button type="submit">Register</button>
        </form>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                name: '',
                email: '',
                password: '',
                error: false,
                errors: {},
                success: false
            };
        },
        methods: {
            register(){
                var app = this
                this.$auth.register({
                    params: {
                        name: app.name,
                        email: app.email,
                        password: app.password
                    },
                    success: function () {
                        app.success = true
                    },
                    error: function (resp) {
                        app.error = true;
                        app.errors = resp.response.data.errors;
                    },
                    redirect: null
                });
            }
        }
    }
</script>

Vue-auth provides a register method which we use and provide the data from the form above. We then also provide a success and an error function and don’t redirect on success. If there is an error we will highlight the field and provide an error message (from Laravel).

resources/assets/components/Login.vue:

<template>
    <div>
        <div v-if="error">
            <p>It looks like those credentials are not working.</p>
        </div>
        <form autocomplete="off" @submit.prevent="login" method="post">
            <div>
                <label for="email">E-mail</label>
                <input type="email" id="email" placeholder="user@example.com" v-model="email" required>
            </div>
            <div>
                <label for="password">Password</label>
                <input type="password" id="password" v-model="password" required>
            </div>
            <button type="submit">Sign in</button>
        </form>
    </div>
</template>
<script>
  export default {
    data(){
      return {
        email: null,
        password: null,
        error: false
      }
    },
    methods: {
      login(){
        var app = this
        this.$auth.login({
            params: {
              email: app.email,
              password: app.password
            },
            success: function () {},
            error: function () { this.error = true; },
            rememberMe: true,
            redirect: '/dashboard',
            fetchUser: true,
        });
      },
    }
  }
</script>

The login component is very similar to the register one. We use the login method provided by vue-auth and add a rememberMe option, a redirect after a successful login to the dashboard component and a fetchUser option. The fetchUser option set to true will automatically fetch the users data which we used in our navigation earlier. And we’re done with the frontend skeleton.

Now lets begin with our API. Our first step here will be to install a package that provides JWT support for Laravels auth system: jwt-auth.

To install simply run composer require tymon/jwt-auth.

Now open config/app.php and add this to the providers array: Tymon\JWTAuth\Providers\LaravelServiceProvider::class,

Next run php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

And php artisan jwt:secret

There is a new config file: config/jwt.php where you can configure this package.

Next open config/auth.php and set the default guard to api like this:

'defaults' => [
    'guard' => 'api',
    'passwords' => 'users',
],

Below that change the api guard driver to jwt like this:

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],
    'api' => [
        'driver' => 'jwt',
        'provider' => 'users',
    ],
],

Our User model needs to implement the JWTSubject interface and we need to implement two methods: getJWTIdentifier() and getJWTCustomClaims:

<?php

namespace App;

use Tymon\JWTAuth\Contracts\JWTSubject;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable implements JWTSubject
{
    use Notifiable;
    
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];
    
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];
    
    /**
    * Get the identifier that will be stored in the subject claim of the JWT.
    *
    * @return mixed
    */
    public function getJWTIdentifier()
    {
        return $this->getKey();
    }
    
    /**
     * Return a key value array, containing any custom claims to be added to the JWT.
     *
     * @return array
     */
    public function getJWTCustomClaims()
    {
        return [];
    }
}

Finally add these routes to your routes/api.php file:

Route::group([
    'middleware' => 'api',
    'prefix' => 'auth'
], function ($router) {
    Route::post('register', 'AuthController@register');
    Route::post('login', 'AuthController@login');
    Route::post('logout', 'AuthController@logout');
    Route::post('refresh', 'AuthController@refresh');
    Route::post('me', 'AuthController@me');
    Route::get('user', 'AuthController@user');
});

You should now be able to register, login and logout. You can stop the tutorial here if you just wanted to set up a starter boilerplate Vue SPA with a Laravel API as a backend. For everyone else we now begin developing our Trello clone by creating all the database stuff in Part 2.

Answer set programming: Sudoku solver

2018-07-10T17:00:00+00:00

Part 1: Answer set programming: The basics
Part 2: Answer set programming: Sudoku solver (You are here)

Answer set programming is a prolog-like form of declarative programming that is primarily used to solve NP-hard search problems. Lets see how easy it is to create a generic sudoku solver that can solve any sudoku you throw at it:

x(1..9).
y(1..9).
n(1..9).

{sudoku(X,Y,N): n(N)}=1 :- x(X) ,y(Y).

subgrid(X,Y,A,B) :- x(X), x(A), y(Y), y(B),(X-1)/3 == (A-1)/3, (Y-1)/3 == (B-1)/3.

:- sudoku(X,Y,N), sudoku(A,Y,N), X!=A.
:- sudoku(X,Y,N), sudoku(X,B,N), Y!=B.
:- sudoku(X,Y,V), sudoku(A,B,V), subgrid(X,Y,A,B), X != A, Y != B.

#show sudoku/3.

The first three lines just define that our sudoku board is 9x9 fields and we use the numbers from 1 to 9 as the fields contents. The next line starting with {sudoku(X,Y,N): ... defines that each field of our board has to contain exactly 1 number from 1 to 9 (our n). The next line defines a little helper that tells us which fields are in the same subgrid. In this case we choose a 3x3 subgrid. If the helper is set for two fields, then they’re in the same subgrid, if it is not set they’re not. The next 3 lines are constraints. The first one eliminates all possibilities where a number isn’t unique in it’s line and the second one for the column. The third rule eliminates possibilities where a number isn’t unique in its subgrid. The last line just outputs all resulting sudoku fields.

We didn’t even try to have the least amount of lines in this one. We could easily sacrifice readability to condense it even more.

The way this program would be executed is by having another file that contains all given numbers in this format: sudoku(X,Y,N). and supplying both as an argument to an answer set programming solver like clingo (learn more about clingo: Answer set programming: The basics):

clingo given.lp sudoku.lp

Lets do an example run. Our given.lp looks like this:

sudoku(2,3,8). sudoku(3,3,9). sudoku(5,4,1). sudoku(6,4,2). sudoku(4,4,3). sudoku(1,4,4). sudoku(8,4,5). sudoku(7,4,6). sudoku(3,4,7). sudoku(9,4,8). sudoku(2,4,9). sudoku(1,5,1). sudoku(2,5,2). sudoku(3,5,3). sudoku(7,5,4). 

The program output will then be:

Answer: 1
sudoku(2,3,8) sudoku(3,3,9) sudoku(5,4,1) sudoku(6,4,2) sudoku(4,4,3) sudoku(1,4,4) sudoku(8,4,5) sudoku(7,4,6) sudoku(3,4,7) sudoku(9,4,8) sudoku(2,4,9) sudoku(1,5,1) sudoku(2,5,2) sudoku(3,5,3) sudoku(7,5,4) sudoku(2,1,1) sudoku(7,1,2) sudoku(8,1,3) sudoku(9,1,4) sudoku(4,1,5) sudoku(3,1,6) sudoku(1,1,7) sudoku(5,1,8) sudoku(6,1,9) sudoku(9,2,1) sudoku(5,2,2) sudoku(1,2,3) sudoku(2,2,4) sudoku(3,2,5) sudoku(4,2,6) sudoku(6,2,7) sudoku(8,2,8) sudoku(7,2,9) sudoku(4,3,1) sudoku(1,3,2) sudoku(6,3,3) sudoku(5,3,4) sudoku(9,3,5) sudoku(8,3,6) sudoku(7,3,7) sudoku(6,5,5) sudoku(5,5,6) sudoku(9,5,7) sudoku(4,5,8) sudoku(8,5,9) sudoku(7,6,1) sudoku(8,6,2) sudoku(9,6,3) sudoku(6,6,4) sudoku(1,6,5) sudoku(2,6,6) sudoku(4,6,7) sudoku(3,6,8) sudoku(5,6,9) sudoku(6,7,1) sudoku(3,7,2) sudoku(2,7,3) sudoku(4,7,4) sudoku(5,7,5) sudoku(9,7,6) sudoku(8,7,7) sudoku(7,7,8) sudoku(1,7,9) sudoku(8,8,1) sudoku(9,8,2) sudoku(5,8,3) sudoku(3,8,4) sudoku(7,8,5) sudoku(6,8,6) sudoku(2,8,7) sudoku(1,8,8) sudoku(4,8,9) sudoku(3,9,1) sudoku(4,9,2) sudoku(7,9,3) sudoku(8,9,4) sudoku(2,9,5) sudoku(1,9,6) sudoku(5,9,7) sudoku(6,9,8) sudoku(9,9,9)
SATISFIABLE

Models       : 1+
Time         : 0.093s (Solving: 0.00s 1st Model: 0.00s Unsat: 0.00s)

As we can see the first fields it lists are the ones we have given it and after that there are all other fields that make this a valid sudoku. Also note that Models: 1+ means there are different solutions possible for our given fields (you can list all of them by using clingo 0 given.lp sudoku.lp). The whole program ran for 0.093 seconds, so it found a solution pretty fast.

Answer set programming: The basics

2018-07-06T17:00:00+00:00

Part 1: Answer set programming: The basics (You are here)
Part 2: Answer set programming: Sudoku solver

Answer set programming is a declarative form of programming. This means you don’t need to code a way to solve the problem, you just have to describe your problem and let a so-called solver handle the rest. This is the same as your SQL query, in which you only describe what you would like to have and the database itself figures out how best to get this data for you. There are multiple solvers out there, one example would be clingo. To make it easy to get started, you can run clingo in your browser or with Docker.

To get started create a new file called test.lp:

x.

Run it with: clingo test.lp

which will output:

Answer: 1
x
SATISFIABLE

As we can see we get 1 answer which is x. This means x = true. What we just now did was we told the solver that we want to know which variables in our program need to be true, so that we achieve our goal (in this case our goal is for x to be true). Another way to think about it is that we simply told the solver that x needs to be true (because it always has to, for our program to be satisfiable). So lets look at some more constructs:

Conditions

x :- y.

If y is true, so is x.

Constraints

:- y.

As we have seen with conditions if y is true so has to be the left part, which is empty, which is the same as false. This would mean false = true if y is true. The solver gets that this was a mistake and so y has to always be false.

Predicates

sudoku(1..9, 1..9).

The first character has to be lowercase. This will generate a complete 9x9 sudoku field, one sudoku predicate for each field. These can be nested for example:

% a comment: the same as sudoku(1,1).
sudoku(x(1), y(1)).

Variables

x(1..9).
y(1..9).
sudoku(Var1, Var2) :- x(Var1), y(Var2).

Variables have to start with an uppercase character. The result of this would again be our whole sudoku board. The conditional works as follows: if x(2) and y(5) is true, then sudoku(2, 5) is also true. The same will be done for all combinations of x and y values here. It is also possible to use your standard programming operators like +, -, == and so on.

Choice

0{ z(1);z(2);z(3) }3.

{sudoku(X, Y, N) : n(N)}=1 :- x(X) ,y(Y).

The first line defines a list of 3 items (z(1) to z(3)) and will have 4 choices: nothing, only one of the list, two or all three of the z list. The second line will generate all sudoku fields and choose exactly 1 number from n for each field.

Sudoku

With these few constructs we have seen now, we can already create a generic sudoku solver in answer set programming in less than 10 lines. You can try it yourself or look at the solution in part 2 (coming soon).

Incremental steps

A lot of times you find yourself in a situation where you have to use multiple steps. An easy example would be that you want to move a chess piece more than one field from your starting point. After each step the environment changes and you would have to reflect that with some extra variables on each predicate that shows the step number. The inbuilt incmode functionality provides you with this extra time component and automatically tries new steps until it reaches a solution or a given maximum.

#include <incmode>.
#const imax   = 30. % max number of steps

#program base.
% everything that doesn't depend on the current step

#program step(t).
% everything that depends on the current step. t is the time (step number) variable
x(1..9, t)

#program check(t).
% provides a query(t) which is true as long as the limit of number of steps is not reached
% we can use it like this if goal(t) indicates if the goal is reached at this step:
:- query(t), not goal(t).

This program will execute the complete step as long as the check constraint is not broken (= either the goal or the limit of steps is reached)

Optimization

maxrow(R) :- R=#max{S:countrow(S)}.

Sets R to the maximum of S, where S is a list of all numbers that exist for the predicate countrow.

#minimize{T : time(T)}.

This will choose from all possible solutions the one (or multiple) with the minimum in the given attribute. In this case it would look for the solution which needs the least amount of time.

What’s next?

Try clingo in your browser for some examples to play around with. You can also include a python or lua script to write extra code in these languages if you find it hart to express something with declarative programming. Don’t forget to check out part 2 to see a sudoku solver.