[FEAT] 實作配方與生產工單自動搜尋,優化分頁 RWD,將倉庫地址改為選填並更新文件
All checks were successful
ERP-Deploy-Demo / deploy-demo (push) Successful in 1m22s
All checks were successful
ERP-Deploy-Demo / deploy-demo (push) Successful in 1m22s
This commit is contained in:
@@ -88,3 +88,13 @@ trigger: always_on
|
||||
* **自動化部署**:本專案使用 CI/CD 自動化部署,開發者只需 push 程式碼至對應分支即可。
|
||||
* **Demo 環境 (對應 `demo` 分支)**:若需查修測試站問題(例如查看 Error Log 或資料庫),請連線 `ssh gitea_work`。
|
||||
* **Production 環境 (對應 `main` 分支)**:若需查修正式站問題,請連線 `ssh erp`。
|
||||
|
||||
## 11. 瀏覽器測試規範 (Browser Testing)
|
||||
當需要進行瀏覽器自動化測試或手動驗證時,請遵守以下連線資訊:
|
||||
|
||||
* **本地測試網址**:`http://localhost:8081/`
|
||||
* **預設管理員帳號**:`admin`
|
||||
* **預設管理員密碼**:`password`
|
||||
|
||||
> [!IMPORTANT]
|
||||
> 在執行 browser subagent 或進行 E2E 測試時,請務必確認為 `8081` Port,以避免連線至錯誤的服務環境。
|
||||
@@ -266,14 +266,13 @@ export default function WarehouseDialog({
|
||||
{/* 倉庫地址 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="address">
|
||||
倉庫地址 <span className="text-red-500">*</span>
|
||||
倉庫地址
|
||||
</Label>
|
||||
<Input
|
||||
id="address"
|
||||
value={formData.address}
|
||||
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
|
||||
placeholder="例:台北市信義區信義路五段7號"
|
||||
required
|
||||
className="h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -27,22 +27,33 @@ export default function Pagination({ links, className }: PaginationProps) {
|
||||
const isNext = label === "Next";
|
||||
const activeIndex = links.findIndex(l => l.active);
|
||||
|
||||
// Tablet/Mobile visibility logic (< md):
|
||||
// Show: Previous, Next, Active, and up to 2 neighbors (Total ~5 numeric pages)
|
||||
// Hide others on small screens (hidden md:flex)
|
||||
// User requested: "small than 800... display 5 pages"
|
||||
const isVisibleOnTablet =
|
||||
// Responsive visibility logic:
|
||||
// Global: Previous, Next, Active are always visible
|
||||
// Mobile (< sm): Active, +-1, First, Last, and Ellipses
|
||||
// Tablet (sm < md): Active, +-2, First, Last, and Ellipses
|
||||
// Desktop (>= md): All standard pages
|
||||
const isFirst = key === 1;
|
||||
const isLast = key === links.length - 2;
|
||||
const isEllipsis = !isPrevious && !isNext && !link.url;
|
||||
|
||||
const isMobileVisible =
|
||||
isPrevious ||
|
||||
isNext ||
|
||||
link.active ||
|
||||
isFirst ||
|
||||
isLast ||
|
||||
isEllipsis ||
|
||||
key === activeIndex - 1 ||
|
||||
key === activeIndex + 1 ||
|
||||
key === activeIndex + 1;
|
||||
|
||||
const isTabletVisible =
|
||||
isMobileVisible ||
|
||||
key === activeIndex - 2 ||
|
||||
key === activeIndex + 2;
|
||||
|
||||
const baseClasses = cn(
|
||||
isVisibleOnTablet ? "flex" : "hidden md:flex",
|
||||
"h-9 items-center justify-center rounded-md border px-3 text-sm"
|
||||
"h-9 items-center justify-center rounded-md border px-3 text-sm",
|
||||
isMobileVisible ? "flex" : (isTabletVisible ? "hidden sm:flex md:flex" : "hidden md:flex")
|
||||
);
|
||||
|
||||
// 如果是 Previous/Next 但沒有 URL,則不渲染(或者渲染為 disabled)
|
||||
|
||||
@@ -318,10 +318,10 @@ export default function ActivityLogIndex({ activities, filters, subject_types, u
|
||||
from={activities.from}
|
||||
/>
|
||||
|
||||
<div className="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="mt-6 flex flex-wrap items-center justify-between gap-4">
|
||||
<div className="flex flex-wrap items-center justify-center sm:justify-start gap-4 w-full sm:w-auto">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<span>每頁顯示</span>
|
||||
<span className="shrink-0">每頁顯示</span>
|
||||
<SearchableSelect
|
||||
value={perPage}
|
||||
onValueChange={handlePerPageChange}
|
||||
@@ -334,11 +334,11 @@ export default function ActivityLogIndex({ activities, filters, subject_types, u
|
||||
className="w-[100px] h-8"
|
||||
showSearch={false}
|
||||
/>
|
||||
<span>筆</span>
|
||||
<span className="shrink-0">筆</span>
|
||||
</div>
|
||||
<span className="text-sm text-gray-500">共 {activities.total} 筆資料</span>
|
||||
<span className="text-sm text-gray-500 whitespace-nowrap">共 {activities.total} 筆資料</span>
|
||||
</div>
|
||||
<div className="w-full md:w-auto flex justify-center md:justify-end">
|
||||
<div className="w-full sm:w-auto flex justify-center sm:justify-end shrink-0">
|
||||
<Pagination links={activities.links} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,8 +2,9 @@
|
||||
* 生產工單管理主頁面
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { Plus, Factory, Search, Eye, Pencil, Trash2 } from 'lucide-react';
|
||||
import { debounce } from "lodash";
|
||||
import { formatQuantity } from "@/lib/utils";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||||
@@ -77,16 +78,25 @@ export default function ProductionIndex({ productionOrders, filters }: Props) {
|
||||
setPerPage(filters.per_page || productionOrders.per_page?.toString() || "10");
|
||||
}, [filters]);
|
||||
|
||||
const handleFilter = () => {
|
||||
router.get(
|
||||
route('production-orders.index'),
|
||||
{
|
||||
search,
|
||||
status: status === 'all' ? undefined : status,
|
||||
per_page: perPage,
|
||||
},
|
||||
{ preserveState: true, replace: true, preserveScroll: true }
|
||||
const debouncedFilter = useCallback(
|
||||
debounce((params: any) => {
|
||||
router.get(route("production-orders.index"), params, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
preserveScroll: true,
|
||||
});
|
||||
}, 300),
|
||||
[]
|
||||
);
|
||||
|
||||
const handleSearchChange = (term: string) => {
|
||||
setSearch(term);
|
||||
debouncedFilter({
|
||||
...filters,
|
||||
search: term,
|
||||
status: status === "all" ? undefined : status,
|
||||
per_page: perPage,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -129,16 +139,12 @@ export default function ProductionIndex({ productionOrders, filters }: Props) {
|
||||
<Input
|
||||
placeholder="搜尋生產單號、批號、商品名稱..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
onChange={(e) => handleSearchChange(e.target.value)}
|
||||
className="pl-10 pr-10 h-9"
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
|
||||
/>
|
||||
{search && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearch("");
|
||||
router.get(route('production-orders.index'), { ...filters, search: "" }, { preserveState: true, replace: true, preserveScroll: true });
|
||||
}}
|
||||
onClick={() => handleSearchChange("")}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
@@ -172,15 +178,6 @@ export default function ProductionIndex({ productionOrders, filters }: Props) {
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-2 w-full md:w-auto">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="button-outlined-primary"
|
||||
onClick={handleFilter}
|
||||
>
|
||||
<Search className="w-4 h-4 mr-2" />
|
||||
搜尋
|
||||
</Button>
|
||||
|
||||
<Can permission="production_orders.create">
|
||||
<Button
|
||||
onClick={handleNavigateToCreate}
|
||||
|
||||
@@ -2,8 +2,9 @@
|
||||
* 配方管理主頁面
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { Plus, Search, Pencil, Trash2, BookOpen, Eye } from 'lucide-react';
|
||||
import { debounce } from "lodash";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||||
import { Head, router, Link } from "@inertiajs/react";
|
||||
@@ -73,17 +74,25 @@ export default function RecipeIndex({ recipes, filters }: Props) {
|
||||
setPerPage(filters.per_page || "10");
|
||||
}, [filters]);
|
||||
|
||||
const handleFilter = () => {
|
||||
router.get(
|
||||
route('recipes.index'),
|
||||
{
|
||||
search,
|
||||
per_page: perPage,
|
||||
},
|
||||
{ preserveState: true, replace: true, preserveScroll: true }
|
||||
const debouncedFilter = useCallback(
|
||||
debounce((params: any) => {
|
||||
router.get(route("recipes.index"), params, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
preserveScroll: true,
|
||||
});
|
||||
}, 300),
|
||||
[]
|
||||
);
|
||||
};
|
||||
|
||||
const handleSearchChange = (term: string) => {
|
||||
setSearch(term);
|
||||
debouncedFilter({
|
||||
...filters,
|
||||
search: term,
|
||||
per_page: perPage,
|
||||
});
|
||||
};
|
||||
|
||||
const handlePerPageChange = (value: string) => {
|
||||
setPerPage(value);
|
||||
@@ -140,16 +149,12 @@ export default function RecipeIndex({ recipes, filters }: Props) {
|
||||
<Input
|
||||
placeholder="搜尋配方代號、名稱、產品名稱..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
onChange={(e) => handleSearchChange(e.target.value)}
|
||||
className="pl-10 pr-10 h-9"
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleFilter()}
|
||||
/>
|
||||
{search && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearch("");
|
||||
router.get(route('recipes.index'), { ...filters, search: "" }, { preserveState: true, replace: true, preserveScroll: true });
|
||||
}}
|
||||
onClick={() => handleSearchChange("")}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" /> {/* Using Trash2/X as clear icon, need to check imports. Inventory used X. */}
|
||||
@@ -159,15 +164,6 @@ export default function RecipeIndex({ recipes, filters }: Props) {
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-2 w-full md:w-auto">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="button-outlined-primary"
|
||||
onClick={handleFilter}
|
||||
>
|
||||
<Search className="w-4 h-4 mr-2" />
|
||||
搜尋
|
||||
</Button>
|
||||
|
||||
<Can permission="recipes.create">
|
||||
<Link href={route('recipes.create')}>
|
||||
<Button className="button-filled-primary">
|
||||
|
||||
@@ -64,10 +64,6 @@ export const validateWarehouse = (formData: {
|
||||
return { isValid: false, error: "倉庫名稱為必填欄位" };
|
||||
}
|
||||
|
||||
if (!formData.address.trim()) {
|
||||
return { isValid: false, error: "倉庫地址為必填欄位" };
|
||||
}
|
||||
|
||||
return { isValid: true };
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user