Como usar o FLUIGC.filter numa página pública

Preciso de ajuda, estou montando uma SuperWidget com um exemplo que peguei aqui no fórum, para poder ler datasets em uma página pública, está funcionando, porém ela usa o FLUIGC.datatable, e eu preciso que seja com FLUIGC.filter.

Código da SuperWidget

var datasetPublic = SuperWidget.extend({

    //método iniciado quando a widget é carregada
    init: function() {
        this.loadDataTable();
    },

    //BIND de eventos
    bindings: {
        local: {},
        global: {}
    },

    /*
     * Método de exemplo para carregar dataset via OAuth com $.ajax
     * 
     */
    loadDataset: function() {         
        // API OAUTH utilizada: https://github.com/ddo/oauth-1.0a
        var oauth = OAuth({
            consumer: {
                key: 'teste_dataset',
                secret: 'teste'
            },
            signature_method: 'HMAC-SHA1',
            hash_function: function(base_string, key) {
                return CryptoJS.HmacSHA1(base_string, key).toString(CryptoJS.enc.Base64);
            },
            nonce_length: 6
        });

        //  Recurso a ser consumido no fluig
        var request_data = {
            // Necessário passar URL completa para não dar erro de signature invalid
            url: 'http://url/api/public/ecm/dataset/search',
            method: 'GET',
            data: {
                datasetId: 'colleague'
            }
        };

        // Tokens do usuário aplicativo para o Oauth APP cadastrado
        var token = {
            key: '2032319a-a90e-4aa5-a975-859d8a521019',
            secret: '28f3f841-656c-440d-a7f4-ddcd60498841435760d8-3147-4226-852d-077d4ecff849'
        };

        /* A geração dos dados para autenticação OAuth , esta sendo gerado no atributo data do ajax 
         * através da chamada do método: oauth.authorize(request_data, token)
        */

        $.ajax({
            url: request_data.url,
            crossDomain: true,
            async: true,
            type: request_data.method,        
            data: oauth.authorize(request_data, token)
        }).done(function(data) {

        });
    },

    loadDataTable: function() {

        var userIsLogged = WCMAPI.getUserIsLogged();

        var request_data = {
            url: !userIsLogged ? 'http://url/api/public/ecm/dataset/search' : '/api/public/ecm/dataset/search',
            method: 'GET',
            data: {
                datasetId : 'colleague'
            }
        };

        if (!userIsLogged) {
            var oauth = OAuth({
                consumer: {
                    key: 'teste_dataset',
                      secret: 'teste'
                },
                signature_method: 'HMAC-SHA1',
                hash_function: function(base_string, key) {
                    return CryptoJS.HmacSHA1(base_string, key).toString(CryptoJS.enc.Base64);
                },
                nonce_length: 6
            });

            var token = {
                key: '2032319a-a90e-4aa5-a975-859d8a521019',
                secret: '28f3f841-656c-440d-a7f4-ddcd60498841435760d8-3147-4226-852d-077d4ecff849'
            };
        }

        FLUIGC.datatable('[data-global-calendar]', {
            dataRequest: {
                url: request_data.url,
                options: {
                    dataType: 'json',
                    crossDomain: true,
                    cache: true,
                    type: request_data.method,
                    data: request_data.data,
                    beforeSend: function(jqXHR, settings) {
                        if (!userIsLogged) {
                            /* O Datatable adiciona parametros na URL para ordenação, paginação e busca
                             * Desta forma só é possivel gerar uma requisição corretamente via OAuth
                             * após a adição dos parâmetros, por isso geramos a autorização no beforeSend
                            */

                            // Pega URL com os parâmetros adicionados pelo datatable
                            request_data.url = settings.url;
                            // adiciona no atributo data do objeto request_data os dados para autenticação OAuth
                            request_data.data = $.extend(true, {}, request_data.data, oauth.authorize(request_data, token));
                            // Altera URL com os novos parametros
                            settings.url = settings.url.split("?")[0] + "?" + $.param(request_data.data);

                        }
                    }
                },
                root: 'content',
                limit: 50,
                offset: 0,
                patternKey: 'searchValue',
                limitkey: 'limit',
                offsetKey: 'offset'
            },
            renderContent: ["colleagueName"],
            header: [
                {
                    'title': 'Nome',
                    'dataorder': '',
                    'size': 'col-md-8'
                },
            ],
            multiSelect: false,
            classSelected: 'danger',
            search: {
                enabled: false
            },
            navButtons: {
                enabled: false,
                forwardstyle: 'btn-warning',
                backwardstyle: 'btn-warning',
            },
            emptyMessage: '<div class="text-center">No data to display.</div>',
            tableStyle: 'table-striped'
        }, function(err, data) {
            // DO SOMETHING (error or success)
        });
    }
});

A View da widget

<div id="datasetPublic_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="datasetPublic.instance()">
    <div class="container-fluid">
        <div class="page-header">
            <h3>Datasets Públicos</h3>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div data-global-calendar></div>
            </div>
        </div>
    </div>
</div>
<script type="text/template" class="template_global_calendar">
    <tr>
        <td>{{holidayCalendarId}}</td>
        <td>{{dayFormatted}}</td>
    </tr>
</script>

Qualquer ajuda é bem-vinda!

Valeu!

compartilhar
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags filter datasets pagina publica widget fluigc ou faça a sua própria pergunta.