Replace settings modals with tabbed portal table configuration modal

.gitattributes

@@ -0,0 +1 @@
+app/assets/vendor/* binary

app/assets/stylesheets/content/_modal.sass

@@ -107,28 +107,6 @@ $ng-modal-image-width:   $ng-modal-image-height
   .form--space.-left-spacing
     padding-left: 1rem
 
-  #modal-sorting
-    min-height: 120px
-    .select2-container
-      float: left
-      margin-right: 20px
-      margin-bottom: 0px
-      @media(min-width: 1801px)
-        width: 300px
-      @media(max-width: 1800px)
-        width: 280px
-      @media(max-width: 1400px)
-        width: 230px
-      @media(max-width: 1100px)
-        width: 160px
-      @media(max-width: 800px)
-        width: 120px
-    label.option-label
-      float: left
-      margin-right: 20px
-      input
-        margin-top: 0px
-
   .columns-modal-content
     margin-bottom: 15px
     label
@@ -254,3 +232,17 @@ ul.export-options
 
   .modal--footer
     justify-content: inherit
+
+.wp-table--configuration-modal
+  min-height: 120px
+  max-height: 90vh
+  width: 75vh
+
+  label.option-label
+    float: left
+    margin-right: 20px
+    input
+      margin-top: 0px
+
+  .modal--form-actions
+    margin: 1em 0

app/assets/stylesheets/content/_tabs.sass

@@ -28,7 +28,8 @@
 
 /***** Tabs ****
 
-#content .tabs
+#content .tabs,
+.tabs--container
   position: relative
   height: 2.6em
   margin-bottom: 1.2em

app/assets/stylesheets/content/work_packages/_table_content.sass

@@ -61,7 +61,7 @@
   padding: 0 !important
 
 // Shrink column of details / inline-create icons
-.wp-table--context-menu-column
+.wp-table--configuration-modal--trigger
   width: 60px
   // Center the th icon
   text-align: center !important

app/models/query.rb

@@ -29,7 +29,7 @@
 #++
 
 class Query < ActiveRecord::Base
-  include ::Query::Timelines
+  include Timelines
   include Queries::AvailableFilters
 
   belongs_to :project

app/models/query/timelines.rb

@@ -26,7 +26,7 @@
 #
 # See docs/COPYRIGHT.rdoc for more details.
 #++
-
+#
 module Query::Timelines
   extend ActiveSupport::Concern
 

config/locales/js-en.yml

@@ -357,6 +357,7 @@ en:
     timelines:
       gantt_chart: 'Gantt chart'
       labels:
+        title: 'Label configuration'
         bar: 'Bar labels'
         left: 'Left'
         right: 'Right'
@@ -540,7 +541,6 @@ en:
         group: "Group by"
         group_by_disabled_by_hierarchy: "Group by is disabled due to the hierarchy mode being active."
         hierarchy_disabled_by_group_by: "Hierarchy mode is disabled due to results being grouped by %{column}."
-        hierarchy_mode: "Hierarchy mode"
         sort_ascending: "Sort ascending"
         sort_descending: "Sort descending"
         move_column_left: "Move column left"
@@ -554,10 +554,22 @@ en:
           not_found: "There is no such query"
         text_no_results: "No matching queries were found."
       table:
+        configure_button: 'Configure work package table'
         summary: "Table with rows of work package and columns of work package attributes."
         text_inline_edit: "Most cells of this table are buttons that activate inline-editing functionality of that attribute."
         text_sort_hint: "With the links in the table headers you can sort, group, reorder, remove and add table columns."
         text_select_hint: "Select boxes should be opened with 'ALT' and arrow keys."
+      table_configuration:
+        button: 'Configure this work package table'
+        modal_title: 'Work package table configuration'
+        display_settings: 'Display settings'
+        grouped_mode: "Grouped mode"
+        grouped_hint: "Table results will be grouped by the given attribute."
+        default_mode: "Default mode"
+        hierarchy_mode: "Hierarchy mode"
+        hierarchy_hint: "All filtered table results will be augmented with their ancestors. Hierarchies can be expanded and collapsed."
+        display_sums_hint: "Display sums of all summable attributes in a row below the table results."
+        show_timeline_hint: "Show an interactive gantt chart on the right side of the table. You can change its width by dragging the divider between table and gantt chart."
       tabs:
         overview: Overview
         activity: Activity

frontend/app/angular4-modules.ts

@@ -26,12 +26,11 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-import {InjectionToken, NgModule} from '@angular/core';
+import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {UpgradeModule} from '@angular/upgrade/static';
 import {FormsModule} from '@angular/forms';
 import {TablePaginationComponent} from 'core-app/components/table-pagination/table-pagination.component';
-import {AccessibleByKeyboardDirectiveUpgraded} from 'core-app/ui_components/accessible-by-keyboard-directive-upgraded';
 import {SimpleTemplateRenderer} from 'core-components/angular/simple-template-renderer';
 import {OpIcon} from 'core-components/common/icon/op-icon';
 import {WorkPackagesListComponent} from 'core-components/routing/wp-list/wp-list.component';
@@ -49,11 +48,8 @@ import {WorkPackageTableRelationColumnsService} from 'core-components/wp-fast-ta
 import {WorkPackageTableSelection} from 'core-components/wp-fast-table/state/wp-table-selection.service';
 import {WorkPackageTableSortByService} from 'core-components/wp-fast-table/state/wp-table-sort-by.service';
 import {WorkPackageTableTimelineService} from 'core-components/wp-fast-table/state/wp-table-timeline.service';
-import {
-  WorkPackageInlineCreateComponent,
-} from 'core-components/wp-inline-create/wp-inline-create.component';
+import {WorkPackageInlineCreateComponent,} from 'core-components/wp-inline-create/wp-inline-create.component';
 import {KeepTabService} from 'core-components/wp-single-view-tabs/keep-tab/keep-tab.service';
-import {WorkPackageRelationsService} from 'core-components/wp-relations/wp-relations.service';
 import {WpResizerDirectiveUpgraded} from 'core-components/wp-resizer/wp-resizer.directive';
 import {SortHeaderDirective} from 'core-components/wp-table/sort-header/sort-header.directive';
 import {WorkPackageTablePaginationComponent} from 'core-components/wp-table/table-pagination/wp-table-pagination.component';
@@ -71,16 +67,19 @@ import {
   $rootScopeToken,
   $stateToken,
   $timeoutToken,
-  columnsModalToken, exportModalToken,
-  FocusHelperToken, groupingModalToken,
-  halRequestToken, HalResourceToken,
+  exportModalToken,
+  FocusHelperToken,
+  halRequestToken,
+  HalResourceToken,
   HookServiceToken,
   I18nToken,
   NotificationsServiceToken,
-  PathHelperToken, QueryFilterInstanceResourceToken, QueryResourceToken, saveModalToken,
-  settingsModalToken, shareModalToken,
-  sortingModalToken,
-  timelinesModalToken,
+  PathHelperToken,
+  QueryFilterInstanceResourceToken,
+  QueryResourceToken,
+  saveModalToken,
+  settingsModalToken,
+  shareModalToken,
   TimezoneServiceToken,
   upgradeService,
   upgradeServiceWithToken, UrlParamsHelperServiceToken,
@@ -110,7 +109,6 @@ import {WorkPackageTimelineButtonComponent} from 'core-components/wp-buttons/wp-
 import {WorkPackageZenModeButtonComponent} from 'core-components/wp-buttons/wp-zen-mode-toggle-button/wp-zen-mode-toggle-button.component';
 import {WorkPackageFilterContainerComponent} from 'core-components/filters/filter-container/filter-container.directive';
 import WorkPackageFiltersService from 'core-components/filters/wp-filters/wp-filters.service';
-import {Ng1QueryFiltersComponentWrapper} from 'core-components/filters/query-filters/query-filters-ng1-wrapper.component';
 import {UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
 import {WorkPackageSplitViewComponent} from 'core-components/routing/wp-split-view/wp-split-view.component';
 import {WorkPackageBreadcrumbComponent} from 'core-components/work-packages/wp-breadcrumb/wp-breadcrumb.component';
@@ -188,8 +186,29 @@ import {Ng1RelationsCreateWrapper} from 'core-components/wp-relations/wp-relatio
 import {WpRelationsAutocompleteComponent} from 'core-components/wp-relations/wp-relations-create/wp-relations-autocomplete/wp-relations-autocomplete.upgraded.component';
 import {WpRelationAddChildComponent} from 'core-components/wp-relations/wp-relation-add-child/wp-relation-add-child';
 import {WpRelationParentComponent} from 'core-components/wp-relations/wp-relations-parent/wp-relations-parent.component';
+import {OpModalService} from 'core-components/op-modals/op-modal.service';
+import {WpTableConfigurationModalComponent} from 'core-components/wp-table/configuration-modal/wp-table-configuration.modal';
+import {WpTableConfigurationColumnsTab} from 'core-components/wp-table/configuration-modal/tabs/columns-tab.component';
+import {WpTableConfigurationDisplaySettingsTab} from 'core-components/wp-table/configuration-modal/tabs/display-settings-tab.component';
+import {WpTableConfigurationFiltersTab} from 'core-components/wp-table/configuration-modal/tabs/filters-tab.component';
+import {WpTableConfigurationService} from 'core-components/wp-table/configuration-modal/wp-table-configuration.service';
+import {WpTableConfigurationSortByTab} from 'core-components/wp-table/configuration-modal/tabs/sort-by-tab.component';
+import {WpTableConfigurationTimelinesTab} from 'core-components/wp-table/configuration-modal/tabs/timelines-tab.component';
+import {QueryFilterComponent} from 'core-components/filters/query-filter/query-filter.component';
+import {QueryFiltersComponent} from 'core-components/filters/query-filters/query-filters.component';
+import {FilterDateValueComponent} from 'core-components/filters/filter-date-value/filter-date-value.component';
+import {FilterDateTimeValueComponent} from 'core-components/filters/filter-date-time-value/filter-date-time-value.component';
+import {FilterDateTimesValueComponent} from 'core-components/filters/filter-date-times-value/filter-date-times-value.component';
+import {FilterDatesValueComponent} from 'core-components/filters/filter-dates-value/filter-dates-value.component';
+import {FilterIntegerValueComponent} from 'core-components/filters/filter-integer-value/filter-integer-value.component';
+import {FilterToggledMultiselectValueComponent} from 'core-components/filters/filter-toggled-multiselect-value/filter-toggled-multiselect-value.component';
+import {FilterStringValueComponent} from 'core-components/filters/filter-string-value/filter-string-value.component';
+import {FilterBooleanValueComponent} from 'core-components/filters/filter-boolean-value/filter-boolean-value.component';
+import {OpDatePickerComponent} from 'core-components/wp-edit/op-date-picker/op-date-picker.component';
+import {AccessibleByKeyboardComponent} from 'core-components/a11y/accessible-by-keyboard.component';
 import {WorkPackageFormQueryGroupComponent} from 'core-components/wp-form-group/wp-query-group.component';
 import {WorkPackageFormAttributeGroupComponent} from 'core-components/wp-form-group/wp-attribute-group.component';
+import {WorkPackageRelationsService} from 'core-components/wp-relations/wp-relations.service';
 
 @NgModule({
   imports: [
@@ -213,21 +232,17 @@ import {WorkPackageFormAttributeGroupComponent} from 'core-components/wp-form-gr
     upgradeServiceWithToken('$timeout', $timeoutToken),
     upgradeServiceWithToken('$locale', $localeToken),
     upgradeServiceWithToken('NotificationsService', NotificationsServiceToken),
-    upgradeServiceWithToken('columnsModal', columnsModalToken),
     upgradeServiceWithToken('FocusHelper', FocusHelperToken),
     upgradeServiceWithToken('PathHelper', PathHelperToken),
     upgradeServiceWithToken('halRequest', halRequestToken),
     upgradeServiceWithToken('wpMoreMenuService', wpMoreMenuServiceToken),
     upgradeServiceWithToken('TimezoneService', TimezoneServiceToken),
     upgradeServiceWithToken('v3Path', v3PathToken),
     upgradeServiceWithToken('wpDestroyModal', wpDestroyModalToken),
-    upgradeServiceWithToken('sortingModal', sortingModalToken),
-    upgradeServiceWithToken('groupingModal', groupingModalToken),
     upgradeServiceWithToken('shareModal', shareModalToken),
     upgradeServiceWithToken('saveModal', saveModalToken),
     upgradeServiceWithToken('settingsModal', settingsModalToken),
     upgradeServiceWithToken('exportModal', exportModalToken),
-    upgradeServiceWithToken('timelinesModal', timelinesModalToken),
     upgradeServiceWithToken('UrlParamsHelper', UrlParamsHelperServiceToken),
     upgradeService('wpRelations', WorkPackageRelationsService),
     WorkPackageCacheService,
@@ -285,11 +300,16 @@ import {WorkPackageFormAttributeGroupComponent} from 'core-components/wp-form-gr
     WorkPackageContextMenuHelperService,
     QueryFormDmService,
     TableState,
+
+    // OP Modals service
+    OpModalService,
+    WpTableConfigurationService,
   ],
   declarations: [
     WorkPackagesListComponent,
     OpIcon,
-    AccessibleByKeyboardDirectiveUpgraded,
+    OpDatePickerComponent,
+    AccessibleByKeyboardComponent,
     TablePaginationComponent,
     WorkPackageTablePaginationComponent,
     WorkPackageTimelineHeaderController,
@@ -303,14 +323,25 @@ import {WorkPackageFormAttributeGroupComponent} from 'core-components/wp-form-gr
     WorkPackageDetailsViewButtonComponent,
     WorkPackageTimelineButtonComponent,
     WorkPackageZenModeButtonComponent,
-    WorkPackageFilterContainerComponent,
-    Ng1QueryFiltersComponentWrapper,
     WpResizerDirectiveUpgraded,
     WpCustomActionComponent,
     WpCustomActionsComponent,
     WorkPackageTableSumsRowController,
     SortHeaderDirective,
 
+    // Query filters
+    WorkPackageFilterContainerComponent,
+    QueryFiltersComponent,
+    QueryFilterComponent,
+    FilterBooleanValueComponent,
+    FilterDateValueComponent,
+    FilterDatesValueComponent,
+    FilterDateTimeValueComponent,
+    FilterDateTimesValueComponent,
+    FilterIntegerValueComponent,
+    FilterStringValueComponent,
+    FilterToggledMultiselectValueComponent,
+
     // Add functionality to rails rendered templates
     HideSectionComponent,
     HideSectionLinkComponent,
@@ -393,7 +424,14 @@ import {WorkPackageFormAttributeGroupComponent} from 'core-components/wp-form-gr
     WorkPackageInlineCreateComponent,
 
     // Embedded table
-    WorkPackageEmbeddedTableComponent
+    WorkPackageEmbeddedTableComponent,
+    // Modals
+    WpTableConfigurationModalComponent,
+    WpTableConfigurationColumnsTab,
+    WpTableConfigurationDisplaySettingsTab,
+    WpTableConfigurationFiltersTab,
+    WpTableConfigurationSortByTab,
+    WpTableConfigurationTimelinesTab,
   ],
   entryComponents: [
     WorkPackagesListComponent,
@@ -438,7 +476,15 @@ import {WorkPackageFormAttributeGroupComponent} from 'core-components/wp-form-gr
     WorkPackageEmbeddedTableComponent,
 
     // Relations tab (ng1 -> ng2)
-    WorkPackageRelationsHierarchyComponent
+    WorkPackageRelationsHierarchyComponent,
+
+    // Modals
+    WpTableConfigurationModalComponent,
+    WpTableConfigurationColumnsTab,
+    WpTableConfigurationDisplaySettingsTab,
+    WpTableConfigurationFiltersTab,
+    WpTableConfigurationSortByTab,
+    WpTableConfigurationTimelinesTab,
   ]
 })
 export class OpenProjectModule {

frontend/app/angular4-test-setup.ts

@@ -29,6 +29,8 @@
 // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 // !!!! NEVER CHANGE THE ORDER OF THE REQUIRE IMPORTS !!!!
 // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
+// tslint:disable:ordered-imports
 require('angular');
 require('zone.js');
 require('zone.js/dist/long-stack-trace-zone');

frontend/app/angular4-transition-utils.ts

@@ -37,14 +37,10 @@ export const $localeToken = new InjectionToken<any>('$locale');
 export const $stateToken = new InjectionToken<StateService>('$state');
 
 export const I18nToken = new InjectionToken<op.I18n>('I18n');
-export const columnsModalToken = new InjectionToken<any>('columnsModal');
-export const sortingModalToken = new InjectionToken<any>('sortingModal');
-export const groupingModalToken =  new InjectionToken<any>('groupingModal');
 export const shareModalToken = new InjectionToken<any>('shareModal');
 export const saveModalToken = new InjectionToken<any>('saveModal');
 export const settingsModalToken = new InjectionToken<any>('settingsModal');
 export const exportModalToken = new InjectionToken<any>(' exportModal');
-export const timelinesModalToken = new InjectionToken<any>('timelinesModal');
 
 export const FocusHelperToken = new InjectionToken<any>('FocusHelper');
 export const NotificationsServiceToken = new InjectionToken<any>('NotificationsService');
@@ -57,6 +53,7 @@ export const $httpToken = new InjectionToken<any>('$http');
 export const halResourceFactoryToken = new InjectionToken<any>('halResourceFactory');
 export const wpDestroyModalToken = new InjectionToken<any>('wpDestroyModal');
 export const OpContextMenuLocalsToken = new InjectionToken<any>('CONTEXT_MENU_LOCALS');
+export const OpModalLocalsToken = new InjectionToken<any>('OP_MODAL_LOCALS');
 export const HookServiceToken = new InjectionToken<any>('HookService');
 export const UrlParamsHelperToken = new InjectionToken<any>('UrlParamsHelper');
 export const QueryResourceToken = new InjectionToken<any>('QueryResource');