Added more to admin

convex/portfolios.ts

@@ -30,7 +30,11 @@ export const getPortfolios = query({
 
 export const getAllPortfolios = query({
   handler: async (ctx) => {
-    return await ctx.db.query('portfolios').collect();
+    return await ctx.db
+      .query('portfolios')
+      .withIndex('by_name')
+      .order('asc')
+      .collect();
   },
 });
 
@@ -171,3 +175,21 @@ export const deletePortfolioImage = mutation({
     await ctx.storage.delete(args.storageId);
   },
 });
+
+export const delelePortfolio = mutation({
+  args: {
+    portfolioId: v.id('portfolios'),
+    portfolioImageId: v.id('_storage'),
+  },
+
+  handler: async (ctx, args) => {
+    const portfolio = await ctx.db.get(args.portfolioId);
+
+    if (!portfolio) {
+      throw new ConvexError('Portfolio not found');
+    }
+
+    await ctx.db.delete(portfolio._id);
+    await ctx.storage.delete(args.portfolioImageId);
+  },
+});

src/app/(authenticated)/(main)/admin/_components/delete-portfolio-form.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import React from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { api } from '@/convex/_generated/api';
+import { Id } from '@/convex/_generated/dataModel';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from 'convex/react';
+import { Loader2 } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const deletePortfolioFormSchema = z.object({
+  portfolioId: z.string(),
+});
+
+export default function DeletePortfolioForm({
+  setOpen,
+  portfolioId,
+  portfolioImageId,
+}: {
+  setOpen: any;
+  portfolioId: Id<'portfolios'>;
+  portfolioImageId: Id<'_storage'>;
+}) {
+  const form = useForm<z.infer<typeof deletePortfolioFormSchema>>({
+    resolver: zodResolver(deletePortfolioFormSchema),
+    defaultValues: { portfolioId: portfolioId },
+  });
+  const isLoading = form.formState.isSubmitting;
+  const delelePortfolio = useMutation(api.portfolios.delelePortfolio);
+
+  const onSubmit = async () => {
+    try {
+      await delelePortfolio({ portfolioId, portfolioImageId });
+      setOpen(false);
+      toast.success('Deleted successfully!');
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="w-full flex justify-center space-x-6">
+          <Button
+            size="lg"
+            variant="outline"
+            disabled={isLoading}
+            className="w-full"
+            type="button"
+            onClick={() => setOpen(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            size="lg"
+            type="submit"
+            disabled={isLoading}
+            className="w-full bg-red-500 hover:bg-red-400"
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Deleting
+              </>
+            ) : (
+              <span>Delete</span>
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}

src/app/(authenticated)/(main)/admin/page.tsx

@@ -17,8 +17,10 @@ import {
 import { api } from '@/convex/_generated/api';
 import { cn } from '@/lib/utils';
 import { useQuery } from 'convex/react';
+import { set } from 'date-fns';
 
 import AddPortfolioForm from './_components/add-portfolio-form';
+import DeletePortfolioForm from './_components/delete-portfolio-form';
 import DeleteSubmissionForm from './_components/delete-submission-form';
 import EditPortfolioForm from './_components/edit-portfolio-form';
 
@@ -28,7 +30,8 @@ export default function Admin() {
   const portfolios = useQuery(api.portfolios.getAllPortfolios);
   const [isAddPortfolio, setIsAddPortfolio] = useState(false);
   const [isEditOpen, setIsEditOpen] = useState(false);
-  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [isDeleteSubmissionOpen, setIsDeleteSubmissionOpen] = useState(false);
+  const [isDeletePortfolioOpen, setIsDeletePortfolioOpen] = useState(false);
   const user = useQuery(api.users.getMyUser);
 
   if (user?.isAdmin !== true) {
@@ -99,7 +102,7 @@ export default function Admin() {
                           variant="destructive"
                           onClick={() => {
                             setItem(submission);
-                            setIsDeleteOpen(true);
+                            setIsDeleteSubmissionOpen(true);
                           }}
                         >
                           Delete
@@ -153,6 +156,16 @@ export default function Admin() {
                       >
                         Update
                       </Button>
+                      <Button
+                        size="sm"
+                        variant="destructive"
+                        onClick={() => {
+                          setItem(portfolio);
+                          setIsDeletePortfolioOpen(true);
+                        }}
+                      >
+                        Delete
+                      </Button>
                     </div>
                   </div>
                 </Card>
@@ -173,18 +186,38 @@ export default function Admin() {
       </Dialog>
 
       {/* Delete Submission Form */}
-      <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
+      <Dialog
+        open={isDeleteSubmissionOpen}
+        onOpenChange={setIsDeleteSubmissionOpen}
+      >
         <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>Delete submission</DialogTitle>
           </DialogHeader>
           <DeleteSubmissionForm
-            setOpen={setIsDeleteOpen}
+            setOpen={setIsDeleteSubmissionOpen}
             submissionId={item?._id}
           />
         </DialogContent>
       </Dialog>
 
+      {/* Delete Portfolio Form */}
+      <Dialog
+        open={isDeletePortfolioOpen}
+        onOpenChange={setIsDeletePortfolioOpen}
+      >
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Delete portfolio</DialogTitle>
+          </DialogHeader>
+          <DeletePortfolioForm
+            setOpen={setIsDeletePortfolioOpen}
+            portfolioId={item?._id}
+            portfolioImageId={item?.image}
+          />
+        </DialogContent>
+      </Dialog>
+
       {/* Edit Portfolio Form */}
       <Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
         <DialogContent className="sm:max-w-[425px]">