Feature/container properties form

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.html

@@ -2,13 +2,15 @@
     <div class="container-create__tab-container">
         <p-tabView class="container-create__tabs">
             <p-tabPanel [header]="'message.containers.tab.properties' | dm">
-                <ng-template pTemplate="content"> Complex Content to Lazy Load 1 </ng-template>
+                <ng-template pTemplate="content">
+                    <dot-container-properties></dot-container-properties>
+                </ng-template>
             </p-tabPanel>
             <p-tabPanel [header]="'message.containers.tab.permissions' | dm">
-                <ng-template pTemplate="content"> Complex Content to Lazy Load 2 </ng-template>
+                <dot-container-permissions></dot-container-permissions>
             </p-tabPanel>
             <p-tabPanel [header]="'message.containers.tab.history' | dm">
-                <ng-template pTemplate="content"> Complex Content to Lazy Load 3 </ng-template>
+                <dot-container-history></dot-container-history>
             </p-tabPanel>
         </p-tabView>
     </div>

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.component.scss

@@ -3,18 +3,23 @@
 :host ::ng-deep {
     .container-create__tab-container {
         display: flex;
-        flex: 1;
         flex-direction: column;
+        overflow: auto;
 
         .container-create__tabs {
+            .p-tabview-panels {
+                overflow: hidden;
+                flex-grow: 1;
+                flex-basis: 0;
+            }
             .p-tabview-nav {
                 padding: 0 $spacing-4;
                 background: $white;
             }
 
             .p-tabview-panel {
                 padding: 0 $spacing-4;
-                padding-top: $spacing-8;
+                padding-top: $spacing-4;
             }
         }
     }

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-create.module.ts

@@ -6,6 +6,9 @@ import { ContainerCreateComponent } from './container-create.component';
 import { DotPortletBaseModule } from '@components/dot-portlet-base/dot-portlet-base.module';
 import { TabViewModule } from 'primeng/tabview';
 import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module';
+import { DotContainerPropertiesModule } from '@portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.module';
+import { ContainerPermissionsModule } from '@dotcms/app/portlets/dot-containers/container-create/container-permissions/container-permissions.module';
+import { ContainerHistoryModule } from '@dotcms/app/portlets/dot-containers/container-create/container-history/container-history.module';
 
 @NgModule({
     declarations: [ContainerCreateComponent],
@@ -14,7 +17,11 @@ import { DotMessagePipeModule } from '@pipes/dot-message/dot-message-pipe.module
         ContainerCreateRoutingModule,
         DotPortletBaseModule,
         TabViewModule,
-        DotMessagePipeModule
+        DotMessagePipeModule,
+        DotContainerPropertiesModule,
+        DotMessagePipeModule,
+        ContainerPermissionsModule,
+        ContainerHistoryModule
     ]
 })
 export class ContainerCreateModule {}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.html

@@ -0,0 +1,3 @@
+<dot-portlet-box>
+    <dot-iframe data-testId="historyIframe" [src]="historyUrl"></dot-iframe>
+</dot-portlet-box>

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.scss

@@ -0,0 +1,4 @@
+dot-portlet-box {
+    height: 100vh;
+    overflow: hidden;
+}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.spec.ts

