Merge tallence master

README.md

@@ -19,12 +19,11 @@ Form-Actions and -fields can be customized and added by your need.
 
 # Getting started
 
-The extension runs with CoreMedia 11 (v2201.2). And also runs with:
-- v2110.1. See the release [cmcc-11-2110.1](https://github.com/tallence/core-forms/releases/tag/cmcc-11-2110.1).
-- v2107.1. See the release [cmcc-10-2107.1](https://github.com/tallence/core-forms/releases/tag/cmcc-10-2107.1).
+See the [releases](https://github.com/tallence/core-forms/releases) for tested compatibilities.
+For earlier versions, have a look into these branches:
 - 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)
+- Other CoreMedia 9 versions: 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)
 

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

@@ -5,24 +5,24 @@
   "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.base-models": "2201.2.0",
-    "@coremedia/studio-client.cap-base-models": "2201.2.0",
-    "@coremedia/studio-client.cap-rest-client": "2201.2.0",
-    "@coremedia/studio-client.client-core": "2201.2.0",
-    "@coremedia/studio-client.core-icons": "2201.2.0",
-    "@coremedia/studio-client.ext.errors-validation-components": "2201.2.0",
-    "@coremedia/studio-client.ext.ui-components": "2201.2.0",
-    "@coremedia/studio-client.main.bpbase-studio-dynamic-query-list": "2201.2.0",
-    "@coremedia/studio-client.main.editor-components": "2201.2.0",
-    "@jangaroo/ext-ts": "^1.0.2",
-    "@jangaroo/runtime": "^1.1.1"
+    "@coremedia/studio-client.base-models": "2304.1.0",
+    "@coremedia/studio-client.cap-base-models": "2304.1.0",
+    "@coremedia/studio-client.cap-rest-client": "2304.1.0",
+    "@coremedia/studio-client.client-core": "2304.1.0",
+    "@coremedia/studio-client.core-icons": "2304.1.0",
+    "@coremedia/studio-client.ext.errors-validation-components": "2304.1.0",
+    "@coremedia/studio-client.ext.ui-components": "2304.1.0",
+    "@coremedia/studio-client.main.bpbase-studio-dynamic-query-list": "2304.1.0",
+    "@coremedia/studio-client.main.editor-components": "2304.1.0",
+    "@jangaroo/ext-ts": "^1.0.3",
+    "@jangaroo/runtime": "^1.4.2"
   },
   "devDependencies": {
-    "@jangaroo/build": "^1.1.1",
-    "@jangaroo/core": "^1.1.1",
-    "@jangaroo/eslint-config": "^1.1.1",
-    "@jangaroo/publish": "^1.1.1",
-    "eslint": "^7.27.0",
+    "@jangaroo/build": "^1.4.2",
+    "@jangaroo/core": "^1.4.2",
+    "@jangaroo/eslint-config": "^1.4.2",
+    "@jangaroo/publish": "^1.4.2",
+    "eslint": "^7.32.0",
     "rimraf": "^3.0.2"
   },
   "scripts": {

apps/studio-client/apps/main/form-editor-studio-plugin/sencha/sass/src/FormsStudioPlugin.scss

@@ -4,6 +4,8 @@
   $_group_container: $_block + "--element-group-container";
   $_applicable_element_container: $_block + "--applicable-element-container";
 
+  $form_page_block: "form-page-container";
+
   $form_element_block: "form-element-drop-container";
   $form_element_drag_active: $form_element_block + "--drag-active";
   $form_element_drop_active: $form_element_block + "--drop-active";
@@ -28,6 +30,14 @@
     color: rgba(0, 0, 0, 0.27);
   }
 
+  .#{$form_page_block} {
+    margin: 10px 15px 0 10px;
+    background: transparent;
+    border: 2px solid rgba(0, 0, 0, 0.04);
+    padding: 6px;
+    color: rgba(0, 0, 0, 0.27);
+  }
+
   .#{$form_element_drag_active} {
     border: 2px dashed rgba(0, 0, 0, 0.61);
     color: rgba(0, 0, 0, 0.61);

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

