SelectBadge Field

1. Preview

2. Info

Package combines Select field and Badge field, adds styled classes in CSS and adds functions such as icons(), map(), addTypes(), options(), labels().

• You can use to like simple css Badge

How use Badge

->displayUsing(fn($value)=> '<span class="' .config('wame-badge.info-white'). '">' . $value . '</span>')->asHtml()
->displayUsing(fn($value)=> '<span class="' .config('wame-badge.info'). '">' . $value . '</span>')->asHtml()

->displayUsing(fn($value)=> '<span class="status-bg-teal s-badge">' . $value . '</span>')->asHtml(),
->displayUsing(fn($value)=> '<span class="status-bg-primary s-badge">' . $value . '</span>')->asHtml(),

Added files:

 resources/css/labels-status.css - register file to NovaProvider    Nova::style('label-statuses', resource_path('css/label-statuses.css'));,
 config/wame-badge.php - config('wame-badge.warning'),
 Models/Trait/BadgeStatuses.php  --add to model,
 App\Utils\Helpers\SelectBadge.php function SelectBadge; 

Function

public static function select ($select, $options, $types, $icons){
    return [
        Select::make(__('fields.' .$select), $select)
            ->filterable()
            ->displayUsingLabels()
            ->onlyOnForms()
            ->options($options)
            ->rules('required')->required(),
        Badge::make(__('fields.' . $select), $select)
            ->sortable()
            ->map($options)
            ->hideWhenCreating()->hideWhenUpdating()
            ->addTypes($types)
            ->icons($icons ? $icons : $types)
            ->labels($options),
    ];
}

public static function badge ($select, $options, $types, $icons){
    return [
        Badge::make(__('fields.' . $select), $select)
            ->map($options)
            ->hideWhenCreating()->hideWhenUpdating()
            ->addTypes($types)
            ->icons($icons ? $icons : $types)
            ->labels($options),
    ];
}

3. Instalation

• vendor publish --SelectBadgeServiceProvider

php artisan vendor:publish --provider="Wame\SelectBadge\SelectBadgeServiceProvider"

you can use config classes or register Nova::style('label-statuses', resource_path('css/label-statuses.css')); in NovaServiceProvider.php

4. Usage

• Add to your Model Trait

Models/Trait/BadgeStatuses.php

use App\Models\Traits\BadgeStatuses;
use BadgeStatuses;

• Add fields to your Nova Model

use App\Utils\Helpers\SelectBadge;

//...SelectBadge::select('place_execution', $this->place(), $this->placeMap(), $this->placeType(), $this->placeIcons()  ),
...SelectBadge::select('place_execution', $this->place(), $this->place('type'), $this->place('icon')  ),

• Edit trait example:

    const PLACE = [
        'OFFICE' => 1,
        'HALL' => 2,
        'EXTERIOR' => 3,
        'MOBILE' => 4,
    ];

    public function place($value=null){
        $variable = [
            __('fields.office'),
            __('fields.hall'),
            __('fields.exterior'),
            __('fields.mobile'),
        ];
        $icon = [
            'collection',
            'office-building',
            'cloud',
            'switch-vertical',
        ];
        $type = [
            'status-color-blue',
            'status-color-teal',
            'status-color-coral',
            'status-color-teal2',
        ];

        $data = ($value === 'value') ? $variable : (($value === 'icon') ? $icon : (($value === 'type') ? $type : null));

        if ($value == null) return array_combine(array_values(self::PLACE), $variable);
        if (is_array($data)) return array_combine($variable, $data);
        else return array_fill_keys($variable, $data);
    }

5. Configuration / Customization

### You can add your custom classes

If you dont want Icons use null:

$icon = '';
  ...SelectBadge::select('place_execution', $this->place(), $this->place('type'), place('icon')  ),

Icons can find here: https://v1.heroicons.com/

6. Badges class:

red

green

green2

blue

ice

teal

teal2

coral

aquamarine

golden

orange

orange-light

green-light

green-dark

pink

purple

config('wame-badge.error)

denied

approved

info

default

warning

config('wame-badge.error-white')

denied-white

approved-white

info-white

default-white

warning-white

config classes:

• config('wame-badge.error')
• ...

css classes:

• status-bg-[color]
• status-color-[color]
• status-line-[color]
• status-border-[color]
• ...

more:

• primary
• secondary
• none

OR OLDER CODE

Kliknite sem pre zobrazenie obsahu

    const
        OFFICE = 1,
        HALL = 2,
        EXTERIOR = 3,
        MOBILE = 4;

    public function place(): array
    {
        return [
            self::OFFICE => __('fields.office'),
            self::HALL => __('fields.hall'),
            self::EXTERIOR => __('fields.exterior'),
            self::MOBILE => __('fields.mobile'),
        ];
    }

    // uprava css / nalepky 
    // you can use css class or tailwind classes from config too : config('wame-badge.info')
    public function placeType(){
        return [
            'office' => 'status-color-blue',
            'hall' => 'status-color-teal',
            'exterior' =>  'status-color-coral',
            'mobile' => 'status-color-aquamarine',
           // 'edit' => config('wame-badge.warning'),
        ];
    }

// Add Icons 
    public function placeIcons(){
        return [
            'office' => 'exclamation-circle',
            'hall' => 'check-circle',
            'exterior' => 'x-circle',
            'mobile' => 'document-text',
        ];
    }

OR OLDER CODE

Kliknite sem pre zobrazenie obsahu

    const PLACE = [
        OFFICE = 1,
        HALL = 2,
        EXTERIOR = 3,
        MOBILE = 4
        ];
        
      public function placeVariable ($value = 'value') {
        $variable = [
            __('fields.office'),
            __('fields.hall'),
            __('fields.exterior'),
            __('fields.mobile'),
            __('fields.other'),
        ];
        $type = [
            'status-color-blue',
            'status-color-teal',
            'status-color-coral',
            'status-color-teal2',
            'status-color-default',
        ];
        $icon = 'collection';

        if ($value === 'value') return $variable;
        if ($value === 'icon') return $icon;
        if ($value === 'type') return $type;
    }
      public function place($type=null){
        if ($type == null) return array_combine(array_values(self::PLACE), $this->placeVariable());

        if (is_array($this->placeVariable($type))){
            return array_combine($this->placeVariable(), $this->placeVariable($type));
        }
        else  return array_fill_keys($this->placeVariable(), $this->placeVariable($type));
    }