Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1437 from Dokploy/700-reorganize-services-order

Browse Source 
700 reorganize services order
This commit is contained in:
Mauricio Siu 2025-03-08 18:50:26 -06:00 committed by GitHub
commit 85734c0a24
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 55 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
apps/dokploy/pages/dashboard/project/[projectId].tsx
View File

@ -73,7 +73,7 @@ import type {
} from "next";
import Head from "next/head";
import { useRouter } from "next/router";
import { type ReactElement, useMemo, useState } from "react";
import { type ReactElement, useMemo, useState, useEffect } from "react";
import { toast } from "sonner";
import superjson from "superjson";
import {
@ -220,6 +220,38 @@ const Project = (
const [isBulkActionLoading, setIsBulkActionLoading] = useState(false);
const { projectId } = props;
const { data: auth } = api.user.get.useQuery();
const [sortBy, setSortBy] = useState<string>(() => {
if (typeof window !== "undefined") {
return localStorage.getItem("servicesSort") || "createdAt-desc";
}
return "createdAt-desc";
});
useEffect(() => {
localStorage.setItem("servicesSort", sortBy);
}, [sortBy]);
const sortServices = (services: Services[]) => {
const [field, direction] = sortBy.split("-");
return [...services].sort((a, b) => {
let comparison = 0;
switch (field) {
case "name":
comparison = a.name.localeCompare(b.name);
break;
case "type":
comparison = a.type.localeCompare(b.type);
break;
case "createdAt":
comparison =
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
break;
default:
comparison = 0;
}
return direction === "asc" ? comparison : -comparison;
});
};
const { data, isLoading, refetch } = api.project.one.useQuery({ projectId });
const { data: allProjects } = api.project.all.useQuery();
@ -488,7 +520,7 @@ const Project = (
const filteredServices = useMemo(() => {
if (!applications) return [];
return applications.filter(
const filtered = applications.filter(
(service) =>
(service.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
service.description
@ -496,7 +528,8 @@ const Project = (
.includes(searchQuery.toLowerCase())) &&
(selectedTypes.length === 0 || selectedTypes.includes(service.type)),
);
}, [applications, searchQuery, selectedTypes]);
return sortServices(filtered);
}, [applications, searchQuery, selectedTypes, sortBy]);
return (
<div>
@ -570,7 +603,7 @@ const Project = (
</div>
) : (
<>
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<Checkbox
@ -731,7 +764,7 @@ const Project = (
</DropdownMenu>
</div>
<div className="flex flex-col gap-2 sm:flex-row sm:gap-4 sm:items-center">
<div className="flex flex-col gap-2 lg:flex-row lg:gap-4 lg:items-center">
<div className="w-full relative">
<Input
placeholder="Filter services..."
@ -741,6 +774,23 @@ const Project = (
/>
<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
</div>
<Select value={sortBy} onValueChange={setSortBy}>
<SelectTrigger className="lg:w-[280px]">
<SelectValue placeholder="Sort by..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="createdAt-desc">
Newest first
</SelectItem>
<SelectItem value="createdAt-asc">
Oldest first
</SelectItem>
<SelectItem value="name-asc">Name (A-Z)</SelectItem>
<SelectItem value="name-desc">Name (Z-A)</SelectItem>
<SelectItem value="type-asc">Type (A-Z)</SelectItem>
<SelectItem value="type-desc">Type (Z-A)</SelectItem>
</SelectContent>
</Select>
<Popover
open={openCombobox}
onOpenChange={setOpenCombobox}