<template>
    <cs-centered-alert
        v-if="! controller.isBooted"
        :height="app.height"
        :width="app.width"
        message="Se încarcă..."
    >
        <v-progress-circular
            indeterminate
            color="orange darken-1"
        >
        </v-progress-circular>
    </cs-centered-alert>

    <div v-else>
        <v-card
            tile
            flat
            :width="app.width"
            :height="app.height"
            :disabled="controller.isPageDisabled"
        >

            <v-card-title class="pa-0">
                <span class="primary--text text--darken-3">
                    {{ __('Cursuri') }}
                </span>

                <v-spacer></v-spacer>
            </v-card-title>

            <v-card-title class="pa-0">
                <v-breadcrumbs 
                    v-if="controller.hasBreadcrumbs"
                    :items="controller.breadcrumbs" 
                    class="pa-0"
                >
                    <template v-slot:divider>
                        <v-icon>mdi-dots-vertical</v-icon>
                    </template>
                </v-breadcrumbs>

                <v-spacer></v-spacer>

                <slot name="append-breadcrumbs"></slot>

                <cs-quick-search 
                    v-if="controller.hasQuickSearch"
                    :dataprovider="controller.dataprovider"
                />

                <v-chip small outlined>
                    {{controller.recordsCount}}
                </v-chip>
            </v-card-title>


            <cs-toolbar 
                :toolbar="controller.toolbar"
            >
                <cs-pagination 
                    v-if="controller.hasPagination"
                    :dataprovider="controller.dataprovider" 
                    :width="null"
                    htmlClass="mr-0 ml-auto"
                />
            </cs-toolbar>

            <v-card 
                :width="app.width"
                :height="app.height - 112"
                tile 
                flat 
                class=""
            >
                <data-table 
                    :app="app"
                    :dataprovider="controller.dataprovider"
                    :datatable="controller.datatable"
                    :height="app.height - 112"
                    :width="app.width"
                    :dtWidth="controller.datatableWidth"
                />
            </v-card>  
        </v-card>

        <curs-form-menu 
            :app="app"
            :form="controller.form"
        />

        <curs-filter-menu 
            :app="app"
            :filterform="controller.filterform"
        />

        <trimitere-form-menu 
            :app="app"
            :form="app.forms.Share"
        />
    </div>
    
</template>

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

        computed: {
            controller() {
                return this.app.classes.Cursuri;
            }
        },

        methods: {

            LoadResources() {
                this.app.AddClassesByContext(require.context('./../../Classes', true, /\.class.js$/i));
                this.app.AddDataProvidersByContext(require.context('./../../DataSessions', true, /\.dataprovider.js$/i));
                this.app.AddDatatablesByContext(require.context('./../../Datatables', true, /\.datatable.js$/i));
                this.app.AddFormProvidersByContext(require.context('./../../FormProviders', true, /\.formprovider.js$/i));                
                this.app.AddFormsByContext(require.context('./../../Forms', true, /\.form.js$/i));
                this.app.AddFilterFormsByContext(require.context('./../../Filterforms', true, /\.filterform.js$/i));
                this.app.AddMenusByContext(require.context('./../../Toolbars', true, /\.toolbar.js$/i));
                this.app.AddMenusByContext(require.context('./../../Menus', true, /\.menu.js$/i));
                this.app.AddMenusByContext(require.context('./../../Breadcrumbs', true, /\.breadcrumbs.js$/i));
                this.app.AddRequestsByContext(require.context('./../../Requests', true, /\.request.js$/i));
            },

            InitDatatable() {
                this.controller.DatatableRegisterDataProvider(this.controller.model);
            },

            InitForms() {
                this.controller.FormRegisterFormProvider(this.controller.model);

                this.app.forms.Categorii.SetFormProvider(this.app.formproviders.Categorii);
                this.app.forms.Adresare.SetFormProvider(this.app.formproviders.Adresare);
                this.app.forms.Share.SetFormProvider(this.app.formproviders.Share);

                let columns = this.app.datatables.Cursuri._columns;

                columns['name-column'].editable.AttachForm(this.app.forms.Cursuri);
                columns['status-column'].editable.AttachForm(this.app.forms.Cursuri);
                columns['category-column'].editable.AttachForm(this.app.forms.Cursuri);
                columns['type-column'].editable.AttachForm(this.app.forms.Cursuri);
                columns['sursa-column'].editable.AttachForm(this.app.forms.Cursuri);
                columns['previewimage-column'].editable.AttachForm(this.app.forms.Cursuri);
                columns['adresare-column'].editable.AttachForm(this.app.forms.Cursuri);
                columns['tematica-column'].editable.AttachForm(this.app.forms.Cursuri);
            },

            InitFiltering() {
                this.controller.FilterformRegisterDataProvider(this.controller.model);

                // let columns = this.app.datatables.Users._columns;
                // let controls = this.app.filterForms.Users.controls;

                // columns['last_name-column']._header.filterable.AttachFilterControl(controls['last_name']);
                // columns['first_name-column']._header.filterable.AttachFilterControl(controls['first_name']);
                // columns['email-column']._header.filterable.AttachFilterControl(controls['email']);
                // columns['phone-column']._header.filterable.AttachFilterControl(controls['phone']);
                // columns['active-column']._header.filterable.AttachFilterControl(controls['status']);
            },

            LoadData() {
                this.app.dataSession.Cursuri.Refresh();
            }
        },

        components: {
            CsCenteredAlert: require('@CsVueComp/sheets/CsCenteredAlert').default,
            CsToolbar: require('@CsVueComp/menus/toolbar/CsToolbar').default,
            CsPagination: require('@CsVueComp/dataprovider/CsPagination').default,
            CsQuickSearch: require('@CsVueComp/dataprovider/CsQuickSearch').default,
        },
        
        mixins: [
            require('VUEMIX/Index/IndexPage'),
        ],

        name: 'Index',
    }
</script>