filament-progress-column

https://github.com/ryangjchandler/filament-progress-column The progress bar wont show up

GitHub

GitHub - ryangjchandler/filament-progress-column: Add a progress ba...

Add a progress bar column to your Filament tables. - GitHub - ryangjchandler/filament-progress-column: Add a progress bar column to your Filament tables.

15 Replies

Yuut4OP•2y ago

my code

       public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('name'),
                Tables\Columns\TextColumn::make('Ofertas por usufruir')
                    ->default(function ($record) {
                        return $record->offers->where('enjoyed', '!=', 1)->count();
                    })
                    ->color(
                        fn ($record) => $record->offers->count() > 0 ? 'danger' : 'success'
                    ),
                ProgressColumn::make('progress')
                    ->poll('5s')
                    ->label(__('Progresso'))
                    ->view('vendor.filament-progress-column.column')
                    ->color('primary')
                    ->progress(function ($record) {
                        $countedOffers = $record->offers->count();
                        $allOffers = $record->offers;
                        $enjoyed = 0;
                        foreach ($allOffers as $offer) {
                            if ($offer->enjoyed == 1) {
                                $enjoyed++;
                            }
                        }
                        /**
                         * format decimal cases
                         */

                        return number_format(($enjoyed / $countedOffers) * 100, 2);
                    })
            ])

       public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('name'),
                Tables\Columns\TextColumn::make('Ofertas por usufruir')
                    ->default(function ($record) {
                        return $record->offers->where('enjoyed', '!=', 1)->count();
                    })
                    ->color(
                        fn ($record) => $record->offers->count() > 0 ? 'danger' : 'success'
                    ),
                ProgressColumn::make('progress')
                    ->poll('5s')
                    ->label(__('Progresso'))
                    ->view('vendor.filament-progress-column.column')
                    ->color('primary')
                    ->progress(function ($record) {
                        $countedOffers = $record->offers->count();
                        $allOffers = $record->offers;
                        $enjoyed = 0;
                        foreach ($allOffers as $offer) {
                            if ($offer->enjoyed == 1) {
                                $enjoyed++;
                            }
                        }
                        /**
                         * format decimal cases
                         */

                        return number_format(($enjoyed / $countedOffers) * 100, 2);
                    })
            ])

LeandroFerreira•2y ago

are you using admin panel? try to remove ->view

Yuut4OP•2y ago

Yes, and I already tried to remove it but apparently it doesn't work, I don't know what I'm doing wrong

Yuut4OP•2y ago

this is the default view

@php
    $evaluatedColor = $getColor();
    $color = match ($evaluatedColor) {
        'primary' => 'bg-primary-600',
        'secondary' => 'bg-secondary-600',
        'danger' => 'bg-danger-600',
        'success' => 'bg-success-600',
        'warning' => 'bg-warning-600',
        default => $evaluatedColor,
    };

    $progress = $getProgress();
    $poll = $getPoll();
@endphp

<div class="filament-tables-progress-column" @if ($poll) wire:poll.{{ $poll }} @endif>
 <div class="flex items-center space-x- 4px-4">
        <div class="bg-gray-700 rounded-full h-2.5 dark:bg-gray-600 w-full">
            <div @class(['h-2.5 rounded-full', $color]) style="width: {{ $progress }}%"></div>
        </div>
        <span class="text-sm text-gray-700 dark:text-gray-200">{{ $progress }}%</span>
    </div>
</div>

@php
    $evaluatedColor = $getColor();
    $color = match ($evaluatedColor) {
        'primary' => 'bg-primary-600',
        'secondary' => 'bg-secondary-600',
        'danger' => 'bg-danger-600',
        'success' => 'bg-success-600',
        'warning' => 'bg-warning-600',
        default => $evaluatedColor,
    };

    $progress = $getProgress();
    $poll = $getPoll();
@endphp

<div class="filament-tables-progress-column" @if ($poll) wire:poll.{{ $poll }} @endif>
 <div class="flex items-center space-x- 4px-4">
        <div class="bg-gray-700 rounded-full h-2.5 dark:bg-gray-600 w-full">
            <div @class(['h-2.5 rounded-full', $color]) style="width: {{ $progress }}%"></div>
        </div>
        <span class="text-sm text-gray-700 dark:text-gray-200">{{ $progress }}%</span>
    </div>
</div>

I'm not finding the stress at all ;_;

toeknee•2y ago

Have you rebuilt your assets?

Yuut4OP•2y ago

rebuilt my assets never done that?

toeknee•2y ago

Actually he logins a progress.css. Can you check that file is rendered?

Yuut4OP•2y ago

Where can I check that, if you can tell me? because until now I haven't touched the native css of the filament because it is in accordance with the intended

LeandroFerreira•2y ago

run php artisan vendor:publish --tag="filament-progress-column-views"

Yuut4OP•2y ago

done

LeandroFerreira•2y ago

add w-full

<div
    class="filament-tables-progress-column w-full"
...

<div
    class="filament-tables-progress-column w-full"
...

Yuut4OP•2y ago

 php

@php
$evaluatedColor = $getColor();
$color = match ($evaluatedColor) {
    'primary' => 'bg-primary-600',
    'secondary' => 'bg-secondary-600',
    'danger' => 'bg-danger-600',
    'success' => 'bg-success-600',
    'warning' => 'bg-warning-600',
    default => $evaluatedColor
};

$progress = $getProgress();
$poll = $getPoll();
@endphp

<div
    class="filament-tables-progress-column"
    @if($poll)
 wire:poll.{{ $poll }}
    @endif
>
 <div class="flex items-center space-x-4 px-4">
        <div class="bg-gray-200 rounded-full h-2.5 dark:bg-gray-600 w-full">
            <div @class([
 'h-2.5 rounded-full',
                $color,
            ]) style="width: {{ $progress }}%"></div>
        </div>

        <span class="text-sm text-gray-700 dark:text-gray-200">{{ $progress }}%</span>
    </div>
</div>

 php

@php
$evaluatedColor = $getColor();
$color = match ($evaluatedColor) {
    'primary' => 'bg-primary-600',
    'secondary' => 'bg-secondary-600',
    'danger' => 'bg-danger-600',
    'success' => 'bg-success-600',
    'warning' => 'bg-warning-600',
    default => $evaluatedColor
};

$progress = $getProgress();
$poll = $getPoll();
@endphp

<div
    class="filament-tables-progress-column"
    @if($poll)
 wire:poll.{{ $poll }}
    @endif
>
 <div class="flex items-center space-x-4 px-4">
        <div class="bg-gray-200 rounded-full h-2.5 dark:bg-gray-600 w-full">
            <div @class([
 'h-2.5 rounded-full',
                $color,
            ]) style="width: {{ $progress }}%"></div>
        </div>

        <span class="text-sm text-gray-700 dark:text-gray-200">{{ $progress }}%</span>
    </div>
</div>

like this ?

<div
    class="filament-tables-progress-column w-full"
    @if($poll)
 wire:poll.{{ $poll }}
    @endif
>

<div
    class="filament-tables-progress-column w-full"
    @if($poll)
 wire:poll.{{ $poll }}
    @endif
>

LeandroFerreira•2y ago

yes

Yuut4OP•2y ago

thanks. I wasn't going to notice that detail so soon, my God.

Yuut4OP•2y ago

you are amazing thank you so much for your help, and for sharing knowledge.

Gaming

Programming

filament-progress-column

Did you find this page helpful?