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 ? (
+
+ {ownerDifferences.map((o) => (
+ -
+ {o.type === "added" ? (
+ <>
+ {o.difference}{" "}
+
+ added
+ {" "}
+ to {o.discordFullName}
+ >
+ ) : (
+ <>
+ {o.difference}{" "}
+
+ removed
+ {" "}
+ from {o.discordFullName}
+ >
+ )}
+
+ ))}
+
+ ) : 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();