Merge pull request #1572 from rockingrohit9639/fix/cancel-on-asset-edit

fix(cancel-button): update cancel button behavior on asset edit page
Shelf-nu · Jan 14, 2025 · 888c1a7 · 888c1a7
2 parents 4e4f7c6 + c9932bc
commit 888c1a7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/app/components/assets/form.tsx b/app/components/assets/form.tsx
@@ -4,6 +4,7 @@ import {
   useActionData,
   useLoaderData,
   useNavigation,
+  useParams,
 } from "@remix-run/react";
 import { useAtom, useAtomValue } from "jotai";
 import type { Tag } from "react-tag-autocomplete";
@@ -420,20 +421,28 @@ export const AssetForm = ({
   );
 };
 
-const Actions = ({ disabled }: { disabled: boolean }) => (
-  <>
-    <ButtonGroup>
-      <Button to=".." variant="secondary" disabled={disabled}>
-        Cancel
-      </Button>
-      <AddAnother disabled={disabled} />
-    </ButtonGroup>
+const Actions = ({ disabled }: { disabled: boolean }) => {
+  const { assetId } = useParams<{ assetId?: string }>();
 
-    <Button type="submit" disabled={disabled}>
-      Save
-    </Button>
-  </>
-);
+  return (
+    <>
+      <ButtonGroup>
+        <Button
+          to={assetId ? `/assets/${assetId}/overview` : ".."}
+          variant="secondary"
+          disabled={disabled}
+        >
+          Cancel
+        </Button>
+        <AddAnother disabled={disabled} />
+      </ButtonGroup>
+
+      <Button type="submit" disabled={disabled}>
+        Save
+      </Button>
+    </>
+  );
+};
 
 const AddAnother = ({ disabled }: { disabled: boolean }) => (
   <TooltipProvider delayDuration={100}>

diff --git a/app/routes/_layout+/assets.$assetId_.edit.tsx b/app/routes/_layout+/assets.$assetId_.edit.tsx
@@ -227,7 +227,7 @@ export default function AssetEditPage() {
   );
 
   return (
-    <>
+    <div className="relative">
       <Header title={hasTitle ? title : asset.title} />
       <div className=" items-top flex justify-between">
         <AssetForm
@@ -242,6 +242,6 @@ export default function AssetEditPage() {
           tags={tags}
         />
       </div>
-    </>
+    </div>
   );
 }
diff --git a/app/routes/_layout+/assets.new.tsx b/app/routes/_layout+/assets.new.tsx
@@ -227,12 +227,13 @@ export default function NewAssetPage() {
 
   // Get category from URL params or use the default passed prop
   const categoryFromUrl = searchParams.get("category");
+
   return (
-    <>
+    <div className="relative">
       <Header title={title ? title : "Untitled Asset"} />
       <div>
         <AssetForm qrId={qrId} category={categoryFromUrl || undefined} />
       </div>
-    </>
+    </div>
   );
 }