From dbf4f72f3aafdc30f4e806627d5ea85f6abae15e Mon Sep 17 00:00:00 2001
From: Alfredo Li <alfredo@dotcms.com>
Date: Mon, 25 Apr 2022 09:01:29 -0600
Subject: [PATCH] dotCMS/core#21915 Add inline edit to content type name and
 Icon

---
 ...t-type-fields-properties-form.component.ts |  2 +-
 .../content-types-layout.component.html       | 25 ++++++++++++++-
 .../content-types-layout.component.scss       | 16 ++++++++++
 .../layout/content-types-layout.component.ts  | 32 ++++++++++++++++++-
 .../dot-content-types-edit.component.html     |  1 +
 .../dot-content-types-edit.component.ts       | 11 +++++++
 .../dot-content-types-edit.module.ts          |  2 ++
 7 files changed, 86 insertions(+), 3 deletions(-)

diff --git a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/content-type-fields-properties-form.component.ts b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/content-type-fields-properties-form.component.ts
index 7dc88f8476..7ae4f4bdf5 100644
--- a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/content-type-fields-properties-form.component.ts
+++ b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/content-type-fields-properties-form.component.ts
@@ -42,7 +42,7 @@ export class ContentTypeFieldsPropertiesFormComponent implements OnChanges, OnIn
     constructor(private fb: FormBuilder, private fieldPropertyService: FieldPropertyService) {}
 
     ngOnChanges(changes: SimpleChanges): void {
-        if (changes.formFieldData.currentValue && this.formFieldData) {
+        if (changes.formFieldData?.currentValue && this.formFieldData) {
             this.destroy();
 
             setTimeout(this.init.bind(this), 0);
diff --git a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html
index 96866c8026..afe114f3f9 100644
--- a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html
+++ b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html
@@ -2,7 +2,30 @@
     <div class="main-toolbar-left">
         <div class="content-type__title">
             <header>
-                <h4>{{ contentType.name }}</h4>
+                <p-inplace #contentTypeInlineEdit closable="true">
+                    <ng-template pTemplate="display">
+                        <dot-icon name="{{ contentType.icon }}"></dot-icon>
+                        <h4>{{ contentType.name }}</h4>
+                    </ng-template>
+                    <ng-template pTemplate="content">
+                        <input
+                            #contentTypeNameInput
+                            type="text"
+                            [value]="contentType.name"
+                            (keydown.enter)="fireChangeName()"
+                            (keydown.escape)="contentTypeInlineEdit.deactivate()"
+                            pInputText
+                            dotAutofocus
+                        />
+                        <button
+                            pButton
+                            link
+                            [label]="'save' | dm"
+                            [disabled]="!contentTypeNameInput.value"
+                            (click)="fireChangeName()"
+                        ></button>
+                    </ng-template>
+                </p-inplace>
                 <dot-api-link href="api/v1/contenttype/id/{{ contentType.id }}"></dot-api-link>
             </header>
         </div>
diff --git a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.scss b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.scss
index 1aad17f990..38effe22ab 100644
--- a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.scss
+++ b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.scss
@@ -102,6 +102,22 @@ $top-height: ($toolbar-height + $tabview-nav-height + $dot-secondary-toolbar-mai
         header {
             display: flex;
             align-items: center;
+
+            ::ng-deep {
+                .p-inplace-display {
+                    display: flex;
+                    padding: 0;
+
+                    dot-icon {
+                        align-items: center;
+                        margin-right: $spacing-2;
+                    }
+                }
+
+                button {
+                    margin-left: $spacing-2;
+                }
+            }
         }
 
         h4 {
diff --git a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.ts b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.ts
index 44494e082c..d861a90440 100644
--- a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.ts
+++ b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.ts
@@ -1,4 +1,13 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    OnChanges,
+    OnInit,
+    Output,
+    ViewChild
+} from '@angular/core';
 import { DotMessageService } from '@services/dot-message/dot-messages.service';
 import { DotMenuService } from '@services/dot-menu.service';
 import { FieldDragDropService } from '../fields/service';
@@ -8,6 +17,7 @@ import { DotEventsService } from '@services/dot-events/dot-events.service';
 import { DotCMSContentType } from '@dotcms/dotcms-models';
 import { DotCurrentUserService } from '@services/dot-current-user/dot-current-user.service';
 import { Observable } from 'rxjs';
+import { Inplace } from 'primeng/inplace';
 
 @Component({
     selector: 'dot-content-type-layout',
@@ -17,6 +27,10 @@ import { Observable } from 'rxjs';
 export class ContentTypesLayoutComponent implements OnChanges, OnInit {
     @Input() contentType: DotCMSContentType;
     @Output() openEditDialog: EventEmitter<unknown> = new EventEmitter();
+    @Output() changeContentTypeName: EventEmitter<string> = new EventEmitter();
+    @ViewChild('contentTypeNameInput') contentTypeNameInput: ElementRef;
+    @ViewChild('contentTypeInlineEdit') contentTypeInlineEdit: Inplace;
+
     permissionURL: string;
     pushHistoryURL: string;
     relationshipURL: string;
@@ -52,10 +66,26 @@ export class ContentTypesLayoutComponent implements OnChanges, OnInit {
         }
     }
 
+    /**
+     * Emits add-row event to add new row
+     *
+     * @memberof ContentTypesLayoutComponent
+     */
+
     fireAddRowEvent(): void {
         this.dotEventsService.notify('add-row');
     }
 
+    /**
+     * Emits new name to parent component and close Edit Inline mode
+     *
+     * @memberof ContentTypesLayoutComponent
+     */
+    fireChangeName(): void {
+        this.changeContentTypeName.emit(this.contentTypeNameInput.nativeElement.value.trim());
+        this.contentTypeInlineEdit.deactivate();
+    }
+
     private loadActions(): void {
         this.actions = [
             {
diff --git a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.html b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.html
index 4e590de642..e1cabee0ba 100644
--- a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.html
+++ b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.html
@@ -1,6 +1,7 @@
 <dot-content-type-layout
     [contentType]="data"
     (openEditDialog)="startFormDialog()"
+    (changeContentTypeName)="editContentTypeName($event)"
     *ngIf="isEditMode()"
 >
     <dot-content-type-fields-drop-zone
diff --git a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.ts b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.ts
index 57641e5bda..fef2566f2f 100644
--- a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.ts
+++ b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.ts
@@ -124,6 +124,17 @@ export class DotContentTypesEditComponent implements OnInit, OnDestroy {
         this.setEditContentletDialogOptions();
     }
 
+    /**
+     * Set updated name on Content Type and send a request to save it
+     * @param {string} name
+     *
+     * @memberof DotContentTypesEditComponent
+     */
+    editContentTypeName(name: string): void {
+        const updatedContentType = { ...this.data, name };
+        this.updateContentType(updatedContentType);
+    }
+
     /**
      * Set the icon, labels and placeholder in the template
      * @memberof DotContentTypesEditComponent
diff --git a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.module.ts b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.module.ts
index ee154b1ff7..6ae39fbe07 100644
--- a/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.module.ts
+++ b/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.module.ts
@@ -69,6 +69,7 @@ import { OverlayPanelModule } from 'primeng/overlaypanel';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { SplitButtonModule } from 'primeng/splitbutton';
 import { TabViewModule } from 'primeng/tabview';
+import { InplaceModule } from 'primeng/inplace';
 import { DotRelationshipTreeModule } from '@components/dot-relationship-tree/dot-relationship-tree.module';
 import { DotPortletBoxModule } from '@components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.module';
 import { DotMdIconSelectorModule } from '@dotcms/app/view/components/_common/dot-md-icon-selector/dot-md-icon-selector.module';
@@ -129,6 +130,7 @@ import { DotMdIconSelectorModule } from '@dotcms/app/view/components/_common/dot
         DropdownModule,
         FormsModule,
         IFrameModule,
+        InplaceModule,
         InputTextModule,
         MultiSelectModule,
         OverlayPanelModule,