feat: add volume selection functionality to volume backup form

- Introduced a new query to fetch named mounts by application ID, enhancing the volume backup form.
- Updated the form to allow users to select a volume from a dropdown, improving user experience.
- Retained the option for manual input of volume names, ensuring flexibility in volume selection.

apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx

@@ -132,6 +132,11 @@ export const HandleVolumeBackups = ({
 		{ enabled: !!volumeBackupId },
 	);
 
+	const { data: mounts } = api.mounts.allNamedByApplicationId.useQuery(
+		{ applicationId: id || "" },
+		{ enabled: !!id },
+	);
+
 	const {
 		data: services,
 		isFetching: isLoadingServices,
@@ -479,22 +484,61 @@ export const HandleVolumeBackups = ({
 							)}
 						/>
 
-						<FormField
-							control={form.control}
-							name="volumeName"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Volume Name</FormLabel>
-									<FormControl>
-										<Input placeholder="my-volume-name" {...field} />
-									</FormControl>
-									<FormDescription>
-										The name of the Docker volume to backup
-									</FormDescription>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
+						{serviceTypeForm === "application" && (
+							<>
+								<FormField
+									control={form.control}
+									name="volumeName"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Volumes</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												defaultValue={field.value || ""}
+											>
+												<FormControl>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a volume name" />
+													</SelectTrigger>
+												</FormControl>
+												<SelectContent>
+													{mounts?.map((mount) => (
+														<SelectItem
+															key={mount.mountId}
+															value={mount.volumeName || ""}
+														>
+															{mount.volumeName}
+														</SelectItem>
+													))}
+												</SelectContent>
+											</Select>
+											<FormDescription>
+												Choose the volume to backup, if you dont see the volume
+												here, you can type the volume name manually
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="volumeName"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Volume Name</FormLabel>
+											<FormControl>
+												<Input placeholder="my-volume-name" {...field} />
+											</FormControl>
+											<FormDescription>
+												The name of the Docker volume to backup
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</>
+						)}
 
 						<FormField
 							control={form.control}

apps/dokploy/server/api/routers/mount.ts

@@ -3,6 +3,7 @@ import {
 	apiFindOneMount,
 	apiRemoveMount,
 	apiUpdateMount,
+	mounts,
 } from "@/server/db/schema";
 import {
 	createMount,
@@ -11,6 +12,9 @@ import {
 	updateMount,
 } from "@dokploy/server";
 import { createTRPCRouter, protectedProcedure } from "../trpc";
+import { z } from "zod";
+import { and, eq } from "drizzle-orm";
+import { db } from "@dokploy/server/db";
 
 export const mountRouter = createTRPCRouter({
 	create: protectedProcedure
@@ -33,4 +37,14 @@ export const mountRouter = createTRPCRouter({
 		.mutation(async ({ input }) => {
 			return await updateMount(input.mountId, input);
 		}),
+	allNamedByApplicationId: protectedProcedure
+		.input(z.object({ applicationId: z.string().min(1) }))
+		.query(async ({ input }) => {
+			return await db.query.mounts.findMany({
+				where: and(
+					eq(mounts.applicationId, input.applicationId),
+					eq(mounts.type, "volume"),
+				),
+			});
+		}),
 });