Laravel 5

Symfony 5.8 et sidebar bootstrap

Avatar de CinquièmeDimension
CinquièmeDimension

Salut à tous!

Je viens quémander de l'aide pour un problème (vous vous en doutez, hein...)

Voilà, j'ai un menu en sidebar bootstrap avec des cards accordéon (comme le Accordion example de Bootstrap https://getbootstrap.com/docs/4.0/components/collapse/)

L'example d'une de mes cards (j'espère que la mise à jour de ce site permet enfin d'afficher du blade sans l'interpréter):

<div class="card" href="#menu-stats">
    
    <div class="card-header" id="headingstats">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapsestats" aria-expanded="true" aria-controls="collapsestats">
              <i class="fas fa-chart-bar"></i> Statistiques
        </button>
      </h5>
    </div>

    <div id="collapsestats" class="collapse {{ request()->is('stats_*') ? 'show' : '' }}" aria-labelledby="headingstats" data-parent="#accordion">
        <div class="card-body">
            <ul class="list-unstyled">
                <li class="nav-item">
                    <a class="nav-link {{ request()->is('stats_recherches') ? 'active' : '' }}" href="{{ route('stats_recherches') }}">
                        <i class="fas fa-history"></i> Recherches
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request()->is('stats_integrations') ? 'active' : '' }}" href="{{ route('stats_integrations') }}">
                        <i class="far fa-file-code"></i> Intégration
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request()->is('stats_facturation') ? 'active' : '' }}" href="{{ route('stats_facturation') }}">
                        <i class="far fa-file-alt"></i> Facturation
                    </a>
                </li>
            </ul>
        </div>
        
    </div>
</div>

J'ai fait une vérif en blade pour faire en sorte que si ma requete commence par un préfixe (ici "stats_" dans mon exemple) l'accordéon s'ouvre et un autre pour rendre le lien en classe "actif". Jusqu'ici tout fonctionne bien...

SEULEMENT VOILA : Ma premiere carte sera les favoris donc qui peux commencer par n'importe quel préfixe et sera obligatoirement une page qui est déjà présente dans la suite de mon menu. J'aimerai faire en sorte que, si la page ouverte est dans les favoris, ce soit la carte des favoris qui soit ouverte et non celle des statistiques (toujours en prenant mon example).

Je ne sais pas si j'ai été très clair...

Posté il y a 3 mois
Avatar de CinquièmeDimension
CinquièmeDimension

Je suis ravi de voir que cette mise à jour (que je trouve pas très jolie, personnelement, c'est surtout la disparition du nom du dernier intervenant dans l'accueil qui me perturbe) permet d'ajouter du blade sans l'interpréter... ouff

Posté il y a 3 mois
Avatar de bestmomo
bestmomo

Salut,

Je confirme c'est pas très clair :)

J'ai du mal à imaginer comment tu construis ta carte des favoris...

Posté il y a 3 mois
Avatar de CinquièmeDimension
CinquièmeDimension

Voilà ma carte favoris:

<div class="card" href="#menu-favoris">
    <div class="card-header" id="headingfavoris">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapsefavoris" aria-expanded="true" aria-controls="collapsefavoris">
          <i class="far fa-star"></i> Favoris
        </button>
      </h5>
    </div>

    <div id="collapsefavoris" class="collapse" aria-labelledby="headingfavoris" data-parent="#accordion">
      <div class="card-body">
        <ul class="list-unstyled">
           @foreach($global['favoris'] as $fav)
               <li class="nav-item">
                    <a class="nav-link" href="{{ url('/') }}{{ $fav->TP_DIVR_URL }}">
                        {!! $fav->TP_DIVR_ICON !!} 
                        {{ $fav->TP_LIBE }}
                    </a>
                </li>
           @endforeach

        </ul>
      </div>
    </div>
</div>

Je suis passé par un MasterComposer qui va chercher mes favoris pour les injecter dans mon layout.

Donc j'ai cette carte qui va faire une boucle sur la variable de mes favoris et toutes les autres cartes qui sont comme celle que j'ai posté précédemment. Je sais pas si c'est beaucoup plus clair -__-'

Posté il y a 3 mois
Avatar de bestmomo
bestmomo

Je pense avoir à peu près compris. En gros ta condition request()->is pour le show de ton collapse n'est pas suffisant, il faut aussi vérifier que la requête n'est pas déjà dans les favoris. Ca fait un peu lourd comme traitement côté vue. Ca serait peut-être bien de traiter ça en amont dans le contrôleur en ajoutant une propriété à ta requête par exemple, j'ai jamais fait ce genre de chose mais pourquoi pas ?

Posté il y a 3 mois
Avatar de CinquièmeDimension
CinquièmeDimension

Bon j'ai fait un peu de bricolage et j'ai résolu comme ça:

Dans mon masterComposer j'avais un array $favoris avec entre autres le champ TP_DIVR_URL qui est l'url du favorisau format relatif /mapage

foreach($favoris as $fav){
    $url = $fav->TP_DIVR_URL;
    $trimmed = ltrim($url, "/");

    if($this->request->decodedPath() == $trimmed){
        $this->request->session()->flash('favoris_active', $url);
    }
}

Je vérifie pour chacun de mes favoris si l'url en cours corresponds au champ TP_DIVR_URL (auquel j'ai enlevé le caractère /) Et si je trouve une correspondance je stoque ça en session flash.

Au niveau de ma vue, j'ai appliqua la classe active si le lien corresponds à ce que j'ai en session flash:

<a class="nav-link {{ Session::has('favoris_active') && Session::get('favoris_active') == $fav->TP_DIVR_URL ? 'active' : '' }}" href="{{ url('/') }}{{ $fav->TP_DIVR_URL }}">
    {!! $fav->TP_DIVR_ICON !!} 
    {{ $fav->TP_LIBE }}
</a>

Et j'ai vérifié si ma session flash favoris_active existe, j'ouvre plutôt la card des favoris:

let check_favoris_active = "{{ Session::has('favoris_active') }}";
if(check_favoris_active == "1"){
    let $target = $('#collapsefavoris');
    $target.collapse('show');
}
Posté il y a 3 mois

Vous ne pouvez pas répondre à ce sujet.