Skip to content

Commit

Permalink
Merge pull request #256 from Shelf-nu/custodies
Browse files Browse the repository at this point in the history
Custodies
  • Loading branch information
DonKoko authored Jul 25, 2023
2 parents 120dfbb + 0dadcfc commit 46d01a2
Show file tree
Hide file tree
Showing 40 changed files with 1,575 additions and 88 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ node_modules

# OS
.DS_Store
/test-results/
test-results/

/playwright-report/
/playwright/.cache/
/playwright-report/*
83 changes: 54 additions & 29 deletions app/components/assets/actions-dropdown.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import type { Asset } from "@prisma/client";

import { ChevronRight } from "~/components/icons";
import {
DropdownMenu,
Expand All @@ -14,35 +13,61 @@ interface Props {
asset: {
title: Asset["title"];
mainImage: Asset["mainImage"];
status: Asset["status"];
};
}

export const ActionsDopdown = ({ asset }: Props) => (
<DropdownMenu modal={false}>
<DropdownMenuTrigger className="asset-actions">
<Button variant="secondary" to="#" data-test-id="assetActionsButton">
<span className="flex items-center gap-2">
Actions <ChevronRight className="chev" />
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="order w-[180px] rounded-md bg-white p-1.5 text-right "
>
<DropdownMenuItem>
<Button
to="edit"
icon="pen"
role="link"
variant="link"
className="justify-start text-gray-700 hover:text-gray-700"
width="full"
>
Edit
export const ActionsDopdown = ({ asset }: Props) => {
const assetIsAvailable = asset.status === "AVAILABLE";
return (
<DropdownMenu modal={false}>
<DropdownMenuTrigger className="asset-actions">
<Button variant="secondary" to="#" data-test-id="assetActionsButton">
<span className="flex items-center gap-2">
Actions <ChevronRight className="chev" />
</span>
</Button>
</DropdownMenuItem>
<DeleteAsset asset={asset} />
</DropdownMenuContent>
</DropdownMenu>
);
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="order w-[180px] rounded-md bg-white p-0 text-right "
>
<DropdownMenuItem className="border-b px-6 py-3">
{!assetIsAvailable ? (
<Button
to="release-custody"
role="link"
variant="link"
className="justify-start text-gray-700 hover:text-gray-700"
width="full"
>
Release Custody
</Button>
) : (
<Button
to="give-custody"
role="link"
variant="link"
className="justify-start text-gray-700 hover:text-gray-700"
width="full"
>
Give Custody
</Button>
)}
</DropdownMenuItem>
<DropdownMenuItem className="px-6 py-3">
<Button
to="edit"
role="link"
variant="link"
className="justify-start text-gray-700 hover:text-gray-700"
width="full"
>
Edit
</Button>
</DropdownMenuItem>
<DeleteAsset asset={asset} />
</DropdownMenuContent>
</DropdownMenu>
);
};
3 changes: 1 addition & 2 deletions app/components/assets/delete-asset.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@ export const DeleteAsset = ({
<Button
variant="link"
data-test-id="deleteAssetButton"
icon="trash"
className="justify-start rounded-sm px-2 py-1.5 text-sm font-medium text-gray-700 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-slate-100 hover:text-gray-700"
className="justify-start rounded-sm px-6 py-3 text-sm font-semibold text-gray-700 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-slate-100 hover:text-gray-700"
width="full"
>
Delete
Expand Down
55 changes: 55 additions & 0 deletions app/components/custody/custodian-select.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { useLoaderData } from "@remix-run/react";
import type { loader } from "~/routes/_layout+/assets.$assetId.give-custody";
import {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectItem,
} from "../forms";
import { UserIcon } from "../icons";
import { Button } from "../shared";

export default function CustodianSelect() {
const { teamMembers } = useLoaderData<typeof loader>();
return (
<div className="relative w-full">
<Select name="custodian">
<SelectTrigger>
<SelectValue placeholder="Select a team member" />
</SelectTrigger>

<div>
<SelectContent className="w-[352px]" position="popper" align="start">
{teamMembers.length > 0 ? (
<div className=" max-h-[320px] overflow-auto">
{teamMembers.map((member) => (
<SelectItem
key={member.id}
value={JSON.stringify({ id: member.id, name: member.name })}
>
<div className="flex items-center gap-3 py-3.5">
<i>
<UserIcon />
</i>
<span className=" flex-1 font-medium text-gray-900">
{member.name}
</span>
</div>
</SelectItem>
))}
</div>
) : (
<div>
No team members found.{" "}
<Button to={"/settings/workspace"} variant="link">
Create team members
</Button>
</div>
)}
</SelectContent>
</div>
</Select>
</div>
);
}
46 changes: 42 additions & 4 deletions app/components/icons/library.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -571,27 +571,27 @@ export function VerticalDotsIcon(props: SVGProps<SVGSVGElement>) {
width="4"
height="16"
viewBox="0 0 4 16"
fill="none"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M2 8.83334C2.46024 8.83334 2.83334 8.46025 2.83334 8.00001C2.83334 7.53977 2.46024 7.16668 2 7.16668C1.53977 7.16668 1.16667 7.53977 1.16667 8.00001C1.16667 8.46025 1.53977 8.83334 2 8.83334Z"
stroke="#F2F4F7"
stroke="currentColor"
strokeWidth="1.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2 3.00001C2.46024 3.00001 2.83334 2.62691 2.83334 2.16668C2.83334 1.70644 2.46024 1.33334 2 1.33334C1.53977 1.33334 1.16667 1.70644 1.16667 2.16668C1.16667 2.62691 1.53977 3.00001 2 3.00001Z"
stroke="#F2F4F7"
stroke="currentColor"
strokeWidth="1.66667"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2 14.6667C2.46024 14.6667 2.83334 14.2936 2.83334 13.8333C2.83334 13.3731 2.46024 13 2 13C1.53977 13 1.16667 13.3731 1.16667 13.8333C1.16667 14.2936 1.53977 14.6667 2 14.6667Z"
stroke="#F2F4F7"
stroke="currentColor"
strokeWidth="1.66667"
strokeLinecap="round"
strokeLinejoin="round"
Expand Down Expand Up @@ -799,3 +799,41 @@ export const LocationMarkerIcon = (props: SVGProps<SVGSVGElement>) => (
/>
</svg>
);

export const UserIcon = (props: SVGProps<SVGSVGElement>) => (
<svg
width="18"
height="20"
viewBox="0 0 18 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M17 19C17 17.6044 17 16.9067 16.8278 16.3389C16.44 15.0605 15.4395 14.06 14.1611 13.6722C13.5933 13.5 12.8956 13.5 11.5 13.5H6.5C5.10444 13.5 4.40665 13.5 3.83886 13.6722C2.56045 14.06 1.56004 15.0605 1.17224 16.3389C1 16.9067 1 17.6044 1 19M13.5 5.5C13.5 7.98528 11.4853 10 9 10C6.51472 10 4.5 7.98528 4.5 5.5C4.5 3.01472 6.51472 1 9 1C11.4853 1 13.5 3.01472 13.5 5.5Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

export const UserXIcon = (props: SVGProps<SVGSVGElement>) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M16.5 16L21.5 21M21.5 16L16.5 21M12 15.5H7.5C6.10444 15.5 5.40665 15.5 4.83886 15.6722C3.56045 16.06 2.56004 17.0605 2.17224 18.3389C2 18.9067 2 19.6044 2 21M14.5 7.5C14.5 9.98528 12.4853 12 10 12C7.51472 12 5.5 9.98528 5.5 7.5C5.5 5.01472 7.51472 3 10 3C12.4853 3 14.5 5.01472 14.5 7.5Z"
stroke="#101828"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
8 changes: 7 additions & 1 deletion app/components/layout/header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ import type { HeaderData } from "./types";
export default function Header({
title = null,
children,
subHeading,
}: {
/** Pass a title to replace the default route title set in the loader
* This is very useful for interactive adjustments of the title
*/
title?: string | null;
children?: React.ReactNode;
subHeading?: React.ReactNode;
}) {
const data = useLoaderData();
const header = data?.header as HeaderData;
Expand All @@ -27,7 +29,11 @@ export default function Header({
>
{title || header?.title}
</Heading>
{header?.subHeading && <SubHeading>{header.subHeading}</SubHeading>}
{subHeading ? (
<SubHeading>{subHeading}</SubHeading>
) : (
header?.subHeading && <SubHeading>{header.subHeading}</SubHeading>
)}
</div>

<div className="flex shrink-0 gap-3">{children}</div>
Expand Down
30 changes: 30 additions & 0 deletions app/components/workspace/actions-dropdown.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { VerticalDotsIcon } from "~/components/icons";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuTrigger,
} from "~/components/shared/dropdown";
import type { TeamMemberWithCustodies } from "~/routes/_layout+/settings.workspace";
import { DeleteMember } from "./delete-member";

export function ActionsDropdown({
teamMember,
}: {
teamMember: TeamMemberWithCustodies;
}) {
return (
<DropdownMenu modal={false}>
<DropdownMenuTrigger className="outline-none focus-visible:border-0">
<i className="inline-block px-3 py-0 text-gray-400 ">
<VerticalDotsIcon />
</i>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="order w-[180px] rounded-md bg-white p-0 text-right "
>
<DeleteMember teamMember={teamMember} />
</DropdownMenuContent>
</DropdownMenu>
);
}
Loading

0 comments on commit 46d01a2

Please sign in to comment.