diff --git a/Gemfile b/Gemfile index 8af268ad236..2c9db7c6e65 100644 --- a/Gemfile +++ b/Gemfile @@ -382,4 +382,4 @@ end gem 'openproject-octicons', '~>19.8.0' gem 'openproject-octicons_helper', '~>19.8.0' -gem 'openproject-primer_view_components', '~>0.22.2' +gem 'openproject-primer_view_components', '~>0.20.0' diff --git a/Gemfile.lock b/Gemfile.lock index 44b39282895..720531b1b0c 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -756,7 +756,7 @@ GEM actionview openproject-octicons (= 19.8.0) railties - openproject-primer_view_components (0.22.2) + openproject-primer_view_components (0.20.0) actionview (>= 5.0.0) activesupport (>= 5.0.0) openproject-octicons (>= 19.8.0) @@ -1227,7 +1227,7 @@ DEPENDENCIES openproject-octicons (~> 19.8.0) openproject-octicons_helper (~> 19.8.0) openproject-openid_connect! - openproject-primer_view_components (~> 0.22.2) + openproject-primer_view_components (~> 0.20.0) openproject-recaptcha! openproject-reporting! openproject-storages! diff --git a/app/views/augmented/_autocomplete_select_decoration.html.erb b/app/views/augmented/_autocomplete_select_decoration.html.erb index e96307d4305..030e04b84df 100644 --- a/app/views/augmented/_autocomplete_select_decoration.html.erb +++ b/app/views/augmented/_autocomplete_select_decoration.html.erb @@ -2,10 +2,9 @@ <%= content_tag :'opce-select-decoration', {}, data: { - multiple:, + "multiselect": multiple, "input-name": input_name, "input-id": input_id, - "append-to": defined?(append_to) ? append_to : 'body', key:, options: JSON.dump(select_options), } %> diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d06df6d4422..8724aacec69 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -46,7 +46,7 @@ "@ngneat/content-loader": "^7.0.0", "@ngx-formly/core": "^6.1.4", "@openproject/octicons-angular": "^19.8.0", - "@openproject/primer-view-components": "^0.22.2", + "@openproject/primer-view-components": "^0.20.0", "@openproject/reactivestates": "^3.0.1", "@primer/css": "^21.1.1", "@uirouter/angular": "^12.0.0", @@ -4491,9 +4491,9 @@ } }, "node_modules/@oddbird/popover-polyfill": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.3.8.tgz", - "integrity": "sha512-+aK7EHL3VggfsWGVqUwvtli2+kP5OWyseAsrefhzR2XWoi2oALUCeoDn63i5WS3ZOmLiXHRNBwHPeta8w+aM1g==" + "version": "0.3.7", + "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.3.7.tgz", + "integrity": "sha512-WNthEIPPXnFQkumLby6yVxhyOcA/GtMnlByHwEglMO9WZckoaqidnpLp2JFzAh2RDOZxn+Xt3ffSMKId9cPjOQ==" }, "node_modules/@openproject/octicons-angular": { "version": "19.8.0", @@ -4510,9 +4510,9 @@ } }, "node_modules/@openproject/primer-view-components": { - "version": "0.22.2", - "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.22.2.tgz", - "integrity": "sha512-Tiasv9lc/Ey87PuU4ZffzWhZwxp+RBQULD4bFWjOB/03yPGHejHuzl47Ak2IxT/laUUotVFZsIWvo2a5/7H0Kg==", + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.20.0.tgz", + "integrity": "sha512-RWSLLS3PvyXyqXB53l4foQcb4hfOd8l+LWVedOHbYa+8nWVotkgi1TUrZCeIRjIOuTQrmLNx2xyBcmANcktQAw==", "dependencies": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.6.0", @@ -4523,7 +4523,7 @@ "@github/include-fragment-element": "^6.1.1", "@github/relative-time-element": "^4.0.0", "@github/tab-container-element": "^3.1.2", - "@oddbird/popover-polyfill": "^0.3.8", + "@oddbird/popover-polyfill": "^0.3.6", "@primer/behaviors": "^1.3.4" } }, @@ -4595,9 +4595,9 @@ }, "node_modules/@primer/view-components": { "name": "@openproject/primer-view-components", - "version": "0.22.2", - "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.22.2.tgz", - "integrity": "sha512-Tiasv9lc/Ey87PuU4ZffzWhZwxp+RBQULD4bFWjOB/03yPGHejHuzl47Ak2IxT/laUUotVFZsIWvo2a5/7H0Kg==", + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.20.0.tgz", + "integrity": "sha512-RWSLLS3PvyXyqXB53l4foQcb4hfOd8l+LWVedOHbYa+8nWVotkgi1TUrZCeIRjIOuTQrmLNx2xyBcmANcktQAw==", "dependencies": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.6.0", @@ -4608,7 +4608,7 @@ "@github/include-fragment-element": "^6.1.1", "@github/relative-time-element": "^4.0.0", "@github/tab-container-element": "^3.1.2", - "@oddbird/popover-polyfill": "^0.3.8", + "@oddbird/popover-polyfill": "^0.3.6", "@primer/behaviors": "^1.3.4" } }, @@ -23681,9 +23681,9 @@ "optional": true }, "@oddbird/popover-polyfill": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.3.8.tgz", - "integrity": "sha512-+aK7EHL3VggfsWGVqUwvtli2+kP5OWyseAsrefhzR2XWoi2oALUCeoDn63i5WS3ZOmLiXHRNBwHPeta8w+aM1g==" + "version": "0.3.7", + "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.3.7.tgz", + "integrity": "sha512-WNthEIPPXnFQkumLby6yVxhyOcA/GtMnlByHwEglMO9WZckoaqidnpLp2JFzAh2RDOZxn+Xt3ffSMKId9cPjOQ==" }, "@openproject/octicons-angular": { "version": "19.8.0", @@ -23694,9 +23694,9 @@ } }, "@openproject/primer-view-components": { - "version": "0.22.2", - "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.22.2.tgz", - "integrity": "sha512-Tiasv9lc/Ey87PuU4ZffzWhZwxp+RBQULD4bFWjOB/03yPGHejHuzl47Ak2IxT/laUUotVFZsIWvo2a5/7H0Kg==", + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.20.0.tgz", + "integrity": "sha512-RWSLLS3PvyXyqXB53l4foQcb4hfOd8l+LWVedOHbYa+8nWVotkgi1TUrZCeIRjIOuTQrmLNx2xyBcmANcktQAw==", "requires": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.6.0", @@ -23707,7 +23707,7 @@ "@github/include-fragment-element": "^6.1.1", "@github/relative-time-element": "^4.0.0", "@github/tab-container-element": "^3.1.2", - "@oddbird/popover-polyfill": "^0.3.8", + "@oddbird/popover-polyfill": "^0.3.6", "@primer/behaviors": "^1.3.4" } }, @@ -23752,7 +23752,7 @@ "integrity": "sha512-1XRx8FwWxrr8SSZit2C9KxaofTi0CELKbGmHGpmYQmRIAECIa912Emp4BlAC7iQmf3Tb5oZOkke5zuAt+seDxg==", "requires": { "@primer/primitives": "^7.12.0", - "@primer/view-components": "npm:@openproject/primer-view-components@^0.22.2" + "@primer/view-components": "npm:@openproject/primer-view-components@^0.20.0" } }, "@primer/primitives": { @@ -23761,9 +23761,9 @@ "integrity": "sha512-tiJEMxy5hDi9a3YxgrBeJScLPUQSLuWsKDNuoXXiX7zLzejnYdxXXG3qOaNHzNyyn8TkSQkzmKx0ioaSLR2zNw==" }, "@primer/view-components": { - "version": "npm:@openproject/primer-view-components@0.22.2", - "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.22.2.tgz", - "integrity": "sha512-Tiasv9lc/Ey87PuU4ZffzWhZwxp+RBQULD4bFWjOB/03yPGHejHuzl47Ak2IxT/laUUotVFZsIWvo2a5/7H0Kg==", + "version": "npm:@openproject/primer-view-components@0.20.0", + "resolved": "https://registry.npmjs.org/@openproject/primer-view-components/-/primer-view-components-0.20.0.tgz", + "integrity": "sha512-RWSLLS3PvyXyqXB53l4foQcb4hfOd8l+LWVedOHbYa+8nWVotkgi1TUrZCeIRjIOuTQrmLNx2xyBcmANcktQAw==", "requires": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.6.0", @@ -23774,7 +23774,7 @@ "@github/include-fragment-element": "^6.1.1", "@github/relative-time-element": "^4.0.0", "@github/tab-container-element": "^3.1.2", - "@oddbird/popover-polyfill": "^0.3.8", + "@oddbird/popover-polyfill": "^0.3.6", "@primer/behaviors": "^1.3.4" } }, diff --git a/frontend/package.json b/frontend/package.json index 36f3d154367..66462226a54 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -97,7 +97,7 @@ "@ngneat/content-loader": "^7.0.0", "@ngx-formly/core": "^6.1.4", "@openproject/octicons-angular": "^19.8.0", - "@openproject/primer-view-components": "^0.22.2", + "@openproject/primer-view-components": "^0.20.0", "@openproject/reactivestates": "^3.0.1", "@primer/css": "^21.1.1", "@uirouter/angular": "^12.0.0", @@ -175,6 +175,6 @@ "generate-typings": "tsc -d -p src/tsconfig.app.json" }, "overrides": { - "@primer/view-components": "npm:@openproject/primer-view-components@^0.22.2" + "@primer/view-components": "npm:@openproject/primer-view-components@^0.20.0" } } diff --git a/frontend/src/app/shared/components/autocompleter/autocomplete-select-decoration/autocomplete-select-decoration.component.ts b/frontend/src/app/shared/components/autocompleter/autocomplete-select-decoration/autocomplete-select-decoration.component.ts index 57c912fad34..4b25578cfe8 100644 --- a/frontend/src/app/shared/components/autocompleter/autocomplete-select-decoration/autocomplete-select-decoration.component.ts +++ b/frontend/src/app/shared/components/autocompleter/autocomplete-select-decoration/autocomplete-select-decoration.component.ts @@ -27,17 +27,13 @@ //++ import { - AfterViewInit, - Component, - OnInit, - ViewChild, + Component, ElementRef, OnInit, ViewChild, } from '@angular/core'; import { NgSelectComponent } from '@ng-select/ng-select'; +import { I18nService } from 'core-app/core/i18n/i18n.service'; +import { HalResource } from 'core-app/features/hal/resources/hal-resource'; +import { IProjectAutocompleterData } from 'core-app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component'; import { IProjectAutocompleteItem } from 'core-app/shared/components/autocompleter/project-autocompleter/project-autocomplete-item'; -import { - IAutocompleteItem, - OpAutocompleterComponent, -} from 'core-app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component'; type SelectItem = { label:string, value:string, selected?:boolean }; @@ -48,10 +44,10 @@ export const autocompleteSelectDecorationSelector = 'autocomplete-select-decorat @@ -60,10 +56,10 @@ export const autocompleteSelectDecorationSelector = 'autocomplete-select-decorat [items]="options" [labelForId]="labelForId" bindLabel="label" - [multiple]="multiple" + [multiple]="multiselect" [virtualScroll]="true" [ngModel]="selected" - [appendTo]="appendTo" + appendTo="body" [placeholder]="text.placeholder" (ngModelChange)="updateSelection($event)"> @@ -73,11 +69,14 @@ export const autocompleteSelectDecorationSelector = 'autocomplete-select-decorat `, selector: autocompleteSelectDecorationSelector, }) -export class AutocompleteSelectDecorationComponent extends OpAutocompleterComponent implements OnInit, AfterViewInit { +export class AutocompleteSelectDecorationComponent implements OnInit { @ViewChild(NgSelectComponent) public ngSelectComponent:NgSelectComponent; public options:SelectItem[]; + /** Whether we're a multiselect */ + public multiselect = false; + /** Get the selected options */ public selected:SelectItem|SelectItem[]; @@ -87,6 +86,9 @@ export class AutocompleteSelectDecorationComponent extends OpAutocompleterCompon /** The input name we're syncing selections to */ private syncInputFieldName:string; + /** The input id used for label */ + public labelForId:string; + /** The field key (e.g. status, type, or project) */ public key:string; @@ -94,19 +96,24 @@ export class AutocompleteSelectDecorationComponent extends OpAutocompleterCompon placeholder: this.I18n.t('js.placeholders.selection'), }; + constructor( + protected elementRef:ElementRef, + readonly I18n:I18nService, + ) { + } + ngOnInit():void { const element = this.elementRef.nativeElement as HTMLElement; // Set options - this.multiple = element.dataset.multiple === 'true'; - this.labelForId = element.dataset.inputId; + this.multiselect = element.dataset.multiselect === 'true'; + this.labelForId = element.dataset.inputId!; this.key = element.dataset.key!; - this.appendTo = element.dataset.appendTo; // Get the sync target this.syncInputFieldName = element.dataset.inputName!; - // Add Rails multiple identifier if multiple - if (this.multiple) { + // Add Rails multiple identifier if multiselect + if (this.multiselect) { this.syncInputFieldName += '[]'; } @@ -120,7 +127,7 @@ export class AutocompleteSelectDecorationComponent extends OpAutocompleterCompon this.setInitialProjectSelection(); } - if (!this.multiple) { + if (!this.multiselect) { this.selected = (this.selected as SelectItem[])[0]; } @@ -130,11 +137,6 @@ export class AutocompleteSelectDecorationComponent extends OpAutocompleterCompon element.parentElement!.hidden = false; } - // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method - ngAfterViewInit():void { - // do nothing and prevent the parent hook to be called - } - setInitialSelection(data:SelectItem[]):void { this.updateSelection(data.filter((element) => element.selected)); } @@ -183,7 +185,7 @@ export class AutocompleteSelectDecorationComponent extends OpAutocompleterCompon const items = _.castArray(this.selected); if (items.length === 0) return; - if (this.multiple) { + if (this.multiselect) { this.currentProjectSelection = items.map((item:SelectItem) => ({ id: item.value, name: item.label, diff --git a/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.ts b/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.ts index d7cbb1e966b..65a810354fb 100644 --- a/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.ts +++ b/frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.ts @@ -195,7 +195,7 @@ export class OpAutocompleterComponent { +export default class OAuthAccessGrantNudgeModalController extends Controller { connect() { - this.element.showModal(); + this.element.open = true; } } diff --git a/frontend/src/stimulus/controllers/dynamic/storages/open-project-storage-modal.controller.ts b/frontend/src/stimulus/controllers/dynamic/storages/open-project-storage-modal.controller.ts index b27e0cc7150..10b487998a4 100644 --- a/frontend/src/stimulus/controllers/dynamic/storages/open-project-storage-modal.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/storages/open-project-storage-modal.controller.ts @@ -30,8 +30,9 @@ import { Controller } from '@hotwired/stimulus'; import { renderStreamMessage } from '@hotwired/turbo'; +import { ModalDialogElement } from '@openproject/primer-view-components/app/components/primer/alpha/modal_dialog'; -export default class OpenProjectStorageModalController extends Controller { +export default class OpenProjectStorageModalController extends Controller { static values = { projectStorageOpenUrl: String, redirectUrl: String, @@ -42,7 +43,7 @@ export default class OpenProjectStorageModalController extends Controller { this.disconnect(); }); diff --git a/lib/primer/open_project/forms/autocompleter.html.erb b/lib/primer/open_project/forms/autocompleter.html.erb index 5298cd8f2ba..9eb7bbcf65f 100644 --- a/lib/primer/open_project/forms/autocompleter.html.erb +++ b/lib/primer/open_project/forms/autocompleter.html.erb @@ -6,8 +6,7 @@ input_id: builder.field_id(@input.name), select_options: select_options.map(&:to_h), multiple: @autocomplete_options.fetch(:multiple, false), - key: @autocomplete_options.fetch(:resource, ''), - append_to: @autocomplete_options.fetch(:append_to, 'body') + key: @autocomplete_options.fetch(:resource, '') } %> <% else %> <%= angular_component_tag 'opce-autocompleter', diff --git a/modules/meeting/app/components/work_package_meetings_tab/add_work_package_to_meeting_form_component.html.erb b/modules/meeting/app/components/work_package_meetings_tab/add_work_package_to_meeting_form_component.html.erb index 6a449f6915a..f663caa2b5d 100644 --- a/modules/meeting/app/components/work_package_meetings_tab/add_work_package_to_meeting_form_component.html.erb +++ b/modules/meeting/app/components/work_package_meetings_tab/add_work_package_to_meeting_form_component.html.erb @@ -16,7 +16,7 @@ end end flex.with_row do - render(MeetingAgendaItem::MeetingForm.new(f, wrapper_id: 'add-work-package-to-meeting-dialog')) + render(MeetingAgendaItem::MeetingForm.new(f)) end flex.with_row(mt: 3) do render(MeetingAgendaItem::Notes.new(f)) diff --git a/modules/meeting/app/forms/meeting_agenda_item/meeting_form.rb b/modules/meeting/app/forms/meeting_agenda_item/meeting_form.rb index 3617285ef9e..40b19297e2b 100644 --- a/modules/meeting/app/forms/meeting_agenda_item/meeting_form.rb +++ b/modules/meeting/app/forms/meeting_agenda_item/meeting_form.rb @@ -38,8 +38,7 @@ class MeetingAgendaItem::MeetingForm < ApplicationForm caption: I18n.t("label_meeting_selection_caption"), autocomplete_options: { multiple: false, - decorated: true, - append_to: append_to_container + decorated: true } ) do |select| MeetingAgendaItems::CreateContract @@ -54,13 +53,8 @@ class MeetingAgendaItem::MeetingForm < ApplicationForm end end - def initialize(disabled: false, wrapper_id: nil) + def initialize(disabled: false) super() @disabled = disabled - @wrapper_id = wrapper_id - end - - def append_to_container - @wrapper_id.nil? ? 'body' : "##{@wrapper_id}" end end