feat(deployments): enhance deployment limit selection with custom input option

- Added a custom input field for setting deployment limits, allowing values between 1 and 500.
- Updated the API schema to support a maximum limit of 500 for deployment queries.
- Improved user experience by enabling a toggle between predefined limits and a custom value.

Author: Siumauricio

apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx

@@ -71,6 +71,7 @@ export const ShowDeployments = ({
 		RouterOutputs["deployment"]["all"][number] | null
 	>(null);
 	const [deploymentLimit, setDeploymentLimit] = useState<number>(10);
+	const [isCustomLimit, setIsCustomLimit] = useState(false);
 	const { data: deployments, isPending: isLoadingDeployments } =
 		api.deployment.allByType.useQuery(
 			{
@@ -169,20 +170,51 @@ export const ShowDeployments = ({
 						<span className="text-sm text-muted-foreground whitespace-nowrap">
 							Show:
 						</span>
-						<Select
-							value={deploymentLimit.toString()}
-							onValueChange={(value) => setDeploymentLimit(Number(value))}
-						>
-							<SelectTrigger className="w-20 h-10">
-								<SelectValue />
-							</SelectTrigger>
-							<SelectContent>
-								<SelectItem value="10">10</SelectItem>
-								<SelectItem value="25">25</SelectItem>
-								<SelectItem value="50">50</SelectItem>
-								<SelectItem value="100">100</SelectItem>
-							</SelectContent>
-						</Select>
+						{isCustomLimit ? (
+							<input
+								type="number"
+								min={1}
+								max={500}
+								value={deploymentLimit}
+								onChange={(e) => {
+									const val = Number(e.target.value);
+									if (val >= 1 && val <= 500) {
+										setDeploymentLimit(val);
+									}
+								}}
+								onBlur={(e) => {
+									if (!e.target.value || Number(e.target.value) < 1) {
+										setDeploymentLimit(10);
+										setIsCustomLimit(false);
+									}
+								}}
+								className="w-20 h-10 rounded-md border border-input bg-background px-3 text-sm"
+							/>
+						) : (
+							<Select
+								value={deploymentLimit.toString()}
+								onValueChange={(value) => {
+									if (value === "custom") {
+										setIsCustomLimit(true);
+									} else {
+										setDeploymentLimit(Number(value));
+									}
+								}}
+							>
+								<SelectTrigger className="w-24 h-10">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectItem value="10">10</SelectItem>
+									<SelectItem value="25">25</SelectItem>
+									<SelectItem value="50">50</SelectItem>
+									<SelectItem value="100">100</SelectItem>
+									<SelectItem value="200">200</SelectItem>
+									<SelectItem value="500">500</SelectItem>
+									<SelectItem value="custom">Custom</SelectItem>
+								</SelectContent>
+							</Select>
+						)}
 					</div>
 					{(type === "application" || type === "compose") && (
 						<ClearDeployments id={id} type={type} />

packages/server/src/db/schema/deployment.ts

@@ -211,17 +211,17 @@ export const apiCreateDeploymentVolumeBackup = schema
 
 export const apiFindAllByApplication = z.object({
 	applicationId: z.string().min(1),
-	limit: z.number().min(1).max(100).optional().default(10),
+	limit: z.number().min(1).max(500).optional().default(10),
 });
 
 export const apiFindAllByCompose = z.object({
 	composeId: z.string().min(1),
-	limit: z.number().min(1).max(100).optional().default(10),
+	limit: z.number().min(1).max(500).optional().default(10),
 });
 
 export const apiFindAllByServer = z.object({
 	serverId: z.string().min(1),
-	limit: z.number().min(1).max(100).optional().default(10),
+	limit: z.number().min(1).max(500).optional().default(10),
 });
 
 export const apiFindAllByType = z.object({
@@ -235,5 +235,5 @@ export const apiFindAllByType = z.object({
 		"backup",
 		"volumeBackup",
 	]),
-	limit: z.number().min(1).max(100).optional().default(10),
+	limit: z.number().min(1).max(500).optional().default(10),
 });