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

dotCMS · Apr 26, 2022 · 93a98af · 93a98af
1 parent f2df2ac
commit 93a98af
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 11 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,24 @@
     <div class="main-toolbar-left">
         <div class="content-type__title">
             <header>
-                <h4>{{ contentType.name }}</h4>
+                <dot-icon name="{{ contentType.icon }}"></dot-icon>
+                <p-inplace #contentTypeInlineEdit (onActivate)="editInlineActivate($event)">
+                    <ng-template pTemplate="display">
+                        <h4>{{ contentType.name }}</h4>
+                    </ng-template>
+                    <ng-template pTemplate="content">
+                        <input
+                            [style.width.px]="contentTypeNameInputSize"
+                            #contentTypeNameInput
+                            type="text"
+                            [value]="contentType.name"
+                            (keydown.enter)="fireChangeName()"
+                            (keydown.escape)="contentTypeInlineEdit.deactivate()"
+                            pInputText
+                            dotAutofocus
+                        />
+                    </ng-template>
+                </p-inplace>
                 <dot-api-link href="api/v1/contenttype/id/{{ contentType.id }}"></dot-api-link>
             </header>
         </div>
@@ -14,7 +31,8 @@ <h4>{{ contentType.name }}</h4>
                 [label]="contentType.variable"
             ></dot-copy-link>
             <span class="content-type__dot-separator">•</span>
-            {{ 'contenttypes.form.identifier' | dm }}: {{ contentType.id }}
+            {{ 'contenttypes.form.identifier' | dm }}:
+            <dot-copy-link [copy]="contentType.id" [label]="contentType.id"></dot-copy-link>
         </div>
     </div>
     <div class="main-toolbar-right">

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,33 @@ $top-height: ($toolbar-height + $tabview-nav-height + $dot-secondary-toolbar-mai
         header {
             display: flex;
             align-items: center;
+
+            dot-icon {
+                align-items: center;
+                margin-right: $spacing-2;
+            }
+
+            ::ng-deep {
+                p-inplace {
+                    h4,
+                    input {
+                        min-width: 50px;
+                    }
+
+                    .p-inplace-display {
+                        display: flex;
+                        padding: 0;
+                    }
+
+                    .p-inplace-content input {
+                        height: 36px;
+                    }
+
+                    button {
+                        margin-left: $spacing-2;
+                    }
+                }
+            }
         }
 
         h4 {

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
@@ -84,7 +84,7 @@ const fakeContentType: DotCMSContentType = {
     baseType: 'testBaseType'
 };
 
-describe('ContentTypesLayoutComponent', () => {
+fdescribe('ContentTypesLayoutComponent', () => {
     let fixture: ComponentFixture<TestHostComponent>;
     let de: DebugElement;
 
@@ -155,9 +155,8 @@ describe('ContentTypesLayoutComponent', () => {
     });
 
     it('should set the field and row bag options', () => {
-        const fieldDragDropService: FieldDragDropService = fixture.debugElement.injector.get(
-            FieldDragDropService
-        );
+        const fieldDragDropService: FieldDragDropService =
+            fixture.debugElement.injector.get(FieldDragDropService);
         fixture.componentInstance.contentType = fakeContentType;
         spyOn(fieldDragDropService, 'setBagOptions');
         fixture.detectChanges();
@@ -226,9 +225,7 @@ describe('ContentTypesLayoutComponent', () => {
         });
 
         it('should have copy variable link', () => {
-            expect(de.query(By.css('dot-copy-link')).componentInstance.copy).toBe(
-                'helloVariable'
-            );
+            expect(de.query(By.css('dot-copy-link')).componentInstance.copy).toBe('helloVariable');
         });
 
         it('should have edit button', () => {

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,9 +27,14 @@ 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;
+    contentTypeNameInputSize: string;
     showPermissionsTab: Observable<boolean>;
 
     actions: MenuItem[];
@@ -52,10 +67,32 @@ 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 {
+        const contentTypeName = this.contentTypeNameInput.nativeElement.value.trim();
+        this.changeContentTypeName.emit(contentTypeName);
+        this.contentType.name = contentTypeName;
+        this.contentTypeInlineEdit.deactivate();
+    }
+
+    editInlineActivate(event): void {
+        this.contentTypeNameInputSize = event.target.offsetWidth;
+    }
+
     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,