From fdcf7161f2b9eb1a7663710c13c97647ce4e5bec Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Fri, 4 Oct 2024 14:30:39 +0200 Subject: [PATCH] Show available options for WorkPackage::StatusButtonComponent --- .../hover_card_component.html.erb | 2 +- .../status_button_component.html.erb | 27 +++++++++++---- .../work_packages/status_button_component.rb | 34 +++++++++++++++++-- .../hover-card-modal/hover-card.modal.ts | 8 +---- .../status_button_component_preview.rb | 17 ++++++++++ 5 files changed, 71 insertions(+), 17 deletions(-) create mode 100644 lookbook/previews/open_project/work_packages/status_button_component_preview.rb diff --git a/app/components/work_packages/hover_card_component.html.erb b/app/components/work_packages/hover_card_component.html.erb index 18f87f8d9835..78809f3a4812 100644 --- a/app/components/work_packages/hover_card_component.html.erb +++ b/app/components/work_packages/hover_card_component.html.erb @@ -1,7 +1,7 @@ <%= if @work_package.present? grid_layout('op-wp-hover-card', tag: :div) do |grid| grid.with_area(:status, tag: :div, color: :muted) do - render WorkPackages::StatusButtonComponent.new(work_package: @work_package, button_arguments: { size: :small }) + render WorkPackages::StatusButtonComponent.new(work_package: @work_package, user: helpers.current_user, button_arguments: { size: :small }) end grid.with_area(:id, tag: :div, color: :muted) do diff --git a/app/components/work_packages/status_button_component.html.erb b/app/components/work_packages/status_button_component.html.erb index f64b7ff56a2f..b85e04150fd6 100644 --- a/app/components/work_packages/status_button_component.html.erb +++ b/app/components/work_packages/status_button_component.html.erb @@ -1,11 +1,24 @@ <%= - render(Primer::Alpha::ActionMenu.new(**@menu_arguments)) do |menu| - menu.with_show_button(**@button_arguments) do |button| - button.with_trailing_action_icon(icon: "triangle-down") - 'Placeholder Status' - end + if @editable + render(Primer::Alpha::ActionMenu.new(**@menu_arguments)) do |menu| + menu.with_show_button(**button_arguments) do |button| + button.with_trailing_action_icon(icon: "triangle-down") + button.with_leading_visual_icon(icon: "lock") if readonly? + @status.name + end - menu.with_item { "OPTION 1"} - menu.with_item { "OPTION 2"} + @items.each do |item| + menu.with_item(label: item.name, + content_arguments: { classes: "__hl_inline_status_#{item.id}", + align_items: :center }) do |menu_item| + menu_item.with_trailing_visual_icon(icon: :lock) if item.is_readonly? + end + end + end + else + render(Primer::Beta::Button.new(**button_arguments)) do |button| + button.with_leading_visual_icon(icon: "lock") if readonly? + @status.name + end end %> diff --git a/app/components/work_packages/status_button_component.rb b/app/components/work_packages/status_button_component.rb index 9117548f80f6..9c50c5e09621 100644 --- a/app/components/work_packages/status_button_component.rb +++ b/app/components/work_packages/status_button_component.rb @@ -3,13 +3,43 @@ class WorkPackages::StatusButtonComponent < ApplicationComponent include OpPrimer::ComponentHelpers - def initialize(work_package:, button_arguments: {}, menu_arguments: {}) + def initialize(work_package:, user:, editable: true, button_arguments: {}, menu_arguments: {}) super @work_package = work_package + @user = user @status = work_package.status + @project = work_package.project + + @editable = editable @menu_arguments = menu_arguments + @button_arguments = button_arguments.merge({ classes: "__hl_background_status_#{@status.id}" }) + + @items = available_statusses + end + + def button_title + I18n.t("js.label_edit_status") + end + + def disabled? + !@user.allowed_in_project?(:edit_work_packages, @project) + end + + def readonly? + @status.is_readonly? + end + + def button_arguments + { title: button_title, + disabled: disabled?, + aria: { + label: button_title + } }.deep_merge(@button_arguments) + end - @button_arguments = button_arguments.merge({classes: "__hl_background_status_#{@status.id}"}) + def available_statusses + WorkPackages::UpdateContract.new(@work_package, @user) + .assignable_statuses end end diff --git a/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.ts b/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.ts index b97bba4a17f7..11c50d82f99c 100644 --- a/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.ts +++ b/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.ts @@ -46,12 +46,6 @@ import { shift, } from '@floating-ui/dom'; import { WorkPackageIsolatedQuerySpaceDirective } from 'core-app/features/work-packages/directives/query-space/wp-isolated-query-space.directive'; -import { fromEvent } from 'rxjs'; -import { - filter, - tap, - throttleTime, -} from 'rxjs/operators'; @Component({ templateUrl: './hover-card.modal.html', @@ -76,7 +70,7 @@ export class HoverCardComponent extends OpModalComponent implements OnInit { ngOnInit() { super.ngOnInit(); - this.turboFrameSrc = this.locals.turboFrameSrc; + this.turboFrameSrc = this.locals.turboFrameSrc as string; } public async reposition(element:HTMLElement, target:HTMLElement) { diff --git a/lookbook/previews/open_project/work_packages/status_button_component_preview.rb b/lookbook/previews/open_project/work_packages/status_button_component_preview.rb new file mode 100644 index 000000000000..d695c6b78f64 --- /dev/null +++ b/lookbook/previews/open_project/work_packages/status_button_component_preview.rb @@ -0,0 +1,17 @@ +# frozen_string_literal: true + +module OpenProject::WorkPackages + # @logical_path OpenProject/WorkPackages + class StatusButtonComponentPreview < ViewComponent::Preview + # @display min_height 400px + # @param editable [Boolean] + # @param size [Symbol] select [small, medium, large] + def playground(editable: true, size: :medium) + user = FactoryBot.build_stubbed(:admin) + render(WorkPackages::StatusButtonComponent.new(work_package: WorkPackage.visible.first, + user:, + editable:, + button_arguments: { size: })) + end + end +end