From 1fc0ec02a9af491ebee18f99f7bf8e4b70c3ccce Mon Sep 17 00:00:00 2001 From: Sean Engelhardt Date: Thu, 15 Aug 2019 14:40:10 +0200 Subject: [PATCH] Unify motion block detail Changes motion block list to look and feel like all the other lists --- .../motion-block-detail.component.html | 119 ++++++++++-------- .../motion-block-detail.component.scss | 25 ---- .../motion-block-detail.component.ts | 98 +++++++-------- .../block-detail-filter-list.service.spec.ts | 18 +++ .../block-detail-filter-list.service.ts | 83 ++++++++++++ 5 files changed, 211 insertions(+), 132 deletions(-) create mode 100644 client/src/app/site/motions/services/block-detail-filter-list.service.spec.ts create mode 100644 client/src/app/site/motions/services/block-detail-filter-list.service.ts diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html index 49082fbfb..907702532 100644 --- a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html +++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.html @@ -13,70 +13,79 @@ more_vert + + +
+ +
- - + + +
+ + {{ motion.getTitle() }} +
- - -
- - {{ motion.getTitle() }} -
- - -
-
- - {{ getStateLabel(motion) }} - -
-
- - -
- - {{ getRecommendationLabel(motion) }} + +
+
+ + {{ getStateLabel(motion) }}
+
- -
- -
- - + +
+ + {{ getRecommendationLabel(motion) }} + +
+ + +
+ +
+ +
+ +
+ diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.scss b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.scss index 5360da704..988f2348a 100644 --- a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.scss +++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.scss @@ -1,30 +1,5 @@ @import '~assets/styles/tables.scss'; -.block-detail-table { - margin-top: 10px; - height: calc(100vh - 250px); - - ::ng-deep .pbl-ngrid-row { - height: 80px !important; - } - - .pbl-ngrid-column-title { - height: 100%; - } -} - -@media only screen and (max-width: 960px) { - .block-detail-table { - height: calc(100vh - 186px); - } -} - -.motion-block-title { - &.pbl-ngrid-cell { - height: 100%; - } -} - .edit-form { overflow: hidden; } diff --git a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts index df675e646..50758113c 100644 --- a/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts +++ b/client/src/app/site/motions/modules/motion-block/components/motion-block-detail/motion-block-detail.component.ts @@ -6,17 +6,20 @@ import { Title } from '@angular/platform-browser'; import { ActivatedRoute, Router } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; -import { columnFactory, createDS, PblColumnDefinition, PblDataSource } from '@pebula/ngrid'; +import { PblColumnDefinition } from '@pebula/ngrid'; +import { StorageService } from 'app/core/core-services/storage.service'; import { ItemRepositoryService } from 'app/core/repositories/agenda/item-repository.service'; import { MotionBlockRepositoryService } from 'app/core/repositories/motions/motion-block-repository.service'; import { MotionRepositoryService } from 'app/core/repositories/motions/motion-repository.service'; import { PromptService } from 'app/core/ui-services/prompt.service'; +import { ViewportService } from 'app/core/ui-services/viewport.service'; import { MotionBlock } from 'app/shared/models/motions/motion-block'; import { infoDialogSettings } from 'app/shared/utils/dialog-settings'; -import { BaseViewComponent } from 'app/site/base/base-view'; +import { BaseListViewComponent } from 'app/site/base/base-list-view'; import { ViewMotion } from 'app/site/motions/models/view-motion'; import { ViewMotionBlock } from 'app/site/motions/models/view-motion-block'; +import { BlockDetailFilterListService } from 'app/site/motions/services/block-detail-filter-list.service'; /** * Detail component to display one motion block @@ -26,52 +29,48 @@ import { ViewMotionBlock } from 'app/site/motions/models/view-motion-block'; templateUrl: './motion-block-detail.component.html', styleUrls: ['./motion-block-detail.component.scss'] }) -export class MotionBlockDetailComponent extends BaseViewComponent implements OnInit { +export class MotionBlockDetailComponent extends BaseListViewComponent implements OnInit { + /** + * Holds the block ID + */ + private blockId: number; + /** * Determines the block id from the given URL */ public block: ViewMotionBlock; /** - * Data source for the motions in the block + * To quick-filter the list */ - public dataSource: PblDataSource; + public filterProps = ['submitters', 'title', 'identifier']; /** + * Columns to display in table when desktop view is available * Define the columns to show */ - public tableColumnDefinition: PblColumnDefinition[] = []; - - /** - * Define the columns to show - * TODO: The translation will not update when the - */ - public columnSet = columnFactory() - .table( - { - prop: 'title', - label: this.translate.instant('Title'), - width: 'auto' - }, - { - prop: 'state', - label: this.translate.instant('State'), - width: '30%', - minWidth: 60 - }, - { - prop: 'recommendation', - label: this.translate.instant('Recommendation'), - width: '30%', - minWidth: 60 - }, - { - prop: 'remove', - label: '', - width: '40px' - } - ) - .build(); + public tableColumnDefinition: PblColumnDefinition[] = [ + { + prop: 'title', + width: 'auto' + }, + { + prop: 'state', + width: '30%', + minWidth: 60 + }, + { + prop: 'recommendation', + label: this.translate.instant('Recommendation'), + width: '30%', + minWidth: 60 + }, + { + prop: 'remove', + label: '', + width: '40px' + } + ]; /** * The form to edit blocks @@ -105,13 +104,18 @@ export class MotionBlockDetailComponent extends BaseViewComponent implements OnI private route: ActivatedRoute, private router: Router, protected repo: MotionBlockRepositoryService, - protected motionRepo: MotionRepositoryService, + public motionRepo: MotionRepositoryService, private promptService: PromptService, private fb: FormBuilder, private dialog: MatDialog, - private itemRepo: ItemRepositoryService + private itemRepo: ItemRepositoryService, + storage: StorageService, + public filterService: BlockDetailFilterListService, + public vp: ViewportService ) { - super(titleService, translate, matSnackBar); + super(titleService, translate, matSnackBar, storage); + this.blockId = parseInt(this.route.snapshot.params.id, 10); + this.filterService.blockId = this.blockId; } /** @@ -119,22 +123,12 @@ export class MotionBlockDetailComponent extends BaseViewComponent implements OnI * Sets the title, observes the block and the motions belonging in this block */ public ngOnInit(): void { - super.setTitle('Motion block'); - - const blockId = parseInt(this.route.snapshot.params.id, 10); - // pseudo filter this.subscriptions.push( - this.repo.getViewModelObservable(blockId).subscribe(newBlock => { + this.repo.getViewModelObservable(this.blockId).subscribe(newBlock => { if (newBlock) { - super.setTitle(newBlock.getTitle()); + super.setTitle(`${this.translate.instant('Motion block')} - ${newBlock.getTitle()}`); this.block = newBlock; - - this.dataSource = createDS() - .onTrigger(() => { - return this.block.motions; - }) - .create(); } }) ); diff --git a/client/src/app/site/motions/services/block-detail-filter-list.service.spec.ts b/client/src/app/site/motions/services/block-detail-filter-list.service.spec.ts new file mode 100644 index 000000000..e42645689 --- /dev/null +++ b/client/src/app/site/motions/services/block-detail-filter-list.service.spec.ts @@ -0,0 +1,18 @@ +import { TestBed } from '@angular/core/testing'; + +import { E2EImportsModule } from 'e2e-imports.module'; + +import { BlockDetailFilterListService } from './block-detail-filter-list.service'; + +describe('BlockDetailFilterListService', () => { + beforeEach(() => + TestBed.configureTestingModule({ + imports: [E2EImportsModule] + }) + ); + + it('should be created', () => { + const service: BlockDetailFilterListService = TestBed.get(BlockDetailFilterListService); + expect(service).toBeTruthy(); + }); +}); diff --git a/client/src/app/site/motions/services/block-detail-filter-list.service.ts b/client/src/app/site/motions/services/block-detail-filter-list.service.ts new file mode 100644 index 000000000..c291cccc0 --- /dev/null +++ b/client/src/app/site/motions/services/block-detail-filter-list.service.ts @@ -0,0 +1,83 @@ +import { Injectable } from '@angular/core'; + +import { TranslateService } from '@ngx-translate/core'; + +import { OpenSlidesStatusService } from 'app/core/core-services/openslides-status.service'; +import { OperatorService } from 'app/core/core-services/operator.service'; +import { StorageService } from 'app/core/core-services/storage.service'; +import { CategoryRepositoryService } from 'app/core/repositories/motions/category-repository.service'; +import { MotionBlockRepositoryService } from 'app/core/repositories/motions/motion-block-repository.service'; +import { MotionCommentSectionRepositoryService } from 'app/core/repositories/motions/motion-comment-section-repository.service'; +import { WorkflowRepositoryService } from 'app/core/repositories/motions/workflow-repository.service'; +import { TagRepositoryService } from 'app/core/repositories/tags/tag-repository.service'; +import { ConfigService } from 'app/core/ui-services/config.service'; +import { MotionFilterListService } from './motion-filter-list.service'; +import { ViewMotion } from '../models/view-motion'; + +/** + * Filter service for motion blocks + */ +@Injectable({ + providedIn: 'root' +}) +export class BlockDetailFilterListService extends MotionFilterListService { + /** + * Private acessor for the blockId + */ + private _blockId: number; + + /** + * setter for the blockId + */ + public set blockId(id: number) { + this._blockId = id; + } + + /** + * + * @param store + * @param OSStatus + * @param categoryRepo + * @param motionBlockRepo + * @param commentRepo + * @param tagRepo + * @param workflowRepo + * @param translate + * @param operator + * @param config + */ + public constructor( + store: StorageService, + OSStatus: OpenSlidesStatusService, + categoryRepo: CategoryRepositoryService, + motionBlockRepo: MotionBlockRepositoryService, + commentRepo: MotionCommentSectionRepositoryService, + tagRepo: TagRepositoryService, + workflowRepo: WorkflowRepositoryService, + translate: TranslateService, + operator: OperatorService, + config: ConfigService + ) { + super( + store, + OSStatus, + categoryRepo, + motionBlockRepo, + commentRepo, + tagRepo, + workflowRepo, + translate, + operator, + config + ); + } + + /** + * @override from parent + * @param viewMotions + * @return + */ + protected preFilter(viewMotions: ViewMotion[]): ViewMotion[] { + return viewMotions.filter(motion => motion.motion_block_id === this._blockId); + } +}