<template>
    <v-toolbar
        dense
        tile
        flat
        id="folders-list-toolbar"
        outlined
    >
        <cs-btn 
            icon="mdi-plus"
            @click="OnClick"
        />

        <cs-quick-search 
            v-if="false"
            :dataprovider="dataprovider" 
            :maxWidth="110"
            class="ml-2"
        />

        <v-spacer></v-spacer>
        
        <cs-records-count 
            :dataprovider="dataprovider"
            field="itemsCount"
        >
            <cs-btn-reload 
                :dataprovider="dataprovider" 
            />
        </cs-records-count>
    </v-toolbar>
</template>

<script>
    export default {
        props: {
            app: {required: true},
        },

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

            form() {
                return this.app.forms.Permissions;
            },
        },

        methods: {
            OnClick(e) {
 
                this.form.menu.visible = false;
                    
                this.form.Show(null, 'insert', null);
                
                this.app.vue.$nextTick( () => {
                    this.form.menu.visible = true;
                    this.form.menu.x = e.clientX + 200;
                    this.form.menu.y = e.clientY;
                });

            }
        },

        components: {
            CsRecordsCount: require('@CsVueComp/dataprovider/CsRecordsCount').default,
            CsBtnReload: require('@CsVueComp/buttons/CsBtnReload').default,
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'PermissionsRootSideToolbar',
    }
</script>

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