Work for #3390: implement ordinary toolbox

surveyjs · Sep 28, 2022 · 4b95a11 · 4b95a11
1 parent 8d67d1f
commit 4b95a11
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/packages/survey-creator-angular/src/angular-ui.module.ts b/packages/survey-creator-angular/src/angular-ui.module.ts
@@ -51,12 +51,13 @@ import { DesignerPagesComponent } from "./tabs/designer/designer-pages.component
 import { DesignerSurveyComponent } from "./tabs/designer/designer-survey.component";
 import { CellQuestionComponent } from "./adorners/cell-question.component";
 import { QuestionWidgetDesignerComponent } from "./question-widget.component";
+import { ToolboxComponent } from "./toolbox/toolbox.component";
 
 @NgModule({
   declarations: [CreatorComponent, DesignerTabComponent, PageDesignerComponent, QuestionDesignerComponent, PanelDesignerComponent, SvgBundleComponent, TabbledMenuComponent, TabbedMenuItemComponent, TabbedMenuItemWrapperComponent, SidebarComponent, SidebarTabComponent, ObjectSelectorComponent, PropertyGridComponent, TextareaJsonEditorComponent, AceJsonEditorComponent, LogicTabComponent, LogicAddButtonComponent, ActionButtonComponent, LinkValueQuestionComponent, EmbeddedSurveyQuestionComponent, TranslationTabComponent, TranslationSkeletonComponent, SimulatorComponent, TestTabComponent, TestAgainActionComponent, SurveyResultsComponent, SurveyResultsTableRowComponent,
     AdaptiveToolboxComponent, ToolboxToolComponent, ToolboxItemComponent, ToolboxCategoryComponent, StringEditorComponent, PageNavigatorComponent, PageNavigatorItemComponent,
     QuestionDropdownDesignerComponent, QuestionDropdownAdornerDesignerComponent, QuestionImageDesignerComponent, QuestionImageAdornerDesignerComponent,
-    ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, NotifierComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent],
+    ItemValueDesignerComponent, ImageItemValueDesignerComponent, LogicOperatorComponent, MatrixCellComponent, QuestionEditorComponent, CellQuestionDropdownComponent, CreatorRowComponent, NotifierComponent, DesignerPagesComponent, DesignerSurveyComponent, CellQuestionComponent, QuestionWidgetDesignerComponent, ToolboxComponent],
   imports: [
     CommonModule, FormsModule, SurveyAngularModule
   ],

diff --git a/packages/survey-creator-angular/src/toolbox/toolbox.component.html b/packages/survey-creator-angular/src/toolbox/toolbox.component.html
@@ -0,0 +1,14 @@
+<ng-template #template>
+  <div class="svc-toolbox">
+    <div class="svc-toolbox__container">
+      <ng-container *ngIf="!(toolbox.categories.length == 1 || !toolbox.showCategoryTitles)">
+        <svc-toolbox-category *ngFor="let category of toolbox.categories" [category]="category" [toolbox]="toolbox"></svc-toolbox-category>
+      </ng-container>
+      <ng-container *ngIf="toolbox.categories.length == 1 || !toolbox.showCategoryTitles">
+        <div class="svc-toolbox__category">
+          <svc-toolbox-tool *ngFor="let item of toolbox.renderedActions" [creator]="model" [item]="item" [isCompact]="toolbox.isCompact"></svc-toolbox-tool>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+</ng-template>
diff --git a/packages/survey-creator-angular/src/toolbox/toolbox.component.ts b/packages/survey-creator-angular/src/toolbox/toolbox.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from "@angular/core";
+import { CreatorBase, QuestionToolbox } from "survey-creator-core";
+import { AngularComponentFactory, BaseAngular } from "survey-angular-ui";
+
+@Component({
+  selector: "svc-toolbox",
+  templateUrl: "./toolbox.component.html",
+  styles: [":host { display: none; }"]
+})
+export class ToolboxComponent extends BaseAngular<QuestionToolbox> {
+  @Input() model!: CreatorBase;
+  public get toolbox() {
+    return this.model.toolbox;
+  }
+  protected getModel(): QuestionToolbox {
+    return this.toolbox;
+  }
+}
+AngularComponentFactory.Instance.registerComponent("svc-toolbox", ToolboxComponent);