Yii2 com tema SPA

[Cálcio]

Boa tarde galera...

Estou usando o http://blackrockdigi...otstrap-agency/ em meu site. Estou tentando fazer de uma forma inteligente a exibição do meu portfolio como nesse template aí usando modal.

Não to conseguindo achar uma solução legal para carregar essa bagaça toda. Já pensei em jQuery e/ou montar um select com join, mas toda vez que penso nisso fede. rs

Alguém tem alguma ideia de como implementar isso?

Atualmente meu controller está assim:

public function actionIndex()
    {
        $modelAbout = new About();
        $content = $modelAbout->getContentById(1);

        $modelContact = new ContactForm();

        $modelPortfolio = new portfolio();
        $portfolios = $modelPortfolio->getAllPortfolios();

        $modelPortfolioScreen = new portfolioScreen();
        $portfolioScreen = $modelPortfolioScreen->getAllPortfolioScreenByPortfolioId(2);

        if ($modelContact->load(Yii::$app->request->post())
            && $modelContact->contact(Yii::$app->params['personalEmail'])) {
            Yii::$app->session->setFlash('contactFormSubmitted');

            return $this->refresh('#contact');
        }

        return $this->render('index', [
            'content' => $content,
            'modelContact' => $modelContact,
            'portfolios' => $portfolios,
            'portfolioScreen' => $portfolioScreen,
        ]);
    }

Meu problema é na hora de montar o modal que atualmente faz uso do $modelPortfolioScreen, e como podem ver a passagem de parâmetro está hard code, pois usei para testes, mas ainda estou me enrolando em como fazer isso da forma certa. 

[Sidney]

Não entendi qual é realmente o problema.

Em 1 de junho de 2016 10:29, Cálcio <calc...@gmail.com> escreveu:

$portfolioScreen = $modelPortfolioScreen->getAllPortfolioScreenByPortfolioId(2);

Seu problema seria esse id (2) hardcoded? Não creio que seja pois vc resolveria simplesmente adicionando actionIndex($portfolioId) ou algo parecido, e isso você já teria feito. 

Pode elaborar melhor?

Atenciosamente,
Sidney Lins
------

JW.org/pt/

[Cálcio]

Então Sidney o problema é a caga do conteúdo modal que precisa se dinâmico. 

Cada portfólio do exemplo q mandei carrega os dados do porrifólio e precisa carregar tb os dados da $portfolioScreen que está relacionada com cada portfólio. Preciso arrumar uma forma de carregar esse modal, já q o modal é algo já pré-carregado.

Eu ñ tenho um controller portfolioScreen para isso. É um controller só com um único método que carrega vários models.

O link http://blackrockdigital.github.io/startbootstrap-agency/ mostra o funcionamento do que eu preciso.

[Eric]

O "melhor" jeito não seria um ajax?

Cada click, você dispara um ajax pra ler o action e retornar o conteúdo específico daquele portfólio. Eu sei, transitar HTML no ajax é ruim. Mas pior ainda seria carregar todos os portfólios antes e só chamar depois. Vc carregaria sem necessidade (se o cara não clicasse no portfólio). 

Fiz aqui de cabeça, nem testei o código. Mas já fiz algo parecido:

Como o modal do portfólio sempre vai ter o mesmo id (sempre vai ser renderizado a mesma view), o jQuery sempre vai sobreescrever o HTML, sem abrir outros modais...

<?=Html::a('Portfólio', ['/portfolio/view', 'id' => $model->id], [

    'class' => 'btn portifolio-btn',

]);?>

<?php

$js = <<<JS$('.portfolio-btn').on('click', function (e) {

    e.preventDefault();

    var url = $(e.currentTarget).attr('href');

    $.ajax({

        url: url,

        success: function (html) {

            $('body').html(html);

            $('#modal-portfolio').modal('show');

        }

    });

});

JS;

$this->registerJs($js);

Eric Maicon - ericmaicon.com.br

--
Yii Framework Brasil
#######################################################################
 
Ao solicitar ajuda:
1. Explique o problema ou dificuldade. Seja específico!
2. Explique o que você *já tentou fazer* para resolver a situação;
3. MOSTRE CÓDIGO, sempre que possível. Esta é uma lista de programação!
 
LEMBRE-SE: se você tiver preguiça até para formular sua pergunta os
participantes da lista terão "preguiça" de respondê-la.
 
#######################################################################
 
04/2011: Anexos foram autorizados em votação. Use com moderação!
.
-
--
---
Você recebeu essa mensagem porque está inscrito no grupo "YFB - Yii Framework Brasil" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para yii-framework-br...@googlegroups.com.
Para ver essa discussão na Web, acesse https://groups.google.com/d/msgid/yii-framework-brasil/e6a44a61-ceea-4541-bc0f-eb14d852cc15%40googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.

[Cálcio]

