🎨 Create Brick Block #426

angular.json

@@ -262,6 +262,34 @@
       "tags": []
     },
     "features-convs-mgr-stories-blocks-library-block-options": "libs/features/convs-mgr/stories/blocks/library/block-options",
+    "features-convs-mgr-stories-blocks-library-brick-block": {
+      "projectType": "library",
+      "root": "libs/features/convs-mgr/stories/blocks/library/brick-block",
+      "sourceRoot": "libs/features/convs-mgr/stories/blocks/library/brick-block/src",
+      "prefix": "app",
+      "targets": {
+        "test": {
+          "executor": "@nrwl/jest:jest",
+          "outputs": [
+            "coverage/libs/features/convs-mgr/stories/blocks/library/brick-block"
+          ],
+          "options": {
+            "jestConfig": "libs/features/convs-mgr/stories/blocks/library/brick-block/jest.config.ts",
+            "passWithNoTests": true
+          }
+        },
+        "lint": {
+          "executor": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/features/convs-mgr/stories/blocks/library/brick-block/**/*.ts",
+              "libs/features/convs-mgr/stories/blocks/library/brick-block/**/*.html"
+            ]
+          }
+        }
+      },
+      "tags": []
+    },
     "features-convs-mgr-stories-blocks-library-document-message-block": "libs/features/convs-mgr/stories/blocks/library/document-message-block",
     "features-convs-mgr-stories-blocks-library-email-message-block": "libs/features/convs-mgr/stories/blocks/library/email-message-block",
     "features-convs-mgr-stories-blocks-library-fail-block": {

apps/conv-learning-manager/src/assets/i18n/en.json

@@ -91,6 +91,7 @@
         "FAILBLOCK": "Fail Block",
         "JUMP":"Jump",
         "EVENT": "Event",
+        "BRICK":"Brick",
         "END-BLOCK":"End Block"
       },
       "PLACEHOLDER": {

apps/conv-learning-manager/src/assets/i18n/fr.json

@@ -70,7 +70,8 @@
         "LOCATION-INPUT":"saisie de position",
         "KEYWORD-JUMP": "saut de mots-clés",
         "EVENT": "Événement",
-        "JUMP":"saut"
+        "JUMP":"saut",
+        "BRICK":"Brique"
       },
       "PLACEHOLDER": {
         "CAPTION": "Légende",

libs/features/convs-mgr/stories/blocks/library/brick-block/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../../../../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/features/convs-mgr/stories/blocks/library/brick-block/README.md

@@ -0,0 +1,7 @@
+# features-convs-mgr-stories-blocks-library-brick-block
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test features-convs-mgr-stories-blocks-library-brick-block` to execute the unit tests.

libs/features/convs-mgr/stories/blocks/library/brick-block/jest.config.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+export default {
+  displayName: 'features-convs-mgr-stories-blocks-library-brick-block',
+  preset: '../../../../../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory:
+    '../../../../../../../coverage/libs/features/convs-mgr/stories/blocks/library/brick-block',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular',
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/features/convs-mgr/stories/blocks/library/brick-block/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/convs-mgr-brick-block.module';

libs/features/convs-mgr/stories/blocks/library/brick-block/src/lib/components/brick-block/brick-block.component.html

@@ -0,0 +1,22 @@
+<div [id]="id" *ngIf="brickForm">
+  <form [formGroup]="brickForm" fxLayout="column" fxLayoutALign="start center">
+    <textarea [id]="id" formControlName="brick" type="text" rows="3"></textarea>
+    <button
+      type="button"
+      mat-raised-button
+      style="
+        background-color: #ffab2d;
+        color: #fff;
+        width: max-content;
+        padding: 8px;
+        margin: 0.5rem auto 0.25rem auto;
+      "
+    >
+      Edit
+    </button>
+    <!-- <app-default-option-field
+      [jsPlumb]="jsPlumb"
+      [blockFormGroup]="brickForm"
+    ></app-default-option-field> -->
+  </form>
+</div>

libs/features/convs-mgr/stories/blocks/library/brick-block/src/lib/components/brick-block/brick-block.component.scss

@@ -0,0 +1 @@
+

libs/features/convs-mgr/stories/blocks/library/brick-block/src/lib/components/brick-block/brick-block.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BrickBlockComponent } from './brick-block.component';
+
+describe('BrickBlockComponent', () => {
+  let component: BrickBlockComponent;
+  let fixture: ComponentFixture<BrickBlockComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BrickBlockComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BrickBlockComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/features/convs-mgr/stories/blocks/library/brick-block/src/lib/components/brick-block/brick-block.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
+import { BrickBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
+import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
+
+@Component({
+  selector: 'app-brick-block',
+  templateUrl: './brick-block.component.html',
+  styleUrls: ['./brick-block.component.scss'],
+})
+export class BrickBlockComponent implements OnInit {
+  @Input() id: string;
+  @Input() block: BrickBlock;
+  @Input() brickForm: FormGroup;
+  @Input() jsPlumb: BrowserJsPlumbInstance;
+
+  @Input() blockFormGroup: FormGroup;
+
+  messageInputId: string;
+  type: StoryBlockTypes;
+  messagetype = StoryBlockTypes.BrickBlock;
+
+  ngOnInit(): void {
+    this.messageInputId = `brick-${this.id}`;
+  }
+}

libs/features/convs-mgr/stories/blocks/library/brick-block/src/lib/convs-mgr-brick-block.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+  FlexLayoutModule,
+  MaterialBricksModule,
+  MaterialDesignModule,
+} from '@iote/bricks-angular';
+import { ConvsMgrBlockOptionsModule } from '@app/features/convs-mgr/stories/blocks/library/block-options';
+import { BrickBlockComponent } from './components/brick-block/brick-block.component';
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialDesignModule,
+    FlexLayoutModule,
+    MaterialBricksModule,
+
+    FormsModule,
+    ReactiveFormsModule,
+
+    ConvsMgrBlockOptionsModule,
+  ],
+  declarations: [BrickBlockComponent],
+  exports: [BrickBlockComponent],
+})
+export class ConvsMgrBrickBlockModule {}

libs/features/convs-mgr/stories/blocks/library/brick-block/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

libs/features/convs-mgr/stories/blocks/library/brick-block/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "extends": "../../../../../../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "compilerOptions": {
+    "target": "es2020",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/features/convs-mgr/stories/blocks/library/brick-block/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test-setup.ts",
+    "**/*.spec.ts",
+    "jest.config.ts",
+    "**/*.test.ts"
+  ],
+  "include": ["**/*.ts"]
+}

libs/features/convs-mgr/stories/blocks/library/brick-block/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+}

libs/features/convs-mgr/stories/blocks/library/main/src/lib/blocks-library.module.ts

@@ -32,6 +32,7 @@ import { ConvsMgrMultipleInputMessageBlockModule } from '@app/features/convs-mgr
 import { ConvsMgrImageInputBlockModule } from '@app/features/convs-mgr/stories/blocks/library/image-input-block';
 import { ConvsMgrLocationInputBlockModule } from '@app/features/convs-mgr/stories/blocks/library/location-input-block';
 import { ConvsMgrStoriesWebhookBlockModule } from '@app/features/convs-mgr/stories/blocks/library/webhook-block';
+import { ConvsMgrBrickBlockModule } from '@app/features/convs-mgr/stories/blocks/library/brick-block';
 
 import { ConvsMgrAnchorBlockModule } from '@app/features/convs-mgr/stories/blocks/library/anchor-block';
 import { ConvsMgrOpenEndedQuestionBlockModule } from '@app/features/convs-mgr/stories/blocks/library/open-ended-question-block';
@@ -40,7 +41,6 @@ import { ConvsMgrMultiContentInputBlockModule } from '@app/features/convs-mgr/st
 import { ConvsMgrVideoInputBlockModule } from '@app/features/convs-mgr/stories/blocks/library/video-input-block';
 import { ConvsMgrKeywordJumpBlockModule } from '@app/features/convs-mgr/stories/blocks/library/keyword-jump-block';
 import { ConvsMgrEventBlockModule } from '@app/features/convs-mgr/stories/blocks/library/event-block';
-
 import { FileStateModule, UploadFileService } from '@app/state/file';
 
 import { BlockInjectorService } from './providers/block-injector.service';
@@ -80,6 +80,7 @@ import { BlockComponent } from './components/block/block.component';
     ConvsMgrAudioInputBlockModule,
     ConvsMgrStoriesWebhookBlockModule,
     ConvsMgrMultiContentInputBlockModule,
+    ConvsMgrBrickBlockModule,
 
     ConvsMgrAnchorBlockModule,
     ConvsMgrVideoInputBlockModule,

libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.html

@@ -92,6 +92,10 @@ <h4 class="block-title"> {{ blockTitle | transloco }}</h4>
             <app-webhook-block [id]="id" [block]="block" [webhookForm]="blockFormGroup" [jsPlumb]="jsPlumb" class="block">
             </app-webhook-block>
         </div>
+        <div *ngSwitchCase="brickType">
+            <app-brick-block [id]="id" [block]="block" [brickForm]="blockFormGroup" [jsPlumb]="jsPlumb" class="block">
+            </app-brick-block>
+        </div>
         <div *ngSwitchCase="openQuestiontype">
             <app-open-ended-question-block [id]="id" [block]="block" [openEndedQuestionForm]="blockFormGroup" [jsPlumb]="jsPlumb" class="block">
             </app-open-ended-question-block>

libs/features/convs-mgr/stories/blocks/library/main/src/lib/components/block/block.component.ts

@@ -25,7 +25,7 @@ import { _CreateDocumentMessageBlockForm } from '../../model/document-block-form
 import { _CreateReplyBlockForm } from '../../model/reply-block-form.model';
 import { _CreateMultipleInputMessageBlockForm } from '../../model/multiple-input-message-block-form.model';
 import { _CreateImageInputBlockForm } from '../../model/image-input-block-form.model';
-
+import { _CreateBrickBlockForm } from '../../model/brick-block-form.model';
 import { iconsAndTitles } from '../../model/icons-and-titles';
 import { _CreateJumpBlockForm } from '../../model/jump-block-form.model';
 import { _CreateFailBlockForm } from '../../model/fail-block-form.model';
@@ -79,6 +79,7 @@ export class BlockComponent implements OnInit {
   audioInputType =  StoryBlockTypes.AudioInput;
   videoInputType = StoryBlockTypes.VideoInput;
   webhookType =  StoryBlockTypes.WebhookBlock;
+  brickType = StoryBlockTypes.BrickBlock;
   endStoryAnchor = StoryBlockTypes.EndStoryAnchorBlock;
   openQuestiontype = StoryBlockTypes.OpenEndedQuestion;
   multiContentInputType = StoryBlockTypes.MultiContentInput;
@@ -206,6 +207,10 @@ export class BlockComponent implements OnInit {
           this.blockFormGroup = _CreateWebhookBlockForm(this._fb, this.block);
           this.blocksGroup.push(this.blockFormGroup);
           break;
+        case StoryBlockTypes.BrickBlock:
+          this.blockFormGroup = _CreateBrickBlockForm(this._fb, this.block);
+          this.blocksGroup.push(this.blockFormGroup);
+          break;
         case StoryBlockTypes.EndStoryAnchorBlock:
           this.blockFormGroup = _CreateEndStoryAnchorBlockForm(this._fb, this.block);
           this.blocksGroup.push(this.blockFormGroup);

libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/brick-block-form.model.ts

@@ -0,0 +1,23 @@
+import { FormGroup, FormBuilder } from '@angular/forms';
+
+import { StoryBlockTypes } from '@app/model/convs-mgr/stories/blocks/main';
+import { BrickBlock } from '@app/model/convs-mgr/stories/blocks/messaging';
+
+/**
+ *
+ * @param _fb instance of formbuilder that creates formgroups controls etc
+ * @param blockData the data being patched into the FormGroup
+ * @returns builds the formgroup with data if available and returns the Formgroup
+ */
+export function _CreateBrickBlockForm(
+  _fb: FormBuilder,
+  blockData: BrickBlock
+): FormGroup {
+  return _fb.group({
+    id: [blockData?.id! ?? ''],
+    defaultTarget: [blockData.defaultTarget ?? ''],
+    message: [blockData?.message! ?? ''],
+    type: [blockData.type ?? StoryBlockTypes.BrickBlock],
+    position: [blockData.position ?? { x: 200, y: 50 }],
+  });
+}

libs/features/convs-mgr/stories/blocks/library/main/src/lib/model/icons-and-titles.ts

@@ -95,6 +95,10 @@ export const iconsAndTitles: any = {
     title: 'PAGE-CONTENT.BLOCK.TITLES.WEBHOOK',
     icon: 'fas fa-link',
   },
+  26: {
+    title: 'PAGE-CONTENT.BLOCK.TITLES.BRICK',
+    icon: 'fas fa-cubes'
+  },
   27: {
     title: 'PAGE-CONTENT.BLOCK.TITLES.OPEN-ENDED-QUESTION',
     icon: 'fas fa-question-circle',