FlipPilot Vue Example

flippilotVueExample.js

// Your goal is to recreate a functional version of what you see in the image:
// https://www.dropbox.com/s/nrkkuxliq8akff4/flipPilotExample.png?dl=0
// using the mock data provided below.

// Vue Documentation: https://vuejs.org/v2/guide/
// Vuex Documentation: https://vuex.vuejs.org/en/

// Mock Data:
state: {
    account: {
        user: {
            first_name: 'Han',
            is_deactivated: false,
            is_paused: false,
            last_name: 'Solo',
            roles: [
                {
                    title: 'Billing Management',
                    enabled: true,
                },
                {
                    title: 'Account Configuration',
                    enabled: true,
                },
                {
                    title: 'User Management',
                    enabled: true,
                },
                {
                    title: 'Marketing Manager',
                    enabled: true,
                },
                {
                    title: 'Lead Intake Manager',
                    enabled: true,
                },
                {
                    title: 'Task Manager',
                    enabled: true,
                },
            ],
            user_profile_img: 'https://www.gravatar.com/avatar/e77989ed21758e78331b20e477fc5582?s='
        },
        users: [
            0: {
                first_name: 'Han',
                is_deactivated: false,
                is_paused: false,
                last_name: 'Solo',
                roles: [
                    {
                        title: 'Billing Management',
                        enabled: true,
                    },
                    {
                        title: 'Account Configuration',
                        enabled: true,
                    },
                    {
                        title: 'User Management',
                        enabled: true,
                    },
                    {
                        title: 'Marketing Manager',
                        enabled: true,
                    },
                    {
                        title: 'Lead Intake Manager',
                        enabled: true,
                    },
                    {
                        title: 'Task Manager',
                        enabled: true,
                    },
                ],
                user_profile_img: 'https://www.gravatar.com/avatar/e77989ed21758e78331b20e477fc5582?s='
            },
            1: {
                first_name: 'Anakin',
                is_deactivated: false,
                is_paused: false,
                last_name: 'Skywalker',
                roles: [
                    {
                        title: 'Billing Management',
                        enabled: false,
                    },
                    {
                        title: 'Account Configuration',
                        enabled: false,
                    },
                    {
                        title: 'User Management',
                        enabled: true,
                    },
                    {
                        title: 'Marketing Manager',
                        enabled: true,
                    },
                    {
                        title: 'Lead Intake Manager',
                        enabled: true,
                    },
                    {
                        title: 'Task Manager',
                        enabled: false,
                    },
                ],
                user_profile_img: 'https://www.gravatar.com/avatar/e77989ed21758e78331b20e477fc5582?s='
            },
            2: {
                first_name: 'Jango',
                is_deactivated: false,
                is_paused: false,
                last_name: 'Fett',
                roles: [
                    {
                        title: 'Billing Management',
                        enabled: false,
                    },
                    {
                        title: 'Account Configuration',
                        enabled: false,
                    },
                    {
                        title: 'User Management',
                        enabled: false,
                    },
                    {
                        title: 'Marketing Manager',
                        enabled: true,
                    },
                    {
                        title: 'Lead Intake Manager',
                        enabled: true,
                    },
                    {
                        title: 'Task Manager',
                        enabled: false,
                    },
                ],
                user_profile_img: 'https://www.gravatar.com/avatar/e77989ed21758e78331b20e477fc5582?s='
            },
        ]
    }
}