dotCMS/core#21915 Add inline edit to content type name and Icon

dotCMS · Apr 25, 2022 · dbf4f72 · dbf4f72
1 parent f2df2ac
commit dbf4f72
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 3 deletions.
diff --git a/...elds/content-type-fields-properties-form/content-type-fields-properties-form.component.ts b/...elds/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/...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
@@ -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/...tlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.scss b/...tlets/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/...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
@@ -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/...s-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.component.html b/...s-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/...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
@@ -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/...dotcms-ui/src/app/portlets/shared/dot-content-types-edit/dot-content-types-edit.module.ts b/...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,