Merge pull request #6918 from opf/fix/table-reloading

Fix reloading wp-table on global query resource

[ci skip]

frontend/src/app/components/modals/save-modal/save-query.modal.ts

@@ -37,6 +37,7 @@ import {OpModalLocalsToken} from "core-components/op-modals/op-modal.service";
 import {OpModalLocalsMap} from "core-components/op-modals/op-modal.types";
 import {QuerySharingChange} from "core-components/modals/share-modal/query-sharing-form.component";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
+import {TableState} from "core-components/wp-table/table-state/table-state";
 
 @Component({
   templateUrl: './save-query.modal.html'
@@ -64,6 +65,7 @@ export class SaveQueryModal extends OpModalComponent {
               @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
               readonly I18n:I18nService,
               readonly states:States,
+              readonly tableState:TableState,
               readonly wpListService:WorkPackagesListService,
               readonly wpNotificationsService:WorkPackageNotificationService,
               readonly cdRef:ChangeDetectorRef,
@@ -90,7 +92,7 @@ export class SaveQueryModal extends OpModalComponent {
     }
 
     this.isBusy = true;
-    const query = this.states.query.resource.value!;
+    const query = this.tableState.query.value!;
     query.public = this.isPublic;
 
     this.wpListService

frontend/src/app/components/modals/share-modal/query-sharing-form.component.ts

@@ -2,6 +2,7 @@ import {States} from '../../states.service';
 import {AuthorisationService} from 'core-app/modules/common/model-auth/model-auth.service';
 import {Component, EventEmitter, Input, Output} from "@angular/core";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
+import {TableState} from "core-components/wp-table/table-state/table-state";
 
 export interface QuerySharingChange {
   isStarred:boolean;
@@ -24,6 +25,7 @@ export class QuerySharingForm {
   };
 
   constructor(readonly states:States,
+              readonly tableState:TableState,
               readonly authorisationService:AuthorisationService,
               readonly I18n:I18nService) {
   }
@@ -35,7 +37,7 @@ export class QuerySharingForm {
   }
 
   public get canPublish() {
-    const form = this.states.query.form.value!;
+    const form = this.tableState.queryForm.value!;
 
     return this.authorisationService.can('query', 'updateImmediately')
       && form.schema.public.writable;

frontend/src/app/components/modals/share-modal/query-sharing.modal.ts

@@ -37,6 +37,7 @@ import {OpModalLocalsToken} from "core-components/op-modals/op-modal.service";
 import {OpModalLocalsMap} from "core-components/op-modals/op-modal.types";
 import {QuerySharingChange} from "core-components/modals/share-modal/query-sharing-form.component";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
+import {TableState} from "core-components/wp-table/table-state/table-state";
 
 @Component({
   templateUrl: './query-sharing.modal.html'
@@ -62,6 +63,7 @@ export class QuerySharingModal extends OpModalComponent implements OnInit {
               @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
               readonly I18n:I18nService,
               readonly states:States,
+              readonly tableState:TableState,
               readonly cdRef:ChangeDetectorRef,
               readonly wpListService:WorkPackagesListService,
               readonly wpNotificationsService:WorkPackageNotificationService,
@@ -72,7 +74,7 @@ export class QuerySharingModal extends OpModalComponent implements OnInit {
   ngOnInit() {
     super.ngOnInit();
 
-    this.query = this.states.query.resource.value!;
+    this.query = this.tableState.query.value!;
 
     this.isStarred = this.query.starred;
     this.isPublic = this.query.public;

frontend/src/app/components/op-context-menu/handlers/op-settings-dropdown-menu.directive.ts

@@ -46,6 +46,7 @@ import {
   selectableTitleIdentifier,
   triggerEditingEvent
 } from "core-components/wp-query-select/wp-query-selectable-title.component";
+import {TableState} from "core-components/wp-table/table-state/table-state";
 
 @Directive({
   selector: '[opSettingsContextMenu]'
@@ -62,6 +63,7 @@ export class OpSettingsMenuDirective extends OpContextMenuTrigger implements OnD
               readonly wpListService:WorkPackagesListService,
               readonly authorisationService:AuthorisationService,
               readonly states:States,
+              readonly tableState:TableState,
               readonly I18n:I18nService) {
 
     super(elementRef, opContextMenu);
@@ -74,7 +76,7 @@ export class OpSettingsMenuDirective extends OpContextMenuTrigger implements OnD
   ngAfterViewInit():void {
     super.ngAfterViewInit();
 
-    this.states.query.resource.values$()
+    this.tableState.query.values$()
       .pipe(
         takeUntil(componentDestroyed(this))
       )
@@ -82,9 +84,9 @@ export class OpSettingsMenuDirective extends OpContextMenuTrigger implements OnD
         this.query = queryUpdate;
       });
 
-    this.loadingPromise = this.states.query.form.valuesPromise();
+    this.loadingPromise = this.tableState.queryForm.valuesPromise();
 
-    this.states.query.form.values$()
+    this.tableState.queryForm.values$()
       .pipe(
         takeUntil(componentDestroyed(this))
       )

frontend/src/app/components/states.service.ts

@@ -45,7 +45,7 @@ export class States extends StatesGroup {
   users = multiInput<UserResource>();
 
   // Work Package query states
-  query = new QueryStates();
+  queries = new QueryAvailableDataStates();
 
   // Current focused work package (e.g, row preselected for details button)
   focusedWorkPackage:InputState<WPFocusState> = input<WPFocusState>();
@@ -61,18 +61,6 @@ export class States extends StatesGroup {
   }
 }
 
-export class QueryStates {
-
-  // the query associated with the table
-  resource = input<QueryResource>();
-
-  // the query form associated with the table
-  form = input<QueryFormResource>();
-
-  // Keep available data
-  available = new QueryAvailableDataStates();
-}
-
 export class QueryAvailableDataStates {
   // Available columns
   columns = input<QueryColumn[]>();

frontend/src/app/components/wp-fast-table/state/wp-table-columns.service.ts

@@ -240,7 +240,7 @@ export class WorkPackageTableColumnsService extends WorkPackageTableBaseService<
 
   // Get the available state
   protected get availableState() {
-    return this.states.query.available.columns;
+    return this.states.queries.columns;
   }
 
   /**

frontend/src/app/components/wp-fast-table/state/wp-table-group-by.service.ts

@@ -101,7 +101,7 @@ export class WorkPackageTableGroupByService extends WorkPackageTableBaseService<
   }
 
   protected get availableState() {
-    return this.states.query.available.groupBy;
+    return this.states.queries.groupBy;
   }
 
   public get current():QueryGroupByResource|undefined {

frontend/src/app/components/wp-fast-table/state/wp-table-sort-by.service.ts

@@ -60,7 +60,7 @@ export class WorkPackageTableSortByService extends WorkPackageTableBaseService<W
   }
 
   public onReadyWithAvailable():Observable<null> {
-    return combine(this.state, this.states.query.available.sortBy)
+    return combine(this.state, this.states.queries.sortBy)
       .values$()
       .pipe(
         mapTo(null)
@@ -141,7 +141,7 @@ export class WorkPackageTableSortByService extends WorkPackageTableBaseService<W
   }
 
   private get availableState() {
-    return this.states.query.available.sortBy;
+    return this.states.queries.sortBy;
   }
 
   public get currentSortBys():QuerySortByResource[] {

frontend/src/app/components/wp-list/wp-list.service.ts

@@ -230,7 +230,7 @@ export class WorkPackagesListService {
    * After the update, the new query is reloaded (e.g. for the work packages)
    */
   public create(query:QueryResource, name:string):Promise<QueryResource> {
-    let form = this.states.query.form.value!;
+    let form = this.tableState.queryForm.value!;
 
     query.name = name;
 
@@ -280,7 +280,7 @@ export class WorkPackagesListService {
   public save(query?:QueryResource) {
     query = query || this.currentQuery;
 
-    let form = this.states.query.form.value!;
+    let form = this.tableState.queryForm.value!;
 
     let promise = this.QueryDm.update(query, form);
 
@@ -302,7 +302,7 @@ export class WorkPackagesListService {
     let promise = this.QueryDm.toggleStarred(query);
 
     promise.then((query:QueryResource) => {
-      this.states.query.resource.putValue(query);
+      this.tableState.query.putValue(query);
 
       this.NotificationsService.addSuccess(this.I18n.t('js.notice_successful_update'));
 
@@ -317,7 +317,7 @@ export class WorkPackagesListService {
   }
 
   private conditionallyLoadForm(query:QueryResource):void {
-    let currentForm = this.states.query.form.value;
+    let currentForm = this.tableState.queryForm.value;
 
     if (!currentForm || query.$links.update.$href !== currentForm.$href) {
       setTimeout(() => this.loadForm(query), 0);
@@ -351,7 +351,7 @@ export class WorkPackagesListService {
   }
 
   public get currentQuery() {
-    return this.states.query.resource.value!;
+    return this.tableState.query.value!;
   }
 
   private handleQueryLoadingError(error:ErrorResource, queryProps:any, queryId?:number, projectIdentifier?:string):Promise<QueryResource> {

frontend/src/app/components/wp-list/wp-states-initialization.service.ts

@@ -52,7 +52,7 @@ export class WorkPackageStatesInitializationService {
     this.clearStates();
 
     // Update the (global) wp query states
-    this.states.query.resource.putValue(query);
+    this.tableState.query.putValue(query);
     this.initializeFromQuery(query, results);
 
     // Update the (local) table states
@@ -76,11 +76,11 @@ export class WorkPackageStatesInitializationService {
     });
 
     this.wpTableFilters.initializeFilters(query, schema);
-    this.states.query.form.putValue(form);
+    this.tableState.queryForm.putValue(form);
 
-    this.states.query.available.columns.putValue(schema.columns.allowedValues);
-    this.states.query.available.sortBy.putValue(schema.sortBy.allowedValues);
-    this.states.query.available.groupBy.putValue(schema.groupBy.allowedValues);
+    this.states.queries.columns.putValue(schema.columns.allowedValues);
+    this.states.queries.sortBy.putValue(schema.sortBy.allowedValues);
+    this.states.queries.groupBy.putValue(schema.groupBy.allowedValues);
   }
 
   public updateTableState(query:QueryResource, results:WorkPackageCollectionResource) {
@@ -110,7 +110,7 @@ export class WorkPackageStatesInitializationService {
   }
 
   public updateChecksum(query:QueryResource, results:WorkPackageCollectionResource) {
-    this.wpListChecksumService.updateIfDifferent(this.states.query.resource.value!, this.wpTablePagination.current);
+    this.wpListChecksumService.updateIfDifferent(this.tableState.query.value!, this.wpTablePagination.current);
     this.authorisationService.initModelAuth('work_packages', results.$links);
   }
 
@@ -158,6 +158,6 @@ export class WorkPackageStatesInitializationService {
     this.tableState.rendered.clear(reason);
 
     // Needed for reinitialization of WpSetComponent
-    this.states.query.resource.clear();
+    this.tableState.query.clear();
   }
 }

frontend/src/app/components/wp-table/configuration-modal/tabs/highlighting-tab.component.ts

@@ -8,6 +8,7 @@ import {HalResource} from "core-app/modules/hal/resources/hal-resource";
 import {States} from "core-app/components/states.service";
 import {WorkPackageTableHighlight} from "core-components/wp-fast-table/wp-table-highlight";
 import {BannersService} from "core-app/modules/common/enterprise/banners.service";
+import {TableState} from "core-components/wp-table/table-state/table-state";
 
 @Component({
   templateUrl: './highlighting-tab.component.html'
@@ -44,6 +45,7 @@ export class WpTableConfigurationHighlightingTab implements TabComponent {
   constructor(readonly injector:Injector,
               readonly I18n:I18nService,
               readonly states:States,
+              readonly tableState:TableState,
               readonly Banners:BannersService,
               readonly wpTableHighlight:WorkPackageTableHighlightingService) {
   }
@@ -117,7 +119,7 @@ export class WpTableConfigurationHighlightingTab implements TabComponent {
   }
 
   public get availableHighlightedAttributes():HalResource[] {
-    const schema = this.states.query.form.value!.schema;
+    const schema = this.tableState.queryForm.value!.schema;
     return schema.highlightedAttributes.allowedValues;
   }
 

frontend/src/app/components/wp-table/table-state/table-state.ts

@@ -22,6 +22,7 @@ import {
 import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';
 import {HighlightingMode} from "core-components/wp-fast-table/builders/highlighting/highlighting-mode.const";
 import {WorkPackageTableHighlight} from "core-components/wp-fast-table/wp-table-highlight";
+import {QueryFormResource} from "core-app/modules/hal/resources/query-form-resource";
 
 @Injectable()
 export class TableState extends StatesGroup {
@@ -35,6 +36,9 @@ export class TableState extends StatesGroup {
   // The query that results in this table state
   query:InputState<QueryResource> = input<QueryResource>();
 
+  // the query form associated with the table
+  queryForm = input<QueryFormResource>();
+
   // the results associated with the table
   results = input<WorkPackageCollectionResource>();
   // Set of work package IDs in strict order of appearance

frontend/src/app/modules/calendar/wp-calendar/wp-calendar.component.ts

@@ -58,7 +58,7 @@ export class WorkPackagesCalendarController implements OnInit, OnDestroy {
     let startDate = (calendarView.start as Moment).format('YYYY-MM-DD');
     let endDate = (calendarView.end as Moment).format('YYYY-MM-DD');
 
-    if (!this.wpTableFilters.currentState && this.states.query.resource.value) {
+    if (!this.wpTableFilters.currentState && this.tableState.query.value) {
       // nothing to do
     } else if (!this.wpTableFilters.currentState) {
       let queryProps = this.defaultQueryProps(startDate, endDate);
@@ -107,12 +107,11 @@ export class WorkPackagesCalendarController implements OnInit, OnDestroy {
   }
 
   private setCalendarsDate() {
-    if (!this.states.query.resource.value) {
+    const query = this.tableState.query.value;
+    if (!query) {
       return;
     }
 
-    let query = this.states.query.resource.value;
-
     let datesIntervalFilter = _.find(query.filters || [], {'id': 'datesInterval'}) as any;
 
     let calendarDate:any = null;

frontend/src/app/modules/work_packages/routing/wp-set/wp-set.component.ts

@@ -115,7 +115,7 @@ export class WorkPackagesSetComponent implements OnInit, OnDestroy {
     this.tableState.ready.fireOnStateChange(this.wpTablePagination.state,
       'Query loaded').values$().pipe(
       untilComponentDestroyed(this),
-      withLatestFrom(this.states.query.resource.values$())
+      withLatestFrom(this.tableState.query.values$())
     ).subscribe(([pagination, query]) => {
       if (this.wpListChecksumService.isQueryOutdated(query, pagination)) {
         this.wpListChecksumService.update(query, pagination);
@@ -134,7 +134,7 @@ export class WorkPackagesSetComponent implements OnInit, OnDestroy {
   }
 
   setupChangeObserver(service:WorkPackageQueryStateService, firstPage:boolean = false) {
-    const queryState = this.states.query.resource;
+    const queryState = this.tableState.query;
 
     this.tableState.ready.fireOnStateChange(service.state, 'Query loaded').values$().pipe(
       untilComponentDestroyed(this),
@@ -142,7 +142,7 @@ export class WorkPackagesSetComponent implements OnInit, OnDestroy {
     ).subscribe(() => {
       const newQuery = queryState.value!;
       const triggerUpdate = service.applyToQuery(newQuery);
-      this.states.query.resource.putValue(newQuery);
+      this.tableState.query.putValue(newQuery);
 
       // Update the current checksum
       this.wpListChecksumService.updateIfDifferent(newQuery, this.wpTablePagination.current);