feat: dynamic arrow direction for card list movement based on index
This commit is contained in:
@@ -249,11 +249,13 @@ export const getWithListAndMembersByPublicId = async (
|
|||||||
toDescription,
|
toDescription,
|
||||||
fromList:list!card_activity_fromListId_list_id_fk (
|
fromList:list!card_activity_fromListId_list_id_fk (
|
||||||
publicId,
|
publicId,
|
||||||
name
|
name,
|
||||||
|
index
|
||||||
),
|
),
|
||||||
toList:list!card_activity_toListId_list_id_fk (
|
toList:list!card_activity_toListId_list_id_fk (
|
||||||
publicId,
|
publicId,
|
||||||
name
|
name,
|
||||||
|
index
|
||||||
),
|
),
|
||||||
label!card_activity_labelId_label_id_fk (
|
label!card_activity_labelId_label_id_fk (
|
||||||
publicId,
|
publicId,
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import {
|
|||||||
HiOutlineUserMinus,
|
HiOutlineUserMinus,
|
||||||
HiOutlineArrowRight,
|
HiOutlineArrowRight,
|
||||||
HiOutlinePlus,
|
HiOutlinePlus,
|
||||||
|
HiOutlineArrowLeft,
|
||||||
} from "react-icons/hi2";
|
} from "react-icons/hi2";
|
||||||
|
|
||||||
import Avatar from "~/components/Avatar";
|
import Avatar from "~/components/Avatar";
|
||||||
@@ -114,14 +115,25 @@ const ACTIVITY_ICON_MAP: Partial<Record<ActivityType, React.ReactNode | null>> =
|
|||||||
"card.created": <HiOutlinePlus />,
|
"card.created": <HiOutlinePlus />,
|
||||||
"card.updated.title": <HiOutlinePencil />,
|
"card.updated.title": <HiOutlinePencil />,
|
||||||
"card.updated.description": <HiOutlinePencil />,
|
"card.updated.description": <HiOutlinePencil />,
|
||||||
"card.updated.list": <HiOutlineArrowRight />,
|
|
||||||
"card.updated.label.added": <HiOutlineTag />,
|
"card.updated.label.added": <HiOutlineTag />,
|
||||||
"card.updated.label.removed": <HiOutlineTag />,
|
"card.updated.label.removed": <HiOutlineTag />,
|
||||||
"card.updated.member.added": <HiOutlineUserPlus />,
|
"card.updated.member.added": <HiOutlineUserPlus />,
|
||||||
"card.updated.member.removed": <HiOutlineUserMinus />,
|
"card.updated.member.removed": <HiOutlineUserMinus />,
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
const getActivityIcon = (type: ActivityType): React.ReactNode | null => {
|
const getActivityIcon = (
|
||||||
|
type: ActivityType,
|
||||||
|
fromIndex?: number | null,
|
||||||
|
toIndex?: number | null,
|
||||||
|
): React.ReactNode | null => {
|
||||||
|
console.log({ fromIndex, toIndex });
|
||||||
|
if (type === "card.updated.list" && fromIndex != null && toIndex != null) {
|
||||||
|
return fromIndex > toIndex ? (
|
||||||
|
<HiOutlineArrowLeft />
|
||||||
|
) : (
|
||||||
|
<HiOutlineArrowRight />
|
||||||
|
);
|
||||||
|
}
|
||||||
return ACTIVITY_ICON_MAP[type] ?? null;
|
return ACTIVITY_ICON_MAP[type] ?? null;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -174,7 +186,11 @@ const ActivityList = ({
|
|||||||
size="sm"
|
size="sm"
|
||||||
name={activity.user?.name ?? ""}
|
name={activity.user?.name ?? ""}
|
||||||
email={activity.user?.email ?? ""}
|
email={activity.user?.email ?? ""}
|
||||||
icon={getActivityIcon(activity.type)}
|
icon={getActivityIcon(
|
||||||
|
activity.type,
|
||||||
|
activity.fromList?.index,
|
||||||
|
activity.toList?.index,
|
||||||
|
)}
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
/>
|
/>
|
||||||
{index !== activities.length - 1 &&
|
{index !== activities.length - 1 &&
|
||||||
|
|||||||
Reference in New Issue
Block a user