feat: add product name filtering and retrieval in product management

This commit is contained in:
Yoga Pangestu 2026-08-06 13:50:16 +07:00
parent f008e46f54
commit fe0c565196
3 changed files with 23 additions and 11 deletions

View File

@ -24,10 +24,11 @@ public function index(PaginatedRequest $request): Response
return Inertia::render('admin/master/product/index', [ return Inertia::render('admin/master/product/index', [
'products' => $this->service->paginated( 'products' => $this->service->paginated(
...$request->validatedWithDefaults(), ...$request->validatedWithDefaults(),
filters: $request->only(['status', 'stock', 'category']), filters: $request->only(['status', 'stock', 'category', 'name']),
), ),
'categories' => $this->categoryService->getAll(), 'categories' => $this->categoryService->getAll(),
'filters' => $request->only(['status', 'stock', 'category']), 'productNames' => $this->service->getNames(),
'filters' => $request->only(['status', 'stock', 'category', 'name']),
]); ]);
} }

View File

@ -19,6 +19,16 @@ public function __construct(
private StockMutationService $stockMutationService, private StockMutationService $stockMutationService,
) {} ) {}
public function getNames(): array
{
return Product::where('status', '!=', 'deleted')
->orderBy('name')
->pluck('name')
->unique()
->values()
->toArray();
}
public function getAll(array $filters = []): Collection public function getAll(array $filters = []): Collection
{ {
$products = Product::select(['id', 'name', 'slug', 'description', 'status']) $products = Product::select(['id', 'name', 'slug', 'description', 'status'])
@ -53,6 +63,7 @@ public function paginated(int $perPage = 25, string $search = '', string $sort =
'productVariants.productPrices:id,variant_id,type,price', 'productVariants.productPrices:id,variant_id,type,price',
]) ])
->when($search, fn ($q) => $q->where('name', 'like', "%{$search}%")) ->when($search, fn ($q) => $q->where('name', 'like', "%{$search}%"))
->when($filters['name'] ?? null, fn ($q, $name) => $q->where('name', 'like', "%{$name}%"))
->when($filters['status'] ?? null, fn ($q, $status) => $q->where('status', $status)) ->when($filters['status'] ?? null, fn ($q, $status) => $q->where('status', $status))
->when($filters['category'] ?? null, fn ($q, $categoryId) => $q->whereHas('categories', function ($cq) use ($categoryId) { ->when($filters['category'] ?? null, fn ($q, $categoryId) => $q->whereHas('categories', function ($cq) use ($categoryId) {
$cq->where('categories.id', $categoryId); $cq->where('categories.id', $categoryId);

View File

@ -1,4 +1,4 @@
import { router } from '@inertiajs/react'; import { Link, router } from '@inertiajs/react';
import { CardTable } from '@/components/card-table'; import { CardTable } from '@/components/card-table';
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog'; import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
import { FilterPopover } from '@/components/filter-popover'; import { FilterPopover } from '@/components/filter-popover';
@ -34,7 +34,7 @@ import {
edit as variantEdit, edit as variantEdit,
} from '@/routes/admin/master/products/variants'; } from '@/routes/admin/master/products/variants';
import { Head } from '@inertiajs/react'; import { Head } from '@inertiajs/react';
import { Link, Plus } from 'lucide-react'; import { Plus } from 'lucide-react';
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import type { Product, ProductVariant } from './columns'; import type { Product, ProductVariant } from './columns';
import { ProductCardRow } from './product-card'; import { ProductCardRow } from './product-card';
@ -52,6 +52,7 @@ type Props = {
id: number; id: number;
name: string; name: string;
}[]; }[];
productNames: string[];
filters: { filters: {
status?: string; status?: string;
name?: string; name?: string;
@ -60,7 +61,7 @@ type Props = {
}; };
}; };
export default function ProductIndex({ products, categories, filters }: Props) { export default function ProductIndex({ products, categories, productNames, filters }: Props) {
const { can } = useCan(); const { can } = useCan();
const [deleting, setDeleting] = useState<Product | null>(null); const [deleting, setDeleting] = useState<Product | null>(null);
const [deletingVariant, setDeletingVariant] = useState<{ const [deletingVariant, setDeletingVariant] = useState<{
@ -92,11 +93,10 @@ export default function ProductIndex({ products, categories, filters }: Props) {
filterWithParams: false, filterWithParams: false,
}); });
const productNames = useMemo(() => { const sortedProductNames = useMemo(
const names = products.data.map((p) => p.name); () => [...productNames].sort(),
[productNames],
return [...new Set(names)].sort(); );
}, [products.data]);
const selectedCategory = useMemo( const selectedCategory = useMemo(
() => categories.find((c) => String(c.id) === filters.category) ?? null, () => categories.find((c) => String(c.id) === filters.category) ?? null,
@ -147,7 +147,7 @@ export default function ProductIndex({ products, categories, filters }: Props) {
Nama Produk Nama Produk
</label> </label>
<Combobox <Combobox
items={productNames} items={sortedProductNames}
value={filters.name ?? ''} value={filters.name ?? ''}
onValueChange={(value) => onValueChange={(value) =>
applyFilter('name', (value as string) ?? '') applyFilter('name', (value as string) ?? '')