Making Data Dynamic when filtering by date #1116
-
|
So this is my table component, its a tabel based on the Project::class model , it displays multiple expenses based on different statuses that are in the Order::class model <?php
namespace App\Http\Livewire\Customers\Tables\New;
use App\Models\Order;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
use App\Models\Project;
use Hashids\Hashids;
use Illuminate\Database\Eloquent\Builder;
use NumberFormatter;
use Rappasoft\LaravelLivewireTables\Views\Columns\ButtonGroupColumn;
use Rappasoft\LaravelLivewireTables\Views\Columns\LinkColumn;
use Rappasoft\LaravelLivewireTables\Views\Filters\DateFilter;
use Rappasoft\LaravelLivewireTables\Views\Filters\TextFilter;
class CustomerProjectsTable extends DataTableComponent
{
protected $model = Project::class;
protected $listeners = [
'refreshProjectsTable' => '$refresh',
];
public function configure(): void
{
$this->setPrimaryKey('id')
->setSingleSortingDisabled()
->setOfflineIndicatorEnabled()
->setQueryStringDisabled()
->setEagerLoadAllRelationsEnabled()
->setFilterLayoutSlideDown()
->setPerPage(50)
->setPerPageAccepted([25, 50, 75, 100])
->setAdditionalSelects(['customer_projects.id as id', 'customer_projects.project_name as project_name'])
->setTrAttributes(function ($row, $index) {
return [
'class' => 'hover:bg-gray-100',
];
})
->setThAttributes(function (Column $column) {
if ($column->isLabel() && $column->getTitle() === 'Needs Attention') {
return [
'class' => 'bg-yellow-100 font-bold',
];
} elseif ($column->isLabel() && $column->getTitle() === 'In Progress') {
return [
'class' => 'bg-purple-100 font-bold',
];
} elseif ($column->isLabel() && $column->getTitle() === 'Live') {
return [
'class' => 'bg-green-100 font-bold',
];
} elseif ($column->isLabel() && $column->getTitle() === 'Canceled') {
return [
'class' => 'bg-red-100 font-bold',
];
}
return [];
})
->setTdAttributes(function (Column $column, $row, $columnIndex, $rowIndex) {
switch ($columnIndex) {
case 2:
return [
'class' => 'bg-green-50',
];
break;
case 3:
return [
'class' => 'bg-purple-50',
];
break;
case 4:
return [
'class' => 'bg-yellow-50',
];
break;
case 5:
return [
'class' => 'bg-red-50',
];
break;
default:
# code...
break;
}
return [];
})
->setFooterTdAttributes(function (Column $column, $rows) {
return ['class' => 'bg-[#F0F0F0] font-bold'];
});
$this->setSecondaryHeaderEnabled();
}
public function builder(): Builder
{
return Project::query()
->forAuthCustomer()
->whereArchived(0)
->with(['linksOrders'])
->withSum('linksOrders', 'price')
->withSum([
'linksOrders as links_orders_sum_price_live' => fn ($query) => $query->whereIn('orders.status', [Order::COMPLETED, Order::PUBLISHED]),
], 'price')
->withSum([
'linksOrders as links_orders_sum_price_progress' => fn ($query) => $query->whereIn('orders.status', [Order::PROCESSING, Order::WAITING_ARTICLE, Order::WAITING_CONFIRMATION, Order::PENDING]),
], 'price')
->withSum([
'linksOrders as links_orders_sum_price_attention' => fn ($query) => $query->whereIn('orders.status', [Order::ARTICLE_READY, Order::PRICE_CHANGED, Order::PAUSE]),
], 'price')
->withSum([
'linksOrders as links_orders_sum_price_canceled' => fn ($query) => $query->whereIn('orders.status', [Order::CANCELED, Order::REJECTED]),
], 'price');
}
public function columns(): array
{
$fmt = new NumberFormatter('eu_FR', NumberFormatter::CURRENCY);
return [
LinkColumn::make("Project name", "project_name")
->searchable()
->sortable()
->title(fn ($row) => $row->project_name)
->location(fn ($row) => route('orders::byProject', (new Hashids('', 5))->encode($row->id)))
->attributes(fn ($row) => [
'class' => 'text-blue-500 hover:text-blue-700 underline',
])
->footer(function ($rows) {
return 'Total :';
}),
Column::make("Expenses", "expenses")
->label(fn ($row) => $fmt->formatCurrency($row->links_orders_sum_price, "EUR"))
->sortable()
->footer(function ($rows) use ($fmt) {
return $fmt->formatCurrency($rows->sum('links_orders_sum_price'), 'EUR');
}),
Column::make("Live", "live")
->label(fn ($row) => $fmt->formatCurrency($row->links_orders_sum_price_live, "EUR"))
->sortable()
->footer(function ($rows) use ($fmt) {
return $fmt->formatCurrency($rows->sum('links_orders_sum_price_live'), 'EUR');
}),
Column::make("In Progress", "in_progress")
->label(fn ($row) => $fmt->formatCurrency($row->links_orders_sum_price_progress, "EUR"))
->sortable()
->footer(function ($rows) use ($fmt) {
return $fmt->formatCurrency($rows->sum('links_orders_sum_price_progress'), 'EUR');
}),
Column::make("Needs Attention", "needs_attention")
->label(fn ($row) => $fmt->formatCurrency($row->links_orders_sum_price_attention, "EUR"))
->sortable()
->footer(function ($rows) use ($fmt) {
return $fmt->formatCurrency($rows->sum('links_orders_sum_price_attention'), 'EUR');
}),
Column::make("Canceled")
->label(fn ($row) => $fmt->formatCurrency($row->links_orders_sum_price_canceled, "EUR"))
->sortable()
->footer(function ($rows) use ($fmt) {
return $fmt->formatCurrency($rows->sum('links_orders_sum_price_canceled'), 'EUR');
}),
Column::make("Date", "created_at")
->format(fn ($value) => $value->format('d/m/Y'))
->sortable(),
Column::make("Actions")
->label(function ($row) {
return '<button x-tooltip.raw="Share Project" wire:click="$emit("openModal","modals.projects.share-project", {project:' . $row->id . '})" class="mb-2 mr-2 text-sm font-medium text-center bg-blue-200 rounded-lg text-design-blue hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 p-1.5"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /></svg></button><button x-tooltip.raw="Rename Project" wire:click="$emit("openModal","modals.projects.rename-project", {order:' . $row->id . '})" class="text-design-purple bg-violet-200 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg text-sm p-1.5 text-center mr-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg></button><button x-tooltip.raw="Archive Project" wire:click="$emit("openModal","modals.projects.archive-project", {project:' . $row->id . '})" class="text-yellow-500 bg-yellow-200 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm p-1.5 text-center mr-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" /></svg></button><button x-tooltip.raw="Delete Project" wire:click="$emit("openModal","modals.delete.delete-project-confirmation", {order:' . $row->id . '})" class="text-red-500 bg-red-200 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg text-sm p-1.5 text-center mr-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg></button>';
})
->html(),
];
}
public function filters(): array
{
return [
DateFilter::make('Date From', 'date_from')
->filter(function (Builder $builder, string $value) {
$builder->whereHas('linksOrders', function ($query) use ($value) {
$query->where('orders.created_at', '>=', $value);
});
}),
DateFilter::make('Date To', 'date_to')
->filter(function (Builder $builder, string $value) {
$builder->whereHas('linksOrders', function ($query) use ($value) {
$query->where('orders.created_at', '<=', $value);
});
}),
TextFilter::make('Project Name', 'project_name')
->config([
'placeholder' => 'Search Project Name',
'maxlength' => '50',
])
->filter(function (Builder $builder, string $value) {
$builder->where('project_name', 'like', '%' . $value . '%');
}),
];
}
} |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 30 replies
-
|
Hello @lrljoe , i would love to get your input here ! thanks |
Beta Was this translation helpful? Give feedback.
-
|
You'll need to use the when () function within your with() call in your builder. At the moment you're effectively saying Instead of |
Beta Was this translation helpful? Give feedback.
-
|
sadly i cant right now im not home right now , but i will tag you here once i push, but all i rmmber there was dome merge conflicts and i just accepted all upcomming changes on the conflicts , i will tag you once home, thanks once again for the help |
Beta Was this translation helpful? Give feedback.
-
|
No worries |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Stick this on the end of your builder() return, it should force it to figure itself out again. ->whereHas('orders') |
Beta Was this translation helpful? Give feedback.
-
|
Yeap it works now! thanks alot i'll try to reproduce it in my production app |
Beta Was this translation helpful? Give feedback.
-
|
NOT RELATED TO THIS ISSUE : Desktop.2023.03.25.-.02.05.57.05.mp4as you can see in the video above, i have purchased before as yes or no, if yes i show green check with the project names it was linked to before here the code : Column::make("Purchased Before")
->sortable()
->label(
function ($row) {
$stringList = getPurchasedProjectsNames($row->orders->where('customer_id', auth()->id()));
if ($row->orders->where('customer_id', auth()->id())->isEmpty()) {
//red X
return '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>';
} else {
//green check
return '<svg x-tooltip.raw="' . $stringList . '" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
</svg>';
}
}
)
->html(),
// here is my configure
public function configure(): void
{
$this->setPrimaryKey('id')
->setDefaultSort('authority_score', 'desc')
->setPerPage(25)
->setPerPageAccepted([25, 50, 75, 100])
->setSingleSortingDisabled()
->setOfflineIndicatorEnabled()
->setQueryStringDisabled()
->setFilterLayoutSlideDown()
->setAdditionalSelects(['links.id as id'])
->setTrAttributes(function ($row, $index) {
return [
'class' => 'hover:bg-gray-100',
];
});
$this->arrayOfCountries = Link::select('country')->distinct()->pluck('country')->toArray();
$this->arrayOfProjects = Project::forAuthCustomer()->select('project_name')->distinct()->pluck('project_name')->toArray();
}
//my builder
public function builder(): Builder
{
return Link::query()
->with(['orders', 'orders.projects'])
->shownToCustomer()
->when(!empty($this->latest), fn ($query) => $query->where('created_at', '>=', Carbon::now()->subDays(7)))
->groupBy('site');
}this is my production app not the demo @lrljoe |
Beta Was this translation helpful? Give feedback.
-
|
and btw i also noticed the same issue while using a view() on the add to cart button, it stopped happening when i switched the view to label |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, the content for x-tooltip is appended to document.body by default, and it maps the element against that content, because its appended to document.body, it persists outside of the Data Table Component. I'm assuming that's working now? Otherwise the below should work if ($row->orders->where('customer_id', auth()->id())->isEmpty()) {
//red X
return '<svg x-data x-tooltip.raw="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>';
} else {
//green check
return '<svg x-data x-tooltip.raw="' . $stringList . '" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
</svg>';
} |
Beta Was this translation helpful? Give feedback.
-
|
yes i used your exact solution wit x-tooltip="", thanks man for the help |
Beta Was this translation helpful? Give feedback.
-
|
Or wrap it up properly like below and it'll function as you'd expect, as it'll append to the div rather than the document.body. You'll need to swap in your code below, but it shows you the usage, just make sure to have a parent element with x-data set. <div x-data>
<span
x-tooltip='{
content: () => "YOUR TOOLTIP CONTENT HERE",
allowHTML: true,
appendTo: \$root
}'
>
NORMAL DISPLAY TEXT
</span>
</div> |
Beta Was this translation helpful? Give feedback.
-
|
If its all sorted, make sure to mark it as answered btw :) |
Beta Was this translation helpful? Give feedback.
You'll need to use the when () function within your with() call in your builder.
At the moment you're effectively saying
Get me projects
With all of their orders
Where the project has an order before/after x date
Instead of
Get me projects
With their orders where the order date is before/after x date.