feat: duplicate macro item (#2294)

packages/uhk-web/src/app/components/macro/edit/macro-edit.component.html

@@ -20,6 +20,7 @@
                         [selectedMacroActionId]="selectedMacroActionIdModel"
                         (add)="addAction($event.macroId, $event.action)"
                         (edit)="editAction($event.macroId, $event.index, $event.action)"
+                        (duplicate)="duplicateAction($event)"
                         (delete)="deleteAction($event.macroId, $event.index, $event.action)"
                         (reorder)="reorderAction($event.macroId, $event.macroActions)"
                         (selectedMacroActionChanged)="onSelectedMacroAction($event)"

packages/uhk-web/src/app/components/macro/edit/macro-edit.component.ts

@@ -9,6 +9,7 @@ import { Observable, Subscription } from 'rxjs';
 
 import {
     AddMacroActionAction,
+    DuplicateMacroActionAction,
     DeleteMacroActionAction,
     ReorderMacroActionAction,
     SaveMacroActionAction,
@@ -28,7 +29,7 @@ import {
 } from '../../../store';
 import { IOutputData, SplitComponent } from 'angular-split';
 
-import { SelectedMacroAction, SelectedMacroActionIdModel } from '../../../models';
+import { DuplicateMacroActionPayload, SelectedMacroAction, SelectedMacroActionIdModel } from '../../../models';
 import { PanelSizeChangedAction, TogglePanelVisibilityAction } from '../../../store/actions/smart-macro-doc.action';
 
 @Component({
@@ -124,6 +125,10 @@ export class MacroEditComponent implements OnDestroy {
         this.store.dispatch(new DeleteMacroActionAction({ id: macroId, index, action }));
     }
 
+    duplicateAction(payload: DuplicateMacroActionPayload) {
+        this.store.dispatch(new DuplicateMacroActionAction(payload));
+    }
+
     reorderAction(macroId: number, macroActions: MacroAction[]) {
         this.store.dispatch(new ReorderMacroActionAction({ id: macroId, macroActions }));
     }

packages/uhk-web/src/app/components/macro/item/macro-item.component.html

@@ -11,6 +11,7 @@
             </div>
             <icon *ngIf="editable && macroAction && !editing" name="pencil" class="align-items-top"></icon>
         </div>
+        <icon *ngIf="editable" name="copy" (click)="duplicateAction()" class="align-items-top"></icon>
         <icon *ngIf="deletable" name="trash" (click)="deleteAction()" class="align-items-top"></icon>
     </ng-container>
 
@@ -25,6 +26,7 @@
             <span class="pe-1 me-auto">Command:</span>
 
             <icon *ngIf="editable" name="pencil" (click)="editAction()"></icon>
+            <icon *ngIf="editable" name="copy" (click)="duplicateAction()"></icon>
             <icon *ngIf="deletable" name="trash" (click)="deleteAction()"></icon>
         </div>
         <div class="macro-command-editor-container">

packages/uhk-web/src/app/components/macro/item/macro-item.component.scss

@@ -33,6 +33,7 @@
         icon {
             margin: 0 5px;
 
+            &[name='copy'],
             &[name='trash'] {
                 padding-top: 0.25rem;
             }

packages/uhk-web/src/app/components/macro/item/macro-item.component.ts

@@ -77,6 +77,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
     @Output() cancel = new EventEmitter<void>();
     @Output() edit = new EventEmitter<void>();
     @Output() delete = new EventEmitter<void>();
+    @Output() duplicate = new EventEmitter<void>();
     @Output() selected = new EventEmitter<SelectedMacroItem>();
 
     title: string;
@@ -125,6 +126,10 @@ export class MacroItemComponent implements OnInit, OnChanges {
         this.delete.emit();
     }
 
+    duplicateAction(): void {
+        this.duplicate.emit();
+    }
+
     macroEditorGotFocus():void {
         this.selected.emit({
             inlineEdit: true,

packages/uhk-web/src/app/components/macro/list/macro-list.component.html

@@ -14,6 +14,7 @@
                         [movable]="true"
                         (save)="saveAction($event, macroActionIndex)"
                         (edit)="editAction(macroActionIndex)"
+                        (duplicate)="duplicateAction(macroActionIndex)"
                         (cancel)="cancelAction()"
                         (delete)="deleteAction(macroAction, macroActionIndex)"
                         (selected)="onSelectedMacroAction(macroActionIndex, $event)"

packages/uhk-web/src/app/components/macro/list/macro-list.component.ts

@@ -15,7 +15,7 @@ import { KeyMacroAction, KeystrokeAction, Macro, MacroAction, MacroKeySubAction
 
 import { mapLeftRightModifierToKeyActionModifier } from '../../../util';
 import { KeyCaptureData } from '../../../models/svg-key-events';
-import { SelectedMacroAction, SelectedMacroActionId, SelectedMacroActionIdModel, SelectedMacroItem } from '../../../models';
+import { DuplicateMacroActionPayload, SelectedMacroAction, SelectedMacroActionId, SelectedMacroActionIdModel, SelectedMacroItem } from '../../../models';
 
 const ANIMATION_TIME = 500;
 const ANIMATION_INTERVAL = 5;
@@ -68,6 +68,7 @@ export class MacroListComponent implements AfterViewChecked, OnDestroy {
     @Input() selectedMacroActionId: SelectedMacroActionIdModel;
 
     @Output() add = new EventEmitter();
+    @Output() duplicate = new EventEmitter<DuplicateMacroActionPayload>();
     @Output() edit = new EventEmitter();
     @Output() delete = new EventEmitter();
     @Output() reorder = new EventEmitter();
@@ -144,6 +145,13 @@ export class MacroListComponent implements AfterViewChecked, OnDestroy {
         this.newMacro = undefined;
     }
 
+    duplicateAction(index: number) {
+        this.duplicate.emit({
+            macroId: this.macro.id,
+            actionId: index,
+        });
+    }
+
     editAction(index: number) {
         this.selectedMacroActionIdChanged.emit({ id: index });
     }

packages/uhk-web/src/app/components/popover/widgets/icon/icon.component.ts

@@ -3,6 +3,7 @@ import { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import {
     faCode,
     faClock,
+    faCopy,
     faFont,
     faGripLinesVertical,
     faHandPaper,
@@ -44,6 +45,11 @@ export class IconComponent implements OnChanges {
                 this.icon = faCode;
                 break;
 
+            case 'copy':
+                this.icon = faCopy;
+                this.css = 'action--edit';
+                break;
+
             case 'clock':
                 this.icon = faClock;
                 break;

packages/uhk-web/src/app/models/duplicate-macro-action-payload.ts

@@ -0,0 +1,4 @@
+export interface DuplicateMacroActionPayload {
+    macroId: number;
+    actionId: number;
+}

packages/uhk-web/src/app/models/index.ts

@@ -2,6 +2,7 @@ export * from './apply-user-configuration-from-file-payload';
 export * from './backlighting-option';
 export * from './config-size-state';
 export * from './device-ui-states';
+export * from './duplicate-macro-action-payload';
 export * from './exchange-keys-action.model';
 export * from './firmware-upgrade-state';
 export * from './firmware-upgrade-steps';

packages/uhk-web/src/app/store/actions/macro.ts

@@ -1,7 +1,7 @@
 import { Action } from '@ngrx/store';
 import { Macro, MacroAction as ConfigItemMacroAction } from 'uhk-common';
 
-import { SelectedMacroAction } from '../../models';
+import { DuplicateMacroActionPayload, SelectedMacroAction } from '../../models';
 
 export enum ActionTypes {
     Duplicate = '[Macro] Duplicate macro',
@@ -11,6 +11,7 @@ export enum ActionTypes {
     Select = '[Macro] Select macro',
 
     AddAction = '[Macro] Add macro action',
+    DuplicateAction = '[Macro] Duplicate macro action',
     SaveAction = '[Macro] Save macro action',
     DeleteAction = '[Macro] Delete macro action',
     ReorderAction = '[Macro] Reorder macro action',
@@ -56,6 +57,14 @@ export class AddMacroActionAction implements Action {
     }
 }
 
+export class DuplicateMacroActionAction implements Action {
+    type = ActionTypes.DuplicateAction;
+
+    constructor(public payload: DuplicateMacroActionPayload) {
+    }
+}
+
+
 export class SaveMacroActionAction implements Action {
     type = ActionTypes.SaveAction;
 
@@ -91,6 +100,7 @@ export type Actions
     | EditMacroNameAction
     | SelectMacroAction
     | AddMacroActionAction
+    | DuplicateMacroActionAction
     | SaveMacroActionAction
     | DeleteMacroActionAction
     | SelectMacroActionAction

packages/uhk-web/src/app/store/effects/user-config.ts

@@ -79,7 +79,7 @@ export class UserConfigEffects {
                 Keymaps.ActionTypes.AddLayer, Keymaps.ActionTypes.RemoveLayer, Keymaps.ActionTypes.SetKeyColor,
                 Macros.ActionTypes.Add, Macros.ActionTypes.Duplicate, Macros.ActionTypes.EditName, Macros.ActionTypes.Remove,
                 Macros.ActionTypes.AddAction, Macros.ActionTypes.SaveAction, Macros.ActionTypes.DeleteAction,
-                Macros.ActionTypes.ReorderAction,
+                Macros.ActionTypes.ReorderAction, Macros.ActionTypes.DuplicateAction,
                 ActionTypes.RenameUserConfiguration, ActionTypes.SetUserConfigurationValue, ActionTypes.SetUserConfigurationRgbValue,
                 ActionTypes.RecoverLEDSpaces, ActionTypes.SetModuleConfigurationValue
             ),

packages/uhk-web/src/app/store/reducers/user-configuration.ts

@@ -12,6 +12,7 @@ import {
     LayerName,
     LeftSlotModules,
     Macro,
+    MacroActionHelper,
     Module,
     ModuleConfiguration,
     MODIFIER_LAYER_NAMES,
@@ -728,6 +729,31 @@ export function reducer(
             };
         }
 
+        case MacroActions.ActionTypes.DuplicateAction: {
+            const payload = (action as MacroActions.DuplicateMacroActionAction).payload;
+            const userConfiguration: UserConfiguration = Object.assign(new UserConfiguration(), state.userConfiguration);
+
+            userConfiguration.macros = state.userConfiguration.macros.map((macro: Macro) => {
+                if (macro.id === payload.macroId) {
+                    macro = new Macro(macro);
+                    const cloned = MacroActionHelper.fromMacroAction(macro.macroActions[payload.actionId]);
+
+                    macro.macroActions = [
+                        ...macro.macroActions.slice(0, payload.actionId),
+                        cloned,
+                        ...macro.macroActions.slice(payload.actionId)
+                    ];
+                }
+
+                return macro;
+            });
+
+            return {
+                ...state,
+                userConfiguration
+            };
+        }
+
         case MacroActions.ActionTypes.SaveAction: {
             const payload = (action as MacroActions.SaveMacroActionAction).payload;
             const userConfiguration: UserConfiguration = Object.assign(new UserConfiguration(), state.userConfiguration);