feedback and fix to make input grow as you type to show content (#22330)

dotCMS · Jun 14, 2022 · 31a8d60 · 31a8d60
1 parent 36783b5
commit 31a8d60
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 15 deletions.
diff --git a/...tlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html b/...tlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html
@@ -12,8 +12,7 @@ <h4 (click)="editInlineActivate($event)">{{ contentType.name }}</h4>
                         #contentTypeNameInput
                         type="text"
                         [value]="contentType.name"
-                        (keydown.enter)="fireChangeName()"
-                        (keydown.escape)="dotEditInline.hideContent()"
+                        (keyup)="inputValueHandler($event)"
                         pInputText
                         dotAutofocus
                     />

diff --git a/...ts/shared/dot-content-types-edit/components/layout/content-types-layout.component.spec.ts b/...ts/shared/dot-content-types-edit/components/layout/content-types-layout.component.spec.ts
@@ -243,9 +243,10 @@ describe('ContentTypesLayoutComponent', () => {
             de.query(By.css('.main-toolbar-left header p-inplace input')).nativeElement.value =
                 'changedName';
             de.query(By.css('.main-toolbar-left header p-inplace input')).triggerEventHandler(
-                'keydown.enter',
+                'keyup',
                 {
-                    stopPropagation: jasmine.createSpy('stopPropagation')
+                    stopPropagation: jasmine.createSpy('stopPropagation'),
+                    key: 'Enter'
                 }
             );
             expect(de.componentInstance.changeContentTypeName.emit).toHaveBeenCalledWith(

diff --git a/...ortlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.ts b/...ortlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.ts
@@ -34,7 +34,7 @@ export class ContentTypesLayoutComponent implements OnChanges, OnInit {
     permissionURL: string;
     pushHistoryURL: string;
     relationshipURL: string;
-    contentTypeNameInputSize: string;
+    contentTypeNameInputSize: number;
     showPermissionsTab: Observable<boolean>;
 
     actions: MenuItem[];
@@ -91,10 +91,28 @@ export class ContentTypesLayoutComponent implements OnChanges, OnInit {
     /**
      * Sets the size of the H4 display to set it in the content textbox to eliminate UI jumps
      *
+     * @param {MouseEvent} event
      * @memberof ContentTypesLayoutComponent
      */
-    editInlineActivate(event): void {
-        this.contentTypeNameInputSize = event.target.offsetWidth;
+    editInlineActivate(event: MouseEvent): void {
+        this.contentTypeNameInputSize = event.target['offsetWidth'];
+    }
+
+    /**
+     * Based on keyboard input executes an action to Change Name/Hide Input/Change Input's size
+     *
+     * @param {KeyboardEvent} event
+     * @memberof ContentTypesLayoutComponent
+     */
+    inputValueHandler(event: KeyboardEvent): void {
+        if (event.key === 'Enter') {
+            this.fireChangeName();
+        } else if (event.key === 'Escape') {
+            this.dotEditInline.hideContent();
+        } else {
+            const newInputSize = event.target['value'].length * 8 + 22;
+            this.contentTypeNameInputSize = newInputSize > 485 ? 485 : newInputSize;
+        }
     }
 
     private loadActions(): void {

diff --git a/...i/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.spec.ts b/...i/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.spec.ts
@@ -763,16 +763,14 @@ describe('DotContentTypesEditComponent', () => {
             const contentTypeLayout = de.query(By.css('dot-content-type-layout'));
             contentTypeLayout.triggerEventHandler('changeContentTypeName', 'CT changed');
 
-            const replacedWorkflowsPropContentType = {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { layout, fields, workflows, ...replacedWorkflowsPropContentType } = {
                 ...responseContentType
             };
 
             replacedWorkflowsPropContentType['workflow'] = fakeContentType.workflows.map(
                 (workflow) => workflow.id
             );
-            delete replacedWorkflowsPropContentType.workflows;
-            delete replacedWorkflowsPropContentType.fields;
-            delete replacedWorkflowsPropContentType.layout;
 
             expect(crudService.putData).toHaveBeenCalledWith(
                 'v1/contenttype/id/1234567890',

diff --git a/...cms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.ts b/...cms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.ts
@@ -131,11 +131,10 @@ export class DotContentTypesEditComponent implements OnInit, OnDestroy {
      * @memberof DotContentTypesEditComponent
      */
     editContentTypeName(name: string): void {
-        const updatedContentType = { ...this.data, name };
-        delete updatedContentType.layout;
-        delete updatedContentType.fields;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { layout, fields, ...updatedContentType } = { ...this.data, name };
 
-        this.updateContentType(updatedContentType);
+        this.updateContentType(updatedContentType as DotCMSContentType);
     }
 
     /**