GPU-938

cms-ui/apps/editor-ui/src/app/common/models/index.ts

@@ -28,6 +28,7 @@ export * from './maintenance-mode-state';
 export * from './message-state';
 export * from './node-settings-state';
 export * from './page-language-indicators-state';
+export * from './properties';
 export * from './publish-queue-state';
 export * from './tools-state';
 export * from './ui-state';

cms-ui/apps/editor-ui/src/app/common/models/properties.ts

@@ -0,0 +1,3 @@
+import { EditableFileProps, EditableFolderProps, EditableFormProps, EditableNodeProps, EditablePageProps } from '@gentics/cms-models';
+
+export type EditableProperties = EditableFolderProps | EditablePageProps | EditableFileProps | EditableNodeProps | EditableFormProps;

cms-ui/apps/editor-ui/src/app/content-frame/components/combined-properties-editor/combined-properties-editor.component.html

@@ -84,8 +84,9 @@ <h2 class="item-properties-heading">{{ 'editor.general_properties_label' | i18n
                 [item]="item"
                 [nodeId]="currentNode?.id"
                 [templates]="itemProps.templates"
-                [languages]="itemProps.languages">
-            </properties-editor>
+                [languages]="itemProps.languages"
+                (valueChange)="handlePropChanges($event)"
+            ></properties-editor>
         </div>
 
         <div class="form-reports" *ngIf="activeTabId === ITEM_REPORTS_TAB">

cms-ui/apps/editor-ui/src/app/content-frame/components/combined-properties-editor/combined-properties-editor.component.scss

@@ -88,7 +88,9 @@ hr {
 }
 
 .properties-tabs {
-    width: 20%;
+    min-width: 200px;
+    max-width: 50%;
+
     padding-top: 10px;
     padding-bottom: 10px;
     box-sizing: border-box;

cms-ui/apps/editor-ui/src/app/content-frame/components/combined-properties-editor/combined-properties-editor.component.spec.ts

@@ -83,7 +83,6 @@ describe('CombinedPropertiesEditorComponent', () => {
     let mockObjProps: { [name: string]: EditableObjectTag };
     let mockObjPropsSorted: EditableObjectTag[];
 
-    let editorActions: MockEditorActions;
     let entityResolver: MockEntityResolver;
     let folderActions: MockFolderActions;
     let state: TestApplicationState;
@@ -151,7 +150,6 @@ describe('CombinedPropertiesEditorComponent', () => {
             ],
         });
 
-        editorActions = TestBed.get(EditorActionsService);
         entityResolver = TestBed.get(EntityResolver);
         folderActions = TestBed.get(FolderActionsService);
         state = TestBed.get(ApplicationStateService);
@@ -233,7 +231,7 @@ describe('CombinedPropertiesEditorComponent', () => {
                 multiDetectChanges(fixture, 3);
 
                 const changes = { change: 'some change' };
-                testComponent.combinedPropertiesEditor.propertiesEditor.changes.next(changes as any);
+                testComponent.combinedPropertiesEditor.handlePropChanges(changes as any);
 
                 let promiseResolved = false;
                 testComponent.combinedPropertiesEditor.saveChanges()
@@ -1021,7 +1019,8 @@ describe('CombinedPropertiesEditorComponent', () => {
                     }));
 
                     const editedItem = cloneDeep(mockPage);
-                    (editedItem.tags[editedObjProp.name].properties[editedObjProp.tagType.parts[0].keyword] as StringTagPartProperty).stringValue = 'modified value';
+                    (editedItem.tags[editedObjProp.name]
+                        .properties[editedObjProp.tagType.parts[0].keyword] as StringTagPartProperty).stringValue = 'modified value';
                     editedItem.tags[editedObjProp.name].active = true;
                     folderActions.getItem.and.returnValue(editedItem);
 
@@ -1077,7 +1076,8 @@ describe('CombinedPropertiesEditorComponent', () => {
                     }));
 
                     const editedItem0 = cloneDeep(mockFolder);
-                    (editedItem0.tags[editedObjProp.name].properties[editedObjProp.tagType.parts[0].keyword] as StringTagPartProperty).stringValue = 'modified value';
+                    (editedItem0.tags[editedObjProp.name]
+                        .properties[editedObjProp.tagType.parts[0].keyword] as StringTagPartProperty).stringValue = 'modified value';
                     editedItem0.tags[editedObjProp.name].active = true;
                     folderActions.getItem.and.returnValue(editedItem0);
                     const editedItem1 = cloneDeep(editedItem0);
@@ -1152,7 +1152,8 @@ describe('CombinedPropertiesEditorComponent', () => {
                     }));
 
                     const editedItem = cloneDeep(mockPage);
-                    (editedItem.tags[editedObjProp.name].properties[editedObjProp.tagType.parts[0].keyword] as StringTagPartProperty).stringValue = 'modified value';
+                    (editedItem.tags[editedObjProp.name]
+                        .properties[editedObjProp.tagType.parts[0].keyword] as StringTagPartProperty).stringValue = 'modified value';
                     editedItem.tags[editedObjProp.name].active = true;
                     folderActions.getItem.and.returnValue(editedItem);
 
@@ -1362,12 +1363,13 @@ describe('CombinedPropertiesEditorComponent', () => {
                 testComponent.item = mockPage;
                 fixture.detectChanges();
                 let contentTags: Tag[];
-                testComponent.combinedPropertiesEditor.itemWithContentTags$.subscribe((itemWithContentTags) => {
+                const sub = testComponent.combinedPropertiesEditor.itemWithContentTags$.subscribe((itemWithContentTags) => {
                     contentTags = itemWithContentTags.properties;
                 });
-                tick();
+                tick(1000);
                 const mockContentTags = getExampleEditableTag();
                 expect(contentTags).toEqual([mockContentTags]);
+                sub.unsubscribe();
             }),
         );