From 0e81ad9c61f9adf09cf19b5446b426ef1f4d117e Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Wed, 3 Apr 2024 18:17:19 +0300
Subject: [PATCH] implementing more fixes - Added tags to asset form dont clear
 on view revalidation - fixed headers in add-assets modals for booking and
 location - completely fixed add-assets modals' design to be consistent and
 cleaner - fixed button inside button on asset actions-dropdown

---
 app/components/assets/actions-dropdown.tsx    |  1 +
 app/components/layout/header/index.tsx        | 54 +++++++++----------
 app/components/tag/tags-autocomplete.tsx      |  3 +-
 .../bookings.$bookingId.add-assets.tsx        | 35 +++++++-----
 .../locations.$locationId.add-assets.tsx      | 33 +++++++-----
 5 files changed, 71 insertions(+), 55 deletions(-)

diff --git a/app/components/assets/actions-dropdown.tsx b/app/components/assets/actions-dropdown.tsx
index a0178bac2..dbf0a5c75 100644
--- a/app/components/assets/actions-dropdown.tsx
+++ b/app/components/assets/actions-dropdown.tsx
@@ -57,6 +57,7 @@ const ConditionalActionsDropdown = () => {
         <DropdownMenuTrigger
           className="asset-actions hidden sm:flex"
           onClick={() => setOpen(!open)}
+          asChild
         >
           <Button variant="secondary" data-test-id="assetActionsButton">
             <span className="flex items-center gap-2">
diff --git a/app/components/layout/header/index.tsx b/app/components/layout/header/index.tsx
index 7255be75f..18e6f13dd 100644
--- a/app/components/layout/header/index.tsx
+++ b/app/components/layout/header/index.tsx
@@ -31,37 +31,35 @@ export default function Header({
 
   return header ? (
     <header className={tw("-mx-4 bg-white", classNames)}>
-      <div>
-        {!hideBreadcrumbs && (
-          <>
-            <div className="flex w-full items-center justify-between border-b border-gray-200 px-4 py-2 md:min-h-[67px] md:py-3">
-              <Breadcrumbs />
-              {children && (
-                <div className="hidden shrink-0 gap-3 md:flex">{children}</div>
-              )}
-            </div>
+      {!hideBreadcrumbs && (
+        <>
+          <div className="flex w-full items-center justify-between border-b border-gray-200 px-4 py-2 md:min-h-[67px] md:py-3">
+            <Breadcrumbs />
             {children && (
-              <div className="flex w-full items-center justify-between border-b border-gray-200 px-4 py-2 md:hidden">
-                <div className="header-buttons flex flex-1 shrink-0 gap-3">
-                  {children}
-                </div>
-              </div>
-            )}
-          </>
-        )}
-        {!hidePageDescription && (
-          <div className="border-b border-gray-200 p-4">
-            <Heading as="h2" className="break-all text-[20px] font-semibold">
-              {title || header?.title}
-            </Heading>
-            {subHeading ? (
-              <SubHeading>{subHeading}</SubHeading>
-            ) : (
-              header?.subHeading && <SubHeading>{header.subHeading}</SubHeading>
+              <div className="hidden shrink-0 gap-3 md:flex">{children}</div>
             )}
           </div>
-        )}
-      </div>
+          {children && (
+            <div className="flex w-full items-center justify-between border-b border-gray-200 px-4 py-2 md:hidden">
+              <div className="header-buttons flex flex-1 shrink-0 gap-3">
+                {children}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+      {!hidePageDescription && (
+        <div className="border-b border-gray-200 p-4">
+          <Heading as="h2" className="break-all text-[20px] font-semibold">
+            {title || header?.title}
+          </Heading>
+          {subHeading ? (
+            <SubHeading>{subHeading}</SubHeading>
+          ) : (
+            header?.subHeading && <SubHeading>{header.subHeading}</SubHeading>
+          )}
+        </div>
+      )}
     </header>
   ) : null;
 }
diff --git a/app/components/tag/tags-autocomplete.tsx b/app/components/tag/tags-autocomplete.tsx
index def41f7b9..30878c8b5 100644
--- a/app/components/tag/tags-autocomplete.tsx
+++ b/app/components/tag/tags-autocomplete.tsx
@@ -25,7 +25,8 @@ export const TagsAutocomplete = ({ existingTags }: { existingTags: Tag[] }) => {
   const [selected, setSelected] = useState<Tag[]>([]);
 
   useEffect(() => {
-    setSelected(() => [...existingTags]);
+    if (existingTags && existingTags.length > 0)
+      setSelected(() => [...existingTags]);
   }, [existingTags]);
 
   const onAdd = useCallback(
diff --git a/app/routes/_layout+/bookings.$bookingId.add-assets.tsx b/app/routes/_layout+/bookings.$bookingId.add-assets.tsx
index 9645d9fdb..fa2c50c0d 100644
--- a/app/routes/_layout+/bookings.$bookingId.add-assets.tsx
+++ b/app/routes/_layout+/bookings.$bookingId.add-assets.tsx
@@ -21,6 +21,7 @@ import { AvailabilitySelect } from "~/components/booking/availability-select";
 import styles from "~/components/booking/styles.css";
 import { FakeCheckbox } from "~/components/forms/fake-checkbox";
 import Input from "~/components/forms/input";
+import Header from "~/components/layout/header";
 import { List } from "~/components/list";
 import { Button } from "~/components/shared";
 
@@ -81,6 +82,10 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
 
     return json(
       data({
+        header: {
+          title: `Manage assets for ‘${booking?.name}’`,
+          subHeading: "Fill up the booking with the assets of your choice",
+        },
         showModal: true,
         noScroll: true,
         booking,
@@ -172,7 +177,7 @@ export async function action({ context, request, params }: ActionFunctionArgs) {
 }
 
 export default function AddAssetsToNewBooking() {
-  const { booking, search } = useLoaderData<typeof loader>();
+  const { booking, search, header } = useLoaderData<typeof loader>();
   const [_searchParams, setSearchParams] = useSearchParams();
   const navigation = useNavigation();
   const isSearching = isFormProcessing(navigation.state);
@@ -215,14 +220,15 @@ export default function AddAssetsToNewBooking() {
   }, [booking.id]);
 
   return (
-    <div className="flex max-h-full flex-col">
-      <header className="mb-3">
-        <h2>Add assets to ‘{booking?.name}’ booking</h2>
-        <p>Fill up the booking with the assets of your choice</p>
-      </header>
+    <div className="flex max-h-full flex-col ">
+      <Header
+        {...header}
+        hideBreadcrumbs={true}
+        classNames="text-left mb-3 -mx-6 [&>div]:px-6 -mt-6"
+      />
 
-      <div className="flex justify-between">
-        <div className="flex w-1/2">
+      <div className="-mx-6 justify-between border-b px-6 pb-4 md:flex">
+        <div className="flex md:w-1/2">
           <div className="relative flex-1">
             <Input
               type="text"
@@ -233,7 +239,7 @@ export default function AddAssetsToNewBooking() {
               defaultValue={search || ""}
               hideLabel={true}
               hasAttachedButton
-              className=" h-full flex-1"
+              className=" h-full flex-1 [&>span]:hidden"
               inputClassName="pr-9"
               onKeyUp={(e) => {
                 setSearchValue(e.currentTarget.value);
@@ -268,13 +274,13 @@ export default function AddAssetsToNewBooking() {
           />
         </div>
 
-        <div className="w-[200px]">
+        <div className="mt-3 md:mt-0 md:w-[200px]">
           <AvailabilitySelect />
         </div>
       </div>
 
       {/* Body of the modal*/}
-      <div className="mt-4 flex-1 overflow-y-auto pb-4">
+      <div className="-mx-6 flex-1 overflow-y-auto px-5 md:px-0">
         <List
           ItemComponent={RowComponent}
           /** Clicking on the row will add the current asset to the atom of selected assets */
@@ -291,12 +297,15 @@ export default function AddAssetsToNewBooking() {
             newButtonRoute: "/assets/new",
             newButtonContent: "New asset",
           }}
+          className="-mx-5 border-0"
         />
       </div>
 
       {/* Footer of the modal */}
-      <footer className="flex justify-between border-t pt-3">
-        <div>{selectedAssets.length} assets selected</div>
+      <footer className="item-center -mx-6 flex justify-between border-t px-6 pt-3">
+        <div className="flex items-center">
+          {selectedAssets.length} assets selected
+        </div>
         <div className="flex gap-3">
           <Button variant="secondary" to={".."}>
             Close
diff --git a/app/routes/_layout+/locations.$locationId.add-assets.tsx b/app/routes/_layout+/locations.$locationId.add-assets.tsx
index 6ff5bf250..b5d4c38b3 100644
--- a/app/routes/_layout+/locations.$locationId.add-assets.tsx
+++ b/app/routes/_layout+/locations.$locationId.add-assets.tsx
@@ -8,6 +8,7 @@ import { z } from "zod";
 import { locationsSelectedAssetsAtom } from "~/atoms/selected-assets-atoms";
 import { AssetImage } from "~/components/assets/asset-image";
 import { FakeCheckbox } from "~/components/forms/fake-checkbox";
+import Header from "~/components/layout/header";
 import { List, Filters } from "~/components/list";
 import { Button } from "~/components/shared";
 import { Td } from "~/components/table";
@@ -89,6 +90,11 @@ export async function loader({ context, request, params }: LoaderFunctionArgs) {
 
     return json(
       data({
+        header: {
+          title: `Move assets to ‘${location?.name}’ location`,
+          subHeading:
+            "Search your database for assets that you would like to move to this location.",
+        },
         showModal: true,
         noScroll: true,
         items: assets,
@@ -270,7 +276,7 @@ export async function action({ context, request, params }: ActionFunctionArgs) {
 }
 
 export default function AddAssetsToLocation() {
-  const { location } = useLoaderData<typeof loader>();
+  const { location, header } = useLoaderData<typeof loader>();
   const navigation = useNavigation();
   const isSearching = isFormProcessing(navigation.state);
 
@@ -299,18 +305,16 @@ export default function AddAssetsToLocation() {
 
   return (
     <div className="flex max-h-full flex-col">
-      <header className="mb-5">
-        <h2>Move assets to ‘{location?.name}’ location</h2>
-        <p>
-          Search your database for assets that you would like to move to this
-          location.
-        </p>
-      </header>
+      <Header
+        {...header}
+        hideBreadcrumbs={true}
+        classNames="text-left mb-3 -mx-6 [&>div]:px-6 -mt-6"
+      />
 
-      <div>
-        <Filters className="mb-2" />
+      <div className="-mx-6 border-b px-6 md:pb-3">
+        <Filters className="md:border-0 md:p-0" />
       </div>
-      <div className="mt-4 flex-1 overflow-y-auto pb-4">
+      <div className="-mx-6 flex-1 overflow-y-auto px-5 md:px-0">
         <List
           ItemComponent={RowComponent}
           /** Clicking on the row will add the current asset to the atom of selected assets */
@@ -327,11 +331,14 @@ export default function AddAssetsToLocation() {
             newButtonRoute: "/assets/new",
             newButtonContent: "New asset",
           }}
+          className="-mx-5 border-0"
         />
       </div>
       {/* Footer of the modal */}
-      <footer className="flex justify-between border-t pt-3">
-        <div>{selectedAssets.length} assets selected</div>
+      <footer className="item-center -mx-6 flex justify-between border-t px-6 pt-3">
+        <div className="flex items-center">
+          {selectedAssets.length} assets selected
+        </div>
         <div className="flex gap-3">
           <Button variant="secondary" to={".."}>
             Close