<template>
    <v-card
        id="folders-list"
        tile
        flat
        :width="width"
        :height="height"
        outlined
    >
        <v-sheet
            class="pa-1 overflow-y-auto"
            :height="height"
        >
            <role-item 
                v-for="(role, index) in roles"
                :key="'role-' + index"
                :app="app"
                :role="role"
                class="mb-2"
            />
        </v-sheet>
    </v-card>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            width: {default: null},
            height: {default: null},
            dataprovider: {required: true},
        },  

        computed: {
            roles() {
                let r = this.dataprovider.items;
                return _.orderBy(r, [item => item.type, item => item.id], ['asc', 'asc']);
            }
        },
        
        name: 'RolesList',
    }
</script>

<style lang="scss" scoped>
    #folders-list {
        border-top: none !important;
        border-left: none !important;
        border-bottom: none !important;
    }
</style>