From b4d6efc3bbb42c96df9a2adcdb7cc411d0e5eb00 Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Tue, 20 Feb 2024 07:02:38 +0100 Subject: [PATCH 01/74] have the same style for WP type in mobile and larger screens --- .../src/global_styles/layout/work_packages/_full_view.sass | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/global_styles/layout/work_packages/_full_view.sass b/frontend/src/global_styles/layout/work_packages/_full_view.sass index c9c209ca57a9..f5f99a590f03 100644 --- a/frontend/src/global_styles/layout/work_packages/_full_view.sass +++ b/frontend/src/global_styles/layout/work_packages/_full_view.sass @@ -152,6 +152,5 @@ // Remove left padding from type padding-left: 0 !important - @media only screen and (min-width: $breakpoint-sm) - .inline-edit--container.-active - width: 130px + .inline-edit--container.-active + width: 130px From d738a13a0e264a5b20b42deaf73ce68fd03cd298 Mon Sep 17 00:00:00 2001 From: ulferts Date: Wed, 31 Jan 2024 21:16:43 +0100 Subject: [PATCH 02/74] reuse angular dragable autocomplter for column selection modal --- .../configure_view_modal_component.html.erb | 26 +++++++++++++++ .../configure_view_modal_component.rb | 33 +++++++++++++++++++ .../index_page_header_component.html.erb | 11 +++++++ frontend/src/app/app.module.ts | 3 ++ .../setup/global-dynamic-components.const.ts | 6 ++++ .../tabs/columns-tab.component.html | 8 ++--- .../draggable-autocomplete.component.ts | 12 +++++-- 7 files changed, 92 insertions(+), 7 deletions(-) create mode 100644 app/components/projects/configure_view_modal_component.html.erb create mode 100644 app/components/projects/configure_view_modal_component.rb diff --git a/app/components/projects/configure_view_modal_component.html.erb b/app/components/projects/configure_view_modal_component.html.erb new file mode 100644 index 000000000000..fef69b70ccf9 --- /dev/null +++ b/app/components/projects/configure_view_modal_component.html.erb @@ -0,0 +1,26 @@ +<%# TODO: I18n %> +<%= render(Primer::Alpha::Dialog.new(title: 'Configure view', + id: MODAL_ID)) do |d| %> + <% d.with_header(variant: :large) %> + + <%= primer_form_with( + url: projects_path, + data: { + controller: "params-from-query", + 'application-target': "dynamic", + 'params-from-query-allowed-value': '["filters", "query_id"]' + }) do |f| %> + <%= render(Primer::Alpha::Dialog::Body.new) do %> + <%= helpers.angular_component_tag 'opce-draggable-autocompleter', + inputs: { + options: [{ id: 'id', name: 'id' }, { id: 'name', name: 'name' }], + autofocus: false, + selected: [{ id: 'id', name: 'id' }] + }%> + <% end %> + <%= render(Primer::Alpha::Dialog::Footer.new(show_divider: true)) do %> + <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": MODAL_ID })) { I18n.t(:button_cancel) } %> + <%= render(Primer::ButtonComponent.new(scheme: :primary)) { I18n.t(:button_apply) } %> + <% end %> + <% end %> +<% end %> diff --git a/app/components/projects/configure_view_modal_component.rb b/app/components/projects/configure_view_modal_component.rb new file mode 100644 index 000000000000..a599a35b6d57 --- /dev/null +++ b/app/components/projects/configure_view_modal_component.rb @@ -0,0 +1,33 @@ +# frozen_string_literal: true + +# -- copyright +# OpenProject is an open source project management software. +# Copyright (C) 2010-2024 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 Projects::ConfigureViewModalComponent < ApplicationComponent + MODAL_ID = 'op-project-list-configure-dialog' +end diff --git a/app/components/projects/index_page_header_component.html.erb b/app/components/projects/index_page_header_component.html.erb index bde1e1c6ab0c..9e39d32c8622 100644 --- a/app/components/projects/index_page_header_component.html.erb +++ b/app/components/projects/index_page_header_component.html.erb @@ -49,6 +49,14 @@ item.with_leading_visual_icon(icon: 'sign-out') end + # TODO: I18n + menu.with_item( + label: 'Configure view', + content_arguments: { 'data-show-dialog-id': Projects::ConfigureViewModalComponent::MODAL_ID } + ) do |item| + item.with_leading_visual_icon(icon: :gear) + end + if query.persisted? menu.with_item( label: t(:button_delete), @@ -87,6 +95,7 @@ <% end %> <% if show_state? %> + <%# TODO: move into a component %> <%= render(Primer::Alpha::Dialog.new(title: t('js.label_export'), id: EXPORT_MODAL_ID)) do |d| d.with_header(variant: :large) @@ -94,4 +103,6 @@ render partial: '/projects/project_export_modal' end end %> + + <%= render(Projects::ConfigureViewModalComponent.new) %> <% end %> diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 3419e89d9d0a..b23dfd05c11b 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -145,6 +145,9 @@ import { import { CkeditorAugmentedTextareaComponent, } from 'core-app/shared/components/editor/components/ckeditor-augmented-textarea/ckeditor-augmented-textarea.component'; +import { + DraggableAutocompleteComponent, +} from 'core-app/shared/components/autocompleter/draggable-autocomplete/draggable-autocomplete.component'; export function initializeServices(injector:Injector) { return () => { diff --git a/frontend/src/app/core/setup/global-dynamic-components.const.ts b/frontend/src/app/core/setup/global-dynamic-components.const.ts index 17d5cd5d4528..1b0053ecea76 100644 --- a/frontend/src/app/core/setup/global-dynamic-components.const.ts +++ b/frontend/src/app/core/setup/global-dynamic-components.const.ts @@ -183,6 +183,10 @@ import { TimerAccountMenuComponent, timerAccountSelector, } from 'core-app/shared/components/time_entries/timer/timer-account-menu.component'; +import { + DraggableAutocompleteComponent, + opDraggableAutocompleteSelector, +} from 'core-app/shared/components/autocompleter/draggable-autocomplete/draggable-autocomplete.component'; export const globalDynamicComponents:OptionalBootstrapDefinition[] = [ { selector: appBaseSelector, cls: ApplicationBaseComponent }, @@ -243,4 +247,6 @@ export const globalDynamicComponents:OptionalBootstrapDefinition[] = [ { selector: remoteFieldUpdaterSelector, cls: RemoteFieldUpdaterComponent }, { selector: timerAccountSelector, cls: TimerAccountMenuComponent }, + + { selector: opDraggableAutocompleteSelector, cls: DraggableAutocompleteComponent }, ]; diff --git a/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tabs/columns-tab.component.html b/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tabs/columns-tab.component.html index 0a5f0eb36475..c59948e2e63b 100644 --- a/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tabs/columns-tab.component.html +++ b/frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tabs/columns-tab.component.html @@ -4,10 +4,10 @@ class="hidden-for-sighted"> - - + +

