enable modifying the query - unpersisted yet

frontend/src/app/modules/grids/widgets/wp-table/wp-table.component.ts

@@ -1,24 +1,47 @@
-import {Component, OnInit} from "@angular/core";
+import {Component, OnInit, OnDestroy, ViewChild, AfterViewInit} from "@angular/core";
 import {ApiV3FilterBuilder} from "core-components/api/api-v3/api-v3-filter-builder";
 import {WidgetWpListComponent} from "core-app/modules/grids/widgets/wp-widget/wp-widget.component";
+import {WorkPackageTableConfiguration} from "core-components/wp-table/wp-table-configuration";
+import {QueryResource} from "core-app/modules/hal/resources/query-resource";
+import {I18nService} from "core-app/modules/common/i18n/i18n.service";
+import {IsolatedQuerySpace} from "core-app/modules/work_packages/query-space/isolated-query-space";
+import {untilComponentDestroyed} from 'ng2-rx-componentdestroyed';
+import {WorkPackageIsolatedQuerySpaceDirective} from "core-app/modules/work_packages/query-space/wp-isolated-query-space.directive";
 
 @Component({
   templateUrl: '../wp-widget/wp-widget.component.html',
   styleUrls: ['../wp-widget/wp-widget.component.css']
 })
-export class WidgetWpTableComponent extends WidgetWpListComponent implements OnInit {
+export class WidgetWpTableComponent extends WidgetWpListComponent implements OnInit, OnDestroy, AfterViewInit {
   public text = { title: this.i18n.t('js.grid.widgets.work_packages_table.title') };
-  public queryProps:any;
+  public queryProps = {};
+
+  public configuration:Partial<WorkPackageTableConfiguration> = {
+    actionsColumnEnabled: false,
+    columnMenuEnabled: true,
+    hierarchyToggleEnabled: true,
+    contextMenuEnabled: false
+  };
+
+  @ViewChild(WorkPackageIsolatedQuerySpaceDirective) public querySpaceDirective:WorkPackageIsolatedQuerySpaceDirective;
 
   ngOnInit() {
     super.ngOnInit();
-    // TODO: adapt to arbitrary query
-    let filters = new ApiV3FilterBuilder();
-    filters.add('watcher', '=', ["me"]);
-    filters.add('status', 'o', []);
 
-    this.queryProps = {"columns[]":["id", "project", "type", "subject"],
+  }
-      "filters":filters.toJson()};
+
+  ngAfterViewInit() {
+    this
+      .querySpaceDirective
+      .querySpace
+      .query
+      .values$()
+      .pipe(
+        untilComponentDestroyed(this)
+      ).subscribe(() => console.log('query updated'));
+  }
 
+  ngOnDestroy() {
+    // nothing to do
   }
 }

frontend/src/app/modules/work_packages/query-space/wp-isolated-query-space.directive.ts

@@ -114,7 +114,7 @@ import {debugLog} from "core-app/helpers/debug_output";
 export class WorkPackageIsolatedQuerySpaceDirective {
 
   constructor(private elementRef:ElementRef,
-              private querySpace:IsolatedQuerySpace,
+              public querySpace:IsolatedQuerySpace,
               private injector:Injector) {
     debugLog("Opening isolated query space %O in %O", injector, elementRef.nativeElement);
   }

modules/grids/spec/features/my/my_page_work_package_table_spec.rb

@@ -28,7 +28,7 @@
 
 require 'spec_helper'
 
-describe 'Arbitrary WorkPackage query table widget widget on my page', type: :feature, js: true do
+describe 'Arbitrary WorkPackage query table widget on my page', type: :feature, js: true do
   let!(:type) { FactoryBot.create :type }
   let!(:other_type) { FactoryBot.create :type }
   let!(:priority) { FactoryBot.create :default_priority }
@@ -61,6 +61,10 @@ describe 'Arbitrary WorkPackage query table widget widget on my page', type: :fe
     Pages::My::Page.new
   end
 
+  let(:modal) { ::Components::WorkPackages::TableConfigurationModal.new }
+  let(:filters) { ::Components::WorkPackages::TableConfiguration::Filters.new }
+  let(:columns) { ::Components::WorkPackages::Columns.new }
+
   before do
     login_as user
 
@@ -81,16 +85,52 @@ describe 'Arbitrary WorkPackage query table widget widget on my page', type: :fe
     filter_area.resize_to(6, 4)
 
     filter_area.expect_to_span(2, 3, 7, 5)
-    ## enlarging the accountable area will have moved the created area down
+    ## enlarging the table area will have moved the created area down
     created_area.expect_to_span(7, 4, 13, 6)
 
-    #expect(accountable_area.area)
+    # At the beginning, the default query is displayed
-    #  .to have_selector('.subject', text: accountable_work_package.subject)
+    expect(filter_area.area)
+      .to have_selector('.subject', text: type_work_package.subject)
+
+    expect(filter_area.area)
+      .to have_selector('.subject', text: other_type_work_package.subject)
+
+    # User has the ability to modify the query
+
+    modal.open_and_switch_to('Filters')
+    filters.expect_filter_count(2)
+    filters.add_filter_by('Type', 'is', type.name)
+    modal.save
+
+    columns.remove 'Subject'
+
+    expect(filter_area.area)
+      .to have_selector('.id', text: type_work_package.id)
+
+    # as the Subject column is disabled
+    expect(filter_area.area)
+      .to have_no_selector('.subject', text: type_work_package.subject)
+
+    # As other_type is filtered out
+    expect(filter_area.area)
+      .to have_no_selector('.id', text: other_type_work_package.id)
+
+    # The whole of the configuration survives a reload
+    # as it is persisted in the grid
+
+    visit root_path
+    my_page.visit!
+
+    filter_area = Components::Grids::GridArea.new('.grid--area', text: "Work package table")
+    expect(filter_area.area)
+      .to have_selector('.id', text: type_work_package.id)
 
-    #expect(accountable_area.area)
+    # as the Subject column is disabled
-    #  .to have_no_selector('.subject', text: accountable_by_other_work_package.subject)
+    expect(filter_area.area)
+      .to have_no_selector('.subject', text: type_work_package.subject)
 
-    #expect(accountable_area.area)
+    # As other_type is filtered out
-    #  .to have_no_selector('.subject', text: accountable_but_invisible_work_package.subject)
+    expect(filter_area.area)
+      .to have_no_selector('.id', text: other_type_work_package.id)
   end
 end

spec/support/components/work_packages/columns.rb

@@ -32,9 +32,6 @@ module Components
       include Capybara::DSL
       include RSpec::Matchers
 
-      def initialize
-      end
-
       def expect_column_not_available(name)
         modal_open? or open_modal