Skip to content

Commit

Permalink
Extract content of the IncludeProjects modal into a separate componen…
Browse files Browse the repository at this point in the history
…t so that we can re-use it in the rails Primer::Dialog (wip)

[ci skip]
  • Loading branch information
HDinger committed Oct 24, 2024
1 parent 34c0b72 commit 8de597a
Show file tree
Hide file tree
Showing 16 changed files with 388 additions and 155 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<%= render(Primer::Alpha::Dialog.new(
title: I18n.t("js.include_projects.title"),
size: :medium_portrait,
id: MODAL_ID
)) do |dialog| %>
<% dialog.with_header(variant: :large) %>
<% dialog.with_body do %>
<%= helpers.angular_component_tag "opce-include-projects",
inputs: {
showHeaderText: false,
} %>
<% end %>
<% dialog.with_footer do %>
<%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": MODAL_ID })) { I18n.t(:button_cancel) } %>
<%= render(Primer::ButtonComponent.new(
data: {
"close-dialog-id": MODAL_ID,
},
scheme: :primary,
type: :submit)) { I18n.t(:button_apply) } %>
<% end %>
<% end %>
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# 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.
# ++

module WorkPackages
module IncludeProjects
class ModalDialogComponent < ApplicationComponent
MODAL_ID = "op-work-packages-include-projects-dialog"
EXPORT_FORM_ID = "op-work-packages-include-projects-dialog-form"
include OpTurbo::Streamable
include OpPrimer::ComponentHelpers

attr_reader :query, :project, :query_params

def initialize(query:, project:, title:)
super

@query = query
@project = project
@query_params = ::API::V3::Queries::QueryParamsRepresenter.new(query).to_url_query(merge_params: { columns: [], title: })
end
end
end
end
14 changes: 10 additions & 4 deletions app/components/work_packages/index_page_header_component.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,17 @@
end
header.with_breadcrumbs(breadcrumb_items)

header.with_action_dialog(mobile_icon: :"op-include-projects",
header.with_action_button(tag: :a,
mobile_icon: :"op-include-projects",
mobile_label: I18n.t("js.include_projects.toggle_title"),
dialog_arguments: { id: "my_dialog", title: "A great dialog" },
button_arguments: { button_block: project_include_button_callback, test_selector: "project-include-button" }) do |d|
d.with_body { "TODO" }
href: @project.present? ? include_projects_dialog_project_work_packages_path(@project) : include_projects_dialog_work_packages_path(),
aria: { label: I18n.t("js.include_projects.toggle_title") },
title: I18n.t("js.include_projects.toggle_title"),
data: { controller: "async-dialog" },
test_selector: "project-include-button",
rel: "nofollow") do |button|
button.with_leading_visual_icon(icon: :"op-include-projects")
I18n.t("js.include_projects.toggle_title")
end

