Cm11 ph

apps/studio-client/.gitignore

@@ -0,0 +1,6 @@
+# NodeJS
+node_modules/
+
+# Jangaroo Build
+dist/
+build/

apps/studio-client/apps/main/form-editor-studio-plugin/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["@jangaroo/eslint-config"],
+};

apps/studio-client/apps/main/form-editor-studio-plugin/jangaroo.config.js

@@ -0,0 +1,15 @@
+const { jangarooConfig } = require("@jangaroo/core");
+
+module.exports = jangarooConfig({
+  type: "code",
+  sencha: {
+    name: "com.coremedia.blueprint__form-editor-studio-plugin",
+    namespace: "com.tallence.formeditor.studio",
+    studioPlugins: [
+      {
+        mainClass: "com.tallence.formeditor.studio.FormsStudioPlugin",
+        name: "Formeditor Extension",
+      },
+    ],
+  }
+});

apps/studio-client/apps/main/form-editor-studio-plugin/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@coremedia-blueprint/studio-client.main.form-editor-studio-plugin",
+  "version": "1.0.0-SNAPSHOT",
+  "private": true,
+  "dependencies": {
+    "@coremedia-blueprint/studio-client.form-editor": "1.0.0-SNAPSHOT",
+    "@coremedia-blueprint/studio-client.main.blueprint-forms": "1.0.0-SNAPSHOT",
+    "@coremedia/studio-client.cap-base-models": "2110.1.0",
+    "@coremedia/studio-client.cap-rest-client": "2110.1.0",
+    "@coremedia/studio-client.client-core": "2110.1.0",
+    "@coremedia/studio-client.core-icons": "2110.1.0",
+    "@coremedia/studio-client.ext.errors-validation-components": "2110.1.0",
+    "@coremedia/studio-client.ext.ui-components": "2110.1.0",
+    "@coremedia/studio-client.main.bpbase-studio-dynamic-query-list": "2110.1.0",
+    "@coremedia/studio-client.main.editor-components": "2110.1.0",
+    "@jangaroo/ext-ts": "^1.0.0",
+    "@jangaroo/runtime": "^1.0.0"
+  },
+  "devDependencies": {
+    "@jangaroo/build": "^1.0.0",
+    "@jangaroo/core": "^1.0.0",
+    "@jangaroo/eslint-config": "^1.0.0",
+    "@jangaroo/publish": "^1.0.0",
+    "eslint": "^7.27.0",
+    "rimraf": "^3.0.2"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist && rimraf ./build",
+    "build": "jangaroo build",
+    "watch": "jangaroo watch",
+    "publish": "jangaroo publish",
+    "lint": "eslint --fix \"src/**/*.ts\""
+  },
+  "exports": {
+    "./*": {
+      "types": "./src/*.ts",
+      "default": "./dist/src/*.js"
+    }
+  },
+  "coremedia": {
+    "projectExtensionFor": "studio-client.main-static"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "exports": {
+      "./*": {
+        "types": "./src/*.d.ts",
+        "default": "./src/*.js"
+      }
+    }
+  }
+}

form-editor-studio-plugin/src/main/sencha/sass/src/com/tallence/formeditor/studio/FormsStudioPlugin.scss → apps/studio-client/apps/main/form-editor-studio-plugin/sencha/sass/src/FormsStudioPlugin.scss

