#
-
-
-
-
-
-
diff --git a/resources/js/Pages/Admin/ActivityLog/Index.tsx b/resources/js/Pages/Admin/ActivityLog/Index.tsx
index 3c9b052..9769522 100644
--- a/resources/js/Pages/Admin/ActivityLog/Index.tsx
+++ b/resources/js/Pages/Admin/ActivityLog/Index.tsx
@@ -13,7 +13,7 @@ import {
import { Badge } from "@/Components/ui/badge";
import Pagination from '@/Components/shared/Pagination';
import { SearchableSelect } from "@/Components/ui/searchable-select";
-import { FileText, Eye } from 'lucide-react';
+import { FileText, Eye, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
import { format } from 'date-fns';
import { Button } from '@/Components/ui/button';
import ActivityDetailDialog from './ActivityDetailDialog';
@@ -45,6 +45,8 @@ interface Props extends PageProps {
};
filters: {
per_page?: string;
+ sort_by?: string;
+ sort_order?: 'asc' | 'desc';
};
}
@@ -82,11 +84,41 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
setPerPage(value);
router.get(
route('activity-logs.index'),
- { per_page: value },
+ { ...filters, per_page: value },
{ preserveState: false, replace: true, preserveScroll: true }
);
};
+ const handleSort = (field: string) => {
+ let newSortBy: string | undefined = field;
+ let newSortOrder: 'asc' | 'desc' | undefined = 'asc';
+
+ if (filters.sort_by === field) {
+ if (filters.sort_order === 'asc') {
+ newSortOrder = 'desc';
+ } else {
+ newSortBy = undefined;
+ newSortOrder = undefined;
+ }
+ }
+
+ router.get(
+ route('activity-logs.index'),
+ { ...filters, sort_by: newSortBy, sort_order: newSortOrder },
+ { preserveState: true, replace: true }
+ );
+ };
+
+ const SortIcon = ({ field }: { field: string }) => {
+ if (filters.sort_by !== field) {
+ return ;
+ }
+ if (filters.sort_order === "asc") {
+ return ;
+ }
+ return ;
+ };
+
return (
- 時間
+ #
+
+
+
操作人員
動作
對象
@@ -123,8 +163,11 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
{activities.data.length > 0 ? (
- activities.data.map((activity) => (
+ activities.data.map((activity, index) => (
+
+ {activities.from + index}
+
{activity.created_at}
@@ -154,7 +197,8 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
variant="outline"
size="sm"
onClick={() => handleViewDetail(activity)}
- className="button-outlined-info"
+ className="button-outlined-primary"
+ title="檢視詳情"
>
@@ -163,7 +207,7 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
))
) : (
-
+
尚無操作紀錄
diff --git a/resources/js/Pages/Admin/Role/Index.tsx b/resources/js/Pages/Admin/Role/Index.tsx
index 234503d..df0e084 100644
--- a/resources/js/Pages/Admin/Role/Index.tsx
+++ b/resources/js/Pages/Admin/Role/Index.tsx
@@ -1,7 +1,7 @@
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, router } from '@inertiajs/react';
import { cn } from "@/lib/utils";
-import { Shield, Plus, Pencil, Trash2, Users } from 'lucide-react';
+import { Shield, Plus, Pencil, Trash2, Users, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
import { Button } from '@/Components/ui/button';
import { Badge } from '@/Components/ui/badge';
import {
@@ -42,9 +42,13 @@ interface Role {
interface Props {
roles: Role[];
+ filters: {
+ sort_by?: string;
+ sort_order?: 'asc' | 'desc';
+ };
}
-export default function RoleIndex({ roles }: Props) {
+export default function RoleIndex({ roles, filters = {} }: Props) {
const [selectedRole, setSelectedRole] = useState(null);
const handleDelete = (id: number, name: string) => {
@@ -55,6 +59,36 @@ export default function RoleIndex({ roles }: Props) {
}
};
+ const handleSort = (field: string) => {
+ let newSortBy: string | undefined = field;
+ let newSortOrder: 'asc' | 'desc' | undefined = 'asc';
+
+ if (filters.sort_by === field) {
+ if (filters.sort_order === 'asc') {
+ newSortOrder = 'desc';
+ } else {
+ newSortBy = undefined;
+ newSortOrder = undefined;
+ }
+ }
+
+ router.get(
+ route('roles.index'),
+ { ...filters, sort_by: newSortBy, sort_order: newSortOrder },
+ { preserveState: true, replace: true }
+ );
+ };
+
+ const SortIcon = ({ field }: { field: string }) => {
+ if (filters.sort_by !== field) {
+ return ;
+ }
+ if (filters.sort_order === "asc") {
+ return ;
+ }
+ return ;
+ };
+
return (
#
名稱
代號
- 權限數量
- 使用者人數
- 建立時間
+
+
+
+
+
+
+
+
+
操作
diff --git a/resources/js/Pages/Admin/User/Index.tsx b/resources/js/Pages/Admin/User/Index.tsx
index 6ec1be1..52a3ccb 100644
--- a/resources/js/Pages/Admin/User/Index.tsx
+++ b/resources/js/Pages/Admin/User/Index.tsx
@@ -1,7 +1,7 @@
import { useState } from 'react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, router } from '@inertiajs/react';
-import { Users, Plus, Pencil, Trash2, Mail, Shield } from 'lucide-react';
+import { Users, Plus, Pencil, Trash2, Mail, Shield, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
import { Button } from '@/Components/ui/button';
import {
Table,
@@ -47,6 +47,8 @@ interface Props {
};
filters: {
per_page?: string;
+ sort_by?: string;
+ sort_order?: 'asc' | 'desc';
};
}
@@ -66,11 +68,41 @@ export default function UserIndex({ users, filters }: Props) {
setPerPage(value);
router.get(
route('users.index'),
- { per_page: value },
+ { ...filters, per_page: value },
{ preserveState: false, replace: true, preserveScroll: true }
);
};
+ const handleSort = (field: string) => {
+ let newSortBy: string | undefined = field;
+ let newSortOrder: 'asc' | 'desc' | undefined = 'asc';
+
+ if (filters.sort_by === field) {
+ if (filters.sort_order === 'asc') {
+ newSortOrder = 'desc';
+ } else {
+ newSortBy = undefined;
+ newSortOrder = undefined;
+ }
+ }
+
+ router.get(
+ route('users.index'),
+ { ...filters, sort_by: newSortBy, sort_order: newSortOrder },
+ { preserveState: true, replace: true }
+ );
+ };
+
+ const SortIcon = ({ field }: { field: string }) => {
+ if (filters.sort_by !== field) {
+ return