Valeu meu camarada. Vou tentar aqui. Tinha pensado algo parecido, mas como falei qnd pensei na solução não me pareceu mt legal rs.

Mas vou tentar aqui. Valeu pela luz.

Eric Maicon - ericmaicon.com.br

Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para yii-framework-brasil+unsub...@googlegroups.com.

[Eric]

Opa, precisando.

Você pode transitar só JSON  (os dados) e montar td via JS também. Acho que seria o "correto", porém demorado e bem mais difícil de manter.

Se alguém tiver outra solução, fico curioso pra saber.

@Cálcio, lembre de usar renderAjax, pra renderizar os JS e CSS.

Eric Maicon - ericmaicon.com.br

Eric Maicon - ericmaicon.com.br

Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para yii-framework-br...@googlegroups.com.

Para ver essa discussão na Web, acesse https://groups.google.com/d/msgid/yii-framework-brasil/e6a44a61-ceea-4541-bc0f-eb14d852cc15%40googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.

--
Yii Framework Brasil
#######################################################################
 
Ao solicitar ajuda:
1. Explique o problema ou dificuldade. Seja específico!
2. Explique o que você *já tentou fazer* para resolver a situação;
3. MOSTRE CÓDIGO, sempre que possível. Esta é uma lista de programação!
 
LEMBRE-SE: se você tiver preguiça até para formular sua pergunta os
participantes da lista terão "preguiça" de respondê-la.
 
#######################################################################
 
04/2011: Anexos foram autorizados em votação. Use com moderação!
.
-
--
---
Você recebeu essa mensagem porque está inscrito no grupo "YFB - Yii Framework Brasil" dos Grupos do Google.

Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para yii-framework-br...@googlegroups.com.
Para ver essa discussão na Web, acesse https://groups.google.com/d/msgid/yii-framework-brasil/70b22e3a-e2b0-4a0d-bbc7-ced963dc30cb%40googlegroups.com.

[Sidney]

Também acho a sugestão do Eric mais válida, especialmente em formato json (caso não sejam portfolios muito complexos).

Agora, se os portfolios não forem muitos, também dá pra carregar tudo e utilizar algum plugin que carrega as imagens somente quando necessário. Essa técnica teria a vantagem da acessibilidade ao permitir acesso ao portfolio para leitores de tela. Mas se tiver uma qtd grande, também acho que não compensa.

Atenciosamente,
Sidney Lins
------

JW.org/pt/

Para ver essa discussão na Web, acesse https://groups.google.com/d/msgid/yii-framework-brasil/CADSYx-M-6CBUMrRim1yxGQmV8ObetGgBCPyWCezjsoezwyiHOQ%40mail.gmail.com.

[Newerton Vargas de Araújo]

Cálcio,

Existe 2 modos que você pode fazer isso.

1. Seria usar o mesmo foreach() que irá listar o portifólio, para criar as <div> do modal. Acabei de olhar no codigo fonte do template, lá tem as tags comentada <!-- Portfolio Modal 1 -->.

Cada item do portfolio terá sua modal, olha no código fonte que você ferá.

2. Usando ajax, como o exemplo do Eric.

[Cálcio]

Resolvi da forma + simples e a que achei q ñ daria certo.

Adicionei um with na consulta no model e ele trouxe o array como queria.

Model

public function getAllPortfolios()
{
    return $this->find()->with('portfolioScreen')->asArray()->all();
}

Resultado

  1 => [

        'id' => '13'
        'title' => 'RISCO'
        'subtitle' => 'Sistema Matriz de Risco'
        'description' => '<p>Sistema da intranet do SERPROS para gerenciar os riscos das &aacute;reas da empresa</p>'
        'cover' => 'responder-questionario.png'
        'portfolioScreen' => [
            0 => [
                'id' => '15'
                'portifolioId' => '13'
                'picture' => 'tela-responder-questionario-impacto-frequencia.png'
                'description' => '-'
            ]
            1 => [
                'id' => '16'
                'portifolioId' => '13'
                'picture' => 'tela-responder-questionario-auto-avaliacao.png'
                'description' => '-'
            ]
            2 => [
                'id' => '17'
                'portifolioId' => '13'
                'picture' => 'tela-cadastro-questionario.png'
                'description' => '-'
            ]
            3 => [
                'id' => '18'
                'portifolioId' => '13'
                'picture' => 'tela-cadastro-pergunta.png'
                'description' => '-'
            ]
            4 => [
                'id' => '19'
                'portifolioId' => '13'
                'picture' => 'tela-cadastro-subcategoria-risco.png'
                'description' => '-'
            ]
            5 => [
                'id' => '20'
                'portifolioId' => '13'
                'picture' => 'tela-cadastro-atividade.png'
                'description' => '-'
            ]
        ]
    ]




Vamos ver como vai se comportar com mais registros, Inicialmente serão 6 portfólios e cada portfólio com 7 imagens e descrições.