@@ -1,7 +1,5 @@
 @if $formeditor-include-styles {
 
-  @import "TallenceIconFont";
-
   $_block: "forms";
   $_group_container: $_block + "--element-group-container";
   $_applicable_element_container: $_block + "--applicable-element-container";

apps/studio-client/apps/main/form-editor-studio-plugin/sencha/src/packageConfig.js

@@ -0,0 +1,6 @@
+// START - Adding global resources to ext manifest
+Ext.registerGlobalResources({
+  "formEditor-help-de": "<@com.coremedia.blueprint__form-editor-studio-plugin>html-includes/FormEditorHelp_de.html",
+  "formEditor-help-en": "<@com.coremedia.blueprint__form-editor-studio-plugin>html-includes/FormEditorHelp_en.html"
+});
+// END - Adding global resources to ext manifest

apps/studio-client/apps/main/form-editor-studio-plugin/src/ApplicableElements.ts

@@ -0,0 +1,66 @@
+import ValueExpression from "@coremedia/studio-client.client-core/data/ValueExpression";
+import Container from "@jangaroo/ext-ts/container/Container";
+import Config from "@jangaroo/runtime/Config";
+import ConfigUtils from "@jangaroo/runtime/ConfigUtils";
+import ApplicableElementsBase from "./ApplicableElementsBase";
+
+interface ApplicableElementsConfig extends Config<ApplicableElementsBase>, Partial<Pick<ApplicableElements,
+  "formElements" |
+  "dragActiveVE" |
+  "readOnlyVE"
+>> {
+}
+
+class ApplicableElements extends ApplicableElementsBase {
+  declare Config: ApplicableElementsConfig;
+
+  static override readonly xtype: string = "com.tallence.formeditor.studio.config.applicableElements";
+
+  #formElements: Array<any> = null;
+
+  /*
+     * Array of objects describing groups of draggable items
+     */
+  get formElements(): Array<any> {
+    return this.#formElements;
+  }
+
+  set formElements(value: Array<any>) {
+    this.#formElements = value;
+  }
+
+  #dragActiveVE: ValueExpression = null;
+
+  /**
+   * Stores the information whether a drag and drop operation is in progress.
+   */
+  get dragActiveVE(): ValueExpression {
+    return this.#dragActiveVE;
+  }
+
+  set dragActiveVE(value: ValueExpression) {
+    this.#dragActiveVE = value;
+  }
+
+  #readOnlyVE: ValueExpression = null;
+
+  get readOnlyVE(): ValueExpression {
+    return this.#readOnlyVE;
+  }
+
+  set readOnlyVE(value: ValueExpression) {
+    this.#readOnlyVE = value;
+  }
+
+  constructor(config: Config<ApplicableElements> = null) {
+    super(ConfigUtils.apply(Config(ApplicableElements, {
+
+      items: [
+        Config(Container, { itemId: ApplicableElementsBase.APPLICABLE_ELEMENTS_CONTAINER_ID }),
+      ],
+
+    }), config));
+  }
+}
+
+export default ApplicableElements;

apps/studio-client/apps/main/form-editor-studio-plugin/src/ApplicableElementsBase.ts

@@ -0,0 +1,116 @@
+/*
+ * Copyright 2018 Tallence AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ValueExpression from "@coremedia/studio-client.client-core/data/ValueExpression";
+import CollapsiblePanel from "@coremedia/studio-client.ext.ui-components/components/panel/CollapsiblePanel";
+import Component from "@jangaroo/ext-ts/Component";
+import ComponentManager from "@jangaroo/ext-ts/ComponentManager";
+import Container from "@jangaroo/ext-ts/container/Container";
+import Panel from "@jangaroo/ext-ts/panel/Panel";
+import { as, asConfig } from "@jangaroo/runtime";
+import Config from "@jangaroo/runtime/Config";
+import ApplicableElements from "./ApplicableElements";
+import FormEditor_properties from "./bundles/FormEditor_properties";
+import FormElementDroppable from "./dragdrop/FormElementDroppable";
+import FormElement from "./elements/FormElement";
+
+interface ApplicableElementsBaseConfig extends Config<Container> {
+}
+
+class ApplicableElementsBase extends Container {
+  declare Config: ApplicableElementsBaseConfig;
+
+  protected static readonly APPLICABLE_ELEMENTS_CONTAINER_ID: string = "groupsCt";
+
+  #groupedFormElements: any = null;
+
+  #groupsCt: Container = null;
+
+  #dragActiveVE: ValueExpression = null;
+
+  #readOnlyVE: ValueExpression = null;
+
+  constructor(config: Config<ApplicableElements> = null) {
+    super(config);
+    this.#groupedFormElements = ApplicableElementsBase.#groupFormElements(config.formElements);
+    this.#dragActiveVE = config.dragActiveVE;
+    this.#readOnlyVE = config.readOnlyVE;
+  }
+
+  protected override afterRender(): void {
+    super.afterRender();
+    this.#renderGroupedConditions();
+  }
+
+  #renderGroupedConditions(): void {
+    for (const group in this.#groupedFormElements) {
+      const groupPanel: Panel = new CollapsiblePanel(Config(CollapsiblePanel, {
+        title: this.#getGroupTitle(group),
+        margin: "10 0 0 0",
+      }));
+
+      for (let i: number = 0; i < this.#groupedFormElements[group].length; i++) {
+        const formElement: FormElement = this.#groupedFormElements[group][i];
+        groupPanel.add(
+          new FormElementDroppable(Config(FormElementDroppable, {
+            width: 200,
+            formElementType: formElement.getFormElementType(),
+            formElementIconCls: formElement.getFormElementIconCls(),
+            dragActiveVE: this.#dragActiveVE,
+            readOnlyVE: this.#readOnlyVE,
+          })),
+        );
+      }
+      this.#getGroupsCt().add(groupPanel);
+    }
+
+  }
+
+  #getGroupsCt(): Container {
+    if (!this.#groupsCt) {
+      this.#groupsCt = as(this.queryBy(ApplicableElementsBase.#groupContainerFilter)[0], Container);
+    }
+    return this.#groupsCt;
+  }
+
+  static #groupContainerFilter(component: Component): boolean {
+    return asConfig(component).itemId === ApplicableElementsBase.APPLICABLE_ELEMENTS_CONTAINER_ID;
+  }
+
+  static #groupFormElements(formElements: Array<any>): any {
+    let formElement: FormElement;
+    let group: string;
+    const groupedElements: Record<string, any> = {};
+
+    for (let i: number = 0; i < formElements.length; i++) {
+      formElement = as(ComponentManager.create(formElements[i]), FormElement);
+      group = formElement.getFormElementGroup();
+      if (!groupedElements[group]) {
+        groupedElements[group] = [];
+      }
+      groupedElements[group].push(formElement);
+    }
+
+    return groupedElements;
+  }
+
+  #getGroupTitle(groupName: string): string {
+    return FormEditor_properties["FormEditor_title_group_" + groupName] || groupName;
+  }
+
+}
+
+export default ApplicableElementsBase;

apps/studio-client/apps/main/form-editor-studio-plugin/src/ApplicableElementsHelpContainer.ts

@@ -0,0 +1,68 @@
+import OpenReferenceWindowAction from "@coremedia/studio-client.main.editor-components/sdk/actions/OpenReferenceWindowAction";
+import CollapsiblePanel from "@coremedia/studio-client.main.editor-components/sdk/premular/CollapsiblePanel";
+import Button from "@jangaroo/ext-ts/button/Button";
+import Window from "@jangaroo/ext-ts/window/Window";
+import Config from "@jangaroo/runtime/Config";
+import ConfigUtils from "@jangaroo/runtime/ConfigUtils";
+import FormEditor_properties from "./bundles/FormEditor_properties";
+
+interface ApplicableElementsHelpContainerConfig extends Config<CollapsiblePanel>, Partial<Pick<ApplicableElementsHelpContainer,
+  "helpTextUrl"
+>> {
+}
+
+class ApplicableElementsHelpContainer extends CollapsiblePanel {
+  declare Config: ApplicableElementsHelpContainerConfig;
+
+  static override readonly xtype: string = "com.tallence.formeditor.studio.config.applicableElementsHelpContainer";
+
+  #helpTextUrl: string = null;
+
+  get helpTextUrl(): string {
+    return this.#helpTextUrl;
+  }
+
+  set helpTextUrl(value: string) {
+    this.#helpTextUrl = value;
+  }
+
+  constructor(config: Config<ApplicableElementsHelpContainer> = null) {
+    super(ConfigUtils.apply(Config(ApplicableElementsHelpContainer, {
+      margin: "10 0 0 0",
+      title: FormEditor_properties.FormEditor_label_show_help,
+
+      items: [
+        Config(Button, {
+          itemId: "conditionHelp",
+          iconCls: "flat-help-btn",
+          text: FormEditor_properties.FormEditor_label_show_help,
+          baseAction: new OpenReferenceWindowAction({
+            dialog: Config(Window, {
+              title: FormEditor_properties.FormEditor_help_title,
+              cls: "helper-window",
+              width: 530,
+              minWidth: 300,
+              height: 300,
+              minHeight: 265,
+              layout: "fit",
+              autoScroll: true,
+              collapsible: false,
+              border: false,
+              closeAction: "close",
+              constrain: true,
+              constrainHeader: true,
+              plain: true,
+              loader: {
+                url: config.helpTextUrl,
+                autoLoad: true,
+              },
+            }),
+          }),
+        }),
+      ],
+
+    }), config));
+  }
+}
+
+export default ApplicableElementsHelpContainer;