header.with_action_button(tag: :a,
Expand Down
7 changes: 0 additions & 7 deletions app/components/work_packages/index_page_header_component.rb
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,6 @@ def title
@query&.name ? @query.name : t(:label_work_package_plural)
end

def project_include_button_callback
lambda do |button|
button.with_leading_visual_icon(icon: :"op-include-projects")
I18n.t("js.include_projects.toggle_title")
end
end

def can_rename?
# TODO
true
Expand Down
23 changes: 17 additions & 6 deletions app/controllers/work_packages_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,12 @@ class WorkPackagesController < ApplicationController
:project, only: :show
before_action :check_allowed_export,
:protect_from_unauthorized_export, only: %i[index export_dialog]
before_action :find_optional_project, only: %i[split_view split_create baseline_dialog]
before_action :find_optional_project, only: %i[split_view split_create baseline_dialog include_projects_dialog]
before_action :load_and_authorize_in_optional_project, only: %i[index export_dialog new copy]
authorization_checked! :index, :show, :new, :copy, :export_dialog, :split_view, :split_create, :baseline_dialog
authorization_checked! :index, :show, :new, :copy, :export_dialog, :split_view, :split_create, :baseline_dialog,
:include_projects_dialog

before_action :load_and_validate_query, only: %i[index split_view split_create copy baseline_dialog]
before_action :load_and_validate_query, only: %i[index split_view split_create copy baseline_dialog include_projects_dialog]
before_action :load_work_packages, only: :index, if: -> { request.format.atom? }
before_action :load_and_validate_query_for_export, only: :export_dialog

Expand Down Expand Up @@ -124,11 +125,21 @@ def share_upsale
end

def export_dialog
respond_with_dialog WorkPackages::Exports::ModalDialogComponent.new(query: @query, project: @project, title: params[:title])
respond_with_dialog WorkPackages::Exports::ModalDialogComponent.new(query: @query,
project: @project,
title: params[:title])
end

def baseline_dialog
respond_with_dialog WorkPackages::Baseline::ModalDialogComponent.new(query: @query, project: @project, title: params[:title])
respond_with_dialog WorkPackages::Baseline::ModalDialogComponent.new(query: @query,
project: @project,
title: params[:title])
end

def include_projects_dialog
respond_with_dialog WorkPackages::IncludeProjects::ModalDialogComponent.new(query: @query,
project: @project,
title: params[:title])
end

protected
Expand Down Expand Up @@ -194,7 +205,7 @@ def per_page_param
end

def project
@project ||= work_package ? work_package.project : nil
@project ||= work_package&.project
end

def work_package
Expand Down
2 changes: 2 additions & 0 deletions config/routes.rb
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,7 @@
get "menu" => "work_packages/menus#show"
get "/export_dialog" => "work_packages#export_dialog"
get "/baseline_dialog" => "work_packages#baseline_dialog"
get "/include_projects_dialog" => "work_packages#include_projects_dialog"
end

get "/copy" => "work_packages#copy", on: :member, as: "copy"
Expand Down Expand Up @@ -620,6 +621,7 @@

get "/export_dialog" => "work_packages#export_dialog", on: :collection, as: "export_dialog"
get "/baseline_dialog" => "work_packages#baseline_dialog", on: :collection, as: "baseline_dialog"
get "/include_projects_dialog" => "work_packages#include_projects_dialog", on: :collection, as: "include_projects_dialog"

get "/split_view/update_counter" => "work_packages/split_view#update_counter",
on: :member
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@ import { WorkPackageFullCopyEntryComponent } from 'core-app/features/work-packag
import { WorkPackageFullCreateEntryComponent } from 'core-app/features/work-packages/routing/wp-full-create/wp-full-create-entry.component';
import { WorkPackageFullViewEntryComponent } from 'core-app/features/work-packages/routing/wp-full-view/wp-full-view-entry.component';
import { OpBaselineEntryComponent } from 'core-app/features/work-packages/components/wp-baseline/baseline/baseline-entry.component';
import { OpIncludeProjectsEntryComponent } from 'core-app/shared/components/project-include/project-include-entry.component';

export function initializeServices(injector:Injector) {
return () => {
Expand Down Expand Up @@ -366,6 +367,7 @@ export class OpenProjectModule implements DoBootstrap {
registerCustomElement('opce-wp-full-create', WorkPackageFullCreateEntryComponent, { injector });
registerCustomElement('opce-wp-full-copy', WorkPackageFullCopyEntryComponent, { injector });
registerCustomElement('opce-baseline', OpBaselineEntryComponent, { injector });
registerCustomElement('opce-include-projects', OpIncludeProjectsEntryComponent, { injector });
registerCustomElement('opce-timer-account-menu', TimerAccountMenuComponent, { injector });
registerCustomElement('opce-remote-field-updater', RemoteFieldUpdaterComponent, { injector });
registerCustomElement('opce-modal-single-date-picker', OpModalSingleDatePickerComponent, { injector });
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,10 @@ import { ZenModeButtonComponent } from 'core-app/features/work-packages/componen
import { WorkPackageSettingsButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-settings-button/wp-settings-button.component';
import { QueryResource } from 'core-app/features/hal/resources/query-resource';
import { QueryParamListenerService } from 'core-app/features/work-packages/components/wp-query/query-param-listener.service';
import { OpProjectIncludeComponent } from 'core-app/shared/components/project-include/project-include.component';
import { calendarRefreshRequest } from 'core-app/features/calendar/calendar.actions';
import { ActionsService } from 'core-app/core/state/actions/actions.service';
import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
import { OpProjectIncludeModalComponent } from 'core-app/shared/components/project-include/project-include-modal.component';

@Component({
templateUrl: '../../work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.html',
Expand Down Expand Up @@ -97,7 +97,7 @@ export class WorkPackagesCalendarPageComponent extends PartitionedQuerySpacePage
/** Define the buttons shown in the toolbar */
toolbarButtonComponents:ToolbarButtonComponentDefinition[] = [
{
component: OpProjectIncludeComponent,
component: OpProjectIncludeModalComponent,
},
{
component: WorkPackageFilterButtonComponent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { QueryParamListenerService } from 'core-app/features/work-packages/compo
import { QueryResource } from 'core-app/features/hal/resources/query-resource';
import { WorkPackageSettingsButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-settings-button/wp-settings-button.component';
import { CalendarDragDropService } from 'core-app/features/team-planner/team-planner/calendar-drag-drop.service';
import { OpProjectIncludeComponent } from 'core-app/shared/components/project-include/project-include.component';
import {
EffectCallback,
registerEffectCallbacks,
Expand All @@ -29,6 +28,7 @@ import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decora
import { ActionsService } from 'core-app/core/state/actions/actions.service';
import { OpWorkPackagesCalendarService } from 'core-app/features/calendar/op-work-packages-calendar.service';
import { OpCalendarService } from 'core-app/features/calendar/op-calendar.service';
import { OpProjectIncludeModalComponent } from 'core-app/shared/components/project-include/project-include-modal.component';

@Component({
templateUrl: '../../../work-packages/routing/partitioned-query-space-page/partitioned-query-space-page.component.html',
Expand Down Expand Up @@ -79,7 +79,7 @@ export class TeamPlannerPageComponent extends PartitionedQuerySpacePageComponent
/** Define the buttons shown in the toolbar */
toolbarButtonComponents:ToolbarButtonComponentDefinition[] = [
{
component: OpProjectIncludeComponent,
component: OpProjectIncludeModalComponent,
},
{
component: WorkPackageFilterButtonComponent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ import { ZenModeButtonComponent } from 'core-app/features/work-packages/componen
import { WorkPackageSettingsButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-settings-button/wp-settings-button.component';
import { of } from 'rxjs';
import { WorkPackageFoldToggleButtonComponent } from 'core-app/features/work-packages/components/wp-buttons/wp-fold-toggle-button/wp-fold-toggle-button.component';
import { OpProjectIncludeComponent } from 'core-app/shared/components/project-include/project-include.component';
import { OpBaselineModalComponent } from 'core-app/features/work-packages/components/wp-baseline/baseline-modal/baseline-modal.component';
import { OpProjectIncludeModalComponent } from 'core-app/shared/components/project-include/project-include-modal.component';

@Component({
selector: 'wp-view-page',
Expand All @@ -69,7 +69,7 @@ export class WorkPackageViewPageComponent extends PartitionedQuerySpacePageCompo
},
},
{
component: OpProjectIncludeComponent,
component: OpProjectIncludeModalComponent,
},
{
component: OpBaselineModalComponent,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
//-- 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.
//++

import {
ChangeDetectionStrategy,
Component,
ElementRef,
Input,
} 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';

@Component({
hostDirectives: [WorkPackageIsolatedQuerySpaceDirective],
template: `
<op-project-include
[showHeaderText]="showHeaderText"
[showActionBar]="showActionBar"
></op-project-include>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OpIncludeProjectsEntryComponent {
@Input() showActionBar? = false;
@Input() showHeaderText = true;

constructor(
readonly elementRef:ElementRef,
) {
populateInputsFromDataset(this);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<spot-drop-modal
[opened]="opened"
(closed)="opened = false"
class="op-project-list-modal"
>
<button
slot="trigger"
type="button"
class="button"
(click)="toggleOpen()"
[title]="text.toggle_title"
data-test-selector="project-include-button"
>
{{ text.toggle_title }}
<span
*ngIf="count"
class="badge -secondary"
[textContent]="count"
>
</span>
<span class="spot-icon spot-icon_dropdown"></span>
</button>

<op-project-include
slot="body"
></op-project-include>
</spot-drop-modal>
Loading

0 comments on commit 8de597a

Please sign in to comment.