diff --git a/frontend/src/app/Services/block.service.ts b/frontend/src/app/Services/block.service.ts index d7e3cdfe8..1785c518d 100644 --- a/frontend/src/app/Services/block.service.ts +++ b/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); + }; + }); + }) ); } } diff --git a/frontend/src/app/base-editor/base-editor.component.css b/frontend/src/app/base-editor/base-editor.component.css index be8696c9f..ef0922e76 100644 --- a/frontend/src/app/base-editor/base-editor.component.css +++ b/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%); +} \ No newline at end of file diff --git a/frontend/src/app/base-editor/base-editor.component.html b/frontend/src/app/base-editor/base-editor.component.html index 3bf4153fe..6364fd01d 100644 --- a/frontend/src/app/base-editor/base-editor.component.html +++ b/frontend/src/app/base-editor/base-editor.component.html @@ -9,11 +9,12 @@
-
+
-
-
-
-

Saved Blocks

- - - - - -
-
-
-

Preview

-
- Preview: -
- - - -
- - - - - - - - -
- {{element.stepType}} - Multiple Scenario - {{element.pre}} {{element.values[0]}} {{element.mid}} {{element.values[1]}} {{element.values[2]}} {{element.values[3]}} - {{el}} |
-
+
+
+
+

Saved Blocks

+ + + + +
- + \ No newline at end of file diff --git a/frontend/src/app/modals/add-block-form/add-block-form.component.ts b/frontend/src/app/modals/add-block-form/add-block-form.component.ts index a12f14f3b..f99d2633d 100644 --- a/frontend/src/app/modals/add-block-form/add-block-form.component.ts +++ b/frontend/src/app/modals/add-block-form/add-block-form.component.ts @@ -85,9 +85,9 @@ export class AddBlockFormComponent implements OnInit,OnDestroy { clipboardBlock: Block; /** - * Boolean, wether Block should be added as reference + * Boolean, wether Block should be added as a single steps */ - addAsReference: boolean; + addAsSingleSteps: boolean; modalReference: NgbModalRef; deleteBlockObservable: Subscription; @@ -119,6 +119,9 @@ export class AddBlockFormComponent implements OnInit,OnDestroy { * @param repoId id of the current repository / project */ openAddBlockFormModal(correspondingComponent: string, repoId: string) { + if (this.selectedTemplate === 'background'){ + this.checkaddAsSingleSteps(); + } this.blockSaved = true; this.getAllBlocks(repoId); this.correspondingComponent = correspondingComponent; @@ -250,7 +253,7 @@ export class AddBlockFormComponent implements OnInit,OnDestroy { */ copiedBlock() { if (this.clipboardBlock) { - this.blockService.addBlockToScenario(this.clipboardBlock, this.correspondingComponent, false); + this.blockService.addBlockToScenario(this.clipboardBlock, this.correspondingComponent, null, false); } } @@ -258,8 +261,8 @@ export class AddBlockFormComponent implements OnInit,OnDestroy { * Add a block to a scenario */ addBlockFormSubmit() { - this.blockService.addBlockToScenario(this.selectedBlock, this.correspondingComponent, this.addAsReference, this.currentStepType.value); - delete this.addAsReference; + this.blockService.addBlockToScenario(this.selectedBlock, this.correspondingComponent, this.currentStepType.value, this.addAsSingleSteps); + delete this.addAsSingleSteps; delete this.selectedBlock; this.stepList = []; this.currentStepType = new FormControl('When'); @@ -296,8 +299,8 @@ export class AddBlockFormComponent implements OnInit,OnDestroy { this.blockService.updateBlocksEvent.emit(); } - checkAddAsReference() { - this.addAsReference = (!this.addAsReference); + checkaddAsSingleSteps() { + this.addAsSingleSteps = (!this.addAsSingleSteps); } enterSubmit(event) { @@ -308,7 +311,7 @@ export class AddBlockFormComponent implements OnInit,OnDestroy { this.addBlockFormSubmit(); } closeModal(){ - delete this.addAsReference; + delete this.addAsSingleSteps; delete this.selectedBlock; this.currentStepType = new FormControl('When'); this.stepList = []; diff --git a/frontend/src/app/modals/save-block-form/save-block-form.component.css b/frontend/src/app/modals/save-block-form/save-block-form.component.css index 2e2a9a4d6..b08ee1ef9 100644 --- a/frontend/src/app/modals/save-block-form/save-block-form.component.css +++ b/frontend/src/app/modals/save-block-form/save-block-form.component.css @@ -121,6 +121,6 @@ label.block { justify-content: space-between; } -#saveAsReferenceLabel{ +#saveAsSingleStepsLabel{ margin-right: 5px; } diff --git a/frontend/src/app/modals/save-block-form/save-block-form.component.html b/frontend/src/app/modals/save-block-form/save-block-form.component.html index cacea8e78..70d54c2e3 100644 --- a/frontend/src/app/modals/save-block-form/save-block-form.component.html +++ b/frontend/src/app/modals/save-block-form/save-block-form.component.html @@ -4,10 +4,11 @@
- Save as Block + Save Steps as Block - Saving multiple steps as block, can be used to add these steps in another scenario without much effort. - Just click the Add Saved Block button next to the Save button. These saved blocks can be used only in this project. + + Save multiple Steps as a Block. Use Blocks to create reusable processes that are saved project-wide. + Changes to a Block will affect other Scenarios using the same Block.
- +
\ No newline at end of file diff --git a/frontend/src/app/story-editor/story-editor.component.ts b/frontend/src/app/story-editor/story-editor.component.ts index b63855e70..85fc6c9f4 100644 --- a/frontend/src/app/story-editor/story-editor.component.ts +++ b/frontend/src/app/story-editor/story-editor.component.ts @@ -587,7 +587,7 @@ export class StoryEditorComponent implements OnInit, OnDestroy { } }); this.convertToReferenceObservable = this.blockService.convertToReferenceEvent.subscribe(block => - this.blockService.convertStepsToRef(block, this.selectedScenario) + this.blockService.convertSelectedStepsToRef(block, this.selectedScenario) ); } diff --git a/frontend/src/assets/saveAsBlock.ico b/frontend/src/assets/saveAsBlock.ico new file mode 100644 index 000000000..7d5832c97 Binary files /dev/null and b/frontend/src/assets/saveAsBlock.ico differ diff --git a/frontend/src/assets/saveAsBlock.png b/frontend/src/assets/saveAsBlock.png new file mode 100644 index 000000000..69698e2c3 Binary files /dev/null and b/frontend/src/assets/saveAsBlock.png differ