Skip to content

Commit

Permalink
Merge pull request #893 from Shelf-nu/708-wip-improvements-general-im…
Browse files Browse the repository at this point in the history 
…provements-bugs

implementing more fixes
  • Loading branch information
@DonKoko
DonKoko authored Apr 3, 2024
2 parents 044a6b4 + 0e81ad9 commit 936ad3e
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 55 deletions.
1 change: 1 addition & 0 deletions app/components/assets/actions-dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
54 changes: 26 additions & 28 deletions app/components/layout/header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
3 changes: 2 additions & 1 deletion app/components/tag/tags-autocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
35 changes: 22 additions & 13 deletions app/routes/_layout+/bookings.$bookingId.add-assets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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"
Expand All @@ -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);
Expand Down Expand Up @@ -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 */
Expand All @@ -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
Expand Down
33 changes: 20 additions & 13 deletions app/routes/_layout+/locations.$locationId.add-assets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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 */
Expand All @@ -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
Expand Down

0 comments on commit 936ad3e

Please sign in to comment.