refactor: streamline product management by removing unused components, enhancing form structure, and integrating category service for improved data handling
This commit is contained in:
Yoga Pangestu
parent
8ea6f3cca1
commit
ab03d5f0b9
@ -2,16 +2,14 @@
|
||||
|
||||
namespace App\Http\Controllers\Admin\Master;
|
||||
|
||||
use App\Enums\Permission;
|
||||
use App\Enums\ProductStatus;
|
||||
use App\Http\Controllers\Concerns\FlashesEntityMessage;
|
||||
use App\Http\Controllers\Concerns\ParsesDataTableQuery;
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Http\Requests\Admin\Master\ProductRequest;
|
||||
use App\Http\Requests\Admin\Master\RejectProductRequest;
|
||||
use App\Http\Requests\Admin\ToggleStatusRequest;
|
||||
use App\Models\Product;
|
||||
use App\Models\ProductVariant;
|
||||
use App\Services\Manage\CuttingService;
|
||||
use App\Services\Master\CategoryService;
|
||||
use App\Services\Master\ProductService;
|
||||
use App\Support\Media\MediaPresenter;
|
||||
use Illuminate\Http\RedirectResponse;
|
||||
@ -24,8 +22,8 @@ class ProductController extends Controller
|
||||
use FlashesEntityMessage, ParsesDataTableQuery;
|
||||
|
||||
public function __construct(
|
||||
private readonly CuttingService $cuttingService,
|
||||
private readonly ProductService $productService,
|
||||
private readonly CategoryService $categoryService,
|
||||
) {}
|
||||
|
||||
public function index(Request $request): Response
|
||||
@ -33,18 +31,15 @@ public function index(Request $request): Response
|
||||
$tableQuery = $this->parseDataTableQuery($request);
|
||||
$isActive = $request->string('is_active')->toString();
|
||||
$categoryId = $request->string('category_id')->toString();
|
||||
$status = $request->string('status')->toString();
|
||||
$stockStatus = $request->string('stock_status')->toString();
|
||||
|
||||
return Inertia::render('admin/master/products/Index', [
|
||||
'products' => $this->productService->paginateForIndex($tableQuery, $isActive, $categoryId, $status),
|
||||
'completedCuttings' => $this->cuttingService->getCompletedCuttings($request->user()),
|
||||
'outOfStockGroups' => $this->productService->outOfStockGroups(),
|
||||
'stockWarningGroups' => $this->productService->stockWarningGroups(),
|
||||
'categories' => $this->productService->categoryOptions(),
|
||||
'products' => $this->productService->paginateForIndex($tableQuery, $isActive, $categoryId, $stockStatus),
|
||||
'categories' => $this->categoryService->getSelectOptions(),
|
||||
'filters' => $this->dataTableFilters($tableQuery, [
|
||||
'is_active' => $isActive,
|
||||
'category_id' => $categoryId,
|
||||
'status' => $status,
|
||||
'stock_status' => $stockStatus,
|
||||
]),
|
||||
]);
|
||||
}
|
||||
@ -52,23 +47,15 @@ public function index(Request $request): Response
|
||||
public function create(): Response
|
||||
{
|
||||
return Inertia::render('admin/master/products/Create', [
|
||||
'categories' => $this->productService->categoryOptions(),
|
||||
'categories' => $this->categoryService->getSelectOptions(),
|
||||
]);
|
||||
}
|
||||
|
||||
public function store(ProductRequest $request): RedirectResponse
|
||||
{
|
||||
$this->productService->create($request->validated(), $request->user());
|
||||
$this->productService->create($request->validated());
|
||||
|
||||
$message = $request->user()?->can(Permission::PRODUCTS_VERIFY->value)
|
||||
? null
|
||||
: 'Pengajuan produk berhasil dikirim dan menunggu persetujuan owner.';
|
||||
|
||||
if ($message) {
|
||||
$this->flashSuccess($message);
|
||||
} else {
|
||||
$this->flashCreated('Produk');
|
||||
}
|
||||
$this->flashCreated('Produk');
|
||||
|
||||
return redirect()->route('admin.master.products.index');
|
||||
}
|
||||
@ -87,35 +74,23 @@ public function edit(Product $product): Response
|
||||
});
|
||||
|
||||
return Inertia::render('admin/master/products/Edit', [
|
||||
'categories' => $this->productService->categoryOptions(),
|
||||
'categories' => $this->categoryService->getSelectOptions(),
|
||||
'product' => $product,
|
||||
]);
|
||||
}
|
||||
|
||||
public function update(ProductRequest $request, Product $product): RedirectResponse
|
||||
{
|
||||
$this->productService->update($product, $request->validated(), $request->user());
|
||||
$this->productService->update($product, $request->validated());
|
||||
|
||||
$message = $request->user()?->can(Permission::PRODUCTS_VERIFY->value)
|
||||
? null
|
||||
: 'Pengajuan perubahan produk berhasil dikirim dan menunggu persetujuan owner.';
|
||||
|
||||
if ($message) {
|
||||
$this->flashSuccess($message);
|
||||
} else {
|
||||
$this->flashUpdated('Produk');
|
||||
}
|
||||
$this->flashUpdated('Produk');
|
||||
|
||||
return redirect()->route('admin.master.products.index');
|
||||
}
|
||||
|
||||
public function toggleStatus(Request $request, Product $product): RedirectResponse
|
||||
public function toggleStatus(ToggleStatusRequest $request, Product $product): RedirectResponse
|
||||
{
|
||||
$validated = $request->validate([
|
||||
'is_active' => ['required', 'boolean'],
|
||||
]);
|
||||
|
||||
$this->productService->toggleStatus($product, $validated['is_active'], $request->user());
|
||||
$this->productService->toggleStatus($product, $request->validated());
|
||||
|
||||
$this->flashStatusUpdated('produk');
|
||||
|
||||
@ -124,56 +99,9 @@ public function toggleStatus(Request $request, Product $product): RedirectRespon
|
||||
|
||||
public function destroy(Product $product): RedirectResponse
|
||||
{
|
||||
$user = auth()->user();
|
||||
$this->productService->delete($product);
|
||||
|
||||
if ($user?->can(Permission::PRODUCTS_VERIFY->value)) {
|
||||
$this->productService->delete($product, $user);
|
||||
$this->flashDeleted('Produk');
|
||||
|
||||
return redirect()->route('admin.master.products.index');
|
||||
}
|
||||
|
||||
$wasDeleteRequest = $product->status === ProductStatus::APPROVED;
|
||||
|
||||
$this->productService->delete($product, $user);
|
||||
|
||||
if ($wasDeleteRequest) {
|
||||
$this->flashSuccess('Pengajuan penghapusan produk berhasil dikirim dan menunggu persetujuan owner.');
|
||||
} else {
|
||||
$this->flashDeleted('Produk');
|
||||
}
|
||||
|
||||
return redirect()->route('admin.master.products.index');
|
||||
}
|
||||
|
||||
public function approve(Product $product): RedirectResponse
|
||||
{
|
||||
$user = auth()->user();
|
||||
if ($user && ! $user->hasAnyRole(['owner', 'developer'])) {
|
||||
abort(403);
|
||||
}
|
||||
|
||||
$this->productService->approve($product, $user);
|
||||
|
||||
$this->flashSuccess('Produk berhasil disetujui.');
|
||||
|
||||
return redirect()->route('admin.master.products.index');
|
||||
}
|
||||
|
||||
public function reject(RejectProductRequest $request, Product $product): RedirectResponse
|
||||
{
|
||||
$user = auth()->user();
|
||||
if ($user && ! $user->hasAnyRole(['owner', 'developer'])) {
|
||||
abort(403);
|
||||
}
|
||||
|
||||
$this->productService->reject(
|
||||
$product,
|
||||
$request->validated('reason'),
|
||||
$user,
|
||||
);
|
||||
|
||||
$this->flashSuccess('Produk berhasil ditolak.');
|
||||
$this->flashDeleted('Produk');
|
||||
|
||||
return redirect()->route('admin.master.products.index');
|
||||
}
|
||||
|
||||
@ -59,4 +59,19 @@ private function applySorting(Builder $query, string $sort, string $direction):
|
||||
|
||||
$query->latest();
|
||||
}
|
||||
|
||||
/**
|
||||
* @return list<array{value: int, label: string}>
|
||||
*/
|
||||
public function getSelectOptions(): array
|
||||
{
|
||||
return Category::query()
|
||||
->orderBy('name')
|
||||
->get(['id', 'name'])
|
||||
->map(fn (Category $category) => [
|
||||
'value' => $category->id,
|
||||
'label' => $category->name,
|
||||
])
|
||||
->all();
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,22 +2,13 @@
|
||||
|
||||
namespace App\Services\Master;
|
||||
|
||||
use App\Enums\Permission;
|
||||
use App\Enums\ProductPendingAction;
|
||||
use App\Enums\ProductStatus;
|
||||
use App\Models\Category;
|
||||
use App\Models\Product;
|
||||
use App\Models\ProductVariant;
|
||||
use App\Models\User;
|
||||
use App\Services\Manage\CuttingResultPriceResolver;
|
||||
use App\Services\Media\MediaService;
|
||||
use App\Services\System\PushNotificationService;
|
||||
use App\Support\Media\MediaPresenter;
|
||||
use Carbon\Carbon;
|
||||
use Illuminate\Contracts\Pagination\LengthAwarePaginator;
|
||||
use Illuminate\Database\Eloquent\Builder;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Illuminate\Validation\ValidationException;
|
||||
|
||||
class ProductService
|
||||
{
|
||||
@ -25,138 +16,40 @@ class ProductService
|
||||
|
||||
public function __construct(
|
||||
private readonly MediaService $mediaService,
|
||||
private readonly CuttingResultPriceResolver $cuttingResultPriceResolver,
|
||||
private readonly PushNotificationService $pushNotificationService,
|
||||
) {}
|
||||
|
||||
/**
|
||||
* @return list<array{
|
||||
* id: int,
|
||||
* name: string,
|
||||
* edit_url: string,
|
||||
* variants: list<array{
|
||||
* id: int,
|
||||
* name: string,
|
||||
* stock_formatted: string,
|
||||
* images: list<array<string, mixed>>,
|
||||
* }>,
|
||||
* }>
|
||||
*/
|
||||
public function outOfStockGroups(): array
|
||||
{
|
||||
return $this->inventoryAlertGroups(
|
||||
fn (ProductVariant $variant): bool => $variant->stock <= 0,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @return list<array{
|
||||
* id: int,
|
||||
* name: string,
|
||||
* edit_url: string,
|
||||
* variants: list<array{
|
||||
* id: int,
|
||||
* name: string,
|
||||
* stock_formatted: string,
|
||||
* images: list<array<string, mixed>>,
|
||||
* }>,
|
||||
* }>
|
||||
*/
|
||||
public function stockWarningGroups(): array
|
||||
{
|
||||
return $this->inventoryAlertGroups(function (ProductVariant $variant): bool {
|
||||
if ($variant->stock <= 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return $variant->stock < ProductVariant::minStock();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @return list<array{
|
||||
* id: int,
|
||||
* name: string,
|
||||
* edit_url: string,
|
||||
* variants: list<array{
|
||||
* id: int,
|
||||
* name: string,
|
||||
* stock_formatted: string,
|
||||
* images: list<array<string, mixed>>,
|
||||
* }>,
|
||||
* }>
|
||||
*/
|
||||
private function inventoryAlertGroups(callable $filter): array
|
||||
{
|
||||
return ProductVariant::query()
|
||||
->with(['product', 'media'])
|
||||
->whereHas('product', fn (Builder $query) => $query
|
||||
->where('is_active', true)
|
||||
->where('status', ProductStatus::APPROVED))
|
||||
->get()
|
||||
->filter($filter)
|
||||
->sortBy([
|
||||
fn (ProductVariant $variant) => $variant->product->name,
|
||||
fn (ProductVariant $variant) => $variant->name,
|
||||
])
|
||||
->groupBy('product_id')
|
||||
->map(function ($variants, $productId) {
|
||||
$product = $variants->first()->product;
|
||||
|
||||
return [
|
||||
'id' => (int) $productId,
|
||||
'name' => $product->name,
|
||||
'edit_url' => route('admin.master.products.edit', $productId),
|
||||
'variants' => $variants->map(function (ProductVariant $variant): array {
|
||||
return [
|
||||
'id' => $variant->id,
|
||||
'name' => $variant->name,
|
||||
'stock_formatted' => number_format($variant->stock, 0, ',', '.').' pcs',
|
||||
'images' => MediaPresenter::collection($variant, 'images'),
|
||||
];
|
||||
})->values()->all(),
|
||||
];
|
||||
})
|
||||
->values()
|
||||
->all();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array{search: string, sort: string, direction: 'asc'|'desc'} $tableQuery
|
||||
*/
|
||||
public function paginateForIndex(array $tableQuery, string $isActive, string $categoryId = '', string $status = ''): LengthAwarePaginator
|
||||
public function paginateForIndex(array $tableQuery, string $isActive, string $categoryId = '', string $stockStatus = ''): LengthAwarePaginator
|
||||
{
|
||||
$query = Product::query()
|
||||
->with([
|
||||
'categories',
|
||||
'rejection',
|
||||
'variants' => fn ($query) => $query
|
||||
->with('media')
|
||||
->orderBy('created_at'),
|
||||
])
|
||||
->when($tableQuery['search'] !== '', function (Builder $query) use ($tableQuery): void {
|
||||
$search = $tableQuery['search'];
|
||||
$query->where(function (Builder $query) use ($search) {
|
||||
$query->where(function (Builder $query) use ($search): void {
|
||||
$query->where('name', 'like', "%{$search}%")
|
||||
->orWhere('slug', 'like', "%{$search}%")
|
||||
->orWhere('description', 'like', "%{$search}%")
|
||||
->orWhereHas('categories', fn (Builder $query) => $query->where('name', 'like', "%{$search}%"))
|
||||
->orWhereHas('variants', fn (Builder $query) => $query->where('name', 'like', "%{$search}%"))
|
||||
->orWhereHas('rejection', fn (Builder $query) => $query->where('reason', 'like', "%{$search}%"));
|
||||
->orWhereHas('variants', fn (Builder $query) => $query->where('name', 'like', "%{$search}%"));
|
||||
});
|
||||
})
|
||||
->when(
|
||||
$isActive !== '',
|
||||
fn (Builder $query) => $query->where('is_active', $isActive === '1')
|
||||
)
|
||||
->when(
|
||||
$status !== '',
|
||||
fn (Builder $query) => $query->where('status', $status)
|
||||
)
|
||||
->when(
|
||||
$categoryId !== '',
|
||||
fn (Builder $query) => $query->whereHas('categories', fn (Builder $query) => $query->where('categories.id', $categoryId))
|
||||
);
|
||||
->when($isActive !== '', fn (Builder $query) => $query->where('is_active', $isActive === '1'))
|
||||
->when($categoryId !== '', function (Builder $query) use ($categoryId): void {
|
||||
$query->whereHas('categories', fn (Builder $query) => $query->where('categories.id', $categoryId));
|
||||
})
|
||||
->when($stockStatus === 'out_of_stock', function (Builder $query): void {
|
||||
$query->whereHas('variants', fn (Builder $q) => $q->where('stock', '<=', 0));
|
||||
})
|
||||
->when($stockStatus === 'low_stock', function (Builder $query): void {
|
||||
$query->whereHas('variants', fn (Builder $q) => $q->where('stock', '>', 0)->where('stock', '<', ProductVariant::minStock()));
|
||||
});
|
||||
|
||||
$this->applySorting($query, $tableQuery['sort'], $tableQuery['direction']);
|
||||
|
||||
@ -169,48 +62,22 @@ public function paginateForIndex(array $tableQuery, string $isActive, string $ca
|
||||
'images',
|
||||
MediaPresenter::collection($variant, 'images'),
|
||||
);
|
||||
$variant->setAttribute(
|
||||
'prices',
|
||||
$this->presentVariantPrices($variant->id),
|
||||
);
|
||||
});
|
||||
|
||||
return $product;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @return list<array{value: int, label: string}>
|
||||
*/
|
||||
public function categoryOptions(): array
|
||||
{
|
||||
return Category::query()
|
||||
->orderBy('name')
|
||||
->get(['id', 'name'])
|
||||
->map(fn (Category $category) => [
|
||||
'value' => $category->id,
|
||||
'label' => $category->name,
|
||||
])
|
||||
->all();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array<string, mixed> $validated
|
||||
*/
|
||||
public function create(array $validated, User $user): void
|
||||
public function create(array $validated): void
|
||||
{
|
||||
DB::transaction(function () use ($validated, $user): void {
|
||||
$autoApprove = $this->userCanAutoApprove($user);
|
||||
|
||||
DB::transaction(function () use ($validated): void {
|
||||
$product = Product::create([
|
||||
'name' => $validated['name'],
|
||||
'description' => $validated['description'] ?? null,
|
||||
'is_active' => $autoApprove,
|
||||
'status' => $autoApprove ? ProductStatus::APPROVED : ProductStatus::PENDING,
|
||||
'was_ever_approved' => $autoApprove,
|
||||
'submitted_by_id' => $autoApprove ? null : $user->id,
|
||||
'verified_at' => $autoApprove ? Carbon::now() : null,
|
||||
'verified_by_id' => $autoApprove ? $user->id : null,
|
||||
'is_active' => true,
|
||||
]);
|
||||
|
||||
$product->categories()->sync($validated['category_ids']);
|
||||
@ -218,43 +85,17 @@ public function create(array $validated, User $user): void
|
||||
foreach ($validated['variants'] as $index => $variantData) {
|
||||
$this->createVariant($product, $variantData, $index);
|
||||
}
|
||||
|
||||
if (! $autoApprove) {
|
||||
$this->notifyOwnersOfPendingProduct($product, 'baru');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array<string, mixed> $validated
|
||||
*/
|
||||
public function update(Product $product, array $validated, User $user): void
|
||||
public function update(Product $product, array $validated): void
|
||||
{
|
||||
$this->ensureEditable($product, 'Produk hanya dapat diubah saat status menunggu atau ditolak.');
|
||||
|
||||
DB::transaction(function () use ($validated, $product, $user): void {
|
||||
$autoApprove = $this->userCanAutoApprove($user);
|
||||
|
||||
DB::transaction(function () use ($validated, $product): void {
|
||||
$product->name = $validated['name'];
|
||||
$product->description = $validated['description'] ?? null;
|
||||
|
||||
if ($autoApprove) {
|
||||
$product->status = ProductStatus::APPROVED;
|
||||
$product->pending_action = null;
|
||||
$product->was_ever_approved = true;
|
||||
$product->verified_at = Carbon::now();
|
||||
$product->verified_by_id = $user->id;
|
||||
$product->submitted_by_id = null;
|
||||
} else {
|
||||
$product->status = ProductStatus::PENDING;
|
||||
$product->pending_action = null;
|
||||
$product->verified_at = null;
|
||||
$product->verified_by_id = null;
|
||||
$product->submitted_by_id = $user->id;
|
||||
$product->is_active = false;
|
||||
$product->rejection()?->delete();
|
||||
}
|
||||
|
||||
$product->save();
|
||||
|
||||
$product->categories()->sync($validated['category_ids']);
|
||||
@ -286,185 +127,16 @@ public function update(Product $product, array $validated, User $user): void
|
||||
|
||||
$this->createVariant($product, $variantData, $index);
|
||||
}
|
||||
|
||||
if (! $autoApprove) {
|
||||
$this->notifyOwnersOfPendingProduct($product, 'diperbarui');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public function toggleStatus(Product $product, bool $isActive, User $user): void
|
||||
public function toggleStatus(Product $product, array $validated): void
|
||||
{
|
||||
if (! $this->userCanAutoApprove($user)) {
|
||||
throw ValidationException::withMessages([
|
||||
'is_active' => 'Perubahan status produk memerlukan persetujuan owner.',
|
||||
]);
|
||||
}
|
||||
|
||||
$this->ensureApproved($product, 'Status produk hanya dapat diubah setelah disetujui.');
|
||||
|
||||
$product->is_active = $isActive;
|
||||
$product->is_active = $validated['is_active'];
|
||||
$product->save();
|
||||
}
|
||||
|
||||
public function delete(Product $product, User $user): void
|
||||
{
|
||||
if ($this->userCanAutoApprove($user)) {
|
||||
$this->performDelete($product);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if ($product->status === ProductStatus::PENDING && $product->pending_action === null) {
|
||||
$this->performDelete($product);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if ($product->status === ProductStatus::REJECTED && $product->pending_action === null) {
|
||||
$this->performDelete($product);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$this->ensureApproved($product, 'Pengajuan penghapusan hanya dapat dilakukan untuk produk yang sudah disetujui.');
|
||||
|
||||
DB::transaction(function () use ($product, $user): void {
|
||||
$product->status = ProductStatus::PENDING;
|
||||
$product->pending_action = ProductPendingAction::DELETE;
|
||||
$product->is_active = false;
|
||||
$product->submitted_by_id = $user->id;
|
||||
$product->verified_at = null;
|
||||
$product->verified_by_id = null;
|
||||
$product->rejection()?->delete();
|
||||
$product->save();
|
||||
|
||||
$this->notifyOwnersOfPendingProduct($product, 'dihapus');
|
||||
});
|
||||
}
|
||||
|
||||
public function approve(Product $product, User $user): void
|
||||
{
|
||||
$this->ensurePending($product, 'Produk ini sudah diverifikasi.');
|
||||
|
||||
if ($product->pending_action === ProductPendingAction::DELETE) {
|
||||
$submittedById = $product->submitted_by_id;
|
||||
$productName = $product->name;
|
||||
|
||||
DB::transaction(function () use ($product): void {
|
||||
$this->performDelete($product);
|
||||
});
|
||||
|
||||
if ($submittedById) {
|
||||
$this->pushNotificationService->sendToUser(
|
||||
'✅ Penghapusan Produk Disetujui',
|
||||
"Pengajuan penghapusan produk {$productName} telah disetujui.",
|
||||
$submittedById,
|
||||
'/admin/master/products',
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
DB::transaction(function () use ($product, $user): void {
|
||||
$product->status = ProductStatus::APPROVED;
|
||||
$product->pending_action = null;
|
||||
$product->is_active = true;
|
||||
$product->was_ever_approved = true;
|
||||
$product->verified_at = Carbon::now();
|
||||
$product->verified_by_id = $user->id;
|
||||
$product->save();
|
||||
|
||||
$product->rejection()?->delete();
|
||||
});
|
||||
|
||||
$product->loadMissing('submittedBy');
|
||||
if ($product->submitted_by_id) {
|
||||
$this->pushNotificationService->sendToUser(
|
||||
'✅ Produk Disetujui',
|
||||
"Produk {$product->name} telah disetujui dan aktif.",
|
||||
$product->submitted_by_id,
|
||||
'/admin/master/products',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
public function reject(Product $product, string $reason, User $user): void
|
||||
{
|
||||
$this->ensurePending($product, 'Produk ini sudah diverifikasi.');
|
||||
|
||||
if ($product->pending_action === ProductPendingAction::DELETE) {
|
||||
DB::transaction(function () use ($product, $user, $reason): void {
|
||||
$product->status = ProductStatus::APPROVED;
|
||||
$product->pending_action = null;
|
||||
$product->is_active = true;
|
||||
$product->verified_at = Carbon::now();
|
||||
$product->verified_by_id = $user->id;
|
||||
$product->save();
|
||||
|
||||
$product->rejection()->create([
|
||||
'reason' => $reason,
|
||||
'rejected_by_id' => $user->id,
|
||||
]);
|
||||
});
|
||||
|
||||
$product->loadMissing('submittedBy');
|
||||
if ($product->submitted_by_id) {
|
||||
$this->pushNotificationService->sendToUser(
|
||||
'❌ Penghapusan Produk Ditolak',
|
||||
"Pengajuan penghapusan produk {$product->name} ditolak dengan alasan: '{$reason}'.",
|
||||
$product->submitted_by_id,
|
||||
'/admin/master/products',
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
DB::transaction(function () use ($product, $user, $reason): void {
|
||||
$submittedById = $product->submitted_by_id;
|
||||
$productName = $product->name;
|
||||
|
||||
if (! $product->was_ever_approved) {
|
||||
$this->performDelete($product);
|
||||
|
||||
if ($submittedById) {
|
||||
$this->pushNotificationService->sendToUser(
|
||||
'❌ Produk Ditolak',
|
||||
"Pengajuan produk {$productName} ditolak dengan alasan: '{$reason}'.",
|
||||
$submittedById,
|
||||
'/admin/master/products',
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$product->status = ProductStatus::REJECTED;
|
||||
$product->pending_action = null;
|
||||
$product->is_active = false;
|
||||
$product->verified_at = Carbon::now();
|
||||
$product->verified_by_id = $user->id;
|
||||
$product->save();
|
||||
|
||||
$product->rejection()->create([
|
||||
'reason' => $reason,
|
||||
'rejected_by_id' => $user->id,
|
||||
]);
|
||||
|
||||
if ($submittedById) {
|
||||
$this->pushNotificationService->sendToUser(
|
||||
'❌ Produk Ditolak',
|
||||
"Pengajuan produk {$productName} ditolak dengan alasan: '{$reason}'.",
|
||||
$submittedById,
|
||||
'/admin/master/products',
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private function performDelete(Product $product): void
|
||||
public function delete(Product $product): void
|
||||
{
|
||||
DB::transaction(function () use ($product): void {
|
||||
$product->variants()->each(function (ProductVariant $variant): void {
|
||||
@ -472,56 +144,13 @@ private function performDelete(Product $product): void
|
||||
});
|
||||
$product->variants()->delete();
|
||||
$product->categories()->detach();
|
||||
$product->rejection()?->delete();
|
||||
$product->delete();
|
||||
});
|
||||
}
|
||||
|
||||
private function notifyOwnersOfPendingProduct(Product $product, string $actionLabel): void
|
||||
{
|
||||
$this->pushNotificationService->sendToRoles(
|
||||
'📦 Pengajuan Produk Baru',
|
||||
"Produk {$product->name} {$actionLabel} dan menunggu persetujuan owner.",
|
||||
['owner', 'developer'],
|
||||
'/admin/master/products',
|
||||
);
|
||||
}
|
||||
|
||||
private function userCanAutoApprove(User $user): bool
|
||||
{
|
||||
return $user->can(Permission::PRODUCTS_VERIFY->value);
|
||||
}
|
||||
|
||||
private function ensurePending(Product $product, string $message): void
|
||||
{
|
||||
if ($product->status !== ProductStatus::PENDING) {
|
||||
throw ValidationException::withMessages([
|
||||
'product' => $message,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
private function ensureApproved(Product $product, string $message): void
|
||||
{
|
||||
if ($product->status !== ProductStatus::APPROVED) {
|
||||
throw ValidationException::withMessages([
|
||||
'product' => $message,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
private function ensureEditable(Product $product, string $message): void
|
||||
{
|
||||
if (! in_array($product->status, [ProductStatus::PENDING, ProductStatus::REJECTED], true)) {
|
||||
throw ValidationException::withMessages([
|
||||
'product' => $message,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
private function applySorting(Builder $query, string $sort, string $direction): void
|
||||
{
|
||||
if (in_array($sort, ['name', 'slug', 'is_active', 'status'], true)) {
|
||||
if (in_array($sort, ['name', 'slug', 'is_active'], true)) {
|
||||
$query->orderBy($sort, $direction);
|
||||
|
||||
return;
|
||||
@ -560,31 +189,4 @@ private function syncVariantImages(ProductVariant $variant, array $variantData,
|
||||
errorKey: "variants.{$index}.images",
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @return list<array{
|
||||
* type: string,
|
||||
* type_label: string,
|
||||
* price: int,
|
||||
* price_formatted: string,
|
||||
* price_input: string,
|
||||
* cost_per_unit: int,
|
||||
* cost_per_unit_formatted: string,
|
||||
* }>
|
||||
*/
|
||||
private function presentVariantPrices(int $variantId): array
|
||||
{
|
||||
return collect($this->cuttingResultPriceResolver->latestPricesForVariant($variantId))
|
||||
->map(fn ($price) => [
|
||||
'type' => $price->price_type->value,
|
||||
'type_label' => $price->price_type->label(),
|
||||
'price' => (int) $price->price,
|
||||
'price_formatted' => $price->price_formatted,
|
||||
'price_input' => (string) $price->price,
|
||||
'cost_per_unit' => (int) $price->cost_per_unit,
|
||||
'cost_per_unit_formatted' => $price->cost_per_unit_formatted,
|
||||
])
|
||||
->values()
|
||||
->all();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,678 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { router, useForm } from '@inertiajs/vue3';
|
||||
import { Check, ChevronDown, Copy, RotateCcw, Scissors, X } from '@lucide/vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { toast } from 'vue-sonner';
|
||||
import ConfirmDialog from '@/components/ConfirmDialog.vue';
|
||||
import { RupiahInput } from '@/components/form/rupiah-input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from '@/components/ui/collapsible';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Empty,
|
||||
EmptyDescription,
|
||||
EmptyHeader,
|
||||
EmptyTitle,
|
||||
} from '@/components/ui/empty';
|
||||
import {
|
||||
Field,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
FieldSet,
|
||||
} from '@/components/ui/field';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip';
|
||||
import { useCan } from '@/composables/useCan';
|
||||
import { FIELD_LIMITS } from '@/lib/field-limits';
|
||||
import { parseRupiah } from '@/lib/rupiah';
|
||||
import type { CuttingListItem } from '@/types/cutting';
|
||||
import {
|
||||
PRICE_TYPES,
|
||||
PRICE_TYPE_LABELS,
|
||||
} from '@/types/product';
|
||||
|
||||
const props = defineProps<{
|
||||
cuttings: CuttingListItem[];
|
||||
}>();
|
||||
|
||||
const { can } = useCan();
|
||||
const open = ref(false);
|
||||
|
||||
const totalCompleted = computed(() => props.cuttings.length);
|
||||
|
||||
// Status transition
|
||||
const statusConfirmOpen = ref(false);
|
||||
const statusProcessing = ref(false);
|
||||
const pendingAction = ref<CuttingStatusAction | null>(null);
|
||||
const activeCutting = ref<CuttingListItem | null>(null);
|
||||
|
||||
// Reject
|
||||
const rejectDialogOpen = ref(false);
|
||||
const rejectForm = useForm({
|
||||
status: 'rejected',
|
||||
reason: '',
|
||||
});
|
||||
|
||||
// Verify
|
||||
const verifyDialogOpen = ref(false);
|
||||
const allMatches = ref(true);
|
||||
const useSamePrice = ref(true);
|
||||
const sharedPrices = ref<Record<string, string>>(buildEmptyPrices());
|
||||
|
||||
function buildEmptyPrices(): Record<string, string> {
|
||||
return Object.fromEntries(PRICE_TYPES.map((type) => [type, '']));
|
||||
}
|
||||
|
||||
const verifyForm = useForm({
|
||||
status: 'verified',
|
||||
verification_note: '',
|
||||
results: [] as Array<{
|
||||
product_variant_id: number;
|
||||
name: string;
|
||||
cutting_result: number;
|
||||
warehouse_stock: number;
|
||||
cutting_reject: number;
|
||||
original_warehouse_stock: number;
|
||||
original_cutting_reject: number;
|
||||
prices: Record<string, string>;
|
||||
}>,
|
||||
result_prices: [] as Array<{
|
||||
product_variant_id: number;
|
||||
prices: Array<{ type: string; price: number }>;
|
||||
}>,
|
||||
});
|
||||
|
||||
watch(verifyDialogOpen, (isOpen) => {
|
||||
if (isOpen && activeCutting.value) {
|
||||
allMatches.value = true;
|
||||
useSamePrice.value = true;
|
||||
sharedPrices.value = buildEmptyPrices();
|
||||
verifyForm.verification_note = '';
|
||||
verifyForm.results = activeCutting.value.results.map(res => ({
|
||||
product_variant_id: res.product_variant?.id || 0,
|
||||
name: `${res.product_variant?.product?.name || ''} (${res.product_variant?.name || ''})`,
|
||||
cutting_result: res.cutting_result,
|
||||
warehouse_stock: res.warehouse_stock,
|
||||
cutting_reject: res.cutting_reject,
|
||||
original_warehouse_stock: res.warehouse_stock,
|
||||
original_cutting_reject: res.cutting_reject,
|
||||
prices: buildEmptyPrices(),
|
||||
}));
|
||||
verifyForm.result_prices = [];
|
||||
verifyForm.clearErrors();
|
||||
}
|
||||
});
|
||||
|
||||
watch(allMatches, (matches) => {
|
||||
if (!matches) {
|
||||
return;
|
||||
}
|
||||
|
||||
verifyForm.results = verifyForm.results.map((result) => ({
|
||||
...result,
|
||||
warehouse_stock: result.original_warehouse_stock,
|
||||
cutting_reject: result.original_cutting_reject,
|
||||
}));
|
||||
});
|
||||
|
||||
function setAllMatches(value: boolean) {
|
||||
allMatches.value = value;
|
||||
|
||||
if (value) {
|
||||
verifyForm.results = verifyForm.results.map((result) => ({
|
||||
...result,
|
||||
warehouse_stock: result.original_warehouse_stock,
|
||||
cutting_reject: result.original_cutting_reject,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
function setSharedPrice(type: string, value: string) {
|
||||
sharedPrices.value = { ...sharedPrices.value, [type]: value };
|
||||
|
||||
if (useSamePrice.value) {
|
||||
verifyForm.results = verifyForm.results.map((result) => ({
|
||||
...result,
|
||||
prices: { ...result.prices, [type]: value },
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
function toggleUseSamePrice(checked: boolean) {
|
||||
useSamePrice.value = checked;
|
||||
|
||||
if (checked) {
|
||||
// Apply shared prices to all results
|
||||
verifyForm.results = verifyForm.results.map((result) => ({
|
||||
...result,
|
||||
prices: { ...sharedPrices.value },
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
function setResultPrice(resultIndex: number, type: string, value: string) {
|
||||
const result = verifyForm.results[resultIndex];
|
||||
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
|
||||
result.prices = {
|
||||
...result.prices,
|
||||
[type]: value,
|
||||
};
|
||||
}
|
||||
|
||||
function applyPriceToAllVariants(sourceIndex: number) {
|
||||
const source = verifyForm.results[sourceIndex];
|
||||
|
||||
if (!source) {
|
||||
return;
|
||||
}
|
||||
|
||||
verifyForm.results = verifyForm.results.map((result) => ({
|
||||
...result,
|
||||
prices: { ...source.prices },
|
||||
}));
|
||||
}
|
||||
|
||||
function buildResultPricesPayload() {
|
||||
return verifyForm.results.map((result) => ({
|
||||
product_variant_id: result.product_variant_id,
|
||||
prices: PRICE_TYPES.map((type) => ({
|
||||
type,
|
||||
price: Number.parseInt(parseRupiah(result.prices[type] ?? ''), 10) || 0,
|
||||
})),
|
||||
}));
|
||||
}
|
||||
|
||||
function openAction(cutting: CuttingListItem, action: CuttingStatusAction) {
|
||||
activeCutting.value = cutting;
|
||||
|
||||
if (action.status === 'verified') {
|
||||
verifyDialogOpen.value = true;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (action.status === 'rejected') {
|
||||
rejectForm.reset();
|
||||
rejectForm.clearErrors();
|
||||
rejectDialogOpen.value = true;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
pendingAction.value = action;
|
||||
statusConfirmOpen.value = true;
|
||||
}
|
||||
|
||||
function statusConfirmDescription(action: CuttingStatusAction): string {
|
||||
if (action.status === 'verified') {
|
||||
return 'Hasil cutting akan diverifikasi. Stok bagus dan reject akan ditambahkan ke produk.';
|
||||
}
|
||||
|
||||
if (action.status === 'in_progress') {
|
||||
return 'Cutting dikembalikan ke proses untuk diperbaiki.';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
function transitionStatus() {
|
||||
if (!pendingAction.value || !activeCutting.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
statusProcessing.value = true;
|
||||
|
||||
router.post(
|
||||
`/admin/manage/cuttings/${activeCutting.value.id}/status`,
|
||||
{
|
||||
status: pendingAction.value.status,
|
||||
},
|
||||
{
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
statusConfirmOpen.value = false;
|
||||
pendingAction.value = null;
|
||||
activeCutting.value = null;
|
||||
},
|
||||
onError: (errors) => {
|
||||
const message = Object.values(errors)[0];
|
||||
|
||||
toast.error(
|
||||
typeof message === 'string'
|
||||
? message
|
||||
: 'Gagal memperbarui status cutting.',
|
||||
);
|
||||
},
|
||||
onFinish: () => {
|
||||
statusProcessing.value = false;
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function submitVerify() {
|
||||
if (!activeCutting.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
verifyForm
|
||||
.transform((data) => ({
|
||||
status: data.status,
|
||||
verification_note: data.verification_note,
|
||||
results: data.results.map(({ product_variant_id, warehouse_stock, cutting_reject }) => ({
|
||||
product_variant_id,
|
||||
warehouse_stock,
|
||||
cutting_reject,
|
||||
})),
|
||||
result_prices: buildResultPricesPayload(),
|
||||
}))
|
||||
.post(`/admin/manage/cuttings/${activeCutting.value.id}/status`, {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
verifyDialogOpen.value = false;
|
||||
activeCutting.value = null;
|
||||
},
|
||||
onError: (errors) => {
|
||||
const message = Object.values(errors)[0];
|
||||
|
||||
toast.error(
|
||||
typeof message === 'string'
|
||||
? message
|
||||
: 'Gagal memverifikasi cutting.',
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function submitReject() {
|
||||
if (!activeCutting.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
rejectForm.post(`/admin/manage/cuttings/${activeCutting.value.id}/status`, {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
rejectDialogOpen.value = false;
|
||||
activeCutting.value = null;
|
||||
},
|
||||
onError: (errors) => {
|
||||
const message = Object.values(errors)[0];
|
||||
|
||||
toast.error(
|
||||
typeof message === 'string'
|
||||
? message
|
||||
: 'Gagal menolak cutting.',
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
watch(rejectDialogOpen, (isOpen) => {
|
||||
if (!isOpen) {
|
||||
rejectForm.reset();
|
||||
rejectForm.clearErrors();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Collapsible v-model:open="open">
|
||||
<Card class="!py-0">
|
||||
<CollapsibleTrigger
|
||||
class="flex w-full items-center justify-between gap-3 px-6 py-4 text-left transition-colors hover:bg-muted/30">
|
||||
<div class="min-w-0 space-y-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<Scissors class="size-4 shrink-0 text-green-600 dark:text-green-400" />
|
||||
<h3 class="font-semibold leading-tight">
|
||||
Verifikasi Cutting
|
||||
</h3>
|
||||
<Badge v-if="totalCompleted > 0" variant="outline"
|
||||
class="border-green-600/30 text-green-600 dark:text-green-400">
|
||||
{{ totalCompleted }}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"
|
||||
:class="open ? 'rotate-180' : ''" />
|
||||
</CollapsibleTrigger>
|
||||
|
||||
<CollapsibleContent>
|
||||
<CardContent class="pt-0 pb-6">
|
||||
<div v-if="cuttings.length" class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card v-for="cutting in cuttings" :key="cutting.id"
|
||||
class="flex flex-col justify-between overflow-hidden border bg-card/50 py-0 gap-0">
|
||||
<div class="border-b bg-muted/20 px-4 py-3 flex items-center justify-between gap-2">
|
||||
<div class="min-w-0">
|
||||
<h4 class="font-medium text-sm truncate">
|
||||
Cutting #{{ cutting.id }}
|
||||
</h4>
|
||||
<span class="text-[10px] text-muted-foreground block truncate">
|
||||
{{ cutting.created_at_formatted }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex shrink-0 flex-wrap items-center justify-end gap-1">
|
||||
<Tooltip v-if="can('cuttings.verify')">
|
||||
<TooltipTrigger as-child>
|
||||
<Button size="sm" variant="ghost"
|
||||
@click="openAction(cutting, { status: 'verified', label: 'Verifikasi', destructive: false, permission: 'cuttings.verify', icon_only: false })">
|
||||
<Check class="size-3.5" />
|
||||
<span class="sr-only">Verifikasi</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Verifikasi</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip v-if="can('cuttings.reject')">
|
||||
<TooltipTrigger as-child>
|
||||
<Button size="sm" variant="ghost"
|
||||
class="text-destructive hover:text-destructive"
|
||||
@click="openAction(cutting, { status: 'rejected', label: 'Tolak', destructive: true, permission: 'cuttings.reject', icon_only: false })">
|
||||
<X class="size-3.5" />
|
||||
<span class="sr-only">Tolak</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Tolak</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip v-if="can('cuttings.reject')">
|
||||
<TooltipTrigger as-child>
|
||||
<Button size="sm" variant="ghost"
|
||||
class="text-destructive hover:text-destructive"
|
||||
@click="openAction(cutting, { status: 'in_progress', label: 'Kembalikan ke Proses', destructive: true, permission: 'cuttings.reject', icon_only: false })">
|
||||
<RotateCcw class="size-3.5" />
|
||||
<span class="sr-only">Kembalikan ke Proses</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Kembalikan ke Proses</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 space-y-3 flex-1 text-xs">
|
||||
<div v-if="cutting.description" class="text-muted-foreground pb-2 border-b">
|
||||
<span class="font-medium text-foreground">Catatan:</span> {{ cutting.description }}
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="font-medium text-foreground">Bahan Baku:</span>
|
||||
<ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
|
||||
<li v-for="mat in cutting.materials" :key="mat.id">
|
||||
{{ mat.raw_material_price?.raw_material?.name }} ({{
|
||||
mat.raw_material_price?.variant }}) - {{ mat.material_usage_formatted }}
|
||||
</li>
|
||||
<li v-if="!cutting.materials.length">Belum ada bahan baku</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="space-y-1">
|
||||
<span class="font-medium text-foreground">Hasil Produk:</span>
|
||||
<ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
|
||||
<li v-for="res in cutting.results" :key="res.id">
|
||||
{{ res.product_variant?.product?.name }} ({{ res.product_variant?.name }}) -
|
||||
{{ res.cutting_result }} pcs
|
||||
</li>
|
||||
<li v-if="!cutting.results.length">Belum ada hasil produk</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="cutting.estimated_cost_per_unit_formatted" class="text-[11px] pt-2 border-t">
|
||||
<span class="text-muted-foreground">Harga modal: </span>
|
||||
<span class="font-semibold tabular-nums">{{
|
||||
cutting.estimated_cost_per_unit_formatted }} / pcs</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-[11px] text-muted-foreground pt-2 border-t flex items-center justify-between">
|
||||
<span>Pembuat:</span>
|
||||
<span class="font-medium text-foreground">
|
||||
{{ cutting.created_by?.profile?.full_name ?? cutting.created_by?.username }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Empty v-else class="py-8">
|
||||
<EmptyHeader>
|
||||
<EmptyTitle>Tidak ada cutting menunggu verifikasi</EmptyTitle>
|
||||
<EmptyDescription>
|
||||
Semua cutting selesai telah diverifikasi atau belum selesai diproses.
|
||||
</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
</Empty>
|
||||
</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Card>
|
||||
</Collapsible>
|
||||
|
||||
<!-- Status Confirm Dialog (Return to Process) -->
|
||||
<ConfirmDialog v-model:open="statusConfirmOpen" :title="pendingAction
|
||||
? `${pendingAction.label} cutting?`
|
||||
: 'Ubah status cutting?'
|
||||
" :description="pendingAction ? statusConfirmDescription(pendingAction) : ''
|
||||
" :confirm-label="pendingAction?.label ?? 'Konfirmasi'" cancel-label="Batal"
|
||||
:destructive="pendingAction?.destructive ?? false" :loading="statusProcessing" @confirm="transitionStatus" />
|
||||
|
||||
<!-- Reject Dialog -->
|
||||
<Dialog v-model:open="rejectDialogOpen">
|
||||
<DialogContent class="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Tolak Cutting</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitReject">
|
||||
<FieldGroup>
|
||||
<FieldSet class="grid gap-4">
|
||||
<Field>
|
||||
<FieldLabel for="cutting-reject-reason" required>Alasan Penolakan</FieldLabel>
|
||||
<Textarea id="cutting-reject-reason" v-model="rejectForm.reason"
|
||||
placeholder="Contoh: Jumlah barang yang diterima tidak sesuai" rows="3" autofocus
|
||||
:maxlength="FIELD_LIMITS.reason" />
|
||||
<FieldError :errors="rejectForm.errors.reason
|
||||
? [rejectForm.errors.reason]
|
||||
: []
|
||||
" />
|
||||
</Field>
|
||||
</FieldSet>
|
||||
</FieldGroup>
|
||||
|
||||
<DialogFooter class="mt-6">
|
||||
<Button type="button" variant="outline" :disabled="rejectForm.processing"
|
||||
@click="rejectDialogOpen = false">
|
||||
Batal
|
||||
</Button>
|
||||
<Button type="submit" variant="destructive" :disabled="rejectForm.processing">
|
||||
{{ rejectForm.processing ? 'Menyimpan...' : 'Tolak' }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- Verify Dialog -->
|
||||
<Dialog v-model:open="verifyDialogOpen">
|
||||
<DialogContent class="sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Verifikasi Hasil Cutting</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submitVerify">
|
||||
<div class="space-y-4 max-h-[60vh] overflow-y-auto scrollbar-thin px-1 py-1">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Verifikasi jumlah produk yang diterima di toko dan tentukan harga jual per varian.
|
||||
</p>
|
||||
|
||||
<div class="flex items-center justify-between rounded-lg border p-3">
|
||||
<Label for="all-matches-verif" class="text-sm font-medium">
|
||||
Semua sesuai dengan data cutting
|
||||
</Label>
|
||||
<Switch id="all-matches-verif" :model-value="allMatches" @update:model-value="setAllMatches" />
|
||||
</div>
|
||||
|
||||
<div v-if="activeCutting?.estimated_cost_per_unit_formatted"
|
||||
class="rounded-lg border bg-muted/40 p-3 text-sm space-y-1">
|
||||
<p class="font-medium">Harga Modal Batch</p>
|
||||
<p class="flex justify-between gap-2 text-muted-foreground">
|
||||
<span>Bahan baku</span>
|
||||
<span>{{ activeCutting.total_material_cost_formatted ?? '-' }}</span>
|
||||
</p>
|
||||
<p class="flex justify-between gap-2 text-muted-foreground">
|
||||
<span>Jasa jahit</span>
|
||||
<span>{{ activeCutting.sewing_cost_formatted ?? '-' }}</span>
|
||||
</p>
|
||||
<p class="flex justify-between gap-2 text-muted-foreground">
|
||||
<span>Biaya lainnya</span>
|
||||
<span>{{ activeCutting.other_cost_formatted ?? '-' }}</span>
|
||||
</p>
|
||||
<p class="flex justify-between gap-2 font-medium">
|
||||
<span>Total</span>
|
||||
<span>{{ activeCutting.total_production_cost_formatted ?? '-' }}</span>
|
||||
</p>
|
||||
<p class="flex justify-between gap-2 text-muted-foreground">
|
||||
<span>Total hasil</span>
|
||||
<span>{{ activeCutting.total_result_pieces ?? 0 }} pcs</span>
|
||||
</p>
|
||||
<p class="font-semibold tabular-nums pt-1 border-t">
|
||||
{{ activeCutting.estimated_cost_per_unit_formatted }} / pcs
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<!-- Shared Price Toggle -->
|
||||
<div v-if="verifyForm.results.length > 1"
|
||||
class="flex items-center justify-between rounded-lg border p-3">
|
||||
<Label for="use-same-price" class="text-sm font-medium">
|
||||
Gunakan harga yang sama untuk semua varian
|
||||
</Label>
|
||||
<Switch id="use-same-price" :model-value="useSamePrice"
|
||||
@update:model-value="toggleUseSamePrice" />
|
||||
</div>
|
||||
|
||||
<!-- Shared Price Inputs -->
|
||||
<div v-if="useSamePrice && verifyForm.results.length > 1"
|
||||
class="rounded-lg border p-3 space-y-3">
|
||||
<p class="text-sm font-medium">Harga Jual</p>
|
||||
<div class="grid gap-2 sm:grid-cols-2">
|
||||
<Field v-for="type in PRICE_TYPES" :key="`shared-${type}`">
|
||||
<FieldLabel class="text-xs" :for="`shared-price-${type}`">
|
||||
{{ PRICE_TYPE_LABELS[type] }}
|
||||
</FieldLabel>
|
||||
<RupiahInput :id="`shared-price-${type}`" :model-value="sharedPrices[type]"
|
||||
@update:model-value="setSharedPrice(type, $event)" />
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Per Variant Section -->
|
||||
<div v-for="(result, index) in verifyForm.results" :key="result.product_variant_id"
|
||||
class="p-3 border rounded-lg space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="font-medium text-sm">
|
||||
{{ result.name }}
|
||||
</div>
|
||||
<Button v-if="!useSamePrice && verifyForm.results.length > 1 && index > 0" type="button"
|
||||
variant="outline" size="sm" @click="applyPriceToAllVariants(index)">
|
||||
<Copy class="size-3.5" />
|
||||
Terapkan ke Semua
|
||||
</Button>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2 items-center text-xs">
|
||||
<div>
|
||||
<span class="text-muted-foreground block">Hasil Potong:</span>
|
||||
<span class="font-semibold">{{ result.cutting_result }} pcs</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted-foreground block mb-0.5">Data cutting:</span>
|
||||
<span class="font-medium tabular-nums">
|
||||
{{ result.original_warehouse_stock }} bagus ·
|
||||
{{ result.original_cutting_reject }} reject
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted-foreground block">Stok Reject:</span>
|
||||
<Badge variant="secondary" class="font-semibold">
|
||||
{{ result.cutting_reject }} pcs
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-2 items-end text-xs">
|
||||
<div>
|
||||
<label :for="`verif-good-${index}`" class="text-muted-foreground block mb-0.5">Stok
|
||||
Bagus (diterima):</label>
|
||||
<Input :id="`verif-good-${index}`" type="number"
|
||||
v-model.number="result.warehouse_stock" min="0" :max="result.cutting_result"
|
||||
class="h-8 w-full px-2 text-xs" :disabled="allMatches"
|
||||
@input="result.cutting_reject = result.cutting_result - result.warehouse_stock" />
|
||||
</div>
|
||||
<div>
|
||||
<label :for="`verif-reject-${index}`"
|
||||
class="text-muted-foreground block mb-0.5">Stok Reject (diterima):</label>
|
||||
<Input :id="`verif-reject-${index}`" type="number"
|
||||
v-model.number="result.cutting_reject" min="0" :max="result.cutting_result"
|
||||
class="h-8 w-full px-2 text-xs" :disabled="allMatches"
|
||||
@input="result.warehouse_stock = result.cutting_result - result.cutting_reject" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!useSamePrice || verifyForm.results.length === 1"
|
||||
class="grid gap-2 sm:grid-cols-2">
|
||||
<Field v-for="type in PRICE_TYPES" :key="`${result.product_variant_id}-${type}`">
|
||||
<FieldLabel class="text-xs" :for="`verif-price-${index}-${type}`">
|
||||
{{ PRICE_TYPE_LABELS[type] }}
|
||||
</FieldLabel>
|
||||
<RupiahInput :id="`verif-price-${index}-${type}`" :model-value="result.prices[type]"
|
||||
@update:model-value="setResultPrice(index, type, $event)" />
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FieldError :errors="verifyForm.errors.result_prices ? [verifyForm.errors.result_prices] : []" />
|
||||
|
||||
<Field>
|
||||
<FieldLabel for="verification-note">Catatan Verifikasi</FieldLabel>
|
||||
<Textarea id="verification-note" v-model="verifyForm.verification_note"
|
||||
placeholder="Contoh: Terdapat 1 barang cacat jahitan saat dihitung di toko" rows="3" />
|
||||
<FieldError
|
||||
:errors="verifyForm.errors.verification_note ? [verifyForm.errors.verification_note] : []" />
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<DialogFooter class="mt-6">
|
||||
<Button type="button" variant="outline" :disabled="verifyForm.processing"
|
||||
@click="verifyDialogOpen = false">
|
||||
Batal
|
||||
</Button>
|
||||
<Button type="submit" :disabled="verifyForm.processing">
|
||||
{{ verifyForm.processing ? 'Menyimpan...' : 'Verifikasi' }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@ -1,101 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import { Save } from '@lucide/vue';
|
||||
import { watch } from 'vue';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Field,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
FieldSet,
|
||||
} from '@/components/ui/field';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { FIELD_LIMITS } from '@/lib/field-limits';
|
||||
import { formErrors } from '@/lib/form';
|
||||
import type { ProductListItem } from '@/types/product';
|
||||
|
||||
const open = defineModel<boolean>('open', { default: false });
|
||||
|
||||
const props = defineProps<{
|
||||
product?: ProductListItem | null;
|
||||
}>();
|
||||
|
||||
const form = useForm({
|
||||
reason: '',
|
||||
});
|
||||
|
||||
function resetForm() {
|
||||
form.reset();
|
||||
form.clearErrors();
|
||||
}
|
||||
|
||||
watch(open, (isOpen) => {
|
||||
if (!isOpen) {
|
||||
resetForm();
|
||||
}
|
||||
});
|
||||
|
||||
function submit() {
|
||||
if (!props.product) {
|
||||
return;
|
||||
}
|
||||
|
||||
form.post(`/admin/master/products/${props.product.id}/reject`, {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
open.value = false;
|
||||
},
|
||||
onError: () => {
|
||||
toast.error('Gagal menolak produk. Periksa kembali formulir.');
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog v-model:open="open">
|
||||
<DialogContent class="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Tolak Pengajuan Produk</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="submit">
|
||||
<FieldGroup>
|
||||
<FieldSet class="grid gap-4">
|
||||
<Field>
|
||||
<FieldLabel for="reject-product-reason" required>Alasan Penolakan</FieldLabel>
|
||||
<Textarea
|
||||
id="reject-product-reason"
|
||||
v-model="form.reason"
|
||||
placeholder="Contoh: Data varian belum lengkap"
|
||||
rows="3"
|
||||
autofocus
|
||||
:maxlength="FIELD_LIMITS.reason"
|
||||
/>
|
||||
<FieldError :errors="formErrors(form, 'reason')" />
|
||||
</Field>
|
||||
</FieldSet>
|
||||
</FieldGroup>
|
||||
|
||||
<DialogFooter class="mt-6">
|
||||
<Button type="button" variant="outline" :disabled="form.processing" @click="open = false">
|
||||
Batal
|
||||
</Button>
|
||||
<Button type="submit" variant="destructive" :disabled="form.processing">
|
||||
<Save class="size-4" />
|
||||
{{ form.processing ? 'Menyimpan...' : 'Tolak' }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@ -1,184 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Link, router } from '@inertiajs/vue3';
|
||||
import { Check, Pencil, Trash2, X } from '@lucide/vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { toast } from 'vue-sonner';
|
||||
import ConfirmDialog from '@/components/ConfirmDialog.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { useCan } from '@/composables/useCan';
|
||||
import type { ProductListItem } from '@/types/product';
|
||||
|
||||
const props = defineProps<{
|
||||
product: ProductListItem;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
reject: [product: ProductListItem];
|
||||
}>();
|
||||
|
||||
const { can } = useCan();
|
||||
|
||||
const deleteConfirmOpen = ref(false);
|
||||
const approveConfirmOpen = ref(false);
|
||||
const deleteProcessing = ref(false);
|
||||
const approveProcessing = ref(false);
|
||||
|
||||
const canEdit = computed(() => (
|
||||
props.product.is_editable
|
||||
&& !can('products.verify')
|
||||
&& can('products.update')
|
||||
));
|
||||
|
||||
const canDelete = computed(() => {
|
||||
if (!can('products.delete')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (can('products.verify')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return props.product.is_editable || props.product.status === 'approved';
|
||||
});
|
||||
|
||||
const isDeleteRequest = computed(() => (
|
||||
props.product.status === 'pending'
|
||||
&& props.product.pending_action === 'delete'
|
||||
));
|
||||
|
||||
const deleteDescription = computed(() => {
|
||||
if (can('products.verify')) {
|
||||
return `Produk ${props.product.name} akan dihapus beserta seluruh variannya. Tindakan ini tidak dapat dibatalkan.`;
|
||||
}
|
||||
|
||||
if (isDeleteRequest.value) {
|
||||
return `Pengajuan penghapusan produk ${props.product.name} sedang menunggu persetujuan owner.`;
|
||||
}
|
||||
|
||||
return `Pengajuan penghapusan produk ${props.product.name} akan dikirim ke owner untuk disetujui.`;
|
||||
});
|
||||
|
||||
function destroyProduct() {
|
||||
if (isDeleteRequest.value && !can('products.verify')) {
|
||||
deleteConfirmOpen.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
deleteProcessing.value = true;
|
||||
|
||||
router.delete(`/admin/master/products/${props.product.id}`, {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
deleteConfirmOpen.value = false;
|
||||
},
|
||||
onError: () => {
|
||||
toast.error('Gagal mengajukan penghapusan produk.');
|
||||
},
|
||||
onFinish: () => {
|
||||
deleteProcessing.value = false;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function approveProduct() {
|
||||
approveProcessing.value = true;
|
||||
|
||||
router.post(`/admin/master/products/${props.product.id}/approve`, {}, {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
approveConfirmOpen.value = false;
|
||||
},
|
||||
onError: () => {
|
||||
toast.error('Gagal menyetujui produk.');
|
||||
},
|
||||
onFinish: () => {
|
||||
approveProcessing.value = false;
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<Tooltip v-if="canEdit">
|
||||
<TooltipTrigger as-child>
|
||||
<Button variant="ghost" size="icon" class="size-8" as-child>
|
||||
<Link :href="`/admin/master/products/${product.id}/edit`">
|
||||
<Pencil class="size-4" />
|
||||
<span class="sr-only">Ubah</span>
|
||||
</Link>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Ubah</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip v-if="product.can_verify && can('products.verify')">
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="size-8 text-green-600 hover:text-green-600"
|
||||
@click="approveConfirmOpen = true"
|
||||
>
|
||||
<Check class="size-4" />
|
||||
<span class="sr-only">Setujui</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Setujui</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip v-if="product.can_verify && can('products.verify')">
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="text-destructive hover:text-destructive size-8"
|
||||
@click="emit('reject', product)"
|
||||
>
|
||||
<X class="size-4" />
|
||||
<span class="sr-only">Tolak</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Tolak</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip v-if="canDelete && !isDeleteRequest">
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="text-destructive hover:text-destructive size-8"
|
||||
@click="deleteConfirmOpen = true"
|
||||
>
|
||||
<Trash2 class="size-4" />
|
||||
<span class="sr-only">Hapus</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{{ can('products.verify') ? 'Hapus' : 'Ajukan Penghapusan' }}</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
v-if="can('products.verify')"
|
||||
v-model:open="approveConfirmOpen"
|
||||
title="Setujui produk?"
|
||||
:description="`Produk ${product.name}${product.pending_action === 'delete' ? ' akan dihapus' : ' akan disetujui dan diaktifkan'}.`"
|
||||
confirm-label="Setujui"
|
||||
cancel-label="Batal"
|
||||
:loading="approveProcessing"
|
||||
@confirm="approveProduct"
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
v-if="canDelete && !isDeleteRequest"
|
||||
v-model:open="deleteConfirmOpen"
|
||||
:title="can('products.verify') ? 'Hapus produk?' : 'Ajukan penghapusan produk?'"
|
||||
:description="deleteDescription"
|
||||
:confirm-label="can('products.verify') ? 'Hapus' : 'Ajukan'"
|
||||
cancel-label="Batal"
|
||||
destructive
|
||||
:loading="deleteProcessing"
|
||||
@confirm="destroyProduct"
|
||||
/>
|
||||
</template>
|
||||
91
resources/js/composables/useVariantList.ts
Normal file
91
resources/js/composables/useVariantList.ts
Normal file
@ -0,0 +1,91 @@
|
||||
import { ref } from 'vue';
|
||||
import type { Ref } from 'vue';
|
||||
import { formErrors } from '@/lib/form';
|
||||
import type { FormWithErrors } from '@/lib/form';
|
||||
|
||||
export interface VariantItem {
|
||||
client_id: string;
|
||||
id?: number;
|
||||
media: unknown;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export function useVariantList<T extends VariantItem>(
|
||||
prefix: string,
|
||||
createEmpty: () => T,
|
||||
buildInitial: () => T[],
|
||||
) {
|
||||
const items: Ref<T[]> = ref(buildInitial()) as Ref<T[]>;
|
||||
|
||||
function addItem() {
|
||||
items.value = [...items.value, createEmpty()];
|
||||
}
|
||||
|
||||
function removeItem(clientId: string) {
|
||||
if (items.value.length <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
items.value = items.value.filter((item) => item.client_id !== clientId);
|
||||
}
|
||||
|
||||
function setField(clientId: string, key: string, value: unknown) {
|
||||
items.value = items.value.map((item) =>
|
||||
item.client_id === clientId ? { ...item, [key]: value } : item,
|
||||
);
|
||||
}
|
||||
|
||||
function indexOf(clientId: string): number {
|
||||
return items.value.findIndex((item) => item.client_id === clientId);
|
||||
}
|
||||
|
||||
function appendToFormData(
|
||||
formData: FormData,
|
||||
appendItem: (formData: FormData, index: number, item: T) => void,
|
||||
method?: 'post' | 'put',
|
||||
) {
|
||||
if (method === 'put') {
|
||||
formData.append('_method', 'PUT');
|
||||
}
|
||||
|
||||
items.value.forEach((item, index) => {
|
||||
if (item.id) {
|
||||
formData.append(`${prefix}[${index}][id]`, String(item.id));
|
||||
}
|
||||
|
||||
appendItem(formData, index, item);
|
||||
});
|
||||
}
|
||||
|
||||
function itemErrors(
|
||||
form: FormWithErrors,
|
||||
clientId: string,
|
||||
field: string,
|
||||
): string[] {
|
||||
const index = indexOf(clientId);
|
||||
|
||||
if (index === -1) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return formErrors(form, `${prefix}.${index}.${field}`);
|
||||
}
|
||||
|
||||
function allItemErrors(
|
||||
form: FormWithErrors,
|
||||
field: string,
|
||||
): string[] {
|
||||
return items.value.flatMap((item) => itemErrors(form, item.client_id, field));
|
||||
}
|
||||
|
||||
return {
|
||||
items,
|
||||
addItem,
|
||||
removeItem,
|
||||
setField,
|
||||
indexOf,
|
||||
appendToFormData,
|
||||
itemErrors,
|
||||
allItemErrors,
|
||||
};
|
||||
}
|
||||
@ -1,10 +1,12 @@
|
||||
import type { InertiaForm } from '@inertiajs/vue3';
|
||||
export interface FormWithErrors {
|
||||
errors: Record<string, string | undefined>;
|
||||
}
|
||||
|
||||
export function formErrors<T extends Record<string, unknown>>(
|
||||
form: InertiaForm<T>,
|
||||
key: keyof T | string,
|
||||
export function formErrors(
|
||||
form: FormWithErrors,
|
||||
key: string,
|
||||
): string[] {
|
||||
const error = form.errors[key as keyof typeof form.errors];
|
||||
const error = form.errors[key];
|
||||
|
||||
return error ? [error] : [];
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
import { ArrowLeft } from '@lucide/vue';
|
||||
import ProductForm from '@/components/admin/master/products/ProductForm.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import AdminLayout from '@/layouts/AdminLayout.vue';
|
||||
import type { CategoryOption } from '@/types/product';
|
||||
import ProductForm from './form/ProductForm.vue';
|
||||
|
||||
defineProps<{
|
||||
categories: CategoryOption[];
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
import { ArrowLeft } from '@lucide/vue';
|
||||
import { computed } from 'vue';
|
||||
import ProductForm from '@/components/admin/master/products/ProductForm.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import AdminLayout from '@/layouts/AdminLayout.vue';
|
||||
import type { CategoryOption, ProductListItem } from '@/types/product';
|
||||
import ProductForm from './form/ProductForm.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
product: ProductListItem & { description?: string | null };
|
||||
@ -26,6 +26,7 @@ const initialData = computed(() => ({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<Head title="Ubah Produk" />
|
||||
|
||||
<AdminLayout>
|
||||
|
||||
@ -2,10 +2,6 @@
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
import { Plus } from '@lucide/vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import MasterOutOfStockCatalogSection from '@/components/admin/master/MasterOutOfStockCatalogSection.vue';
|
||||
import CuttingVerificationSection from '@/components/admin/master/products/CuttingVerificationSection.vue';
|
||||
import ProductGroupedTable from '@/components/admin/master/products/ProductGroupedTable.vue';
|
||||
import RejectProductModal from '@/components/admin/master/products/RejectProductModal.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { useCan } from '@/composables/useCan';
|
||||
@ -14,21 +10,15 @@ import {
|
||||
useDataTableQuerySync,
|
||||
} from '@/composables/useDataTableQuery';
|
||||
import AdminLayout from '@/layouts/AdminLayout.vue';
|
||||
import type { CuttingListItem } from '@/types/cutting';
|
||||
import type { DataTableFilterDef } from '@/types/data-table';
|
||||
import type {
|
||||
CategoryOption,
|
||||
PaginatedProducts,
|
||||
ProductListItem,
|
||||
ProductOutOfStockGroup,
|
||||
ProductStockWarningGroup,
|
||||
} from '@/types/product';
|
||||
import ProductGroupedTable from './table/ProductGroupedTable.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
products: PaginatedProducts;
|
||||
completedCuttings: CuttingListItem[];
|
||||
outOfStockGroups: ProductOutOfStockGroup[];
|
||||
stockWarningGroups: ProductStockWarningGroup[];
|
||||
categories: CategoryOption[];
|
||||
filters: {
|
||||
search: string;
|
||||
@ -36,13 +26,10 @@ const props = defineProps<{
|
||||
direction?: 'asc' | 'desc';
|
||||
is_active?: string;
|
||||
category_id?: string;
|
||||
status?: string;
|
||||
stock_status?: string;
|
||||
};
|
||||
}>();
|
||||
|
||||
const rejectModalOpen = ref(false);
|
||||
const rejectingProduct = ref<ProductListItem | null>(null);
|
||||
|
||||
const { can } = useCan();
|
||||
const search = ref(props.filters.search ?? '');
|
||||
|
||||
@ -50,7 +37,7 @@ const { query, setSearch, setFilter, resetFilters, syncFromServer } =
|
||||
useDataTableQuery({
|
||||
url: '/admin/master/products',
|
||||
initial: { ...props.filters },
|
||||
filterKeys: ['is_active', 'category_id', 'status'],
|
||||
filterKeys: ['is_active', 'category_id', 'stock_status'],
|
||||
});
|
||||
|
||||
useDataTableQuerySync(() => props.filters, syncFromServer);
|
||||
@ -62,16 +49,6 @@ const filterDefs = computed<DataTableFilterDef[]>(() => [
|
||||
type: 'select',
|
||||
options: props.categories.map((c) => ({ value: String(c.value), label: c.label })),
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: 'Persetujuan',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ value: 'pending', label: 'Menunggu' },
|
||||
{ value: 'approved', label: 'Disetujui' },
|
||||
{ value: 'rejected', label: 'Ditolak' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'is_active',
|
||||
label: 'Status',
|
||||
@ -81,20 +58,24 @@ const filterDefs = computed<DataTableFilterDef[]>(() => [
|
||||
{ value: '0', label: 'Nonaktif' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'stock_status',
|
||||
label: 'Stok',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ value: 'out_of_stock', label: 'Stok Habis' },
|
||||
{ value: 'low_stock', label: 'Stok Menipis' },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const filterValues = computed(() => ({
|
||||
category_id: query.value.category_id ?? '',
|
||||
status: query.value.status ?? '',
|
||||
is_active: query.value.is_active ?? '',
|
||||
stock_status: query.value.stock_status ?? '',
|
||||
}));
|
||||
|
||||
function openRejectModal(product: ProductListItem) {
|
||||
rejectingProduct.value = product;
|
||||
rejectModalOpen.value = true;
|
||||
}
|
||||
|
||||
const tablePagination = computed(() => ({
|
||||
const pagination = computed(() => ({
|
||||
currentPage: props.products.current_page,
|
||||
perPage: props.products.per_page,
|
||||
lastPage: props.products.last_page,
|
||||
@ -137,22 +118,12 @@ watch(
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<CuttingVerificationSection v-if="can('cuttings.verify')" :cuttings="completedCuttings" />
|
||||
|
||||
<MasterOutOfStockCatalogSection severity="warning" title="Stok Menipis" empty-title="Tidak ada peringatan stok"
|
||||
empty-description="Semua varian masih berada di atas batas stok minimum." :groups="stockWarningGroups" />
|
||||
|
||||
<MasterOutOfStockCatalogSection title="Stok Habis" :groups="outOfStockGroups" />
|
||||
|
||||
<Card class="min-w-0">
|
||||
<CardContent class="min-w-0">
|
||||
<ProductGroupedTable v-model:search="search" :products="products.data" :first-item="firstItem"
|
||||
:pagination="tablePagination" :pagination-links="products.links" :filter-defs="filterDefs"
|
||||
:filter-values="filterValues" @filter-change="setFilter" @filters-reset="resetFilters"
|
||||
@reject="openRejectModal" />
|
||||
:pagination="pagination" :pagination-links="products.links" :filter-defs="filterDefs"
|
||||
:filter-values="filterValues" @filter-change="setFilter" @filters-reset="resetFilters" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<RejectProductModal v-model:open="rejectModalOpen" :product="rejectingProduct" />
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import { Plus, Save, Trash2 } from '@lucide/vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { MultipleImageUploadField } from '@/components/form/image-upload-field';
|
||||
import { NumberInput } from '@/components/form/number-input';
|
||||
@ -16,6 +16,7 @@ import {
|
||||
} from '@/components/ui/field';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { useVariantList } from '@/composables/useVariantList';
|
||||
import { FIELD_LIMITS } from '@/lib/field-limits';
|
||||
import { formErrors } from '@/lib/form';
|
||||
import { appendMediaToFormData, createMediaUploadState } from '@/types/media';
|
||||
@ -49,30 +50,40 @@ function createClientId(): string {
|
||||
return `variant-${crypto.randomUUID()}`;
|
||||
}
|
||||
|
||||
function createEmptyVariant(): ProductVariantFormItem {
|
||||
return {
|
||||
const {
|
||||
items: variants,
|
||||
addItem: addVariant,
|
||||
removeItem: removeVariant,
|
||||
setField: setVariantField,
|
||||
appendToFormData,
|
||||
itemErrors: variantErrors,
|
||||
} = useVariantList<ProductVariantFormItem>(
|
||||
'variants',
|
||||
() => ({
|
||||
client_id: createClientId(),
|
||||
name: '',
|
||||
stock: '0',
|
||||
media: createMediaUploadState(),
|
||||
};
|
||||
}
|
||||
}),
|
||||
() => {
|
||||
if (!props.initialData?.variants?.length) {
|
||||
return [{
|
||||
client_id: createClientId(),
|
||||
name: '',
|
||||
stock: '0',
|
||||
media: createMediaUploadState(),
|
||||
}];
|
||||
}
|
||||
|
||||
function buildInitialVariants(): ProductVariantFormItem[] {
|
||||
if (!props.initialData?.variants?.length) {
|
||||
return [createEmptyVariant()];
|
||||
}
|
||||
|
||||
return props.initialData.variants.map((variant) => ({
|
||||
client_id: createClientId(),
|
||||
id: variant.id,
|
||||
name: variant.name ?? '',
|
||||
stock: variant.stock != null ? String(variant.stock) : '0',
|
||||
media: createMediaUploadState(variant.images ?? []),
|
||||
}));
|
||||
}
|
||||
|
||||
const variants = ref<ProductVariantFormItem[]>(buildInitialVariants());
|
||||
return props.initialData.variants.map((variant) => ({
|
||||
client_id: createClientId(),
|
||||
id: variant.id,
|
||||
name: variant.name ?? '',
|
||||
stock: variant.stock != null ? String(variant.stock) : '0',
|
||||
media: createMediaUploadState(variant.images ?? []),
|
||||
}));
|
||||
},
|
||||
);
|
||||
|
||||
const form = useForm({
|
||||
name: props.initialData?.name ?? '',
|
||||
@ -96,31 +107,11 @@ function isCategoryChecked(categoryId: number): boolean {
|
||||
return form.category_ids.includes(categoryId);
|
||||
}
|
||||
|
||||
function addVariant() {
|
||||
variants.value = [...variants.value, createEmptyVariant()];
|
||||
}
|
||||
|
||||
function removeVariant(clientId: string) {
|
||||
if (variants.value.length <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
variants.value = variants.value.filter((variant) => variant.client_id !== clientId);
|
||||
}
|
||||
|
||||
function setVariantField(clientId: string, key: 'name' | 'stock', value: string) {
|
||||
variants.value = variants.value.map((variant) =>
|
||||
variant.client_id === clientId ? { ...variant, [key]: value } : variant,
|
||||
);
|
||||
}
|
||||
const categoryError = computed(() => form.errors.category_ids);
|
||||
|
||||
function buildFormData(): FormData {
|
||||
const formData = new FormData();
|
||||
|
||||
if (props.method === 'put') {
|
||||
formData.append('_method', 'PUT');
|
||||
}
|
||||
|
||||
formData.append('name', form.name.trim());
|
||||
formData.append('description', form.description.trim());
|
||||
|
||||
@ -128,36 +119,15 @@ function buildFormData(): FormData {
|
||||
formData.append('category_ids[]', String(categoryId));
|
||||
});
|
||||
|
||||
variants.value.forEach((variant, index) => {
|
||||
if (variant.id) {
|
||||
formData.append(`variants[${index}][id]`, String(variant.id));
|
||||
}
|
||||
|
||||
appendToFormData(formData, (formData, index, variant) => {
|
||||
formData.append(`variants[${index}][name]`, variant.name.trim());
|
||||
formData.append(`variants[${index}][stock]`, String(Number.parseInt(variant.stock, 10) || 0));
|
||||
|
||||
appendMediaToFormData(formData, `variants[${index}]`, variant.media);
|
||||
});
|
||||
}, props.method);
|
||||
|
||||
return formData;
|
||||
}
|
||||
|
||||
function formError(key: string): string | undefined {
|
||||
return (form.errors as Record<string, string>)[key];
|
||||
}
|
||||
|
||||
function variantError(clientId: string, field: string): string | undefined {
|
||||
const index = variants.value.findIndex((variant) => variant.client_id === clientId);
|
||||
|
||||
if (index === -1) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return formError(`variants.${index}.${field}`);
|
||||
}
|
||||
|
||||
const categoryError = computed(() => form.errors.category_ids);
|
||||
|
||||
function submit() {
|
||||
const options = {
|
||||
forceFormData: true,
|
||||
@ -240,8 +210,7 @@ function submit() {
|
||||
<Input :id="`variant_name_${variant.client_id}`" :model-value="variant.name" type="text"
|
||||
placeholder="Contoh: Polkadot" :maxlength="FIELD_LIMITS.variantName"
|
||||
@update:model-value="setVariantField(variant.client_id, 'name', String($event))" />
|
||||
<FieldError
|
||||
:errors="variantError(variant.client_id, 'name') ? [variantError(variant.client_id, 'name')!] : []" />
|
||||
<FieldError :errors="variantErrors(form, variant.client_id, 'name')" />
|
||||
</Field>
|
||||
<Field v-if="method !== 'put'">
|
||||
<FieldLabel :for="`variant_stock_${variant.client_id}`" required>
|
||||
@ -249,15 +218,14 @@ function submit() {
|
||||
</FieldLabel>
|
||||
<NumberInput :id="`variant_stock_${variant.client_id}`" :model-value="variant.stock"
|
||||
@update:model-value="setVariantField(variant.client_id, 'stock', String($event))" />
|
||||
<FieldError
|
||||
:errors="variantError(variant.client_id, 'stock') ? [variantError(variant.client_id, 'stock')!] : []" />
|
||||
<FieldError :errors="variantErrors(form, variant.client_id, 'stock')" />
|
||||
</Field>
|
||||
</FieldSet>
|
||||
|
||||
<div>
|
||||
<MultipleImageUploadField :id="`variant_images_${variant.client_id}`"
|
||||
v-model="variant.media" label="Foto Varian" :max-files="5" required
|
||||
:errors="variantError(variant.client_id, 'images') ? [variantError(variant.client_id, 'images')!] : []" />
|
||||
:errors="variantErrors(form, variant.client_id, 'images')" />
|
||||
</div>
|
||||
</FieldGroup>
|
||||
</CardContent>
|
||||
@ -1,8 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import { computed } from 'vue';
|
||||
import DataTableActions from '@/components/admin/master/products/data-table-actions.vue';
|
||||
import ProductStatusToggle from '@/components/admin/master/products/product-status-toggle.vue';
|
||||
import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
|
||||
import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@ -31,6 +29,8 @@ import {
|
||||
PRICE_TYPE_LABELS,
|
||||
} from '@/types/product';
|
||||
import type { ProductListItem } from '@/types/product';
|
||||
import DataTableActions from './data-table-actions.vue';
|
||||
import ProductStatusToggle from './product-status-toggle.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
products: ProductListItem[];
|
||||
@ -46,7 +46,6 @@ const search = defineModel<string>('search', { default: '' });
|
||||
const emit = defineEmits<{
|
||||
'filter-change': [key: string, value: string];
|
||||
'filters-reset': [];
|
||||
reject: [product: ProductListItem];
|
||||
}>();
|
||||
|
||||
const showingCount = computed(() => props.products.length);
|
||||
@ -72,38 +71,17 @@ function formatStock(value: number): string {
|
||||
function rowNumber(index: number): number {
|
||||
return (props.firstItem ?? 1) + index;
|
||||
}
|
||||
|
||||
function approvalStatusVariant(status: string): 'default' | 'secondary' | 'destructive' | 'outline' {
|
||||
switch (status) {
|
||||
case 'approved':
|
||||
return 'default';
|
||||
case 'rejected':
|
||||
return 'destructive';
|
||||
default:
|
||||
return 'outline';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<DataTableToolbar
|
||||
v-model:search="search"
|
||||
:filter-defs="filterDefs"
|
||||
:filter-values="filterValues"
|
||||
@filter-change="(key, value) => emit('filter-change', key, value)"
|
||||
@filters-reset="emit('filters-reset')"
|
||||
/>
|
||||
<DataTableToolbar v-model:search="search" :filter-defs="filterDefs" :filter-values="filterValues"
|
||||
@filter-change="(key, value) => emit('filter-change', key, value)" @filters-reset="emit('filters-reset')" />
|
||||
|
||||
<div v-if="products.length" class="space-y-4">
|
||||
<div
|
||||
v-for="(product, index) in products"
|
||||
:key="product.id"
|
||||
class="overflow-hidden rounded-md border"
|
||||
>
|
||||
<div v-for="(product, index) in products" :key="product.id" class="overflow-hidden rounded-md border">
|
||||
<div
|
||||
class="flex flex-col gap-3 border-b bg-muted/30 px-4 py-3 sm:flex-row sm:items-start sm:justify-between"
|
||||
>
|
||||
class="flex flex-col gap-3 border-b bg-muted/30 px-4 py-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div class="flex min-w-0 items-start gap-3">
|
||||
<span class="text-muted-foreground w-8 shrink-0 pt-0.5 text-center text-sm tabular-nums">
|
||||
{{ rowNumber(index) }}
|
||||
@ -113,40 +91,25 @@ function approvalStatusVariant(status: string): 'default' | 'secondary' | 'destr
|
||||
<h3 class="font-medium leading-tight">
|
||||
{{ product.name }}
|
||||
</h3>
|
||||
<Badge :variant="approvalStatusVariant(product.status)">
|
||||
{{ product.status_label }}
|
||||
</Badge>
|
||||
<Badge
|
||||
v-if="product.pending_action === 'delete'"
|
||||
variant="destructive"
|
||||
>
|
||||
{{ product.pending_action_label }}
|
||||
</Badge>
|
||||
</div>
|
||||
<div v-if="product.categories.length" class="flex flex-wrap gap-1">
|
||||
<Badge
|
||||
v-for="category in product.categories"
|
||||
:key="category.id"
|
||||
variant="outline"
|
||||
>
|
||||
<Badge v-for="category in product.categories" :key="category.id" variant="outline">
|
||||
{{ category.name }}
|
||||
</Badge>
|
||||
</div>
|
||||
<p
|
||||
v-if="product.rejection_reason"
|
||||
class="text-destructive text-sm"
|
||||
>
|
||||
Alasan penolakan: {{ product.rejection_reason }}
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
|
||||
<span>
|
||||
Total stok <strong class="text-primary">
|
||||
{{ product.variants.reduce((acc, v) => acc + v.stock, 0) }}
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex shrink-0 items-center justify-end gap-2 sm:pt-0.5">
|
||||
<ProductStatusToggle :product="product" />
|
||||
<DataTableActions
|
||||
:product="product"
|
||||
@reject="emit('reject', $event)"
|
||||
/>
|
||||
<DataTableActions :product="product" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -155,14 +118,13 @@ function approvalStatusVariant(status: string): 'default' | 'secondary' | 'destr
|
||||
<TableRow>
|
||||
<TableHead>Varian</TableHead>
|
||||
<TableHead>Foto</TableHead>
|
||||
<TableHead>Stok Bagus</TableHead>
|
||||
<TableHead>Stok Reject</TableHead>
|
||||
<TableHead>Stok</TableHead>
|
||||
<TableHead>Harga</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow v-if="!product.variants.length" :key="`${product.id}-empty`">
|
||||
<TableCell colspan="5" class="text-muted-foreground">
|
||||
<TableCell colspan="4" class="text-muted-foreground">
|
||||
Belum ada varian
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
@ -176,22 +138,17 @@ function approvalStatusVariant(status: string): 'default' | 'secondary' | 'destr
|
||||
<TableCell class="tabular-nums">
|
||||
{{ formatStock(variant.stock) }}
|
||||
</TableCell>
|
||||
<TableCell class="tabular-nums">
|
||||
{{ formatStock(variant.reject_stock ?? 0) }}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div v-if="variant.prices.length" class="space-y-0.5 text-xs">
|
||||
<div v-if="variant.prices?.length" class="space-y-0.5 text-xs">
|
||||
<div v-for="type in PRICE_TYPES" :key="type">
|
||||
<div
|
||||
v-if="variant.prices.find((item) => item.type === type)"
|
||||
class="flex items-center justify-between gap-3"
|
||||
>
|
||||
<div v-if="variant.prices?.find((item) => item.type === type)"
|
||||
class="flex items-center justify-between gap-3">
|
||||
<span class="text-muted-foreground">
|
||||
{{ PRICE_TYPE_LABELS[type] }}
|
||||
</span>
|
||||
<span class="font-medium tabular-nums">
|
||||
{{
|
||||
variant.prices.find((item) => item.type === type)?.price_formatted
|
||||
variant.prices?.find((item) => item.type === type)?.price_formatted
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
@ -221,18 +178,10 @@ function approvalStatusVariant(status: string): 'default' | 'secondary' | 'destr
|
||||
{{ paginationSummary }}
|
||||
</p>
|
||||
|
||||
<div
|
||||
v-if="paginationLinks?.length && pagination.lastPage > 1"
|
||||
class="flex flex-wrap items-center justify-center gap-1 sm:justify-end"
|
||||
>
|
||||
<Button
|
||||
v-for="link in paginationLinks"
|
||||
:key="`${link.label}-${link.url}`"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!link.url || link.active"
|
||||
as-child
|
||||
>
|
||||
<div v-if="paginationLinks?.length && pagination.lastPage > 1"
|
||||
class="flex flex-wrap items-center justify-center gap-1 sm:justify-end">
|
||||
<Button v-for="link in paginationLinks" :key="`${link.label}-${link.url}`" variant="outline" size="sm"
|
||||
:disabled="!link.url || link.active" as-child>
|
||||
<Link v-if="link.url" :href="link.url" preserve-scroll>
|
||||
<span v-html="link.label" />
|
||||
</Link>
|
||||
@ -0,0 +1,67 @@
|
||||
<script setup lang="ts">
|
||||
import { Link, router } from '@inertiajs/vue3';
|
||||
import { Pencil, Trash2 } from '@lucide/vue';
|
||||
import { ref } from 'vue';
|
||||
import { toast } from 'vue-sonner';
|
||||
import ConfirmDialog from '@/components/ConfirmDialog.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { useCan } from '@/composables/useCan';
|
||||
import type { ProductListItem } from '@/types/product';
|
||||
|
||||
const props = defineProps<{
|
||||
product: ProductListItem;
|
||||
}>();
|
||||
|
||||
const { can } = useCan();
|
||||
|
||||
const deleteConfirmOpen = ref(false);
|
||||
const deleteProcessing = ref(false);
|
||||
|
||||
function destroyProduct() {
|
||||
deleteProcessing.value = true;
|
||||
|
||||
router.delete(`/admin/master/products/${props.product.id}`, {
|
||||
onSuccess: () => {
|
||||
deleteConfirmOpen.value = false;
|
||||
},
|
||||
onError: () => {
|
||||
toast.error('Gagal menghapus produk.');
|
||||
},
|
||||
onFinish: () => {
|
||||
deleteProcessing.value = false;
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<Tooltip v-if="can('products.update')">
|
||||
<TooltipTrigger as-child>
|
||||
<Button variant="ghost" size="icon" class="size-8" as-child>
|
||||
<Link :href="`/admin/master/products/${product.id}/edit`">
|
||||
<Pencil class="size-4" />
|
||||
<span class="sr-only">Ubah</span>
|
||||
</Link>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Ubah</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip v-if="can('products.delete')">
|
||||
<TooltipTrigger as-child>
|
||||
<Button variant="ghost" size="icon" class="text-destructive hover:text-destructive size-8"
|
||||
@click="deleteConfirmOpen = true">
|
||||
<Trash2 class="size-4" />
|
||||
<span class="sr-only">Hapus</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Hapus</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog v-if="can('products.delete')" v-model:open="deleteConfirmOpen" title="Hapus produk?"
|
||||
:description="`Produk ${product.name} akan dihapus beserta seluruh variannya. Tindakan ini tidak dapat dibatalkan.`"
|
||||
confirm-label="Hapus" cancel-label="Batal" destructive :loading="deleteProcessing" @confirm="destroyProduct" />
|
||||
</template>
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { router } from '@inertiajs/vue3';
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
@ -16,13 +16,6 @@ const { can } = useCan();
|
||||
const isActive = ref(props.product.is_active);
|
||||
const processing = ref(false);
|
||||
|
||||
const canToggle = computed(() => (
|
||||
can('products.toggle-status')
|
||||
&& can('products.verify')
|
||||
&& props.product.status === 'approved'
|
||||
&& props.product.pending_action !== 'delete'
|
||||
));
|
||||
|
||||
watch(
|
||||
() => props.product.is_active,
|
||||
(value) => {
|
||||
@ -31,7 +24,7 @@ watch(
|
||||
);
|
||||
|
||||
function toggleStatus(checked: boolean) {
|
||||
if (!canToggle.value) {
|
||||
if (!can('products.update')) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -56,11 +49,8 @@ function toggleStatus(checked: boolean) {
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-2">
|
||||
<Switch
|
||||
:model-value="isActive"
|
||||
:disabled="processing || !canToggle"
|
||||
@update:model-value="toggleStatus"
|
||||
/>
|
||||
<Switch :model-value="isActive" :disabled="processing || !can('products.update')"
|
||||
@update:model-value="toggleStatus" />
|
||||
<Badge :variant="isActive ? 'default' : 'secondary'">
|
||||
{{ isActive ? 'Aktif' : 'Nonaktif' }}
|
||||
</Badge>
|
||||
@ -23,6 +23,7 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { useVariantList } from '@/composables/useVariantList';
|
||||
import { FIELD_LIMITS } from '@/lib/field-limits';
|
||||
import { formErrors } from '@/lib/form';
|
||||
import { parseRupiah } from '@/lib/rupiah';
|
||||
@ -61,51 +62,69 @@ function createClientId(): string {
|
||||
return `price-${crypto.randomUUID()}`;
|
||||
}
|
||||
|
||||
function createEmptyPrice(): RawMaterialPriceFormItem {
|
||||
return {
|
||||
const {
|
||||
items: prices,
|
||||
addItem: addPriceRaw,
|
||||
removeItem: removePrice,
|
||||
setField: setPriceField,
|
||||
appendToFormData,
|
||||
itemErrors: priceErrors,
|
||||
} = useVariantList<RawMaterialPriceFormItem>(
|
||||
'prices',
|
||||
() => ({
|
||||
client_id: createClientId(),
|
||||
variant: '',
|
||||
price: '',
|
||||
stock: '0',
|
||||
media: createMediaUploadState(),
|
||||
};
|
||||
}
|
||||
}),
|
||||
() => {
|
||||
if (!props.initialData?.prices?.length) {
|
||||
return [{
|
||||
client_id: createClientId(),
|
||||
variant: '',
|
||||
price: '',
|
||||
stock: '0',
|
||||
media: createMediaUploadState(),
|
||||
}];
|
||||
}
|
||||
|
||||
function buildInitialPrices(): RawMaterialPriceFormItem[] {
|
||||
if (!props.initialData?.prices?.length) {
|
||||
return [createEmptyPrice()];
|
||||
}
|
||||
return props.initialData.prices.map((price) => ({
|
||||
client_id: createClientId(),
|
||||
id: price.id,
|
||||
variant: price.variant ?? '',
|
||||
price: price.price ?? '',
|
||||
stock: price.stock ?? '0',
|
||||
media: createMediaUploadState(price.images ?? []),
|
||||
}));
|
||||
},
|
||||
);
|
||||
|
||||
return props.initialData.prices.map((price) => ({
|
||||
client_id: createClientId(),
|
||||
id: price.id,
|
||||
variant: price.variant ?? '',
|
||||
price: price.price ?? '',
|
||||
stock: price.stock ?? '0',
|
||||
media: createMediaUploadState(price.images ?? []),
|
||||
}));
|
||||
}
|
||||
|
||||
const prices = ref<RawMaterialPriceFormItem[]>(buildInitialPrices());
|
||||
const useSamePrice = ref(prices.value.length <= 1 || allPricesHaveSameValue(prices.value));
|
||||
const useSamePrice = ref(prices.value.length <= 1 || allPricesHaveSameValue());
|
||||
|
||||
const form = useForm({
|
||||
name: props.initialData?.name ?? '',
|
||||
unit: props.initialData?.unit ?? '',
|
||||
});
|
||||
|
||||
function allPricesHaveSameValue(items: RawMaterialPriceFormItem[]): boolean {
|
||||
if (items.length <= 1) {
|
||||
function allPricesHaveSameValue(): boolean {
|
||||
if (prices.value.length <= 1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const first = items[0].price.trim();
|
||||
const first = prices.value[0].price.trim();
|
||||
|
||||
return items.every((item) => item.price.trim() === first);
|
||||
return prices.value.every((item) => item.price.trim() === first);
|
||||
}
|
||||
|
||||
function addPrice() {
|
||||
const newPrice = createEmptyPrice();
|
||||
const newPrice: RawMaterialPriceFormItem = {
|
||||
client_id: createClientId(),
|
||||
variant: '',
|
||||
price: '',
|
||||
stock: '0',
|
||||
media: createMediaUploadState(),
|
||||
};
|
||||
|
||||
if (useSamePrice.value && prices.value[0]) {
|
||||
newPrice.price = prices.value[0].price;
|
||||
@ -114,24 +133,8 @@ function addPrice() {
|
||||
prices.value = [...prices.value, newPrice];
|
||||
}
|
||||
|
||||
function removePrice(clientId: string) {
|
||||
if (prices.value.length <= 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
prices.value = prices.value.filter((price) => price.client_id !== clientId);
|
||||
}
|
||||
|
||||
function setPriceField(clientId: string, key: 'variant' | 'stock', value: string) {
|
||||
prices.value = prices.value.map((price) =>
|
||||
price.client_id === clientId ? { ...price, [key]: value } : price,
|
||||
);
|
||||
}
|
||||
|
||||
function setPriceValue(clientId: string, value: string) {
|
||||
prices.value = prices.value.map((price) =>
|
||||
price.client_id === clientId ? { ...price, price: value } : price,
|
||||
);
|
||||
setPriceField(clientId, 'price', value);
|
||||
}
|
||||
|
||||
function setSharedPrice(value: string) {
|
||||
@ -168,24 +171,15 @@ function parseStockValue(value: string): number {
|
||||
function buildFormData(): FormData {
|
||||
const formData = new FormData();
|
||||
|
||||
if (props.method === 'put') {
|
||||
formData.append('_method', 'PUT');
|
||||
}
|
||||
|
||||
formData.append('name', form.name.trim());
|
||||
formData.append('unit', form.unit);
|
||||
|
||||
prices.value.forEach((price, index) => {
|
||||
if (price.id) {
|
||||
formData.append(`prices[${index}][id]`, String(price.id));
|
||||
}
|
||||
|
||||
appendToFormData(formData, (formData, index, price) => {
|
||||
formData.append(`prices[${index}][variant]`, price.variant.trim());
|
||||
formData.append(`prices[${index}][price]`, String(Number.parseInt(parseRupiah(price.price), 10) || 0));
|
||||
formData.append(`prices[${index}][stock]`, String(parseStockValue(price.stock)));
|
||||
|
||||
appendMediaToFormData(formData, `prices[${index}]`, price.media);
|
||||
});
|
||||
}, props.method);
|
||||
|
||||
return formData;
|
||||
}
|
||||
@ -292,7 +286,7 @@ function submit() {
|
||||
placeholder="Contoh: Premium / 40s" :maxlength="FIELD_LIMITS.variantName"
|
||||
@update:model-value="setPriceField(price.client_id, 'variant', String($event))" />
|
||||
<FieldError
|
||||
:errors="formErrors(form, `prices.${index}.variant`)" />
|
||||
:errors="priceErrors(form, price.client_id, 'variant')" />
|
||||
</Field>
|
||||
<Field v-if="method !== 'put'">
|
||||
<FieldLabel :for="`stock_${price.client_id}`" required>
|
||||
@ -301,7 +295,7 @@ function submit() {
|
||||
<DecimalInput :id="`stock_${price.client_id}`" :model-value="price.stock"
|
||||
@update:model-value="setPriceField(price.client_id, 'stock', String($event))" />
|
||||
<FieldError
|
||||
:errors="formErrors(form, `prices.${index}.stock`)" />
|
||||
:errors="priceErrors(form, price.client_id, 'stock')" />
|
||||
</Field>
|
||||
<Field v-if="!useSamePrice || prices.length === 1">
|
||||
<FieldLabel :for="`price_${price.client_id}`" required>
|
||||
@ -310,14 +304,14 @@ function submit() {
|
||||
<RupiahInput :id="`price_${price.client_id}`" :model-value="price.price"
|
||||
@update:model-value="setPriceValue(price.client_id, $event)" />
|
||||
<FieldError
|
||||
:errors="formErrors(form, `prices.${index}.price`)" />
|
||||
:errors="priceErrors(form, price.client_id, 'price')" />
|
||||
</Field>
|
||||
</FieldSet>
|
||||
|
||||
<div class="mt-4">
|
||||
<MultipleImageUploadField :id="`price_images_${price.client_id}`" v-model="price.media"
|
||||
label="Foto Varian" :max-files="5" required
|
||||
:errors="formErrors(form, `prices.${index}.images`)" />
|
||||
:errors="priceErrors(form, price.client_id, 'images')" />
|
||||
</div>
|
||||
</FieldGroup>
|
||||
</CardContent>
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
import type { MasterOutOfStockGroup } from '@/types/master-inventory';
|
||||
import type { MediaItem, MediaUploadState } from '@/types/media';
|
||||
|
||||
export type { MasterOutOfStockGroup as ProductOutOfStockGroup };
|
||||
export type { MasterOutOfStockGroup as ProductStockWarningGroup };
|
||||
|
||||
export type EnumOption = {
|
||||
value: string;
|
||||
label: string;
|
||||
@ -33,7 +29,6 @@ export type ProductVariantItem = {
|
||||
id: number;
|
||||
name: string;
|
||||
stock: number;
|
||||
reject_stock: number;
|
||||
prices: ProductPriceItem[];
|
||||
images?: MediaItem[];
|
||||
};
|
||||
@ -42,13 +37,6 @@ export type ProductListItem = {
|
||||
id: number;
|
||||
name: string;
|
||||
is_active: boolean;
|
||||
status: 'pending' | 'approved' | 'rejected';
|
||||
status_label: string;
|
||||
pending_action?: 'delete' | null;
|
||||
pending_action_label?: string | null;
|
||||
rejection_reason?: string | null;
|
||||
is_editable: boolean;
|
||||
can_verify: boolean;
|
||||
categories: ProductCategoryItem[];
|
||||
variants: ProductVariantItem[];
|
||||
};
|
||||
@ -77,7 +65,8 @@ export type ProductFilters = {
|
||||
sort?: string;
|
||||
direction?: 'asc' | 'desc' | null;
|
||||
is_active?: string;
|
||||
status?: string;
|
||||
category_id?: string;
|
||||
stock_status?: string;
|
||||
};
|
||||
|
||||
export type PaginatedProducts = {
|
||||
|
||||
@ -92,14 +92,6 @@
|
||||
->middleware('permission:'.Permission::PRODUCTS_TOGGLE_STATUS->value)
|
||||
->name('toggle-status');
|
||||
|
||||
Route::post('{product}/approve', [ProductController::class, 'approve'])
|
||||
->middleware('permission:'.Permission::PRODUCTS_VERIFY->value)
|
||||
->name('approve');
|
||||
|
||||
Route::post('{product}/reject', [ProductController::class, 'reject'])
|
||||
->middleware('permission:'.Permission::PRODUCTS_VERIFY->value)
|
||||
->name('reject');
|
||||
|
||||
Route::delete('{product}', [ProductController::class, 'destroy'])
|
||||
->middleware('permission:'.Permission::PRODUCTS_DELETE->value)
|
||||
->name('destroy');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user