ZB as new default

frontend/src/app/Services/block.service.ts

@@ -80,8 +80,8 @@ export class BlockService {
   * @param block
   * @param correspondingComponent
   */
-  addBlockToScenario(block: Block, correspondingComponent: string, addAsReference: boolean, addBlockAs?: string) {
-    this.addBlockToScenarioEvent.emit([correspondingComponent, block, addAsReference, addBlockAs]);
+  addBlockToScenario(block: Block, correspondingComponent: string, addBlockToStepType: string, addAsSingleSteps: boolean) {
+    this.addBlockToScenarioEvent.emit([correspondingComponent, block, addBlockToStepType, addAsSingleSteps]);
   }
   /**
   * Emits the update block in blocks
@@ -96,7 +96,7 @@ export class BlockService {
   convertToReferenceEmitter(block) {
     this.convertToReferenceEvent.emit(block);
   }
-  
+
   /**
   * Emits the delete block in blocks
   */
@@ -109,13 +109,13 @@ export class BlockService {
   public updateScenariosRefEmitt(scenario, storyId) {
     this.updateScenariosRefEvent.emit([scenario, storyId]);
   }
-    /**
-  * Emits the unpack block event
-  * @param block
-  */
-    public unpackBlockEmitter(block) {
-      this.unpackBlockEvent.emit(block);
-    }
+  /**
+* Emits the unpack block event
+* @param block
+*/
+  public unpackBlockEmitter(block) {
+    this.unpackBlockEvent.emit(block);
+  }
   /**
   * Emits the update a reference block name event
   * @param block
@@ -226,7 +226,7 @@ export class BlockService {
     stories.flatMap((story) => story.scenarios
       .filter((scenario) => scenario.hasRefBlock))
       .forEach((scenario) => this.referenceScenarios.push(scenario));
-      
+
     this.referenceStories = this.referenceScenarios
       .map((scenario) => stories.find((story) => story.scenarios.includes(scenario)))
       .filter((story, index, arr) => story && arr.indexOf(story) === index);
@@ -319,7 +319,7 @@ export class BlockService {
       });
     }
   }
-  
+
   /**
    * Unpack steps from the block and remove the block reference among the steps.
    * @param block
@@ -424,33 +424,82 @@ export class BlockService {
     });
     return blockFound;
   }
- 
+
   /** 
    * convert selected steps To Reference
    * @param block
    * @param scenario
    */
-  convertStepsToRef(block: Block, scenario: Scenario){
-   let indexToPush; 
-   let pushStepDef;
+  convertSelectedStepsToRef(block: Block, scenario: Scenario) {
+    const { indexToPush, pushStepDef } = this.findMatchingSteps(block, scenario);
+    this.removeMatchingSteps(block, scenario);
+    this.insertBlockReference(block, scenario, indexToPush, pushStepDef);
+  }
 
+ /** 
+   * find the index and step definition for pushing the reference block
+   * @param block
+   * @param scenario
+   */
+  findMatchingSteps(block: Block, scenario: Scenario): { indexToPush?: number; pushStepDef?: string } {
+    let indexToPush;
+    let pushStepDef;
     for (const step in scenario.stepDefinitions) {
       scenario.stepDefinitions[step].forEach((stepInScenario, index) => {
-        for(const stepBlock in block.stepDefinitions){
-          block.stepDefinitions[stepBlock].forEach((stepInBlock)=>{
-            if(stepInScenario.stepType == stepInBlock.stepType && stepInScenario.id === stepInBlock.id){
-              scenario.stepDefinitions[step].splice(index, 1);
+        for (const stepBlock in block.stepDefinitions) {
+          block.stepDefinitions[stepBlock].forEach((stepInBlock) => {
+            if (stepInScenario.stepType == stepInBlock.stepType && stepInScenario.id === stepInBlock.id) {
               indexToPush = indexToPush === undefined ? index : indexToPush;
               pushStepDef = pushStepDef === undefined ? stepInScenario.stepType : pushStepDef;
-            }  
+            }
           })
         }
       })
     }
-    const blockReference: StepType = {_blockReferenceId: block._id, id: indexToPush, type: block.name, stepType: pushStepDef,
-    pre: '', mid: '', post: '', values: []};
-    scenario.stepDefinitions[pushStepDef].splice(indexToPush, 0, JSON.parse(JSON.stringify(blockReference)));
-    scenario.saved = false;
+    return { indexToPush, pushStepDef };
+  }
+
+ /** 
+   * remove the steps from the scenario that need to be merged into a reference block
+   * @param block
+   * @param scenario
+   */
+  removeMatchingSteps(block: Block, scenario: Scenario): void {
+    for (const step in scenario.stepDefinitions) {
+      for (let index = scenario.stepDefinitions[step].length - 1; index >= 0; index--) {
+        const stepInScenario = scenario.stepDefinitions[step][index];
+        for (const stepBlock in block.stepDefinitions) {
+          block.stepDefinitions[stepBlock].forEach((stepInBlock) => {
+            if (stepInScenario.stepType === stepInBlock.stepType && stepInScenario.id === stepInBlock.id) {
+              scenario.stepDefinitions[step].splice(index, 1);
+            }
+          });
+        }
+      }
+    }
+  }
+
+ /** 
+   * insert a reference block to the scenario
+   * @param block
+   * @param scenario
+   */
+  insertBlockReference(block: Block, scenario: Scenario, indexToPush?: number, pushStepDef?: string): void {
+    if (indexToPush !== undefined && pushStepDef !== undefined) {
+      const blockReference: StepType = {
+        _blockReferenceId: block._id,
+        id: indexToPush + 1,
+        type: block.name,
+        stepType: pushStepDef,
+        pre: '',
+        mid: '',
+        post: '',
+        values: [],
+      };
+
+      scenario.stepDefinitions[pushStepDef].splice(indexToPush, 0, JSON.parse(JSON.stringify(blockReference)));
+      scenario.saved = false;
+    }
   }
 
   //CURRENTLY NOT ACTIVATED 
@@ -461,32 +510,32 @@ export class BlockService {
 
     stories.forEach((story) => story !== null && story.scenarios.forEach((scenario) => {
       for (let i = scenario.stepDefinitions.when.length - 1; i >= 0; i--) {
-          const value = scenario.stepDefinitions.when[i];
-          if (blockStepsToCompare.some((blockStep) => 
-          blockStep.pre === value.pre && 
-          blockStep.mid === value.mid && 
+        const value = scenario.stepDefinitions.when[i];
+        if (blockStepsToCompare.some((blockStep) =>
+          blockStep.pre === value.pre &&
+          blockStep.mid === value.mid &&
           JSON.stringify(blockStep.values) === JSON.stringify(value.values))
-          ) {
-            scenario.stepDefinitions.when.splice(i, 1); 
-            foundScenarios.push(scenario);
-            foundStories.push(story);
-          }
+        ) {
+          scenario.stepDefinitions.when.splice(i, 1);
+          foundScenarios.push(scenario);
+          foundStories.push(story);
         }
-      }));
+      }
+    }));
     const uniqueSetScenarios = new Set(foundScenarios);
     const uniqueSetStories = new Set(foundStories);
     foundScenarios = Array.from(uniqueSetScenarios);
     foundStories = Array.from(uniqueSetStories);
     foundStories.forEach((story)=> story.scenarios.forEach((scenario) =>{
-        foundScenarios.forEach((scen)=>{ 
-          if(scenario == scen){
-            const blockReference: StepType = {_blockReferenceId: block._id, id: 0, type: block.name, stepType: 'when',
+      foundScenarios.forEach((scen)=>{
+        if(scenario == scen){
+          const blockReference: StepType = {_blockReferenceId: block._id, id: 0, type: block.name, stepType: 'when',
             pre: '', mid: '', post: '', values: []};
-            scenario.stepDefinitions.when.push(JSON.parse(JSON.stringify(blockReference))); 
-            this.updateScenariosRefEmitt(scen,  story._id);
-          };
-        });
-      })
+          scenario.stepDefinitions.when.push(JSON.parse(JSON.stringify(blockReference)));
+          this.updateScenariosRefEmitt(scen,  story._id);
+        };
+      });
+    })
     );
   }
 }

frontend/src/app/base-editor/base-editor.component.css

@@ -244,6 +244,10 @@ input[type="text"] {
 .actionBarButtonGroup {
   margin-left: 3px;
 }
+.actionBarButtonGroup .checkbox{
+  bottom: 3px;
+  position: relative;
+}
 
 .actionButton {
   margin-left: 10px;
@@ -486,3 +490,11 @@ input.background {
   padding-right: 5px;
 }
 
+.actionBarButtons{
+  display: flex;
+  align-items: center;
+}
+.actionBarButtons.disabled img,
+.actionButton.disabled>img{
+  filter: invert(54%) brightness(92%);
+}

frontend/src/app/base-editor/base-editor.component.html

@@ -9,11 +9,12 @@
       <div class="actionBarButtonGroup">
         <input type="checkbox" class="checkbox" id="{{name+'_checkbox_all'}}" (change)="checkAllSteps()" [checked]="this.allChecked"
           uk-tooltip title="Check All Steps" />
-        <div [class.disabled]="!this.activeActionBar">
+        <div [class.disabled]="!this.activeActionBar" class="actionBarButtons">
           <button *ngIf="name !== 'example' && name !== 'block-editor'" id="{{name+'_addBlock_step_'}}"
             class="actionButton" uk-tooltip title="Save Steps as Block" (click)="saveBlock();"
             [disabled]="!this.activeActionBar || this.isReferenceBlock" [class.disabled]="this.isReferenceBlock">
-            <em class="material-icons">queue</em>
+            <em  *ngIf="name === 'background'" class="material-icons">queue</em>
+            <img *ngIf="name === 'scenario'" class="icons-img" alt="saveStepsAsBlock" style="width: 20px; color: #333" src="..\..\assets\saveAsBlock.png">
           </button>
           <button id="{{name+'_deactivate_step_'}}" class="actionButton" uk-tooltip title="De-/Activate Step"
             (click)="deactivateStep();" [disabled]="!this.activeActionBar">
@@ -528,5 +529,5 @@
   <app-new-example #newExampleModal></app-new-example>
   <app-new-step-request #newStepRequest></app-new-step-request>
   <app-add-block-form #addBlockModal [templateName]="name" ></app-add-block-form>
-  <app-save-block-form #saveBlockModal></app-save-block-form>
+  <app-save-block-form #saveBlockModal [templateName]="name" ></app-save-block-form>
 </ng-template>