@@ -1,3 +1,19 @@
+/*
+ * 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 Container from "@jangaroo/ext-ts/container/Container";
 import Config from "@jangaroo/runtime/Config";

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

@@ -1,3 +1,19 @@
+/*
+ * 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 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";

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

@@ -1,3 +1,19 @@
+/*
+ * 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 BindComponentsPlugin from "@coremedia/studio-client.ext.ui-components/plugins/BindComponentsPlugin";
 import Container from "@jangaroo/ext-ts/container/Container";

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

@@ -1,3 +1,19 @@
+/*
+ * 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 ValueExpressionFactory from "@coremedia/studio-client.client-core/data/ValueExpressionFactory";
 import IconButton from "@coremedia/studio-client.ext.ui-components/components/IconButton";
 import BindPropertyPlugin from "@coremedia/studio-client.ext.ui-components/plugins/BindPropertyPlugin";

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

@@ -111,7 +111,7 @@ class AppliedFormElementsContainerBase extends Container {
     const panel = as(this.queryById(AppliedFormElementsContainerBase.FORM_ELEMENT_PANEL), CollapsiblePanel);
 
     const formElementEditor = as(reusableComponentsService.requestComponentForReuse(this.formElement.getType()), FormElement);
-    if (this.formElement != formElementEditor.getFormElementStructWrapper()) {
+    if (formElementEditor && this.formElement != formElementEditor.getFormElementStructWrapper()) {
       formElementEditor.updateFormElementStructWrapper(this.formElement);
       const component = as(formElementEditor, Component);
       if (component.isInstance) {
@@ -129,15 +129,10 @@ class AppliedFormElementsContainerBase extends Container {
     this.#panel = panel;
   }
 
-  override destroy(...params): void {
-    this.#removeReusableFormElement();
-    super.destroy(params);
-  }
-
   #collapsedElementChangeListener(ve: ValueExpression): void {
     if (ve.getValue() == this.formElement.getId()) {
       const formElementEditor = as(reusableComponentsService.requestComponentForReuse(this.formElement.getType()), FormElement);
-      if (this.formElement != formElementEditor.getFormElementStructWrapper()) {
+      if (formElementEditor && this.formElement != formElementEditor.getFormElementStructWrapper()) {
         formElementEditor.updateFormElementStructWrapper(this.formElement);
         const component = as(formElementEditor, Component);
         if (component.isInstance) {
@@ -167,7 +162,7 @@ class AppliedFormElementsContainerBase extends Container {
 
   iconClassTransformer(elementType: string): string {
     const formElementEditor = as(reusableComponentsService.requestComponentForReuse(elementType), FormElement);
-    return formElementEditor.getFormElementIconCls() || "";
+    return formElementEditor ? formElementEditor.getFormElementIconCls() : "";
   }
 
   static getTitleUndefinedValue(formElement: FormElementStructWrapper): string {
@@ -181,11 +176,22 @@ class AppliedFormElementsContainerBase extends Container {
 
   /**
    * Before the applied form elements container is destroyed, the reusable form element must be removed from the
-   * container. This means that the component can still be reused and is not destroyed itself.
+   * container. This means that the component can still be reused and is not destroyed itself. It is checked whether a
+   * reusable component can be found for the given form element. This is not possible for a page as form element,
+   * because the container is not reusable as switching between pageable and a single page form is possible.
    */
   #removeReusableFormElement(): void {
     this.formElementsManager.getCollapsedElementVE().removeChangeListener(bind(this, this.#collapsedElementChangeListener));
-    reusableComponentsService.removeReusableComponentCleanly(reusableComponentsService.requestComponentForReuse(this.formElement.getType()));
+    let requestComponentForReuse = reusableComponentsService.requestComponentForReuse(this.formElement.getType());
+    if (requestComponentForReuse) {
+      reusableComponentsService.removeReusableComponentCleanly(requestComponentForReuse);
+    }
+  }
+
+
+  override destroy(...args): any {
+    this.#removeReusableFormElement();
+    return super.destroy(...args);
   }
 }
 

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

