Readd view toggle component

pull/8070/head
Oliver Günther 5 years ago
parent d7908b6540
commit 081a3ee328
No known key found for this signature in database
GPG Key ID: A3A8BDAD7C0C552C
  1. 9
      frontend/src/app/modules/ifc_models/openproject-ifc-models.module.ts
  2. 15
      frontend/src/app/modules/ifc_models/openproject-ifc-models.routes.ts
  3. 3
      frontend/src/app/modules/ifc_models/pages/viewer/ifc-viewer-page.component.html
  4. 94
      frontend/src/app/modules/ifc_models/view-toggle/bim-view-toggle-dropdown.directive.ts
  5. 62
      frontend/src/app/modules/ifc_models/view-toggle/bim-view-toggle.component.ts
  6. 91
      frontend/src/app/modules/ifc_models/view-toggle/bim-view.service.ts

@ -33,7 +33,10 @@ import {IFCViewerComponent} from './ifc-viewer/ifc-viewer.component';
import {IFC_ROUTES} from "core-app/modules/ifc_models/openproject-ifc-models.routes";
import {IFCViewerPageComponent} from "core-app/modules/ifc_models/pages/viewer/ifc-viewer-page.component";
import {BCFContainerComponent} from "core-app/modules/ifc_models/bcf/container/bcf-container.component";
import {BimViewToggleDropdownDirective} from "core-app/modules/ifc_models/view-toggle/bim-view-toggle-dropdown.directive";
import {BimViewToggleComponent} from "core-app/modules/ifc_models/view-toggle/bim-view-toggle.component";
import {EmptyComponent} from "core-app/modules/ifc_models/empty/empty-component";
import {BimViewService} from "core-app/modules/ifc_models/view-toggle/bim-view.service";
@NgModule({
imports: [
@ -43,8 +46,6 @@ import {EmptyComponent} from "core-app/modules/ifc_models/empty/empty-component"
states: IFC_ROUTES
})
],
providers: [
],
declarations: [
// Pages
IFCViewerPageComponent,
@ -53,6 +54,10 @@ import {EmptyComponent} from "core-app/modules/ifc_models/empty/empty-component"
EmptyComponent,
BCFContainerComponent,
// View selector
BimViewToggleComponent,
BimViewToggleDropdownDirective,
IFCViewerComponent
],
exports: [

@ -50,6 +50,9 @@ export const IFC_ROUTES:Ng2StateDeclaration[] = [
name: 'bim.space.list',
url: '/list',
component: IFCViewerPageComponent,
data: {
viewRoute: 'bim.space.defaults',
},
views: {
list: { component: BCFContainerComponent }
}
@ -58,6 +61,9 @@ export const IFC_ROUTES:Ng2StateDeclaration[] = [
name: 'bim.space.defaults',
url: '/defaults',
component: IFCViewerPageComponent,
data: {
viewRoute: 'bim.space.defaults',
},
views: {
viewer: { component: IFCViewerComponent },
list: { component: BCFContainerComponent }
@ -67,6 +73,9 @@ export const IFC_ROUTES:Ng2StateDeclaration[] = [
name: 'bim.space.defaults.model',
url: '/model',
component: IFCViewerPageComponent,
data: {
viewRoute: 'bim.space.defaults',
},
views: {
// Retarget and by that override the grandparent views
// https://ui-router.github.io/guide/views#relative-parent-state
@ -77,6 +86,9 @@ export const IFC_ROUTES:Ng2StateDeclaration[] = [
name: 'bim.space.show',
url: '/{model_id:[0-9]+}',
component: IFCViewerPageComponent,
data: {
viewRoute: 'bim.space.show',
},
views: {
viewer: { component: IFCViewerComponent },
list: { component: BCFContainerComponent }
@ -86,6 +98,9 @@ export const IFC_ROUTES:Ng2StateDeclaration[] = [
name: 'bim.space.show.model',
url: '/model',
component: IFCViewerPageComponent,
data: {
viewRoute: 'bim.space.show',
},
views: {
// Retarget and by that override the grandparent views
// https://ui-router.github.io/guide/views#relative-parent-state

@ -5,6 +5,9 @@
</h2>
</div>
<ul class="toolbar-items">
<li class="toolbar-item">
<bim-view-toggle-button></bim-view-toggle-button>
</li>
<li class="toolbar-item"
*ngIf="manageAllowed">
<a class="button"

@ -0,0 +1,94 @@
//-- copyright
// OpenProject is an open source project management software.
// Copyright (C) 2012-2020 the OpenProject GmbH
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2013 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
//
// See docs/COPYRIGHT.rdoc for more details.
//++
import {OPContextMenuService} from "core-components/op-context-menu/op-context-menu.service";
import {Directive, ElementRef} from "@angular/core";
import {OpContextMenuTrigger} from "core-components/op-context-menu/handlers/op-context-menu-trigger.directive";
import {I18nService} from "core-app/modules/common/i18n/i18n.service";
import {
bimListViewIdentifier,
bimSplitViewIdentifier,
bimViewerViewIdentifier
} from "core-app/modules/ifc_models/view-toggle/bim-view-toggle.component";
import {StateService} from "@uirouter/core";
import {BimViewService} from "core-app/modules/ifc_models/view-toggle/bim-view.service";
@Directive({
selector: '[bimViewDropdown]'
})
export class BimViewToggleDropdownDirective extends OpContextMenuTrigger {
constructor(readonly elementRef:ElementRef,
readonly opContextMenu:OPContextMenuService,
readonly bimView:BimViewService,
readonly I18n:I18nService,
readonly state:StateService) {
super(elementRef, opContextMenu);
}
protected open(evt:JQuery.TriggeredEvent) {
this.buildItems();
this.opContextMenu.show(this, evt);
}
public get locals() {
return {
items: this.items,
contextMenuId: 'bim-view-context-menu'
};
}
private buildItems() {
const current = this.bimView.current;
const viewRoute = this.state.current.data.viewRoute;
this.items = [bimViewerViewIdentifier, bimListViewIdentifier, bimSplitViewIdentifier]
.map(key => {
return {
hidden: key === current,
linkText: this.bimView.text[key],
onClick: () => {
switch (key) {
case bimListViewIdentifier:
this.state.go('bim.space.list');
break;
case bimViewerViewIdentifier:
this.state.go(viewRoute + '.model');
break;
case bimSplitViewIdentifier:
this.state.go(viewRoute);
break;
}
return true;
}
};
});
}
}

@ -0,0 +1,62 @@
// -- copyright
// OpenProject is an open source project management software.
// Copyright (C) 2012-2020 the OpenProject GmbH
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2013 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
//
// See docs/COPYRIGHT.rdoc for more details.
// ++
import {ChangeDetectionStrategy, Component} from '@angular/core';
import {I18nService} from 'core-app/modules/common/i18n/i18n.service';
import {BimViewService} from "core-app/modules/ifc_models/view-toggle/bim-view.service";
export const bimListViewIdentifier = 'list';
export const bimViewerViewIdentifier = 'viewer';
export const bimSplitViewIdentifier = 'split';
@Component({
template: `
<ng-container *ngIf="(view$ | async) as current">
<button class="button"
id="bim-view-toggle-button"
bimViewDropdown>
<span class="button--text"
aria-hidden="true"
[textContent]="bimView.text[current]">
</span>
<op-icon icon-classes="button--icon icon-small icon-pulldown"></op-icon>
</button>
</ng-container>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'bim-view-toggle-button'
})
export class BimViewToggleComponent {
view$ = this.bimView.view.values$();
constructor(readonly I18n:I18nService,
readonly bimView:BimViewService) {
}
}

@ -0,0 +1,91 @@
// -- copyright
// OpenProject is an open source project management software.
// Copyright (C) 2012-2020 the OpenProject GmbH
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2013 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
//
// See docs/COPYRIGHT.rdoc for more details.
// ++
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Injectable, OnDestroy, OnInit} from '@angular/core';
import {I18nService} from 'core-app/modules/common/i18n/i18n.service';
import {DynamicBootstrapper} from "core-app/globals/dynamic-bootstrapper";
import {
WorkPackageViewDisplayRepresentationService,
wpDisplayCardRepresentation,
wpDisplayListRepresentation, wpDisplayRepresentation
} from "core-app/modules/work_packages/routing/wp-view-base/view-services/wp-view-display-representation.service";
import {untilComponentDestroyed} from "ng2-rx-componentdestroyed";
import {WorkPackageViewTimelineService} from "core-app/modules/work_packages/routing/wp-view-base/view-services/wp-view-timeline.service";
import {combineLatest, Observable} from "rxjs";
import {StateService, TransitionService} from "@uirouter/core";
import {input} from "reactivestates";
import {OpenprojectIFCModelsModule} from "core-app/modules/ifc_models/openproject-ifc-models.module";
export const bimListViewIdentifier = 'list';
export const bimViewerViewIdentifier = 'viewer';
export const bimSplitViewIdentifier = 'split';
export type BimViewState = 'list'|'viewer'|'split';
@Injectable({ providedIn: OpenprojectIFCModelsModule })
export class BimViewService implements OnDestroy {
public view = input<BimViewState>();
public text:any = {
list: this.I18n.t('js.ifc_models.views.list'),
viewer: this.I18n.t('js.ifc_models.views.viewer'),
split: this.I18n.t('js.ifc_models.views.split')
};
private transitionFn:Function;
constructor(readonly I18n:I18nService,
readonly transitions:TransitionService,
readonly state:StateService) {
this.detectView();
this.transitionFn = this.transitions.onSuccess({}, (transition) => {
this.detectView();
});
}
get current():BimViewState {
return this.view.getValueOr(bimSplitViewIdentifier);
}
private detectView() {
if (this.state.current.name === 'bim.space.list') {
this.view.putValue(bimListViewIdentifier);
} else if (this.state.includes('bim.**.model')) {
this.view.putValue(bimViewerViewIdentifier);
} else {
this.view.putValue(bimSplitViewIdentifier);
}
}
ngOnDestroy() {
this.transitionFn();
}
}
Loading…
Cancel
Save