testing sidebar

core-web/apps/dotcms-ui/src/app/api/services/dot-custom-event-handler/dot-custom-event-handler.service.ts

@@ -9,10 +9,10 @@ import {
     DotContentTypeService,
     DotEventsService,
     DotGenerateSecurePasswordService,
+    DotIframeService,
     DotLicenseService,
     DotPropertiesService,
     DotRouterService,
-    DotIframeService,
     DotWorkflowEventHandlerService
 } from '@dotcms/data-access';
 import { DotPushPublishDialogService, DotUiColors } from '@dotcms/dotcms-js';
@@ -22,6 +22,9 @@ import { DotDownloadBundleDialogService } from '@services/dot-download-bundle-di
 import { DotNavLogoService } from '@services/dot-nav-logo/dot-nav-logo.service';
 import { DotUiColorsService } from '@services/dot-ui-colors/dot-ui-colors.service';
 
+// Import our services
+import { DotDrawerService, DotEditContentLayoutComponent, DotEditContentOrchestratorService, EditContentConfig } from '@dotcms/edit-content';
+
 export const COMPARE_CUSTOM_EVENT = 'compare-contentlet';
 
 /**
@@ -49,19 +52,23 @@ export class DotCustomEventHandlerService {
         private dotLicenseService: DotLicenseService,
         private router: Router,
         private dotPropertiesService: DotPropertiesService,
-        private dotContentTypeService: DotContentTypeService
+        private dotContentTypeService: DotContentTypeService,
+        // Add our services
+        private dotEditContentOrchestratorService: DotEditContentOrchestratorService,
+        private dotDrawerService: DotDrawerService
     ) {
         this.dotPropertiesService
             .getKeys([FeaturedFlags.FEATURE_FLAG_CONTENT_EDITOR2_ENABLED])
             .subscribe((response) => {
                 const contentEditorFeatureFlag =
                     response[FeaturedFlags.FEATURE_FLAG_CONTENT_EDITOR2_ENABLED] === 'true';
-
+                console.log('handlers', this.handlers);
                 if (!this.handlers) {
                     this.handlers = {
                         'edit-page': this.goToEditPage.bind(this),
                         'edit-contentlet': contentEditorFeatureFlag
-                            ? this.editContentlet.bind(this)
+                            // ? this.editContentletSidebarPOC.bind(this)
+                            ? this.editContentletDrawerPOC.bind(this)
                             : this.editContentletLegacy.bind(this),
                         'edit-task': contentEditorFeatureFlag
                             ? this.editTask.bind(this)
@@ -216,4 +223,77 @@ export class DotCustomEventHandlerService {
     private shouldRedirectToOldContentEditor(contentType: DotCMSContentType): boolean {
         return !contentType?.metadata?.[FeaturedFlags.FEATURE_FLAG_CONTENT_EDITOR2_ENABLED];
     }
+
+    /**
+     * POC: New method to test sidebar functionality without modifying existing flow
+     */
+    private editContentletSidebarPOC($event: CustomEvent): void {
+        console.log('🔥 POC: Opening content $event', $event);
+
+        const { inode, contentType } = $event.detail.data;
+        console.log('🔥 POC: Opening content editor in modal', inode, contentType);
+
+        // Simple modal configuration for testing
+        const config: EditContentConfig = {
+            inode: inode,
+            contentType,
+            mode: 'edit',
+            onSave: (content) => {
+                console.log('✅ POC: Content saved successfully:', content);
+                // TODO: Add logic to refresh iframe content list
+                this.reloadContentList();
+            },
+            onCancel: () => {
+                console.log('❌ POC: Edit cancelled');
+            }
+        };
+
+        // Open modal with our orchestrator service
+        this.dotEditContentOrchestratorService.openModal(config).subscribe({
+            next: (result) => {
+                console.log('📝 POC: Edit result:', result);
+                if (result.action === 'save') {
+                    console.log('🔄 POC: Refreshing content list...');
+                    this.reloadContentList();
+                }
+            },
+            error: (error) => {
+                console.error('💥 POC: Error opening editor:', error);
+            }
+        });
+    }
+
+    /**
+     * Reload the iframe content list to refresh data after edits
+     */
+    private reloadContentList(): void {
+        // Send a message to the iframe to reload its content
+        this.dotIframeService.run({ name: 'reloadContent' });
+    }
+
+    /**
+     * POC: Test new drawer service functionality
+     */
+    private editContentletDrawerPOC($event: CustomEvent): void {
+        console.log('🎨 POC: Opening contentlet in drawer', $event.detail.data);
+
+        // Simple - only get what we need
+        const { inode, contentType } = $event.detail.data;
+
+        // Use drawer service - SIMPLE!
+        const drawerRef = this.dotDrawerService.create({
+            nzContent: DotEditContentLayoutComponent,
+            nzTitle: `Edit ${contentType}`,
+            nzWidth: '90vw',
+            nzPlacement: 'right',
+            // Only pass what the component needs!
+            nzContentParams: { inode, contentType }
+        });
+
+        drawerRef.afterClose.subscribe((result) => {
+            if (result.type === 'close') {
+                this.reloadContentList();
+            }
+        });
+    }
 }

core-web/apps/dotcms-ui/src/app/app-routing.module.ts

