<template>
    <div style="margin-top: 50px;">
        <v-container grid-list-md pa-10>
            <v-layout row wrap>
                <v-flex md12>
                    <h1>Apps</h1>
                    <br><br>


                    <AppCards :apps="apps" v-on:appClick="navigateToAppSettingPage"></AppCards>
                </v-flex>
            </v-layout>
        </v-container>


    </div>

</template>

<script>

    import AdminService from '../../services/Admin'
    import AppCardsComponente from '../../components/AppCards'

    export default {
        data () {
            return {
                apps: []
            }
        },
        components: {
            "AppCards": AppCardsComponente
        },
        methods: {
            'loadApp': function () {
                AdminService.getAppList().then((res) => {
                    this.apps = res.data.data;
                })
            },
            'navigateToAppSettingPage': function(app) {
                this.$router.push({"path": "/admin/app/"+app.id})
            }
        },
        mounted: function() {
            this.loadApp();
        }
    }
</script>