<template>
    <v-card
        tile
        flat
        :height="height"
        :class="{
            'overflow-y-auto': !! height
        }"
    >
        <v-card-text class="px-0">
            <user-roles-list-item 
                v-for="(userrole, index) in userroles"
                :key="'role-' + index"
                :userrole="userrole"
                :activation="GetActivationByCustomer(userrole.customer_id)"
                class="mb-1 mr-1 float-left"
            />
        </v-card-text>
    </v-card>
</template>

<script>
    /**
     * Aici vreau sa va rolurile unui utilizator
     */
    export default {
        props: {
            height: {default: null},
            app: {required: true},
            user: {required: true},
        },

        computed: {
            dataprovider() {
                return this.app.dataSession.Userroles;
            },

            userroles() {
                return this.dataprovider.items;
            },

            activationsdataprovider() {
               return this.app.dataSession.Activations; 
            },

            activations() {
                return this.activationsdataprovider.items;
            },
        },

        methods: {
            GetActivationByCustomer(customer_id) {
                if(! customer_id)
                {
                    return null;
                }
                let r = _.find(this.activations, item => item.customer_id == customer_id);
                return r == undefined ? null : r;
            }
        },

        components: {
            UserRolesListItem: require('./../../../Listsitems/User/Roles/UserRolesListItem').default,
        },

        name: 'UserRolesList',
    }
</script>