@@ -0,0 +1,47 @@
+import { Component, DebugElement, ElementRef, Input, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ContainerHistoryComponent } from './container-history.component';
+import { DotPortletBoxModule } from '@components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.module';
+
+@Component({
+    selector: 'dot-iframe',
+    template: ''
+})
+export class IframeMockComponent {
+    @Input() src: string;
+    @ViewChild('iframeElement') iframeElement: ElementRef;
+}
+
+describe('ContainerHistoryComponent', () => {
+    let component: ContainerHistoryComponent;
+    let fixture: ComponentFixture<ContainerHistoryComponent>;
+    let de: DebugElement;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [ContainerHistoryComponent, IframeMockComponent],
+            imports: [DotPortletBoxModule]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ContainerHistoryComponent);
+        de = fixture.debugElement;
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    describe('history', () => {
+        beforeEach(() => {
+            fixture.detectChanges();
+        });
+
+        it('should set iframe history url', () => {
+            const permissions = de.query(By.css('[data-testId="historyIframe"]'));
+            expect(permissions.componentInstance.src).toBe('/html/containers/push_history.jsp');
+        });
+    });
+});

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnChanges, OnInit, ViewChild } from '@angular/core';
+import { IframeComponent } from '@components/_common/iframe/iframe-component';
+
+@Component({
+    selector: 'dot-container-history',
+    templateUrl: './container-history.component.html',
+    styleUrls: ['./container-history.component.scss']
+})
+export class ContainerHistoryComponent implements OnInit, OnChanges {
+    @ViewChild('historyIframe') historyIframe: IframeComponent;
+    historyUrl = '';
+
+    ngOnInit() {
+        this.historyUrl = `/html/containers/push_history.jsp`;
+    }
+
+    ngOnChanges(): void {
+        if (this.historyIframe) {
+            this.historyIframe.iframeElement.nativeElement.contentWindow.location.reload();
+        }
+    }
+}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-history/container-history.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ContainerHistoryComponent } from './container-history.component';
+import { DotPortletBoxModule } from '@components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.module';
+import { IFrameModule } from '@components/_common/iframe';
+
+@NgModule({
+    declarations: [ContainerHistoryComponent],
+    exports: [ContainerHistoryComponent],
+    imports: [CommonModule, DotPortletBoxModule, IFrameModule]
+})
+export class ContainerHistoryModule {}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.html

@@ -0,0 +1,3 @@
+<dot-portlet-box>
+    <dot-iframe data-testId="permissionsIframe" [src]="permissionsUrl"></dot-iframe>
+</dot-portlet-box>

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.scss

@@ -0,0 +1,4 @@
+dot-portlet-box {
+    height: 100vh;
+    overflow: hidden;
+}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.spec.ts

@@ -0,0 +1,47 @@
+import { Component, DebugElement, ElementRef, Input, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ContainerPermissionsComponent } from './container-permissions.component';
+import { DotPortletBoxModule } from '@components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.module';
+
+@Component({
+    selector: 'dot-iframe',
+    template: ''
+})
+export class IframeMockComponent {
+    @Input() src: string;
+    @ViewChild('iframeElement') iframeElement: ElementRef;
+}
+
+describe('ContainerPermissionsComponent', () => {
+    let component: ContainerPermissionsComponent;
+    let fixture: ComponentFixture<ContainerPermissionsComponent>;
+    let de: DebugElement;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [ContainerPermissionsComponent, IframeMockComponent],
+            imports: [DotPortletBoxModule]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ContainerPermissionsComponent);
+        de = fixture.debugElement;
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    describe('permissions', () => {
+        beforeEach(() => {
+            fixture.detectChanges();
+        });
+
+        it('should set iframe permissions url', () => {
+            const permissions = de.query(By.css('[data-testId="permissionsIframe"]'));
+            expect(permissions.componentInstance.src).toBe('/html/containers/permissions.jsp');
+        });
+    });
+});

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'dot-container-permissions',
+    templateUrl: './container-permissions.component.html',
+    styleUrls: ['./container-permissions.component.scss']
+})
+export class ContainerPermissionsComponent implements OnInit {
+    permissionsUrl = '';
+
+    ngOnInit() {
+        this.permissionsUrl = `/html/containers/permissions.jsp`;
+    }
+}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/container-permissions/container-permissions.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ContainerPermissionsComponent } from './container-permissions.component';
+import { DotPortletBoxModule } from '@components/dot-portlet-base/components/dot-portlet-box/dot-portlet-box.module';
+import { IFrameModule } from '@components/_common/iframe';
+
+@NgModule({
+    declarations: [ContainerPermissionsComponent],
+    exports: [ContainerPermissionsComponent],
+    imports: [CommonModule, DotPortletBoxModule, IFrameModule]
+})
+export class ContainerPermissionsModule {}

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-create/dot-container-properties/dot-container-properties.component.html