@@ -0,0 +1,50 @@
+import ValueExpressionFactory from "@coremedia/studio-client.client-core/data/ValueExpressionFactory";
+import Config from "@jangaroo/runtime/Config";
+import ConfigUtils from "@jangaroo/runtime/ConfigUtils";
+import StateFulCollapsiblePanel from "./components/StateFulCollapsiblePanel";
+import ShowFormIssuesPlugin from "./plugins/ShowFormIssuesPlugin";
+import AppliedFormPageContainerBase from "./AppliedFormPageContainerBase";
+import PageElementEditor from "./elements/PageElementEditor";
+import FormEditor_properties from "./bundles/FormEditor_properties";
+
+interface AppliedFormPageContainerConfig extends Config<AppliedFormPageContainerBase> {
+}
+
+class AppliedFormPageContainer extends AppliedFormPageContainerBase {
+  declare Config: AppliedFormPageContainerConfig;
+
+  static override readonly xtype: string = "com.tallence.formeditor.studio.config.appliedFormPageContainer";
+
+  constructor(config: Config<AppliedFormPageContainer> = null) {
+    super((() => ConfigUtils.apply(Config(AppliedFormPageContainer, {
+
+      items: [
+        /* We need to overwrite the collapsedCls. Otherwise the header would have a transparent background.  */
+        Config(StateFulCollapsiblePanel, {
+          margin: "10 15 0 10",
+          collapsible: false,
+          itemId: AppliedFormPageContainerBase.FORM_ELEMENT_PANEL,
+          collapsedCls: "collapsed-form-element",
+          animCollapse: false,
+          title: FormEditor_properties.FormEditor_pages_properties_title,
+          plugins: [
+            Config(ShowFormIssuesPlugin, {
+              issuesVE: config.bindTo.extendBy(["issues"]),
+              propertyPathVE: ValueExpressionFactory.createFromValue(config.formElement.getPropertyPath()),
+            }),
+          ],
+          items: [
+            Config(PageElementEditor, {
+              itemId: AppliedFormPageContainerBase.FORM_PAGE_EDITOR,
+              bindTo: config.bindTo,
+              forceReadOnlyValueExpression: config.forceReadOnlyValueExpression,
+              formElement: config.formElement
+            })
+          ],
+        })
+      ],
+    }), config))());
+  }
+}
+
+export default AppliedFormPageContainer;

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

@@ -0,0 +1,82 @@
+/*
+ * 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 PropertyEditorUtil from "@coremedia/studio-client.main.editor-components/sdk/util/PropertyEditorUtil";
+import Container from "@jangaroo/ext-ts/container/Container";
+import Config from "@jangaroo/runtime/Config";
+import FormElementsManager from "./helper/FormElementsManager";
+import FormElementStructWrapper from "./model/FormElementStructWrapper";
+import PageElementEditor from "./elements/PageElementEditor";
+import createComponentSelector from "@coremedia/studio-client.ext.ui-components/util/createComponentSelector";
+
+interface AppliedFormPageContainerBaseConfig extends Config<Container>, Partial<Pick<AppliedFormPageContainerBase,
+        "bindTo" |
+        "forceReadOnlyValueExpression" |
+        "formElement" |
+        "formElementsManager">> {
+}
+
+class AppliedFormPageContainerBase extends Container {
+  declare Config: AppliedFormPageContainerBaseConfig;
+
+  protected static readonly FORM_ELEMENT_PANEL: string = "form-element-collapsible-panel";
+  protected static readonly FORM_ELEMENT_HEADER: string = "form-element-header";
+  protected static readonly FORM_PAGE_EDITOR: string = "pageEditor";
+
+  #bindTo: ValueExpression = null;
+  #forceReadOnlyValueExpression: ValueExpression = null;
+  #formElement: FormElementStructWrapper = null;
+  #formElementsManager: FormElementsManager = null;
+  #readOnlyVE: ValueExpression = null;
+
+  set bindTo(value: ValueExpression) {
+    this.#bindTo = value;
+  }
+
+  set forceReadOnlyValueExpression(value: ValueExpression) {
+    this.#forceReadOnlyValueExpression = value;
+  }
+
+  set formElement(value: FormElementStructWrapper) {
+    this.#formElement = value;
+  }
+
+  set formElementsManager(value: FormElementsManager) {
+    this.#formElementsManager = value;
+  }
+
+  constructor(config: Config<AppliedFormPageContainerBase> = null) {
+    super(config);
+    this.formElement = config.formElement;
+    this.formElementsManager = config.formElementsManager;
+    // Create a value expression to bind the disabled state of the drag source. It is necessary to use the two
+    // value expressions 'bindTo' and 'forceReadOnlyValueExpression' to create the read only value expression. If a
+    // content is checked out by another user, the read only value is not stored in the forceReadOnlyValueExpression.
+    this.#readOnlyVE = PropertyEditorUtil.createReadOnlyValueExpression(config.bindTo, config.forceReadOnlyValueExpression);
+  }
+
+  protected override afterRender(): void {
+    super.afterRender();
+    const formElementEditor = this.query(createComponentSelector().itemId(AppliedFormPageContainerBase.FORM_PAGE_EDITOR).build())[0] as PageElementEditor;
+    if (this.formElement != formElementEditor.getFormElementStructWrapper()) {
+      formElementEditor.updateFormElementStructWrapper(this.formElement);
+    }
+  }
+
+}
+
+export default AppliedFormPageContainerBase;