Apply style to Active or Inactive state with php in Laravel

1

I happen to have my template index.blade.php in which I post the list of articles, I would like the status Inactive to appear red, I do not have any idea of how to do it I am a newbie in laravel and php, in fact I was inclined by this framework to avoid doing so much php code thanks to the blade templates ..

I guess I should implement an if something like

if (estado.equals("Inactivo")){}

but I do not have the slightest idea I hope you can help me

I attach the file index.balde.php

@extends('layouts.admin')
@section('contenido')
<div class="row">
  <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
    <h3>Listado de articulos <a href="almacen/articulo/create"><button type="button" name="button" class="btn btn-success">nuevo</button></a></h3>
    @include('almacen.articulo.serch')
  </div>
</div>
<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="table-responsive">
      <table class="table table-bordered table-condensed table-striped table-hover">
        <thead>
          <th>ID</th>
          <th>Nombre</th>
          <th>Codigo</th>
          <th>Categoria</th>
          <th>Stock</th>
          <th>Imagen</th>
          <th>Estado</th>
          <th>Opciónes</th>
        </thead>
        @foreach($articulos as $art)
        <tr>
          <td>{{$art->idarticulo}}</td>
          <td>{{$art->nombre}}</td>
          <td>{{$art->codigo}}</td>
          <td>{{$art->categoria}}</td>
          <td>{{$art->stock}}</td>
          <td>
            <img src="{{asset('/imagenes/articulos/'.$art->imagen)}}" alt="{{$art->nombre}}" width="100px" height="100px" class="img-thumbnail" />
          </td>
          <td>{{$art->estado}}</td>
          <td>
            <button type="button" name="button">Editar</button>
          </td>
        </tr>
        @endforeach
      </table>

    </div>

  </div>

</div>


@endsection
    
asked by jeancarlos733 26.10.2016 в 23:59
source

3 answers

1

Friends, thank you for commenting, considering your codes, I resolved my concern in the following way.

   @foreach($articulos as $art)
        <tr>
          <td>{{$art->idarticulo}}</td>
          <td>{{$art->nombre}}</td>
          <td>{{$art->codigo}}</td>
          <td>{{$art->categoria}}</td>
          <td>{{$art->stock}}</td>
          <td>
            <img src="{{asset('/imagenes/articulos/'.$art->imagen)}}" alt="{{$art->nombre}}" width="100px" height="100px" class="img-thumbnail" />
          </td>
          <td>
            @if($art->estado == 'Inactivo')
            <span class="text-danger">{{$art->estado}}</span>
            @else
            <span class="text-success">{{$art->estado}}</span>
            @endif
          </td>
          <td>
            <button type="button" name="button">Editar</button>
          </td>
        </tr>
        @endforeach

This way I get Inactive in red and Active in green, a hug.

    
answered by 27.10.2016 / 02:58
source
1

Taking into account the previous answer would be something different since you would have to color the whole line, I would do something more or less like this:

@extends('layouts.admin')

@section('contenido')
<div class="row">
  <div class="col-md-6 col-xs-12">
    <h3>Listado de articulos <a href="almacen/articulo/create"><button type="button" name="button" class="btn btn-success">nuevo</button></a></h3>
    @include('almacen.articulo.serch')
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <div class="table-responsive">
      <table class="table table-bordered table-condensed table-striped table-hover">
        <thead>
          <th>ID</th>
          <th>Nombre</th>
          <th>Codigo</th>
          <th>Categoria</th>
          <th>Stock</th>
          <th>Imagen</th>
          <th>Estado</th>
          <th>Opciónes</th>
        </thead>
        @foreach($articulos as $art)
        //Utilizaria los estilos de bootstrap que ya nos da por defecto
        <tr class="@if($art->estado == 'Inactivo') table-danger @endif">
          <td>{{$art->idarticulo}}</td>
          <td>{{$art->nombre}}</td>
          <td>{{$art->codigo}}</td>
          <td>{{$art->categoria}}</td>
          <td>{{$art->stock}}</td>
          <td>
            <img src="{{asset('/imagenes/articulos/'.$art->imagen)}}" alt="{{$art->nombre}}" width="100px" height="100px" class="img-thumbnail" />
          </td>
          <td>{{$art->estado}}</td>
          <td>
            <button type="button" name="button">Editar</button>
          </td>
        </tr>
        @endforeach
      </table>
    </div>  
  </div>
</div>
@endsection

With the class table-danger bootstrap use the red color you need without creating a CSS.

    
answered by 27.10.2016 в 01:30
0

If you want to use a blade, you just have to use your conditional @if ... @endif to add a class to the text container "Inactive" and change the color in your css file.

index.blade.php

@extends('layouts.admin')

@section('contenido')
<div class="row">
  <div class="col-md-6 col-xs-12">
    <h3>Listado de articulos <a href="almacen/articulo/create"><button type="button" name="button" class="btn btn-success">nuevo</button></a></h3>
    @include('almacen.articulo.serch')
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <div class="table-responsive">
      <table class="table table-bordered table-condensed table-striped table-hover">
        <thead>
          <th>ID</th>
          <th>Nombre</th>
          <th>Codigo</th>
          <th>Categoria</th>
          <th>Stock</th>
          <th>Imagen</th>
          <th>Estado</th>
          <th>Opciónes</th>
        </thead>
        @foreach($articulos as $art)
        <tr>
          <td>{{$art->idarticulo}}</td>
          <td>{{$art->nombre}}</td>
          <td>{{$art->codigo}}</td>
          <td>{{$art->categoria}}</td>
          <td>{{$art->stock}}</td>
          <td>
            <img src="{{asset('/imagenes/articulos/'.$art->imagen)}}" alt="{{$art->nombre}}" width="100px" height="100px" class="img-thumbnail" />
          </td>
          <td class="@if($art->estado == 'Inactivo') inactivo @endif">{{$art->estado}}</td>
          <td>
            <button type="button" name="button">Editar</button>
          </td>
        </tr>
        @endforeach
      </table>
    </div>  
  </div>
</div>
@endsection

and in your css file it would be something like that

td.inactivo {
  color: red;
}
    
answered by 27.10.2016 в 00:42