Merge pull request #85 from tallence/cm11-ph

Cm11 migration

README.md

@@ -19,15 +19,17 @@ Form-Actions and -fields can be customized and added by your need.
 
 # Getting started
 
-The extension runs with CoreMedia 10 (v2107.1). The extension also runs with:
+The extension runs with CoreMedia 11 (v2110.1). And also runs with:
+- v2107.1. See the release [cmcc-10-2107.1](https://github.com/tallence/core-forms/releases/tag/cmcc-10-2107.1).
 - v2010.2. See the branch [2010.2-compatible](https://github.com/tallence/core-forms/tree/2010.2-compatible).
 - CoreMedia 9 (v19.04). See the branch: [1904.2-compatible](https://github.com/tallence/core-forms/tree/1904.2-compatible).
   It is in general compatible with the versions 17.10 and 18.10, but some small changes could be required (import paths, names of artifacts)
 
 This repo covers the studio- and the backend-cae part. If you are looking for an example implementation for the frontend part (a Vue.js-App wrapped in a CoreMedia-Frontend-Workspace-Theme) have a look here: [core-forms-frontend](https://github.com/tallence/core-forms-frontend)
 
-**Headless-Server**
-The integration of the FormEditor in the Headless-Server ist still WIP. If you need it now, consider switching to the branch "headless-preparations".
+## CM11 Getting started
+The studio-frontend has been migrated into the new studio-pnpm-workspace structure. 
+The form-editor-studio-plugin can still be part of this external extensions repo and does not need to be moved into `apps/studio-client/apps/main/extensions/`. But it needs to be registered as an extension with the extensions-tool: Call `mvn extensions:sync -Denable=core-forms` in the folder `workspace-configuration/extensions`   
 
 ## Integrate the Code in your CoreMedia Blueprint Workspace
 You can integrate the extension in three ways:
@@ -56,11 +58,6 @@ Download the repo and copy the files into your Blueprint-Workspace Extension-Fol
 
 This way you won't be able to merge new commits made in this repo back to yours. But if you do not like Git Submodules, you don't have to deal with them. 
 
-**3. Own Workspace**
-
-As mentioned by [Matthias Faust](https://github.com/mfaust) from CoreMedia on the 2018 DevCon, it will soon be possible to include external extensions into the Blueprint Workspace.
-This would enable you to create a fork from this project and build it's jars independently from the Blueprint-Workspace.
-
 However the formeditor uses maven-dependencies of the blueprint-workspace, so you have to keep the versions in sync.
 
 

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;