aimond/sapiens-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add sorting options for media outlets by name or traffic

Browse Source 
Introduce alphabetical and traffic score sorting for media outlets in both the main content and admin dashboard views, updating the schema to include a trafficScore field.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/jvFIdY3
This commit is contained in:
kimjaehyeon0101
2025-09-29 18:42:29 +00:00
parent 44b00ea7ea
commit 6d81e0281a
5 changed files with 67 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
client/src/pages/AdminDashboard.tsx
View File

@ -6,7 +6,8 @@ import { useAuth } from "@/hooks/useAuth";
import { useEffect, useState } from "react";
import { useToast } from "@/hooks/use-toast";
import { isUnauthorizedError } from "@/lib/authUtils";
import { Search, Settings } from "lucide-react";
import { Search, Settings, ArrowUpDown } from "lucide-react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import type { MediaOutlet } from "@shared/schema";
import MediaOutletManagement from "@/components/MediaOutletManagement";
@ -16,6 +17,7 @@ export default function AdminDashboard() {
const [searchTerm, setSearchTerm] = useState("");
const [selectedOutlet, setSelectedOutlet] = useState<MediaOutlet | null>(null);
const [managingOutlet, setManagingOutlet] = useState<MediaOutlet | null>(null);
const [sortBy, setSortBy] = useState<"alphabetical" | "traffic">("alphabetical");
// Redirect if not authenticated or not admin/superadmin
useEffect(() => {
@ -44,11 +46,20 @@ export default function AdminDashboard() {
},
});
// Filter outlets based on search term
const filteredOutlets = mediaOutlets.filter(outlet =>
outlet.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
(outlet.description && outlet.description.toLowerCase().includes(searchTerm.toLowerCase()))
);
// Filter and sort outlets based on search term and sort option
const filteredOutlets = mediaOutlets
.filter(outlet =>
outlet.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
(outlet.description && outlet.description.toLowerCase().includes(searchTerm.toLowerCase()))
)
.sort((a, b) => {
if (sortBy === "alphabetical") {
return a.name.localeCompare(b.name);
} else {
// Sort by traffic score (descending - highest traffic first)
return (b.trafficScore || 0) - (a.trafficScore || 0);
}
});
const handleLogout = () => {
window.location.href = "/api/logout";
@ -131,9 +142,23 @@ export default function AdminDashboard() {
</header>
<main className="max-w-7xl mx-auto px-4 py-4">
<div className="mb-6">
<h1 className="text-2xl font-bold text-gray-900 mb-2">관리자 대시보드</h1>
<p className="text-gray-600">관리할 언론매체를 검색하고 선택하세요</p>
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-2xl font-bold text-gray-900 mb-2">관리자 대시보드</h1>
<p className="text-gray-600">관리할 언론매체를 검색하고 선택하세요</p>
</div>
<div className="flex items-center space-x-2">
<ArrowUpDown className="h-4 w-4 text-gray-500" />
<Select value={sortBy} onValueChange={(value: "alphabetical" | "traffic") => setSortBy(value)}>
<SelectTrigger className="w-[180px]" data-testid="admin-sort-select">
<SelectValue placeholder="정렬 방식" />
</SelectTrigger>
<SelectContent>
<SelectItem value="alphabetical" data-testid="admin-sort-alphabetical">ABC 순</SelectItem>
<SelectItem value="traffic" data-testid="admin-sort-traffic">트래픽 순</SelectItem>
</SelectContent>
</Select>
</div>
</div>
{outletsLoading ? (