Merge pull request #10288 from chehitskenniexd/loadouts_copy_and_edit…

…_button

[Loadouts][Enhancements] Copy and Edit Loadout

config/i18n.json

@@ -683,6 +683,7 @@
  "ClearSpaceWeapons": "Move other weapons away",
  "ClearSpaceArmor": "Move other armor away",
  "ClearUnsetMods": "Remove other mods",
+ "CopyAndEdit": "Edit Copy",
  "Create": "Create Loadout",
  "CurrentlyEquipped": "Currently Equipped",
  "Delete": "Delete",

docs/CHANGELOG.md

@@ -4,6 +4,7 @@
 * Added an overload to the `inloadout:` search which allows searching items based on how many loadouts they are in, for example `inloadout:>2`.
 * Added `is:fashiononly` and `is:modsonly` search keywords to loadouts search.
 * Pages such as "About" and "Settings" now respect device safe areas when the device is in landscape mode.
+* You can now edit a copy of a Loadout directly, with no risk of overwriting the existing loadout.
 * Fixed some bounties showing as "Arc" that were not, in fact, Arc.
 * Fixed the too-narrow width of the sidebar on the Loadout Optimizer on app.destinyitemmanager.com.
 * Fixed distorted icons for owned mods in collections.

src/app/loadout-drawer/loadout-events.ts

@@ -9,6 +9,11 @@ export const editLoadout$ = new EventBus<{
  storeId: string;
 }>();
 export const addItem$ = new EventBus<DimItem>();
+export const copyAndEditLoadout$ = new EventBus<{
+ loadout: Loadout;
+ showClass?: boolean;
+ storeId: string;
+}>();
 
 /**
  * Start editing a loadout.
@@ -32,3 +37,15 @@ export function editLoadout(
 export function addItemToLoadout(item: DimItem) {
  addItem$.next(item);
 }
+
+/**
+ * Copy and Edit Loadout
+ */
+export function copyAndEditLoadout(
+ loadout: Loadout,
+ storeId: string,
+ { showClass = true }: { showClass?: boolean } = {},
+) {
+ const copiedLoadout = { ...loadout, name: `${loadout.name} - Copy` };
+ editLoadout(copiedLoadout, storeId, { showClass, isNew: true });
+}

src/app/loadout/LoadoutsRow.tsx

@@ -3,7 +3,7 @@ import { t } from 'app/i18next-t';
 import { DimStore } from 'app/inventory/store-types';
 import { deleteLoadout } from 'app/loadout-drawer/actions';
 import { applyLoadout } from 'app/loadout-drawer/loadout-apply';
-import { editLoadout } from 'app/loadout-drawer/loadout-events';
+import { copyAndEditLoadout, editLoadout } from 'app/loadout-drawer/loadout-events';
 import { Loadout } from 'app/loadout-drawer/loadout-types';
 import { AppIcon, deleteIcon } from 'app/shell/icons';
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
@@ -38,6 +38,7 @@ export default memo(function LoadoutRow({
 
  const handleEdit = () => editLoadout(loadout, store.id, { isNew: !saved });
  const handleShare = () => onShare(loadout);
+ const handleCopyAndEdit = () => copyAndEditLoadout(loadout, store.id);
 
  const actionButtons: ReactNode[] = [];
 
@@ -55,6 +56,15 @@ export default memo(function LoadoutRow({
  </button>,
  );
 
+ if (equippable) {
+ // add button here to copy and edit the loadout
+ actionButtons.push(
+ <button key="copyAndEdit" type="button" className="dim-button" onClick={handleCopyAndEdit}>
+ {t('Loadouts.CopyAndEdit')}
+ </button>,
+ );
+ }
+
  actionButtons.push(
  <button key="share" type="button" className="dim-button" onClick={handleShare}>
  {t('Loadouts.ShareLoadout')}

src/locale/en.json

@@ -733,6 +733,7 @@
  "ClearSpaceWeapons": "Move other weapons away",
  "ClearUnsetMods": "Remove other mods",
  "ClearingSpace": "Moving other items away",
+ "CopyAndEdit": "Edit Copy",
  "Create": "Create Loadout",
  "CurrentlyEquipped": "Currently Equipped",
  "Deequip": "De-equipping items from other characters",