@@ -1,4 +1,4 @@
-import { NgModule, inject } from '@angular/core';
+import { inject, NgModule } from '@angular/core';
 import {
     ActivatedRouteSnapshot,
     Route,
@@ -18,6 +18,9 @@ import { DotExperimentsService, EmaAppConfigurationService } from '@dotcms/data-
 import { dotAnalyticsHealthCheckResolver, DotEnterpriseLicenseResolver } from '@dotcms/ui';
 import { DotCustomReuseStrategyService } from '@shared/dot-custom-reuse-strategy/dot-custom-reuse-strategy.service';
 
+import { DotEditContentOrchestratorService } from '@dotcms/edit-content';
+import { DialogService } from 'primeng/dynamicdialog';
+import { DotCustomEventHandlerService } from './api/services/dot-custom-event-handler/dot-custom-event-handler.service';
 import { AuthGuardService } from './api/services/guards/auth-guard.service';
 import { ContentletGuardService } from './api/services/guards/contentlet-guard.service';
 import { DefaultGuardService } from './api/services/guards/default-guard.service';
@@ -160,6 +163,7 @@ const PORTLETS_IFRAME = [
     {
         canActivateChild: [MenuGuardService],
         path: 'c',
+        providers: [DotEditContentOrchestratorService, DialogService, DotCustomEventHandlerService],
         children: [
             {
                 component: IframePortletLegacyComponent,
@@ -259,4 +263,4 @@ const appRoutes: Routes = [
     ],
     providers: [{ provide: RouteReuseStrategy, useClass: DotCustomReuseStrategyService }]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }

core-web/apps/dotcms-ui/src/app/app.component.ts

@@ -21,7 +21,7 @@ export class AppComponent implements OnInit {
         private dotMessageService: DotMessageService,
         private dotNavLogoService: DotNavLogoService,
         private dotLicense: DotLicenseService
-    ) {}
+    ) { }
 
     ngOnInit() {
         this.dotCmsConfigService

core-web/apps/dotcms-ui/src/app/app.module.ts

@@ -42,4 +42,4 @@ import { SharedModule } from './shared/shared.module';
     providers: [ENV_PROVIDERS],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class AppModule {}
+export class AppModule { }

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/main/dot-edit-page-main/dot-edit-page-main.module.ts

@@ -14,6 +14,9 @@ import { DotExperimentClassDirective } from '@portlets/shared/directives/dot-exp
 
 import { DotEditPageMainComponent } from './dot-edit-page-main.component';
 
+import { DotEditContentOrchestratorService } from '@dotcms/edit-content';
+import { MessageService } from 'primeng/api';
+import { DialogService } from 'primeng/dynamicdialog';
 import { DotEditPageNavModule } from '../dot-edit-page-nav/dot-edit-page-nav.module';
 
 @NgModule({
@@ -28,7 +31,7 @@ import { DotEditPageNavModule } from '../dot-edit-page-nav/dot-edit-page-nav.mod
         OverlayPanelModule,
         DialogModule
     ],
-    providers: [DotRouterService, DotCustomEventHandlerService],
+    providers: [DotRouterService, DotCustomEventHandlerService, DialogService, MessageService, DotEditContentOrchestratorService],
     declarations: [DotEditPageMainComponent]
 })
-export class DotEditPageMainModule {}
+export class DotEditPageMainModule { }

core-web/apps/dotcms-ui/src/app/view/components/_common/iframe/iframe-porlet-legacy/iframe-porlet-legacy.component.ts

@@ -35,7 +35,7 @@ export class IframePortletLegacyComponent implements OnInit, OnDestroy {
         public siteService: SiteService,
         private dotcmsEventsService: DotcmsEventsService,
         private dotIframeService: DotIframeService
-    ) {}
+    ) { }
 
     ngOnInit(): void {
         this.dotRouterService.portletReload$.subscribe((portletId: string) => {

core-web/apps/dotcms-ui/src/app/view/components/_common/iframe/iframe.module.ts

@@ -3,6 +3,8 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
+import { DialogService } from 'primeng/dynamicdialog';
+
 import { DotOverlayMaskModule } from '@components/_common/dot-overlay-mask/dot-overlay-mask.module';
 import { DotSafeUrlPipe } from '@components/_common/iframe/pipes/dot-safe-url/dot-safe-url.pipe';
 import { DotCustomEventHandlerService } from '@dotcms/app/api/services/dot-custom-event-handler/dot-custom-event-handler.service';
@@ -14,6 +16,7 @@ import { IframePortletLegacyComponent } from './iframe-porlet-legacy';
 import { DotIframePortletLegacyResolver } from './service/dot-iframe-porlet-legacy-resolver.service';
 import { IframeOverlayService } from './service/iframe-overlay.service';
 
+import { MessageService } from 'primeng/api';
 import { SearchableDropDownModule } from '../searchable-dropdown/searchable-dropdown.module';
 
 @NgModule({
@@ -30,6 +33,6 @@ import { SearchableDropDownModule } from '../searchable-dropdown/searchable-drop
         DotSafeHtmlPipe,
         DotSafeUrlPipe
     ],
-    providers: [IframeOverlayService, DotCustomEventHandlerService, DotIframePortletLegacyResolver]
+    providers: [IframeOverlayService, DotCustomEventHandlerService, DotIframePortletLegacyResolver, DialogService, MessageService]
 })
-export class IFrameModule {}
+export class IFrameModule { }

core-web/libs/edit-content/src/index.ts

@@ -1,3 +1,12 @@
 export * from './lib/edit-content.routes';
 export * from './lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component';
+export * from './lib/store/edit-content.store';
 export * from './lib/utils/functions.util';
+
+export * from './lib/components/dot-edit-content-layout/dot-edit-content.layout.component';
+export * from './lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component';
+export * from './lib/services/dot-drawer';
+export * from './lib/services/dot-edit-content-orchestrator.service';
+
+
+