diff --git a/app/routes/badges/$id/edit.tsx b/app/routes/badges/$id/edit.tsx index fcdcaeadd..0504ce0a4 100644 --- a/app/routes/badges/$id/edit.tsx +++ b/app/routes/badges/$id/edit.tsx @@ -94,13 +94,6 @@ export default function EditBadgePage() { ); } -function submitButtonText(amountOfChanges: number) { - if (amountOfChanges === 0) return "Submit"; - if (amountOfChanges === 1) return `Submit ${amountOfChanges} change`; - - return `Submit ${amountOfChanges} changes`; -} - function Managers({ data }: { data: BadgeDetailsLoaderData }) { const [managers, setManagers] = React.useState( data.managers.map((m) => ({ @@ -171,6 +164,13 @@ function Managers({ data }: { data: BadgeDetailsLoaderData }) { ); + + function submitButtonText(amountOfChanges: number) { + if (amountOfChanges === 0) return "Submit"; + if (amountOfChanges === 1) return `Submit ${amountOfChanges} change`; + + return `Submit ${amountOfChanges} changes`; + } } function Owners({ data }: { data: BadgeDetailsLoaderData }) { @@ -182,11 +182,7 @@ function Owners({ data }: { data: BadgeDetailsLoaderData }) { })) ); - const amountOfChanges = owners.reduce((acc, owner) => { - const oldOwner = data.owners.find((o) => o.id === owner.id); - const hasChanged = !oldOwner || owner.count !== oldOwner.count; - return acc + (hasChanged ? 1 : 0); - }, 0); + const ownerDifferences = getOwnerDifferences(owners, data.owners); return (
@@ -231,6 +227,37 @@ function Owners({ data }: { data: BadgeDetailsLoaderData }) { userIdsToOmit={new Set(owners.map((m) => m.id))} />
+ {ownerDifferences.length > 0 ? ( + + ) : null} - {submitButtonText(amountOfChanges)} + Save ); } +function getOwnerDifferences( + newOwners: Array<{ + id: number; + discordFullName: string; + count: number; + }>, + oldOwners: BadgeDetailsLoaderData["owners"] +) { + const result: Array<{ + id: User["id"]; + type: "added" | "removed"; + difference: number; + discordFullName: string; + }> = []; + + for (const owner of newOwners) { + const oldOwner = oldOwners.find((o) => o.id === owner.id); + if (!oldOwner) { + result.push({ + id: owner.id, + type: "added", + difference: owner.count, + discordFullName: owner.discordFullName, + }); + continue; + } + + if (owner.count !== oldOwner.count) { + result.push({ + id: owner.id, + type: owner.count > oldOwner.count ? "added" : "removed", + difference: Math.abs(owner.count - oldOwner.count), + discordFullName: owner.discordFullName, + }); + } + } + + return result; +} + function countArrayToDuplicatedIdsArray( owners: Array<{ id: User["id"]; count: number }> ) { diff --git a/app/styles/badges.css b/app/styles/badges.css index b33eca1e2..1aa827748 100644 --- a/app/styles/badges.css +++ b/app/styles/badges.css @@ -93,6 +93,17 @@ font-size: var(--fonts-md); } +.badges-edit__differences { + padding: 0; + font-size: var(--fonts-xs); + list-style: none; +} + +.badges-edit__differences > li::before { + padding-inline-end: 5px; + content: "-"; +} + .badges-edit__submit-button { margin: 0 auto; } diff --git a/app/styles/common.css b/app/styles/common.css index 9752b1216..52a906612 100644 --- a/app/styles/common.css +++ b/app/styles/common.css @@ -205,6 +205,10 @@ color: var(--theme-success); } +.font-semi-bold { + font-weight: var(--semi-bold); +} + .w-full { width: 100%; } diff --git a/cypress/e2e/badges.cy.ts b/cypress/e2e/badges.cy.ts index f5d08b39e..6a459dd7f 100644 --- a/cypress/e2e/badges.cy.ts +++ b/cypress/e2e/badges.cy.ts @@ -39,7 +39,8 @@ describe("Plus suggestions page", () => { cy.getCy("new-owner-combobox-input").clear().type("N-ZAP{enter}"); cy.getCy("owner-count-input").last().type("1"); // new count = 11 - cy.contains("1 change").click(); + cy.getCy("difference-added"); + cy.getCy("save-owners-button").click(); cy.contains("11"); }); @@ -56,7 +57,8 @@ describe("Plus suggestions page", () => { cy.getCy("owner-count-input").first().type("{selectall}").type("0"); - cy.contains("1 change").click(); + cy.getCy("difference-removed"); + cy.getCy("save-owners-button").click(); cy.visit(BADGES_PAGE); cy.getCy("badge-nav-link").first().click();