@@ -0,0 +1,116 @@
+<ng-container *ngIf="vm$ | async as vm">
+    <div class="dot-container-properties__title-container">
+        <p-inplace #editText>
+            <ng-template pTemplate="content">
+                <span class="p-input-icon-right">
+                    <i class="pi pi-times" (click)="editText.deactivate()"></i>
+                    <input type="text" pInputText />
+                </span>
+            </ng-template>
+            <ng-template pTemplate="display">
+                Click to Edit
+                <i class="pi pi-pencil"></i>
+            </ng-template>
+        </p-inplace>
+    </div>
+    <div class="field">
+        <label for="description" class="block">Description</label>
+        <input id="description" type="text" pInputText />
+    </div>
+    <div class="field">
+        <label for="max-contents" class="block">Max Contents</label>
+        <input id="max-contents" type="text" pInputText />
+        <button pButton class="p-button-secondary" type="button" label="Clear"></button>
+        <button pButton type="button" label="content type code"></button>
+    </div>
+
+    <div class="dot-container-properties__code-container-outer">
+        <form [formGroup]="form">
+            <div class="dot-container-properties__pre-post-loop">
+                <div
+                    class="dot-container-properties__pre-post-loop-inplace"
+                    *ngIf="!vm.showPrePostLoopInput"
+                >
+                    <button
+                        pButton
+                        class="p-button-outlined p-button-secondary"
+                        type="button"
+                        label="ADD PRE AND POST LOOP CODE"
+                        (click)="showLoopInput()"
+                    ></button>
+                </div>
+                <div *ngIf="vm.showPrePostLoopInput">
+                    <label>Pre-loop</label>
+                    <dot-textarea-content
+                        formControlName="body"
+                        #value
+                        height="100%"
+                        formControlName="body"
+                        [show]="['code']"
+                        language="html"
+                        (monacoInit)="initEditor($event)"
+                    ></dot-textarea-content>
+                </div>
+            </div>
+            <div class="dot-container-properties__content-tab-container">
+                <label>Content Type and Code</label>
+                <p-tabView
+                    [scrollable]="true"
+                    (onChange)="handleChange($event)"
+                    [activeIndex]="vm.activeTabIndex"
+                >
+                    <p-tabPanel headerStyleClass="tab-panel-btn">
+                        <ng-template pTemplate="header">
+                            <i
+                                class="pi pi-plus"
+                                (click)="handleChange($event); actionsMenu.toggle($event)"
+                            ></i>
+                            <p-menu
+                                #actionsMenu
+                                [popup]="true"
+                                [model]="vm.contentTypes"
+                                appendTo="body"
+                            ></p-menu>
+                        </ng-template>
+                    </p-tabPanel>
+                    <p-tabPanel closable="true" header="Content (Generic)">
+                        <dot-textarea-content
+                            formControlName="body"
+                            #value
+                            height="100%"
+                            formControlName="body"
+                            [show]="['code']"
+                            language="html"
+                            (monacoInit)="initEditor($event)"
+                        ></dot-textarea-content>
+                    </p-tabPanel>
+                </p-tabView>
+            </div>
+            <div class="dot-container-properties__pre-post-loop">
+                <div
+                    class="dot-container-properties__pre-post-loop-inplace"
+                    *ngIf="!vm.showPrePostLoopInput"
+                >
+                    <button
+                        pButton
+                        class="p-button-outlined p-button-secondary"
+                        type="button"
+                        label="ADD PRE AND POST LOOP CODE"
+                    ></button>
+                </div>
+                <div *ngIf="vm.showPrePostLoopInput">
+                    <label>Post-loop</label>
+                    <dot-textarea-content
+                        formControlName="body"
+                        #value
+                        height="100%"
+                        formControlName="body"
+                        [show]="['code']"
+                        language="html"
+                        (monacoInit)="initEditor($event)"
+                    ></dot-textarea-content>
+                </div>
+            </div>
+        </form>
+    </div>
+</ng-container>