[73671][55638] Remove ui-router from Calendars and TeamPlanner

app/components/work_packages/split_create_component.html.erb

@@ -0,0 +1,2 @@
+<%= helpers.angular_component_tag "opce-wp-split-create",
+                                  inputs: { projectIdentifier: @project_identifier } %>

app/components/work_packages/split_create_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+class WorkPackages::SplitCreateComponent < ApplicationComponent
+  def initialize(project_identifier:)
+    super
+
+    @project_identifier = project_identifier
+  end
+end

app/helpers/work_packages/split_view_helper.rb

@@ -33,6 +33,14 @@ def render_work_package_split_view?
     params[:work_package_split_view].present?
   end
 
+  def render_work_package_split_create?
+    params[:work_package_split_create].present?
+  end
+
+  def split_create_instance
+    WorkPackages::SplitCreateComponent.new(project_identifier: params[:project_id])
+  end
+
   def split_view_instance
     WorkPackages::SplitViewComponent.new(id: params[:work_package_id],
                                          tab: params[:tab],

app/views/work_packages/split_create.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag "content-bodyRight" do %>
+  <%= render(split_create_instance) %>
+<% end %>

frontend/src/app/app.module.ts

@@ -144,9 +144,15 @@ import {
 import {
   WorkPackageSplitViewEntryComponent,
 } from 'core-app/features/work-packages/routing/wp-split-view/wp-split-view-entry.component';
+import {
+  WorkPackageSplitCreateEntryComponent,
+} from 'core-app/features/work-packages/routing/wp-split-create/wp-split-create-entry.component';
 import {
   BoardEntryComponent,
 } from 'core-app/features/boards/board/board-partitioned-page/board-entry.component';
+import { CalendarEntryComponent } from 'core-app/features/calendar/calendar-entry.component';
+import { TeamPlannerEntryComponent } from 'core-app/features/team-planner/team-planner/team-planner-entry.component';
+import { TeamPlannerModule } from 'core-app/features/team-planner/team-planner/team-planner.module';
 import {
   StorageLoginButtonComponent,
 } from 'core-app/shared/components/storages/storage-login-button/storage-login-button.component';
@@ -300,6 +306,8 @@ export function runBootstrap(appRef:ApplicationRef) {
     OpenprojectWorkPackageGraphsModule,
     // Calendar module
     OpenprojectCalendarModule,
+    // Team Planner module
+    TeamPlannerModule,
 
     // MyPage
     OpenprojectMyPageModule,
@@ -392,7 +400,10 @@ export class OpenProjectModule implements DoBootstrap {
 
     registerCustomElement('opce-notification-center', InAppNotificationCenterComponent, { injector });
     registerCustomElement('opce-wp-split-view', WorkPackageSplitViewEntryComponent, { injector });
+    registerCustomElement('opce-wp-split-create', WorkPackageSplitCreateEntryComponent, { injector });
     registerCustomElement('opce-board-view', BoardEntryComponent, { injector });
+    registerCustomElement('opce-calendar-view', CalendarEntryComponent, { injector });
+    registerCustomElement('opce-team-planner-view', TeamPlannerEntryComponent, { injector });
     registerCustomElement('opce-wp-full-view', WorkPackageFullViewEntryComponent, { injector });
     registerCustomElement('opce-wp-full-create', WorkPackageFullCreateEntryComponent, { injector });
     registerCustomElement('opce-wp-full-copy', WorkPackageFullCopyEntryComponent, { injector });

frontend/src/app/core/main-menu/submenu.service.ts

@@ -9,31 +9,31 @@ export class SubmenuService {
   reloadSubmenu(selectedQueryId:string|null, sidemenuId?:string):void {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
     const menuIdentifier:string|undefined = sidemenuId ?? this.$state.current.data?.sideMenuOptions?.sidemenuId;
+    if (!menuIdentifier) { return; }
 
-    if (menuIdentifier) {
-      const menu = document.getElementById(menuIdentifier) as FrameElement;
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      const sideMenuOptions = this.$state.$current.data?.sideMenuOptions as { hardReloadOnBaseRoute?:boolean, defaultQuery?:string };
-      const currentSrc = menu.getAttribute('src');
+    const menu = document.getElementById(menuIdentifier) as FrameElement|null;
+    const currentSrc = menu?.getAttribute('src');
+    if (!currentSrc || !menu) { return; }
 
-      if (currentSrc && menu) {
-        const frameUrl = new URL(currentSrc, window.location.origin);
-        const defaultQuery = sideMenuOptions?.defaultQuery;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    const sideMenuOptions = this.$state.$current.data?.sideMenuOptions as { hardReloadOnBaseRoute?:boolean, defaultQuery?:string };
+    const frameUrl = new URL(currentSrc, window.location.origin);
 
-        if (selectedQueryId) {
-          // If there is a default query passed in the route definition, it means that id passed as argument and not as parameter,
-          // e.g. calendars/:id, team_planner/:id, ...
-          // Otherwise, we will just replace the params
-          if (defaultQuery) {
-            frameUrl.search = `?id=${selectedQueryId}`;
-          } else {
-            frameUrl.search = `?query_id=${selectedQueryId}`;
-          }
-        }
+    if (selectedQueryId) {
+      // Prefer the data attribute on the frame, then fall back to route sideMenuOptions,
+      // then default to 'query_id'. Modules with path-based IDs (e.g. calendars/:id)
+      // set data-query-param="id" on the frame.
+      const queryParam = menu.getAttribute('data-query-param')
+        ?? (sideMenuOptions?.defaultQuery ? 'id' : 'query_id');
 
-        // Override the frame src to enforce a reload
-        menu.setAttribute('src', frameUrl.href);
-      }
+      frameUrl.search = `?${queryParam}=${selectedQueryId}`;
+    }
+
+    const newSrc = frameUrl.href;
+    if (menu.getAttribute('src') !== newSrc) {
+      menu.setAttribute('src', newSrc);
+    } else {
+      void menu.reload();
     }
   }
 }

frontend/src/app/core/routing/openproject.routes.ts

@@ -39,8 +39,6 @@ import {
   mobileGuardActivated,
   redirectToMobileAlternative,
 } from 'core-app/shared/helpers/routing/mobile-guard.helper';
-import { TEAM_PLANNER_LAZY_ROUTES } from 'core-app/features/team-planner/team-planner/team-planner.lazy-routes';
-import { CALENDAR_LAZY_ROUTES } from 'core-app/features/calendar/calendar.lazy-routes';
 
 export const OPENPROJECT_ROUTES:Ng2StateDeclaration[] = [
   {
@@ -74,8 +72,6 @@ export const OPENPROJECT_ROUTES:Ng2StateDeclaration[] = [
     url: '/bcf',
     loadChildren: () => import('../../features/bim/ifc_models/openproject-ifc-models.module').then((m) => m.OpenprojectIFCModelsModule),
   },
-  ...TEAM_PLANNER_LAZY_ROUTES,
-  ...CALENDAR_LAZY_ROUTES,
 ];
 
 /**

frontend/src/app/features/boards/board/board-partitioned-page/board-entry.component.ts

@@ -26,7 +26,14 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { ChangeDetectionStrategy, Component, ElementRef, Injector, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Injector,
+  Input,
+  OnDestroy,
+} from '@angular/core';
 import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
 import {
   WorkPackageIsolatedQuerySpaceDirective,
@@ -43,7 +50,7 @@ import { QueryUpdatedService } from 'core-app/features/boards/board/query-update
 @Component({
   selector: 'board-entry',
   hostDirectives: [WorkPackageIsolatedQuerySpaceDirective],
-  template: `<board-partitioned-page [boardId]="boardId" />`,
+  template: '<board-partitioned-page [boardId]="boardId"><board-list-container [boardId]="boardId" /></board-partitioned-page>',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     BoardConfigurationService,
@@ -56,7 +63,7 @@ import { QueryUpdatedService } from 'core-app/features/boards/board/query-update
   ],
   standalone: false,
 })
-export class BoardEntryComponent {
+export class BoardEntryComponent implements OnDestroy {
   @Input() boardId:string;
 
   constructor(
@@ -74,4 +81,8 @@ export class BoardEntryComponent {
     registry.add('subproject', injector.get(BoardSubprojectActionService));
     registry.add('subtasks', injector.get(BoardSubtasksActionService));
   }
+
+  ngOnDestroy() {
+    document.body.classList.remove('router--boards-full-view');
+  }
 }

frontend/src/app/features/boards/board/board-partitioned-page/board-partitioned-page.component.ts

@@ -47,7 +47,7 @@ export function boardCardViewHandlerFactory(injector:Injector) {
 
 @Component({
   selector: 'board-partitioned-page',
-  templateUrl: './board-partitioned-page.component.html',
+  templateUrl: '../../../work-packages/routing/partitioned-query-space-page/primerized-partitioned-query-space-page.component.html',
   styleUrls: [
     '../../../work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.sass',
     './board-partitioned-page.component.sass',

frontend/src/app/features/calendar/calendar.lazy-routes.ts → frontend/src/app/features/calendar/calendar-entry.component.ts

@@ -26,13 +26,33 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Ng2StateDeclaration } from '@uirouter/angular';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+} from '@angular/core';
+import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs';
+import {
+  WorkPackageIsolatedQuerySpaceDirective,
+} from 'core-app/features/work-packages/directives/query-space/wp-isolated-query-space.directive';
 
-export const CALENDAR_LAZY_ROUTES:Ng2StateDeclaration[] = [
-  {
-    name: 'calendar.**',
-    parent: 'optional_project',
-    url: '/calendars',
-    loadChildren: () => import('./openproject-calendar.module').then((m) => m.OpenprojectCalendarModule),
-  },
-];
+@Component({
+  hostDirectives: [WorkPackageIsolatedQuerySpaceDirective],
+  template: '<op-wp-calendar-page [queryId]="queryId"><op-wp-calendar /></op-wp-calendar-page>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
+})
+export class CalendarEntryComponent implements OnDestroy {
+  @Input() queryId:string;
+
+  constructor(readonly elementRef:ElementRef) {
+    populateInputsFromDataset(this);
+    document.body.classList.add('router--calendar');
+  }
+
+  ngOnDestroy() {
+    document.body.classList.add('router--calendar');
+  }
+}