diff --git a/frontend/src/app/shared/components/autocompleter/draggable-autocomplete/draggable-autocomplete.component.ts b/frontend/src/app/shared/components/autocompleter/draggable-autocomplete/draggable-autocomplete.component.ts index b6566fd43094..953648ef7bb5 100644 --- a/frontend/src/app/shared/components/autocompleter/draggable-autocomplete/draggable-autocomplete.component.ts +++ b/frontend/src/app/shared/components/autocompleter/draggable-autocomplete/draggable-autocomplete.component.ts @@ -7,25 +7,28 @@ import { OnInit, Output, ViewChild, -} from '@angular/core'; + ElementRef } from '@angular/core'; import { I18nService } from 'core-app/core/i18n/i18n.service'; import { NgSelectComponent } from '@ng-select/ng-select'; import { DragulaService, Group } from 'ng2-dragula'; import { DomAutoscrollService } from 'core-app/shared/helpers/drag-and-drop/dom-autoscroll.service'; import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin'; -import { merge } from 'rxjs'; import { setBodyCursor } from 'core-app/shared/helpers/dom/set-window-cursor.helper'; import { repositionDropdownBugfix } from 'core-app/shared/components/autocompleter/op-autocompleter/autocompleter.helper'; import { QueryFilterResource } from 'core-app/features/hal/resources/query-filter-resource'; import { AlternativeSearchService } from 'core-app/shared/components/work-packages/alternative-search.service'; +import { populateInputsFromDataset } from 'core-app/shared/components/dataset-inputs'; +import { merge } from 'rxjs'; export interface DraggableOption { name:string; id:string; } +export const opDraggableAutocompleteSelector = 'opce-draggable-autocompleter'; + @Component({ - selector: 'draggable-autocompleter', + selector: 'opce-draggable-autocompleter', templateUrl: './draggable-autocomplete.component.html', styleUrls: ['./draggable-autocomplete.component.sass'], changeDetection: ChangeDetectionStrategy.OnPush, @@ -58,6 +61,7 @@ export class DraggableAutocompleteComponent extends UntilDestroyedMixin implemen constructor( readonly I18n:I18nService, + readonly elementRef:ElementRef, readonly dragula:DragulaService, readonly alternativeSearchService:AlternativeSearchService, ) { @@ -65,6 +69,8 @@ export class DraggableAutocompleteComponent extends UntilDestroyedMixin implemen } ngOnInit():void { + populateInputsFromDataset(this); + this.updateAvailableOptions(); // Setup groups From c7eec30bdf756d1c833b16f29863750fa602d7ca Mon Sep 17 00:00:00 2001 From: ulferts Date: Thu, 1 Feb 2024 13:17:52 +0100 Subject: [PATCH 03/74] move helper methods to project table/row component --- .../projects/row_component.html.erb | 5 +- app/components/projects/row_component.rb | 79 ++++++++++ app/components/projects/table_component.rb | 32 +++- app/helpers/projects_helper.rb | 147 ------------------ 4 files changed, 110 insertions(+), 153 deletions(-) diff --git a/app/components/projects/row_component.html.erb b/app/components/projects/row_component.html.erb index 6d76a31066d9..9807cbe3fd5e 100644 --- a/app/components/projects/row_component.html.erb +++ b/app/components/projects/row_component.html.erb @@ -37,13 +37,12 @@ See COPYRIGHT and LICENSE files for more details. <% end %> - <% items = helpers.project_more_menu_items(project) %> - <% if items.any? %> + <% if more_menu_items.any? %>